프론트앤드/프로젝트

[포스코x코딩온] Cosmopolitan | 프로젝트 2차 회고록

영최 2023. 5. 19. 15:59
728x90

✅  깃허브 주소

https://github.com/Cosmopolitan777/Cosmopolitan

 

GitHub - Cosmopolitan777/Cosmopolitan

Contribute to Cosmopolitan777/Cosmopolitan development by creating an account on GitHub.

github.com

 

✅  전체 시현 영상

 

✅  피드백

1. 깃 리드미 - 추천알고리즘 설명 보완

2. 페이지네이션 기능 추가 요함

3. 게시판 수정 및 삭제 권한 추가 요함

 

 

✅  느낀점

1. Nginx로 서버 배포할 때 계속 cors에러가 떠서 정말 힘겨웠었다.

분명 서버단에서 설정을 했는데도 불구하고 계속 떴다.

해결 방법은 .env.development파일에 따옴표를 모두 제거하고 경로 불러오는 부분들을

모조리 .env.development에 넣었다. 그리고  npm run build를 다시하고 서버에 업로드 , 서버도 다시 코드 올리고
재시작할 모든 것들을 다시 시작 했다.

(sudo systemctl stop nginx # 웹 서버 중단 
sudo systemctl start nginx # 웹 서버 가동 
sudo systemctl status nginx # 웹 서버 동작 상태 확인
) + 서버단 cd server/ 가서 pm2 kill 후 다시 pm2 start app.js

 

(+ 확장프로그램으로 정말 cors 문제인지 확인해볼 수 있다.
관련 확장프로그램: https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=ko)

깔고 나서 - on버튼 클릭해서 확인해볼 수 있다. - 아주 임시적인 방법이다..

 

Allow CORS: Access-Control-Allow-Origin

Easily add (Access-Control-Allow-Origin: *) rule to the response header.

chrome.google.com

 

2. 그리고 build할 때 자꾸 map을 인식못하는 경우가 있는데 이때도 참... 힘겨웠으나 

해결방법은 optional chaining 적용하면 된다.

참고: 

https://stackoverflow.com/questions/69735137/map-is-not-function-in-object

 

map is not function in object

I tried to link pass object and it say's map is not a function. i tried all the way's but no luck. Any idea what mistake i made. input const sample = [ { path: "/website", par:...

stackoverflow.com

 

그 외 프론트앤드 + 백앤드 + 추천 알고리즘 + 배포까지 모두를 하려니까 괴로웠다.

이후에 nodeml을 어떻게 적용해서 추천 알고리즘을 작성했는지 포스팅하겠다.

728x90