프로젝트 일지(40)
-
(장준영)Vanilla JavaScript로 SPA 구현하기 [7일차] - 식당/카페 여석 확인 어플리케이션
만들다가 갑자기 개지리는 생각이났는데 서버쪽에서 데이터 필요할때 받아오고 받아온다음 로컬스토리지에 캐싱해서 데이터를 관리하면 될거다 그리고, 새로고침하면 화면이 처음으로 돌아가는걸 캐싱으로 보완해주면 될거같은게 페이지마다 페이지인덱싱을 로컬스토리지에 해주는거다 nowPage 라는 값으로 페이지를 이동할때마다 페이지에 번호를 매겨주고 캐싱해준다 nowPage : 0 = 처음페이지 nowPage : 1 = ~~ 페이지 이런식으로 로컬스토리지로 페이지를 관리해주고, 어떤 페이지를 띄워주냐 를 결정할때 화면생성기(nowPage){ if(nowPage == 0) 처음페이지띄우기() if(nowPage == 1) 회원가입페이지띄우기() if(nowPage == 2) 관리자페이지띄우기() if(nowPage == 3..
2024.04.18 -
(김유선) 중고거래 사이트를 SPA로 만들기 9일차 - 로그인 후 기능
로그인 후 변화해야 하는 것 (2) 내 물건 팔기 기능 완성 asw 가이드를 통해 세팅을 한다(가이드 따로 만들었음). 클라이언트 쪽 코드 ⨉ 간편하게 판매하세요 (js) $('#insert_submit').click(function(){ // 물건 제출 버튼 누르면 if($('#insert_title').val()!='' && $('#insert_text').val()!='' && $('#insert_price').val()!='' && $('#insert_img').val()!=''){ // 셋다 공백이 아니면 alert('판매글을 게시했습니다.') } else{alert('전부 입력해야 판매글을 등록할 수 있습니다.')} // 둘 중 하나라도 공백이면 이거 띄워줌 }) 서버쪽 코드 app.post(..
2024.04.17 -
(장준영)Vanilla JavaScript로 SPA 구현하기 [6일차] - 식당/카페 여석 확인 어플리케이션
기능 요구사항을 전체적으로 한번 더 점검을 해주었다 이제 기능 요구사항을 보고 필요한 데이터들을 전부 작성해주고, 디비를 디자인할거다 그리고 디비 디자인이 끝나면 대략 어떤 순서로 작업해야하는지가 보인다 일단 데이터 작성부터 해보자 데이터 작성이 끝났고, 데이터들과 어디에 사용되는지를 보면서 거기에 맞게 디비를 디자인할거다 나는 mongoDB를 사용하는데 몽고디비는 https://edykim.com/ko/post/summary-of-six-rules-for-designing-a-mongodb-schema/ MongoDB 스키마 디자인을 위한 6가지 규칙 요약 - 용균 MongoDB를 개인 프로젝트에서 자주 사용하긴 하는데 항상 쓰던 방식대로만 사용하고 있어서 스키마를 제대로 구성하고 있는지 검색하다가 이..
2024.04.16 -
(김유선) 중고거래 사이트를 SPA로 만들기 8일차 - 로그인 후 기능
우선 편의를 위해 간단하게 로그인하기 전의 기능들부터 해결한다. 로그인 전 버튼들 기능 만들기 번개장터도 그렇지만, 보통은 로그인하지 않았을 때 판매하기, 내상점 등이 보이는데, 이 버튼을 누르게 되면 이렇게 로그인창이 뜬다. 즉, 로그인을 하기 전에는 판매하기, 내상점, 로그인/회원가입 버튼이 모두 동일한 기능이라는 것이다. (사실 이 사실을 미리 알고 있긴 했는데 어떻게 짜야할지 몰라서 일단 만들어뒀다가 지금 수정한다.) 어차피 로그인을 안했을 땐 다 같은 기능이기 때문에 지금 이 가짜 버튼들을 만들어주겠다. 그래서 모든 버튼의 코드를 이렇게 짰다. // (1) 유저가 처음 로그인을 하지 않은 상태일 때 채팅 로그인 / 회원가입 내 상점 내 물건 팔기 채팅 로그아웃 내 상점 내 물건 팔기 // (2)..
2024.04.16 -
(김유선) 중고거래 사이트를 SPA로 만들기 7일차 - 로그인, 로그아웃
로그아웃 기능 서버쪽 코드 app.get('/logout',(요청,응답)=>{ 요청.logout( async(err)=>{ // 로그아웃 코드는 콜백함수를 포함해야 하므로 에러코드를 넣어줌 if (err) return next(err) }) 응답.redirect('/') // 홈페이지로 다시 가줌 }) 클라이언트쪽 코드 $('.logoutbtn').click(function(){ $.get('/logout') .done(function(){ alert('로그아웃 되었습니다.') location.href = location.href; }) }) 로그인 후 세션 데이터 상태 로그아웃 후 세션 데이터 상태 잘 동작한다. 하지만 문제가 있다. 로그인을 이미 한 상태인데도 사이트를 새로고침하면 로그인 창이 다시 ..
2024.04.16 -
(김유선) 중고거래 사이트를 SPA로 만들기 6일차 - 로그인 기능
로그인 기능을 구현했으니 이번엔 채팅 기능 등등을 구현해야 한다. 우선 로그인을 하면 채팅 기능이 동작하고, 로그인하지 않으면 로그인 창으로 이동하도록 해야 한다. 그러기 위해 채팅 버튼을 눌렀을 때 요청.user 값을 확인하고 유저가 존재하면 채팅창으로 넘어가도록 해야 한다. 요청.user 값 확인 요청.user값을 보내주기 위해 로그인 성공했을 때 보내는 데이터에 username도 포함시켰다. app.post('/login', async (요청, 응답, next) => { // 로그인 요청하면 passport.authenticate('local', (error, user, info) => { // passport 라이브러리를 사용해서 사용자의 정보와 db 정보가 일치하는지 비교해주는 코드 (아래의 세..
2024.04.14