React_Advance

소개 App에서 모든 상태의 로직 관리 컴포넌트 state 업데이트하면 App 컴포넌트 re-rendering됨 상위 컴포넌트 re-rendering하면 하위 컴포넌트도 re-rendering됨 여러개의 컴포넌트 거쳐 props 전달해야함 리덕스 : 상태 관리의 로

동기적 처리요청이 끝날 때까지 대기하는 중지됨요청 처리로 인한 중지가 끝나야만 다음 작업 처리 가능비동기적 처리어플리케이션 멈추지 않음여러가지 요청 처리 가능요청 처리 기다리며 다른 함수 호출 가능콜백 함수 사용, Promise (async/await)setTimeou

여러 컴포넌트를 거쳐 props 사용 시 기존의 top->bottom 흐름으로 많은 컴포넌트 거치거나 데이터가 많아지는 경우 유지 보수성 낮아짐Context 만들어 한번에 원하는 값 받아옴createContext 함수를 사용해 Context 생성파라미터로 해당 Cont

페이지 이동에 따른 html 받아와 로딩할 때마다 서버에 리소스 전달 받아 해석 후 화면에 보여줌사전에 html 파일 생성하거나 데이터에 따른 유동적인 html 생성하는 템플릿 엔진 사용화면 전환마다 html 서버에 요청 시 UI 상태 유지 어려움, 불필요한 로딩있어

서버 포트를 4000번 열고, 서버에 접속하면 "hello world" 텍스트 반환코드 작성 : index.js서버 실행실행화면app.use 함수를 사용해 미들웨어 함수를 애플리케이션에 등록미들웨어 함수 구조ctx : 웹 요청과 응답에 대한 정보 지님next : 현재

상태에 어떠한 변화가 필요하면 발생액션 객체 : type 필드 필수 (액션 이름): 그 외 값은 상태 업데이트 시 참고액션 객체 만드는 함수변화 발생시키기 위해 액션 객체 만들어야 함이를 매번 작성하는 번거로움 피하기 위해 함수 만들어 관리변화를 일으키는 함수액션 만들

프로젠테이셔널 컴포넌트: 상태 관리 X: props 받아와 화면에 UI 보여주기만 함컨테이너 컴포넌트: 리덕스와 연동된 컴포넌트: 리덕스로부터 상태 받아와 리덕스 스토어에 액션을 디스패치숫자 더하기/빼기components/Todos.jsApp.jsDucks 패턴 사용:

✔ MongoDB란 ✔ MongoDB 서버 준비 & 적용 1. .env 환경변수 파일 생성 .env 환경 변수에 사용할 포트와 MongoDB 주소 넣기 src/index.js dontev 불러와 config() 함수 호출 process.env 통해 Node.

✔ 세션 기반 인증 시스템 ✔ 토큰 기반 인증 시스템 ✔ User 스키마/모델 만들기 ✔ 회원 인증 API 만들기 1. 회원가입 구현 2. 로그인 구현 ✔ 토큰 발급 및 검증 1. 비밀키 설정 2. 토큰 발급 3. 토큰 검증하기 4. 토큰 재발급하기