오류 설명 Node.js와 npm(Node Package Manager) 사용 시 'npm ERR! ERESOLVE could not resolve dependency' 오류를 만났을 수 있습니다. 이 오류는 프로젝트의 의존성에 충돌 또는 호환성 문제가 있음을 나타냅니다. 흔히 발생하는 오류이지만, 걱정하지 마세요. 해결 방법이 있습니다. 오류 원인 충돌하는 의존성: 프로젝트에 동일한 의존성의 서로 호환되지 않는 버전을 필요로 하는 여러 패키지가 있는 경우 구식 패키지: 오래된 패키지는 버전 충돌을 일으킬 수 있습니다. 잘못된 의존성 설정: package.json 파일의 버전 범위 등에서 실수가 발생하면 의존성 문제가 발생할 수 있습니다. npm 캐시 문제: 손상된 npm 캐시는 패키지 설치를 방해할 수..

끊임없이 진화하는 웹 개발 세계에서 React.js는 동적이고 반응형 사용자 인터페이스를 구축하기 위한 주요 라이브러리로 자리 잡았습니다. TypeScript와 결합하면 React는 타입 안전성과 코드 유지 관리성을 향상시켜 더욱 강력해집니다. 그러나 어떤 기술 스택이든 React.js와 TypeScript는 고유의 도전 과제를 제공할 수 있습니다. 개발자가 자주 마주치는 공통 문제 중 하나는 "window is not defined" 오류입니다. 이 기사에서는 이 오류의 원인을 탐구하고 코드 예제와 함께 효과적인 해결 방법을 살펴보겠습니다. 목차 "window is not defined" 오류란? 오류의 공통 원인 Window 객체 이해하기 문제 해결: 조건부 렌더링 사용 문제 해결: 서버 측 렌더링 ..

에러 발생 사용하고 있는 라이브러리 패키지 버전 업데이트 후 배포 과정에서 아래의 에러메세지가 발생하였다. Node.js version 16.x has reached End-of-Life. Deployments created on or after 2023-08-15 will fail to build. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18. 에러 발생 원인 해당 에러 발생 이유는 현재 배포 환경에 있는 Node.js 버전이 현재 사용하고 있는 Node Version 혹은 라이브러리 패키지들과 맞지 않아 발생한 이유이다. 에러 해결 필자의 경우 Vercel에서 Node.js Version 16을 사용하고 있..

에러 증상은 페이지 이동시에는 새로 고침하면 API가 새로 호출되어 화면이 리렌더링 되고 있었으나, 뒤로가기 통해서 다시 해당 페이지 들어가면 리렌더링이 제대로 되지 않았다. debugger를 통한 디버깅해보니 state값이 제대로 변경되지 않고 있었다. 즉, 컴포넌트 리렌더링시 props 값은 변경되고 있으나, useEffect를 통한 state가 변경되고 있지 않았다. 비슷한 증상 stackoverflow 검색 내용을 첨부하니 참조하자. import React, { useState, useEffect } from "react"; import { Route, Redirect } from "react-router-dom"; import { checkLoggedIn } from "utils/Api"; ex..

에러 useRef를 사용시에 해당 ref(observedRef)를 console.log를 찍어보면 null로 찍힌다. function App() { const observedRef = useRef(null); console.log(observedRef.current); return ( Hello CodeSandbox Start editing to see some magic happen! ); } 해결방법 useRef는 리액트에서 DOM을 연결해주는 Hook으로써, 원하는 element에 ref 속성을 넣어주면 useRef가 객채를 반환하여 current 속성에 dom을 넣어준다. 바닐라 자바스크립트에서 document.getElementbyId. useRef 초기값에 어떤 값을 입력하더라도 null이 출..

에러 Context API를 이용하여 state를 전역관리하고 있다. 그런데 router.push를 이용하면 state 업데이트가 공유가 되지 않고 있다. 혹은 새로 고침시에도 state가 찾을 수 없다고 한다. 해결방법 이럴 때는 localStorage을 활용해보자. 리액트 사용자는 localStorage를 custom Hook, utils, Context API와 결합하여 사용할 수도 있다. 혹은 중요한 정보는 SessionStorage을 활용하자 *localStorage : 데이터를 사용자 로컬에 보존하는 방식으로, 데이터를 저장하고 덮어쓰기, 삭제 등 자바스크립트로 조작이 가능하며, 모바일에서 사용이 가능하다. *SessionStorage : 로컬스토리지는 브라우저 창을 닫더라도 데이터가 유지되는..

문제 현재 리액트 앱(Next.js)에서 useEffect를 이용해서 외부에서 스크립트를 불러와서 쓰고 있다. 그런데 return () => { const s = document.getElementById("inlineContent-flixMedia"); s.parentElement.removeChild(s);} cleanup 함수로 변환했음에도 불구하고 컴포넌트를 리렌더링 하였을 때, 스크립트가 두번 생성되는 에러가 발생하였다 외부 스크립트(flixmedia) : 해당 스크립트는 물건 상세설명 이미지를 만들어주는 스크립트이다 https://www.flixmedia.com/flix-solutions/retailer/faqs FAQs Flixmedia works with over 1,000 retailer..

간혹 도커를 사용하다보면 포트를 이미 쓰고 있어서, 에러가 발생하는 경우가 있다. 에러 메세지 : Ports are not available: listen tcp 0.0.0.0:80: bind: address already in use 필자의 경우 tcp 0.0.0.0:80 포트를 프로젝트에서 traefik 돌리려고 하는데, 이미 사용중이라고 계속 에러 메세지가 뜬다. sudo lsof -i:80 위의 명령어를 통해 현재 해당 포트를 조회할 수 있는데, httpd 에서 사용하고 있는데 검색을 통해 알아보니 아파치(apache) 가 해당 포트 사용중이다. (맥북 아니면 sudo 생략 가능) 이럴 경우 아래의 명령어를 통해 아파치를 멈춰주면 된다. 아파치 멈추게하는 명령어 sudo launchctl unlo..

현재 프로젝트에는 Prettier, Stylelint, Eslint 가 정상적으로 들어가있다. Vscode 내에서 Extension 역시 모두 다 설치하였다. 그런데 문제는 setting.json 에 들어가서 "editor.formatOnSave": true, 를 키고 아무 파일이나 저장하면 lint 에러가 뜨고 다시 다른 아무 파일 저장하고 다시 문제있는 파일을 저장하면 원래데로 돌아오는 기이한 현상(?)이 발생하는것이다. (말로도 설명하기 어려운 문제) 그래서 몇시간동안 setting.json 도 엄청 수정해보고, eslint, stylelint, editorconfig 까지 다 수정해보는 헛수고까지 했는데,,, 문제는 바로 vscode extension 이 기본 포맷터로 인식을 못하고 있는 것이였다..

도커 이미지 다운로드시 가끔 포트가 겹쳐 에러가 나타나는 경우가 있다. 에러코드 Error starting userland proxy: listen tcp 0.0.0.0:XXXX: bind: address already in use 이럴 경우 이미 다른 소프트웨어(예: 리액트, 앵귤러, mysql 등등) 이미 설치하여 이미 포트를 사용하고 있는 경우다. 이럴 경우 먼저 포트를 사용하고 있는지 확인하고 해당 포트를 삭제하거나 혹은 포트를 변경하면 된다. (개인적으로 삭제 kill 은 임시적인 방편이라 사용중이 프로그램 포트를 변경하였다) 현재 맥북을 사용하고 있으며, netstast 혹은 lsof 명령어로 포트를 확인한다. 터미널(리눅스=맥)에서 아래의 코드와 같이 쓰면 현재 내가 사용하고 있는 포트틀 확..