왜 데이터의 불변성에 대해서 학습하는가? Redux 미션을 하던 도중. 불변성에 대한 질문을 받았다.그러면 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 무엇인가..?modern JS에 따르면, 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 “레퍼런스를 참조한 다른 객체에서 객체를 변경” 하기 때문이다….. → 의도하지 않은 객체의 변경의 본질적 원인을 파악하기 위해서 이 글을 쓴다.그리고 이 글의 마지막에는 이 결론도 알 것이다. 참조형에서 왜 기존 데이터를 복사해와서 새로운 데이터를 생성하는 것인지 const updatedStudyLogWeek = [ ...studyLogWeeks.slice(0, dayIndex), { ...sele..

Form Tag Elements → 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고, 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 됩니다.value attribute 통해 값에 접근신뢰 가능한 단일 출처 (single source of truth)💡 하나의 상태는 한 곳에만 있어야 한다. useState로 상태를 정의하는 것은 하나의 상태가 한 곳에 있는 것입니다. React에서는 state에 의해 input의 value가 결정되는데 이것을 “신뢰 가능한 단일 출처”라고 합니다.우리가 React에서 State를 정의하고 여러 컴포넌트에서 해당 State를 사용해야 한다면 ..

구현에 필요한 부분만 다음 기술 블로그를 참고하여 작성 한다. https://tech.kakaoenterprise.com/149 실전 Infinite Scroll with React시작하며 안녕하세요. 카카오엔터프라이즈 워크코어개발셀에서 프론트엔드 개발을 담당하고 있는 Denis(배형진) 입니다. 약 1년 전, 저는 프레임워크의 선택, React vs Angular 이라는 포스팅을 통해tech.kakaoenterprise.com Intersection Observer API스크롤 이벤트로 무한 스크롤을 구현하면 리플로우(레이 아웃 계산을 다시 한다 HTML 요소들의 위치, 크기를 재계산한다.)에 좋지 않은 렌더링 성능과 상황에 따라 기대한 대로 동작하지 않을 수 있다는 문제점이 있다. (자세한 사항은 위..

1.  문제 발생프로젝트를 배포하는 과정에서 ESLint 경고가 많이 떴는데대부분의 경고는 쉽게 해결이 가능했지만 해당 경고는 해결하는데 몇시간이 걸렸다.     경고 메시지는 다음과 같았다. naver 지도에서 마커를 추가하는 기능을 구현하면서 생긴 오류였다. useEffect 훅을 사용할 때 발생할 수 있는 대표적인 문제 중 하나는 의존성 배열(dependency array)과 관련된 경고이며 이 문제는 리액트 훅이 컴포넌트의 상태나 prop이 변경될 때 올바르게 동작하도록 보장하는 데서 비롯된다.  즉, 이 경고는 useEffect 내에서 사용된 변수나 함수가 의존성 배열에 포함되지 않으면 생기는 경고 이다.   useEffect의 기본 형태 `useEffect`의 기본 형태는 `useEffect(..

firebase를 이용하여 사용자 관리에서 이미지를 처음에는 velog처럼 파일로 업로드 하기 위해서 데스크탑에서 파일을 찾아 업로드하는 코드를 짜고 firebase에서 기본으로 제공해주는 user의 photoURL 속성에 업로드하려하였는데다음과 같은 오류가 떴다. 이를 해결하는 과정이 너무 오래걸려서 정리해보려고 한다. 처음에는 디버깅 창에 Photo URL too long이라는 오류가 떠서 파일 data url의 길이가 길어서 생기는 오류라고 생각했다.   파일 업로드 코드  const [ImageUrl, setImageUrl] = useState(null); const { userInfo, setUserInfo } = useUserInfoStore(); //... const handlePro..

Path Parameter 1. Path paramete란? URL 로는 고유한 자원(resource, data)을 지칭 할 수 있다. http://haeo2.tistory.com http://naver.com/products 등을 보면 알 수 있듯이 특정 자원을 지칭한다. 하지만 게시물이 여러개가 있다면 게시물의 자원 가변적인 성격을 지니고 있기 때문에 이를 표현할 수 있는 파라미터가 필요하다 http://naver.com/products/1 등으로 가리키는 특정 리소스가 변경될 수 있다. 이를 변수로 지정해 둘 수 있다. 이 가변적인 변수의 이름을 Path Parameter라고 부른다. 백엔드 서버에서는 http://naver.com/products/:id와 같은 형태로 라우팅 할 수 있다. 변수로 ..

https://kasterra.github.io/setting-yarn-berry/ Yarn Berry란? Yarn Berry는 node.js를 위한 새로운 패키지 관리 시스템으로 기존의 깨져있는 npm 패키지 관리 시스템을 혁신적으로 개선한다. 그렇다면 NPM의 문제점은 무엇일까? NPM의 문제점 NPM은 Node.js설치에서 기본으로 제공되어 범용적으로 사용되고 있으나, 비효율적이거나 깨져있는 부분이 많다. NPM은 파일 시스템을 이용하여 의존성을 관리한다. 익숙한 node_modules 폴더를 이용하는 것이 특징이다. 이렇게 관리 했을 때 의존성 검색은 비효율적으로 동작한다. NPM은 패키지를 찾기 위해서 계속 상위 디렉토리의 node_modules 폴더를 탐색한다. 따라서 패키지를 바로 찾지 못할..

1. Access Token Access Token은 말 그대로 인증, 인가 서비스를 구현하기 위한 것이다. 사용자가 로그인을 하면 백엔드 서버에서 토큰을 만들어 헤더에 담아 클라이언트에 전송한다. 클라이언트는 서버에 요청(axios, fetch)을 할 때 서버로부터 받았던 토큰을 함께 전송한다. 서버는 요청과 토큰을 함께 받고 서버에서 토큰을 디코딩하여 로그인한 사용자를 확인한다. Access Token은 한 번 발급되면 강제로 만료 시킬 수 없다는 단점이 있다. 따라서 만료 시칸이 짧은 Refresh Token을 나눠서 사용한다. 2.Cookie 쿠키는 브라우저의 저장소 역할을 한다. 쿠키는 만료 기한이 있는 Key-value 저장소이다. 쿠키 또한 자바스크립트로 접근이 가능하지만, HTTP ONLY..

OAuth 2.0(Open Authorization 2.0)은 인증을 위한 개방형 표준 프로토콜입니다. Resource Owner(사용자) : 리소스 소유자입니다. 본인의 정보에 접근할 수 있는 자격을 승인하는 주체입니다. 예시로 구글 로그인을 할 사용자를 말합니다. Resource Owner는 클라이언트 인증하는 역할을 수행하고, 인증이 완료되면 동의를 통해 권한 획득 자격을 클라이언트에게 부여합니다. Client : Resource Owner의 리소스를 사용하고자 접근 요청을 하는 어플리케이션 ->접근하도록 서비스를 요청(request) Resource Server: Resource Owner의 정보가 저장되어 있는 서버입니다. (server) Authorization Server: 권한 서버입니다...