Frontend

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별

컴포넌트에서 props로 넘겨주는 함수(위의 예제에서 onChangeId)는 useCallback이 필수적이다.

컴포넌트 분리 기준React 조건문React 반복문

call은 함수 동기적 호출fork는 함수 비동기적 호출put은 액션 dispatch

Next.js를 사용하고 있다면 Redux를 사용하기 위해 next-redux-wrapper 라이브러리를 사용해야한다.예시

currying 기법을 사용한다.다음에 설명하 Higher-Order Component도 currying 기법을 사용한다. Concretely, a higher-order component is a function that takes a component and ret

take: 해당 액션이 dispatch 되면 제너레이터를 next 하는 이펙트

Saga에 동작(예제에서는 watchLogin)을 등록하고takeLatest 또는 takeEvery 둘 중 무엇을 쓸 지 결정하고, 실제 동작 할 login은 따로 작성실제 동작할 코드는 따로 작성

배열 내에 여러 개의 값이 있다면 그중의 단 하나만 다를지라도 리액트는 effect를 재실행(https://ko.reactjs.org/docs/hooks-effect.html이것이 의미하는 바는 다음과 같습니다. count를 useEffect의 두 번째 인수로

React 컴포넌트에서 button 등에 클릭 시 특정 function을 호출하려고 할 때, 조건을 넣으려면 다음과 같이 작성하여야 한다.만약 아래와 같이 작성한다면, 작동은 될 지 모르나, react에서 console창으로 경고를 보낸다.console 경고창

Context context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션

useReducer 이렇게 useReducer를 사용하면 useState와 달리 여러 상태를 한 번에 처리할 수 있기 때문에 관리해야할 상태가 많은 경우 useReducer가 선호됩니다. 주의 React는 dispatch 함수의 동일성이 안정적이고 리렌더링 시에도 변

Next.js는 /user/:id와 같이 동적 주소를 처리하지 못하기 때문에, 동적 주소를 처리하기 위해서는 Next.js와 express를 연결할 필요가 있다.backend 서버에서 했던 것 처럼 front에도 관련 모듈을 설치한 후 express로 서버를 만든다.개

getInitialProps로 서버 데이터 받기, Link 컴포넌트 고급 사용법

console.error(e) 와 console.dir(e) 의 차이점console.dir(e) 은 객체 형식으로 에러를 로깅한다. 서버 요청이 에러가 있다면 response 항목에서 내용을 확인할 수 있다.

표시하여야 할 데이터의 데이터 타입이 Object인 경우 발생하는 에러.

Redux의 단점은 어느 한 reducer에 dipatch할 때, 다른 reducer를 동시에 바꿀 수 없다는 것이다. 이를 해결하기 위한 방법으로 Redux-Saga를 사용할 수 있다.

서버사이드렌더링을 하지 않고 클라이언트에서 유저 관련된 요청을 보낼 때는 브라우저가 쿠키를 같이 동봉하여 요청을 하므로 따로 쿠키를 동봉하는 작업을 하지 않아도 된다.하지만 SSR일 때는 브라우저가 따로 없으므로 개발자가 직접 쿠키를 넣어서 요청을 하여야 한다.

Redux-Saga의 에러를 찾기 위해서는 사가미들웨어에 에러 로깅 미들웨어를 추가하면 된다.

TypeError [ERR_UNESCAPED_CHARACTERS] 에러 해결 방법

useEffect 는 설정에 따라 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 그리고 업데이트 직전, 후에 (특정 props, state가 바뀔 때) 특정 작업을 처리합니다.

1. useRef 일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다. 자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식

mode: development mode: production Next.js Webpack config: { externals: undefined, optimization: { checkWasmTypes: false, nodeEnv: false

React를 최적화할 때 props와 state가 어떻게 변화되는 지 분간하기 힘든 순간이 있다.그럴 때는 다음과 같이 로깅을 해주면 리렌더링 전후에 props나 state가 어떻게 변화하는 지 알 수 있다.

JavaScript ES6 부터 추가된 모듈 시스템과 모듈 시스템의 번들러를 위한 webpack의 동작을 이해하고자 한다. js/math.js에서 export 된 모듈이 js/app.js에서 import된 후 웹팩으로 빌드를 했을 때 어떤 식으로 번들러가 되는 지 알아

Next.js를 사용할 때_app.js에서 특정 컴포넌트 렌더링 시 Layout을 적용 제외하기 위한 방법

Axios delete 요청 시 요청의 본문(body)에 데이터를 함께 전송하는 방법

post, delete 등 axios로 서버에 요청할 때 401에러가 난다면 인자를 똑바로 전달 했는 지 확인할 것.

브라우저와 서버 간 통신 시 Response headers의 Set-Cookie가 있음에도 불구하고, 브라우저에 쿠키가 저장되지 않을 때의 해결법: Axios의 경우 withCredentials: true 옵션을 지정해준다.

Next.js에서 React Portals 적용하기, React에서 Modal이 떴을 때 스크롤 고정하는 방법.

React의 클래스 기반 컴포넌트에서 이벤트 함수를 bind할 때의 주의점과 올바른 방법