클라우드 서비스를 활용한 여러가지 이미지 업로드 방식
·
웹 개발/JavaScript
백엔드 프로젝트를 진행하면서 이미지 파일처리에 관한 부분을 구현하게 되었다. 먼저 기본적인 개념으로 이미지는 request body 부분에 multipart/form-data 라는 형식으로 전송된다. 그러면 백엔드에서 일반적으로 multer라는 라이브러리를 사용해 이미지를 처리한다. multer는 body의 multipart/form-data형식의 데이터를 파싱해서 지정된 경로(dest 혹은 storage)에 파일을 업로드하고 해당 파일의 메타데이터를 req.file 이라는 필드에 저장해서 사용자가 처리할 수 있게 해준다. 처음 이 기능을 우선 구현해야겠다 생각하고 구현 방식을 찾아보았다.node 환경에서 multer는 많이 사용되기 때문에 어렵지 않게 구현 방법을 알 수 있었다. 현재 프로젝트의 스태틱..
[React] 리액트 훅에 대한 이해 - useState 활용해보기
·
웹 개발/React
이번에 진행한 토이프로젝트 내용을 좀 더 자세히 정리하려고 한다. 자바스크립트도 모르는 입장에서 바라본 리액트 훅은 정말 충격적인 기능이었다. 웹 개발에서 이렇게 함수형 프로그래밍이 가능한 줄 몰랐다. 근데 원래 자바스크립트가 웹에서 함수형 프로그래밍을 지원해주는 언어인걸로 알고있어서 내가 자바스크립트의 활용도에 놀란건지 정말 리액트 훅의 차별성을 이해하고 놀란건지는 모르겠다. 그동안은 웹 개발이라고 해 본 것이 너무 디테일하고 정적이라 재미가 없었는데, 리액트를 접하고나서 많은 재미를 느꼇다. 먼저 리액트가 왜 좋은가 왜 다들 사용하는 지 책을 공부해서 이해한 내용을 정리하자면 기존 리액트 버전 16.8 이전에는 사용자 컴포넌트는 클래스 기반의 컴포넌트였다. 잘 모르겠지만 클래스 기반의 컴포넌트는 재사..
[React] 토이 프로젝트 - 사용자 맞춤 음주 솔루션 제공 웹서비스
·
웹 개발/React
23.02.06 ~ 23.02.20 동안 진행한 리액트 토이 프로젝트에 대해 정리하려고 한다. 주제는 자유 주제였는데, 짧은 기간동안 구현할 수 있으면서 참신한 아이디어가 뭐가 있을까 생각을 하다가 갑자기 술과 관련한 아이디어가 떠올라서 관련한 주제를 잡게되었다. 사실 주제보다는 공부했던 React에 대해 더 집중을 하려고 한다. 광고는 아니고, 리액트에 대한 내용은 이 책으로 공부를 했다. 책이 약 한달전에 나온 책이라 최신 업데이트된 내용을 토대로 배워 볼 수 있어서 매우 좋은 것 같다. 특히나 리액트는 업데이트가 굉장히 빠르고, 버전별로 문법차이도 심한것으로 알고 있기 때문에 출시된 지 오래된 책으로 공부를 하면, 현재 버전의 리액트와 호환되지않을 수도 있다. 여기서는 간단하게 구현한 결과물을 정리..