경북대 FE_이정민_3주차 과제 Step3

[userjmmm]

안녕하세요 멘토님,
step3의 기능 요구 사항까지 구현해서 제출합니다!

다음은 step4 질문 답변입니다.

• 질문 1. CORS 에러는 무엇이고 언제 발생하는지 설명해주세요. 이를 해결할 수 있는 방법에 대해서도 설명해주세요.
  Cross-Origin Resource Sharing의 약어로, 동일한 출처의 리소스에만 접근하도록 제한 하는 "동일 출처 정책"을 의미합니다.
  이는 웹페이지가 다른 프로토콜, 호스트명, 포트 등에서 제공하는 리소스를 요청할 때 발생합니다. 웹 브라우저에서는 자동으로 쿠키가 첨부된다는 특징이 있어 보안상의 이유로 해당 정책이 발생하게 되었습니다.
  해결 방법은 프록시 서버를 이용하거나 http-proxy-middleware를 사용, 서버에서 CORS 헤더를 설정해서 다른 출처의 요청도 허용할 수도 있습니다.

• 질문 2. 비동기 처리 방법인 callback, promise, async await에 대해 각각 장단점과 함께 설명해주세요.

1. Call back은 최초의 비동기 처리 방식입니다. 따라서 오래된 브라우저에서도 사용 가능하며 간단합니다. 단점은 콜백 헬로 인해서 가독성이 안 좋고, 처리 순서가 보장되지 않을 수 있습니다.
2. Promise는 콜백지옥을 해결하기 위해 나왔다. 이 객체는 생성할 때 함수를 하나 넘겨주는데 resolve와 reject 파라미터를 이용해서 비동기 처리 완료,실패 처리를 할 수 있다. 장점은 콜백과 달리 순차적으로 처리할 수 있고, 가독성도 좋다. 단점은 오래된 브라우저에선 지원되지 않을 수 있고, 초기에 코드를 설정할 때 복잡하다.
3. async/await 는 Promise의 메소드 체이닝으로 인한 .then의 연속적인 사용에 의해 코드가 지저분해지는 문제를 보완하고자 나온 문법으로 ES8부터 도입이 되었다. 기본적으로 promise 객체를 기반으로 동작하며 async 함수에서 await 키워드를 사용하면 그 뒤의 promise 객체가 처리될 때까지 함수의 실행이 pause된다. 이 처리 결과를 async 함수의 반환 값으로 사용한다. 장점은 promise 객체보다 직관적으로 이해할 수 있고, 단점은 오버헤드가 있을 수 있고, await을 사용할 수 있는 함수는 async 함수 내에서만 사용할 수 있다는 한계가 있다.

• 질문 3. react query의 주요 특징에 대해 설명하고, queryKey는 어떤 역할을 하는지 설명해주세요.
  react query는 전역 상태 라이브러리를 사용할 때 로컬과 브라우저에서 각각 사용하는 데이터가 섞이는 일들을 방지해준다. 또한 데이터가 변경될 때 자동으로 re-fetch하여 최신 데이터를 유지한다. 또한 캐싱 기능을 사용해 훨씬 빠르게 동작할 수 있도록 돕는다.
  queryKey는 각 쿼리를 고유하게 식별하는 역할을 한다. 따라서 이 값을 기반으로 데이터를 캐시에 저장하고, 쿼리를 무효화하여 최신 데이터를 가져온다.

좋은 질문들로 다시 한 번 구현에 대해 깊은 생각을 할 수 있도록 도와주셔서 감사합니다 :)

[sjoleee]

1단계에서 구현한 api 호출 로직이 axios + react-query로 수정되지 않았네요!
확인 후 수정해주시면 좋을 것 같습니다.

그리고 지난 번 리뷰와 동일하게 node_modules를 지우고, npm install후 프로젝트를 실행하시면 정상적으로 시작이 안될건데요,
axios와 react-query가 package.json에 의존성으로 명시되지 않았는데 어떻게 개발을 하고 계신걸까요...??
개발하고계신 환경에서 package.json 내에 axios와 react query가 의존성으로 명시되어 있나요?? 확인 부탁드려요!