[React][Nestjs] 메인화면/회원가입페이지/로그인페이지 구현

React 라이브러리를 사용하여 메인화면, 회원가입페이지, 로그인페이지 구현.

Typescript 사용

화면 UI는 bootstrap을 이용하여 진행 중

 

메인화면 (상단 navgation bar, side bar, landing page)

 

회원가입페이지 (대표이미지 설정, 유저이름, 유저이메일, 유저패스워드 입력기능)

 

 

로그인페이지 (email과 비밀번호를 이용하여 로그인)

 

 

우선 클라이언트와 서버의 통신을 위해 서버(nestjs)에서 클라이언트의 포트번호에 대한 CORS 허용을 해주었다.

클라이언트는 3000포트를 사용하기 때문에 아래와 같이 설정해주었다. -> enableCors

 

클라이언트에서의 폴더구조는 아래와 같다.

view폴더 아래에 각 페이지별 src, 

default폴더 아래에 nav_bar, side_bar, footer에 대한 src가 있다.

 

App.tsx에서 각각 화면으로 진입할 수 있도록 BrowserRouter에서 아래와 같이 설정하였다.

( BrowserRouter를 사용하기 위해 라이브러리를 설치 )

npm install react-router-dom @types/react-router-dom

 

LandingPage

내부에 Contents는 없지만 navigation bar와 side bar가 같이 랜더링 되도록 Wrapper를 설정해주었다.

Wrapper 컴포넌트를 만들고 LandingPage를 Wrapper로 감싼다.

Wrapper 컴포넌트로 감쌀 경우 다른 page를 만들어도 Wrapper의 내용을 같이 랜더링한다.

RegisterPage

server와 통신하기 위해 axios 라이브러리가 필요하다.

npm install axios @types/axios --save

 - 회원가입 페이지의 화면을 다음과 같이 작성하였다.

 - RegisterPage Class 내용

사용자가 입력한 문자열과 파일을 함께 전송하기 위해 FormData를 이용하여 server에 요청(request)한다.

server에 요청한 결과(reponse)에 따라 각각 메시지를 출력한다.

 

 

state를 이용하여 유저 정보 등록유무 및 이미지 미리보기()에 대한 내용을 저장해둔다.

axios로 post로 전송한다.

 

server에서 image를 받기위해 multer라이브러리를 사용한다.

npm install multer --save
npm install @types/multer --save

nestjs에서 파일을 전송받기위해 FileInterceptor를 다음과 같이 설정했다.

server내 이미지 파일은 "user_image"폴더에 저장된다.

body의 유저 정보 및 file의 이름을 DB에 upload한다.

 

LoginPage

 - 로그인 페이지는 다음과 같이 구성하였다.

 - 로그인 페이지 내용

입력받은 정보로 server에 데이터를 요청(request)한다.

server의 결과(response)에 따라서 각각 메시지를 출력하거나, 성공했을 경우는 로그인이 된 상테로 메인페이지에 이동한다.

 

 

Navigation bar

nav바의 이미지이다, 오른쪽에 가입할때 입력한 이미지, user이름이 출력된다.

user이름과 이미지를 요청 위해 axios 설정을 했다.

server에서는 다음과 같이 설정하였다.

server에서는 token을 확인하여 user대표이미지 경로, user이름을 response한다.

 

 

 

다음 목표는 유저 정보 수정 페이지 생성 및 화면을 더 깔끔하게 보이도록 css파일 수정을 할 생각이다.

그 다음 boiler-plate코드를 완성시키고 그 다음 주제로 프로젝트를 진행해볼 생각이다.