1. 노드.JS 설치
Node.js는 JavaScript 코드를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경이다.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252F1b322f11-9907-42ce-9401-12fb0febbbed%252FUntitled.png%3Ftable%3Dblock%26id%3D00c865ee-8986-48bd-a437-0e8b850c2cf4%26cache%3Dv2&w=3840&q=75)
환경 변수 설정되어있는 것 확인.
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252F2fd70e59-6e76-4bcf-af37-ef2803792793%252FUntitled.png%3Ftable%3Dblock%26id%3Dfb2f26b9-564a-412f-84fe-befc5c744c7f%26cache%3Dv2&w=3840&q=75)
2. 리액트 설치
React는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리이. 페이스북에서 개발하고 유지 관리하고 있으며, 단일 페이지 애플리케이션(Single Page Application, SPA) 개발에 많이 사용된다.
npm install -g npm
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252Fdbfe26c4-c350-417f-a434-e45b22ca0a29%252FUntitled.png%3Ftable%3Dblock%26id%3De0650a63-85d9-46eb-8471-f7b5eb6d63ba%26cache%3Dv2&w=3840&q=75)
npx create-react-app my-app
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252Fd3529722-f538-4896-b621-772aba3896cf%252FUntitled.png%3Ftable%3Dblock%26id%3D72ed766c-cc41-41d3-be48-74c1d4080727%26cache%3Dv2&w=3840&q=75)
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252F08e910e1-68c9-457d-b1a0-1ad7b747461a%252FUntitled.png%3Ftable%3Dblock%26id%3D535648a5-0798-4958-8173-e31d4b2f5518%26cache%3Dv2&w=3840&q=75)
my-app 폴더가 생성된다.
cd my-app npm start // Node.js 실행
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252F2db07c71-5d74-47b3-8323-b46cef425efc%252FUntitled.png%3Ftable%3Dblock%26id%3Dfe747cab-802e-42e1-92fe-1eec24aff13c%26cache%3Dv2&w=3840&q=75)
3. 플러그인 설치
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252F1deb96f9-fdc2-401e-b211-aa5484178cef%252FUntitled.png%3Ftable%3Dblock%26id%3D49715955-bdb4-44a7-9441-b86723b95f0a%26cache%3Dv2&w=3840&q=75)
스크립트 코드 분석
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252F11fa0274-e09f-4f5d-9ca0-f8cad21879bd%252FUntitled.png%3Ftable%3Dblock%26id%3Db2f83532-f69f-4da5-b867-5b62227961d0%26cache%3Dv2&w=3840&q=75)
코드를 자동으로 일관된 스타일로 포맷
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F404a9fb6-ab9b-45cc-8074-ee63a3334890%252F481d4383-b684-4c1d-ab85-a30447c75fbf%252FUntitled.png%3Ftable%3Dblock%26id%3D2a97969f-a7fe-47e6-9233-9e84c41f83cb%26cache%3Dv2&w=3840&q=75)
자주 사용하는 코드 조각들을 쉽게 작성할 수 있도록 도와주는 도구
Share article