[패스트캠퍼스 챌린지 30일차] Express - 사용자 이미지 업로드

Fast campus Logo

 

Fastcampus_Node.js 수강 목록

 

패스트캠퍼스 작심 30일 챌린지 30일차.

 

---

 

드디어 패스트캠퍼스 작심 30일 챌린지의 마지막날이다.

마지막 날인만큼 학습 내용에 대해 간략히 작성하고 챌린지를 통해 느낀점을 작성해야지!

 

Express - 파일 업로드 실습

 

오늘 학습한 내용은 그동안 Express로 사용자 정보를 조회하고 입력하는 API 기능을 수정하여,

사용자의 이미지를 업로드하는 기능을 배웠다.

먼저 업로드를 하기 위해 pug 파일에 Form을 추가한다.

form(action=`/user/${userId}/profile` method="post" enctype="multipart/form-data")
            input(type="file" name="profile")
            button UploadProfile Picture

코드에서 보는것과 같이 /user/사용자ID/profile이라는 URL로 파일을 전달할 수 있는 Form을 만들었다.

Form 안에는 file type의 Input과 Submit 해줄 버튼을 작성하였다.

 

그리고 Form 데이터를 전달받아 처리할 수 있도록 스크립트 파일에 아래와 같이 작성한다.

const upload = multer({dest:'uploads/'})

userRouter.post('/:id/profile', upload.single('profile'), (req, res) => {
    // User 객체에 이미지 이름 또는 경로를 저장하기
});

 

User 객체에 업로드한 후 다시 pug 파일에 이미지를 출력하도록 태그를 추가한다.

(아! _express에 '/uploads' 경로를 읽을 수 있게 Set을 먼저 해주자!)

img(src="파일경로")

 

NodeJS에서 파일을 업로드하는 기능을 구현해보았다.

Java와 HTML을 이용해 업로드를 하기 위해서는 조금 더 복잡한 소스코드를 작성해야 하는데,

NodeJS에서는 몇줄 안되는 코드가 파일을 업로드 해주고 화면에 출력해준다.

이미지 정보를 DB에 저장하는 것도 NodeJS를 통해 가능하니 앞으로 NodeJS를 통해 기능을 구현해봐야겠다.

 

---

 

스스로 매일매일 공부하기란 쉽지 않다.

특히 나는 더더욱 공부를 미루는 성향이 있다.

그래서 강제로 공부하기 위해 패스트캠퍼스 작심 30일 챌린지를 신청하였다.

 

하루에 최소 강의 1개씩 듣고 매일 블로그에 작성해야하는 부담이 있었다.

그래도 '한번 도전해보자'라는 마음을 먹고 30일동안 나름 열심히 하여 어느듯 마지막 날이 되었다.

회사 업무도 하고 학교 공부도 병행하며 챌린지까지 진행하는게 너무 힘들었지만,

이번 챌린지 덕분에 꾸준히 공부하고 꾸준히 블로그를 작성해야겠다는 목표가 생겼다.

 

비록 지금까지 학습한 강의 내용이 심도있게 진행하지 못하는 점에서 조금 아쉬움이 있지만

그래도 개발자로서 조금이나마 역량을 키우는데 분명 도움이 되고 있음을 느끼며,

패스트캠퍼스 작심 30일 챌린지 Bye~

 

---

 

[오늘의 학습통계]

패스트캠퍼스 작심 30일 챌린지 30일차 학습통계

 

---

- 패스트캠퍼스 URL : https://bit.ly/37BpXiC

* 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.