[문서] 처음 만난 리액트: 개발환경 설정하기

FrontOverflow

Q&A

문서

강의

영상

매거진

채용

처음 만난 리액트

0. 준비하기

0.1

HTML 살펴보기

0.2

CSS란 무엇인가?

0.3

자바스크립트 (JavaScript)

0.4

개발환경 설정하기

0.5

마치며

1. 리액트 소개

1.1

리액트는 무엇인가?

1.2

리액트의 장점

1.3

리액트의 단점

1.4

마치며

2. 리액트 시작하기

2.1

(실습) create-react-app을 사용한 리액트 애플리케이션 생성

2.2

(실습) Vite를 사용한 리액트 애플리케이션 생성

2.3

마치며

3. JSX 소개

3.1

JSX란?

3.2

JSX의 역할

3.3

JSX의 장점

3.4

JSX 사용법

3.5

(실습) JSX 코드 작성해보기

3.6

마치며

4. Rendering Elements

4.1

Element에 대해 알아보기

4.2

Element 렌더링하기

4.3

렌더링된 Element 업데이트 하기

4.4

(실습) 시계 만들기

4.5

마치며

5. Components와 Props

5.1

Component에 대해 알아보기

5.2

Props에 대해 알아보기

5.3

컴포넌트 만들기

5.4

컴포넌트 합성

5.5

컴포넌트 추출

5.6

(실습) 댓글 컴포넌트 만들기

5.7

마치며

6. State와 Lifecycle

6.1

State

6.2

Lifecycle에 대해 알아보기

6.3

(실습) State 사용해보기

6.4

(실습) React Developer Tools 설치하기

6.5

(실습) 생명주기 함수 사용해보기

6.6

마치며

7. Hooks

7.1

Hooks란 무엇인가?

7.2

useState()

7.3

useEffect()

7.4

useMemo()

7.5

useCallback()

7.6

useRef()

7.7

Hooks의 규칙

7.8

나만의 Hooks 만들기

7.9

(실습) Hooks를 사용한 컴포넌트 개발

7.10

마치며

8. Handling Events

8.1

이벤트 처리하기

8.2

Arguments 전달하기

8.3

(실습) 클릭 이벤트 처리하기

8.4

마치며

9. Conditional Rendering

9.1

Conditional Rendering이란?

9.2

Element Variables

9.3

Inline Conditions

9.4

컴포넌트 렌더링 막기

9.5

(실습) 로그인 여부를 나타내는 툴바 만들기

9.6

마치며

10. Lists와 Keys

10.1

리스트와 키란 무엇인가?

10.2

여러 개의 컴포넌트 렌더링하기

10.3

기본적인 리스트 컴포넌트

10.4

리스트의 키에 대해 알아보기

10.5

(실습) 출석부 출력하기

10.6

마치며

11. Forms

11.1

폼이란 무엇인가?

11.2

Controlled Components

11.3

textarea 태그

11.4

select 태그

11.5

File input 태그

11.6

여러 개의 입력 다루기

11.7

Input Null Value

11.8

(실습) 사용자 정보 입력 받기

11.9

마치며

12. Lifting State Up

12.1

Shared State

12.2

하위 컴포넌트에서 State 공유하기

12.3

(실습) 섭씨와 화씨 온도 표시하기

12.4

마치며

13. Composition vs Inheritance

13.1

Composition에 대해 알아보기

13.2

Inheritance에 대해 알아보기

13.3

(실습) Card 컴포넌트 만들기

13.4

마치며

14. Context

14.1

Context란 무엇인가?

14.2

언제 Context를 사용해야 할까?

14.3

Context를 사용하기 전에 고려할 점

14.4

Context API

14.5

여러 개의 Context 사용하기

14.6

useContext()

14.7

(실습) Context를 사용하여 테마 변경기능 만들기

14.8

마치며

15. Styling

15.1

CSS

15.2

styled-components

15.3

(실습) styled-components를 사용하여 스타일링 해보기

15.4

마치며

16. 미니 프로젝트

16.1

미니 블로그 기획하기

16.2

(실습) 프로젝트 생성하기

16.3

(실습) 필요한 패키지 설치하기

16.4

(실습) 주요 컴포넌트 구성하기

16.5

(실습) 폴더 구성하기

16.6

(실습) UI 컴포넌트 구현하기

16.7

(실습) List 컴포넌트 구현하기

16.8

(실습) 가짜 데이터 만들기

16.9

(실습) Page 컴포넌트 구현하기

16.10

(실습) 각 페이지별 경로 구성하기

16.11

main.jsx 파일 설명

16.12

(실습) 애플리케이션 실행하기

16.13

(실습) Production 빌드하기

16.14

마치며

처음 만난 리액트 문서

0.4 개발환경 설정하기

본격적으로 리액트를 배우기 전에 먼저 개발환경을 구성해보도록 하겠습니다. 개발환경이 제대로 구축되어 있지 않으면 실습을 따라올 수 없기 때문에, 꼭 아래 프로그램들이 제대로 설치가 되어 있는지 확인하고 다음장으로 넘어가시기 바랍니다.

0.4.1 Mac OS와 Windows 환경 설정

이 문서에서는 모든 실습이 Mac OS 기반으로 진행되지만, Windows에서도 동일하게 모든 과정을 다 따라오실 수 있습니다. Mac OS에서는 터미널(Terminal)이라고 부르는 명령줄 기반 인터페이스를 사용하게 되는데, Windows를 사용하실 경우 PowerShell이라는 프로그램을 사용하면 됩니다. 그리고 이 장의 마지막에 설치하게 될 VS Code에는 터미널이 내장되어 있기 때문에, VS Code를 설치한 이후에는 별도로 외부의 터미널이나 PowerShell을 사용할 일이 거의 없다고 보셔도 됩니다.

0.4.2 Node.js와 npm 설치하기

먼저 Node.js와 npm을 설치하도록 하겠습니다. Node.js는 쉽게 말해서 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경이라고 생각하면 됩니다. 그리고 npm은 node package manager의 약자로, Node.js를 위한 패키지 매니저입니다. 패키지 매니저가 하는 역할은 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과 의존성을 관리하고 편하게 설치 및 삭제를 할 수 있게 도와주는 역할을 합니다. 참고로 npm은 Node.js를 설치하면 자동으로 함께 설치가 됩니다. 그럼 이제 Node.js를 설치해볼까요? 설치를 위해 아래 주소로 접속합니다.

https://nodejs.org/en/

그러면 아래와 같은 화면이 나올 것입니다. 여기에서 왼쪽에 있는 'Get Node.js' 버튼을 눌러서 나오는 페이지에서 설치 파일을 다운로드 받아서 설치하기 바랍니다. 현재 22번대 버전이 안정화된 버전이고, 24번대 버전이 최신 버전입니다. 저희는 이번 실습에서 22번대 버전을 사용하도록 하겠습니다. 꼭 22번대 버전을 사용해야하는 것은 아니지만, 원활한 실습 진행을 위해서 Node.js의 버전은 최소 22.18.0 이상이어야 하고 npm의 버전은 10.9.3 이상이어야 합니다.

Node.js 웹사이트

Node.js가 모두 다 설치되었다면, Mac OS의 터미널 또는 Windows의 PowerShell을 열어서 아래 명령어를 입력하고 엔터키를 누릅니다. 그러면 아래와 같이 설치된 Node.js의 버전이 출력되는 것을 보실 수 있습니다.

$ node --version
v22.18.0

그리고 아까 Node.js를 설치하면 npm이 함께 설치된다고 설명드렸었죠? 위와 동일하게 설치된 npm의 버전을 확인하기 위해서 아래 명령어를 입력하고 엔터키를 눌러보시기 바랍니다. 그러면 설치된 npm의 버전이 출력되는 것을 보실 수 있습니다.

$ npm --version
10.9.3

이렇게 Node.js와 npm이 모두 설치된 것을 확인하셨다면 다음으로 넘어가면 됩니다.

0.4.3 VS Code 설치하기

우리가 코딩을 할 때 단순히 메모장 같은 텍스트 편집 프로그램을 사용할 수도 있지만, 코드 자동 정렬, 함수 참조 찾기 등의 부가적인 기능들을 제공하는 프로그램을 사용하면 더 수월하게 코딩을 할 수 있습니다. 이러한 기능을 제공하는 프로그램을 통합 개발 환경(IDE, Integrated Development Environment)이라고 부릅니다.

이 문서에서는 IDE로 VS Code를 사용하게 됩니다. VS Code는 Microsoft에서 개발했고 무료로 사용이 가능한 IDE입니다. VS Code에는 쉽게 설치해서 사용할 수 있는 수많은 플러그인이 있기 때문에 단순히 자바스크립트나 리액트 개발 뿐만 아니라 다양한 프로그래밍 언어로 코딩을 할 때도 사용 가능합니다. 이제 VS Code를 설치하고 리액트 개발을 위해 환경을 설정하는 방법에 대해서 알아보도록 하겠습니다.

VS Code를 다운로드 받기 위해서 아래 주소로 접속합니다.

https://code.visualstudio.com/

그러면 아래와 같은 화면이 나옵니다. 여기에서 화면에 보이는 다운로드 버튼을 눌러서 설치 파일을 다운 받습니다. Windows에서는 Windows에 맞는 설치 파일이 보일 것이기 때문에, 동일하게 다운로드 버튼을 눌러서 설치 파일을 다운 받으면 됩니다. 다운로드가 완료되면 설치 파일을 실행시켜서 VS Code를 설치해주시기 바랍니다.

VS Code 웹사이트