📌 error.tsx 컴포넌트에서 발생한 예상치 못한 오류 처리한다. error.tsx는 client 컴포넌트로 만들어야 한다. [그림 1]은 error.tsx를 적용하지 않은 경우이다. // src/app/error.tsx "use client"; // "use client"를 반드시 작성해야 한다. import React from "react"; interface Props { error: Error; reset: () => void; } const ErrorPage = ({ error, reset }: Props) => { console.log("Error : ", error); // 실제 애플리케이션에서는 콘솔 찍기 대신 로그를 영구적으로 남기면 된다. return ( 예상치 못한 오류가 발생하였..

1. SSR, CSR 컴포넌트의 클래스명 불일치 문제 트위터 클론 코딩인 NodeBird 프로젝트 작업 중에 [그림 1]과 같은 문제를 만나게 되었다. 스타일 관련된 문제라 프로그램이 실행되지 않는 심각한 문제는 아니지만 최초 페이지 로드 시 붉은색 점선으로 표시된 부분에 스타일이 적용되지 않는 문제가 있었다. 콘솔에 찍힌 경고 메시지는 다음과 같다. client.js:1 Warning: Prop `className` did not match. Server: "ant-input-group-wrapper ant-input-search ant-input-search-with-button sc-jSwlEQ ehJBhf css-dev-only-do-not-override-byeoj0" Client: "ant-i..

서버로부터 데이터를 불러오는데 비동기적으로 데이터를 가져오기 때문에 데이터가 없는 상태에서 렌더링이 되어 발생한 에러이다. 옵셔널 체이닝(?.)을 이용하여 프로퍼티가 존재하지 않을 경우 에러를 발생시키지 않고 undefined를 반환할 수 있다. 아래는 옵셔널 체이닝을 적용한 코드이다. dashboardStateTotalTest.batch_total_nowDTO?.count 참고 자료 : https://velog.io/@party3205/React-Cannot-read-properties-of-undefined-reading-%EC%97%90%EB%9F%AC [React] Cannot read properties of undefined (reading) 에러 Cannot read properties of..

computed에 실시간으로 변경되는 데이터를 가공하는 코드를 작성하던 중 자주 만나게 되는 에러였다. 호출한 배열의 값이 없는 상태에서 특정 인덱스를 지정한 경우에 발생했다. 웹 애플리케이션이 작동하지 않는 것은 아니나 콘솔창이 계속 이런 에러를 뱉어 내지 여간 거슬리지 않을 수 없다. 조건문을 사용해 해결했는데 방법은 다음과 같다. if (gidManhole.length === 0) { return } gidManhole는 진행 중인 프로젝트에서 사용한 배열명이다. gidManhole 배열에 값이 없으면 아얘 다음 코드로 진행하지 못하도록 처리한 것이다.

org.hibernate.tool.schema.spi.CommandAcceptanceException: Error executing DDL "create table posts (id bigint not null auto_increment, author varchar(255), content TEXT not null, title varchar(500) not null, primary key (id)) engine=InnoDB" via JDBC Statement "이동욱. (2019). 스프링 부트와 AWS로 혼자 구현하는 웹 서비스. 프리텍"으로 실습 중에 만나게 된 에러이다. 99~100쪽을 실습 중이었고 H2 쿼리 로그를 MySQL 버전으로 출력되게 하기 위해 추가한 설정으로 인해 발생한 에러이다. 아..

패스트 캠퍼스의 "Java&Spring boot로 시작하는 웹 프로그래밍"의 Final 과제를 수행하고 있다. "데이터베이스 연동 설계와 구현"의 6번 "게시판 테이블과 시퀀스는 Board 엔티티에 설정된 Annotation을 기반으로 자동으로 생성되도록 합니다."를 구현하던 중 아래와 같은 에러를 만나게 되었다. org.hibernate.tool.schema.spi.CommandAcceptanceException: Error executing DDL 블라 블라~ Caused by: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL serve..

Maven Repository에서 Springfox Boot Starter 라이브러리를 검색하여 build.gradle에 추가하였다. gradle를 새로고침 하고 프로젝트를 실행시켰더니 다음과 같은 에러가 발생했다. "Failed to start bean 'documentationPluginsBootstrapper'; nested exception is java.lang.NullPointerException" 이 문제는 swagger와 관련된 에러로서 application.yaml에 다음의 코드를 추가하면 해결할 수 있다. 나의 경우 이 코드를 가장 상단에 붙여 넣었다. 프로젝트가 에러 없이 실행된 후 브라우저 주소창에 "http://localhost:8080/swagger-ui/"를 입력하면 [그림 1..

겸상을 마친 이후에는 겸상을 한 밥장과 숟갈의 매너를 서로가 평가하게 된다. [그림 1]은 해당 기능을 구현하던 중 만나게 된 에러이다. 처음 이 에러를 만났을 때 답답했는데 그 이유는 콘솔에는 에러를 알려주고 있지만 화면은 정상적으로 렌더링 되고 있다는 점이다. 원인은 서버로부터 받아온 데이터의 비동기 처리로 인해 발생한 문제였다. 즉, 데이터가 undefined 상태일 때 렌더링이 이루어지기 때문이다. 구글링 해보니 이 문제에 대한 해결 방법 3가지를 확인할 수 있었다. 나의 경우 아래의 코드와 같이 commonQuestions, babjangQuestions 배열을 초기화하여 해결할 수 있었다. export default { ... data() { return { ... commonQuestions..