0. 들어가기 전에

• 터미널 명령어 (커멘드) 나 셸 (shell)이 어떤 개념인지 생소하시면 이 블로그 를 읽어봐 주세요!

• 추가적으로 VScode 안에 Terminal 사용 가이드가 필요시면 VScode 터미널 가이드 을 봐주세요.

• Mac 커멘드 요약 은 이걸 봐주세요. Linux나 Window 시면 "Window terminal command cheatsheet" 이라고 구글링하시면 됩니다!

1. Node.js 설치

Typescript 와 React 스타터 프로젝트를 설치 하려면 제일 먼저 Nodejs 를 먼저 설치 해야합니다.
링크로 들어가서 가장 최근의 LTS (long-term support) 버전을 설치해주세요.
Node.js 설치

잘 설치되었는지 확인하고 싶다면 terminal창을 열고 아래 command를 입력해보세요
% node -v
v16.13.1

Node.js 를 제일 먼저 설치하는 이유:
1. Node.js 는 자바스크립트 런타임으로 웹 브라우저 환경이 아닌 곳에서 자바스크립트를 사용하여 연산할 수 있게 합니다.
2. Node.js 패키지 매니저 도구인 npm으로 수많은 개발자가 만든 패키지 (재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있습니다. 곧 리액트 첫 프로젝트를 만들 때도 npm 을 사용합니다!

1.5. (optional) nvm 설치

Node.js 버전을 업데이트하거나 프로젝트별로 버전이 다른 Node.js를 사용할 때 편한 도구입니다.

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
를 터미널에 입력하세요.

잘 설치되었는지 확인하고 싶다면 새로운 터미널 창을 열고 아래 command를 입력해보세요
% nvm --version
0.38.0

3. Typescript 설치

% npm install -D typescript

4. 리액트 스타터 프로젝트 생성

A. 프로젝트 생성

Option 1. Typescript 없이 Javascript 만 있는 버전
% npx create-react-app my-react-app

Option 2. Typescript도 있는 버전
% npx create-react-app my-react-app --template typescript

typescript 로 app 만들면 tsconfig.json도 생성

"my-react-app"은 제가 설정한 이름이고 원하시는 프로젝트 이름을 써주시면 됩니다.

추가 오류 해결
리액트 프로젝트 생성시 오류

이런 오류가 떴다.
구글링 해보니 npm cache를 지워야 한다고 한다.

그래서 npm cache clean 을 했더니 아래와 같이 하지 말라고 만류하더라 ㅠㅠ 하지만 난 프로젝트를 만들고 싶어. 메인 cache를 지우지 말고 새로 빈 cache file을 만들던가 npm cache verify를 써서 캐시들이 일관성 있는지(?) 확인하란다.

npm error As of npm@5, the npm cache self-heals from corruption issues
npm error   by treating integrity mismatches as cache misses.  As a result,
npm error   data extracted from the cache is guaranteed to be valid.  If you
npm error   want to make sure everything is consistent, use `npm cache verify`
npm error   instead.  Deleting the cache can only make npm go slower, and is
npm error   not likely to correct any problems you may be encountering!
npm error
npm error   On the other hand, if you're debugging an issue with the installer,
npm error   or race conditions that depend on the timing of writing to an empty
npm error   cache, you can use `npm install --cache /tmp/empty-cache` to use a
npm error   temporary cache instead of nuking the actual one.
npm error
npm error   If you're sure you want to delete the entire cache, rerun this command
npm error   with --force.

그래서 npm cache verify 썼더니 프로젝트 권한자를 바꾸랜다.

npm error Your cache folder contains root-owned files, due to a bug in
npm error previous versions of npm which has since been addressed.
npm error
npm error To permanently fix this problem, please run:
npm error   sudo chown -R 501:20 "/Users/USERNAME/.npm"

귀찮아서 그냥 sudo cache clean --force 로 해결.
어떤 후폭풍이 있을진 모르겠으나 일단 새로운 프로젝트 만드는건 된다.

B. 프로젝트 실행

% cd my-react-app 커멘드로 방금 만든 프로젝트 디렉토리(위치)로 이동해주세요. (cd 커멘드는 파일 위치로 이동하는 커멘드 입니다.)

% npm run start 커멘드로 프로젝트를 실행해보면 크롬 브라우저가 열리면서 아래 스크린이 보입니다!

C. 프로젝트 커멘드 확인

아마 option 1 로 설치 하셨다면 아래 설명을 터미널에서 보셨을 겁니다. 이처럼 방금 만든 프로젝트를 실행, 빌드, 테스트를 하기 위해 터미널에 입력해야 하는 커맨드가 각기 다릅니다.

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

예를 들면 우리가 B. 에서 한 것과 비슷하게 npm run build를 프로젝트 디렉토리 안에서 터미널 커멘드로 입력해 프로젝트를 실행할 수 있습니다.
프로젝트 폴더 안에 있는 package.json 에서 command 를 읽어보세요!

추가 설명 (1)

% npm help 을 터미널 커멘드로 입력하면 아래와 같이 npm 커멘드 리스트가 나옵니다!

% npm help   
npm <command>

Usage:

npm install        install all the dependencies in your project
npm install <foo>  add the <foo> dependency to your project
npm test           run this project's tests
npm run <foo>      run the script named <foo>
npm <command> -h   quick help on <command>
npm -l             display usage info for all commands
npm help <term>    search for help on <term>
npm help npm       more involved overview

All commands:

    access, adduser, audit, bugs, cache, ci, completion,
    config, dedupe, deprecate, diff, dist-tag, docs, doctor,
    edit, exec, explain, explore, find-dupes, fund, get, help,
    help-search, hook, init, install, install-ci-test,
    install-test, link, ll, login, logout, ls, org, outdated,
    owner, pack, ping, pkg, prefix, profile, prune, publish,
    query, rebuild, repo, restart, root, run-script, sbom,
    search, set, shrinkwrap, star, stars, start, stop, team,
    test, token, uninstall, unpublish, unstar, update, version,
    view, whoami

추가 설명 (2)

난 리액트 프로젝트를 만들고 싶지 않고 그냥 Typescript를 쓰고 싶다 (i.e. node.js로 웹 브라우저 환경이 아닌 곳에서 자바스크립트를 사용해 연산하고 싶다- 하시면
% npm init 을 터미널에 커멘드로 입력하세요.

그럼 아래와 같이 패키지 이름, 버전, 설명 (description) 등을 입력하라고 차례대로 뜹니다. 나중에 package.json file에 가서 수정이 가능하니 우선 엔터 엔터 엔터를 연속해서 눌러서 스킵하시면 됩니다.

% npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (js) 
version: (1.0.0) 
description: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/naralee/Desktop/Academics/HancomAI/KyungsikPark/js/package.json:

{
  "scripts": {
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "typescript": "^5.7.3"
  },
  "name": "js",
  "version": "1.0.0",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "description": ""
}

그런 다음 package.json file 이 있는 directory 에 script.ts 던 script.js 던 script file을 생성하고
% npm run build script.ts
를 터미널 커멘드로 실행하시면 됩니다!

% npm run build -- --init
npm run dev

---

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업