전체 글

S3를 프론트에서 관리하는 이유nextjs를 활용해서 S3버킷에다가 이미지를 프론트에서 직접 관리하게 되었다.S3를 프론트에서 관리하면 좀더 빠른 응답을 만들 수 있다. 그 이유는 무엇일까 생각해보자면 다음과 같다.- 클라이언트에서 백엔드로 이미지 데이터를 던져주고 서버에서 그걸 받고 aws에 넘겨주고 클라이언트한테 링크를 넘겨줘야한다. 서버가 바쁘면 이미지를 가공해서 주는 시간이 길다는 뜻이다. 서버가 바쁘니 덜 바쁜 프론트에서 대신 aws에 업로드를 해주는 것이다.- 클라이언트에서 Img업로드를 S3버킷에 해주고 s3 url을 서버한테 보내야하는데 이때 react-query를 사용해서 optimistic UI를 적용해주면 좀 더 빠르게 적용된 이미지를 볼 수 있다.단점으로는 브라우저에서 우리의 코드를..

목표어트랙션 프로젝트는 실 서비스를 염두하여 진행한 프로젝트였기때문에, 그에 맞추어 유지보수를 위한 설계가 필요했습니다. 또, 이후 서비스의 확장도 고려해야 했습니다.이를 모두 고려하여 요구 조건을 생각해보자면유지보수가 용이해야한다. (중복되는 로직은 최대한 피해야한다)추후 서비스를 확장할 수 있어야한다.인원이 변경되거나 하는 여러가지 사항에 대비해 문서화를 철저히 진행해야한다.팀원들과 어트랙션 서비스를 준비하면서 내린 결론은 다음과 같았습니다.디자인 시스템을 통해 공통 컴포넌트를 관리하여 중복되는 컴포넌트를 최대한 피한다.모노레포 구조를 도입하여 추후 서비스를 확장할 수 있도록 한다.디자인 시스템에 Storybook을 도입하여 컴포넌트에 대해서 문서화를 진행하고, 노션을 통해 개발 기록을 남긴다.모노레..

모노레포 구조에서 세팅된 ESLint 오류가 화면에 보이지 않는 문제현재 진행중인 프로젝트에서는 모노레포 구조를 채택하여 개발을 이어나가고 있는데, 이상하게 ESlint 오류가 보이지 않았습니다.근데 또 다 안보이는 것도 아니고, 몇개는 보이고 몇개는 보이지 않는 문제도 발생했구요.또 화면에는 다 안잡히지만 eslint 명령어를 통해 확인하면 보이지 않던 오류가 다 발견되었습니다.이 부분에서 저는 eslint 기능의 문제라기보단 IDE를 의심하기 시작했습니다.근데 보통 IDE를 의심하게되면 '내 IDE 설정의 잘못'으로 이해하지, 다른 사람들까지 그럴거라고는 생각하지 않잖아요.저를 더 혼란스럽게 만들었던 건, 다른 팀원들도 ESlint 오류가 보이지 않았습니다. 모두 같은 증상이었다는 것이죠.그냥 무시하..