Front18 [NextJS] Access Token 관리 정리이유 : 페이지 새로고침 시 State가 사라지고 SSR 랜더링에서는 처리방법이 다르기 때문 JWT Access Token을 관리하는 3가지 방법 Cookie Local Storage Session 위 3가지 방법에서 Cookie를 활용해 Token을 관리하고 Session을 유지시키는 방법에 대해 정리 Install Package npm i react-cookies next-cookies npm i @types/react-cookies (타입스크립트 사용 시) *next-cookies 패키지는 Cookie에 담겨있는 값들을 JSON 형태로 변환해줍니다. // 기존 Cookie가 값을 보관하는 방식 accessToken=ABCDEDFD; refreshToken=DFSGGDF; // next-cooki.. 2021. 10. 1. [React] Create-react-app 없이 Webpack, Babel 빌드 해보기 2020.05.22 - [Front/React] - Create-React-App으로 React 시작하기 Create-React-App으로 React 시작하기 이번 포스팅은 첫번째 React 프로젝트, create-react-app으로 시작해보기 입니다 create-react-app 명령어는 최신 모듈들이 적용되어 생성된다는 사실! React Project의 Generator 라고 칭해도 될만큼 빠른.. sihus.tistory.com 현재 사내 뿐만 아니라 토이프로젝트들도 CRA (Create React App) 로 빌드한 React 프로젝트들이 많았습니다. 하지만 많은 라이브러리 추가와 프로젝트 규모가 커지면서 빌드 및 구동 속도가 느려지고 무거워지기 시작했습니다. 이것에 대한 근본적인 해결법을 찾고.. 2021. 4. 22. React Hook 이해하기 - useEffect (Effect Hook) useEffect가 하는 일 리액트에게 컴포넌트가 렌더링 된 이후에 어떤 일을 수행해야 하는지를 말한다. 리액트에게 넘긴 함수를 기억했다가 DOM 업데이트를 수행한 후 Effect를 불러온다. useEffect를 컴포넌트 안에서 불러내는 이유 useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 우리가 지정한 state 또는 props에 접근 할 수 있게 되고, 특별한 API 없이도 값을 가져올 수 있기 때문이다. useEffect는 렌더링 이후 매번 수행되나? useEffect는 렌더링 이후 매번 수행 된다. ( 첫번째 렌더링 ~ 이후 모든 업데이트에서 수행 됨 ) 마운팅, 업데이트라는 방식으로 생각하는 것 보다 -> 렌더링 이후에 발생 하는 것 이라고 생각하는 것이 쉽다. useEffect.. 2020. 5. 25. React Hook 이해하기 - useState (State Hook) React Hook, useState useState는 state를 함수 컴포넌트 안에서 사용할 수 있도록 해준다. 기존에는 state를 추가하고, 변경하고 싶을 때 클래스(Class) 컴포넌트로 바꾸어 사용했으나, 이제 함수형 컴포넌트안에서 Hook을 이용해 state를 사용할 수 있다. Hook의 규칙 최상위 레벨에서만 Hook을 호출해야 한다. 오직 React 함수 내에서만 Hook을 호출해야 한다. useState를 사용하여 state 초기화 하기 import React, { useState } from 'react'; export default function Sample() { // 새로운 state 변수 선언 및 할당 const [count, setCount] = useState(0); } .. 2020. 5. 25. [JavaScript] Generator Function 이해하기 Generator Function GeneratorFunction GeneratorFunction 생성자는 새로운 generator function 객체를 생성한다. JavaScript 에서 모든 generator function 은 실제로 GeneratorFunction object 이다. developer.mozilla.org Generator Function을 처음 알게 된건, Redux-saga를 통해 알에 되었다 모양은 function* 이렇게 function 선언 다음에 * 가 붙은 모양이다. function* generatorTest() { yeild console.log(5); yeild console.log(10); } 일반 함수는 함수를 호출하면 Funtion안에 선언된 로직들이 일괄 .. 2020. 5. 25. 리덕스(Redux), 리덕스 미들웨어(Redux-Middleware) 이해하기 리덕스(Redux) 이해하기 리덕스(Redux)란? 스토어(Store)라는 저장소를 가지고 상태데이터(State)들의 모음을 저장해두고 액션(Action)으로만 이 상태데이터(State)를 변경할 수 있도록 하는 제한 액션(Action)으로 상태데이터(State)를 변경하기 위해서는 스토어(Store)에 디스패치(Dispatch)를 해줘야 함 리덕스 미들웨어 (Redux Middleware) 네트워크 요청의 상태관리와 전달받은 데이터 상태관리를 더욱 효율적이고 쉽게 할 수 있도록 도와 주는 것 리덕스 미들웨어의 역할 Action이 Dispatch 되어서 이를 처리하기 전에, 사전에 지정된 작업들을 설정 함 미들웨어는 “Action과 Reducer 사이의 중간 역할자” 라고 이해 할 수 있음 Reducer.. 2020. 5. 22. Typescript 이해하기 이번 포스팅은 타입스크립트에 대해 알아보고 기초 문법들을 살펴보겠습니다. 타입스크립트를 왜 쓸까? 에러를 방지하기 위해 많은 단위 테스트들이 필요하지만, 타입스크립트를 통해 이런 오류들에 대해 선언과 동시에 예방? 할 수 있고, 타입스크립트 컴파일러에 의해 코드 오타, 타입에러 등 컴파일 타임에 모든 유형 오류를 알려주기 때문에 코딩과 동시에 에러를 잡을 수 있어 코드품질 향상을 도와줄 수 있다. 타입스크립트 환경 구성하기 $ yarn global add typescript 또는 $ npm install -g typescript 그 다음, 아래 명령어를 입력하면 타입스크립트 설정파일인 (tsconfig.json) 파일이 생성됩니다. $ tsc --init 설정파일을 살펴보기 /tsconfig.json {.. 2020. 5. 22. Create-React-App으로 React 시작하기 이번 포스팅은 첫번째 React 프로젝트, create-react-app으로 시작해보기 입니다 create-react-app 명령어는 최신 모듈들이 적용되어 생성된다는 사실! React Project의 Generator 라고 칭해도 될만큼 빠른 속도와 개발환경을 구성해줍니다. 그럼 시작해볼까요. 첫번째 리액트 앱 만들기 터미널을 열고, 프로젝트가 생성될 곳으로 이동해준 뒤 create-react-app 모듈을 Global 로 설치 해줍시다. npm i -g create-react-app 설치가 완료 된 후, 리액트 앱을 생성합니다. create-react-app [프로젝트명, 대문자가 들어가지 않도록합니다.] npx create-react-app [프로젝트 명, 소문자로만 작성] npx create-re.. 2020. 5. 22. 이전 1 2 다음
