에러
-
웹 개발의 끊임없는 진화 속에서 레이아웃 디자인의 숙련은 중요합니다. Flexbox는 많은 개발자에게 선택의 도구가 되어왔습니다. 그러나 도전도 있습니다. 그 중 하나가 Flex 넓이 오류로, 신중하게 설계된 디자인을 방해할 수 있습니다. 이 기사에서는 Flex 넓이 오류의 세계에 깊게 파고들고 간단하지만 효과적인 해결책인 flex-wrap: wrap에 대해 알아보겠습니다. Flexbox 이해 Flex 넓이 오류에 대한 대응 전에, Flexbox 자체에 대한 확실한 이해가 필요합니다. Flexbox는 Flexible Box의 약자로, 컨테이너 내에서 디자인 요소를 동적으로 배치할 수 있는 레이아웃 모델입니다. 공간을 효율적으로 분배하고 항목을 정렬하며 다양한 화면 크기에 대응하는 더 효율적이고 예측 가능..
[CSS] Flex 넓이 에러(오류) 고치는 방법 - flex-wrap웹 개발의 끊임없는 진화 속에서 레이아웃 디자인의 숙련은 중요합니다. Flexbox는 많은 개발자에게 선택의 도구가 되어왔습니다. 그러나 도전도 있습니다. 그 중 하나가 Flex 넓이 오류로, 신중하게 설계된 디자인을 방해할 수 있습니다. 이 기사에서는 Flex 넓이 오류의 세계에 깊게 파고들고 간단하지만 효과적인 해결책인 flex-wrap: wrap에 대해 알아보겠습니다. Flexbox 이해 Flex 넓이 오류에 대한 대응 전에, Flexbox 자체에 대한 확실한 이해가 필요합니다. Flexbox는 Flexible Box의 약자로, 컨테이너 내에서 디자인 요소를 동적으로 배치할 수 있는 레이아웃 모델입니다. 공간을 효율적으로 분배하고 항목을 정렬하며 다양한 화면 크기에 대응하는 더 효율적이고 예측 가능..
2024.01.26 -
끊임없이 진화하는 웹 개발 세계에서 React.js는 동적이고 반응형 사용자 인터페이스를 구축하기 위한 주요 라이브러리로 자리 잡았습니다. TypeScript와 결합하면 React는 타입 안전성과 코드 유지 관리성을 향상시켜 더욱 강력해집니다. 그러나 어떤 기술 스택이든 React.js와 TypeScript는 고유의 도전 과제를 제공할 수 있습니다. 개발자가 자주 마주치는 공통 문제 중 하나는 "window is not defined" 오류입니다. 이 기사에서는 이 오류의 원인을 탐구하고 코드 예제와 함께 효과적인 해결 방법을 살펴보겠습니다. 목차 "window is not defined" 오류란? 오류의 공통 원인 Window 객체 이해하기 문제 해결: 조건부 렌더링 사용 문제 해결: 서버 측 렌더링 ..
[Next.js, React.js] "window is not defined" 원인 및 해결 방법끊임없이 진화하는 웹 개발 세계에서 React.js는 동적이고 반응형 사용자 인터페이스를 구축하기 위한 주요 라이브러리로 자리 잡았습니다. TypeScript와 결합하면 React는 타입 안전성과 코드 유지 관리성을 향상시켜 더욱 강력해집니다. 그러나 어떤 기술 스택이든 React.js와 TypeScript는 고유의 도전 과제를 제공할 수 있습니다. 개발자가 자주 마주치는 공통 문제 중 하나는 "window is not defined" 오류입니다. 이 기사에서는 이 오류의 원인을 탐구하고 코드 예제와 함께 효과적인 해결 방법을 살펴보겠습니다. 목차 "window is not defined" 오류란? 오류의 공통 원인 Window 객체 이해하기 문제 해결: 조건부 렌더링 사용 문제 해결: 서버 측 렌더링 ..
2023.09.15 -
자바스크립트로 작업할 때 개발자들은 종종 "Cannot read properties of undefined"라는 일반적인 오류를 마주합니다. 이 오류 메시지는 개발자들에게 현재 정의되지 않거나 null인 객체에서 속성이나 메서드에 접근하려고 할 때 발생합니다. 이 기사에서는 이 오류가 발생하는 이유, 이를 식별하는 방법, 그리고 코드에서 이 오류를 다루고 예방하는 다양한 전략을 탐구하겠습니다. 목차 "Cannot read properties of undefined" 오류 이해하기 오류의 원인은 무엇인가요? 코드에서 오류를 식별하는 방법은? 오류가 발생하는 일반적인 시나리오 실수로 undefined 또는 null 값 할당 잘못된 객체 접근 비동기 작업과 콜백 오류 처리하기 Nullish Coalescing..
"Cannot read properties of undefined" 이해하고 해결하기자바스크립트로 작업할 때 개발자들은 종종 "Cannot read properties of undefined"라는 일반적인 오류를 마주합니다. 이 오류 메시지는 개발자들에게 현재 정의되지 않거나 null인 객체에서 속성이나 메서드에 접근하려고 할 때 발생합니다. 이 기사에서는 이 오류가 발생하는 이유, 이를 식별하는 방법, 그리고 코드에서 이 오류를 다루고 예방하는 다양한 전략을 탐구하겠습니다. 목차 "Cannot read properties of undefined" 오류 이해하기 오류의 원인은 무엇인가요? 코드에서 오류를 식별하는 방법은? 오류가 발생하는 일반적인 시나리오 실수로 undefined 또는 null 값 할당 잘못된 객체 접근 비동기 작업과 콜백 오류 처리하기 Nullish Coalescing..
2023.08.02 -
소개 오늘날의 디지털 시대에 강력한 온라인 입지를 확보하는 것은 기업과 개인 모두에게 매우 중요합니다. 온라인 입지를 확립하기 위한 필수 단계 중 하나는 도메인을 안정적이고 확장 가능한 호스팅 서비스에 연결하는 것입니다. Amazon Web Services(AWS)는 이러한 목적을 위해 도메인 등록 및 관리를 위한 AWS Route 53과 웹 사이트 및 애플리케이션 호스팅을 위한 AWS Lightsail의 두 가지 강력한 서비스를 제공합니다. 이 기사에서는 도메인을 AWS Route 53 및 AWS Lightsail과 연결하여 웹 사이트를 효율적으로 실행하는 방법에 대한 단계별 가이드를 안내합니다. 목차 도메인 등록 이해 아마존 웹 서비스(AWS)에 가입하기 AWS Route 53 설정 호스팅 영역 생성..
도메인을 AWS Route 53과 AWS Lightsail과 연결하는 방법소개 오늘날의 디지털 시대에 강력한 온라인 입지를 확보하는 것은 기업과 개인 모두에게 매우 중요합니다. 온라인 입지를 확립하기 위한 필수 단계 중 하나는 도메인을 안정적이고 확장 가능한 호스팅 서비스에 연결하는 것입니다. Amazon Web Services(AWS)는 이러한 목적을 위해 도메인 등록 및 관리를 위한 AWS Route 53과 웹 사이트 및 애플리케이션 호스팅을 위한 AWS Lightsail의 두 가지 강력한 서비스를 제공합니다. 이 기사에서는 도메인을 AWS Route 53 및 AWS Lightsail과 연결하여 웹 사이트를 효율적으로 실행하는 방법에 대한 단계별 가이드를 안내합니다. 목차 도메인 등록 이해 아마존 웹 서비스(AWS)에 가입하기 AWS Route 53 설정 호스팅 영역 생성..
2023.07.23 -
에러 발생 사용하고 있는 라이브러리 패키지 버전 업데이트 후 배포 과정에서 아래의 에러메세지가 발생하였다. 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을 사용하고 있..
Node.js version xx.x has reached End-of-Life.에러 발생 사용하고 있는 라이브러리 패키지 버전 업데이트 후 배포 과정에서 아래의 에러메세지가 발생하였다. 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을 사용하고 있..
2023.06.24 -
Confirm Password * { if (watch('password') != val) { return 'Your passwords do no match'; } }, })} /> {errors.confirm_password?.type === 'required' && ( Confirm Password is required )} {errors.confirm_password?.type === 'validate' && ( Confirm Password is not same Password )} React Hook Form은 React 애플리케이션에서 폼을 만들고 유효성을 검사하기 위한 간편한 방법을 제공하는 인기 있는 라이브러리입니다. 그러나 때로는 React Hook Form을 사용하는 동안 발생할 수 있..
React Hook Form Validate Error MessageConfirm Password * { if (watch('password') != val) { return 'Your passwords do no match'; } }, })} /> {errors.confirm_password?.type === 'required' && ( Confirm Password is required )} {errors.confirm_password?.type === 'validate' && ( Confirm Password is not same Password )} React Hook Form은 React 애플리케이션에서 폼을 만들고 유효성을 검사하기 위한 간편한 방법을 제공하는 인기 있는 라이브러리입니다. 그러나 때로는 React Hook Form을 사용하는 동안 발생할 수 있..
2023.06.15 -
에러 증상은 페이지 이동시에는 새로 고침하면 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..
useEffect와 useState state 업데이트 에러에러 증상은 페이지 이동시에는 새로 고침하면 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..
2022.08.06 -
에러 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이 출..
useRef .current null Error에러 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이 출..
2022.08.04 -
혼자서 코드를 작성하는게 아니라 협업을 하는거면 lint는 필수. 그 중 eslint 사용하고 있다면 에러가 날 경우, 어떻게 처리 혹은 대처하는지 단계별로 알아보자. 적용 순위는 1 > 2 > 3 로써 3번은 최후의 수단이다. 1. 해당 오류가 있는 코드를 수정하거나 혹은 사용하지 않는 파일이라면 삭제한다. 가장 깔끔한 방법으로 권장하는 방법이다. 일단 에러 코드를 구글에서 검색하여, stackoverflow 등을 참조하여 코드를 추가 혹은 수정하여 처리할 수 있으면 가장 깔끔한 방법이다. (허나 인터넷의 경우 대부분 3번처럼 규칙을 아예 꺼버리는 경우가 많다.) 예를 들어, babel-lint 를 설치하거나 webpack 적용하여 lint 에러를 처리하는 경우가 가장 깔끔하다. 다만 이럴 경우 처리 ..
Eslint 에러 대처 방법혼자서 코드를 작성하는게 아니라 협업을 하는거면 lint는 필수. 그 중 eslint 사용하고 있다면 에러가 날 경우, 어떻게 처리 혹은 대처하는지 단계별로 알아보자. 적용 순위는 1 > 2 > 3 로써 3번은 최후의 수단이다. 1. 해당 오류가 있는 코드를 수정하거나 혹은 사용하지 않는 파일이라면 삭제한다. 가장 깔끔한 방법으로 권장하는 방법이다. 일단 에러 코드를 구글에서 검색하여, stackoverflow 등을 참조하여 코드를 추가 혹은 수정하여 처리할 수 있으면 가장 깔끔한 방법이다. (허나 인터넷의 경우 대부분 3번처럼 규칙을 아예 꺼버리는 경우가 많다.) 예를 들어, babel-lint 를 설치하거나 webpack 적용하여 lint 에러를 처리하는 경우가 가장 깔끔하다. 다만 이럴 경우 처리 ..
2020.06.24