-
프로젝트명: 자라나라 새싹나라
-
프로젝트 기간: 2023.11.07 ~ 2023.11.23 (총 16일)
-
프로젝트 개요 및 특징
: 각 개인의 페이지(정원)에 메시지를 남기고, 이를 확인/관리 할 수 있는 롤링페이퍼 서비스
: 개인 페이지는 공유된 url을 통해 방문할 수도 있지만, '산책하기' 기능으로 랜덤한 정원에 방문하여 메시지를 남길 수도 있음 (메시지 작성은 비회원도 가능)
: 남긴 메시지는 '꽃' 형태로 표현되며, 페이지 방문 시 덩굴과 꽃이 자라나는 애니메이션 효과와 함께 확인 가능 -
BE:
Node.js,express,mysql -
FE:
HTML,CSS,Java Script,EJS,Bootstrap
청년취업사관학교 새싹 용산 2기 과정의 1차 프로젝트가 끝났다. (시간이 어떻게 갔는지 모르겠음)
지금까지 배운 내용을 총 정리하는 프로젝트였다. 은연중에 막막함이 있었는데, 좋은 팀원들 덕분에 많이 배우고 즐겁게 진행했다. (최고... 최고최고...)
팀원분들 감사합니다...⭐
Keep
-
사전 기획 (api 명세서, 페이지별 기능 정의, 테이블 명세서, 커밋 컨벤션 규칙)
: 프로젝트 초반에 틀을 만들고 파악할 때 페이지별 기능 정의와 api 명세서가 큰 도움이 되었다. 프로젝트를 진행할 때 반드시 사전에 작업해야 하는 부분이라는 점을 체감했다.
-
ejs 파일 분리(navbar, ani, pick_color)
: nav바처럼 여러 화면에 공통적으로 들어가는 부분 등을 별도의 ejs 파일에 작성하고,<%-include%>로 불러와 사용하면 기능별로 관리하기 편하다!
-
git
: 프로젝트마다 설정해 둔 작업 방식이 조금씩 다르겠지만, 이번에 협업하는 과정에서 익힌 점들을 정리해 둔다.> 1. 작업은 각자의 브랜치에서 진행한다. 2. 처음 작업을 시작할 때, develop 브랜치에서 반드시 먼저 `git pull` 할 것 3. 브랜치에서 작업을 완료했다면, `add`, `commit`, `push` 후 git hub에서 pr한다.(이후 작업할 때는 새로운 브랜치를 만들어 진행 + pr한 후엔 팀원들에게 실시간으로 공유할 것!)
> 4. 작업 도중 팀원이 pr한 코드를 받고 싶다면, 4-1. 작업한 내용을 임시 저장한다. `git add .` `git commit -m "(컨벤션 규칙에 따른 커밋 메시지)"` 4-2. main 브랜치로 이동해 pull을 받는다. `git branch develop` `git pull` 4-3. 그 후, 본인 브랜치로 이동해 pull 받은 내용을 반영한다. `git branch (브랜치명)`, `git merge develop`
- 반응형 사이트
Problem
-
회원 정보 페이지(마이페이지) 랜더링 문제
: 처음엔user_id값을 axios로 서버에서 받아온 뒤, 해당 회원의 페이지로 랜딩하는 함수를 만들어 반복 사용하기로 하였으나, 롤링페이퍼를 확인할 수 있는 정원(garden)과 마이페이지로 각각 이동하는 버튼을 한 ejs 파일 안에 만들어 두다 보니 다소 번거롭고 코드가 중복되었다. -
세션 만료 시 에러 발생
: 로그인 성공 시req.session.userId,req.session.userName에 사용자의 id와 이름을 저장해 개인 정원 페이지를 랜더했다. 그런데 작업을 하다가 세션 만료 시간(30분)이 지나면 에러가 발생해 로컬 서버가 터져 버리는 번거로운 상황이 발생했다. -
회원 정보 수정/삭제가 제대로 실행되지 않는 문제
-
'산책하기' 기능 사용 시 탈퇴한 사용자의 id 값이 걸리는 경우 서버 터짐
: 이번 프로젝트의 가장 핵심 기능이 바로 '산책하기'였다. (feat. 천재만재 백엔드 조장님👍)
exports.randomGarden = (req, res) => {
User.findAll().then((result) => {
const ranId = Math.floor(Math.random() * result.length) + 1;
res.send({ data: ranId });
});
};'산책하기' 버튼 클릭 시, user 테이블에 존재하는 열의 길이 안에서 무작위로 수를 반환하고,
그 값에 해당하는 유저 고유 id를 보내 정원 페이지를 랜더한다.
function randomWalk() {
axios({
method: 'GET',
url: '/home/garden/random',
}).then((res) => {
let num = res.data.data;
randomPage(num);
});
}
function randomPage(id) {
axios({
method: 'GET',
url: `/home/garden/random/${id}`,
}).then((res) => {
location.href = `/home/garden/${id}`;
});
}다만, 회원이 탈퇴하는 경우 해당 회원의 정보를 db에서 삭제하기 때문에...! 만약 랜덤한 수를 뽑다가 db에서 존재하지 않는 회원의 index가 선택되면 에러가 발생하는 문제가 생겼다. 🫠
- 라우터 분리
: 프로젝트는 mvc 패턴에 맞춰 폴더를 구성해 진행했다.
이때 라우터를 user와 home 두 개로 분리하여 작업했는데, 프로젝트를 진행하다 보니 개인 페이지(정원)에 기능이 점점 추가되며 home 라우터에 코드가 몰리게 되었다.
- 자잘한 오탈자와 오기
: axios 요청을 작성하며 url을 틀리거나, 변수명을 잘못 작성하여 클라이언트와 서버 간에 요청과 응답이 제대로 오가지 않는 경우가 종종 있었다. 🫠
- 그 외
지옥의 모달(어렵다... bootstrap)
코드 작성 규칙 통일(변수명, prettier)
Try
- 회원 정보 페이지(마이페이지) 랜더링 문제
:params로 유저의 아이디를 받아 각 유저의 페이지로 접속하도록 작성했던 코드를 모두 삭제하고, 유저가 로그인한 뒤 정원 또는 마이페이지로 이동하는 요청을 보낼 때 서버 단에서 로그인 성공 시 저장해 두었던 session 값으로 각 회원의 페이지를 랜더하도록 수정했다.
- 세션 만료 시 에러 발생
: 팀원분이 .catch를 사용해 에러 발생 시 메인 페이지로 redirect 되도록 처리해 해결!
.catch((error) => {
console.log('세션 만료', error);
res.redirect('/home');
});
- 회원 정보 수정/삭제가 제대로 실행되지 않는 문제
: profile.ejs 파일 안에서 form 내 input의 value들이 제대로 들어오지 않는 부분을 확인,form.elements.(각 input name).value로 바꾸니 서버에 데이터가 잘 넘어갔다.
- 개선 예정
- 라우터 추가 분리, 코드 정리
- '산책하기' 기능 개선 (탈퇴한 회원 제외, 산책하기로 이미 방문한 페이지는 다시 방문되지 않도록 제외)
- 회원가입 시 mbti 작성란을 직접 작성이 아니라 선택형으로 개선
- 마이페이지, 회원가입 화면의 사이드 모달 개선
느낀 점 / 프로젝트 피드백 사항
- 무조건 console.log()
문제가 발생했을 땐 부분부분을 쪼개 콘솔에 찍어 볼 것.
데이터가 어떤 형태로 되어 있는지, 어디에서 요청과 응답이 누락되고 있는지 확인할 수 있다. - 프로젝트, 또는 서비스 과정에서 웹과 모바일 화면에 모두 적용되는 반응형 사이트는 이제 선택이 아니라 필수!
- 프론트의 경우, 내부 패딩이나 폰트 등 실제로 서비스 이용자들에게 보이는 부분에 신경 쓸 것.
- 백엔드는 예외 처리 시 해당 사항을 안내해야 함. (ex. 로그인 여부에 따른 기능 제한이 서비스 오류처럼 보이지 않도록 클라이언트에게 반드시 알려줘야 함!)
- 어떻게 만들었고 어떤 로직으로 작동하는가에 대한 질문을 열심히 던지자 🧐
- 작업 진행하면서 TS 꼼꼼히 기록하자!
