티스토리

준의 개발일지

검색하기

블로그 홈

준의 개발일지

redjun89.tistory.com/m

나의 커리어 전환 일지

구독자: 0

방명록 방문하기

주요 글 목록

항해99를 마치며 회사를 다니며 의사 결정에 있어 데이터의 역할이 얼마나 중요한지 깨닫게 되었고 그 부분에 있어 내 능력의 부족함이 점점 명확해졌다. 평생 직장과 직업이 없는 시대에 나의 커리어를 지속해 나가기 위해 방향 전환을 결정했다. 짧고 굵은 고민 끝에 우선 개발을 배워보기로 했고 코딩을 배울 방법을 찾아보았다. 몇년 전부터 개발자라는 직업이 떠오르고 정부 정책으로 지원도 많이 해주는 것 같았다. 내 선택 기준의 우선 순위는 교육 기간이었다. 교육 비용과 생활비를 고려했을 때 6개월 이상의 교육 기간은 내게 부담으로 다가왔다. 그러던 중 스파르타의 항해99라는 부트 캠프를 알게되었다. 우선 한 기수당 정규 교육 기간이 3개월이라는 점이 최우선 조건을 만족했다. 거기다 엄격한 교육생 선발 과정과 타이트한 커리큘럼 또.. 공감수 1 댓글수 0 2023. 7. 4.
프로젝트 간단 소개 영상 제작 항해99의 최종 프로젝트 발표일이 3일 앞으로 다가왔다. 총 6주 동안의 최종 프로젝트 기간에서 마지막 1주일은 프로젝트의 기획, 실행, 트러블 슈팅등의 전반적인 내용을 문서화하는 기간이다. 팀 노션에 기술 스택이나 트러블 슈팅등의 내용은 정리가 거의 끝나서 프로젝트 간단 소개 영상을 제작해봤다. 간단 소개 영상 예시를 봤는데 크게 두 가지 컨셉으로 나뉘는 것 같았다. 첫 번째는 영상 편집 기술 측면에서 퀄리티는 다소 떨어지지만 유머러스한 컨셉, 두 번째는 프로젝트 시연 영상의 일부를 잘라낸 정석적인 컨셉이다. 운영 매니저님에게 받은 팁은 대부분의 팀들이 두 번째 컨셉으로 가는데 프로젝트 발표 영상이나 시연 영상이 비슷한 분위기라서 약간의 유머를 곁들여 재밌게 만들어 보는 것도 좋다는 것이었다. 그래서 .. 공감수 0 댓글수 0 2023. 6. 28.
스트레스 테스트2 (feat. 배포 서버 다운) 오늘은 최종 프로젝트 브로슈어 제출일이었다. 브로슈어에 스트레스 테스트 지표를 추가하기 위해 무비위키의 배포된 서버에 테스트를 진행하던 중 과부하로 인해 서버가 다운이되었다. 비용을 투자하여 서버 성능을 업그레이드 시키느냐 로컬에 테스트를 진행하느냐 고민하다가 브로슈어 제출 시간이 얼마남지 않아 로컬에 빠르게 테스트를 진행하기로 했다. 배포된 서버는 aws의 프리티어를 이용한 것이라 성능이 로컬 서버와 큰 차이가 나지 않는다. 테스트 진행 artillery는 시나리오 테스트 진행을하면 결과를 json 파일로 저장을 하고 저장된 데이터를 바탕으로 테스트 결과를 visualizing 해준다. 그래서 단일 API 테스트였지만 시나리오 파일을 작성하여 진행했다. 먼저 root 디렉토리에 테스트를 진행할 시나리오.. 공감수 0 댓글수 0 2023. 6. 27.
스트레스 테스트 (feat. artillery) 무비위키 프로젝트에 멀티 프로세싱을 적용하고 성능을 테스트해보기 위해 artillery로 스트레스 테스트를 진행했다. Artillery란? 오픈 소스 로드 테스트 도구로, 소프트웨어 애플리케이션의 성능과 신뢰성을 평가하기 위해 사용한다. 주로 웹 애플리케이션, 마이크로서비스, API 등 다양한 유형의 애플리케이션을 대상으로 테스트 가능하다. Node.js로 작성되었으며, 사용자가 시나리오를 정의하고 해당 시나리오에 따라 애플리케이션에 부하를 가하는 방식으로 동작한다. 시나리오는 사용자의 요청과 동작을 정의하며, 테스트를 위해 다양한 유형의 요청을 생성하고, 트래픽을 모니터링하고, 성능 지표를 측정할 수 있다. 강력한 스트레스 테스트 기능을 제공한다. 여러 사용자 요청의 동시성, 요청 속도, 지연 시간, .. 공감수 0 댓글수 0 2023. 6. 24.
Redis Sorted Set (Zset) 무비 위키 메인 화면에 인기리스트를 띄워주기 위해 Redis의 Sorted Set을 사용해보았다. 기존에는 특정 영화를 검색해서 조회하면 db에 해당 영화의 movieId를 참조하여 view 컬럼의 숫자를 1 증가시켜주고 그 숫자를 기준으로 내림차순 정렬해 상위 5개의 영화를 메인 화면에서 보여주고 있었다. 거기에 실시간 현황을 반영해 주기 위해 방법을 약간 바꾼 것이다. Sorted Set (Zset)이란? 정렬된 집합으로 값을 정렬된 순서로 저장하면서 각 값에 고유한 식별자인 score를 부여하는 데이터 구조이다. sorted set은 key-value 구조로 되어 있는데 key는 문자열이며 value는 정렬된 순서로 저장되는 요소들의 집합니다. 각 요소는 고유한 member로 식별되며 member와.. 공감수 0 댓글수 0 2023. 6. 21.
Nest.js 클러스터링 무비위키 프로젝트의 성능 개선을 위해 cluster 모듈을 이용해 멀티 프로세싱을 적용했다. 멀티 스레드와 멀티 프로세스가 같은 개념인줄 알았는데 다른 개념이었다. 멀티 스레딩 단일 프로세스 내에서 여러 개의 스레드를 생성하여 동시에 작업을 수행하는 것을 의미한다. 각 스레드는 같은 주소 공간을 공유하므로 데이터 공유가 간단하고 효율적이다. 하지만 스레드 간의 동기화와 경쟁 조건 같은 복잡한 문제를 처리해야 하므로 디버깅이 어려울 수 있다. 멀티 프로세싱 또는 클러스터링 여러 개의 독립된 프로세스를 생성하여 각각을 별도의 CPU 코어에서 실행하는 것을 의미한다. 각 프로세스는 자체적인 주소 공간을 가지고 있으며, 데이터 공유와 통신을 위해 별도의 매커니즘이 필요하다. 각 프로세스가 독립적으로 실행되므로 .. 공감수 1 댓글수 0 2023. 6. 21.
비교 단위별 Diff 및 Patch 코드 동작 속도 측정 문장 단위 diff 및 patch 알고리즘 구현이 완료되었다. 현재까지는 특이사항 없이 안정적으로 작동하는 것으로 확인된다. 그런데 문득 글자와 문장 단위 diff 및 patch 코드 동작 속도가 궁금해졌다. 그래서 각각 속도 측정을 하여 비교해보았다. 프로젝트 폴더에서 테스트를 진행할 수 없어 새 폴더를 만들었다. 그런데 서버까지 만들기는 번거로워서 터미널을 통해 코드 동작 속도를 확인하는 방법을 찾아봤다. 타입스크립트 코드 실행 시간 측정 방법 실행 시간을 측정하고자 하는 코드 시작과 끝 지점에 아래 코드를 넣으면 된다. (간단해서 좋았다!) const start = performance.now(); // 성능을 측정하려는 코드 블록 또는 함수 실행 const end = performance.now(.. 공감수 0 댓글수 0 2023. 6. 16.
patch 알고리즘 수정 (feat. </p> 태그 지옥) 현재 진행중인 프로젝트인 무비위키의 버전 관리 기능은 크게 두 부분으로 나뉜다. 두 문서의 변경 사항을 추적하여 데이터화 하는 diff 알고리즘과 원본 문서와 변경 사항 데이터를 더해서 최신 버전 문서를 만들어내는 patch 알고리즘이다. 그런데 기능 테스트 중 오류를 발견했다. 한산 : 리덕스 (moviId : 3721)의 버전 기록 버전 6의 content에 버전 7의 diff를 더하면 버전 7의 content가 나와야하는데 변경 사항 데이터인 diff가 제대로 반영이 되지 않는다..... { "postId": 148, "userId": 13, "content": "이순신 3부작의 2탄!노량의 기록을 깰 수 있을 것인가최종 스코어 720만박해일 버전 이순신은 뭔가 냉철한 느낌이네요가슴이 웅장해지네요... 공감수 0 댓글수 0 2023. 6. 16.
DP, LCS, MED, SES 개념정리 문서의 문장 단위 변경 추적 기능을 공부하고 구현하며 헷갈렸던 개념들을 간단하게 정리해보려고 한다. Dynamic Programming : 동적 프로그래밍 문제를 여러 하위 문제로 분할하여 해결하는 알고리즘 설계 기법이다. 하위 문제의 해결 방식을 저장하고 재사용하여 중복 계산을 피하는 방식으로 동작한다. 이를 통해 계산 속도를 개선할 수 있다. 동적 프로그래밍은 피보나치 수열, 최장 공통 부분 수열, 최단 경로 문제 등 다양한 문제에 적용할 수 있다. 이러한 문제들은 최적 부분 구조와 중복 부분 문제의 성질을 가지고 있어 동적 프로그래밍을 사용하여 효율적으로 해결될 수 있다. 동적 프로그래밍의 세 가지 주요 요소 Optimal Substructure : 최적 부분 구조 주어진 문제의 최적해가 하위 문제.. 공감수 0 댓글수 1 2023. 6. 15.
문서의 문장 단위 변경 추적 주말에 git의 diff 알고리즘에 학습을 하고 오늘은 코드 작성을 해보았다. git의 diff 알고리즘은 공개되지 않아 레퍼런스가 거의 없다시피 한 상태다. 그래서 개념적인 부분만 적용 해서 코드를 작성해보았다. 무비위키 프로젝트에서 기존의 문서 비교 부분에 적용되어있던 diff 알고리즘과 다른점은 원본 문서와 수정된 문서의 비교를 글자 단위가 아니라 문장 단위로 끊어서 진행한다는 것이다. 문장 단위 변경 사항 추적 알고리즘 사용자가 특정 영화의 post를 등록하면 html 태그가 달린 문자열 형태로 db에 저장된다. 그래서 문자열을 문장 단위로 끊어서 비교를 해주기 위해 p태그를 이용하여 split해준다. 원본 문서와 수정된 문서를 각각 배열로 바꿔준 다음 인덱스를 이용해 비교한다. 추가된 문장과 삭.. 공감수 1 댓글수 0 2023. 6. 13.
git의 diff 알고리즘 오늘은 코치님의 멘토링이 있었다. 현재 우리 프로젝트는 LCS를 기반으로 한 diff 알고리즘을 형상 관리에 적용하고 있다. 그런데 코치님은 LCS에 기반한 diff 알고리즘은 비효율적이라고 다른 알고리즘을 사용할 것을 추천하셨다. 그래서 git에서 사용하는 diff 알고리즘에 대한 설명이 담긴 웹 페이지를 공유해주셨다. 그것을 보고 학습한 내용을 정리해보려고 한다. diff와 patch diff는 두 개의 파일 또는 문서 간의 차이점을 식별하는 알고리즘 또는 도구를 의미한다. 원본과 수정된 버전 사이의 변경 내용을 탐지하고 추가된 내용, 제거된 내용, 수정된 내용 등을 식별한다. 주로 LCS 알고리즘이나 히스토그램 알고리즘 등을 사용해 구현할 수 있다. patch는 변경된 내용을 적용하는 것을 의미한다.. 공감수 1 댓글수 0 2023. 6. 10.
데이터 형상 관리 (특정 버전으로 롤백) 이번주는 증분식 데이터 형상관리 학습과 구현으로 대부분의 시간을 보냈다. 나는 최신 버전 전체 스냅샷과 특정 버전 스냅샷으로 롤백하는 기능 구현을 맡았다. 전체 스냅샷 응답은 스냅샷 테이블에서 특정 영화의 id 값을 기준으로 찾아서 보여주면 되는 것이기 때문에 어려움 없이 구현할 수 있었다. 반면 롤백 기능 구현에 많은 시간을 할애했다. 롤백은 post 테이블에 쌓인 버전별 변경사항 데이터와 snapshot 테이블에 10개의 버전 단위로 쌓인 전체 스냅샷 데이터를 movieId와 version 값을 기준으로 찾아와서 합치는 것이 기본적인 로직이다. 오늘 애를 먹었던 부분은 post 테이블에서 여러 버전의 변경 사항 데이터들을 가져와 원본 문서와 더해주는 함수에 집어 넣는 것이다. 아래는 repositor.. 공감수 0 댓글수 0 2023. 6. 10.
증분식 데이터 형상관리 : Increment Data Versioning 현재 진행중인 MovieWiki 프로젝트의 1차 API 작성을 완료했다. 이제 다음 스텝은 성능 개선 및 기능 고도화다. 그중에서도 가장 난이도가 높을 것으로 예상되는 것이 프로젝트의 핵심 기능인 데이터 형상관리 (Data Versioning)이다. 지난주 멘토링에서 코치님이 증분식 데이터 형상관리(Increment Data Versioning)를 사용하는 것으로 방향성을 제시해주셨다. 그래서 그에 대해 학습한 것을 정리해본다. 증분식 데이터 형상관리(Increment Data Versioning) 데이터의 변경 이력을 증분 방식으로 관리하는 방법이다. 데이터의 일부분이 변경되었을 때 전체를 저장하거나 복사하는 대신 변경된 부분만 저장하여 저장 공간을 절약하고 데이터 전송 시간을 단축시키는 장점이 있다... 공감수 0 댓글수 0 2023. 6. 3.
TypeORM enum 타입 사용하기 코드 작성 중 entity에 제한된 값을 가지는 컬럼을 만들기 위해 enum(열거형) 타입을 사용해보았다. 진행중인 프로젝트에서 유저가 특정 게시물에 적절하지 않은 내용이 있을 경우 신고를 할 수 있는 기능이 있다. 그래서 유저가 해당 게시물에 신고 요청을 하면 관리자가 내용을 확인하고 승인 또는 반려를 하게된다. 위의 로직에서 특정 신고에 3가지의 제한된 상태가 필요하다. 유저가 특정 게시물 신고를 완료한 상태 => AWAIT (관리자의 처리를 대기하는 상태) 관리자가 내용을 확인하고 신고를 승인한 상태 => ACCEPT 신고 내용이 적절하지 않아 반려한 상태 => REJECT notification-status.enum.ts 먼저 enum 파일을 생성하여 상태 값을 정의해주었다. export enum.. 공감수 0 댓글수 0 2023. 6. 2.
git stash(생성, 삭제, 복구) 협업을 하다보면 내가 작성해놓은 코드를 커밋하기 전에 github repository에서 pull을 해야할 경우가 생긴다. 그럴경우엔 git stash 명령어를 사용하여 커밋을 하지 않고 임시 저장해두었다가 merge를 완료한 후에 불러와서 작업을 이어갈 수 있다. 오늘도 프로젝트의 organization repo에서 내 repo로 최신버전을 sync fork한 후 local에서 작업중이던 내용을 stash하고 remote repo를 pull해왔다. 그리고 stash apply를 이용해 임시 저장한 작업 내용을 불러왔다. 문제는 그 다음에 발생했다. 괜히 stash 기록을 깔끔하게 만들고 싶어서 stash drop을 이용해 list를 지웠더니 해당 stash에 적용되는 코드들이 전부 날아가버린 것이다. .. 공감수 0 댓글수 0 2023. 6. 1.
TypeORM Isolation Level 이번 프로젝트에 transaction을 적용하며 TypeORM이 지원하는 transaction의 격리 수준에 대해 정리한다. 트랜잭션 격리 수준(Isolation Level)은 데이터베이스에서 동시에 실행되는 트랜잭션들 간에 어떻게 상호작용하고 데이터 일관성을 유지할지를 정의하는 개념이다. TypeORM은 다양한 트랜잭션 격리 수준을 지원한다. 1. Read Uncommitted (Level 0): - 가장 낮은 격리 수준이며, 트랜잭션의 변경 내용이 커밋되지 않았더라도 다른 트랜잭션에서 해당 변경 내용을 읽을 수 있다. - Dirty Read, Non-repeatable Read, Phantom Read 등과 같은 일관성 문제가 발생할 수 있다. 2. Read Committed (Level 1): - .. 공감수 0 댓글수 0 2023. 5. 30.
Typeorm Transaction 실전 프로젝트 'MovieWiki' 2주차가 진행중이다. 유저가 본인이 좋아하는 영화에 좋아요를 누르면 해당 영화의 like 숫자를 1 증가시키고 반대로 좋아요를 취소하면 like 숫자를 1 감소시키는 기능을 구현하고 있다. 정리하면 유저가 특정 영화에 좋아요를 누르면 2개의 기능이 동작을 해야한다. 1. 해당 유저의 userId와 영화의 movieId를 참조하여 Like 테이블에 데이터를 생성 또는 삭제 2. 해당 영화의 movieId를 참조하여 movie 테이블의 likes 컬럼이 1 증가 또는 1 감소 1번과 2번 중에 어느 한쪽만 실패하거나 성공을 하면 안되니까 transation을 사용해야한다. 이전에 클론코딩을 할 때 node.js에서 transation을 적용해본적은 있지만 nestJS에서는.. 공감수 0 댓글수 0 2023. 5. 29.
NestJS_Configuration 설정(Configuration)이란? 소스 코드 안에서 어떤 코드들은 개발 환경이나 운영 환경에 따라 다르게 코드를 넣어줘야할 때가 있으며 노출되지 않아야하는 코드들도 있다. 그래서 설정 파일을 따로 만들어서 보관해야한다. 설정파일은 runtime 도중에 바뀌는 것이 아닌 애플리케이션이 시작할 때 로드가 되어서 그 값들을 정의해 준다. 그리고 XML, JSON, YAML, Environment Variables 같이 많은 형식을 이용할 수 있다. Configuration을 위해 필요한 모듈 윈도우 기준 npm install -g win-node-env npm install config --save config 모듈을 이용한 설정 파일 생성 루트 디렉토리에 config 폴더를 생성 config 폴더 안에 .. 공감수 0 댓글수 0 2023. 5. 26.
Nest.js (feat.Pipe) Nest.js의 Pipe란? 클라이언트의 요청 데이터를 변환하거나 유효성을 검사하는데 사용되는 중간 처리기이다. Pipe는 메서드 실행 전에 데이터를 사전 처리하고, 유효성 검사 및 변환 작업을 수행하여 요청의 유효성을 보장하고 일관된 데이터 형식으로 변환할 수 있다. Pipe의 주요 목적 데이터 변환 들어오는 요청 데이터를 원하는 형식으로 변환한다. 예를들어 문자열을 숫자로 변환하거나, 문자열의 공백을 제거하는 등의 작업을 수행할 수 있다. 데이터 유효성 검사 들어오는 요청 데이터의 유효성을 검사한다. 예를 들어 데이터의 길이, 형식, 범위, 필수 여부 등을 확인하여 올바른 데이터인지 확인할 수 있다. 예외 처리 유효성 검사를 통과하지 못한 경우 Pipe는 예외를 throw하여 해당 요청을 처리하는 핸.. 공감수 0 댓글수 0 2023. 5. 24.
Nest.js(feat.DTO) 지난 토요일에 작성해서 제출한 SA의 피드백을 확인하고 기획을 보완 및 수정하였다. 그리고 팀원 공통의 첫번쨰 챌린지 과제인 Nest.js 공부에 돌입하였다. youtube nest.js 무료 강의 Nest.js란? TypeScript로 작성된 서버 사이드 애플리케이션을 구축하기 위한 프레임워크이다. Express.js를 기반으로하여 모듈 기반 아키텍처와 강력한 의존성 주입 컨테이너를 제공하여 확장 가능하고 유지 보수가 용이한 개발을 할 수 있게 해준다. Nest.js는 간결하고 직관적인 문법을 가지며, 데코레이터를 사용하여 클래스와 메서드에 기능을 추가할 수 있다. 또한 다양한 기술과 통합할 수 있는 생태계를 가지고 있다. DB는 TypeORM, Sequelize, Mongoose 등과 같은 ORM이나.. 공감수 0 댓글수 0 2023. 5. 22.
기획 단계의 소통과 의사 결정에 대하여 어제에 이어 프로젝트 기획이 한참 진행중이다. 완성도 높은 프로젝트를 위해 기획에 주어진 시간이 많아 팀원들과 소통해서 결정해야할 것도 많아졌다. 항해를 시작하고 이렇게 하루종일 팀원들과 화면을 켜놓고 대화한 일도 없었던 것 같다. 어제 기획 분야 멘토님의 특강이 있었는데 그때 정리해둔 내용을 간단하게 정리해보고자 한다. 기획 단계의 의사 결정 팁 다수결로 의사 결정하지말 것 소수의 의견이라도 논리적인 근거를 바탕으로 합리적인 의사결정을 해라 프로젝트의 방향성이 자신의 생각과 다르다면? 논리적이고 설득력 있는 근거를 바탕으로 자신의 의견을 분명히 전달하라 우리는 종종 의사 결정이 어려운 상황에서 다수결을 이용하기도 하는데 분명한 근거가 없는 선택지가 후보로 올라가 있는 경우도 있었던 것 같다. 논의할 시.. 공감수 0 댓글수 0 2023. 5. 20.
최종 프로젝트 시작 드디어 항해99의 최종 프로젝트가 시작되었다. 나는 챌린지 팀을 선택해서 앞으로 6주 동안 한 팀으로 도전적인 기술들의 구현을 하게 될 것이다. 주특기 주차에 매니저들이 챌린지는 한 두가지 기술을 깊게 digging해보고자 하는 사람들이 선택하는 것이며, 그러기위해서는 남들보다 코딩 실력이 더 뛰어나야한다고 했다. 그래서 많이 망설였지만 나중에 취업시장에서 나의 단점을 상쇄 시키고 최소한 20대 젊은 개발자들과 같은 선에서 경쟁하려면 나만의 무기가 있어야한다고 결론을 내렸고 과감히 챌린지 팀에 지원하게 되었다. 최종 프로젝트는 6주의 기간이 주어지기 때문에 기획 단계부터 이전의 프로젝트에 비해 많은 시간이 주어졌다. 오늘부터 약 1주간은 프로젝트의 근간이 되는 ideation을 진행하며 userflow,.. 공감수 0 댓글수 0 2023. 5. 20.
클론 코딩 프로젝트 회고 오늘 클론 코딩 프로젝트를 발표하고 종료되었다. 토이 프로젝트를 한 차례 진행한 경험이 있어서인지 전체적인 진행에 지난번과 같은 아쉬움은 없었다. 프로젝트 발표에서 기술 매니저님의 피드백 // 게시물 작성 createPost = async (req, res) => { try { const { user_id } = res.locals.user; const { content } = req.body; const img_urls = req.img_url; if (!content) { return res.status(412).json({ errorMessage: '게시글 내용을 입력해주세요.' }); } // content만 입력할 경우 if (img_urls === undefined) { const create.. 공감수 0 댓글수 0 2023. 5. 19.
S3와 cloud front 속도 비교 현재 서버는 1차적인 기능 구현과 서버 배포까지 완료된 상황이다. 그래서 FE에서 테스트를 하며 구현을 진행하고 있는데 이미지 업로드와 조회 속도가 느리다는 피드백이 있었다. 그래서 어떻게 개선해야하나 고민하고 있는데 마침 중간 멘토링에 기술 매니저님이 말씀해주신 Cloud Front가 생각났다. 그래서 Cloud Front에 대해 알아보고 있는데 github commit을 보니 다른 팀원이 이미 적용해 놓았다. 그래서 S3만 사용했을 때와 Cloud Front까지 적용해보았을 때 이미지 업로드 속도 차이를 확인해보았다. 테스트에 사용한 이미지 파일의 용량은 158 KB이다. S3만 사용했을 때는 아래와 같이 571ms로 약 0.5초 정도 나온다. Cloud Front를 적용했을 때는 아래와 같이 354.. 공감수 0 댓글수 0 2023. 5. 18.
type error 문제 어제 저녁 완성한 코드를 오늘 아침 테스트하다가 몇가지 오류가 발생했다. 그중에 해결하는데 가장 많은 시간이 걸렸던 오류가 type error였다. 게시글 수정 기능중에 게시물에 등록된 이미지 파일중 일부를 삭제하는 코드가 제대로 동작하지 않았다. 삭제할 이미지 파일의 id를 배열 형태로 받아 db에서 해당 id를 기준으로 데이터를 삭제해주는 로직이다. 현재 우리 프로젝트는 3 layered achitecture pattern을 적용중인데 service 계층에서 자꾸 type error가 발생했다. controller 계층 const removeImgIdArray = req.body.removeImgId; // 삭제할 이미지 url_id의 배열 // 이미지 파일 삭제 if (removeImgIdAr.. 공감수 0 댓글수 0 2023. 5. 17.
multer multiple 적용 현재 진행중인 페이스북 클론코딩에서 게시물 작성을 할 때 이미지 파일을 single이 아닌 multilple로 업로드 할 수 있도록 코드를 수정했다. 먼저 라우터 아래와 같이 설정해 주었다. router.post('/', authMiddleware, uploadImage.array('img', 4), postsController.createPost); multer 미들웨어에 이미지 파일 업로드를 uploadImage라는 상수로 선언했다. 그리고 그 뒤에 single이 아닌 array로 입력해주었다. 괄호 안의 첫번째 인자는 클라이언트에서 이미지 파일을 넘겨줄 때 사용하는 키값이다. 그리고 뒤의 숫자는 업로드를 허용하는 이미지 파일의 개수이다. 위와 같이 설정해주면 서버쪽에서 req.files를 이용해 업.. 공감수 0 댓글수 0 2023. 5. 16.
multer 이번 클론 코딩에서 내가 맡은 파트는 게시물 생성, 상세조회, 수정, 삭제이다. 기본적인 CRUD이지만 이번엔 이미지 업로드 기능도 추가로 구현해야 한다. 그래서 다른 조에 multer 사용 경험이 있는 분께 지식 동냥을 해가며 습득하고 있었는데 소통 오류로 다른 팀원이 먼저 기능 구현을 하여 깃헙의 프로젝트 repo에 pull request를 해버렸다..... 내가 직접 구현해보고 싶었는데 많이 아쉽다. 하지만 현재 구현되어 있는 기능은 single, 즉 한 장의 이미지 파일만 업로드가 가능하기에 내가multiple (다수의 이미지 파일 업로드) 기능을 적용해보기로 했다. multer란? node.js에서 express와 함께 사용되는 미들웨어 중 하나로 파일 업로드를 처리하기 위한 라이브러리이다. m.. 공감수 0 댓글수 0 2023. 5. 14.
웹 소켓 (feat. socket.io) 오늘부터 주특기 프로젝트 클론코딩 시작이다. 우리 조는 페이스북 클론 코딩을 선택했는데 이번에 웹 소켓과 멀터를 적용해보기로 했다. 웹 소켓은 클라이언트와 서버간에 양방향 통신을 제공하기 위한 개념이다. node.js 심화주차에서 강의를 듣기는 했지만 한번 훑고 지나간 개념이라 머리에 남아있지않다. 그래서 다시 한번 정리해보려고 한다. TCP (Transmission Control Protocol) 서버와 클라이언트간에 신뢰성 있는 데이터 송수신을 위해 만들어진 연결 지향성 프로토콜이다. 데이터를 나눠 보낼 수 있으며 받는 쪽에서 재조립한다. 만약 누락된 데이터가 존재하면 다시 요청해서 받아와 완전한 데이터를 만든다. 데이터의 순서가 바뀌지 않아 안정적이고 신뢰성이 높다. UDP보다 전송 속도가 느리고 .. 공감수 0 댓글수 0 2023. 5. 13.
주특기 토이프로젝트 회고 주특기 토이프로젝트 발표가 끝났다. 늘 그렇지만 결과물은 항상 아쉽다. 기획 단계부터 배포까지 되돌아보려고 한다. 기획 단계에 많은 리소스를 투자해야 좋은 프로젝트를 만들 수 있다고 한다. 이번 프로젝트에서는 그 부분이 조금 아쉽다. 1.API 명세 초기에 API명세를 탄탄하게 작성해 놓지 못한 것이 아쉽다. 역할을 나누고 코드를 작성하다보니 변경되는 부분이 있었는데 API 명세서에 업데이트가 되지 않아 중간에 소통 오류가 발생했다. 그것은 곧 리소스 낭비와 직결되기 때문에 초기에 와이어프레임을 최대한 상세하고 정확하게 작성하고 그에 따라 API 명세서를 자세하게 만들어두어야 리소스 낭비를 최소화할 수 있을 것 같다. 그리고 만약 중간에 수정이 필요하다면 동기화를 신속하고 정확하게 해야한다. 2. gro.. 공감수 0 댓글수 0 2023. 5. 11.
npm run build (feat. CORS 에러 패배) 어제 오전부터 이어진 CORS 에러와의 싸움은 결국 패배로 끝이났다..... 11일 목요일 저녁엔 완성된 프로젝트 발표를 해야해서 시간이 충분하지 않은 상황이었다. 그래서 궁여지책으로 나온 방법이 FE 파일과 BE 파일을 합쳐서 로컬 환경에서 테스트하며 작업을 하는 것이다. 그렇게 되면 배포도 FE와 BE를 따로 하지 않고 한꺼번에 해야할 것이다. 아무튼 파일을 효과적으로 결합하기 위해 npm에 있는 리액트 배포 버전을 만드는 명령어를 사용했다. npm run build 터미널에서 위의 명령어를 사용하면 프로젝트 폴더에 build 폴더가 생성되고 그 안에 리액트 배포를 위해 필요한 파일들이 들어가 있는 것이 확인된다. 쉽게말해 배포를 위해 필요한 파일들을 build 폴더에 정리를 해주고 소스코드 공백들을.. 공감수 0 댓글수 0 2023. 5. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.