이번 글에서는 리액트 개발환경을 구축하고 VSCode가 잘 실행되는지 확인하는 것까지 진행하려고 합니다.수업을 통해 들은만큼 이 글은 수업을 들으며 진행했던 순서를 기반으로 제작되었음을 알려드립니다.1. Node.js 22.17.1(LTS) 설치하기 먼저 Node js를 검색해서 nodejs.org로 들어가줍니다.사실 직접 검색할 필요 없이 제가 위에 적어드린 주소를 그냥 적어도 들어갈 수 있습니다. Get Node.js를 클릭하고 download 페이지로 넘어가주세요. ① Node.js의 버전으로 저희는 v22.17.1(LTS) 으로 설치할겁니다. ❓ LTS버전이란?LTS(Long Term Support)는 장기 지원되는 버전을 의미합니다.일반 버전과 달리 안정성에 중점을 둔 버전으로, 보안 업데..

이번 글에서는 처음으로 리액트(React)를 듣는 만큼 간단한 내용부터 정리해보고자 합니다.다른 언어들은 스쳐지나가듯 들었든, 들은 기억이 남아있지면 리액트는 첫 경험이니 잘 부탁드립니다.1. tailwind.config.js이 파일은 Tailwind CSS의 환경설정 파일입니다.Tailwind CSS가 어떤 파일을 분석해서 스타일을 적용할지,테마 확장 여부, 플러그인 사용 등 모든 설정을 여기서 설정할 수 있습니다. /** @type {import('tailwindcss').Config} */먼저 시작은 첫 줄에 적힌 주석에 대해서 간단한 설명을 적어두겠습니다.VSCode 등에서 타입 자동완성을 지원하게 해주는 역할입니다.주석으로 처리되어 있기에 실제로 작동되는거 같지는 않아 간단하게 넘어가겠습니다. ..

이번 글에서는 React 프로젝트에서 TailwindCSS와 React Router를 적용하기 위한 환경설정 과정을 단계별로 정리하겠습니다.1. 터미널에서 새 콘솔(cmd) 열기React 프로젝트 폴더에서 터미널 → 새 터미널을 선택해 새로운 명령 프롬프트(cmd)를 실행합니다.2. 개발 서버 실행npm start새로운 터미널(cmd)에서 npm start 명령어를 입력하면 리액트 개발 서버가 실행됩니다.3. TailwindCSS 설치npm install -D tailwindcss@3TailwindCSS를 개발 의존성으로 설치합니다.4. TailwindCSS 초기화npx tailwindcss init위 명령어를 통해 프로젝트 루트에 tailwind.config.js 파일이 생성됩니다.5. tailwind..