자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

이 날은 테스트 환경으로 인한 착각으로 로그인 기능에 고생을 좀 했다. 현재 백엔드 서버와 클라이언트 서버가 각각 나뉘어있고, 이를 Cross Origin 설정을 해놓아서 상호 통신이 정상적으로 이루어지게 설정해놨다. 그런데 클라이언트 서버에서 로그인을 할 경우 세션 쿠키가 클라이언트 브라우저에 생성이 되지 않는 문제가 발생했다. 이를 하루종일 찾아봤는데 도메인이 달라 발생하는 문제로 파악이 되었다. (클라이언트) localhost:5000 요청 => (서버) localhost:3000 이 경우 응답이 성공하고 쿠키가 생성되는 것이 확인되었다. 그런데 아래와 같은 환경에선 쿠키가 생성되지 않았다. (클라이언트) 192.0.0.1:5000 요청 => (서버) 192.0.0.2:3000 같은 도메인에 포트번..

현재 진행 중인 프로젝트에서 개발해야 할 큰 기능이 하나정도 남았는데 기획이 나오지 않아 진행을 임시 중단한 상태다. 그래서 현재 개인 프로젝트를 만들어볼까 한다. 생각 중인 건 (TypeScript + Node.js) + IOS 앱을 하나 만드려고 한다. 대충 느낌은 푸시 알림이 메인이 되는 서비스이며, 선택한 내용에 대한 정보를 매 일 랜덤하게 하나씩 푸시를 발송한다. 기능만으로 보면 간단해서 오래 걸리거나 하는 문제는 아니지만 처음이라 기획부터해서 어떠한 UI 컨셉을 잡아야하는지 감이 오질 않는다. 뭐 어쨌든... 그래서 일단 상세한 시나리오는 차차 생각하기로 하고 일단 서버의 기본 설정부터 하기로 했다. 사실 타입스크립트 핸드북의 모든 챕터를 보고 시작하려고 했는데 도저히 진도가 안나가는데다가 요..

오늘은 로그인 기능에 이슈가 있어서 이슈 확인 및 수정을 좀 했다. 이슈 내용은 다음과 같다. 클라이언트 서버에서 백엔드 서버로 로그인을 시도하면 응답은 가지만 클라이언트 PC에 Cookie가 만들어지지 않음 해당 이슈는 Cross Domain 이슈 중 하나다 클라이언트 서버에서 백엔드 서버로 서로 다른 아이피와 포트로 통신을 주고 받으니 브라우저의 보안 정책으로 인해 쿠키 생성을 차단한 것이다. NPM 패키지 중 cors 모듈을 통해 Cross Origin 설정을 컨트롤한다. const cors = require('cors'); module.exports = () => { const app = express(); ... app.use(cors({ origin: true, credentials: true..

오늘은 프론트 팀에서 전달된 버그 사항을 수정하는 작업을 했다. 공지사항 목록에서 카테고리 별 목록 조회 시 총 게시글 수가 카테고리 별 조회된 게시글 수가 아닌 전체 게시글 수로 전달됨 (페이지네이션 처리 시 문제 발생) 공지사항 목록에서 검색어 목록 조회 시 총 게시글 수가 검색된 게시글 수가 아닌 전체 게시글 수로 전달됨 (페이지 네이션 처리 시 문제 발생) 게시판 목록에서 검색어 목록 조회 시 총 게시글 수가 검색된 게시글 수가 아닌 전체 게시글 수로 전달됨 (페이지 네이션 처리시 문제 발생) 위의 문제들은 다음과 같은 사항 때문에 발생했다. exports.list = async (req, res) => { const findIncludeOptions = { where: { ..., [ Seque..

오늘은 쿼리관려해서 문제 하나가 오전부터 오후 2시까지 시간을 잡아먹었다. ㅡ"ㅡ 기존 공지사항 기능에 댓글이 없었는데 댓글이 추가되는 바람에 댓글 테이블을 설계했고, 기존 목록을 조회하는 쿼리를 수정하는 과정에서 문제가 발생했다. 글 제목 (댓글 카운트 수) 이런식으로 제목을 뽑으려고 시퀄라이즈 쿼리 옵션을 이리저리 수정하고 있었는데 쿼리가 계속 래핑되어 수행이 되서 말썽이었다. BoardModel.findAndCountAll({ attributes: [ [ sequelize.fn('COUNT', sequelize.col('board_comments.id')), 'commentCount' ] ], include: [ { model: BoardCommentModel, attributes: [] } ], ..

오늘은 게시판 API를 만들고 있다. 현재 댓글 삭제 기능을 구현 중인데, 개발 중 하나의 문제에 봉착했고 이걸 해결한 내용을 작성해보려고 한다. 내가 댓글 삭제에서 구현하고자 하는 로직은 다음과 같다. 댓글이 존재하는가? 댓글이 이미 제거되었는가? 게시글은 존재하는가? 게시글은 삭제되지 않았는가? 댓글의 작성자가 삭제하려는 사람과 동일한 사람인가? 위의 단계에서 3번째 조건문을 타지 않는 것이 확인되었다. 위의 조건을 구현하기 위해 실제 DB에 저장된 게시글의 아이디와, 사용자로부터 URL 쿼리스트링으로 받은 게시글 아이디 값을 비교했다. 그런데 조건을 타지 않았다. console.log()를 통해 찍어본 결과 게시글의 아이디는 같았으나, typeof를 통해 확인해본 결과 시퀄라이즈로 조회해온 값은 s..

오늘은 어제 만들었던 CustomError를 좀 손봤다 각각 컨트롤러에서 CustomError 객체를 생성할 때 마다 중복되는 메시지를 일일이 타이핑하는게 넘 귀찮아서(..;;) 그냥 통합 에러 메시지를 만들었다. Class CustomError extends Error { constructor(errCode, errName, errMessage = '', ...params) { super(...params) // 인자 배열을 부모 생성자에게 전달 // 오류가 발생한 위치에 대한 스택 추적 (V8 에진에서만 적용됨) if (Error.captureStackTrace) { Error.captureStackTrace(this, CustomError); } // 디버깅 정보 this.errorCode = er..

오늘 작업한 내용은 꽤 재밌는 부분이었다. 나는 지금까지 자바로 타입을 명시해서 에러처리를 해왔어서 자바스크립트의 에러처리는 항상 모호한 문제가 있었는데, 오늘 Error 객체를 extend해서 커스텀 에러 클래스를 만들어서 사용하니 이렇게 편할 수가 없다. Class CustomError extends Error { constructor(errCode, errName, errMessage, ...params) { super(...params) // 인자 배열을 부모 생성자에게 전달 // 오류가 발생한 위치에 대한 스택 추적 (V8 에진에서만 적용됨) if (Error.captureStackTrace) { Error.captureStackTrace(this, CustomError); } // 디버깅 정보..