8주차 (1)
프로젝트 파일 구조 이해하기
프로젝트를 진행하며 파일 구조를 명확히 이해하는 것은 매우 중요하다는 것을 깨달았습니다. 그래서 이번엔 프로젝트의 디렉터리와 파일들이 어떤 역할을 하는지 정리해 보겠습니다.
.
├── assets // 게임 데이터
│ ├── item.json // 게임 아이템 데이터
│ ├── item_unlock.json // 아이템 잠금 해제 조건 데이터
│ └── stage.json // 게임 스테이지 데이터
├── package-lock.json // 설치된 패키지의 버전 고정 정보
├── package.json // 프로젝트 메타데이터 및 의존성 관리
├── public // 프론트엔드 파일 (HTML, CSS, JS 등)
├── readme.md // 프로젝트 설명 및 사용법
└── src // 서버 코드
├── app.js // Express 서버 설정 및 실행 코드
├── constants.js // 상수 정의 (예: 오류 메시지, 상태 코드 등)
├── handlers // 비즈니스 로직 처리
│ ├── game.handler.js // 게임 관련 요청 처리
│ ├── handlerMapping.js // 핸들러 매핑 관리
│ ├── helper.js // 유틸리티 함수 모음
│ ├── register.handler.js // 사용자 등록 관련 핸들러
│ └── stage.handler.js // 스테이지 관련 요청 처리
├── init // 필수 데이터 및 기능 로드
│ ├── assets.js // 게임 자산 로드 및 관리
│ └── socket.js // 소켓 연결 초기화
└── models // 데이터 모델 관리
├── stage.model.js // 스테이지 데이터 모델
└── user.model.js // 사용자 데이터 모델
각 디렉토리 및 파일의 역할
1. assets
게임에서 사용할 데이터 파일들이 위치합니다. 이 디렉터리에는 JSON 형식으로 아이템, 스테이지, 아이템 잠금 해제 조건 데이터를 포함하고 있습니다.
item.json: 게임 아이템에 대한 데이터.
item_unlock.json: 아이템 잠금 해제 조건에 대한 데이터.
stage.json: 게임 스테이지에 대한 데이터.
2. package.json
프로젝트에 필요한 패키지와 그 버전, 스크립트 명령어, 프로젝트 이름 및 설명 등의 메타데이터를 포함합니다. 이 파일은 프로젝트의 의존성을 관리하는 데 중요합니다.
3. public
프론트엔드 관련 파일들이 위치하는 디렉터리입니다. HTML, CSS, JavaScript와 같은 리소스 파일이 포함될 수 있습니다. 이곳의 파일들은 클라이언트 측에서 사용됩니다.
4. readme.md
프로젝트에 대한 설명, 설치 방법, 사용법 등을 문서화한 파일입니다. 다른 개발자들이 프로젝트를 이해하고 사용할 수 있도록 돕는 중요한 자료입니다.
5. src
서버 코드가 위치하는 디렉토리입니다. 이곳에는 서버의 주요 로직과 설정이 포함됩니다.
app.js: Express 서버를 설정하고 실행하는 메인 파일입니다.
constants.js: 프로젝트 전반에서 사용할 상수를 정의합니다. 오류 메시지나 상태 코드 등의 값을 여기서 관리합니다.
6. handlers
비즈니스 로직을 처리하는 핸들러들이 위치합니다. 각 핸들러는 특정 요청을 처리하는 역할을 합니다.
game.handler.js: 게임 관련 요청을 처리합니다.
handlerMapping.js: 핸들러 매핑을 관리합니다.
helper.js: 유틸리티 함수 모음을 제공합니다.
register.handler.js: 사용자 등록 관련 요청을 처리합니다.
stage.handler.js: 스테이지 관련 요청을 처리합니다.
7. init
필수 데이터와 기능을 초기화하는 파일들이 위치합니다.
assets.js: 게임 자산을 로드하고 관리하는 기능을 담당합니다.
socket.js: 소켓 통신을 위한 초기화를 담당합니다.
8. models
데이터 모델을 관리하는 파일들이 위치합니다. 세션 데이터 및 사용자 데이터를 정의합니다.
stage.model.js: 스테이지 데이터 모델을 정의합니다.
user.model.js: 사용자 데이터 모델을 정의합니다.
과제를 하다보니 비동기 작업의 병렬에 대해서 알게 되었는데 추가로 더 잘 알고 싶어서 찾아봤습니다!
Promise.all로 비동기 작업 병렬 처리하기
- JavaScript에서 비동기 작업을 효율적으로 처리하기 위해 Promise.all 함수를 활용할 수 있습니다. Promise.all은 여러 개의 프로미스를 인자로 받아 하나의 프로미스를 반환하는 함수입니다. 이 함수는 전달된 모든 프로미스가 완료될 때까지 기다린 후, 결과를 배열 형태로 반환합니다.
- 이러한 동작 덕분에 Promise.all을 사용하면 비동기 작업을 병렬로 실행할 수 있습니다. 내부적으로 Promise.all은 각 프로미스를 동시에 실행하고, 모든 프로미스가 완료될 때까지 대기합니다. 이때 각 프로미스의 완료 순서는 상관없이, 결과는 프로미스가 전달된 순서를 따릅니다.
- 예를 들어, Promise.all([promise1, promise2, promise3])와 같이 세 개의 프로미스를 전달하면, 각 프로미스는 병렬로 실행됩니다. 이 경우 전체 작업이 완료되는 시간은 가장 오래 걸리는 작업의 시간에 의해 결정됩니다. 따라서 모든 작업이 병렬로 처리되면서 전체 작업 시간을 단축시킬 수 있습니다.
- 이런 특성 덕분에 Promise.all은 비동기 작업을 병렬로 처리하는 데 매우 유용합니다. 여러 개의 비동기 작업을 동시에 실행하고, 모든 작업이 완료될 때까지 대기한 후 결과를 한 번에 받아올 수 있습니다. 이는 성능과 응답성을 향상하는 데 큰 도움이 됩니다.
오늘은 강의를 바탕으로 정리를 해봤습니다!
파일 구조에 대한 이해와 비동기 병렬 처리방식이 프로젝트를 더 효과적으로 관리하고 개발하는 데 도움이 되길 바라면서 앞으로도 이러한 구조를 바탕으로 코드를 보다 더 체계적으로 써보도록 노력하겠습니다!