FE.

- CloudFront 로 배포 진행하셨는데, 번들링 된 결과 파일들의 캐싱에 의해 이전 버전이 여전히 운영존에서 서비스되는 문제점을 어떻게 해결하셨는지

• 구글링을 통해 문제를 해결하려고 했지만, 결국 해답을 찾지 못 해서 CloudFront가 아니라 EC2로 프론트 서버를 배포했습니다.

• CloudFront에 대해서는 추후 더 알아봐서 정확한 사용법을 알아볼 예정입니다.

• 배포할 때 npx 명령어를 사용해서 코드 경량화를 제안드립니다.

  npm insatll -g serve
  npx serve -s build
  

  • npx의 경우 한 번만 실행시킬 서버를 다운로드 하는 것이고, serve라는 웹서버를 다운받아서 실행 시킬 때, build라는 놈을 root로 하겠다는 의미입니다.
  • 리액트 전체를 다 서버로 돌리는 것이 아니라 build를 통해 용량을 줄여서 배포하면 유저 입장에서는 더 가벼운 웹앱을 이용할 수 있습니다.

- 다른 모든 팀들에서 갖는 고질적인 문제점인데, 개발자도구 source 단에서 모든 source map 들이 너무 적나라하게 보인다. Webpack 과 Babel 의 기능에 대해서 이해를 하고있는지? 보안적으로도 페이지 로드의 부하에 있어도 너무 치명적이다. 이렇게 구성한 이유가 있는지?

• 개발 당시, 미처 생각하지 못한 부분이었습니다. package.json 파일에 빌드 시 source map을 제거하도록 설정을 업데이트했습니다.
• 웹팩은 여러개 파일을 하나로 합쳐주는 번들러라고 알고있습니다. 번들러를 사용하는 이유는 파일을 합쳐서 사용자가 파일을 다운받을 때 네트워크의 부하를 줄일 수 있기 때문에 사용하는 것으로 알고있습니다.
• 바벨은 트랜스파일러라고 알고 있고, 트랜스파일러를 사용하는 이유는 모든 브라우저가 ES6의 기능(최신기능)을 제공하지 않기 때문에 ES5코드(구기능)으로 변환시키는 과정이 필요해서라고 알고있습니다.

- Redux Toolkit 을 사용하는 이유에 대해 설명. Redux Toolkit 내부에 결과에 대한 에러 처리를 alert 으로 처리하였는데, 어떻게 개선할 수 있을지에 대한 전략이 궁금합니다.

• 현재 모든 alert를 toast message로 대체하는 작업을 하고있습니다. alert의 경우, 유저의 클릭이 필요하기 때문에 사용성을 해친다고하여, 오류 메세지는 출력하되, 유저의 추가 액션이 필요없는 toast message를 선택했습니다.

  • thunk에서 데이터를 넘길 때 객체 자체를 반환해줍니다. 따로 오류 메세지를 일일히 작성할 필요 없이 받아오는 데이터를 렌더할 때 방식을 통일화 할 수 있도록 해야합니다.

  • 데이터를 받을 때 해당 데이터의 객체를 분리해서 사용하면 됩니다.

    (결론: 공통화된 에러 처리를 해야합니다)

- Input 에 대해 Validation - 경고/오류 연결이 없어 보이는데 앞으로 어떻게 보완할 생각인지

• toast message 로 경고 오류 문구를 보여줄 예정입니다. 회원가입, 로그인 validation 유효성 검사 경고 오류 문구를 원래 Help Text 로 넣었으나 디자인 상 예쁘지 않아 주석처리한 상황입니다. useForm 과 useToast 를 같이 쓰려고 했는데, 사용자의 실수가 없어도 useToast 함수는 함수이기 때문에 계속 호출이 되어서 에러가 생겼습니다. 현재 해당 조건에 맞춰서 toast message가 출력되게끔 작업하는 중입니다.

- Styled Component 의 중복 정의/사용이 보이는데, 이 부분은 어떤 의도로 작성했는지?

• 회원가입, 로그인 페이지에서 공통 Input 스타일 컴포넌트를 적용하면 ‘Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?’ 이런 에러가 떴습니다. useForm 자체에 ref 속성이 있어서 Input 스타일 컴포넌트를 적용할 수 없는 문제라고 판단했습니다. (https://react-hook-form.com/api/useform/register/) 그래서 html input 태그를 썼고 스타일이 중복 사용됐습니다. 더 좋은 해결 방안이 있을지, 있다면 어떤 키워드로 검색을 해야할지 궁금합니다.

  • 리액트 hook form을 사용할 땐 일반 엘리먼트에 적용하는 것이 맞습니다. 하지만 컨트롤러를 사용한다면 커스텀 컴포넌트를 적용할 수 있습니다.

  • ref 설정이 기본으로 내장되어 있어서 문제가 생겼다면, 커스텀 컴포넌트에 ref를 props로 옮겨서 동일하게 적용시키는 방식도 생각해볼 수 있습니다.

  • 최초 질문의 의도는 컴포넌트 최하단에 styled component를 복붙해서 사용한 이유였습니다. 복붙이 아니라 공통적으로 사용할 수 있게 변경해야 합니다.

    (결론: 동일한 css를 가진 elements를 중복해서 사용할 때 매번 styled component를 복붙해서 사용하지 말고 공통적으로 적용할 수 있는 방법을 찾아야 합니다.)