kohigowild

Problem Error: Image import ... is not a valid image file. The image may be corrupted or an unsupported format. build 되는 과정에서 public 폴더 안에 있는 static 이미지가 누락되는 문제 Reason Disable Static Imports disableStaticImages 속성이 true로 되어 있어서 정적 이미지를 가져올 수 없었던 걸로 추측됨 Try to solve invalid-images-config | Next.js invalid-images-config | Next.js Invalid images config In your next.config.js file you provided an i..

Problem Syntax error: "@next/font" requires SWC although Babel is being used due to a custom babel config being present. Reason 🤔 https://github.com/mui/material-ui/issues/35673 Syntax error: "@next/font" requires SWC although Babel is being used due to a custom babel config being present. · Issue #35673 Duplicates I have searched the existing issues Latest version I have tested the latest versi..

string, number, boolean string "Hello, World!" number 29, Infinity, NaN boolean true, false object object 속성(Property) 키(Key), 값(Value) interface PersonType { name: string; age: number; isStudent: boolean; studentNum?: number; } const person:PersonType = { name: "박주경", age: 27, isStudent: true } const getPersonAge = (person: PersonType) => { console.log(person.age) } array, tuple, enum array str..

💡 Ref Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. 예를 들어 HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 와 같이 id를 사용하는데, 이처럼 React에서도 DOM을 선택해 직접 접근하기 위해 Ref를 사용한다. Ref를 사용해야 할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 💡 비제어 컴포넌트 방식 - Ref 활용 import React, { useRef } from "react"; export default function UncontrolledForm() { const inputRef = useRef()..

👽 props와 state 리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉜다. 바로 props와 state인데, props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없다. 반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 💡 props props는 컴포넌트를 부를 때 함께 지정한다. 아래 코드에서는 People 컴포넌트에 name prop과 age prop을 지정하였다. 위와 같이 같은 타입의 컴포넌트에 다른 props 값을 주어 패턴이 반복되는 형태로 컴포넌트의 효율적인 재사용이 가능하다. props에는 불리언, 숫자, 배열과 같은 다양한 형태의 데이터를 담을 수 있고, 공백 ..

👽 Observer Pattern 옵저버 패턴(Observer Pattern)은 어떤 이벤트가 일어나는 것을 감시하는 패턴을 의미한다. 함수로 직접 요청한 적 없지만 시스템에 의해 발생하는 동작들을 이벤트라 하는데, 이러한 이벤트들을 감시하여 이벤트가 발생할 때마다 미리 정의해 둔 어떠한 동작을 즉각 수행하게 해 주는 프로그래밍 패턴을 옵저버 패턴이라 한다. 예시로 A 버튼이 클릭될 때마다 화면에 '안녕'을 출력하는 동작을 들 수 있다. 옵저버 패턴을 활용하면 다른 객체의 상태 변화를 별도의 함수 호출 없이 즉각적으로 알 수 있기 때문에, 이벤트에 대한 처리를 자주 해야 하는 프로그램이라면 매우 효율적인 프로그램을 작성할 수 있다. Model의 상태가 변경되면 이를 구독하고 있는 View의 렌더링 함수(..

👽 컴포넌트란? 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 레고 블록처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 웹 컴포넌트를 이용하여 코드를 작성하면 Vue나 React와 같은 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다. 👽 바닐라 JS로 웹 컴포넌트 구현 index.html src > app.js import Items from "./components/Items.js"; class App { constructor() { const $app = document.querySelector("#app"); new Items($app); } } new App(); src > component > Item.js import Comp..

👽 컴포넌트 생명 주기 (Life Cycle) 리액트의 컴포넌트는 생명 주기를 갖는다. 생명 주기란 컴포넌트가 생성되고, 사용되고, 소멸되는 일련의 과정을 뜻하고, 생명 주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다. 어떤 라이프 사이클 이벤트는 한 번만 실행되고, 어떤 이벤트는 계속해서 실행되기도 한다. 라이프 사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있다. 👽 라이프 사이클 이벤트의 분류 라이프 사이클 메서드의 종류는 총 9가지이다. will 접두사가 붙은 메서드: 어떤 작업을 작동하기 전 실행 did 접두사가 붙은 메서드: 어떤 작업을 작동한 후에 실행 라이프 사이클은 3가지 Mount, Update, Unmount 카테고리로 나눈다. 각 ..