프로그래밍 공부방

🐥 map(Number), map(parseInt) 정리 우선 Number()와 parseInt에 대해서 먼저 알아보겠습니다. 1. Number() Number(value) Number의 경우에는 매개변수가 한 개입니다. 해당 인수를 숫자로 변환 후 반환합니다. 2.parseInt() parseInt(string) parseInt(string, radix) parseInt는 매개변수가 2개입니다. radix에 아무 값을 주지 않은 경우에는 string값을 정수형으로 바꾼 후 반환합니다. 하지만 radix에 값을 줄 경우에는 string값을 radix진수로 표현한 정수를 반환합니다. 이제 Number와 parseInt에 대해서 알아봤으니 map에 이것들을 적용했을 때 어떻게 되는지 알아보겠습니다. cons..

🐥 router.push와 router.replace 차이점 안녕하세요. 오늘은 router.push와 router.replace의 차이점에 대해서 알아보겠습니다. next.js에서는 페이지를 전환하기 위한 방법은 아래와 같습니다. Link 사용 useRouter 사용 저희가 이번에 알아볼 것은 useRouter에서의 push와 replace입니다. 1. router.push import { useRouter } from 'next/router' export default function Page() { const router = useRouter() return ( router.push('/about')}> // push 사용 Click me ) } push를 사용할 경우에는 이동할 페이지를 새로 추가..

🐥 BigInt 정리 BigInt 는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다. 즉, 이 말은 큰 숫자를 다루고 싶을 때 BigInt를 사용하면 된다는 것입니다. BigInt는 정수 뒤에 n을 붙이거나 함수 BigInt()를 호출해 생성할 수 있습니다. console.log(9999019309203910) // 9999019309203910 console.log(9999019309203910n) // 9999019309203910n console.log(BigInt(9999019309203910)) // 9999019309203910n BigInt를 사용했을 경우 결과값에 n이 붙는 것을 확인할 수 있습니다. ⚠️주의할 점 ..

💛 문제점 아래 화면처럼 페이지를 이동할 때마다 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..

💛 blacklist란?우선 persist-Redux에서 blacklist가 뭘까요?? 저희는 blacklist를 이용해 persist를 제외하고 싶은 부분을 설정할 수 있습니다. whitelist와는 반대되는 개념이네요! 🐥💬개념을 알았으니 문제점으로 넘어가보겠습니당!💛 문제점persist Redux를 사용하던 중에 blacklist를 적용하려고 하는데 적용이 되지 않는 문제가 있었습니다. 아래 이미지에서 왼쪽이 새로고침 전 코드입니다. 저는 persist redux를 사용중이기 때문에 원래는 새로고침을 해도 데이터가 지워지지 않는 것이 맞습니다. 하지만 blacklist에 해당 reducer를 추가해놓은 상태였기 때문에 새로고침을 할 때 데이터가 지워져야 합니다. 오른쪽 이미지는 새로고침 후 코드인데..