오류 설명 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 객체 이해하기 문제 해결: 조건부 렌더링 사용 문제 해결: 서버 측 렌더링 ..

웹 개발의 세계에서 JavaScript는 웹 페이지를 상호작용적이고 동적으로 만드는 데 중요한 역할을 합니다. JavaScript 개발자의 기본 도구 중 하나는 console.log() 함수입니다. 이 글에서는 console.log()의 다양한 측면, 사용 사례 및 개발자의 가장 친한 친구가 될 수 있는 방법을 자세히 살펴보겠습니다. 1. console.log() 소개 console.log() 함수는 내장 JavaScript 메서드로, 개발자가 메시지, 변수 및 기타 데이터를 브라우저의 콘솔에 로깅할 수 있게 해줍니다. 이는 디버깅, 코드 실행 모니터링 및 개발 중에 유용한 통찰력을 제공하는 다재다능한 도구입니다. 2. 기본 사용법 console.log()를 사용하려면 메시지나 로깅하려는 변수를 호출하면..

자바스크립트로 작업할 때 개발자들은 종종 "Cannot read properties of undefined"라는 일반적인 오류를 마주합니다. 이 오류 메시지는 개발자들에게 현재 정의되지 않거나 null인 객체에서 속성이나 메서드에 접근하려고 할 때 발생합니다. 이 기사에서는 이 오류가 발생하는 이유, 이를 식별하는 방법, 그리고 코드에서 이 오류를 다루고 예방하는 다양한 전략을 탐구하겠습니다. 목차 "Cannot read properties of undefined" 오류 이해하기 오류의 원인은 무엇인가요? 코드에서 오류를 식별하는 방법은? 오류가 발생하는 일반적인 시나리오 실수로 undefined 또는 null 값 할당 잘못된 객체 접근 비동기 작업과 콜백 오류 처리하기 Nullish Coalescing..

에러 증상은 페이지 이동시에는 새로 고침하면 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..

혼자서 코드를 작성하는게 아니라 협업을 하는거면 lint는 필수. 그 중 eslint 사용하고 있다면 에러가 날 경우, 어떻게 처리 혹은 대처하는지 단계별로 알아보자. 적용 순위는 1 > 2 > 3 로써 3번은 최후의 수단이다. 1. 해당 오류가 있는 코드를 수정하거나 혹은 사용하지 않는 파일이라면 삭제한다. 가장 깔끔한 방법으로 권장하는 방법이다. 일단 에러 코드를 구글에서 검색하여, stackoverflow 등을 참조하여 코드를 추가 혹은 수정하여 처리할 수 있으면 가장 깔끔한 방법이다. (허나 인터넷의 경우 대부분 3번처럼 규칙을 아예 꺼버리는 경우가 많다.) 예를 들어, babel-lint 를 설치하거나 webpack 적용하여 lint 에러를 처리하는 경우가 가장 깔끔하다. 다만 이럴 경우 처리 ..