본문 바로가기
포스코x코딩온

[포스코x코딩온] 풀스택 부트캠프 14주차 정리 -1 3차 프로젝트 회고-2

by 김선지 2024. 1. 25.

01/24

엄청난 에러가 생겼다. 팀원 분의 에러를 해결하고 나서 갑자기 webpack과 babel defendency에 오류가 생겨서 npm start 자체가 되지 않았다. 그래서 구글링을 해보니까  어떤 옵션을 추가하라고 해서 추가를 해봤는데도 되지 않았다.

그래서 강사님께 도움을 청했는데 알고보니까 어느 순간 package.json 파일에 있는 react-script 버전이 5.0에서 4.0으로 다운그레이드 되어있었다. 그래서 install을 하기 전에는 오류가 뜨지 않았는데 install을 하고 나니까 오류가 뜨면서 start가 안된 것이었다. 이게 거의 역병처럼 돌아서 진짜 전염되는건가 했다.

해당 오류를 수정하는 도중 알게된 사실은 내가 webpack 5.8버전을 uninstall하고 package.json에 사라진 것을 확인하고 node_modules와 package.lock.json을 삭제하고나서 다시 install을 해도 좀비처럼 webpack이 5.8버전이라는 것이었다.

좀 구글링 해보니까 캐시때문에 문제가 발생한 것 같은데 가끔씩 리액트가 꼬이는 오류도 이것 때문인 것 같다. 그래서

버전 바꾸는 김에 캐시도 깔끔히 삭제할 겸 안 쓰는 라이브러리 정리도 할 겸 새로 clone을 받았다. 그러니까 뭔가 상쾌해진 느낌이다.

그리고 코멘트도 만들었다. 코멘트도 좋아요와 마찬가지로 post 테이블의 postId를 외래키로 받고 user의 userid를 외래키로 받게 만들어놨다.

 

01/25

post 페이지를 하나 더 만들어야 한다. 내가 만든 post는 culture의 게시글, 즉 culture post였고 이와 똑같은 지식인 느낌의 language 게시판을 또 만들어야 하니까, 즉 그냥 내가 하던거 그대로 붙여넣기만 하면 된다.

그래서 데이터베이스와 controller, router 그대로 복사한 후 변수 이름만 바꿨다. 이건 안되면 이상한거다.

그리고 id가 숫자인 경우에 아래 그림의 조건에 안걸리는 버그가 발생했다. 쿠키에 저장되는 아이디의 형식 문제겠지 생각해서 아예 stringify를 줘서 해결할 수 있었다.아마도 string이면 length 속성이 있지만 number 속성은 length 속성이 없기 때문에 비교 자체가 불가능한 것이 버그의 이유가 되지 않았을 듯 싶다. 이럴때는 typescript가 일하지 않는다. 왜일까...

 

또 프로필 사진과 post의 경우 게시글에 이미지도 첨부할 수 있어야 하니까 multer도 넣기로 했다. 뭐... 솔직히 내가 할 줄 몰랐는데 그렇게 됐다.

처음에는 그냥 아마존 s3를 쓰려고 했는데 팀원들이 그렇게 많지도 않으니까 로컬에 저장하자고 합의를 봤다. 뭐 이미지 폴더는 깃허브에 올라가니까 상관 없지 않을까 싶다. 어차피 배포할 때도 이거 통으로 옮길거고 말이다.

다만 이미지의 경우 static으로 넣어놔서 프론트단에서 가져올 수 있는데 이거 배포해도 똑같이 적용되는건지 모르겠다. 

어차피 도메인은 똑같으니까 상관 없으려나.

그리고 어차피 프로필사진은 계정당 하나니까 파일 이름을 완전히 똑같은 [userid].png로 강제한다면 새로 변경했을 때 새로운 파일이 만들어지는 것이 아니라 덮어쓰기 때문에 효율적이라고 생각했다. 

다만 이렇게 하니까 바꾸었을 때 업데이트가 안된다...

그 이유는 state는 변경되었을 때 리로드가 되기 때문이다.

즉, 백서버에 있는 파일 내용이 바뀌었지 파일의 파일 이름이 바뀐 것은 아니기 때문이다... 고로 파일 이름을 state로 삼았기 때문에 파일 이름에는 아무 변경이 없고, 즉 리로드가 안된다는 것이다. 그냥 강제적으로 navigate같은 걸 해서 새로고침을 한다던가 하는 방법이 있을 것 같긴 한데 귀찮기도 하고 솔직히 여러 확장자를 png로 강제로 바꾸는 것은 좋지 않기 때문에 Date.now()를 파일 이름에 넣어서 타협하기로 했다. 그럼 삭제는..? 다른 사이트들은 어떻게 하려나..

원래는 'userid' 대신 randomUUID를 쓰려고 했는데 Date.now()가 있으니까 그냥 저렇게 바꿨다. 뭐 어차피 로그인 안하면 못하니까 상관없긴 하다.