Today 요약

1. Express 강의듣고 프로젝트에 적용하기

1. What I did?

1. 1 Express 강의듣고 프로젝트 적용하기

SPA 방식으로 동작하게 하는 건 자바스크립트로 일부 html 코드를 동적으로 추가하는 것이고, 이미지 파일같은 정적인 파일을 가지고 올 때는 정해진 경로에서 가지고 오게 된다. 그랬을 때 처음에 클론해가지고 온 로컬 폴더에서는 로컬 폴더 자체의 상대경로를 잘 가지고 오면 무리 없이 동작한다. 하지만 문제의 시작은 webpack부터였다.

dist폴더 안에 번들링 된 후에는 우리가 작성한 코드로는 정상적으로 이미지를 가져오지 못했다.

그래서 서버를 구축할 생각은 없이, 일단 편법으로 이미지를 노션이나 velog같은 곳에 등록해서 받아온 이미지 주소로 어디서나 절대주소로 참조할 수 있도록 하는 방법으로 해결했었다. 하지만 멘토님이 문제를 회피한 것 같다고 하셔서 이 부분은 팀원과 상의하에 조금 더 알아보게 되었고, 프론트에서만 해결하기에는 힘들 것 같아 서버사이드 렌더링이 필요하다고 판단, Express를 적용해보기로 해서 팀원이 새로고침 이슈에 대한 해결을 완료지었지만 이미지를 상대경로로 불러오는 부분은 여전히 해결을 하지 못하고 있었다. 그래서 강의를 듣고 문제해결를 해결하고 있었다.

server.use(express.static('dist'));

강의를 보니까 이 코드가 필요한 것이었다. 정적파일이 존재하는 곳의 폴더를 지정해주는 코드 인 것 같다. 하지만 프로젝트에 적용했을때 이번에도 이미지를 제대로 가져오지 못했다.

일단 해결하지는 못했다. 그때 팀원이 슬랙에서 멘토님한테 질문을 했고, 멘토님이 코드를 수정해서 답변을 주셨다. 멘토님 코드를 보고 어느정도는 이해했지만, 그래도 완벽하게 이해가 되는 건 아니다. 좀 더 공부해보고 멘토님한테 질문을 해봐야할 것 같다.

이번 프로젝트를 하면서 경로를 설정하는 부분이 꽤나 헷갈리고 신경을 많이 써야한다는 걸 느꼈다.

회고(Retrospective)

KPT

💡 KPT (프로젝트 회고)

• Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)
• Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)
  • 이번 프로젝트는 문제 해결 접근방법 자체가 다소 아쉽다. (집중 좀 하자!!)
• Try (Problem에 대한 해결 방식으로 다음 프로젝트에서 시도해볼 점)
  • 문제 해결 과정을 기록만 하지말고 기록했던 부분 중에 해결이 안 된 부분을 다시 한 번 읽어보면서 새로운 해결책을 계속 찾고 그 과정을 다시 기록하도록 하자. 포기하지말고 시도하자!