괴발개발

📌 코드: https://github.com/MarkYour2022 📌 결과물: http://markyour2022.site/ 📌 예시: http://markyour2022.site/result/2509248128 🔎 프로젝트 소개: 올해의 OO 키워드로 2022을 돌아보고 기록하는 사이트 🔎 사용한 스택: React.js, Node.js(express), MongoDB, AWS(EC2) 🔎 서비스 내용: 홈 MY 2022 만들기 → 로그인 페이지로 이동 공유하기 → 카카오 공유하기 로그인 회원가입 없이 카카오 간편로그인 회원정보 DB에 저장하지 않고 redux에 저장(보완 필요) 로그인 시 버거메뉴 내용 변화 로그인 → 글이 있을 경우 본인 글 조회, 없을 경우 글쓰기 페이지로 이동 글쓰기 닉네임 / ..

/routes/posts.js .get('/:postId'): 글 상세 post_id와 req.params.postId가 일치하는 document를 전달 본인의 post인지 확인하는 isMine 값 전달 .get('/:postId/edit'): 글 수정 - 데이터 받기 post_user와 req.user.id가 일치하는지 확인 후, post_id와 req.params.postId가 일치하는 document를 전달 사실 React 상에서 처리해줄 수 있는 부분인 것 같은데 일단은 구현해놓았다 .post('/:postId/edit'): 글 수정 req.body에 값이 정상적으로 담긴 경우, post_id와 req.params.postId가 일치하는 document를 update .delete('/:postI..

app.js postsRouter(/posts) 추가 routes/login.js req.user를 통해 로그인 했는지 확인하는 함수 isLogin 추가 routes/passport.js 간편로그인으로 계정 생성 시 posted(기본값: false) 항목 추가: 계정 당 게시글을 1개만 쓸 수 있도록 routes/posts.js .get(/new) isLogin으로 로그인 되었는지 확인 users collection에서 현재 로그인 한 계정의 document를 찾고, posted 항목이 false인 경우에만 글쓰기 페이지를 렌더링할 수 있도록 .post(/new) req.body에 값이 담긴 경우 데이터를 정리해서 DB에 저장 postId의 경우 기본값은 1, posts collection에 1개 이상의..

네이버: https://developers.naver.com/ 카카오: https://developers.kakao.com/docs/latest/ko/kakaologin/common 구글: https://console.cloud.google.com/ 가장 중요한 것은 callback url을 api 설정창과 백엔드 코드에서 똑같이 입력하는 것 app.js(추가 코드만) const session = require('express-session'); const passport = require('passport'); const loginRouter = require('./routes/login'); const passportRouter = require('./routes/passport'); passport..

npm init -y npm i --save-dev prettier eslint eslint-config-airbnb-base eslint-plugin-import typescript @types/node @types/express nodemon ejs npm i express express-session dotenv mongodb passport passport-google-oauth20 passport-kakao passport-naver // .prettierrc { "semi": true, "singleQuote": true } // .vscode/setting.json { "[javascript]": { "editor.formatOnSave": true, "editor.defaultFormatt..

📌 코드: https://github.com/ebulsok/KDT-pj-627.git 📌 결과물: https://3-24.netlify.app/ 🔎 프로젝트 목적: 프론트엔드로 웹페이지 구현하기 🔎 프로젝트 소개: 3개국의 총 24개 건축물을 소개하는 페이지, 3-24 🔎 사용한 스택: HTML, CSS(Sass), JS 🔎 구현하고자 했던 기능: KDT에서 배운 것을 최대한 활용하고자 했다. 메인 페이지의 경우, GSAP 라이브러리, 특히 scrollTrigger를 이용하여 4종류의 스크롤 애니메이션을 구현했다. 첫번째 스크롤 페이지는 1. 배경색이 바뀐다. 2. 가운데에 있는 큰 글씨가 작아진다. 3. 뒤에 있는 글씨(건축물 이름)가 무한적으로 흐르기 시작한다. 3번은 블로그 글(https://blo..