[MACOS] React 개발환경 구성 2/2

설정순서

형상관리툴 설정
개발툴 설정
템플릿 설정

저번글은 프로그램 설치에 관하여 다루었고 이번글에서는 설치한 프로그램으로 작업환경 구성하는 방법을 설명하도록 하겠습니다. 👌

1. 형상관리툴 설정

Bitbucket 설정

프로젝트 이슈/히스토리 관리를 하고 싶은 경우 여러 협업도구가 있겠지만 여기서는 Atlassian의 협업 도구를 이용하도록 하겠습니다. Atlassian의 Jira, Confluence, Bitbucket 에 대하여 설정을하고 Sourcetree를 사용합니다. 혼자 작업을 하는 경우 Jira와 Confluence는 사용하지 않고 소스 관리를 할 수 있는 Bitbucket만 이용하도록 합니다.

차후 작업을 진행하며 Jira와 Confluence에 대하여 설명드리겠습니다. 우선 개인 이메일로 Atlassian에 가입을 합니다. 저는 구글 메일로 가입을 하였습니다. 가입을 하면 Jira, Confluence, Bitbucket 통합하여 사용을 할 수 있습니다.

Bitbucket으로 들어가서 Create Repository를 누르고 private로 빈 레파지토리를 만듭니다.

레파지토리에 파일을 하나 추가합니다. [ .gitignore ] 안에 내용은 아래의 코드를 복붙합니다.

-----------------------------------------------------------# These are some examples of commonly ignored file patterns.
# You should customize this list as applicable to your project.
# Learn more about .gitignore:
#     https://www.atlassian.com/git/tutorials/saving-changes/gitignore

# Node artifact files
node_modules/
dist/

# Log files
*.log

# Generated by MacOS
.DS_Store

# Generated by Windows
Thumbs.db

# Large media files
*.mp4
*.tiff
*.avi
*.flv
*.mov
*.wmv

-----------------------------------------------------------

.gitignore를 만드는 이유는 소스코드만 추적하기 위해서 입니다. 코드안에 url을 들어가서 확인해보고 차후 어떤것들을 추가할지 고민해봅니다. 불필요한 파일들은 올라가지 않도록 꼼꼼히 체크합니다.

Sourcetree 설정

Bitbucket은 서버에서 코드를 관리하고 Sourcetree는 클라이언트(내컴퓨터)에서 서버에 있는 히스토리를 확인할 수 있는 툴입니다.

Bitbucket 레파지토리에서 Clone 버튼 클릭

Clone in Sourcetree 버튼을 누른 후 인증과정에서 암호를 입력하여 설정합니다.

Clone한 디렉토리에 템플릿 압축을 푼 파일들을 복사 후 소스트리 화면입니다.

File Status를 누른 후 Unstage files의 체크를 누릅니다.

클라이언트(내컴퓨터)에서 템플릿 원형을 첫 푸쉬합니다.

** 윈도우 문의가 있어서 추가 글 적습니다.

** 윈도우에서 인증이 안될 경우 확인해봐야 할 부분

도구 -> 옵션 -> Git -> Embedded Git을 System Git으로 설정
도구 -> 옵션 -> Accounts -> Add -> Bitbucket, oAuth로 암호 인증

여기까지 Bitbucket과 Sourcetree 작업 준비를 마쳤습니다. 중간중간 디테일 부분에서 문제발생 여지가 있으나 오이오이~ 믿고 맡기겠다고 👌👌

2. 개발툴 설정

Visual Studio Code에도 깃을 사용할 수 있으나 굳이 Sourcetree를 사용하는 이유는 기능과 가시성이 Sourcetree가 월등히 높기 때문입니다. Sourcetree 관련 설명도 천천히 진행하겠습니다.

Visual Studio Code 설정

Visual Studio Code를 실행한 후 Open Source를 눌러 작업디렉터리를 엽니다.

** DB서버 설정은 추후 설명하도록 하겠습니다.

3. 템플릿 설정

터미널을 열고 Control+Space->Terminal 노드 모듈을 설치합니다.

-----------------------------------------------------------

$npm install     <- 패키지가 의존하는 모든 패키지를 설치합니다.

$npm start         <- 개발 서버의 시작

$npm run build        <- 제품 빌드(빌드 디렉터리 포함) 제품 설명 package.json 수정 필요

$npm install:clean    <- 노드 모듈 제거, package_lock.json파일 제거

-----------------------------------------------------------

내컴퓨터에 설치된 디렉토리로 이동하여 노드 패키지를 설치($npm install)합니다. 설치 시 버전이 맞지 않아 설치가 한번에 되지 않는 경우가 나옵니다. --force 또는 --legacy-peer-deps 옵션을 이용하여 에러가 나오지 않을때까지 Fix하여 설치를 완료합니다. 옵션을 사용하여 정상 작동이 안될 경우 node_modules 디렉토리와 package-lock.json 파일을 지우고 다시 설치합니다.

Visual Studio Code를 실행하여 작업 디렉터리를 열면 다음처럼 나옵니다.

Control+` 를 눌러 터미널창을 열고 npm start를 실행합니다.

아래와 같이 브라우저에서 localhost:3000 이 정상적으로 보이면 설정이 완료된것 입니다.

여기까지 개발 환경 구성이 끝났습니다. 간략하게 설명드린것이라 처음 접하시는 분들은 많은 난코스가 있을것으로 생각듭니다. 헷갈리는 부분은 문의하기에 남겨주세요.

블로그 사이트 페이지의 개발 환경 구성까지 내용이고 개발 작업 순서 글로 이어집니다.

이전 목록 다음

history

20231007 : 목록 네비게이션 추가