나의 개발일지(김지헌)

사진 용량이 커서 이미지 로딩 속도가 느려서 이미지 리사이징을 해야겠다고 생각했고 검색을 해보다가 람다를 이용한 이미지 리사이징과 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..

오늘은 예외처리를 마저하고 배포용 server.ts 코드를 수정했다. import express from 'express'; import cors from 'cors'; import cookieParser from 'cookie-parser'; import dotenv from 'dotenv'; import helmet from 'helmet'; //악성 스크립트 보호 import HTTPS from 'https'; import fs from 'fs'; import hpp from 'hpp' import indexRouter from './src/api/routes/index'; import createData from './src/database/data'; import {errorLogger, err..

오늘은 리프레쉬 업데이트에서 저장 오류가 발생해서 코드를 수정했다. 다른 라우터를 건들다가 파라미터가 조금 변경된게 문제였다. 내 위치를 기준으로 가까운 캠핑장을 조회해서 2개의 매장만 가져오는 api를 구현했다. 프론트에서 보내는 값에 현재 나의 위치 위도 경도 값이 들어오고 받아온 값을 가지고 30키로내 가장 가까운 2개의 매장 정보를 가져오는게 목표였다. //controller nearCamp: async(req:Request,res:Response,next:NextFunction)=>{ try{ const { campX , campY }:coordinate = req.query console.log(campX,campY) if(!campX || !campY) throw new InvalidPara..