부잉뿌잉의 기록
close
프로필 배경
프로필 로고

부잉뿌잉의 기록

  • 분류 전체보기 (100)
    • 끄적끄적 (4)
    • React (29)
    • Javascript (8)
    • Tyscript & OOP (1)
    • 알고리즘 (25)
    • ETC (8)
    • Next.js (1)
    • CSS (1)
    • HTML (0)
    • Project (7)
    • TDD (12)
  • 홈
  • 태그
  • 방명록
input태그와 onChange함수의 관계

input태그와 onChange함수의 관계

onChange 속성은 사용자가 입력 필드(input)의 값이 변경될 때마다 이벤트를 발생시키기 위해 사용된다. 이는 React에서 사용자 인터페이스(UI)와 컴포넌트의 상태(state)를 동기화하는 데 중요한 역할을 한다. onChange 함수는 다음과 같은 이유로 필수적이다! 1. 양방향 데이터 바인딩 : 사용자의 입력 값이 변경될 때마다, onChange 이벤트를 통해 해당 변경 사항을 컴포넌트의 상태에 반영할 수 있다. 이를 통해 UI가 항상 최신 상태를 반영하게 된다. 2. 폼 유효성 검사 : 사용자의 입력을 실시간으로 검즈앟고, 입력 규칙에 맞지 않는 경우 사용자에게 즉각적인 피드백을 제공할 수 있다. 예를 들어, 이메일 주소 형식이 올바른지, 필수 필드가 모두 채워..

  • format_list_bulleted React
  • · 2024. 4. 23.
  • textsms
useState

useState

# import React, { useState } from 'react'; const [state, setState] = useState(initalState); useState 훅은 React에서 함수형 컴포넌트에서 상태 관리를 가능하게 하는 핵심 기능 중 하나이다. 이전에는 클래스 컴포넌트에서만 상태를 관리할 수 있었지만, React16.8 버전부터 도입된 Hook API 덕분에 함수형 컴포넌트에서도 상태를 유지하고 업데이트할 수 있게 되었다. initialState: 컴포넌트의 초기 상태값입니다. 문자열, 숫자, 객체, 배열 등 어떤 값이든 될 수 있다. state: 현재 상태값을 나타냅니다. initialState에 의해 초기화된다. setState: ..

  • format_list_bulleted React
  • · 2024. 4. 19.
  • textsms
리액트에서 Key란?

리액트에서 Key란?

리액트에서 'Key'라는 건 사실 모든 컴포넌트에서 사용할 수 있는 굉장히 특별한 props야. 보통은 리스트 같은 배열에서 각각의 항목을 컴포넌트로 만들 때 'Key'를 쓰게 되는데, 예를 들어 이렇게 사용할 수 있어. export default function AppKey() { const list = ['a', 'b', 'c', 'd', 'e', 'f']; return ( {list.map((item, index) => { return {item}; })} ); } 리액트에서 배열에 key를 쓰지 않으면 콘솔에 경고가 출력되기 때문에 key를 유일한 값으로 추가하는 것이 일반적이지만 정작 왜 추가해야 하는지는 모르는 경우가 많다. 왜 key가 필요할까? 리액트에서 'Key'는 리렌더링이 일어날 때 ..

  • format_list_bulleted React
  • · 2024. 4. 19.
  • textsms
리액트의 렌더링이란

리액트의 렌더링이란

프론트엔드 이야기할 때 '렌더링'이란 단어가 나오면 가장 먼저 떠올리는 건 브라우저야. 간단히 말해서, 브라우저에서의 렌더링이란 HTML과 CSS를 통해 웹페이지에 필요한 UI를 그려내는 과정을 말해. 이 과정은 사용자에게 정보를 보여주는 만큼 중요하고, 어떻게 렌더링을 하느냐에 따라 웹사이트의 성능에도 큰 영향을 줄 수 있지. 그리고 말이 나온 김에, 리액트에서도 렌더링 이야기를 안 할 수 없어. 리액트의 렌더링은, 말하자면, 브라우저가 필요한 DOM 트리를 만드는 과정과 비슷해. 리액트 역시 렌더링을 위한 자기만의 과정이 있어서, 이걸 이해하는 건 리액트를 이해하는 데 정말 중요해. 리액트에서 렌더링은 시간과 리소스를 많이 써서 이루어지는 일인데, 이 비용은 결국 웹 애플리케이션을 방문하는 사용자한테..

  • format_list_bulleted React
  • · 2024. 4. 19.
  • textsms
Firebase Permission denied 문제 - 해결방법

Firebase Permission denied 문제 - 해결방법

파이어베이스를 이용해서 만든 이커머스 사이트 프로젝트를 오랜만에 npm start 를 해보았다.... 반가운 화면이 날 맞이 해줬다. 왜!? Permission denied at http://localhost:3001/static/js/vendors-node_modules_uuid_dist_esm-browser_v4_js-node_modules_firebase_app_dist_esm_index_esm-3ca348.chunk.js:21397:27 at async http://localhost:3001/static/js/src_App_js.chunk.js:149:31 ERROR Permission denied at http://localhost:3001/static/js/vendors-node_modules..

  • format_list_bulleted ETC
  • · 2024. 4. 19.
  • textsms
next/image` changed in version 13에 따른 경고를 없애보자.

next/image` changed in version 13에 따른 경고를 없애보자.

Next.js로 블로그를 만들어 보고 있는 와중에 Image에 대한 경고가 발생했다. 블로그에는 우선 로컬 데이터를 이용하여 이미지와 내용들을 Promise를 사용하여 불러오는데, 이미지가 많은 만큼 경고 또한 오지게 많았다. Read more를 통해 해당 경고에 대한 공식 문서를 읽어보았다. `next/image` changed in version 13 Using App Router Features available in /app nextjs.org 내용은 Next.js 13에서 next/image 컴포넌트에 대한 주요 변경 사항을 설명하고 있다. 이전 레거시 컴포넌트와 비교하여 새로운 next/image 컴포넌트의 변경 사항을 다음과 같은 설명 한다. 이 오류가 발생한 이유 주위의 래퍼를 제거하고 네..

  • format_list_bulleted Next.js
  • · 2024. 4. 18.
  • textsms
  • navigate_before
  • 1
  • ···
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • ···
  • 17
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (100)
    • 끄적끄적 (4)
    • React (29)
    • Javascript (8)
    • Tyscript & OOP (1)
    • 알고리즘 (25)
    • ETC (8)
    • Next.js (1)
    • CSS (1)
    • HTML (0)
    • Project (7)
    • TDD (12)
최근 글
인기 글
최근 댓글
태그
  • #자바스크립트20년차 개발자처럼 주석다는 법
  • #코딩애플
  • #애플코딩
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바