React ♥️ Next.js

Node.js 설치, Node.js를 사용하는 이유, Yarn 설치, npm/yarn을 사용하는 이유, npm과 Npmjs.com, Next.js 설치

router 객체에 대한 설명, static routing / dynamic routing 차이, Next.js에서 routing 사용하는 방법, 자주 사용하는 router 객체의 기능들

push와 replace의 차이, 뒤로가기 페이지 조작하는 방법

router.pathname, router.asPath, router.query, router.isReady의 의미

Apollo Client용 GraphQL 디버깅 도구 설치하기

export의 default 여부에 따른 import문 작성 방법, 전체 다 한번에 import 받는 방법

JSX: React의 HTML, CSS-IN-JS

클래스형/함수형 Component, 함수형 Comopnent를 도와주는 Hooks

JSX의 return문에 필수인 최상위 태그 대체하는 방법

state 사용 방법, state를 사용하는 이유

비동기로 작동하는 setState의 원리, state의 값이 바뀌는 시점

형제 관계의 컴포넌트끼리 state를 공유하는 방법

각 화면에 맞게 Component를 가공해서 사용하는 방법, component export/import

props 사용 방법, 데이터의 단방향 흐름, emotion(CSS)에서 props 활용하는 방법

container-presentational 패턴, props 객체, 각 폴더의 의미

export의 default 여부에 따른 import문 작성 방법, 전체 다 한번에 import 받는 방법

prev, prevState

위 배열의 값을 바꾸고 화면에 다시 그려줘야 한다면 setState를 활용해야 한다.

defaultValue와 value의 차이, controlled component 제어 컴포넌트, 비제어 컴포넌트

기존에 사용하던 구조는 확장이 거의 불가능한 구조다. (데이터 항목이 추가될 때마다 state와 함수, variables를 추가해줘야 한다.) 확장 가능한 구조로 리팩토링 고고 state 👇🏻 여러 개의 state 선언을 객체 타입의 inputs state로 한번에 묶는다. variables 👇🏻 값을 보낼 때 간편해진다. ![](http...

함수형 컴포넌트와 클래스 컴포넌트의 차이, 클래스의 state, setState, render 함수, router 사용 방법

클래스형 컴포넌트의 생명주기 메서드, render, componentDidMount, componentDidUpdate, componentWillUnmount

함수형 컴포넌트와 클래스형 컴포넌트에서 Ref 사용하는 방법, useRef, createRef

함수형 컴포넌트의 생명주기 훅, life cycle, useEffect, 의존성 배열 dependency array, 추가 렌더링, 무한 루프

rest-api 형태의 open-api 사용하는 방법

이미지 업로드 프로세스, 이미지 업로드하고 게시글 작성하기, 이미지 용량 검증하기, 이미지 형식 검증하기, 파일 input 버튼 바꾸기

<span style=color:<span style=color:<span style=color:즉, 불필요한 서버 연산을 최소화하고 필요한 상태값을 라우터에 넣어서 전달하는 것이다.사용 방법shallow 옵션을 true로 준다.url은 counter=

컴포넌트를 실행하는 방식은 함수를 실행하는 것과 동일하다.즉, 함수형 컴포넌트는 함수를 실행하는 것과 동일하다.기존에 쓰던 방식위의 내용을 풀어서 보면 이렇게 나타난다.props는 함수에 들어가는 arguments(매개변수)에 불과하므로, 꼭 props 라고 쓰지 않아

global state, recoil 설치, recoil 사용방법

브라우저에 주소를 치고 접속하면, 프론트엔드 서버로 접속해서 html, css, js를 다운받아와서 먼저 그림을 그려주고,그 다음에 2차적으로 useQuery 등이 실행되어서 백엔드가 데이터를 꺼내와서 2차적으로 화면에 데이터를 그려준다고 알고있었다.사실 여기에 한단계

새로고침하면 token이 사라지는 이유 임시 저장 공간에 token을 보관 권한 분기: 페이지 별로 로그인 필요 여부를 나눈다. 브라우저의 저장공간 session storage: 브라우저를 끄면 사라진다. localstorage: 영구 저장된다. ex) 비회원 장바

Higher Order Function기존의 onClick은 onClick={onClickChild}라고 작성하면 자동으로 onClickChild(event)가 실행되었다.HOC에서 했던 방식과 동일하게onClick={onClickChild(el)}로 바꾸게 되면, o

HOC, 먼저 실행 컴포넌트, 로그인 여부 확인, 권한 분기

권한 분기 종류, 로그인 권한 분기 로직

api state와 일반 state를 나눠서 사용하게 된 이유

props drilling 없이 데이터 주고받기, recoil 이전에 사용하던 global state

연관 내용 [HOF] >커링(currying)이란 다중 인수를 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다. Currying 인자가 여러개인 함수의 구조를 하나의 인자를 받는 함수로 쪼개는 것이다. 인자가 n개인 함수를 n개로 분리하여 사용

Memoization, 하위 컴포넌트 리렌더링 막기, Profiler, React Developer Tools, memo, useMemo, useCallback

Optimistic UI 말 그대로 낙관적인 UI이다. 전제 조건: 실패할 가능성이 낮고, 실패해도 문제가 없는 데이터에 적용한다. 가이드: 99% 성공 확률이 있을 때만 사용한다. 배제해야 하는 경우 여러 테이블에 데이터를 함께 저장하는 경우, 하나라도 실패하면 전체

useRecoilValueLoadable, selector

<a>태그 새 창에서 열기, 파일 다운로드 받기, 버킷에 저장된 파일 다운로드 받기, cors 에러

react의 폴더 구조, 보일러플레이트의 유래

개발자가 직접 만든 hook을 의미한다.일반 함수와의 차이점은, 함수 내부에서 useState, useEffect등과 같은 hook을 사용하는 함수이다.같은 함수인데, 이름만 custom hook으로 부르는 것이다!💡Why?hook은 일반적인 함수와 다르게 작동하기

기존 html 페이지의 이동 방식이다.a 태그로 이동하게 되면 이동할 페이지를 새로 다운받아서 보여준다.따라서, react/next의 SPA를 활용하지 못하게 되어 비효율적이다.next에서 제공하는 a 태그와 유사한 태그로, SPA를 활용할 수 있다.react/next

Container/Presentational 패턴, Custom Hook 패턴, Atomic 패턴

Class 컴포넌트의 구동 방식 설명을 위해 간소화한 예시로, 실제 구동방식과는 차이가 있다. 위 코드를 실행하고 버튼을 클릭하면 count가 undefined로 출력된다. 주체에 따라서 this가 달라지기 때문이다. 위에서 의도한 this는 Class에서 적어

\[Firebase Docs]규모가 커지면 보안 등의 문제가 생긴다.규칙에서 보안처리를 하는데, 이 부분을 설정하기가 조금 까다롭다.간단하게 서비스를 만들거나 테스트 서비스 검증용으로는 좋은 선택이 될 수 있다.대규모 트래픽이 있는 메인 서비스로는 좀....But, 프

react-slick 설치 후 app.tsx에서 발생한 에러이다.👉🏻 'Component'은(는) JSX 구성 요소로 사용할 수 없습니다.라이브러리 설치 후 위와 같은 에러가 발생한다면, React 버전 오류일 수 있다.라이브러리를 만들 때 사용한 리액트의 버전과