배꼽파지 않도록 잘 개발해요

우리 서버에서 multer를 활용하여 프로필 이미지를 변경할 수 있는 기능이 있다. 클라이언트에서 사진을 업로드하면 서버에서 multer를 통해 이미지를 서버의 public/uploads 폴더 안에 저장을 하고, 해당 이미지 경로를 DB의 사용자 정보에 저장한다. 이걸 클라이언트가 받아서 화면에 렌더링하는 식으로 구현을 하였다. 문제는 로컬에서는 아주 잘 작동을 하였으나, 배포 후 작동을 하지 않는다는 것이었다. 여기 모달창에서 왼쪽 프로필이미지 버튼을 누르면 변경할 수 있는 창이 뜬다. 여기서 미리보기로 바뀐 이미지가 뜨고, 저 모달창을 닫아도 변경된 이미지가 렌더링되어야 한다.이걸 내가 구현하였는데, 순서가 헷갈려서 시간이 꽤 걸렸던 기억이 났다.프론트엔드는 렌더링 되는 화면과 데이터 로직을 모두 고..

글은 아래와 같은 구성으로 이루어진다. Google Cloud API 사용을 위한 설정NestJS에서 OCR 기능 추가 API 사용 중 발생한 타입 오류 해결 원하는 문자열만 추출하기 Google Cloud API 사용 이유지금 특정 학교의 특정학과 학생들(재학생, 졸업생)만 이용할 수 있는 동문 커뮤니티를 만들고 있다.  사용자가 재학증명서나 졸업증명서 이미지를 업로드하고 회원가입 폼을 제출하면 서버에서 사용자의 실명만 추출해서 Users 테이블에서 userName 컬럼에 넣어주는 로직이 필요하였다.이때 이미지에서 텍스트를 추출하는 OCR 라이브러리가 필요하였는데, 자바스크립트에서는 tesseract.js와 Google Cloud Vision의 API를 많이 활용하는 것 같았다.어떤 분의 블로그를 보니..

상황 설명 우리 팀의 브랜치 - dev : 우리 팀의 default 브랜치, 모든 작업은 여기다 합침 - feature/user : 내가 작업하려고 새로 만든 브랜치 - feature/post : 다른 분이 작업하신 브랜치 상황 - 내가 feature/user을 새로 만들어서 작업하고 커밋을 했음. - 그런데 feature/post 작업 결과가 dev에 반영이 안 된 상태임. - 그래서 dev 브랜치에 feature/post를 merge를 하였음. - 나는 dev브랜치의 최신 내용을 현재 있는 브랜치(feature/user)에 반드시 가져와야만 함. 이럴 때는 어떻게 해야할까? 1. Merge를 한다.현재 브랜치에 dev브랜치의 변경사항을 합친다.# 현재 브랜치에서 작업하고 있는지 확인git status..

만들었던 사이트를 구글 검색 콘솔에 등록해보기로 했다. 엘리스 SW엔지니어 트랙 진행 당시 1차 프로젝트 때 만든 사이트이다.HTML, CSS, JavaScript를 활용하여 간단한 상품 목록, 장바구니, 결제, 프로필 변경 등의 기능을 구현하였다.팀원들이 프론트엔드를 배우고 나서 처음으로 만든 사이트 치고는 꽤 퀄리티가 괜찮다. 도메인을 구입해서 배포까지 했는데, 구글에 검색했을 때 나오면 좋겠다는 생각이 들어서 구글 검색 콘솔에 사이트 등록을 진행하였다.  https://www.honeytouse.com/ 꿀단집이벤트 배너 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut pariatur hic debitis vero accusantium v..

프로젝트 리팩토링을 아직도 하고 있는데, 검색 API를 만들다가 쿼리를 제대로 사용하지 못하여 시간을 엄청 허비하는 일이 있었다.결론부터 말하면 1번 코드로 작동해서 안 되다가 2번 코드로 수정하니 잘 해결되었다.이게 왜 안 되는지 파악하는데 꽤 많은 시간이 걸렸다.  상황 : feed 모델 안에 travelPlan 모델을 populate한 상태임.1번결과 : 모든 글이 다 조회됨. // 제목 // travelPlan의 title if (title) { const feeds = await this.feedModel .find() .populate({ path: 'travelPlan', match: { title: title..

NestJS에서 SSR을 해야할 일이 생겼다. pug와 ejs를 써봤는데 ejs 문법이 편해서 ejs를 사용하기로 했다.작성한 ejs 파일은 다음과 같다. 안에 서버에서 지정한 변수의 값이 들어간다.예를 들어 nickname이 고길동이면 "안녕하세요. 고길동님!" 이런식으로 렌더링이된다.  작성한 코드는 다음과 같다.ejs 템플릿 엔진 안에 이메일 인증이 필요합니다. 안녕하세요. 님! 회원가입 완료를 위한 이메일 인증이 필요합니다. 아래의 버튼을 클릭하여, 이메일을 인증해주세요. 버튼을 클릭하시면, 중간이들 사이트의 메인..

NestJS는 모듈 기반 아키텍처를 사용하는 프레임워크이다. import와 export만 제대로 해주면 되는 express와는 다르다.이로 인해 의존성 주입(Dependency Injection)과 모듈 간의 관계 설정이 정말 중요하다. 그래서 아래와 같은 깜찍발랄한 오류들을 자주 만날 수 있다.[Nest] 7816 - 2024. 08. 26. 오후 4:47:41 ERROR [ExceptionHandler] Nest can't resolve dependencies of the AuthSessionService (?). Please make sure that the argument Redis at index [0] is available in the AuthModule context.Potential..

현재 진행하고 있는 프로젝트의 로그인 단계는 대략 7단계를 거친다.코드 개발 중이라서 이보다 많아질 수 있다. 아직 부족하다. auth.service.ts 클래스 안에 특정 함수를 정의하고, 이 함수를 다른 함수가 재사용하는 형태가 되었다. 쉽게 말해 클래스 안에서 한 함수를 다른 함수가 끌어다 쓰고 있는 상황이다.지금 로그인 로직만해도 7단계를 거치고 있는데, 이러다보면 AuthService에는 메서드들이 넘쳐나서 개발할 때 필요한 메서드를 쉽게 찾을 수 없다. 클라이언트에서 리퀘스트가 온다고 하면AuthController의 로그인 API→ AuthService의 로그인 메서드이런식으로 깔끔하게 거쳐가게 하도록 하고 싶다.로그인 메서드에 필요한 나머지 메서드들은 AuthService에서 재사용하는 것이..

https://programming-bellybutton.tistory.com/200 [NestJS] res.cookie를 사용하기 위해 Express의 Response를 import 해야함프로젝트 리팩토링을 하고 있는데, Access token은 리스폰스의 리턴값으로 보내주고, Refresh token은 쿠키에 담아서 전송하기로 하였다. res.cookie를 사용하기 위해 Express의 Response를 importNestprogramming-bellybutton.tistory.com지난번에 이런 글을 쓴 적이 있다.글의 요지는 NestJS에서 특정 속성(예: cookie)을 사용하기 위해 express의 객체를 불러와야 한다는 것이었다. 이번 프로젝트에서도 express의 Request 객체를 불러..

프로젝트 리팩토링을 하고 있는데, Access token은 리스폰스의 리턴값으로 보내주고, Refresh token은 쿠키에 담아서 전송하기로 하였다. res.cookie를 사용하기 위해 Express의 Response를 importNestJS에서 Request와 Response 객체를 사용하는 방법은 두 가지가 있다. Express로부터 직접 가져온다 NestJS의 @nestjs/common에서 가져온다 VSCode에서 자동 import를 설정해 놓으면 NestJS의 @nestjs/common에서 가져오게 된다. 그런데 쿠키 전송을 위해 res.cookie를 사용하려면 Express의 Response 객체를 사용해야 한다. res를 import하고 res.cookie를 입력했는데 이렇게 인식하지 못하는..