Dev Log | 청소년 쉼터 지도 개발 일지 5

Updated: July 14, 2020
1 minute read

주제 Shelter: 청소년 쉼터 지도

프로젝트 레포 https://github.com/codestates/shelter

프로젝트 기간 2020.06.29 - 2020.07.10 (12일)

진행 기간 7일

남은 기간 5일

2020.07.05 Day 7

Filter 컴포넌트의 스타일을 설정했습니다. 모든 하위 컴포넌트까지 완료했으면 좋았겠지만 아쉽게도 FilterItemDetail 컴포넌트만은 다 못했습니다.

적어도 주말엔 Filter 관련 모든 컴포넌트를 끝낼 수 있을 줄 알았는데 계속 늦어져서 걱정입니다.

아무튼 목표했던 Sprint 2 기간이 오늘까지로 다 끝났고 내일부터는 로그인과 채팅 기능 구현에 충실해볼 생각입니다.

task 관리가 점점 더 꼬이는 것 같습니다. 확실히 스타일링은 한 컴포넌트 씩 나누기가 참 애매한 것 같습니다.

제가 아직 경험도 없고 요령도 없어서 많이 오락가락 하는 것도 있겠지만, 전체적인 밸런스를 맞춰야 하기 때문에 하위 항목들 건들다가 다시 상위 항목으로 돌아와 배치를 처음부터 다시하는 등의 작업이 많았습니다.

덕분에 컴포넌트 만들 때보다 task 나누는게 더 어려웠고 하나로 퉁쳐서 9시간 기능 구현 했다고 밖에 말을 못하겠더라구요.

나중에 실제로 스타일링 관련해선 어떻게 task를 관리하는지 알아봐야할 필요를 느낍니다.

pt, px, em, rem, … 등등 통용되는 단위들이 너무 다양해서 어디에 맞춰야 하는지 혼란스러웠습니다. 그래도 일단 같은 팀원 분의 리뷰를 믿고 익숙한 px와 em을 사용했습니다. 시간이 되는대로 어떤 단위에 대해서도 학습해볼 계획입니다.

서버 API와 데이터베이스가 다 갖춰져서 서버와의 연결을 시도하던 중 CORS 오류가 발생했습니다.

분명히 서버 구축할 때 모든 도메인에 대해서 CORS를 허용했던 걸 팀원들과 같이 리뷰했었는데 그때 실수한 것을 놓쳤던 모양입니다.

서버는 Express를 사용했고 CORS 설정은 cors 미들웨어를 사용했습니다.

문제의 원인은 다음 코드에 있었습니다.

app.use(
  cors({
    origin: ["*"],
    methods: ["GET", "POST"],
    credentials: true,
  })
);

여러 도메인을 허용하고 싶을 때 origin에 도메인을 배열로 넣어준다고 알고 있었습니다. 그런데 모든 도메인에 대해서 허용할 땐 배열이 필요없는 모양입니다.

생각해보면 모든 도메인에 대해서 허용돼 있는데 특정 도메인에 대해서 또 허용할 필요가 없는 건 당연하니까요.

app.use(
  cors({
    origin: "*",      // ["*"] -> "*"
    methods: ["GET", "POST"],
    credentials: true,
  })
);