본문 바로가기

Development

 (135)
클론 코딩 프로젝트 회고 오늘 클론 코딩 프로젝트를 발표하고 종료되었다. 토이 프로젝트를 한 차례 진행한 경험이 있어서인지 전체적인 진행에 지난번과 같은 아쉬움은 없었다. 프로젝트 발표에서 기술 매니저님의 피드백 // 게시물 작성 createPost = async (req, res) => { try { const { user_id } = res.locals.user; const { content } = req.body; const img_urls = req.img_url; if (!content) { return res.status(412).json({ errorMessage: '게시글 내용을 입력해주세요.' }); } // content만 입력할 경우 if (img_urls === undefined) { const create..
AWS CloudFront (feat. Edge Location) AWS의 CloudFront는 전역 컨텐츠 전송 네트워크이다. 전 세계에 위치한 Edge Location(엣지 로케이션)을 사용하여 사용자에게 컨텐츠를 더 빠르게 전달하고, 웹 어플리케이션의 성능을 향상시키는데 도움을 준다. CDN(Content Delivery Network) 전 세계에 분산된 서버 네트워크로 구성된 시스템이다. 이 네트워크는 콘텐츠를 최종 사용자에게 더 빠르게 전달하기 위해 사용된다. 컨텐츠를 지리적으로 분산된 서버에 캐싱하고 사용자가 해당 컨텐츠에 접근할 때 최적의 경로를 통해 제공한다. 캐싱이란? 데이터나 컨텐츠를 임시 저장하여 이후에 동일한 요청이 있을 때 더 빠르게 제공하는 기술 또는 메커니즘을 말한다. Edge Location(엣지 로케이션) 엣지로케이션은 AWS의 CDN 서..
S3와 cloud front 속도 비교 현재 서버는 1차적인 기능 구현과 서버 배포까지 완료된 상황이다. 그래서 FE에서 테스트를 하며 구현을 진행하고 있는데 이미지 업로드와 조회 속도가 느리다는 피드백이 있었다. 그래서 어떻게 개선해야하나 고민하고 있는데 마침 중간 멘토링에 기술 매니저님이 말씀해주신 Cloud Front가 생각났다. 그래서 Cloud Front에 대해 알아보고 있는데 github commit을 보니 다른 팀원이 이미 적용해 놓았다. 그래서 S3만 사용했을 때와 Cloud Front까지 적용해보았을 때 이미지 업로드 속도 차이를 확인해보았다. 테스트에 사용한 이미지 파일의 용량은 158 KB이다. S3만 사용했을 때는 아래와 같이 571ms로 약 0.5초 정도 나온다. Cloud Front를 적용했을 때는 아래와 같이 354..
type error 문제 어제 저녁 완성한 코드를 오늘 아침 테스트하다가 몇가지 오류가 발생했다. 그중에 해결하는데 가장 많은 시간이 걸렸던 오류가 type error였다. 게시글 수정 기능중에 게시물에 등록된 이미지 파일중 일부를 삭제하는 코드가 제대로 동작하지 않았다. 삭제할 이미지 파일의 id를 배열 형태로 받아 db에서 해당 id를 기준으로 데이터를 삭제해주는 로직이다. 현재 우리 프로젝트는 3 layered achitecture pattern을 적용중인데 service 계층에서 자꾸 type error가 발생했다. controller 계층 const removeImgIdArray = req.body.removeImgId; // 삭제할 이미지 url_id의 배열 // 이미지 파일 삭제 if (removeImgIdAr..
multer multiple 적용 현재 진행중인 페이스북 클론코딩에서 게시물 작성을 할 때 이미지 파일을 single이 아닌 multilple로 업로드 할 수 있도록 코드를 수정했다. 먼저 라우터 아래와 같이 설정해 주었다. router.post('/', authMiddleware, uploadImage.array('img', 4), postsController.createPost); multer 미들웨어에 이미지 파일 업로드를 uploadImage라는 상수로 선언했다. 그리고 그 뒤에 single이 아닌 array로 입력해주었다. 괄호 안의 첫번째 인자는 클라이언트에서 이미지 파일을 넘겨줄 때 사용하는 키값이다. 그리고 뒤의 숫자는 업로드를 허용하는 이미지 파일의 개수이다. 위와 같이 설정해주면 서버쪽에서 req.files를 이용해 업..
WIL_토이프로젝트 회고 주특기 토이프로젝트 회고 주특기 토이프로젝트 회고 주특기 토이프로젝트 발표가 끝났다. 늘 그렇지만 결과물은 항상 아쉽다. 기획 단계부터 배포까지 되돌아보려고 한다. 기획 단계에 많은 리소스를 투자해야 좋은 프로젝트를 만들 수 있다고 한 redjun89.tistory.com 이번주 회고 지난 주특기 토이 프로젝트는 FE 인원이 상대적으로 적어서 개발 스코프를 BE 인원에 비해 작게 설정했다. 그래서 기본적인 CRUD 기능만 구현하는 것에 그쳤지만 협업을 진행하며 느낀 점이 많았다. 이번에 진행하는 클론 코딩과 앞으로 진행하게 될 메인 프로젝트에서는 아쉬웠던 부분을 보완하여 진행하면 더욱 발전적인 결과물이 나올 것이라 생각한다. 다음주 목표 이번 클론코딩에서 우리 조는 페이스북을 클론 코딩하는데 기술 매니저..
multer 이번 클론 코딩에서 내가 맡은 파트는 게시물 생성, 상세조회, 수정, 삭제이다. 기본적인 CRUD이지만 이번엔 이미지 업로드 기능도 추가로 구현해야 한다. 그래서 다른 조에 multer 사용 경험이 있는 분께 지식 동냥을 해가며 습득하고 있었는데 소통 오류로 다른 팀원이 먼저 기능 구현을 하여 깃헙의 프로젝트 repo에 pull request를 해버렸다..... 내가 직접 구현해보고 싶었는데 많이 아쉽다. 하지만 현재 구현되어 있는 기능은 single, 즉 한 장의 이미지 파일만 업로드가 가능하기에 내가multiple (다수의 이미지 파일 업로드) 기능을 적용해보기로 했다. multer란? node.js에서 express와 함께 사용되는 미들웨어 중 하나로 파일 업로드를 처리하기 위한 라이브러리이다. m..
웹 소켓 (feat. socket.io) 오늘부터 주특기 프로젝트 클론코딩 시작이다. 우리 조는 페이스북 클론 코딩을 선택했는데 이번에 웹 소켓과 멀터를 적용해보기로 했다. 웹 소켓은 클라이언트와 서버간에 양방향 통신을 제공하기 위한 개념이다. node.js 심화주차에서 강의를 듣기는 했지만 한번 훑고 지나간 개념이라 머리에 남아있지않다. 그래서 다시 한번 정리해보려고 한다. TCP (Transmission Control Protocol) 서버와 클라이언트간에 신뢰성 있는 데이터 송수신을 위해 만들어진 연결 지향성 프로토콜이다. 데이터를 나눠 보낼 수 있으며 받는 쪽에서 재조립한다. 만약 누락된 데이터가 존재하면 다시 요청해서 받아와 완전한 데이터를 만든다. 데이터의 순서가 바뀌지 않아 안정적이고 신뢰성이 높다. UDP보다 전송 속도가 느리고 ..

티스토리툴바