본문 바로가기

node.js 웹개발5

웹개발 - 12 socket.io 사용 채팅 기능 추가 채팅 기능을 끝으로 이 책을 통해서 추가할 수 있는 기능은 거의 다 추가했다. (API 보안 부분은 뭔 소린지 모르겠고 굳이 필요한가 싶어 패스) 일단 가장 중요하게 생각했던 채팅 기능을 추가했다. 저번주 목요일(11월 18일) 부터 하기 시작했는데 오늘(22일 월요일) 끝마쳤다. 사실 제대로 끝마친 것도 아님 아직도 오류 많음.. 암튼 일단 결과 화면은 이렇다. 왼쪽은 솜솜계정 로그인이고 오른쪽은 황필립 로그인을 했을 때이다. 로그인 한 사용자 정보를 currentUser로 가져와서 비교해서 스타일을 추가해 자기가 보낸건 핑크색으로 표시되게 했다. 그리고 이제 위에 장바구니는 없애고 메시지 아이콘을 넣고 전체 메시지가 뜨게 했다. 코드도 다 캡쳐해서 넣어야 되는데 좀 귀찮다..... 그래도 그냥 기록을.. 2021. 11. 22.

웹개발 - 10 Ajax 사용하여 Modal 띄우기 이거만 하는데 오늘 하루 종일 걸린 것 같다... 벌써 5시다.... 오늘 한거는 Ajax 함수를 사용해서 Json 형식으로 데이터를 요청해 Modal에 정보를 띄우는 것 까지 했다. 이 과정에서 진짜 온갖 오류 다 만나고 별 고생을 했다... 후 그래도 도움은 된 것 같다. 일단 완성된 화면은 이렇다. 모달로 현재 DB에 저장되어 있는 Jam 게시물의 title과 description 필드를 출력했다. 모달을 띄우기 위해서는 모달 UI를 지정하는 ejs 파일과, 모달에 띄울 내용을 비동기로 가져오는 ajax 코드의 js 파일 두개가 필요하다. 먼저 모달 UI를 지정하는 ejs 파일은 이렇게 생겼고, views 폴더 밑에 저장했다. 그리고 이걸 jam 페이지에 띄워야 하니까 jam.ejs에 include.. 2021. 11. 16.

웹개발 - 6 마이페이지, 회원정보 수정 오늘 기능 구현 좀 많이 한듯? 오늘 새롭게 API 나가려다가 그냥 기본적인 기능부터 다 해 놓고 넘어가야할 것 같아서 CRUD 기능부터 다 추가해버렸다. 아직 Delete는 못했고 오늘은 Update기능을 넣었다. 나중에 게시물 쓰고 삭제하고 하는 기능도 다 어차피 회원가입이랑 비슷한 구조로 실행되기 때문에 이걸 완벽하게 해놓고 넘어가려고 한다. 암튼 일단 마이페이지는 이렇게 생겼다. 먼저 userController.js에 show, showMypage 라는 두개의 액션을 추가한다. "/mypage/user._id" URL로 넘어오기 때문에 사용자 ID 파라미터 정보를 URL 파라미터로부터 수집하여 저장하고, DB에서 해당 사용자를 찾는다. 찾은 사용자를 res.locals.user로 지역변수 추가를 .. 2021. 11. 11.

웹개발 - 5 Validator 수정 Validator가 계속 안먹혔는데 역시 버전 문제였다. 책에 나와있는대로 express-validator를 npm으로 설치하고 main.js에 app.use(expressValidator())로 사용을 선언해줬는데 자꾸 expressValidator is not a function이라는 타입 에러가 났다. 근데 알고보니까 버전 업데이트(6.x.x) 된 뒤로 app.use(expressValidator())는 안 써줘도 된다고 하고, 선언해서 사용하는 방식도 좀 달랐다. 여기서 진짜 많이 헤맸다... https://noodler.tistory.com/46 https://velog.io/@khyunjiee/NodeJS-express-validator 여기 두곳을 참고해서 아래와 같이 코딩했다. 일단 mai.. 2021. 11. 11.

웹개발 - 4 패스워드 해싱/로그인/로그아웃 수정된 사항 Passport.js를 사용한 회원가입 및 로그인/로그아웃 비밀번호를 hash, salt 값으로 저장함 로그인 세션 유지 로그인 상태 네비게이션 바에 표시 errorPage UI 수정 이다. 사실 Passport.js를 사용하니까 세션 유지랑 로그아웃 기능을 구현하기는 어렵지 않았다. 아무튼 그래서 수정된 코드들은 이렇다. User 모델이 Passport.js를 플러그인으로 사용하고 있어 Passport.js에서 제공하는 register 메소드를 사용해서 회원가입 로직을 구현했다. (여기서 뭔가 잘못됐는지 잘 안되는 점이 있는데 밑에서 다시 설명하겠음) 암튼 저렇게 회원가입을 진행하면, 패스워드 값에 대하여 솔트와 해싱값이 자동으로 저장된다. 그리고 로그인/로그아웃 로직이다. 여기서도 Pas.. 2021. 11. 10.

이전 1 다음

LIST

티스토리툴바