React로 Image Upload Component 만들기 1편
정말 오랜만에 글을 쓰는 것 같다. 사람들은 왜 굳이 미디움으로 쓰냐고 많은 말들을 하겠지만… 나는 주로 미디움에서 글을 읽고 영어로 나중에 글도 쓸 것이라고 생각이 들기 때문에 미디움을 선택하게 되었다.
프론트엔드를 계속해서 하다보면 이미지를 업로드하는 기능을 마주하게 된다. 요즘 같은 시대에 이미지를 업로드하고 가져오고 보여주는 기능 같은 경우는 굉장히 흔하고 기본적인 기능이기 때문에 파일을 업로드하는 과정을 리액트를 많이 써본 것을 떠나서 많이 해보지 않았다면 처음에 힘이 들 수 있다고 생각이 든다.
이번 글은 총 세개의 주제를 다룰 것이다. 그리고 위에서 1편이라고 제목에 붙인 것처럼 몇개의 개별적은 글로 나뉘어질 것이다.
다루게되는 주제는 다음과 같다.
- 그냥 생 자바스크립트에서 이미지를 업로드하는 방법
- 이미지를 업로드하는 서버의 api 엔드포인트를 만들어서 백엔드에서 이미지를 어떻게 업로드하고 업로드한 이미지를 프론트로 보내주는지
- 리액트로 Image Upload Component 만들기
자바스크립트로 이미지를 업로드하는 방법
먼저 리액트를 사용하기 전에 HTML에서 Script를 이용해서 서버로 이미지를 업로드해볼 것이다. 그러기 위해서는 서버를 먼저 만들고 이미지를 업로드하는 api를 만들어둬야 한다.
백엔드 서버는 다양한 언어로 만들 수 있다. 우리는 가장 간단한 nodejs nestjs로 서버를 만들어볼거고 그 서버를 ec2위에 올려도 되겠지만 local에서 실행시키고 이 local에서 작동하고 있는 서버를 이용해서 이미지를 업로드할 것이다.
Nest.js를 이용해서 서버 만들고 이미지 업로드하는 api 엔드포인트 만들기
이미지를 업로드하는 api를 만들기 전에는 몇가지 지식들이 수반되어야 한다. 파일을 어떤식으로 한 곳에서 다른 곳으로 보내는지 알고 있어야하며 그에 따른 파일, 파일의 형식, 인코딩같은 용어들에 대해서 들어봤어야 한다.
파일이란 특정 정보의 집합, 단위, 묶음이라고 표현할 수 있을 것이다.
파일의 형식이란 jpeg, png, exe등 파일을 인코딩한 방식을 얘기하는데 인코딩이란 파일을 해석하는 방식이라고 이해하면 된다. 결국 컴퓨터의 데이터는 0과 1이 저장되어서 만들어지게 되는데 이 01을 어떤식으로 묶어서 데이터로 해석할 것이냐 하는 것이라고 생각하면 된다.
이제 절차에 대해서 얘기할 때다. 다음과 같은 과정을 거친다고 생각해보자.
- 이미지가 들어온다.
- 이미지지를 확인하고 원격 저장소에 저장한다.
- 프론트에는 파일이 잘 저장되었다고 말해준다.(이때 대부분의 UI상 저장된 사진파일의 주소를 프론트로 보통 보내준다.)
위의 절차를 잘 읽어보면 원격 저장소는 어디일까 생각하게 된다. 데이터베이스를 기본적으로 떠올릴 것이다! 좋은 생각이다. 하지만 mysql같은 데이터베이스에서는 사진 데이터를 저장하는 것을 지원하지 않는다. 요즘은 그래서 보통 aws같은 클라우드 서비스의 원격 저장소에 저장한다. aws에서도 S3라고 하는 서비스를 주로 이용한다.
그럼 우리의 Nest.js서버는 다음의 기능을 해야한다.
- 이미지를 클라이언트로부터 받는다.
- 이미지를 S3에 저장한다.
하지만 저장하고 저장한 것을 서버도 기억을 해야한다. 그래서 DB에 이미지를 저장하고 난 값을 저장해야한다. 따라서 다음의 마지막 기능이 추가 된다.
- DB에 S3에 저장하고 난뒤의 정보들을 저장한다(ex, 사진의 퍼블릭 주소 또는 id값)
그럼 요구사항은 정해졌다. 우리의 서버는 총 세개의 기능을 할 것이다.
- 이미지를 클라이언트로부터 받는다.
- AWS S3에 이미지를 저장할 것이다.
- DB에 S3에 저장하고 난 뒤의 정보들을 저장하고 이 정보를 프론트에 응답으로 보내준다.
그럼 다음 편에서 우리는 NestJS를 간단하게 로컬에 설치해서 실행시켜보고 이미지를 받아들이는 엔드포인트를 짜볼 것이다.