프로젝트에 리덕스를 적용하기 위해 리덕스 모듈을 만들어 보겠습니다. | 리덕스 모듈이란 ? 구성요소 액션타입 액션 생성함수 리듀서 위와 같이 리덕스 모듈을 사용하기 위해 총 3가지 항목이 존재합니다. 첫 번째 리덕스 모듈.js //액션 타입 만들기 //Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요, // -> 다른 모듈과 액션 이름이 중복되는 것을 방지할 수 있습니다. const SET_DIFF = 'counter/SET_DIFF'; const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE'; //액션 생성함수 만들기 export const setDiff = (diff) => ({ type: SET_DIFF, diff }..
| Immer 란 ? 리액트에서 배열이나 객체를 업데이트 해야 할 때 직접 수정은 절대 하면 안되며, 불변성을 지켜주어야 합니다. 직접 수정하는 경우 const a = { a: 1, b: 2 }; a.a = 4; 이런 방법을 다음과 같이 업데이트 해야합니다. const a = { a: 1, b: 2 }; const change = { ...a, b:3 }; 배열도 마찬가지로 push,splice등 함수를 사용하거나 n 번째 항목을 직접 수정하면 안되며 concat, filter, map 함수를 이용하여 생성해야합니다. spread연산자( = ... 연산자) 는 구조가 deep할수록 코드가 조금 복잡해집니다. 따라서, immer라는 라이브러리를 사용하여 구현하면 보다 쉽게 가독성이 높은 코드로 구현할 수 ..
| Context API 란 ? ContextAPI는** "징검다리"** 같은 역할을 해줍니다. 특정 함수를 특정 컴포넌트를 거쳐 원하는 컴포넌트에게 전달하는 작업은 리액트로 개발하다보면 자주 발생하는데요, Componet 1개 정도는 큰 불편함이 없지만, 여러개의 컴포넌트를 거쳐 전달하게 된다면 어떻게 될까요? 이럴경우에 Context API를 사용하여 전달하면 매우 편리하게 전역으로 전달할 수 있습니다. | Context API 사용 React.createContext(null); Context를 생성할때는 다음과 같이 React.createContext() 를 사용하여 만듭니다. 파라미터값으로는 Context의 기본값이 되며, Context의 value값을 찾을 수 없을 때 기본값이 사용됩니다. 기..
| useReducer 이해하기 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해주었습니다. 하지만 이 방법 말고도 더 다른 유용한 방법이 존재하는데 바로 useReducer 를 이용하여 상태를 관리하는것입니다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수 있고, 다른 파일에 작성 후 불러와서 사용할 수 있습니다. reducer 는 현재 상태와 액션객체를 파라미터로 받아아서 새로운 상태를 반환해주는 함수입니다. function reducer(state,action){ //새로운 상태를 만드는 로직 return nextState; } reducer에서 반환하는 상태는 곧 컴포넌트가..
| useCallback()을 사용한 함수 재사용 useCallback() 은 useMemo 와 비슷한 Hook 입니다. useMemo : 특정 결과값을 재사용 useCallback: 특정 함수를 새로 만들지 않고 재사용 | useCallback()을 사용하는 이유 ? 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어집니다. 함수를 선언하는 것 만으로는 리소스 낭비가 많지는 않지만, 이런 함수가 많아지면 아무래도 부담이되는 건 사실입니다. 컴포넌트에서 props 가 바뀌지 않으면 Virtual DOM 에 새로 렌더링 하는 것 조차 하지 않고 최적화를 진행합니다. 따라서 되도록 최적화를 위해 낭비를 줄여야하는 건 사실이라고 생각합니다. | useCallback() 사용 사용시 주희할 점, 인에서 사용하..
| useEffect 를 활용하여 mount/unmount/update 작업 해보기 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트,언마운트,업데이트 될 경우를 살펴보겠습니다. 마운트란? mount : 컴포넌트가 처음 나타났을 때 unmount : 컴포넌트가 사라질 때 update : 특정 props가 바뀔 때 마운트/ 언마운트 function User({ user, onRemove, onToggle }) { useEffect(() => { console.log(" Mount ! 컴포넌트가 화면에 나타남"); return () => { console.log(" unMount ! 컴포넌트가 화면에서 사라짐"); } }); | useEffect() 사용하기 첫 번째 파라미터 : 함수 두 번째 ..
사용자 이벤트를 만들기 전에 .bind(this){}라는 녀석을 살펴보자. .bind(this)란, 간단하게 말해서 컴포넌트 그 자체를 가르킨다 ex) Component 따라서 bind(this)를 해주는 경우에는 컴포넌트 자체를 심어준다는 의미이다. 그렇다면 그 에서 사용하는 state 값들을 사용할 수 있다. 사용자 이벤트 만들기 먼저, App.js 위와 같은 코드가 있다고 했을 경우에 해당 div 영역에서 onChangePage 라는 사용자 정의 이벤트를 설치했다고 생각하자. Subject.js import React,{ Component} from 'react'; class Subject extends Component{ render() { return ( {this.props.title} {th..
npm install bctypt --save 실행 console창에서 비크립트 다운 해당 사이트에 접속해보면 www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS. www.npmjs.com 먼저 사용법은 sortRounds 를 이용하여 비크립트 자릿수를 설정한 뒤 Salt를 만들고 genSalt를 이용하여 실행합니다. User.js genSalt를 통하여 err가 존재할 경우에는 if문을 통하여 분기시켜줄 수 있다. 만약 err가 없을 경우에는 hash를 실행하는데, myPlaintextPassword 값으로는 mongoose스키마에서 선언한 password값이 올 수 있다. index.js //로그인 시 app.post('/login',(r..