230313 - React - Redux

오늘 내가 배운 것 1. Redux 2. Redux-thunk 3. NodeJS로 Redux-thunk 구현하기 4. Action 1. Redux 리덕스는 상태 관리 라이브러리 중 하나이다. 기존에 전역으로 상태 관리하기 위해서 react에서 `useContext`,`createContext`를 이용한 `Context API`를 이용하여 상태를 관리했지만 큰 문제가 없지만, Redux를 사용하면 상태 관리를 효과적으로 할 수 있다. 1-1. Redux middleware `Redux`를 사용하는 가장 큰 이유는 `미들웨어`기능이다. 미들웨어 기능을 이용하여 액션을 처리하기 전에 추가기능을 구현할 수 있다. 저번 로그인 로직구현하는 페어코딩을 할 때 사용했던 코드이다. // 예시코드 const handle..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 14.
• textsms

230310 - React - Login 기능 구현 페어코딩

https://github.com/100space/230310 GitHub - 100space/230310: 페어코딩 페어코딩. Contribute to 100space/230310 development by creating an account on GitHub. github.com 오늘의 목표 1. 로그인 기능구현 2. React 이용할 것 3. front와 back 분리 작업 ( DB까지 연결은 안 해도 MVC패턴 ) 4. 2인 1조로 역할 나눠서 진행 맡은 역할 front-end 디렉토리 구조 잘 짜인 디렉터리 구조는 아니지만...! 결과 로그인 유무에 따른 Navigation bar를 다르게 보여준다. 로그인 시 데이터를 백서버로 요청하여 토큰을 만들고 그 토큰을 다시 응답메시지에 cookie에 ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 10.
• textsms

230309 - React - localStorage로 전역 상태 관리하기

오늘 내가 배운 것 1. 상태 관리하기 1-1. local Storage VS Sesstion Storage 2. 로그인 프로세스 3. store 1. 상태 관리하기 React는 데이터가 바뀌면서 화면이 바뀐다. 로그인 로직을 크게 생각해 보면 1. 사용자가 userid, userpw을 입력한다. 2. userid, pw를 서버로 데이터를 보낸다. 3. DB의 저장되어 있는 정보와 비교 후 데이터를 브라우저도 보내준다 4. 유저의 상태가 바뀌면서 로그인 처리가 된다. 정말 간단하게 로그인 과정을 설명한 내용이다. 이러한 과정을 통해서 로그인을 성공하면 login 상태인 유저를 판단하고 그에 따른 화면을 그려줄 수 있다. (회원/비회원 페이지를 다르게 한다.) 하지만 React에서 상태라는 것은 변수와 같..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 9.
• textsms

230308 - React - 중첩 라우팅, 전역 상태 관리하기

오늘 내가 배운 것 1. 중첩 라우팅 params 2. 전역 상태 관리하기 useContext()와 useReducer() store 1. 중첩 라우팅 웹 페이지에서 게시판을 만들 때 필요한 페이지가 크게 4가지가 있다. 1. 전체 목록을 보여주는 List 2. 글을 작성하는 Write 3. 글을 볼 수 있는 View 4. 글을 수정하는 Modify 이렇게 4가지 페이지가 필요하고, 이를 이용하여 라우터를 만들 때, 1. board/list 2. board/write 3. board/view 4. board/modify 로 만들 수 있다. 위와 같이 이미 board 라우터로 나뉜 후 거기서 라우터를 또 나눠야 하는 상황이 있다. 이때 중첩 라우팅을 이용하여 페이지를 구성할 수 있다. return ( ) ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 8.
• textsms

230307- React - hook

오늘 내가 배운 것 1. useCallback 2. useMemo 3. memo 4. useContext 5. useReducer 컴포넌트 랜더가 될 때마다 함수형 컴포넌트 같은 경우에는 상태를 가지고 있는 함수 전체를 다시 실행시킨다. 그래서 컴포넌트 안에 로직이 많은 경우 오랜 시간이 걸릴 수 있다. 컴포넌트가 재실행되면서 안에 있는 함수들이 다시 만들어진다. 변화가 없는 함수나 컴포넌트를 재렌더하면서 불필요한 자원을 쓰기 때문에 많은 낭비가 생길 수 있다. 이러한 문제를 함수형 컴포넌트의 훅을 이용하여 방지할 수 있다. useCallback과 useMemo 훅을 이용하는 것인데, 이 두 가지의 훅의 목적은 같지만 반환 값이 다르다. useCallback의 경우에는 function 값을 리턴해주고, ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 7.
• textsms

230306 - React - CRA( Create - React - App), 페이지 구성하기

오늘 내가 배운 것 1. Create-React-App 2. CSS 3. 페이지 구성하기 4. 123 1. Create-React-App (CRA) react에 필요한 패키지 및 디렉토리의 기본 구조를 구성해 주는 명령어인 `CRA`가 있다. CRA를 이용하여 설치하게 되면 webpack & babel 등 기본 기능에 대한 세팅이 완료된다. # 1. npx $ npx create-react-app [프로젝트명] # 2. npm $ npm init react-app [프로젝트명] npx를 이용한 방법이 많이 쓰인다. 동일한 결과가 나온다. package.json의 script에 보면 4가지 명령어가 적혀있는 것을 확인할 수 있는데,`npm run [명령어]`를 이용하여 4가지를 실행시킬 수 있다. 1. s..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 3. 6.
• textsms