slow 개발 일지

이전 포스팅 Redux와 Ducks Pattern에 연장성으로 React Context API 에 대해 알아보자. React Context react 16.3 버전부터, context api를 내장하여 정식적으로 지원한다. 모든 컴포넌트에서 접근가능한 전역상태를 생성하여, props를 일일이 전달해야하는 props-drilling을 보완할 수 있다. (props-drilling : Redux와 Ducks Pattern 참고) Context의 주요 개념은 context, context provider, context consumer 정도로 보면 된다. 1. createContext 전역상태를 저장하는 context 생성 2. provider 리액트 컴포넌트 전역 상태의 데이터를 초기화 전역 상태를 하위 컴..

nodejs에서는 클라이언트 환경에서 노출되면 안되는 정보, 전역에서 필요한 정보 등을 관리할 수 있는 dotenv(환경변수)를 제공한다. dotenv npm 전역으로 필요한 정보 관리 보안 정보 관리 : 외부에 노출이 되면 안 되는 정보 ( 세션키 , 개인정보 ( host, user, password ..) 등 ... ) 1. dotenv 패키지설치 npm i --save dotenv 2. env 파일 생성 // .env DB_USERNAME = song DB_PASSWORD = 1165 3. 환경변수 접근 예시 import dotenv from 'dotenv' dotenv.config() process.env.DB_USERNAME process.env.DB_PASSWORD require('dotenv..

Redux react는 상태를 자식 컴포넌트로 전달, 전달하는 방식으로, 전달의 단계가 많아진다면 상당히 복잡한 구조가 되고, 리소스 낭비가 되곤한다. 이런 전달의 구조가 깊어지는 것을 props-drilling이라고 부른다. 이런 props-driliing을 해소하기 위해, 전역에서 상태관리가 가능한 여러방법들이 존재한다. context api, redux, mobx ,, 등 여러가지 방법이 있는데, 이 방법 중, 우리나라에서 가장 사용률이 높은 redux에 관해 살펴보자. redux는 전역 상태 저장소(store)를 제공한다. react의 모든 컴포넌트는 이 store에 접근 가능하다. 위의 그림과 같이 redux를 사용하게 되면, Store를 통해 상태의 관계를 맺게 되기 때문에, 좀 더 편한 상태..

react hook(react 16.8 이상)이 나오기 전에는 , 리액트의 라이프사이클을 활용하기 위해 Class Component를 사용해야 했다. 나 또한, Class Component를 통해 리액트 개발을 해왔다. Class Component로 개발하다보면, 별거아닌 코드도 길고 거창해지기 마련이다. 또한, 라이프사이클을 잘못 건들면 어느순간 뒤엉켜 머리가 아파진다 ,, 특히, react hook을 활용하면 라이프사이클이 좀더 폐쇄적으로 관리되기 때문에, 이런 라이프사이클의 뒤엉킴에 있어서는 좀 더 안전한 듯하다. React hook을 활용하여 Function Component 개발은 당연해졌고, React에서도 공식적으로 Function Component를 권장하고 있다. 워낙 리액트 문서가 한글..