React

constructorrendercomponentDidMount최초 렌더가 되고 나서 불리는 메소드state변경 or fetch or 여러 비동기적 처리 등사용이유 데이터를 받아오기 때문에rendercomponentDidUpdate (setState 되었기 때문

React에는 4가지의 Built-in HooksuseState - 기본 & 핵심useEffect - 기본 & 핵심useRefuseReducerHooks란?함수 컴포넌트에서 React state &생명주기 기능(lifecycle features)을 “연동(hook in

useReducer useReducer 란? > useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hooks > 리듀서 란? > 현재 상태, 액션 값(업데이트를 위해 필요한 정보를

3가지 hook의 구체적인 차이3가지 hooks의 공통점은 dependency 관계의 변수 값 변화에 따라 연동되어 실행됩니다. 매우 유사한 기능을 수행한다고 생각해서 구체적인 차이가 무엇인지 비교하기 위해 학습하게 되었습니다. memoization이란, 컴퓨터 프로그

테스트를 할 때: 필수적master branch 금지 (유저 볼 수 있음)레이아웃 영향 多 순서, 인접 속성끼리 묶어서 작성속성 순서 \- Layout Properties (position, float, clear, display) \- Box

사용하는 경우데이터가 많아서, 한 화면에 전부 보여줄 수 없는 경우프/백 양 쪽에서 모두 구현해야 함프론트 전달 사항쿼리 스트링(Query String) 사용limit : 한 페이지에 보여줄 데이터 수offset : 데이터가 시작하는 위치(index)url에서 ? 기호

중복 로직 줄이기 (event 객체 사용)_ +, - 연산 sort 로직 (인자에 따라 다른 결과값을 반환) 줄이기 query string 파싱 함수 재사용

라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing)방법 (2가지)Query parametersURL parametershistory이 객체를 통해 push, replace 를 통해 다른 경로로 이동 or 앞 뒤 페이

브라우저, Node.js를 위한 Promise api를 활용하는 HTTP 비동기 통신 라이브러리 = 백과 프론트랑 통신을 쉽게 하기 위해 AjAX랑 더불어 사용 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용P

함수형: x (가비지컬렉팅=1번 실행→ 메모리 상 제거)→ hooks는 클로저 원리 이용해서 state 저장클래스형 : o함수형 : o (hooks 를 통해서)클래스형 : o함수형 : hooks: 로직 분리 시킴 → 로직 재사용 가능클래스형 : 어렵 (action과 분

상태 업데이트 까다로울 때 좋음구조가 복잡한 객체도 쉽고 짧은 코드를 사용 → 불변성 유지 + 업데이트 가능리덕스편의를 위한 것필수 x사용 시 → 생산성 ↑$ yarn add immer1번째 파라미터수정하고 싶은 상태2번째 파라미터상태를 어떻게 업데이트할지 정의하는 함

useState(createBulkTodo()) 의 경우 → 리렌더링될 때마다 createBulkTodo 함수 호출 useState(createBulkTodo)의 경우 == 파라미터: 함수 형태 → 컴포넌트가 처음 렌더링될 때만 createBulkTodo 함수

useState(createBulkTodo()) 의 경우 → 리렌더링될 때마다 createBulkTodo 함수 호출 useState(createBulkTodo)의 경우 == 파라미터: 함수 형태 → 컴포넌트가 처음 렌더링될 때만 createBulkTodo 함수

매우 중요: (리액트 컴포넌트에서) 상태 업데이트 시 → 불변성 지키는 것 구현 기존의 데이터를 수정할 때 → 직접 수정 x → 새 배열 제작 → 새 객체 제작 → 필요 부분 교체 업데이트 필요한 곳에서는 새 배열/객체 제작 하기 때문에 → React.memo

기존 컴포넌트(2500개의 컴포넌트)는 스크롤 밖(안 보임. 2491개 컴포넌트)임에도 불구 → 렌더링배열(todos) 변동 발생 시→ 배열의 처음~끝까지 컴포넌트로 변환(컴포넌트 내부 map 함수)→ 안보이는 부분까지 (2491개 컴포넌트)보이지 않는 (스크롤 되기

리액트 프로젝트 완성 후 → 사용자에게 제공 시, 빌드 작업 거쳐 배포파일 크기 최소화 js 파일 내부의 불필요한 주석, 경고 메세지, 공백 등 → 제거 코드 트랜스파일 작업 브라우저에서 JSX 문법 or 다른 최신 js 문법 → 원활한 실행 되도록 정적 파일(

생성 방법직접 입력명령어 사용 (일반적)typescript 를 글로벌로 설치$ yarn global add typescript프로젝트 디렉터리 내부에서 tsc --init 입력 → tsconfig.json 파일 자동생성만약, 명령어 작동 x npm install -g

프로젝트 생성 리액트 프로젝트 + TS 명령어 $ npx create-react-app ts-react-tutorial --template typescript --typescript 뒤에 --typescript 이 있으면, 타입스크립

TS를 사용하는 리액트 컴포넌트에서 컴포넌트의 상태를 관리(useState & useReducer 사용)하는 방법 학습리액트 컴포넌트와의 차이Generics 사용 → 상태의 타입 설정 (useState<number>())안해도 무방 (Generics 없어도 )

React를 위한 강력하고 성능 좋은 데이터 동기화"전역 상태"를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트합니다.선언적 & 자동 데이터를 가져오는 로직을 손으로 작성하는 것은 끝났다. React Que

서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용서버, 클라이언트 데이터를 분리주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행캐싱get을 한 데이터에 대해 update를 하면 자동으로 get을

따로 설정 필요 없이 SSR, SEO 부터 TypeScript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 리액트 프레임워크SSR. 하지만, CSR방식으로 사용하면서 SPA의 장점 유지 가능SSR 검색 엔진 최적화 (SEO)에 중요한 역할을 함. 리액트 공식문

DoNext.js웹서비스를 만드는 방법프론트엔드 개발자에게 도움이 될 꿀팁Don’tReact 에 대한 기초 지식Next.js 기본 학습간단한 토이 프로젝트 제작 실습Next.js 심화 학습포트폴리오를 대비한 커머스 서비스 제작 실습4~5 강의마다 Recap큰 챕터가 끝

프레임워크 vs 라이브러리 Reactjs 라이브러리를 표방.공식문서에 적힌 문구 A JavaScript library for building user interface (사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리) 장점개인이 해야 할 고민들을 프

데이터를 가져오다왜 시작부터 Data Fetching 인가? 화면에 무언가 그리려면 결국 어디선가 Data를 가져와야 함 그린다: 데이터를 가져와서 그린다생성한다: 데이터를 가져와서 그려둔다재생성한다: (특정 주기로) 데이터를 가져와서 다시 그려둔다서버가 그린다의미

url과 1:1 매칭됨Next.js는 모든 페이지를 기본적으로 pre-render모든 페이지 → 미리 그려 놓음JS빼고 기초적인 UI가 이미 그려져서 내려오는 것검색 엔진 최적화기능다양한 검색엔진들이 해당 사이트를 더 잘 읽어갈 수 있게 함 → 상위 노출 가능 하게 함

라우팅특정 주소가 있고 그 주소에 도달해서 그 주소가 제공하는 데이터들을 받아서 사용하는 일련의 과정주소가 변경되고 새 데이터에 접근하는 과정들네트워크 용어로 多 사용웹에서의 관련된 개념 url & url에 대응하는 페이지 리소스들 라우터이를 도와주는 도구리액트라우

프레임워크의 기능들 학습 & 장점 이해프레임워크의 모든 기능 다 사용 X.어떤 기능들이 있는지 알기 위해 어떤 기능을 제작 시, 어떤 기능들을 조합해서 제작 가능한지 알기 위해 → 블로그로 nextjs 프로젝트 진행할 것파일 시스템 기반 라우팅 구현 방법 : pa