17%
63,250원
38315682024-08-301368231안녕하세요 강사님 수강 전 문의 드립니다ㅎㅎ 제가 presignedUrl을 통해서 파일을 올리고 공부를 하고 있는데요 서버는 스프링부트로 구현했고 js에서 api 요청을 하는 방식으로 올바르게 접근하면 검증을 통해서 용량제한과 png,jpeg,jpg파일만 올릴수 있게 해뒀습니다. 그런데 만약 presigned url 생성 api를 알고 있는 사용자가 있다고 했을 때 포스트맨을 통해서 url을 발급받고 용량이 엄청 큰 파일이나 다른 타입의 파일을 올리는 것을 어떻게 막을 수 있을까요? 제가 로그인은 세션으로 구현해둬서 csrf토큰을 이용한다고 하더라도 로그인 후 csrf토큰값만 복사해서 포스트맨에서 토큰값과 함께 presignedurl을 받을수 있다고 생각해서 해결이 안될것 같다고 생각했거든요 헤더값으로 검증하는 것들로는 다 해결이 불가능할 것 같다는 생각이 들었어요 본인이 로그인한채로 토큰값을 확인후에 사용할 수 있을 것 같아서요 코드단에서는 해결이 불가능 한걸까요? Aws lambda를 이용해서 해결할 수 있다고 들었는데 제가 아직 lambda를 잘모르지만 파일이 올라오면 lambda에서 가로채서 파일 검증을 할 수 있다고 알고있거든요 이 방식으로 해결해야할까요? 사용량만큼만 과금된다고하기는 하는데 인스타그램처럼 대규모서비스를 하는 곳에서도 lambda를 이용해서 해결할까요? 혹시 이 내용을 강의를 통해서 해결할 수 있을지 궁금합니다.
- 도콩2024-07-171324364
만약 스프링부트와 관계형DB로 구현해도 위 강의와 같은 성능을 얻을 수 있을까요? 아니면 관계형 DB가 아닌 MongoDB를 사용하는 이유가 있을까요?
김시훈2024-07-17354299동일한 성능을 얻을 수 있습니다! 어떤 언어와 디비를 쓰셔도 동일한 효과를 얻을 수 있어요. 개념적으로는 같습니다. Node.js, MongoDB를 선택한 특별한 이유는 없습니다. 그냥 이미지 관리를 보여주기 위해 백엔드와 디비가 필요했을뿐입니다.
- ym Kim2023-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백엔드 가 스프링부트 혹은 다른 언어/프레임워크여도 도움 되실거에요 개념 자체는 동일하거든요. 한글로 글을 잘 쓰면 영어로도 글을 잘 쓰는것과 동일해요. 물론 영어 한국어 양쪽 언어의 기본적인 문범과 어휘를 알아야겠죠. 스프링은 질문자님께서 충분히 아실거라고 여겨지고요. 리엑트를 하실 정도이면 노드쪽도 충분히 이해가 되실거에요
- nameunskadms2022-04-17510755
안녕하세요 수강후기를 보니 강의 코드를 제공하지 않는 것으로 보이는데 맞을까요??
김시훈2022-04-18183571https://www.inflearn.com/questions/480635 질문 남겨주시면 깃헙 링크를 드리고 있습니다. 공개 리포지토리라서 수강 하지 않으신분들도 확인 할 수 있어요. 음 제가 따로 깃헙 리포지토리 링크를 표시 하지 않았던 이유는 강의 도중에 코드를 계속 업데이트 하거든요(간단하고 쉬운 접근 방법으로 이해를 돕고 점진적으로 현업에서 사용되는 방식으로 업데이트 하고 있습니다). 그래서 깃헙에는 최종버전만 나와 있어요. 생각보다 코드 요청하시는 분들이 많아서(디버깅을 위한 코드 대조) 앞으로의 강의는 중간중간에 세션별로 브렌치를 만들어서 코드를 보기 쉽게 공유할 예정입니다.
- dev.jun282021-11-20353032
파일 업로드는 드랍존 같은 라이브러리를 사용하시나요? 아니면 구현해서 사용하시나요
김시훈2021-11-20149673강의에서는 직접 구현합니다
- ygh2021-08-16284827
안녕하세요! 저는 자바 백엔드 개발을 주로 하는 개발자인데요. 강의 주제에 관심이 있어서 강의 커리큘럼을 봤는데, 자바스크립트에 대해 잘 모르고 frontend에 대한 지식, 특히 리액트에 대한 지식은 아예 없어서, 강의를 들을지 고민이 많이 되네요. 노드js로 구성된 백엔드 같은 경우에는 자바 스프링으로 대체해서 어찌어찌 들을 수는 있을거 같은데 frontend 쪽이 걱정이 되네요. 아무래도 js를 잘모르는 상태에서 해당 강의를 들으면 많이 어려울까요??
김시훈2021-08-16130813ygh님 안녕하세요 :) 기초적인 Javascript가 권장이긴 하지만 제 개인적인 생각으로는 웹개발 혹은 프로그래밍 경험이 있으시면 수강이 가능하십니다. 백엔드 프론트 둘다 배우게되지만 최대한 기초적인 부분들만 다루려고 했어요. 이미지 관리가 초점이라서요. 그래서 부담 없이 "아 Node.js, MongoDB, React가 이런거구나"라는 느낌을 받기에 좋다고 봐요. 그리고 만약 수강 하신다면 백엔드도 Node.js로 따라해보시길 권장합니다. 강의를 모두 수강해서 전체적인 그림을 이해하고 나시면 자바와 같은 다른 기술스택으로도 충분히 전환이 가능합니다.
- 굼벵이2021-07-26266718
프론트엔드 개발자인데 수강전 관심이 생겨서 질문드립니다. 현재 강의섹션에 몽고디비나 익스프레스등 백엔드 포지션의 강의비중이 큰데 실강의에서 프론트쪽에 강의 내용도 꽤 넓은지 궁금하네요.
김시훈2021-07-26125779안녕하세요 :) 리엑트는 대략 6시간 정도로 강의의 상당한 비중을 차지해요. 섹션 9. Pagination & Infinite Scroll이 좀 긴 섹션인데 여기서는 리엑트를 많이 다룹니다. 비중을 대략적으로 나누면 이렇게 나눌 수 있을듯 해요: 5/2 백엔드, 5/2 프론트, 5/1 인프라
안녕하세요~ presignedUrl 발급하실 때 파일 형태, 이미지 최대 사이즈 이런것들을 제한하실 수 있습니다! (제 기억으로 강의에서는 이미지 타입으로만 제한 해보고 사이즈로는 안했던거 같은데 이걸 추가하는건 어렵지 않을거에요) 그래서 로그인한 유저라면 누구나 presignedUrl 발급이 가능해지지만 용량이 큰 파일을 업로드 못하도록 차단할 수 있습니다. 애초에 용량이 너무 크면 발급 자체를 못하도록 막을 수 있어요. client에서 조작해서 작은 용량을 올릴거라는 가짜 메타데이터를 서버에 보내서 presignedUrl이 발급되었다고 하더라도 업로드 하는 과정에서 막히게 됩니다. 람다로 확인할 수도 있지만 이건 "완벽한" 해결책은 아니에요. 대부분 이렇게 해도 괜찮긴 하겠지만 불필요한 업로드가 발생되고 람다도 매번 돌아갈거고요. 강의에서 람다를 쓰는 목적은 이미지 업로드 후 읽기 최적화 용도로 쓰고 있어요. UI에 맞는 최적의 사이즈로 이미지를 가공함으로써 다운로드 속도를 극대화시켜줍니다. 강의에서 이미지 업로드, 다운로드 전반을 디테일하게 다루고 있습니다