728x90
반응형
SMALL
먼저 화면 부터 만들어야지
![]() |
얘는 login.. |
![]() |
코드는 저작권 무료인거 부트스트랩 같은거 복붙 하고 저기 id부분만 수정해주면 정상 작동됨 register 링크 만들고 |
![]() |
화면 복붙해 만들어 준다 |
![]() |
라우트도 하나 뚫어 주고 |
![]() |
컨트롤러로 넘어와 output에 register에 대한 화면 랜더링 연결해주면 |
![]() |
복붙해 수정한 얘 나옴 |
![]() |
이렇게 수정 해 줬음. . |
회원가입 기능 구현
![]() |
register 파일 만들어 안에는 로그인꺼 그대로 복붙 후 |
![]() |
register.ejs 보고 요거 만들어 넣고 |
![]() |
응답 하는것들도 잘 넣고 테스트 해보면 . . 콘솔창이 리로드된다 |
![]() |
form 태그안 button 태그는 submit 해주는 기능이 있다. 그래서 데이터 보내 놓고 화면 리로드 시키니깐 저걸 바꿔놔야됨 |
![]() |
요래 바꾸고 login.ejs랑 login.js register.js 에 있는 button 전부 바꾸자 |
![]() |
. . . 아 CSS도 바꿔줘야 하네 ㄷㄷ 모두 선택 컨트롤 D 다시 임의 값 넣고 작동은 되나만 보자.. |
![]() |
된다 |
![]() |
다음으론 서버에 데이터 전달해주는 fetch 다 회원가입 성공하면 login 페이지로 가게 했고 입력 후 던져야 되니 post 메서드를 썻다 이제 이것에 해당하는 API를 만들어 보자 |
사실 프론트가 개발되지 전에
백앤드 부터 완성이 되야 한다
그게 순서고 원래 그렇게 진행이 되며 이게 일반적인 개발 순서다
![]() |
routes의 index.js 안에 POST메서드의 register가 한줄 늘었다 |
![]() |
그 다음 컨트롤러로 넘어가 process의 login을 복붙 떠서 register로 교체 하고 |
![]() |
Models 폴더 안의 User로 넘어가 |
![]() |
명확한 구분의 위해 body를 client로 바꿔놨고 register()를 보면 client로부터 받아온 값(this.body)을 UserStorage에 저장(.save()) 했다 그럼 이제 UserStorage로 넘어보면 |
![]() |
여기.. 이 데이터를 검증하기 위해선 이런식으로도 해도 되지만 저장을 해야 한다면 이렇게 하면 안된다 |
안되는 이유
![]() |
UserStorage 안에 save를 만들었다 이렇게 밀어 넣는걸로 저장이 되야 한다 그러나.. |
![]() |
![]() |
일단 저장이 된것은 같은데. . .
로그인이 되야 겠지?
![]() |
사라지고 없다. |
![]() |
다시 회원가입 페이지로 넘어가 싸인업을 누르면 뭐가 저장은 된다 그런데 아까 저장했던 데이터는 증발되고 없 |
![]() |
저거 그냥 메모리상에 저장된거라 서버를 껏다 켜면 되돌아 간다 |
비번 확인 처리
![]() |
다시 public 폴더의 js 저 들어와서 저거 confirm은 서버로 보내믄 안 |
![]() |
단순하게 이렇게만 해주고 |
![]() |
테스트 까지 성공 |
깃 버전으로 관리
![]() |
여기 보면 tag에 일단은 아무것도 없다 |
![]() |
이렇게 tag를 달고 tag 목록을 보면 방금 설정한 v0.1.0-notDB가 나오게 됨 |
![]() |
git log --oneline 을 치게 되면 지금까지 커밋한 목록이 쭈 나오게 되는데 저기 tag가 달린게 보일거 |
![]() |
해당 태그를 쓰고 push하면 |
![]() |
요래 들어가 진다 클릭해 보면 |
![]() |
해당 버전에 맞는 코드들이 나오게 된다 |
728x90
'Back-End Frameworks > Node.js' 카테고리의 다른 글
12) Nodejs - 백앤드 넓고 얕게 맛보기_정리_데이터를 파일에 저장하기(출처 유튭 강의)★★ (0) | 2023.11.01 |
---|---|
11) Nodejs - 백앤드 넓고 얕게 맛보기_정리_데이터 파일로 관리하기(출처 유튭 강의)★★★ (0) | 2023.11.01 |
9) Nodejs - 백앤드 넓고 얕게 맛보기_정리_User 모델 만들기(출처 유튭 강의) (0) | 2023.10.30 |
8) Nodejs - 백앤드 넓고 얕게 맛보기_정리_서버 응답받은 값 처리(출처 유튭 강의) (0) | 2023.10.30 |
7) Nodejs - 백앤드 넓고 얕게 맛보기_정리_프론트 요청에 대한 파싱(출처 유튭 강의) (0) | 2023.10.30 |