개발일지용

실전프로젝트 - 1주차 1. 회의 내역 - 팀명/서비스명 선정 2. api명세 작성 - https://team-spirits.oopy.io/common/api TASK & API 설계 개발 스프린트 team-spirits.oopy.io 3. 회고 - api명세서는 FE의 참고자료이면서 BE의 참고자료 이기도함. 효율적인 개발 협업을 위한 중요한 역할 - 명확한 작성 양식과, 수정 사항의 실시간 반영이 이뤄지지 않으면 개발 프로세스에 및 기능 로직에 대한 오해가 생겨 시간낭비가 진행됨을 그동안의 미니 프로젝트들을 통해 겪었음. 기능에 변화가 생겼을때와 특정 시간을 정하여 명세서 페이지를 지속적으로 체크할 예정

실전프로젝트 - 1주차 1. 주제 선정 1) 프로젝트 진행 방향 (1) 메인 기능 - 소켓, 웹RTC 중 택 1 (2) 기획보다는 기술 스택에 더 집중 (3) 화면 비율은 모바일 사이즈 기준으로 진행 (4) 지도 API는 메인기능보다 사이드 스코프로 (5) 공공 API에서 가져올 수 있는 데이터 있다면 가져와서 데이터 핸들링 진행 2) 주제 회의(후보 2 - 위스키바로 결정) (1) 통신 + 위치정보 + 데이터 가공을 포함할 수 있는 주제로 브레인스토밍 (2) 후보 1 : 배민원 - 통신 + 위치정보 (3) 후보 2 : 위스키 - 위스키에 대한 접근성과 업장-손님 연결 해주는 애플리케이션 부재(현재는 인스타 공지) - 위스키바 점주도 가입가능, 근무중인 바텐더/매니저가 현재 보유 중인 위스키 수량 손님들..

클론프로젝트 주차 1. 발표/시연 2. 회고 1) 이번주에 도전한 기술 : socket.io - socket.io를 이용한 1:1, 단체 채팅 구현 - FE리소스가 부족하여 클라이언트/서버 로직을 전부 제작하게 되었고, FE-BE 흐름에 대한 인지가 높아짐 2) 기본로직 - socket.io를 이용하여 실시간 양방향 채팅 구현 - 입장/퇴장 메세지 구현, 내가보내는 채팅과 다른사람의 채팅 구분 - 채팅방 개념 구현: 같은 채팅방에 입장하여야 대화 공유 가능 3) 심화로직 - 게시글 작성자의 정보와 로그인한 유저의 정보를 이용하여 구매자가 게시글의 채팅하기를 누르면 판매자와 자동으로 채팅방 생성 - 채팅에 read(true/false) 속성을 추가하여 읽음/안읽음 로직 구현 채팅방에 입장시/입장해 있을 시..

1. 소통 이슈 - 주제 선정 및 기능 토론 이후 와이어 프레임과 api 명세서를 작성하였는데, 서로 기능 구현 범위에 대한 오해도 있었고 api 명세서에 FE진영에서 오해할 수 있는 방식으로 작성된 부분이 있어 몇번의 소통과 수정이 추가적으로 필요하였다 2. 배포 후 연결 이슈 1) CORS 이슈 - 동일출처정책 이슈가 있었으나, CORS 라이브러리를 이용하여 도메인 허용 및 크리덴셜 설정으로 해결 2) 개발환경/배포환경 이슈 - 백엔드의 개발 환경에서 잘 진행되었던 부분들이 FE와 연결 후 에러가 나는 부분이 있었는데 쿠키 전달과정에서 대/소문자 구별이 사라지고, 인증 미들웨어에서 req를 cookie에서 받아오고 있었는데 프론트에서는 header에 담아줘서 일어난 이슈 - 식별자들의 대소문자를 명확..

클론프로젝트 주차 1. 작업 내역 - BE 아키택쳐/스트럭쳐/ERD 설계 - FE-BE 연결 - 댓글 CRUD - like 로직 - 채팅 구현 2. socket.io로 채팅 구현 *DB 필요한 로직 생략 1) 클라이언트 로직 더보기 const socket = io(); socket.on("connect", () => { let name = prompt("닉네임을 적어주세요", "") || "익명"; let room = prompt("방번호를 적어주세요", "") || "기본방"; socket.emit("newUser", name, room); }); socket.on("update", (data) => { console.log(`${data.name}:${data.message}`); let chat =..

클론 프로젝트 주차 1. 주제 선정 1) 당근마켓 클론 - CRUD, 검색, 채팅 클론 예정 2) 기능 구상 - 메인/회원가입/회원탈퇴/로그인/로그아웃/마이페이지/게시글/댓글/채팅/찜하기/검색 3) 챌린지 기능 - socket.io를 이용한 채팅 2. 와이어프레임, ERD, 명세서 1) 와이어프레임 https://www.figma.com/file/1QTJ8bvHiTCD91AbPkudoo/Untitled?type=design&node-id=20-149&t=eWixshrQsBskos6X-0 Figma Created with Figma www.figma.com 2) ERD 3) API명세서 양식 - 노션 외부 링크 이슈로 주소 생략 3. 담당 기능 - 좋아요/댓글CRUD/채팅 4. 플라이트 패턴 1) 플라이트..

미니프로젝트 주차 1. 발표 관련 1) ui구현 페이지 - 메인 페이지, 플레이 페이지, 상세결과 페이지, 로그인 페이지, 회원가입 페이지, 마이 페이지, 컨텐츠 등록 페이지 2) BE완료한 기능 - 나의 기능 : 회원가입, 로그인, 로그아웃, refresh token, 비밀번호 해시화 - mypage : 내가 한 월드컵 결과 조회, 내가 만든 월드컵 조회, 월드컵 결과 db저장, - 월드컵 : 월드컵 CRUD, 좋아요 - 댓글 : 댓글CRUD - EC2 배포, CORS 3) BE도전한 기능 - 나의 기능 : 이메일 인증 - 승률/통계, Test code(통합 단위, 기능 단위), swagger, jest html reporter, sentry 2. 트러블 슈팅 1) 트랜잭션 적용 계층 논의 : 서비스 ..

미니프로젝트 주차 + 디자인 패턴 스터디 1. Sentry 1) Sentry - 코드의 오류를 식별하고 분류하는데 도움이 되는 외부 모니터링 및 에러 로깅 서비스를 제공 - 코드 상에서 errorHandler를 통해 특정 error code(404, 500) 들을 에러로 식별 가능 - Sentry website에서 에러 로그 정보를 조회할 수 있고, DSN주소로 나의 코드와 웹사이트를 연동 2) DSN - DSN은 "Data Source Name"의 약어, 데이터 소스에 대한 연결 정보를 식별하기 위해 사용되는 문자열 - 주로 데이터베이스나 다른 외부 리소스에 연결하기 위해 사용 - DSN은 다양한 데이터 소스 및 프레임워크에서 사용. ex) PHP의 PDO(PHP Data Objects)에서는 데이터베..

미니프로젝트 주차 1. 진행사항 1) 이메일 인증 2) bcrypt 2. 새로 시도한 것 1) 이메일 인증(nodemailer) - npm 라이브러리이며, Node.js 환경에서 이메일 전송을 간편하게 처리하기 위한 모듈 - SMTP(Simple Mail Transfer Protocol)방식 - nodemailer는 다양한 이메일 사이트와 호환되며 이메일 템플릿, 첨부 파일등의 옵션 보유 - npm install nodemailer, const nodemailer = require('nodemailer') - 예시 코드 const transporter = nodemailer.createTransport({ service: "gmail", port: 587, secure: false, auth: { use..

미니프로젝트 주차 1. 진행사항 1) 리프레쉬토큰 리팩토링 2) 배포 및 FE와 연결(CORS) 2. 새로 시도한 것 1) FE와 연결 2) 배포환경에 .env 업로드 - vim .env //파일이 없으면 생성, 있으면 수정 또는 추가 - vim에서는 입력모드와 명령모드 두가지로 나눠짐 - esc버튼을 누르면 입력모드/명령모드 전환 - 명령모드 : i ##입력모드로 전환 :q ## 종료한다 :q! ##저장하지 않고 강제로 종료 :wq ##저장하고 종료한다. 이후 ls -a ## (숨김 파일도 볼 수 있는 명령어)로 .env파일 확인 3. 고찰 1) 리프레쉬토큰 - 처음 적용 하였던 부분이라 로직에 대한 이해가 완벽하지 않았던 상태여서 완벽한 이해를 진행한 후, 작성한코드들에 대한 리팩토링 진행 - 리프레..