FastFive 프리온보딩 기업과제 과제 진행간 개요 기간 프로젝트 수행 기간 : 2022.12.12. Mon ~ 2022. 12.22. Thu (11일간) 최초 정식 코드 배포일 : 2022.12.22. Thu 프로젝트 보수 기간 : 2022.12.23. Fri ~ 2022.12.27. Tue (5일간) 인원 프론트엔드 3명, 백엔드 2명 백엔드 기술스택 JavaScript, TypeScript, TYPEORM, mySQL, Node, Express 개발환경 OS : macOS 개발 tool : WebStrom, DBeaver, Postman 형상관리 : GitHub 문서관리 및 티켓관리 : Notion 협업 툴 : Slack 백엔드 기능분담 ERD 분석 및 작성 : 송인찬, 김**님 DBmate 세팅 : 송인찬 User API : 송인찬 category API : 송인찬 feedList API : 송인찬 reply API : 송인찬 posting API : 김**님 임시저장 posting: 김**님 임시저장 수정 posting: 김**님 정식저장 posting: 김**님 delete posting API : 송인찬 결과 github 주소 ERD 구성 백엔드 API Documentation 배포 사이트 최초 문서 분석 이번 프로젝트는 typescript라는 새로 배운 언어를 도입하여 진행하기로 하면서,

덧글 삭제 API 관련 코드 리팩토링 중, status code를 맞추다가 알게 된 사실! statusCode 204는 response를 전송하지 않는다!! 다만 status code “204” 만 전달할 뿐. 이걸 몰라서 코드의 오류인줄 알고 한참을 헤맸다. status code를 200으로 바꿨더니 다시 원래대로 response가 전송되었다. status code 문서의 개요만 어설프게 보고서는, 삭제니까 no content인 204가 맞겠지 하고 내 멋대로 이해한 실수였다. 204에서 다시 200으로 처리한 이유는, 삭제된 이후의 덧글 리스트와 페이지네이션 위치를 json으로 전달해야할 필요성이 있어서였다.

typescript에서의 typeorm 연결 오류 대략 14시부터 22시까지 무려 8시간을 끼니도 거른채 뚫어져라 모니터만 쳐다보며 찾았다. type 지정이 잘못되었나? 아니면 새롭게 설치해줘야하는 npm이 있는건가? 눈이 빠져라 찾았는데 결과는 Success server.ts에서 dotenv.config() 바로 이 코드의 순서 문제였다. 기존 import createApp from './app.ts' 보다 아래에 있었는데 위로 올렸더니 바로 서버가 열렸다. dotenv.config() import createApp from './app.ts' // 윗줄과 순서 바꿈 동기/비동기 세션을 진행한게 오늘인데 바로 이러한 문제를 찾지 못하고 엉뚱한 곳에서 하루종일 헤매고 있었다니… 참고사이트 오류 해결1

mySQL을 사용하여 Database를 쌓아 나갈때, DBmate 를 사용하면 초기 세팅값을 마치 git을 저장하듯 이력을 남겨 언제든 migration 할 수 있다. 지금부터의 설명은 macOS 기준으로 기술한다. (windows가 없음 ;; ) DBmate 설치 Homebrew 를 사용하여 설치한다. 1 터미널 아무 위치에서나 무관하다. 2 $brew install dbmate 이렇게 입력 후, 엔터키를 누르면 자동으로 설치가 된다. 그리고, 하나의 파일이 필요하다. 바로 .env 파일. IDE 또는 터미널 vim으로 .env 파일을 생성한 후, 다음과 같이 입력한다.

터미널을 처음 실행하면 꼭 사용자 폴더에서 시작한다. cd ...로 찾아가는게 너무 귀찮다. 그렇다고 finder에서 폴더를 drag & drop해서 직접경로를 떨어뜨리는 방법도 있지만, 굳이 키보드에서 또 마우스나 트랙패드로 손을 움직이고 싶지 않다. 때문에 알게 된 것이 바로 alias를 활용한 터미널 단축키 방법! 우선 zsh라는 쉘 을 한번 가볍게 알아본다. 힘들면 Pass하고, 바로 적용할 수 있는 방법으로 가자! 1. zshrc 편집 터미널에서 다음을 실행 vim ~/.zshrc 이미 파일이 존재할수도 있고, 없으면 파일이 생성되며 바로 편집모드로 들어가게 된다.

justgram - UI 만들기 Mission 1 - 로그인 페이지 레이아웃 처음 HTML 파일을 작성할때, display : flex; 를 쓰지 않았다. 결과는 원하는대로 나왔지만 나의 첫 코드는 쓸데없이 수많은 <div>와 <p>태그로 범벅이 됐다. HTML 초기버전 <div class="wrapLoginBox"> <div class="loginBox"> <p id="title">justgram</p> <div class="inputBox"> <p> <input id="userInput" type="text" placeholder="전화번호, 사용자 이름 또는 이메일"/> </p> <p> <input id="pwInput" type="password" placeholder="비밀번호" /> </p> <p><button class="loginBtn" disabled>로그인</button></p> </div> <div class="foot"> <a href="https://www.instagram.com/accounts/password/reset/">비밀번호를 잊으셨나요?</a> </div> </div> </div> 위 코드가 처음 아무 생각없이 짠 HTML이다.