![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bZ9ksF/btqZvN1I7VD/I9PHTQsIEmdYfAUKzw2eqK/img.png)
React 라이브러리를 사용하여 메인화면, 회원가입페이지, 로그인페이지 구현. Typescript 사용 화면 UI는 bootstrap을 이용하여 진행 중 메인화면 (상단 navgation bar, side bar, landing page) 회원가입페이지 (대표이미지 설정, 유저이름, 유저이메일, 유저패스워드 입력기능) 로그인페이지 (email과 비밀번호를 이용하여 로그인) 우선 클라이언트와 서버의 통신을 위해 서버(nestjs)에서 클라이언트의 포트번호에 대한 CORS 허용을 해주었다. 클라이언트는 3000포트를 사용하기 때문에 아래와 같이 설정해주었다. -> enableCors 클라이언트에서의 폴더구조는 아래와 같다. view폴더 아래에 각 페이지별 src, default폴더 아래에 nav_bar, s..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/dxmSkF/btqXXkVKF7s/wrN5LGF60lmPwejViJzZFK/img.png)
nestjs에서 회원가입, 로그인/아웃, 회원수정, 회원탈퇴 기능을 구현해보았다. 일단 nestjs에서의 Data flow는 아래의 사진과 같이 진행되는듯 하다,,, user모듈, 컨트롤러, 서비스를 만들고 각각 기능을 구현했다. test-server 폴더 내 소스코드를 작성하고 있는 중이며 폴더구조는 아래와 같이 진행중이다. package.json의 "scripts"에서 "start"를 하면 nestjs Application이 구동된다. package.json이 있는 폴더에서 "npm run start"를 입력. nestjs에서 시작점은 main.ts이다. 1. main.ts bootstrap() 함수를 실행하면 NestFactory를 거쳐 AppModule을 실행한다. (cookieParser는 생성..
![](http://i1.daumcdn.net/thumb/C148x148.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cx07ks/btqWKZlchcP/zsu592BkWuUTM2KPnkyH01/img.png)
nestjs 환경에서 DB를 연동하려고 열심히 검색해 보았는데 typeorm 라이브러리를 활용하여 연동하는 글이 대부분이었다. 하지만 typeorm 라이브러리를 사용하지 않고 연동해 보고 싶었고, DB연동하는 방법을 찾아보며 실행 해보았고 아래는 예시 소스이다. nestjs와 mysql을 연동할 때 typeorm을 사용하여 SQL을 자동으로 만들어주는 것은 생산성 측면에서는 효과가 좋겠지만, 아직 DB에 대한 지식과 경험이 부족하여 공부를 위해 SQL을 직접 작성하여 DB에 접근하는 방식으로 개발해보려고 한다. typeorm은 DB에 익숙해졌을 경우 사용할 생각이다. 먼저 dependency에 mysql을 추가한다. npm install mysql 그리고 db_connect.ts를 만들어 아래와 같이 작..
Database : MySQL Back-End : Nodejs, Nestjs Front-End : React ( + WASM 쓰고싶음) 화면 구성 좌상단 로고 상단 메뉴바를 구성할 공간 -> 토이프로젝트 진행시 주제에 맞는 메뉴바를 구성할 공간 좌측 메뉴(숨기기 가능) -> 토이프로젝트 진행시 주제에 맞는 메뉴바를 구성할 공간 main contents 공간 -> 토이프로젝트 진행할때 주제에 맞는 화면을 구성할 공간 하단 footer -> 필요한지 모르겟다. 만들어 놓고 필요없으면 지우면 됨 더 필요하거나 사용하게 되는거 있으면 업데이트 할거임. ^-------------------------^