Service

WOW Onboarding WOW CLASS

Activity

Guide

🍽️

[프론트엔드 찍먹 스터디] WEEK 0. 프론트엔드 식사 준비

이번 주 목표

본격적인 수업을 시작하기 전에 앞으로 사용할 개발 환경을 준비합니다.

모든 내용을 이해하거나 명령어를 외울 필요는 없어요.

React 프로젝트를 내 컴퓨터에서 실행할 수 있다면 0주차 성공입니다!

오늘 준비할 것

도구	하는 일
Chrome	우리가 만든 웹을 확인합니다.
VS Code	코드를 작성합니다.
Node.js	JavaScript와 React 개발에 필요한 환경을 준비합니다.
Git	코드의 변경 사항을 관리합니다.
Terminal	명령어를 이용해 개발 도구를 실행합니다.

벌써 모르는 단어가 많다면?

괜찮습니다!

지금은 각각의 도구를 왜 설치하는지 정도만 알고 넘어가도 충분합니다.

필요한 사용법은 앞으로 실습하면서 하나씩 알아봅니다.

1. Chrome

우리가 만든 웹을 확인할 브라우저입니다.

이미 Chrome을 사용하고 있다면 바로 다음 단계로 넘어가세요.

 다운로드

Google Chrome 공식 홈페이지

Google Chrome - The Fast & Secure Web Browser Built to be Yours

Chrome is the official web browser from Google, built to be fast, secure, and customizable. Download now and make it yours.

 Windows에서 설치하기

 macOS에서 설치하기

 CHECK

Chrome을 실행할 수 있다.

2. VS Code

앞으로 우리가 코드를 작성할 프로그램입니다.

VS Code가 뭔가요?

문서를 작성할 때 워드나 메모장을 사용하듯, 개발자는 VS Code와 같은 코드 에디터를 사용합니다.

앞으로 JavaScript와 React 코드는 대부분 여기에서 작성할 거예요.

 다운로드

Visual Studio Code 공식 홈페이지

code.visualstudio.com

  Windows에서 설치하기

  macOS에서 설치하기

 CHECK

VS Code가 정상적으로 실행된다.

3. Terminal

이제 조금 개발자 같은(?) 화면을 만나봅시다.

 Terminal이 뭔가요?

평소에는 마우스로 프로그램을 실행하고 폴더를 열지만, Terminal에서는 글자로 명령을 입력해서 컴퓨터에게 일을 시킬 수 있습니다.

앞으로 Terminal을 이용해 React 프로젝트를 만들고 실행할 예정입니다.

Terminal 열어보기

이것이 Mac에서 보는 Terminal 입니다.

VS Code 상단 메뉴에서 Terminal → New Terminal을 선택합니다.

그러면 VS Code 아래쪽에 Terminal이 나타납니다.

 Windows에서는 무엇이 보이나요?

 macOS에서는 무엇이 보이나요?

 앞으로 나오는 명령어를 외울 필요는 없습니다.

실습에서 필요한 명령어는 그때그때 교안에 제공할 예정입니다.

 CHECK

VS Code에서 Terminal을 열 수 있다.

4. Node.js

React 프로젝트를 실행하기 위한 환경을 준비합니다.

 Node.js가 뭔가요?

지금은 JavaScript와 React 개발에 필요한 여러 도구를 실행할 수 있게 해주는 환경 정도로 이해하면 충분합니다.

Node.js 자체를 공부하는 시간은 아니니 넘어가도 괜찮아요!

 다운로드

Node.js 공식 홈페이지

Node.js — Download Node.js®

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

어떻게 설치하나요?

이번 스터디에서는 LTS(Long Term Support) 버전을 사용합니다. 아래에서 자신의 운영체제에 맞는 방법을 따라 설치해 주세요.

 Windows 사용자

 macOS 사용자

설치 확인하기

VS Code에서 Terminal을 열고 입력합니다.

Bash
복사

숫자로 된 버전이 나온다면 성공입니다.

이번에는

Bash
복사

도 입력합니다.

 npm은 뭔가요?

개발에 필요한 여러 도구를 설치하고 관리할 때 사용합니다.

조금 뒤에 React 프로젝트를 만들면서 바로 사용해볼 거예요.

 CHECK

 node -v → 버전이 나온다.

 npm -v → 버전이 나온다.

  node 또는 npm을 찾을 수 없다고 나온다면

5. Git

Git은 작성한 코드의 변경 사항을 기록하고 관리하는 도구입니다.

 Git도 지금 공부해야 하나요?

아닙니다!

0주차에서는 앞으로 사용할 수 있도록 설치만 해둡니다.

Git 사용 방법은 필요할 때 다시 알아볼 예정입니다.

  Windows에서 설치하기

 macOS에서 확인하기

설치 확인

git --version
Bash
복사

 CHECK

Git 버전이 정상적으로 표시된다.

6. 실습 폴더 준비하기

도구 준비가 끝났습니다!

이제 앞으로 실습한 프로젝트를 모아둘 공간을 만들어봅시다.

앞으로의 폴더 구조는 다음과 같습니다.

gdg-frontend-tasting-study
├── week0
├── week1
├── week2
└── ...
Bash
복사

먼저 gdg-frontend-tasting-study 폴더를 만들 위치를 정합니다.

예를 들어 바탕화면에 만들고 싶다면 Terminal에서 바탕화면으로 이동합니다.

Bash
복사

cd Desktop에서 오류가 발생한다면 컴퓨터 환경에 따라 바탕화면 위치가 다를 수 있습니다. 오류 화면을 캡처해서 질문해 주세요.

cd가 뭔가요?

Terminal에서 현재 작업할 위치를 이동할 때 사용하는 명령어입니다.

지금은 외우지 않아도 괜찮습니다!

이제 앞으로 실습 프로젝트를 모아둘 폴더를 만듭니다.

mkdir gdg-frontend-tasting-study
Bash
복사

 mkdir은 뭔가요?

새로운 폴더를 만드는 명령어입니다.

방금 gdg-frontend-tasting-study라는 폴더를 만들었습니다.

그리고 방금 만든 폴더 안으로 이동합니다.

cd gdg-frontend-tasting-study
Bash
복사

 week0 폴더는 아직 만들지 마세요!

다음 단계에서 React 프로젝트를 만들면 week0 폴더도 함께 만들어집니다.

 CHECK

프로젝트를 만들 위치로 이동했다.

gdg-frontend-tasting-study 폴더를 만들었다.

gdg-frontend-tasting-study 폴더 안으로 이동했다.

7. 첫 React 프로젝트 만들기

FINAL MISSION

지금까지 설치한 도구를 이용해서 React 프로젝트를 직접 만들어봅시다.

아직 React를 배우지 않았기 때문에 코드의 의미를 몰라도 전혀 문제없습니다.

 오늘의 최종 목표

내 컴퓨터의 Chrome에 React 화면 띄우기

STEP 1. React 프로젝트 생성하기

현재 gdg-frontend-tasting-study 폴더 안에 있는 상태에서 Terminal에 다음 명령어를 입력합니다.

npm create vite@latest
Bash
복사

처음 실행하면 추가 설치 여부를 물어볼 수 있습니다.

위처럼

Need to install the following packages: 
create-vite@...
Ok to proceed? (y)
Bash
복사

y를 입력하고 Enter를 누릅니다.

STEP 2. 프로젝트 이름 정하기

Project name에는

Plain Text
복사

를 입력합니다.

이 이름으로 새로운 폴더와 프로젝트가 함께 만들어집니다.

gdg-frontend-tasting-study
└── week0
Plain Text
복사

STEP 3. Framework 선택하기

방향키 ↑ ↓를 이용해서

Bash
복사

를 선택하고 Enter를 누릅니다.

STEP 4. Variant 선택하기

이번 스터디에서는

Bash
복사

를 선택합니다.

STEP 5. Linter 선택하기

이번 스터디에서는

Bash
복사

를 선택합니다.

 Linter가 뭔가요?

코드에서 실수나 문제가 될 수 있는 부분을 찾아주는 도구입니다.

지금은 자세히 알 필요 없어요!

STEP 6. 패키지 설치 및 실행 여부 선택하기

마지막으로 다음과 같은 질문이 나타납니다.

Install with npm and start now?
Bash
복사

이번에는 방향키 ← →를 이용해서

Bash
복사

를 선택하고 Enter를 누릅니다.

 왜 No를 선택하나요?

Yes를 선택하면 Vite가 필요한 패키지를 설치하고 프로젝트 실행까지 한 번에 진행합니다.

이번에는 이 과정을 직접 하나씩 해보기 위해 No를 선택합니다.

다음 단계에서 직접 프로젝트 폴더로 이동하고, 필요한 패키지를 설치한 뒤 React 프로젝트를 실행해볼 거예요.

 여기까지 왔다면 React 프로젝트 생성 성공!

Terminal에 다음에 실행할 명령어가 표시되었다면 프로젝트가 정상적으로 생성된 것입니다.

아직 프로젝트를 실행하지는 않았습니다.

이제 Terminal에 표시된 명령어를 하나씩 직접 실행해봅시다.

 CHECK

npm create vite@latest를 실행했다.

프로젝트 이름을 week0로 설정했다.

React를 선택했다.

JavaScript를 선택했다.

ESLint를 선택했다.

Install with npm and start now?에서 No를 선택했다.

8. React 프로젝트 실행하기

React 프로젝트를 만들었습니다!

하지만 아직 프로젝트를 실행한 것은 아닙니다.

Terminal에 표시된 명령어를 위에서부터 하나씩 직접 실행해봅시다.

① 프로젝트 폴더로 이동

먼저 방금 만든 week0 프로젝트 폴더로 이동합니다.

Plain Text
복사

오류 없이 이동했다면 Vite가 만든 week0 프로젝트 폴더로 정상적으로 이동한 것입니다.

현재 Terminal은 이제 다음 위치에 있습니다.

gdg-frontend-tasting-study
└── week0  ← 지금 여기!
Plain Text
복사

② 필요한 패키지 설치하기

Terminal에 입력합니다.

npm install
Plain Text
복사

Terminal에 글자가 많이 나타나도 정상입니다.

설치가 끝날 때까지 잠시 기다려 주세요.

패키지가 뭔가요?

프로젝트를 만들 때 필요한 여러 기능과 도구를 가져다 사용할 수 있는데, 이런 것들을 패키지라고 부릅니다.

npm install은 이 프로젝트에 필요한 패키지들을 설치하는 명령어입니다.

지금은 자세히 알 필요 없어요!

③ 프로젝트 실행하기

설치가 끝났다면 드디어 React 프로젝트를 실행해봅시다.

npm run dev
Bash
복사

Terminal에 다음과 비슷한 내용이 나타납니다.

Local 옆에 표시된 주소를

cmd+클릭 or

ctrl+클릭합니다.

Chrome에서 웹페이지가 열립니다.

화면이 보인다면 성공!

 축하합니다!

방금 자신의 컴퓨터에서 React 프로젝트를 직접 만들고 실행했습니다.

아직 화면이 어떻게 만들어졌는지 몰라도 괜찮습니다.

앞으로 우리가 직접 하나씩 바꿔볼 거예요.

프로젝트 종료하기

프로젝트를 실행한 Terminal에서

Plain Text
복사

를 누르면 실행을 종료할 수 있습니다.

 Chrome 창을 닫는 것 ≠ 프로젝트 종료

개발 서버를 종료하려면 Terminal에서 Ctrl + C를 눌러주세요.

 CHECK

week0 폴더로 이동했다.

npm install을 완료했다.

npm run dev를 실행했다.

Chrome에서 React 화면을 확인했다.

Ctrl + C로 프로젝트를 종료할 수 있다.

다음 주 미리보기

지금까지는 웹을 만들기 위한 주방(?)을 준비했습니다.

다음 주부터는 진짜 만들어봅니다.