0519 TIL

💡새로 배운 내용

면접 꿀팁

💡 능력보다는 성장 가능성에 훨씬 초점을 맞추고 면접관들에게 자신의 성장 가능성을 설득력있게 어필하면된다.

1. CORS

추가적인 정보를 더 띄워주고 싶어서 질병 정보 서비스 api 를 사용해보려던 중

오랜만에 CORS에러를 마주쳤고 다시 한번 정리하기 위해 기록한다.

해결 방법

1. proxy 설정

{
...
	"proxy":"http://localhost:5000",
...
}

1. withCredential

   axios.defaults.withCredentials = true,
   
   // or
   axios.get(`${BASE_URL}?serviceKey=${process.env.REACT_APP_API_KEY}`, {
         params: {
           ...params,
         },
         withCredentials: true,
       })

1. Http-Proxy-Middleware

   설치

   npm i http-proxy-middleware

   ./src/setupProxy.ts

   import {createProxyMiddleware} from 'http-proxy-middleware'
   
   module.exports = function (app) {
     app.use(
       '/api',
       createProxyMiddleware({
         target: 'api요청주소 * 엔드포인트까지만 넣어주자'
         pathRewrite: {
           '^/api': '',
         },
       }),
     );
   };

위 방법들로 CORS문제는 해결했으나 XML로 결과값이 리턴되어서 304 경고가 뜬다..

xml-js, xml2js 등의 라이브러리를 써보려했지만 둘다 buffer 에러가 나서 결국 추가 api 활용은 포기해야할듯 싶다..

2. Esc로 모달 제어

const handleKeyBoardClose = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') dispatch(setModalState(closeState))
  }

// ...

<section
        role='button'
        tabIndex={0}
        ref={backDropRef}
        className={cx(styles.modalBackDrop, { [styles.open]: modalOpen })}
        onClick={closeModal}
        onKeyDown={handleKeyBoardClose}
      >
// ...
// ...
</section>

e.keyCode는 더이상 쓰지 않는것으로 보인다 (취소선 표시가 되어있음)

📝내일 할 일

• 각자 개발한 컴포넌트 합치기
• 오류 제어