파일 쉐어사이트

이번 과제는 주어진 마크업과 API를 활용해서 기능들을 추가하는 프로젝트였고, ts를 적용하였다.

 

✨ 이번 과제를 하며 좋았던 부분, 뿌듯했던 부분들은

• 과제의 주어진 기능들을 주어진 기간 내에 팀원들과 모두 구현해냈다는 것이 만족스러웠고
• 클린 코드, 재사용성
  여러 군데에서 공통으로 쓰이는 Type과 재사용이 가능한 utils 함수를 따로 빼서, 해당 컴포넌트에는 정말 필요한 코드만 남도록 클린 코드, 재사용을 위해 팀원분들과 회의하고 소통하며 진행하여 만족하는 결과물이 탄생했다.
• Github PR 활용
  어떤 기능을 구현하였는지 상세하게 적어서 PR 하면 해당 코드를 팀원 모두 살펴보고, 코드 리뷰를 함으로써 조금 더 나은 코드를 작성하지 않았나 싶다.
• 추가 구현 기능
  마지막으로 기업에는 구현하라고 되어있지 않은 기능이었는데 ( page NotFound) 회의를 통해 당연스럽게 기능을 추가해야 한다는 의견으로 뜻을 모아 구현하였는데, 점점 사용자의 입장에서 생각하는 것 같아 기분이 좋고, 성장한 느낌을 받았음!
  

---

✨ 고민했던 부분, 아쉬웠던 부분들은

• SVG파일 접근 권한 에러
  주어진 API에서 파일의 thumbnailURL을 받아와 보여주는 부분이 있었는데, 일부 url을 요청할 때 권한 문제로 403 Forbidden 오류를 응답받았다. 해당 문제는 우리 팀뿐만 아니라, 모든 팀들이 겪고 있는 문제였음. 다행이야.. 내가 잘 못된 게 아니었어...
  이미지 확장자 중에 png, jpg는 응답을 받아왔는데, svg만 불러오지 못하고 오류를 받아오는 것을 파악하고,
  substring 함수를 이용하여 확장자 표시 앞부분까지 잘라서 png, jpg라면 해당 url을 보여주고 svg라면 default값을 출력하는 것으로 해결하였다.
• CORS 에러
  처음 api를 로컬에서 연결했을 때부터 해당 에러가 발생하였는데, package.json에 proxy를 설정하여 우회하였더니 해결되었는데, 문제는 배포!
  배포할 때, proxy용 실서버가 필요하기에 (검색해 보니 express.js로 서버를 구축해서 우회 요청을 해야 한다고 함)
  백엔드를 잘 알지 못하는 우리 팀은 mock-data로 API를 추가하여 배포하였다
  다 만들어놓고, 제일 중요한 것을 빠트린 거 같아서 너무 아쉬웠지만, 데드라인이 있는 과제라서 결국 이 부분에 대해서는 해결하지 못하고 플랜 B로.. 백엔드의 중요성을 느꼈던 순간.
• Netlify의 Page Not Found Error
  React Router를 사용하는 React 사이트에서 netlify에 배포 후 다른 route로 넘어갈 때 발생하는 에러이다.
  React Router는 client에서 라우팅을 처리하기 때문에 root가 아닌 페이지에 접속할 때 (예를 들면 root : www.tistory.com, root가 아닌 페이지 : www.tistory.com/login) netlify(server)는 route를 처리하는 방법을 알 수 없기 때문에 Page Not Found를 렌더 한다.
  netlify는 client 측에서 처리되지 않는 URL을 처리할 수 있도록 redirects 파일을 제공하는데,
  디렉토리 내에 netlify.toml 라는 파일을 생성하고, 아래의 코드를 추가해주면 해당 에러가 해결된다.

[[redirects]] from = "/*" to = "/index.html" status = 200

---

프리온보딩의 마지막 과제였는데, 늘 매번 프로젝트를 하면서 많이 배우고 아직도 많이 부족하다고 느낀다...
아직도 모르는 것 투성이고, 너무너무 어렵지만 그래도 점점 성장하고 있다고 생각하고 열심히 해서 목표 달성하자!