초보 개발자의 기록

TailwindCSSTailwindCSS는 유틸리티 클래스 기반 CSS 프레임워크로, 빠른 스타일링과 유지보수에 용이함 1. 프로젝트 생성Vite로 React 프로젝트 생성은 아래 글 참조 Vite로 React 프로젝트 시작하기 (2025 최신 가이드)1. Node.js & npm 설치 확인터미널에서 확인:node -vnpm -v Node.js- 자바스크립트 실행 환경(Runtime)- 원래 JS는 브라우저에서만 실행 가능했는데, Node.js를 이용해 브라우저 밖 (서버, 터미널)에서도 실행 가bambino-developer.tistory.com 2. TailwindCSS 설치프로젝트가 생성이 되었다면, 본인 프로젝트로 이동해 아래의 순서대로 진행을 하면 됨 tailwind v3까지는 아래 와같은 방법..

1. Node.js & npm 설치 확인터미널에서 확인:node -vnpm -v Node.js- 자바스크립트 실행 환경(Runtime)- 원래 JS는 브라우저에서만 실행 가능했는데, Node.js를 이용해 브라우저 밖 (서버, 터미널)에서도 실행 가능해짐- React, Vite 같은 툴은 브라우저에서 바로 실행되지 않고, Node.js 환경에서 빌드/번들링을 거쳐야 함-> Node.js가 없으면 Vite 개발 서버 자체 실행이 불가능함 = 엔진(코드를 돌리는 환경) npm (Node Pacakage Manager)- 라이브러리 설치 & 관리도구 = 부품 창고 + 조립공구- Node.js를 설치하면 같이 설치됨- 패키지 (라이브러리) 관리 도구: React, Tailwind, Axios 등 설치/업데이트/..

CRA (Create React App)한떄 React프로젝트를 시작할 때 가장 많이 쓰였던 도구는 CRA(Create React App)이었다.이는, 리액트 애플리케이션을 쉽게 설정하고 시작할 수 있도록 기본적인 설정을 자동화해주는 CLI 도구이다.하지만, CRA는 2023년쯤부터 사실상 업데이트가 끊겼고, 2025년 2월 공식적으로 유지보수 종료 (Deprecated) 상태이며, 새로운 프로젝트에서는 CRA대신 다른 Framework나 Build Tool을 추천한다.프로젝트를 준비하면 CRA를 배우기 시작한지가 얼마되지 않았는데 Deprecated 를 보고 적잖이 당황스러웠다. 그래도 다행인 것은 CRA를 배우면서 익힌 React 기본 지식과 컴포넌트 구조, 상태 관리 방식은 그대로 Vite나 Nex..

리액트 프로젝트를 생성하고 개발 모드에서 실행하는 방법을 알아보겠습니다. 리액트는 사용자 인터페이스를 구축하기 위한 인기있는 JavaScript 라이브러리로, JSX라는 문법을 사용하여 JavaScript 코드 내에 HTML 태그를 혼합하는 것이 가능합니다. 1단계: 새 프로젝트 생성하기 새로운 리액트 프로젝트를 생성하려면 터미널 또는 명령 프롬프트를 열고 다음 명령어를 실행합니다 npm init react-app . 마침표(.)는 현재 디렉토리에 프로젝트를 생성하겠다는 의미입니다. 2단계: 개발 모드에서 프로젝트 실행하기 프로젝트가 생성되면 터미널에서 해당 프로젝트의 루트 디렉토리로 이동하고 다음 명령어를 실행합니다 npm run start Enter 키를 누르면 개발 서버가 시작됩니다. 서버가 정상적..

Explore how to create a new React project and run it in development mode. React is a popular JavaScript library for building user interfaces, and it allows developers to use JSX, a syntax that combines HTML tags within JavaScript code. Step 1: Creating a New Project To create a new React project Open your terminal or command prompt and use the following command: npm init react-app . The period (..