react6 [React] react (vite)project 기본적인 개발 구조 설계 Vite로 새 프로젝트를 생성하면 기본적인 폴더 구조가 제공된다. 실제 개발을 위해서는 페이지와 기능을 효율적으로 관리할 수 있도록 기초적인 뼈대를 만드는 작업이 필요하다.기본 폴더public : 빌드 과정에서 특별한 처리 없이 그대로 유지되는 정적 파일이 위치하는 곳이다. 주로 파비콘(favicon)이나 robots.txt 파일 등이 여기에 해당된다.assets : 컴포넌트 내부에서 직접 불러와 사용하는 이미지, 폰트 등 정적 파일을 모아두는 곳이다. 이곳의 파일들은 빌드 시 최적화 과정을 거치는 것이다. 개발 편의성을 위한 폴더 구조 설계src 폴더 내부에 다음과 같은 폴더들을 추가하여 구조를 설계하면 코드 관리가 용이해진다.components 버튼, 인풋 창, 모달처럼 여러 페이지에서 재사용될 UI.. 2025. 9. 11. [React] vite project 생성 및 구조 가이드 현재 SI 프로젝트 대비 react 공부를 계속계속 하고 있다. 그리고 곧 신입들이 들어온다는 얘기를 들었다. 그래서 그 친구들을 위해 그리고 나를 위해 react 관련 정보들을 정리해둘려고 한다. vite(비트) 프로젝트 기반에서 리액트 애플리케이션을 만들거라 vite에 대해서부터 알아보자. Vite(비트)프론트엔드 빌드 도구빠른 개발 서버미리 번들링 없이 모듈을 바로 로드하여 서버를 즉시 시작함.번들링 : 여러 코드와 프로그램을 묶어 사용자에게 웹 애플리케이션을 제공하는 과정. 최종적으로 번들링된 파일을 브라우저에서 실행하여 웹 애플리케이션을 실행개발 중 번들링 없이 모듈을 직접 로드빠른 빌드 속도환경 변수 지원.env 파일을 통해 환경 변수를 쉽게 관리할 수 있음간단히 말해 vite는 리액트의 빌.. 2025. 9. 10. [React] Hook이 대체 뭐야? (useState, useEffect) 리액트 훅(Hook)이란?저번에 컴포넌트에 대해서 간단하게 설명했을 때 안한 얘기가 하나 있다.컴포넌트는 크게 두 가지 유형으로 나뉜다.클래스형 컴포넌트와 함수형 컴포넌트이다.클래스형 컴포넌트는 예전부터 사용하던 방식으로, 이름처럼 ‘클래스’ 라는 문법으로 만든다. 기능은 많지만 코드가 조금 길고 복잡하게 느껴질 수 있다.함수형 컴포넌트는 비교적 최근에 등장해 대세가 된 방식이다. ‘함수’ 형태로 훨씬 간결하고 직관적으로 컴포넌트를 만들 수 있다.이 함수 컴포넌트는 마치 ‘주문을 받으면 특정 모양의 레고 블록(UI)을 만들어서 내놓는 간단한 기계’ 와 같다.그런데 이 간단한 기계에는 몇 가지 치명적인 단점이 있다.기억력이 없다. (Stateless) : 버튼을 몇 번 눌렀는지, 사용자가 입력창에 무엇을 .. 2025. 6. 30. [React] 리액트 렌더링에 대해서 리액트의 렌더링이란?지난 컴포넌트에 대해서 설명할 때, 컴포넌트가 마치 레고 블록과 같다고 설명했다.그렇다면 렌더링은 이 레고 블록을 조립해서 눈에 보이는 ‘집’을 만드는 과정이라고 할 수 있다.컴퓨터가 리액트 컴포넌트라는 코드를 읽어서 우리가 실제로 보는 웹사이트 화면으로 그려주는 작업을 바로 ‘렌더링’이라고 부른다.리액트 렌더링 과정리액트로 만든 웹사이트를 하나의 거대한 ‘레고 전시장’ 이라고 상상해보자. 우리가 웹사이트 주소를 딱 치고 들어가는 순간은, 이 전시장에 처음 입장하는 것과 같다.index.html - “텅 비어있는 전시장”모든 웹사이트는 사실 HTML 이라는 뼈대로 이루어져 있다. 리액트 프로젝트 폴더를 열어보면 public 폴더 안에 index.html 이라는 파일이 있을거다.이 in.. 2025. 6. 27. 이전 1 2 다음
