주제선정

코드스테이츠의 immersive과정을 모두 마치게 되면 2주,4주 두번의 팀 프로젝트를 하게 된다.
주제는 수강생들이 자유롭게 아이디어를 내고, 마음에 드는 아이디어에 지원하고 팀을 만들게 되는 과정이다.
첫번째 프로젝트인 2주프로젝트 에서는 그동안 배운것들을 사용해보면서 복습하는 시간을 갖는게 좋을것 같아서 기본에 중점을 둔 프로젝트에 지원을 했다.
프로젝트 이름은 todoCalendar인데 todo를 CRUD하고, 달력도 추가해 날짜별로 관리할수 있는 웹앱이다.
하지만 아쉽게도 달력부분은 front-end에서의 구현이 시간내에 끝나지 않을것같아 중간에 제외하게 되었다..

기술스택

front-end

back-end

Deploy

UI

내가 담당한 부분

백엔드
나는 두번의 프로젝트 동안에 프론트,백 둘다 해보고싶었다.
4주프로젝트에는 프론트를 해보고 싶어서 2주프로젝트에는 백엔드를 지원하게 되었다.

작업내용

• todo, todoCalender API 작성 (calendar 부분에서 월별로 데이터를 가져와야 하는 부분이 어려웠는데 Sequelize의 {op}로 날짜데이터의 앞부분을 잘라내서 사용할 수 있었다.)

• crypto 모듈과 salt값을 이용한 비밀번호 암호화

• AWS 배포 (EC2와 RDS의 보안그룹을 만드는게 처음이라 어려웠지만 다음번엔 더 빠르게 할 수 있을것 같다, Filezilla와 vim 를 이용해서 EC2서버를 열어보는게 신기했다.)

• Jest로 서버 테스트케이스 만들기 ( supertest라는 모듈로 서버에 직접 요청을 넣는 테스트케이스를 작성해봤다. 하지만 세션인증 기반 API라 요청에 세션을 담아보내야 하는데 시간관계상 그부분은 공부하지 못해서 모든 API에 대한 테스트케이스를 만들지는 못했다.)

🧐 이슈 & 해결

1. 새로운 feature branch를 만들고, 상위 브랜치로 이동하려 git checkout 상위브랜치 를 했으나 이동되지 않았다.

• 커밋을 하나 하고 이동하니 되었다.

2. git clone을 하고 정확한 아이디와 비밀번호를 입력했는데 유효하지않은 유저정보라는 에러가 나왔다.

• 구글링 해본 결과, 로그인 2중 보안설정을 해두면 발생하는 문제라고 한다. 아무래도 보안에 좋을것같아 최근에 설정 했는데 불편해졌다. 해결방안으로는 git에서 token을 만들고 그 값을 비밀번호 대신 입력하면 된다.

3. commit을 vim으로 할수있다는걸 듣고 git commit에서 엔터를 눌렀는데 vim이 안나왔다.

• 기본편집기가 GRU nano라는 거였는데 vim으로 변경했다. 이후 커밋 템플릿도 만들어보았다.
  비어있는 줄을 자동으로 인식해서 제목과 설명, 세부설명으로 나뉘는게 신기했다.

4. 코딩하고있는데 갑자기 339개가 stage상태로 되어있었다.

• 깜짝놀라서 .gitignore를 만들고 node_modules를 적어주었다.
  정말 아무것도 없는 상태에서 만들어나가니 배우는점이 정말 많다.

5. 작성된 서버에 포스트맨으로 요청을 보냈는데 모든 응답이 /라우터에대한 응답이었다

app.use(/) 부분을 주석처리하니 잘 작동하는걸 보고 app use에 대해 알아보니 미들웨어를 만들때 사용되는데 이게 시작점이고 그 뒤에 다른 라우터들을 덧붙여나가는구조같다. 지금당장 우리에겐 불필요하여 간단하게 app.get으로 바꿔서 해결했다.

6.postman 테스트 도중 서버가 요청의 body를 읽지 못하면서 type error가 났다.

• 요청쪽에 console.log는 신호를 받고 실행되었지만 , req의 body가 undefined로 나오는걸로 봐서 요청의 body 작성법이나 서버쪽의문제라 보였는데 확인결과 body의 chunk값을 json형식으로 변환해주는 부분이 없어서 발생한 오류였다. 파싱해주는 미들웨어를 붙이고나니 잘 작동하였다.
  

7. EC2에서 upstream을 pull 해오면서 충돌이 생겼다.EC2에서는 어떻게 병합할지 모르겠어서 폴더를 지우고 다시 pull하려고했는데 폴더를 지워도 git기록에는 파일이 받아온거로 기록되어있어서 다시 pull이 안됐다.

• 깃을 제거하고 다시 넣어줬다. 깃기록을 초기화했다.

//1. 기존의 깃히스토리 삭제
$ rm -rf .git
//2. 새로운 깃 설정
$ git init

8. EC2에 받아둔 서버가 실행이 안된다.

• config.json 파일을 vim을 이용해 rds의 엔드포인트와 데이터베이스 이름을 입력해주었다.

9. 포스트맨으로 요청응답하는데 쿠키가 짧은시간에 자꾸 만료되었다.

• 쿠키 소멸시간을 1시간으로 늘려주는 부분을 작성했다.
  

10. 분명 dev브랜치를 만들고 clone 해왔는데 master브랜치만 보인다.

레포를 clone한후 거기서 dev브랜치로 이동하면 dev내용들이 생긴다 (checkout dev)

11.Sequelize.update후 .then으로 결과data를 전송해줬는데 값이 비어있었다.

• update먼저 한후 findOne으로 update된 데이터를 다시 가져와서 전송해주었다.

12.로컬에서 완성된 서버를 config.json도 RDS주소를 입력하고 filezilla로 EC2에 넣어주었는데 sequelize db:migrate가 실패했다.

• db와의 연결이 문제라 생각되서 config.json파일만 살펴봤는데, 결국문제는 사용하는 db에 이미 이전에 사용했던 스키마가 들어가있어서 그랬던거였다. db를 비워주고 다시 migrate했더니 잘 되었다.

13. cors samesite문제

테스트중 서버쪽을 담당하는 나와 페어의 2개의 서버를 사용하였었는데
클라이언트쪽에서 이부분 때문에 에러가 발생했다고 한다.
찾아보니 이런경우 사용자가 사이트간 요청위조(CSRF)를 할수 있어 보안적으로 취약하다고 한다.

• 여러개에서 한개의 도메인에 쿠키를 넣으면 이렇게되는것 같다.
  https://ifuwanna.tistory.com/223
  https://www.notion.so/samesite-f0a3f86eb7b944fe88f06d999997ecfd

14. supertest로 테스트케이스를 만들고 test를 돌려 요청을 보냈는데 postman으로 보낼때와 응답이 다르고 .catch() 문에걸려 에러를 응답하고 있었다.

먼저 에러핸들링에 대해

//나의코드는 에러가 무엇인지에 대한 부분을 확인하는과정은 없었다.
.catch(()=>{
  res.status(400).send({error: '400 Bad Request'})
  
/*프로젝트 오피스아워에 질문한 결과 이런경우 console.log를 API초입에 넣어서 요청이 
API까지 잘 들어오는지 확인하고, 이후 req.body를 통해 요청 값들이 잘 들어오는지 확인한다.
그럼에도 불구하고 에러가 난다면 에러코드를보고 해당부분에 가서 err를 console.log로 확인해본다.*/
.catch((err)=>{
    console.log(err);
    res.status(400).send({error: '400 Bad Request'});
// console.log에 데이터베이스 관련 에러가 나왔고 확인결과 test모드의 데이터베이스 연결이 안되어있었다.

• config.json파일에는 개발시 사용될 데이터베이스와 테스트시 사용될 데이터베이스가 분리되어있다.
  내가 jest를 사용해 test를 돌리는 순간 이는 변경된다.
  
  그래서 test부분의 데이터베이스를 생성해주고 입력해주었더니 잘 동작하였다.

15.supertest테스트문 timeout에러

• 아마 기본적인 세팅으로 5초후에 테스트가 실행되는데 그 시간안에 supertest가 요청을 보내고 응답을 받지 못해서 발생하는 오류인것 같다. 구글링해본결과 관련내용이 있어 시간을 넉넉하게 30초로 변경시켰다.

 describe('POST /login', () => {
        test('login success', async (done) => {
            const response = await request(app).post('/login').send({
                "email": "praconfi@gmail.com",
                "password": "dksld",
            })
            expect(response.status).toBe(200);
            expect(response.body).toHaveProperty('id', 'email', 'username');
            done();
        }, 30000);
    })

https://stackoverflow.com/questions/49603939/async-callback-was-not-invoked-within-the-5000ms-timeout-specified-by-jest-setti

16.테스트 종료후 남아있는 메세지

비동기적으로 작동하는 부분이 테스트내에서 끝나지 않았다는 내용이다.
구글링결과 테스트의 마지막에 done();을 붙이라고 해서 다 붙였는데도 같은증상이 보여서
아래 설명에서 하라는대로 --detectOpenHandlers를 붙이니 해결되었다.

17. 스키마변경으로 인해 서버를 수정(db 마이그레이션)했는데 적용이 안되었다.

• pm2를 종료했다 다시켜니 적용되었다. pm2도 노드몬처럼 실시간 반영인줄 알았는데 아닌가보다.

18. 하나만 지우는 버튼을 클릭했는데 모든데이터가 사라져버린다.

• delete메소드를이용해 body에 제거할 todo의 id를 실어보냈는데 그 id값이 제대로 전달이 안되어서 발생했던 이슈였다. axios에서 body에 내용을 담을때 delete는 post나 patch등과는 다른방식으로 보내는것이였다. 관련링크 보며 다시 공부가 필요하다.

https://velog.io/@bigbrothershin/Axios-delete-%EC%9A%94%EC%B2%AD-%EC%8B%9C-body%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%84%A3%EB%8A%94-%EB%B2%95

🙏 느낀점

좋았던점

처음으로 해본 프로젝트였는데 규모를 떠나서 내가 웹어플리케이션 이라는것을 만들어보고 성공적으로 기능구현을 하고 배포까지 했다는 사실이 기분이 좋다.

아쉬웠던점

중간에 제거하게된 기능이 있어서 아쉽다. 하지만 힘들게 끝까지 붙잡고 있었더라면 어쩌면 완성과 배포여부가 달라져있었을수도 있다. 다음번에는 처음부터 기획을 꼼곰하게 해서 중간에 변경되는일을 최소화 할수 있도록 할것이다.