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

4-1. [React + Node.js Express] 회원가입 기능

[React+Node.js Express] 회원가입, 로그인, 회원 정보 수정, 게시판 기능을 구현해 놓고 필요할 때 필요한 기능만 추가해 사용할 수 있는 나만의 보일러 플레이트 토이 프로젝트를 진행하고 있다. 프론트엔드는 React로, 백엔드는 Express로, DB는 몽구스를 사용해 구현할 것이다. 특히 회원 가입이나 로그인에 대한 정보는 많은데, 회원 정보 수정, 또는 게시판 기능에 대한 글들이 생각보다 없어 헤메는 분들에게 도움이 되었으면 한다. 최종 전체 코드는 맨 아래에 있으니 필요하신 분들은 스크롤 쭉 내려서 확인하시길..! Frontend 이번 글에서는 회원 가입 기능을 만들 것이다. 피그마로 간단히 디자인 해 놓은 와이어프레임을 따라 프론트엔드를 구성해준다. 디자인은 편리하게 antd(h..

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

3. [ React + Node.js Exrpess ] 리액트와 익스프레스 연결하기

프로젝트 제작 계기 친구가 concurrently 설정이 되지 않는다고 애를 먹고 있어서 정보 공유차 풀스택 웹 개발을 위한, 백엔드와 프론트엔드의 연결을 실행시켜 놓는 과정을 기록한다. cors 설정 및 프록시, concurrently 설치에 애를 먹는 사람을 위해 프로젝트를 파일로 첨부하였으니 아무나 다운받아 사용해도 괜찮음! 프로젝트 파일 링크 : https://drive.google.com/file/d/1pc476UJHfviBeZltOiG1FI2fGWO2sTbo/view?usp=sharing boiler.zip drive.google.com 1. 프로젝트명으로 [루트] 디렉토리를 만든다. 2. [루트] 디렉토리에서 Shift+우클릭으로 파워쉘 또는 터미널을 관리자 권한으로 열어, npx creat..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 11. 19.
• textsms

1. 무비 API 이용 풀스택 웹 프로젝트 ( React, Node.js express, MongoDB )

무비 API 이용 풀스택 웹 프로젝트 소요 기간 : 3일 겪었던 문제들 : 바보일기1, 바보일기2, 바보일기3, 바보일기4 Github : https://github.com/chalinuna/movie-app Demo : https://starlit-mooncake-064acc.netlify.app/ 배포 일기 : https://make-somthing.tistory.com/80 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useState, useEffect, Axios, Proxy(Http-proxy-middleware), antd, formik, 등...) Backend - Node.js express ( Router, Body-Parser, Cookie-parser, Bc..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2022. 11. 13.
• textsms