[ TIL ] Day 23 - 실습 개발 환경 셋팅하기 (Git, Express, 전체 구조)

🗓️ 수업 일자 : 2025.10.28

✨ 오늘의 수업 평가 :  [ PROJECT ]  실습 러버 👩‍💻🛠️ 실습 꿀잼 🍯😝

 

작업 하다가 npm 패키지를 잘못 설치해서 commit을 이용해 롤백 하고 싶었는데 맘처럼 안됬다 ..

사실 엄청 꼬여서 되돌릴 방법을 두 시간 동안 서치하다가 결국 clone 새로 받아서 "새로운 작업공간"에서 시작했다.. ㅎㅎㅎㅎㅎ 

다행이도 환경 셋팅 & 모델 선언만 해 둔 상태여서 처음부터 시작해도 문제는 없었는데, 진짜 엄청 진행 된 작업이었으면 울뻔..😭

(지금도 땀을 엄청 흘린다😅 눈물 만큼 흘리는 듯 ㅋㅋ)

[ Git 사용법 & 협업하기 ] 에 대해서 다시 한번 숙지가 필요할 것 같다..😢

 

👩‍💻 [프로젝트] 오늘 작업 내용 💻
- Git setting 하기

- Express 개발 환경 셋팅하기

- 서비스 구조 정리

 

---

0. 전체 작업 순서 

1. 작업 내용 분석 : 데이터 모델 정리, 작업 파일 구조화 등 (완벽하지 않아도 됨, 전체 틀을 잡는 다는 생각으로)
2. 작업 공간 셋팅 : 필요한 npm 다운로드 및 설치 확인(기본 구문으로 테스트), 필요 시 Git 연결 (with new branch)
3. 데이터 모델링 및 시딩 작업  
   
   • 데이터 모델링 : schema.prisma 파일에 작업 후 마이그레이션(초기 init) 작업
   • 시딩 작업 : 비어있는 DB에 테스트용 초기 데이터를 넣는 작업
4. 각 모델 별 CRUD 작업 : (아직 익숙하지 않으므로) app.js 혹은 main.js에 한번에 작업
   이후 모델 별 route 분리 작업 : route 폴더에 모델별로 1차 분기
                                                 → xx_route .js에는 서버 요청만 남기고 xx_controller.js 에 실행 함수 분리.
5. 유효성 검사 적용 : 공용으로 제작 후, 각 모델별로 분리하여 xx_controller.js에 적용
6. 비동기 에러 래퍼 함수 적용 : 서버 다운을 막기 위하여 각 xx_route.js에 적용
7. 미들웨어 적용 작업 : 공용 / 각 모델별 미들웨어를 각각 분리해서 app.js / xx_route.js 에 각각 적용

- 작업을 진행하며 xx.http를 이용해 지속적인 검토 진행

- 데이터 모델링 수정이 필요한 경우, 작업 후 꼭 마이그레이션 진행 

 

 

1. Git setting 하기 

1. upstream 저장소 셋팅(최초에만 셋팅) : git remote add upstream { 저장소 주소 }
   upstream 저장소 확인 : git remote -v
   

   

   git upstream 저장소 확인 결과

2. branch 변경한 뒤 원격 repo에 있는 정보 다운받아 로컬과 merge 
   branch 확인 : git branch
   branch 변경 : git switch 브랜치명(이름)
   정보 다운 & merge : git pull upstream 브랜치명(이름)
   (만약 로컬 정보가 변경되었으나, merge 해도 되는 상황이라면 : git switch -f 브랜치명)
   
   
3. 새로운 브랜치 생성 : git switch -c 브랜치명(이름-sprintN)
   
   
4. 새로운 브랜치에 업로드 진행
   파일 추가 : git add .
   파일 저장 : git commit -m "메세지를 입력 해 주쇼"
   파일 원격 레포로 업로드 : git push -u origin 이름-sprintN
   
   
5. 마지막 push가 끝나면 멘토님께 PR 보내기! (아래 링크 참고😉)

[TIL] Day15 - "실습" 작업물 GIT 공유하기

 

 

 

2. Express 개발 환경 셋팅하기

1. 필요한 npm package 다운로드  

  • package.json 파일에 버전 입력하고 한번에 다운로드 : npm install 또는 npm i

"dependencies": {
    "prisma": "^5.4.2",         // prisma 관련 커맨드 실행 라이브러리
    "@prisma/client": "^5.4.2", // prisma 관련 코드 실행 라이브러리
    "dotenv": "^16.3.1",        // 환경 변수 저장 .env 설정 라이브러리
    "express": "^4.18.2",       // 자바스크립트로 API를 만들기 위한 라이브러리
    "is-email": "^1.0.2",       // 입력 값 중 email의 유효성 검사용 라이브러리
    "is-uuid": "^1.0.2",        // 입력 값 중 Uuid의 유효성 검사용 라이브러리
    "superstruct": "^1.0.3",    // 입력 데이터에 대해 유효성 검사용 라이브러리
    "nodemon": "^3.1.10"        // 자동 서버 재시작(개발 환경을 편리) 하는 라이브러리
    "axios": "^1.12.2"          // 서버 통신을 쉽게 하는 라이브러리
  }
  
  // 전부 다 설치가 아닌, 필요한 라이브러리를 골라서 설치

 

  •  prisma 초기화 명령어 
     - 터미널 다운로드 명령어 : npx prisma init --datasource-provider postgresql

 

2. 작업 파일 셋팅 

  •   app.js 또는 main.js 만들고 express 설치 확인 (아래 소스 코드 참고)

import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('hello world');
});

app.listen(port, (req, res) => {
  console.log('start app!');
});

 

  •   package.json 파일 셋팅 : script 객체에 'dev' : 'nodemon app.js' 추가하기

 

  •   .env 파일 셋팅

       1) DATABASE_URL 에서 "johndoe:randompassword", "mydb" 영역 정보 수정
           johndoe : 윈도우 유저 postgres / 맥 유저 - 현재 user 이름

           randompassword : 설치 할 때 작성한 사용자패스워드 
           mydb : 프로젝트 DB 명칭 (postgresql에 자동을 DB 생성 해 줌)

        2) 포트 번호 생성하기 : PORT = 3000 입력

.env 파일 셋팅 변경 전 / 변경 후 비교하기

 

  •   [prisma] 폴더 > schema.prisma 파일 셋팅(Generators / Datasources 셋팅 확인)
        output = "경로 지정"  주석 혹은 삭제 처리

        : Prisma 6.6.0 버전 부터는 "다중 클라이언트, 모듈화 환경 구성, 버전 충돌 방지, 빌드 캐시 꼬임 방지"등을 위해서
          필수적으로 클라이언의 생성 경로를 지정 해 주어야 함
        ⇒ 실습에 사용된 버전은 5.22.0 버전으로 해당 내용은 필요 없음 

[prisma] 폴더 > schema.prisma 파일 셋팅 정보

 

 

 

+ 추가  Prisma 초기화 후 나오는 안내 문구 해석하기 :) 

    Next steps : 

1. 'dotenv'를 설치하고, '.env' 파일의 환경변수를 불러오기 위해 'prisma.config.ts' 파일에 import "dotenv/config"를 추가합니다
2. "prisma dev"는 로컬 환경의 prisma postgres 서버를 실행하는 명령어 입니다.
3. "schema.prisma"파일에 모델을 정의합니다.
4. "prisma migrate dev" 명령어를 통해 로컬 환경 Prisma의 Postgres DB에 마이그레이션을 적용 할 수 있습니다.
5. 팁 : ORM을 더 발전시켜서 대규모 환경에서도 안정적으로 동작 하도록 "커넥션 풀링(연결관리), 전역 캐시, 서버리스 형태의 Progres DB 활용 방법"에 대해 탐색 해 보세요.

실제 터미널에서 Prisma 초기화 이후 나오는 안내 문구

 

 

+추가 개별 다운로드 명령어

• express.js  :  npm install express.js 
• nodemon  :  npm install nodemon

 

3. 서비스 구조 정리

1) DB 모델 구조 정리 

왼쪽 : 노트에 직접 DB 모델 구조화 하기 / 오른쪽 : 엑셀을 이용하여 시각화

 

  DB 모델 작성하기(복습)

• 실제 구조화를 진행할 때에는 엑셀로 시각화 한 것처럼 "필드 이름 / 필드 타입 / 속성" 을 한 줄로 작업
  • 필드 이름 : 데이터에 대한 이름
  • 필드 타입 : 데이터가 저장 될 타입에 대해 설정, 필드를 옵셔널하게(사용 할 때도 있고, 사용하지 않을 때도 있는 값) 쓸 때는 타입 뒤로 '?(물음표)' 를 표기 (이렇게 하면 해당 값이 "null"이 되어도 문제 되지 않음)
  • 필드 속성 : 필드에 특정 설정이 필요한 경우에만 작성, 예를 들어 @unique / @id / @default 등등 자동으로 들어가는 값설정, 고유 값 지정, 관계 설정 등을 해당 위치에 작성
• enum : 필드값이 특정 배열에 있는 값으로만 설정해야 할 경우, 그 배열을 선언할 때 enum 이름 { ... } 을 사용. 
              상품 종류, 사용자 등급, 지역 분류 등에서 카테고리값 셋팅 할 때 사용하며 값 이름만 대문자로 적음
•  @@unique : 2개 이상의 필드를 합쳐서 유니크한 값을 만들어야 하는 경우 사용됨. 
                        필드 맨 마지막에 @@unique([필드이름1, 필드이름2, ... ]) 로 작성.
• @relation : 각 모델간의 관게에 있는 필드에 대해 해당 속성을 이용하여 설정 
                     @relation(fields: [현재 필드 이름], references: [FK 필드 이름], onDelete: FK가 지워질 때 설정)
• 마이그레이션 진행하기 : npx prisma migrate dev
      → 작업 정보 명칭에 대해 질문 : 최초 진행 시 init / 이후 진행 내역에 맞게 설정
• 프리즈마 스튜디오 : 작업 한 DB를 GUI 화면으로 볼 수 있음, 터미널에 npx prisma studio 명령어를 사용

 

 

+ 추가 마이그레이션 된 DB Model에 필드 추가 / 삭제하기 

[ 필드 추가 ] 마이그레이션이 된 이후 필드를 추가하면 기존 데이터에는 값이 빈 상태로 만들어 지기 때문에 에러 발생 

1. 만들고자 하는 필드를 작성하고, 필드 타입에 "?" 를 작성하여 옵셔널 하게 줌

2. 마이그레이션 진행후, 필드가 추가 된 DB에 들어가 빈 칸의 값을 모두 다 채움 

3. 옵셔널로 설정 되어 있는 필드를 필수형으로 바꾸고 ("?" 지움) 다시 마이그레이션 진행  
 ⇒ 필수 값으로 써야 하는 필드의 경우 1~3번 진행, 필수 값으로 안쓰는 필드는 1번으로 추가 가능 

[ 필드 삭제 ] 삭제에 대해서는 별도의 셋팅 없이 가능. 마이그레이션 진행 시 정말 지우냐고 물어보는 질문에 yes 답변

 

 

2) 전체 파일 구조 정리

왼쪽 : 전체 폴더 및 파일의 연결을 직접 따라가 보기 / 오른쪽 : 실제 개발 작업공간 셋팅 내용

 

(해당 폴더 구조는 강사님이 미션 설명하시면서 힌트로 주셔서, 한번 더 정리 해 보았습니다^^)

 

---

 

📃 내일은 뭘 배울까 🤔

- 데이터 유효성 검사 셋팅 

- [lib] 폴더 내 공용 미들웨어 / 핸들러 작업

- Product model CRUD 작업