Thumbnail
BEST
개발 · 프로그래밍풀스택

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)대시보드

(4.6)
47개의 수강평 ∙ 596명의 수강생
77,000원

월 15,400원

5개월 할부 시
지식공유자: 김시훈
총 93개 수업 (14시간 12분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가공유
  • ym Kim 프로필ym Kim
    2023-11-061068357

    현재 mongoDB 기초부터 실무까지(feat. Node.js) 이 강의와 지금 강의를 두고 어느 것을 선택해야 할지 고민 중인데 어떤 차이가 있고, 어떤 경우에 어떠한 강의를 들어야하는지 설명해주실 수 있나요?

    김시훈
    김시훈
    김시훈
    2023-11-07294213

    두 강의가 다루는 내용은 완전 다릅니다! 몽고디비 강의는 제목 그대로 몽고디비를 중점으로 다룹니다. 디비 관련 기초적인 지식부터 설계 관련 중고급 지식까지 디비 전반의 내용을 다루는걸 목표로 하고 있어요. 그에 반면 이미지 관리는 static file 그 중에서도 이미지 파일 관리하는 내용을 중점으로 다룹니다. 이미지를 관리하는 과정에서 aws lambda를 이용한 이미지 리사이징, aws s3에 이미지 저장, CDN 활용해서 캐싱하기, presigned url 이용해서 client에서 S3로 바로 저장하기, 데이터베이스로 이미지 key 관리 등 다양한 요소들을 배우게 됩니다. 즉, 이미지 관리 강의에서는 데이터베이스가 필요하기 때문에 몽고디비를 사용하긴 하지만 몽고디비의 기초적인, 강의에서 필요한 수준으로만 다루고 있습니다. 상세페이지와 커리큘럼을 보시면 차이점을 더 명확하게 확인 가능하실겁니다! 아 그리고 두 강의 모두 node.js를 사용하기도 합니다만 둘다 node.js 강의는 아닙니다. 각 강의 내용을 표현하기 위한 수단으로 node.js를 사용 했을 뿐입니다. 즉, 습득하신 내용을 다른 언어로도 대부분 재구현 가능하다고 생각합니다.

  • 보로미오 프로필보로미오
    2023-10-201052776

    강사님 안녕하세요. 1. presignedurl 으로 이미지 올리때, 유저가 전송(submit)하지 않고 브라우저에서 이탈하면, presignedurl을 통해서 업로드된 이미지를 삭제하는 방법도 강의에서 배울 수 있을까요? 2. 이미지 파일 명이 중복되면 덮어쓰기 되는 것 같은데, 이부분 해결방법 배울 수 있을까요? 3. s3 데이터 용량에 따라 과금이 달라지는 것으로 알고 있는데, 예전 이미지들(잘 안쓰는 이미지)은 과금구간을 저렴하게 저장하는 방법이 있는지, 그리고 강의에서 배울 수 있는지 궁금합니다.

    김시훈
    김시훈
    김시훈
    2023-10-20290975

    안녕하세요~ 1. 이 부분을 직접 다루지는 않아요! 하지만 강의를 보시고 나면 이 부분은 충분히 직접 구현 가능하다고 생각합니다. 이탈여부 관련 데이터만 알 수 있으면 삭제할 수 있으니깐요. presginedUrl 발급할 때 이미지 (uuid)를 같이 발급하게 되는데요. presignedUrl 발급시에 디비나 캐시(레디스)에 uuid와 발급시간(createdAt)을 임시 저장을 해줍니다. 유저가 실제로 이미지를 등록하고 submit까지 했다면 디비에 전에 발급했던 이미지 uuid가 저장될거에요. 이 때 디비/캐시에 저장했던 임시 uuid를 삭제해줍니다. 만약 submit까지 가지 않았다면 디비/캐시에 저장되어 있던 "오래된"(15분 이상된) uuid들은 orphaned image일 가능성이 높겠죠(혹은 presignedUrl은 발급했으나 submit은 커녕 이미지 업로드조차 안했을 수도 있고요). 그러면 해당 uuid들을 이용해서 S3 버킷에 API 요청을 보내면 됩니다! 해당 아이디들에 해당하는 이미지 파일들이 있으면 모두 삭제해달라고요! ㅎㅎ 설명해보고 나니 이 부분이 강의에 포함했으면 좋았겠네요! 나중에 리뉴얼 할 때 추가하는거 검토해볼게요! 2. 강의에서는 이미지마다 새로운 고유 아이디를 생성해서 저장합니다! 파일명이 중복될 가능성도 있고 무엇보다 파일명이 같다고 해서 같은 이미지라는 보장이 없거든요 3. 오 좋은 질문입니다! 크게 3가지 구간이 있지만 강의에서는 아쉽게도 따로 다루고 있지 않습니다. S3가 워낙 저렴하기도 하고 "더" 저렴한 공간에 이미지를 분리시키는 것보다 이미지 리사이징으로 각각 이미지 용량을 최적화하는게 여러면에서 훨씬 중요하거든요! (리사이징 >>> S3 과금구간 최적화) https://aws.amazon.com/s3/pricing/ 여기에 보면 기가바이트당 저장 비용이 나와 있습니다. Frequent, infrequent, archived 이렇게 3가지로 나눠집니다. archived의 경우 이미지를 불러오는데 매우 오래 걸려서 이미지 용도로는 적합하지 않아요. 말 그대로 "archived" 용도인셈이에요. 상황에 따라 frequent, infrequent로 구분할 수는 있을듯해요. 그런데 infrequent 사용으로 유의미한 가격 절감 하는데까지는 꽤 나중일 수도 있어요! 이런 저장소 최적화보다 이미지 사이즈 최적화가 훨씬 중요해요. 비용뿐만 아니라 당장 로딩이 훨씬 빨라지기 때문에 장점이 바로 들어나죠. 예를 들어 DSR로 찍은 혹은 포토샵으로 작업한 초고사양 이미지들이 올라오는데 스마트폰 썸네일로 보여준다? 그러면 리사이징 된 사진을 저장하게 되면 용량이 수백분의 일까지 작아질 수도 있습니다. 즉 리사이징으로 줄어든 용량은 적게는 수십에서 많으면 수백배가 될 수도 있습니다. 그에 반면 infrequent access로 해서 얻을 수 있는 비용 이점은 많아야 두배 정도이죠. 그래서 강의에서는 상대적으로 더 중요하면서 구현하기에 어려운 리사이징 부분을 상세하게 다루고 있습니다. 그리고 강의에서는 이미지 원본(raw)도 저장을 하지만 용량때문에 발생하는 비용이 걱정되시면 리사이징 완료직후 raw 이미지들은 삭제하시거나 archived s3로 옮기시면 될듯합니다! 이 부분도 리뉴얼 때 추가하는거 고려핼볼게요!

  • 이투리 프로필이투리
    2023-07-12938213

    저는 현재 네이버클라우드플랫폼으로 node.js와 vue3,mysql로 웹을 운영하고 있습니다. 현재 이미지가 1000개 정도 되는데, 1년안으로 1만개가 넘을거 같아서 미리 고민합니다. 네이버에서 아마존으로 클라우드를 바꾸는건 문제가 되지 않지만, vue3에서 리액트로는 바꾸기 힘들거 같습니다. vue3사용자인제가 이 강의를 들어도 이미지 처리에 도움이 될까요?

    김시훈
    김시훈
    김시훈
    2023-07-14272597

    안녕하세요~ 충분히 도움 많이 되실거라고 생각합니다. 리엑트를 사용하긴 했지만 다른 프레임워크를 사용하셔도 도움이 되도록 강의를 구성했어요. 리엑트 부분은 가볍게 따라가시고 AWS S3, lambda, resizing 이 부분들을 중점으로 보시면 좋을듯 합니다!

  • 프린이 프로필프린이
    2023-05-09866939

    안녕하세요, 2가지 문의 드립니다. #1. 코드에러관련 강좌가 마지막 업데이트가 2년 전이라, 현재시점(2023)에서 강의에서 확인되는 코드를 그대로 사용해도, 에러가 없을 지, 추가적으로 업데이트 해야하는 코드가 있는지 문의 드립니다. #2. 강의시청하면서 코드작성관련 수강평에서 영상에서 확인되는 코드랑, 실제 사용자가 작업한 코드가 일치하지 않는 경우가 있다는 글이 있는데요, 실제 코드를 작성 할 경우, 강의 수강시 제공받을 수 있는 깃헙 레포를 대조비교하면서 강의 수강하면 될런지요?

    김시훈
    김시훈
    김시훈
    2023-05-12259355

    안녕하세요 음 개선해야할점들이 분명 있습니다. 새로운 강의도 출시하고 전체적으로 업데이트도 하고 싶은데 아직 시간적 여유가 없어서 못하고 있네요.. 코드는 모두 깃헙에 오픈되어 있고요. 음 매끄럽지는 않겠지만 그래도 강의에서 전달하고자 하는 핵심 내용들은 배워가실 수 있다고 생각합니다. 백엔드: https://github.com/hoffnung8493/image-tutorial 프론트: https://github.com/hoffnung8493/image-tutorial-frontend

  • 채구륙 프로필채구륙
    2023-03-27826917

    혹시 배포까지는 안다루시나요? 서비스하나를 온전히 제힘으로 구축하고 싶은데 배포까지 알려주시는지 궁금합니다.

    김시훈
    김시훈
    김시훈
    2023-03-28251277

    아쉽게도 이번 강의에서는 제외했어요! 몽고디비 강의에는 배포가 포함되어 있긴 하지만 백엔드만 다루고 있어요. 그리고 다양한 배포 방법들이 있는데 저는 요즘 fly.io를 사용하고 있어요. 아직 서울 리전 지원이 없어서 아쉽긴 한데 제가 써본 것중에 DX점에서 가장 좋은 것 같아요. 찾아보시면 쉽게 해볼 수 있을 것 같아요. 비슷하게 쉬운 방법으로는 heroku도 있긴 합니다

  • 한광훈 프로필한광훈
    2022-09-19655347

    안녕하세요. 수강 전 문의 드립니다. 업로드 된 파일들 다운로드하는 부분도 포함되어 있나요? (예를 들어 업로드 파일들에서 선택해서 다운로드 버튼 클릭하면, 다운로드 되는 기능) 만약 없다면, 강의 수강 후 개발 할 수 있는 힌트들을 강좌를 통해 얻을 수 있나요? (없다면 힌트나 방법 등 코멘트 남겨주실 수 있나요?)

    김시훈
    김시훈
    김시훈
    2022-09-20213730

    안녕하세요~ 파일 다운로드 자체는 이미지 테그를 통한 이미지 다운로드만 다루고 있어요. 다만 이미지와 비슷하게 다른 파일(문서, 영상 등)을 업로드 해서 관리하는건 비슷한 점들이 많을거에요. 만약 관리하는 파일이 영상이라면 적정 해상도로 리사이징을 해야되는데요. 강의에서 다루는 이미지 리사이징과 개념상 비슷합니다. 리사이징에 사용되는 모듈만 영상용으로 찾아보면 될거에요. 그리고 다른 파일형식 다운 받는 부분도 강의 수강 후 구글링을 조금만 해보시면 방법을 금방 찾을 수 있을거라고 봐요. 파일 다운로드 자체가 어려운 경우는 드물거에요. 이걸 확장성 있게 최소 비용으로 다운로드 가능하도록 파일들을 관리하는게 핵심이에요. S3에 원본 저장, 압축/리사이징(serverless를 이용해서 서버 부하 절감), CDN에 캐싱처리 등. 이런 내용들을 모두 직/간접적으로 다른 파일 업로드/다운로드에 도움이 될거에요. 이미지를 다룬 이유는 비교적 많이 사용되고 성능에 큰 영향을 주기에 최적화의 중요성을 보여줄 수 있었기 때문이에요

  • 즐거운 갈매기 프로필즐거운 갈매기
    2022-08-28636247

    안녕하세요 현재 이미지 관련해서 프론트에서 s3로 업로드하고 백엔드에서 관계형db에 넣어주고 이미지url을 가지고 페이지에 뿌려주려고 하는 프로젝트를 진행중에 있는데 node.js가 아닌 springboot로 하고있는데 이 수업으로 들어도 괜찮을까요? springboot, react, js로 작업중입니다

    김시훈
    김시훈
    김시훈
    2022-08-29209046

    백엔드 가 스프링부트 혹은 다른 언어/프레임워크여도 도움 되실거에요 개념 자체는 동일하거든요. 한글로 글을 잘 쓰면 영어로도 글을 잘 쓰는것과 동일해요. 물론 영어 한국어 양쪽 언어의 기본적인 문범과 어휘를 알아야겠죠. 스프링은 질문자님께서 충분히 아실거라고 여겨지고요. 리엑트를 하실 정도이면 노드쪽도 충분히 이해가 되실거에요

  • nameunskadms 프로필nameunskadms
    2022-04-17510755

    안녕하세요 수강후기를 보니 강의 코드를 제공하지 않는 것으로 보이는데 맞을까요??

    김시훈
    김시훈
    김시훈
    2022-04-18183571

    https://www.inflearn.com/questions/480635 질문 남겨주시면 깃헙 링크를 드리고 있습니다. 공개 리포지토리라서 수강 하지 않으신분들도 확인 할 수 있어요. 음 제가 따로 깃헙 리포지토리 링크를 표시 하지 않았던 이유는 강의 도중에 코드를 계속 업데이트 하거든요(간단하고 쉬운 접근 방법으로 이해를 돕고 점진적으로 현업에서 사용되는 방식으로 업데이트 하고 있습니다). 그래서 깃헙에는 최종버전만 나와 있어요. 생각보다 코드 요청하시는 분들이 많아서(디버깅을 위한 코드 대조) 앞으로의 강의는 중간중간에 세션별로 브렌치를 만들어서 코드를 보기 쉽게 공유할 예정입니다.

  • dev.jun28 프로필dev.jun28
    2021-11-20353032

    파일 업로드는 드랍존 같은 라이브러리를 사용하시나요? 아니면 구현해서 사용하시나요

    김시훈
    김시훈
    김시훈
    2021-11-20149673

    강의에서는 직접 구현합니다

  • ygh 프로필ygh
    2021-08-16284827

    안녕하세요! 저는 자바 백엔드 개발을 주로 하는 개발자인데요. 강의 주제에 관심이 있어서 강의 커리큘럼을 봤는데, 자바스크립트에 대해 잘 모르고 frontend에 대한 지식, 특히 리액트에 대한 지식은 아예 없어서, 강의를 들을지 고민이 많이 되네요. 노드js로 구성된 백엔드 같은 경우에는 자바 스프링으로 대체해서 어찌어찌 들을 수는 있을거 같은데 frontend 쪽이 걱정이 되네요. 아무래도 js를 잘모르는 상태에서 해당 강의를 들으면 많이 어려울까요??

    김시훈
    김시훈
    김시훈
    2021-08-16130813

    ygh님 안녕하세요 :) 기초적인 Javascript가 권장이긴 하지만 제 개인적인 생각으로는 웹개발 혹은 프로그래밍 경험이 있으시면 수강이 가능하십니다. 백엔드 프론트 둘다 배우게되지만 최대한 기초적인 부분들만 다루려고 했어요. 이미지 관리가 초점이라서요. 그래서 부담 없이 "아 Node.js, MongoDB, React가 이런거구나"라는 느낌을 받기에 좋다고 봐요. 그리고 만약 수강 하신다면 백엔드도 Node.js로 따라해보시길 권장합니다. 강의를 모두 수강해서 전체적인 그림을 이해하고 나시면 자바와 같은 다른 기술스택으로도 충분히 전환이 가능합니다.

  • 굼벵이 프로필굼벵이
    2021-07-26266718

    프론트엔드 개발자인데 수강전 관심이 생겨서 질문드립니다. 현재 강의섹션에 몽고디비나 익스프레스등 백엔드 포지션의 강의비중이 큰데 실강의에서 프론트쪽에 강의 내용도 꽤 넓은지 궁금하네요.

    김시훈
    김시훈
    김시훈
    2021-07-26125779

    안녕하세요 :) 리엑트는 대략 6시간 정도로 강의의 상당한 비중을 차지해요. 섹션 9. Pagination & Infinite Scroll이 좀 긴 섹션인데 여기서는 리엑트를 많이 다룹니다. 비중을 대략적으로 나누면 이렇게 나눌 수 있을듯 해요: 5/2 백엔드, 5/2 프론트, 5/1 인프라