프로그래밍 공부방

💛 문제점 아래 화면처럼 페이지를 이동할 때마다 header가 다시 렌더링되면서 깜빡이는 문제가 발생합니다. 로그인 여부에 따라서 헤더의 오른쪽 컴포넌트가 바뀌어야하기 때문에 생기는 문제입니다. 사용자가 홈페이지를 이용할 때 보기 안좋을 것 같군요...ㅠㅠ 이 문제가 발생했을 때의 코드를 확인해보겠습니다. 🤔 문제가 발생한 코드 let [loginState, setLoginState] = useState(); const accessToken = localStorage.getItem('accessToken'); const confirmLoginState = () => { if (accessToken === decryptAccessToken()) setLoginState(true); } useEffect((..

💛 useEffect와 useLayoutEffect 비교 1. useEffect useEffect는 비동기적이며 화면에 렌더링이 완료된 후에 수행이 됩니다. 🕐순서 - 렌더링을 한 후 React가 이를 DOM에 배치합니다. - 브라우저에서는 이 컴포넌트를 화면에 보여줍니다. - 그 후 useEffect 내의 코드를 실행합니다. - 실행이 완료된 후 React는 DOM을 업데이트합니다. - 업데이트 후 다시 렌더링을 하고 화면에 보여줍니다. 따라서 useLayoutEffect 내에 DOM에 영향을 주는 코드가 있으면 화면에 보여주는 작업을 한 후 DOM이 변경되기 때문에 레이아웃 깜빡임 효과가 나타납니다! 2. useLayoutEffect 위에서 나온 useEffect와 같지만 모든 DOM 변경 후에 동기..

💛 문제점 리액트에서 환경변수를 설정을 해주었는데... undefined가 뜨는 문제가 있었습니다. 변수이름도 REACT_APP_으로 시작하게 잘 만들었는데 무엇이 문제였을까요??? 💛 해결방법 너무 어이없게 해결했습니다.....// 서버를 재시작했더니 해결이 되었습니당... ㅎㅎㅎㅠㅠㅠ 하핫.. 제대로 환경변수 설정을 했는데도 undefined가 뜬다면 서버를 재시작해보시길 바랍니다...!

💛 문제점 역시나 API 통신을 하려고 하니 프론트쪽에서 cors 에러가 났습니다~~🤦‍♀️ 제가 이전에 토이 프로젝트들을 진행했을 때는 프론트엔드와 백엔드를 제가 구현했기 때문에 백엔드쪽에서 CORS 에러를 해결했었습니다. 백엔드에서 CORS 에러를 해결하는 게 정석이긴 합니다... ! 하지만 이번에는 백엔드는 다른 분이 작업하고 저는 프론트만 작업하기 때문에..!!! 제가 해결할 수가 없는 상황이었습니다. 백엔드쪽에서 이 문제를 해결하기 전에 빨리 API 통신을 해보고 싶었기 때문에ㅠㅠ 이번에는 프론트에서 CORS 에러를 해결하는 방법에 대해서 알아보았습니다~~ 💛 해결 방법 Proxy 이용하기 1. 우선 npm을 이용해서 http-proxy-middleware를 설치해줍니다. $ npm instal..