[React] React Templates

리액트 템플릿이란 홈페이지 디자인 중 자주 쓰이는 React 모델을 제작하여, 수정이 가능하도록 배포되는 디자인 템플릿. 특히 리액트 템플릿은 무료로 배포되고 있는 것이 많기 때문에 bootstrap과 적절히 섞어 사용하면 빠른 시간 안에 프론트를 마무리할 수 있어 편리하다. 아래는 내가 자주 사용하는 리액트 템플릿 사이트이다. https://www.creative-tim.com/templates/react-free 29+ React Free Themes And Templates @ Creative Tim www.creative-tim.com https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci 35+ Free React templat..

• format_list_bulleted REACT/React-개념정리
• · 2022. 12. 6.
• textsms

[Node.js] body-parser 사용법

사용법 2021년도 이후 Express 프로젝트들은 body-parser 라이브러리가 express에 기본으로 포함된다. 따라서 별도로 라이브러리를 설치할 필요 없이, 아래 코드만 최상위 server.js에 작성해주면 된다. app.use(express.urlencoded({extended: true})) 라우터를 사용할 경우, 해당 코드 밑에 라우터를 app.use 해주면 라우터들에서도 body-parser의 사용이 가능하다. server.js에 테스트용 board 라우터를 만들고 아래와 같이 app.use로 불러와본다. app.use('/api/board', require('./routes/board')) board 라우터에 /write 라우터를 만들어 작성한다. 버튼을 누르면 콘솔에 req가 보내준..

• format_list_bulleted NODE.JS(Express)
• · 2022. 12. 5.
• textsms

throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn)) / TypeError: Router.use() requires a middleware function but got a Object

throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn)) TypeError: Router.use() requires a middleware function but got a Object 문제 상황, 원인 파악 게시글 작성 router파일을 app.user로 불러오자 뜬 에러. 미들웨어가 없다는둥 휘황찬란한 에러이지만 단순하게 export 해주지 않아서 발생한 문제이다. 해결 방법

• format_list_bulleted 바보일기
• · 2022. 12. 5.
• textsms

4-4. [React + Node.js Express] 로그아웃 기능

회원가입과 로그인을 만들었으니 로그아웃을 구현한다. 로그아웃의 기능은 간단하다. 유저 인증을 프론트에서 보낸 JWT토큰을 통해 인증하는 방식으로 진행하고 있으므로, 먼저 db에 있는 JWT 토큰을 파기하여 유저 인증 절차가 불가능하게 만들어주면 된다. 그 후 Redux를 통해 사용한 LocalStorage(또는 SessionStorage)를 비워주고, 혹시 모르니 브라우저 쿠키도 파기해준다. Redux는 새로고침하면 사라지기 때문에 굳이 지워주지 않아도 되는데, 그냥 연습용으로 dispatch 한번 더 불러와 사용해본다. 모든 절차가 완료되면 새로고침 코드를 적용하여 페이지를 정돈해준다. 새로고침을 하면 모든 컴포넌트가 다시 마운트되기 때문에, 유저가 새로고침 할 필요 없이 메인 페이지가 바뀌는 모습을 ..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 12. 5.
• textsms

4-3. [React + Node.js Express] 유저 인증 기능

예를 들어 쇼핑몰 사이트가 있다고 해 보자. 쇼핑몰 웹사이트는 장바구니 기능을 이용하기 위해 '현재 누가 로그인 되어있는지, 또는 로그인되어있지 않은 상태인지' 를 각 상품 주소를 이동할 때 마다 알아내야 한다. 또한 로그인되어 있는 상태라면 해당 유저의 정보를 매번 불러와야 한다. 지난 시간에 로그인을 구현하면서, 로그인을 하면 jwt 토큰을 발급해 쿠키에 저장하기로 했다. jwt 토큰은 암호화된 토큰인데, 반대로 말하면 복호화했을 경우 처음 토큰으로 이용된 값을 알아낼 수 있다. 우리는 user_id를 이용해 jwt토큰을 만들었으므로, 토큰을 복호화하면 user의 _id가 나오게 된다. 따라서 매 페이지를 이동할 때 마다 토큰을 복호화하여 db에 등록된 _id인지를 검사하면 로그인된 유저의 정보를 알..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 12. 5.
• textsms

4-2. [React + Node.js Express] 로그인 기능

회원가입을 완성시켰으니 로그인 기능을 만든다. 프론트에서 유저가 폼에 입력한 데이터를 받아 백엔드로 전송하고, 백엔드는 받은 데이터를 DB에 들어있는 데이터와 비교한다. 만일 입력받은 아이디가 DB에 존재하면, 비밀번호를 DB와 비교한다. 아이디와 비밀번호가 모두 일치할 시 로그인 유지를 위해 토큰을 생성하고, 유저 정보와 성공 메세지를 프론트로 전송한다. Frontend 회원가입에서 사용한 Register.js 와 원리가 같기 때문에 axios를 제외한 설명은 생략한다. 회원가입때와 마찬가지로 State와 onChange를 사용하여, 입력값이 변할 때 마다 State에 데이터를 저장해주는 형식이다. State로 받아온 데이터를 백엔드에 작성할 api로 보낸다. Login.js 로그인에 성공하면 navi..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 12. 3.
• textsms