티스토리 뷰

반응형

이번 시간에 다루어볼 내용은 경로(path)입니다.

모든 소스가 한 디렉터리 안에 있는건 찾기도 싫고 보기는 더 싫겠죠.

그렇기에 이제 디렉터리 분류를 할 시기가 온 거 같습니다.

 

먼저 디렉터리를 생성해보겠습니다.

index.ts 파일이 있는 같은 레벨에 src라는 폴더와 dist라는 폴더를 생성합니다.

 

그 다음 tsconfig.json 파일로 이동하여 수정을 해야 합니다.

컴퓨터는 파일명 앞에 경로가 없으면 나와 같은 레벨로 밖에 인식을 못합니다.

아까 index.js로 되어 있던 "include" 가 바로 그것이죠.

 

그래서 아래와 같이 바꿔줍니다.

"include" : ["src/**/*"]

 

여기서 **은 src/ 뒤에 있으므로 src 디렉터리 내에 모든 디렉터리를 의미합니다.

예를 들어 src 내에 ab라는 폴더와 bo라는 폴더가 있다면, 이 두 디렉터리를 모두 포괄하는 의미를 합니다.

그러면 이렇게 되겠죠.

src/ab/* 
src/bo/*

이를 간편하게 표기한 것입니다.

*은 모든 파일을 의미합니다.

여기에 *.js 파일이 들어가게 되는데 src는 source(소스의 약자)입니다.

통상 이렇게 많이들 얘기 하더라구요.

 

dist는 Node.js Complier가 컴파일한 파일 디렉터리입니다. (약자는 잘 모르겠습니다.)

여기에 넣어두게 된 파일들은 깃허브에 굳이 업로드할 필요가 없죠.

그래서 깃허브에 이 파일들을 올리지 않겠다라는 설정을 걸 것입니다.

"outDir" : "dist"

위 소스를 compilerOptions 내에 추가해줍니다.

이제 완료가 되었으면, 깃허브에 한 번 연결해보도록 하겠습니다.

생각해보니 처음에 깃허브 연결을 안했네요. 지금부터 하면 되겠습니다.

명령은 어렵지 않습니다. (git의 개념은 이 글에 자세히 적혀 있습니다.)

 

순차적으로 명령어를 입력하면 되겠습니다.

git init
git add --all
git commit -m "커밋 메시지를 입력하세요" 
git remote add origin https://github.com/자신깃허브계정/리파지토리명.git 
git push -u origin master

 

 

이렇게 되면 rootPath(index.ts 레벨 디렉터리)에 .gitignore 파일이 생성될 것입니다. (근데 안된다.. 될 줄 알았는데..)

 

생성이 되지 않는다면 아래 소스를 복사해서 파일을 일일히 생성하여 넣습니다.

# Yarn integrity file
.yarn-integrity


# dotenv environment variables file
.env
dist

 

.gitignore 파일 내에 dist 소스가 위 소스처럼 추가가 되었으면 거의 다 되었습니다.

이제 마지막으로 index.ts 파일을 src 디렉터리 내로 옮겨주고 터미널로 정상작동하는지 확인해봅니다.

 

에러가 나는 경우가 있을 것입니다.

package.json이 dist 내의 index.js 파일을 안보기 때문인데요.

이 파일 내에서 node index.js -> node dist/index.js 로 수정을 해준 후

yarn start로 재부팅을 시켜주면 되겠습니다.

반응형
댓글
공지사항