본문 바로가기

Development/TIL

 (56)
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를 이용해 업..
multer 이번 클론 코딩에서 내가 맡은 파트는 게시물 생성, 상세조회, 수정, 삭제이다. 기본적인 CRUD이지만 이번엔 이미지 업로드 기능도 추가로 구현해야 한다. 그래서 다른 조에 multer 사용 경험이 있는 분께 지식 동냥을 해가며 습득하고 있었는데 소통 오류로 다른 팀원이 먼저 기능 구현을 하여 깃헙의 프로젝트 repo에 pull request를 해버렸다..... 내가 직접 구현해보고 싶었는데 많이 아쉽다. 하지만 현재 구현되어 있는 기능은 single, 즉 한 장의 이미지 파일만 업로드가 가능하기에 내가multiple (다수의 이미지 파일 업로드) 기능을 적용해보기로 했다. multer란? node.js에서 express와 함께 사용되는 미들웨어 중 하나로 파일 업로드를 처리하기 위한 라이브러리이다. m..
웹 소켓 (feat. socket.io) 오늘부터 주특기 프로젝트 클론코딩 시작이다. 우리 조는 페이스북 클론 코딩을 선택했는데 이번에 웹 소켓과 멀터를 적용해보기로 했다. 웹 소켓은 클라이언트와 서버간에 양방향 통신을 제공하기 위한 개념이다. node.js 심화주차에서 강의를 듣기는 했지만 한번 훑고 지나간 개념이라 머리에 남아있지않다. 그래서 다시 한번 정리해보려고 한다. TCP (Transmission Control Protocol) 서버와 클라이언트간에 신뢰성 있는 데이터 송수신을 위해 만들어진 연결 지향성 프로토콜이다. 데이터를 나눠 보낼 수 있으며 받는 쪽에서 재조립한다. 만약 누락된 데이터가 존재하면 다시 요청해서 받아와 완전한 데이터를 만든다. 데이터의 순서가 바뀌지 않아 안정적이고 신뢰성이 높다. UDP보다 전송 속도가 느리고 ..
주특기 토이프로젝트 회고 주특기 토이프로젝트 발표가 끝났다. 늘 그렇지만 결과물은 항상 아쉽다. 기획 단계부터 배포까지 되돌아보려고 한다. 기획 단계에 많은 리소스를 투자해야 좋은 프로젝트를 만들 수 있다고 한다. 이번 프로젝트에서는 그 부분이 조금 아쉽다. 1.API 명세 초기에 API명세를 탄탄하게 작성해 놓지 못한 것이 아쉽다. 역할을 나누고 코드를 작성하다보니 변경되는 부분이 있었는데 API 명세서에 업데이트가 되지 않아 중간에 소통 오류가 발생했다. 그것은 곧 리소스 낭비와 직결되기 때문에 초기에 와이어프레임을 최대한 상세하고 정확하게 작성하고 그에 따라 API 명세서를 자세하게 만들어두어야 리소스 낭비를 최소화할 수 있을 것 같다. 그리고 만약 중간에 수정이 필요하다면 동기화를 신속하고 정확하게 해야한다. 2. gro..
npm run build (feat. CORS 에러 패배) 어제 오전부터 이어진 CORS 에러와의 싸움은 결국 패배로 끝이났다..... 11일 목요일 저녁엔 완성된 프로젝트 발표를 해야해서 시간이 충분하지 않은 상황이었다. 그래서 궁여지책으로 나온 방법이 FE 파일과 BE 파일을 합쳐서 로컬 환경에서 테스트하며 작업을 하는 것이다. 그렇게 되면 배포도 FE와 BE를 따로 하지 않고 한꺼번에 해야할 것이다. 아무튼 파일을 효과적으로 결합하기 위해 npm에 있는 리액트 배포 버전을 만드는 명령어를 사용했다. npm run build 터미널에서 위의 명령어를 사용하면 프로젝트 폴더에 build 폴더가 생성되고 그 안에 리액트 배포를 위해 필요한 파일들이 들어가 있는 것이 확인된다. 쉽게말해 배포를 위해 필요한 파일들을 build 폴더에 정리를 해주고 소스코드 공백들을..
CORS를 만나다(feat. 404 NOT FOUND) 지난 주말 WIL 키워드가 CORS였는데 마치 짠 것처럼 오늘 관련 이슈가 터졌다. 에러 메세지 // error access to XMLHttpRequest at 'http://43.201.106.25/api/signup' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. CORS 개념 정리 WIL_CORS CORS가 무엇인가? 이번주 WIL의 키워드가 CORS이다. 처음들어봐서 ..
dotenv (환경변수 관리) 깃허브에 프로젝트를 업로드할 때 .gitignore 파일에 업로드를 제외할 파일 목록을 리스트업하여 관리한다. 하지만 그렇게해도 코드들에 노출되는 개인 정보들이 있을 수 있다. 예를 들면 Token을 검증하는데 사용하는 secret_key라던지 사용중인 DB의 엔드포인트, 유저, 패스워드 같은 정보들 말이다. 지금까지는 아무 생각없이 업로드를 해왔는데 노출이 되면 자칫 치명적인 타격을 입을 수 있다. 그래서 dotenv라는 라이브러리를 사용한다. 오늘은 dotenv 사용법을 정리해보려고 한다. dotenv 설치 npm을 이용하여 dotenv를 설치한다. $ npm i dotenv .env 파일 생성 dotenv 설치 후 별도 설정을 하지 않으면 프로젝트의 루트 디렉토리에 위치한 .env 파일로 부터 환경..

티스토리툴바