React
1.React-CRA + TypeScript의 폴더 구조를 알아보자
사이드 프로젝트를 할 때 create react-app으로 프로젝트를 시작하곤 하는데 최근에 TypeScript를 배우고 나서 React에 TS를 얹어서 프로젝트를 생성하고 나니 src내에 모르는 파일이 너무 많았다... 이참에 폴더 구조를 한번 정리해보려고 한다. 전체적인 폴더 구조 전체적인 폴더 구조는 다음과 같다. 1. node_modules CR...
2.React에 Express 연동하는 방법
Intro > React로 사이드 프로젝트를 진행하려는 와중에 server로 node+express를 사용하려고 한다. 좋은 포스팅들이 많았지만 왜 이런식으로 구현해야하는지 이해가 잘 되지 않아서 찾아보면서 내가 이해한 방법으로 포스팅하려고 한다. 서버와 React의 존재 이유 서버란? 서버는 클라이언트에게 여러 가지 서비스를 제공하는 것을 뜻한다. 평소...
3.React의 디자인 패턴 중 아토믹 디자인 패턴을 알아보자
React의 여러 디자인 패턴 중 아토믹 패턴에 대해서 알아보자!!!가장 작은 컴포넌트 단위를 Atoms로 설정하여 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론상위 컴포넌트는 순서대로 분자(Molecules), 유기체(Organisms), 템플
4.React + Express로 JWT 방식 회원기능 구현하기 (1)
이번 포스팅에서는 Session과 JWT의 차이점, 장단점에 대해서 포스팅하고, 다음 포스팅에서 내가 이해한 React + Express로 JWT를 구현하는 방법에 작성하려고 한다 세션은 브라우저와 웹 서버가 연결되어 브라우저가 종료될 때까지의 시점이다. 브라우저를 통
5.React + Express로 JWT 방식 회원기능 구현하기 (2)
지난 글에서 JWT 개념에 대해서 이해하였으니 이번 글에서는 React / TS 환경에서 JWT를 어떻게 구현하였는지를 포스팅하려 한다.사용자가 로그인을 하여 서버로 Client단에서 입력한 아이디와 비밀번호를 실어서 POST 요청을 하면 DB에 저장된 회원정보와 Cl
6.React - nodejs Multer를 이용하여 이미지 파일 올리기
multer 10분만에 뚝딱하기
7.Recoil과 Recoil Selector를 이용하여 비동기 처리하기
이 문서는 Recoil 공식문서를 참고하여 제가 이해한 방식으로 작성한 글입니다. 틀린 부분이 있으면 알려주시면 감사하겠습니다!Recoil팀에서 말하는 React 자체에 내장된 상태 관리 기능의 한계점은 다음과 같다.컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공
8.[Redux] Redux로 전역 상태 관리하기 (feat. RTK(Redux Toolkit)
Redux 알아보기
9.[Redux] Redux-thunk로 비동기 처리
Redux-thunk
10.[Redux] Redux-Thunk로 프로미스 다루기
Redux-Thunk로 프로미스 다루기