FRONTEND/React 4

[React] CRUD 게시판 화면 간단하게 구현하기 (React + TypeScript)

0. 사용하는 패키지 다운로드 1. react-router-dom 설치npm install react-router-domnpm install --save-dev @types/react-router-dom 1. 폴더 구조와 역할 파악 이전 게시글에서 프로젝트의 src 하위에 폴더를 용도에 따라 추가해주었다. 2025.07.29 - [FRONTEND/React] - [React] 프로젝트 구조 추가 설정 (src 하위 폴더, Prettier) [React] 프로젝트 구조 추가 설정 (src 하위 폴더, Prettier)이전에는 Vite를 통해 리액트 프로젝트를 생성했다. 이번에는 실제 간단한 프로젝트를 구현하기 앞서 구조에 대한 설정을 추가해준다. 1. 용도에 따른 폴더 추가 Vite를 통해 프로젝트를 ..

FRONTEND/React 2025.07.29

[React] 프로젝트 구조 추가 설정 (src 하위 폴더, Prettier)

이전에는 Vite를 통해 리액트 프로젝트를 생성했다. 이번에는 실제 간단한 프로젝트를 구현하기 앞서 구조에 대한 설정을 추가해준다. 1. 용도에 따른 폴더 추가 Vite를 통해 프로젝트를 생성하면 src 폴더 하위에는 assets 폴더(정적 자원 저장)만 생성되어 있다. 이를 용도에 맞게 좀더 세분화하여 관리할 수 있다. ├─ src/│ ├─ assets → 이미지, 아이콘, 폰트 등 정적 파일│ ├─ apis → API 요청 함수 모음 (예: axios 요청들)│ ├─ components → 버튼, 모달 등 재사용 가능한 UI 컴포넌트│ ├─ contexts → React Context API 관련 코드 (전역 상태 공유용)│ ├─ hooks ..

FRONTEND/React 2025.07.29

[React] Vite를 이용한 프로젝트 환경 구축 및 실행

1. Node.js 설치하기 React 자체는 브라우저에서 실행되지만 개발의 번들링, 빌드 등을 위해 Node.js를 설치해야 한다. - 번들링: 여러 파일들을 하나의 실행 파일로 압축 (예: Vite, Webpack 등) https://nodejs.org/ko Node.js — Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 위 버전 중 가장 안정적인 LTS 버전인 v22.17.1 (LTS)로 설치를 진행..

FRONTEND/React 2025.07.29

React Native 설치하기 (윈도우, Android Studio 설치 및 환경 설정)

React Native란  페이스북에서 만든 오픈 소스 프렝미워크로, JavaScript와 React를 사용하여 iOS와 Android를 위한 네이티브 애플리케이션을 개발하는 데 사용한다. 윈도우에서 React Native를 설치하는 과정은 맥과 약간 다르다. 1. Node.js 설치먼저 홈페이지에 접속해 Node.js를 설치한다.https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 현재 최신 버전은 22.1.0이다.하지만 LTS 버전으로 다운받는다 (LTS: Long Term Support, 오랫동안 지원하..

FRONTEND/React 2024.05.07