전체 글(116)
-
[JS/TS] 패키지 매니저와 모듈 번들러
패키지 매니저 (Package Manager) 주요 기능프로젝트의 의존성(dependency) 관리패키지 설치, 업데이트, 삭제버전 관리예시:npmyarnpnpm 주요 역할:package.json 파일을 통한 프로젝트 의존성 관리패키지 저장소에서 필요한 라이브러리 다운로드의존성 충돌 해결 모듈 번들러 (Module Bundler)주요 기능:여러 개의 파일/모듈을 하나의 파일로 병합코드 최적화 및 압축개발 환경 구성예시:WebpackRollupViteParcel주요 역할:모듈 의존성 분석코드 변환 (TypeScript → JavaScript, SCSS → CSS 등)코드 최적화 (압축, 트리 쉐이킹 등)개발 서버 제공 핵심 차이점목적:패키지 매니저: 외부 라이브러리 관리모듈 번들러: 소스 코드 최적화 및 ..
2024.12.31 -
[5주차 개발일지 2] fly.io를 사용한 서버/클라이언트 배포 2 (241002)
1. 금일 배포를 마무리했습니다. 2. 배포 과정에서 나타났던 대표적인 문제들- 1. socket/websocket connection fail # Start the server by default, this can be overwritten at runtimeEXPOSE 3000dockerfile에서 위 부분을 제거하자 ws://~~~~:3000이라 뜨며 해당 포트를 바라보는 문제가 해결되었습니다.#### BE ####[http_service] internal_port = 4000 force_https = true auto_stop_machines = 'stop' auto_start_machines = true min_machines_running = 0 processes = ['app']..
2024.10.02 -
[5주차 개발일지 1] fly.io를 사용한 서버/클라이언트 배포 (241001)
1. aws와 cloudtype, 그리고 heroku가장 먼저 찾아본 배포로는 aws가 있습니다.그러나, 제 계정 프리티어 기간이 지났고 의도치 않게 과금이 되는 경우가 종종 있다는 이야기를 듣고 대안을 찾았습니다.cloudtype은 배포 과정이 aws보다 간단하고, 몇몇 프레임워크나 db에 대해서는 템플릿을 제공합니다.그러나, 프리티어에서 기본 제공하는 1gb용량과 매일 6시에 자동으로 배포가 중지되어 다시 켜주어야 하는 번거로움이 있습니다.heroku의 경우 장점은 비슷하지만, 프리티어 혜택이 축소되었다는 것을 듣게되어 검색을 통해 대안을 찾았습니다.2. fly.io프리티어 혜택이 줄어든 heroku나 사용하기 불편하고 배포에 여러 과정이 필요한 aws 대신 간편하게 배포가 가능한 fly.io를 사용..
2024.10.01 -
[4주차 개발일지 1] Socket.io를 사용한 실시간 채팅 구현 (240924)
socket.iosocket.io는 웹 애플리케이션을 위한 실시간 양방향 통신 라이브러리로, 주요 특징은 다음과 같습니다.실시간 통신: 서버와 클라이언트 간 즉각적인 데이터 교환이 가능합니다.양방향 통신: 서버에서 클라이언트로, 클라이언트에서 서버로 자유롭게 데이터를 전송할 수 있습니다.이벤트 기반: 사용자 정의 이벤트를 만들고 처리할 수 있습니다.자동 재연결: 연결이 끊어졌을 때 자동으로 다시 연결을 시도합니다.다양한 전송 방식 지원: WebSocket을 우선으로 사용하지만, 필요에 따라 다른 방식으로 대체할 수 있습니다.프로젝트에서 예약 관련자간의 빠른 의사소통을 위해 실시간 채팅을 제공하자는 아이디어에서 사용하게 되었습니다. ServerSide1. 연결 설정const io = new Server(h..
2024.09.24 -
[2주차 개발일지 1] React와 express 연결 (240910)
9일 현직자 미팅이 있었고, 총 4번의 코칭이 있을 예정이라고 안내받았습니다. Axios를 사용한 frontend와 backend의 통신 axiosAxios는 http 통신을 쉽게 하기위해 만들어진 라이브러리로, 이를 사용해 React와 Express 서버 간의 통신이 가능합니다.React(클라이언트)가 HTTP 요청을 보내고 Express(서버)가 이 요청을 처리하여 응답을 보내는 식으로 동작합니다.react(frontend) Axios 요청 트리거 : React에서 이벤트가 발생하면 Express 서버로 Axios 요청을 보냅니다.HTTP 요청 만들기 : 요청 메서드(예: GET, POST, PUT, DELETE), 서버 엔드포인트 URL을 지정하고, 선택적으로 데이터나 헤더(인증 토큰 등)를 보냅니..
2024.09.10 -
[개발일지] 개발일지 (20240906)
9월 2일자로 dgtp 파이널 프로젝트가 시작되었다. 카풀 웹 서비스를 생각하고 있다. [repository] prismaORM을 사용하여 db에 쿼리를 보내 데이터를 CRUD가 이루어진다. findAllUsers는 유저 전체를, findUserById는 Id를 기준으로 findUnique, findUserByEmail은 Email을 기준으로 데이터를 찾아 반환한다. [service] controller에서 보낸 req를 repository로 보내고, 반환된 데이터에 비즈니스 로직을 실행한다. 현재 매우 간단한 로직들만 존재하기 때문에, req값에서 올바른 값이 입력되었는지 확인하고 repository에서 반환된 값들을 controller로 반환한다. [controller] controller에서는 ..
2024.09.06