솔미는 성장중

문제발생!!!! 백엔드 분들과 협업하여 작업하던 프로젝트에서 CORS 에러가 발생했다. 백엔드 측에서는 프론트에서 사용하는 포트번호를 열어주었다는 데 그게 적용되지 않는 문제였다. (시큐리티를 적용하고 나서 발생한 문제였는데, 백엔드 측에서 한 가지 설정을 빼먹으셨던 것이 원인이었다.) 마감이 얼마 남지 않았는데 권한 에러가 발생해 API 연동과 관련된 모든 작업이 all stop되는 사태가 발생했다 (っ °Д °;)っ 그래서 다양한 해결법을 알아보던 중 proxy 서버를 띄워서 작업해보라고 멘토님께서 제안해주셨다! 배포할 때 적용시킬 순 없지만 (일반적으로 배포할 때 proxy서버를 띄우지 않으니까) 일단 코드를 짜고 작업할 수 있는 환경을 만들 수 있었다. 개념을 먼저 잡아보자! Proxy 서버란? ..

보호되어 있는 글입니다.

문제 상황 백엔드와 야놀자 기업 과제 프로젝트를 진행하게 되었다. 2주라는 짧은 프로젝트였기에 모든 과정이 빠르게 진행되어야 했다. ＼（〇_ｏ）／ 초반 ERD작업, API설계, 디자인 시안 제작, 기획 등 빠르게 진행되었다! 모든 것이 착착 진행되나 싶었으나 문제가 생겼다.. 퍼블리싱을 다 끝냈는데도 불구하고 API를 만드는 작업은 아주 초반 단계였던 것이다. 그렇다고 손놓고 있을 수는 없겠다라는 생각에 붕 뜬 시간에 무엇을 할 수 있을지 알아보았다. ✨ 그러다가 알게 된 MSW ! ✨ MSW 작동방식 1. 라이브러리를 설치하면 브라우저에 Service Worker을 등록한다. 2. Service Worker는 브라우저에서 이루어지는 실제 네트워크 요청들을 가로채 복사해서 실제 서버가 아닌 클라이언트 사..

보호되어 있는 글입니다.

Reducer 함수를 사용하는 이유 컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 상황을 한눈에 파악하기 어려울 수 있다. 따라서 Reducer를 이용해 state를 관리하면 state 로직의 양을 줄이고, 복잡성을 줄일 수 있다. (접근하기 쉽게 한 곳으로 모아주는 역할) useState에서 useReducer로 마이그레이션 하는 방법 1. state 설정을 action들의 전달로 바꾸기 2. reducer 함수 작성하기 3. 컴포넌트에서 reducer 사용하기 1. state 설정을 action들의 전달로 바꾸기 dispatch 함수에 넣어준 객체를 “action”이라고 한다. 일반적으로 무슨 일이 일어났는지 에 대한 최소한의 정보를 포함한다. (type에 string으로 작성) 예시) f..