나의 개발일지(김지헌)

오늘은 14시부터 17시까지 발표와 협력사 세션을 들었고 다른 조 들의 발표를 보면서 다양한 방법과 코드가 있는 것을 알수 있는 좋은 경험이였다. 그 후 노션에는 프로젝트 경험을 정리했다. 기존에는 자바스크립트로 구현을 하였는데 자바스크립트는 런타임이 시작되고 나서 에러가 발생 하기 떄문에 오류가 잦고 쉽게 타입을 알 수가 없습니다. 그 때문에 서버에 치명적이고 에러의 원인을 쉽게 파악 하지 못하는 단점이 있어서 타입스크립트로 선택하였습니다. 장점으로는 정적 타입의 언어로 런타임 전에 에러를 잡을 수 있고 파라미터들의 타입을 한눈에 알 수 있고, 코드를 쓰기 전에 타입을 한번 더 생각하게 되면서 런타임 전 에러와 타입을 잡을 수 있는 장점이 있었습니다. 타입스크립트 공부를 처음 시작 했을 때는 기초적인 ..

오늘은 최종 발표 자료를 검토하고 영상 제작을 했었다, 이때 까지 진행 한거를 말로 풀어서 쓸려고 하니 어려웠던거 같고 보기좋게 ppt를 만드는게 어려운거 같았다. 그리고 이미지 리사이징을 람다로 해볼까 생각 하고 있고 cd도 다시 적용을 했고 서버 바꿔서 다시 적용 하는거는 어렵지 않았다. 다음에는 서버를 구축 할 때 탄력적 ip를 써서 껏다 켜도 ip가 바뀌지 않게 해야곘다고 다짐 했다. 그리고 sequelize의 마이그래이트와 테이블 생성 코드에서 배포용으로 돌릴시 코드의 오류를 발견 했고 개선했다. //config.ts import dotenv from 'dotenv'; dotenv.config(); type Config = { username: string; password: string; da..

사진 용량이 커서 이미지 로딩 속도가 느려서 이미지 리사이징을 해야겠다고 생각했고 검색을 해보다가 람다를 이용한 이미지 리사이징과 sharp 라이브러리를 이용해서 이미지 리사이징을 하는 방법 두 가지 있었고 sharp를 이용해서 진행했다. 기존 코드는 동일 하고 멀터s3를 통해 이미지 업로드후 받아온 url주소에 키값을 가지고 해당 파일을 불러온후 입축하고 다시 업로드 하는 방법으로 구현했다. //userCo.ts updateUser: async (req: Request, res: Response, next: NextFunction) => { try { const { location, size } = req.file as Express.MulterS3.File //멀터의 타입을 사용함 const { us..

오늘은 1분 시연영상과 9분짜리 영상 제작을 했고, ppt는 만들지 못해서 노션을 보고 영상을 찍었고 오늘도 api 오류를 잡고 프론트와 보내는 값을 다시 맞춰보고 이미지 업로드가 느려서 이미지 리사이징을 하는것들을 찾아보고있다 multer-s3-transform과 sharp를 이용한 방식 두가지가 있었는데 multer-s3-transform을 사용할려고 했지만 types로 따로 설정 해야했고 sharp를 사용해서 리사이징을 해볼려고 한다.

오늘은 구글 소셜 로그인을 구현했다. 이전에 포스트한 카카오 로그인과 코드를 비슷하게 구현했다. 구글 로그인은 카카오와 다르게 인가코드를 받지 않고 에쎄스 토큰으로 준다. //프론트 코드 const oAuthURL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=클라이언트아이디& response_type=token& redirect_uri=https://localhost:3000& scope=https://www.googleapis.com/auth/userinfo.profile` //에메일과 프로필 받을려면 email+profile const oAuthHandler = () => { window.location.assign(oAuthURL); } ...

WIL 가까운 캠핑장 조회 api 현 위치의 좌표를 따서 데이터베이스에 저장되어 있는 캠핑장의 X, Y의 값을 기준으로 30km 내 가까운 캠핑장 리스트 뽑기 1. 모든 캠핑장을 조회하여 x,y 칼럼의 값을 뽑아내서 대조 후 보내주기 2. 모든 캠핑장을 조회하되 가까운 거리의 캠핑장만 뽑아오기 선택지는 두개였고 처음 시도는 1번으로 하였으나 값을 뽑아내기가 힘들고 뽑아낸다 하더라고 로직이 길어 성능이 느릴 거란 판단을 하여서 2번 방법으로 하기로 하였다. 2번을 선택하고 나서 시퀄라이즈 ORM 또는 mysql 쿼리문으로 작업을 할 것이냐를 두고 고민을 했다. 결론은 mysql 쿼리문 선택 하기로 했고 이유는 시퀄 라이즈 ORM으로는 구현이 힘든 작업이고 검색하고 찾아봐도 원하는 구현 방식을 찾아보기 힘들..

오늘은 나머지 예외 처리를 하고 테스트 코드를 쓸려고 기본 작업 준비를 해봤다. //기본 적인 설치 npm install --save-dev babel-jest @babel/core @babel/preset-env npm install --save-dev @babel/preset-typescript npm install --save-dev ts-jest npm install --save-dev @jest/globals 그 후 최상위 폴더에 babel.config.js파일을 만들어준다. //babel.config.js module.exports = { presets: [ ['@babel/preset-env', {targets: {node: 'current'}}], '@babel/preset-typescri..

오늘은 깃허브 액션을 이용한 cd구축을 해봤다. 1.타입스크립트로 작성을 해서 컴파일된 빌드파일을 올린다. 2.서버로 코드를 다 올려서 빌드 후 배포한다. 2번은 부하와 메모리가 많이 먹어서 서버에 부담이 가서 안될꺼 같았고 1번으로 진행 하기로 하고 시작을 했다. ap-northeast-2에 버킷을 생성하고 lam 역할에서 역할하나 생성 해서 진행 한다. 배포중인 ec2에 태그를 만들어준다. 그리고 깃허브 액션에 가서 yml파일을 생성한다. #deploy.yml name: campus # 어디브랜치에 쓸꺼니? on: push: branches: [CDTEST] jobs: build: runs-on: ubuntu-latest # 노드버전 쓰기 strategy: matrix: node-version: [1..