#s3

질문 10
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

9일 전 · 민우 님의 새로운 답변

신입 백엔드 개발자 해외취업

안녕하세요~ 이번 2월에 졸업하고 백엔드로 취준하고 있는 26세 여자입니다 직군은 개발자 백엔드이고 한국 보다는 외국에서 취업을 하고 싶습니다(유럽이나 영어권) 현재 프로젝트는 2개 정도가 있고 docker, aws, s3, jwt, redis, spring boot 정도 기술이 됩니다. 코테는 계속 준비 중이구요 요즘 해외 취업 어떤지 알고 싶습니다. 꼭 한국에서 경력을 쌓고 가야할까요? 첫 직장을 외국에서 하고 싶어요ㅠㅠ

개발자

#해외취업

#해외

#백엔드

#신입

답변 1

댓글 0

조회 70

4달 전 · @SoftyChoco 님의 새로운 답변

게시글 이미지 업로드를 구현하는데 궁금한 점이 있습니다.

velog를 참고하여 Spring + Vue를 이용하여 마크 다운 기반 게시글을 구현하고 있습니다.. 글을 쓰는 도중에 이미지를 올리면 s3에서 url를 반환하여, 이것을 통째로 Post 테이블 Content 필드에 저장하여 순서를 보장하는 식으로 진행하고 있습니다. 로직 흐름은 이렇습니다. 1. 사용자가 이미지를 올린다면, 클라이언트에서 글쓰기 버튼을 눌렀을 때 미리 만들어 놓은 UUID와 이미지를 서버로 보낸다. 2. 서버에서는 s3객체에 임시 저장 여부를 확인하는 isTemp를 태그를 넣어서 서버를 걸쳐서 S3에 쏜다. 3. S3에서 객체를 찾아서 key값과 클라이언트에서 보낸 uuid를 Image 테이블에 저장해서 Post와 간접적으로 연관 관계를 맺는다. 4. 글쓰기를 누른다면 내용과 UUID를 보내서 UUID를 Post의 primary key로 사용하고, UUID 기반으로 Image 테이블에서 key들을 갖고 와서 S3 객체의 isTemp 태그를 false로 바꾼다. 4-1 . 뒤로 가기나 임시 저장을 눌렀을 때는 isTemp를 true로 설정하고 저장한다. 5. 30일이 지날 때마다, Post에 있는 isTemp를 통해 임시 여부를 확인하여 임시 저장된 글을 삭제하고, S3에서는 수명 주기를 설정하여 태그를 기반으로 true인 이미지들을 삭제한다. 객체를 삭제하는 이유는 불필요한 데이터가 공간을 차지하는 것이 별로라고 판단했습니다. UUID는 글을 다 쓰기도 전에 서버로 쏘기 때문에, 어떤 게시글에서 쓰였는지 확인하기 위해서 사용했습니다. 성능이나 용량 면에서 안 좋다고 하지만, 이는 데이터를 넣어 놓고 조회를 하여 성능을 확인하였고 현재 프로젝트 크기를 생각했을 때 접목해도 상관없을 것 같아 넣었습니다. 하지만 이런 식으로 진행하니, 만약 사용자가 중간에 이미지 링크를 삭제한다면? 이라는 시나리오를 생각했을 때 이를 대처할 방도가 떠오르지 않습니다. 다른 분들은 어떤 식으로 처리했는지, 제가 너무 어렵게 생각하고 짜는지 궁금합니다.

개발자

#spring-boot

#s3

#게시글

답변 1

댓글 0

조회 63

2달 전 · nexter 님의 답변 업데이트

프론트엔드인데 AWS, CICD에 대해 몰라요.

3년 차인데 물 경력인 것인 지, 요즘 다들 스펙보면 화려해보이던데 제가 할 줄 아는거라곤, JavaScript(TypeScript), HTML5, CSS3, React정도입니다.. 적고나니 엄청 물경력같네요; 요즘 Next가 핫하기에 Next.js까진 공부하려고 하는데 Vitest도 공부해야할 것 같고.. CICD 파이프라인도 공부해야하는 건 지, AWS도 요즘 스펙에 자주 언급되는 것 같고.. 막막하네여 스펙을 무엇부터 채워야할까요..?

개발자

#프론트엔드

답변 1

댓글 0

조회 105

8달 전 · 익명 님의 질문 업데이트

프로젝트 경험이 부족한 4학년 전공자 부트캠프를 해야 할까요?

안녕하세요 경기도권 대학 컴퓨터공학과에 재학중인 4학년 학생입니다. 우선 현재 제 상황을 설명해보겠습니다. 프로젝트는 총 두 번 진행했습니다. 첫 번째 프로젝트는 Django와 chatGPT를 이용한 프로젝트이고 전 이 프로젝트에서 기본적인 API 구현, chatGPT 연동 그리고 rabbitMQ와 celery를 이용하여 chatGPT의 답변을 비동기로 가져오는 기능을 구현했습니다. 두 번째 프로젝트는 Springboot와 Flask와 RVC(음성 변환 AI 오픈소스)를 이용한 프로젝트를 진행했습니다. SpringBoot는 REST API를 작성하는 서버이고 Flask는 RVC AI 모델 서빙만을 위한 서버입니다. 이 프로젝트에서 SpringBoot REST API 구현, CRUD 구현과 Flask 서버 구현을 맡아서 진행했고 AWS EC2 배포, S3, RDS, DOCKER(Compose), Nginx, Github Action(CI/CD)도 구현했습니다. 올해 여름 방학에 알고리즘 스터디를 통해서 주요 자료구조와 알고리즘에 대해 공부하고 공부한 내용을 블로그에 정리했습니다. 코테 문제는 대략 100문제 조금 안되게 풀었습니다. 대충 실력은 실버 4~2까지는 어찌저찌 풀 수 있는데 실버 1 골드 5는 쉬운 건 풀고 어려운 건 못 푸는 수준입니다. 현재는 CS 스터디 진행중이고 이제 시작하는 단계입니다. 자격증은 정처기 있고 올해 11월 SQLD 응시 예정입니다. 첫 번째 프로젝트는 포폴로 쓰기 애매하고.. 두 번째 프로젝트는 Devops 경험은 충분한 것 같은데 Spring으로 구현한 기능은 아주 기본적인 REST API밖에 없고 Flask(AI)가 메인이다 보니 제대로 된 Spring 프로젝트가 없습니다.그래서 제대로 된 Spring 프로젝트를 만드는 게 우선이라 생각합니다. 그럼 혼자서 사이드 프로젝트를 하거나 부트캠프에 들어가서 기초부터 차근차근 배운 후 팀 프로젝트를 진행하는 방법이 있는데 어떻게 해야 할지 고민입니다. 부트캠프는 거의 대부분이 기초부터 하는 커리큘럼이다 보니 최소 6개월은 해야 한다는 단점이 있고 혼자 하는 건 주변에 물어볼 곳도 없고 좀 막막합니다. 대신 결과물이 조그 부족하더라도 6개월보단 덜 걸릴 것 같습니다. 조언 부탁드립니다..

개발자

#부트캠프

#국비

#전공자

#취준

#취업

#전공

답변 0

댓글 0

추천해요 1

조회 213

10달 전 · 장성호 님의 새로운 답변

개발 프로그램 질문이요!

이제 팀프로젝트 들어가서 sts3 쓰다가 설정할게 너무 많아서 spring boot 사용하려하는데 실무에서는 IDE 이클립스랑 sts3,boot 중에 뭘 제일 많이 사용하나요? 전에 다운받았던 프로그램들 지우고싶은데 이걸 두고 계속 사용하며 공부해야하는지 궁금해요

개발자

#java

답변 1

댓글 0

조회 34

10달 전 · aigoia 님의 답변 업데이트

프론트엔드분들은 개인 프로젝트할 때 백엔드를 어떻게 하시나요?

프론트엔드 분들은 취업이나 이직, 사이드프로젝트 등 개인 프로젝트를 진행할 때 백엔드는 어떻게 하시나요? 예시는 react 진영 기준으로 하였습니다 다른 선호하는 방식이 있다면 댓글로 알려주세요! 1. 클라이언트, 서버 각각 전부 개발 ex. reactjs(nextjs) + nestjs 2. 백엔드 서비스를 활용하여 개발 ex. nextjs + firebase, supbase 3. 풀스택 프레임워크 사용해 한 번에 개발 ex. nextjs + prisma(orm) + s3(storage)

투표

개발자

#react

#next

#프론트엔드

답변 6

댓글 0

조회 1,191

일 년 전 · 프레드윰 님의 새로운 답변

기술 스택이 진짜 난잡하게 됬는데 이럴땐 어떻게 해야될까요...

저는 8년차 개발자 입니다. 첫회사에서 7년 다음 회사에서 1년의 경력을 가지고 있습니다. 첫회사에서 Spring Framework를 다뤘구요, 웹팀에서 화면 구현에 더 중점을 두고 개발을 하느라 제품에 사용된 spring기술을 전부 파악하니깐 5년차가 되어있었습니다. 그때쯤 되니깐 팀장부터 말단 직원까지 저한테 다 물어보러 오더라구요... 그래서 더이상 성장을 못한다고 판단하고 혼자서 SpringBoot로 이것저것 만들어보고 python도 배우고 node.js도 배워보고 React.js도 배워보고 그러면서 지냈습니다. 그러다가 이직 제안을 받게 되어서 바로 이직하게 되었어요. 두번째 회사는 클라우드, AI 등 최신기술을 사용하는 스타트업 회사였어요. 여기서 내부 서비스를 유지보수하면서 지내다가 회사에 돈이 없어서 SI 프로젝트를 몇개 진행하게 되었는데 제가 총괄을 맡아서 시스템설계, DB 설계, React.js, Flask 전부다 맡아서 진행하게 되었습니다. 이 프로젝트 진행하면서 AWS 서비스를 직접 구축하게 되었는데 그제야 진짜 성장한다고 느껴졌습니다. (VPC, LB, EC2, S3, Amplify, API Gateway 등등등) 직접 하나하나 구축하면서 클라우드서비스 파악도 되고 참 뿌듯했습니다. DB는 왠만한 RDBMS는 다 다뤄본거 같습니다. Mysql/MariaDB, 오라클, PostgreSQL, Cubrid, MS-SQL 까지요 근데 이 DB들 설치하고 쿼리 날려본게 큰 장점은 또 아닌 거 같고.. 그리고 impala, Redis, Elastic Search, InfluxDB 도 해봤구요... 그리고 DB 테이블 설계하고 쿼리 튜닝하는것도 할수는 있는데 이건뭐 짬차면 다 할 줄 아는거라 메리트도 없구요. 이렇다보니 뭐 하나 잘한다는 느낌이 안듦니다... 뭔가 할줄 아는건 많은데 알맹이가 빠져있는 느낌이에요.. 몇군데서 불합격통보를 받으니 좀 답답하네요

개발자

#커리어

#물경력

답변 1

댓글 0

조회 205

일 년 전 · 삭제된 사용자 님의 답변 업데이트

서버에서 이미지 반환시 s3 url과 base64중 어느것이 나을까요?

서버에서 이미지 반환시 s3에 저장된 이미지의 url을 반환하는 방법을 주로 사용했습니다. 그런데 이미지가 10개라면 클라이언트에서 총 11번 리퀘스트를 보내야 하니 성능이나 비용에 문제가 생길 수 있다, 그래서 파일 크기가 작은 이미지를 여러개 반환하는 경우, base64로 인코딩해서 api응답에 한번에 보내는게 낫다는 이야기를 들었는데 현직자 분들은 어떤 방법이 더 좋다고 생각하시는지 궁금합니다.

개발자

#백엔드

#이미지처리

#이미지

답변 1

댓글 0

조회 161

일 년 전 · 강병진 님의 새로운 답변

S3와 Cloudfront로 웹사이트 배포 후 ACM으로 커스텀 도메인 설정 과정에서 레코드 생성이 안되는 문제가 발생했습니다.

Gatsby로 만든 개인 블로그를 CloundFront 로 배포했습니다. 아시겠지만 CloundFront 로 배포하면 도메인주소가 지저분하잖아요? 못생기고... 그래서 AWS Certificate manager를 이용해 커스텀 도메인과 https를 적용하려는데 문제가 생겼습니다. us-east-1 리전(버지니아 북부)로 설정하고 인증서 요청을 진행했습니다. 근데 인증서 요청해서 만든 CNAME이 계속 검증 대기중으로 뜹니다... 세부정도 갱신자격도 부적격으로 뜨구요ㅠㅠ Route 53 레코드 생성 버튼을 눌러봐도 레코드생성 버튼이 비활성화 되어있구요... 원인이 뭔지 도무지 모르겠네요ㅠㅠ 도와주시면 정말 감사하겠습니다!

개발자

#aws

#acm

#cicd

#domain

답변 1

댓글 0

조회 105

일 년 전 · 익명 님의 새로운 댓글

AWS로 프로젝트 진행중입니다.

대학생이고... 프로젝트 과목 1학기 과제로 진행하고 있습니다!! 백엔드를 스프링부트 3.0이상 버전으로 프론트를 리액트로 진행중이고 스프링을 EC2 Ubuntu에 넣고 리액트를 S3로 정적 웹호스팅해서 각각 서버는 열리는데 서로 연동을 어떻게 해야할지 모르겠습니다... 아시는분들 도와주실수 있나요...??

개발자

#spring-boot

#react

#개발-고민

답변 1

댓글 3

조회 66

일 년 전 · 포크코딩 님의 새로운 답변

프론트에서 s3이미지 관리 어떻게 하시나요?

회사에서 vercel을 사용하여 이미지 처리하는데 vercel 요금이 생각보다 많이 나와서 s3 사용을 고려하고 있습니다. 다만 이미지를 수정하고 올리는 작업이 많아서 매번 직접 s3에 업로드하기 번거려울것 같아 좋은 방법을 찾고 있어요 일단 생각한 방법은 git actions로 public에 있는 이미지를 자동으로 s3에 올릴려고 하는데 다른 회사에서는 어떤 방법으로 이미지를 관리하는지 궁금합니다

개발자

#프론트엔드

#s3

#이미지

답변 1

댓글 0

조회 131

일 년 전 · 백승훈 님의 답변 업데이트

프론트엔드 개발자 부트캠프 고민 중 입니다..

안녕하세요 프론트엔드 개발자를 준비하고 있는 1인 입니다. 요번에 운좋게 부트캠프 2개를 붙어서 결정을 해야 하는데 어떤게 더 좋은지 모르겠어서... 질문 남깁니다.. 1. 유데미 웅진씽크빅 풀스택 부트캠프 https://udemy.wjtb.co.kr/event/id/244?utm_medium=paid&utm_source=googleads&utm_campaign=nnt_traffic_bootcamp-KDT_SA&utm_content=id_244&utm_term=240409&gad_source=1&gclid=Cj0KCQjwxeyxBhC7ARIsAC7dS3-3gWAFIN_KxCxPxMz3BPiXaYOnJAtTtj8mtwbt_lJ_lhrhksM5DKwaArdtEALw_wcB 2. 이스트소프트 오르미 프론트엔드 부트캠프 https://estfamily.career.greetinghr.com/o/108906 이렇게 2개를 붙었는데 뭐가 더 좋을까요..? 유데미 웅진씽크빅 풀스택 기술스택 - Html, CSS, Javascript, React.js, Java, Spring, MySQL, AWS 이스트소프트 부트캠프 기술스택 - Html, CSS, Javascript, React.js, Redux, TypeScript, GitHub, Figma 입니다. 둘 다 온라인강의가 기본베이스고 유데미는 오프라인 모임도 진행을 한다고 합니다. 유데미는 신청할 때 프론트엔드 백엔드 풀스택을 고르라고 해서 프론트엔드를 골랐는데 교육과정만 보면 이스트소프트가 맞는거 같은데 어떤걸 선택해야할지 잘 모르곘습니다 ㅠㅠ 도와주세요..

개발자

#부트캠프

#유데미

#오르미

답변 1

댓글 0

조회 348

일 년 전 · 익명 님의 새로운 댓글

30살 여자 신입 백엔드 개발자 괜찮은 걸까요?

안녕하세요. 만30세 되는 비전공자 신입 개발자로 취준 중인 여자입니다. 8개월전 국비로 자바 백엔드 개발 양성 학원을 다녔고 3개월 기술지원(개발x)으로 일한 후 취준 2개월 차입니다. 개인 스펙과 함께 고민이 있어 선배님들의 조언을 여쭙고자 글을 올립니다. 제 문제점은 다음과 같습니다. 1. 그럴듯한 포폴이 없음(있어도 팀프젝에서 crud, aws s3, 배포 경험만 있음) 2. 생각하는 대로 코드 작성하는 능력 부족 3. Cs 지식 부족 (기술면접용만 암기) 4. 비전공자 해외대학원 석사학위 보유(?) 5. 나약한 멘탈 이를 해결하기 위해 1. 포폴 업그레이드 2가지 안 1) 간단한 개인 포폴이라도 1-2주 안에 완성, 포폴 업데이트 (구조적 설계를 생각하며 처음부터 끝까지 혼자 기획, 개발, 배포 예정) 2) 또는 기존 팀프로젝트로 완성된 커뮤니티 웹페이지 포폴에서 백오피스 기능 및 데이터 대시보드 기능을 혼자 추가적으로 개발 2. 정처기 자격증 공부(현재 진행 - 자격증 취업에 쓸모없다고 하시는데 저는 생각보다 이론들이 풍부해서 전공지식까지는 아니겠지만 배울 게 정말 많다고 생각하여 이론 공부하는 마음으로 준비 중입니다) + sqld 자격증 공부 3. 알고리즘 입문 문제부터 레벨업 시키며 1일 1개씩 풀기 (feat. 잔디심기) 4. 공부한 내용, 깨달은 내용 기술블로그에 적기 내가 가진 긍정적인 포인트(?) 1. 야근 ok 낮은 연봉 ok 마인드 2. 영어 회화능력 상, 영어는 그냥 자신있음 3. 문서작업 능력(기록 능력) 상 4. 고객지원 경력 3년(이건..잘 모르겠습니다) 현재 이력서 제출 현황 1. 한달 160개 이상 제출, 그 중 70군데 열람, 90군데 미열람 2. 면접까지 4곳 중 2곳 탈락, 2곳 대기 (뻥튀기 제외) 현재 까진 si,솔루션 등 모두 지원하고 있지만 앞으로는 서비스 개발(주로 웹)이 적혀있는 회사 위주로 지원할 예정입니다. 장기적인 커리어를 생각할 때 유지보수보다 작은 회사라도 개발만 하는 곳이 나을 것 같아서요. 제가 질문드리고 싶은 건 다음과 같습니다. 1. 현실적인 제 나이와 스펙, 신입으로 도전하기엔 너무 순진한 생각일까요? 2. Ai로 인해 웹개발자들의 수요가 적어지고 전망이 좋지 않을 거라는 얘기가 나오는데 신입으로 입사해도 수명이 짧을까 걱정됩니다. 물론 공부는 계속해가며 실력을 쌓을 생각이지만 선배님들의 생각이 궁금합니다. 3. 제 문제점에 대한 해결방법 중에 올바르지 않거나 개선이 필요한 부분이 있다면 가감없이 말씀 부탁드립니다 4. 여자 개발자의 경우 임신, 출산 후 경력단절이 심한가요? 읽어주셔서 감사합니다

개발자

#이직

#자바

#취업

#신입개발자

#백엔드개발자

#웹개발자

#인공지능

답변 2

댓글 5

보충이 필요해요 1

조회 2,344

일 년 전 · 김인후 님의 새로운 답변

넷플릭스같은 영상 스트리밍 서비스

문득 가족들끼리 찍은 영상이나 사진들을 볼 수 있는 개인 서비스를 만들어보려 합니다. 항상 Django 프레임워크만을 이용해 구현했는데, 이번에는 영상 스트리밍에 효과적이라는 node.js를 이용해 구축하여 진행해 보려 합니다. 그리고 영상이나 사진들을 S3에 저장해두고 CDN 세팅 후 일부 로딩씩 가져오는 방법으로 구현해 보려 합니다. 위의 내용이 가능한지 검증해보지 못했고 일부 블로그에서 확인한 내용입니다. 알고있는 지식이 전무하여 관련 아키텍처나 어떤 방법으로 구현하면 좋을지 조언을 받아보고 싶습니다.

개발자

#스트리밍

#node.js

#영상

답변 1

댓글 0

추천해요 1

조회 105

일 년 전 · 익명 님의 새로운 댓글

신입 프론트엔드 개발자 aws배포경험

4학년컴공 마지막학기에 aws사용해서 프로젝트 하는것이 있는데 s3+cloudfront 를 사용해서 진행하기로 했습니다. 제 포트폴리오 스킬란에 aws사용경험을 작성하였을때 큰 이점이 있는지 궁금합니다.

개발자

#프론드엔드

#aws

답변 1

댓글 1

조회 259

일 년 전 · 김인후 님의 새로운 댓글

React Tuborepo 배포는 어떻게 하면 좋을까요?

안녕하세요! 저는 기존 ecs의 블루/그린 배포와 s3 cloudfront cache 배포 등을 이용한 모놀리스 형식의 구조에서 tuborepo, pnpm의 모노레포 환경으로 마이그레이션 중입니다. ECS로 배포한 서비스는 약 2~3개 S3 Cloudfront로 배포된 서비스는 3개 정도 존재하는데요, 이 경우에 보통 어떤 식으로 터보레포 환경에서 배포 ci/cd를 구축하시는 지 궁금합니다. 관련 아티클도 찾아보고 있는데 vercel이나 aws amplify로 구축한 것 제외하고 큰 규모의 서비스에서의 ci/cd에 대한 따로 정보가 없는 것 같아서요. 혹시 위와 같은 구축 경험이 있으신 분 있다면 조언 부탁드립니다...😭

개발자

#react

#monorepo

#cicd

#deploy

#next.js

답변 1

댓글 2

추천해요 1

조회 237

일 년 전 · 익명 님의 새로운 댓글

파일 변환 및 전송에 대한 질문입니다.

영상파일을 서버 - aws s3로 저장하는 로직을 구현중입니다. 서버단에서 영상파일에 대한 편집작업을 한 다음 s3에 원본과 같이 저장시키는 것이 계획이었습니다. 서버에서 ffmpeg, fluent-ffmpeg를 이용한 변환작업은 다음과 같습니다. - 영상 watermark 작업 - hls를 위한 .m3u8파일 변환 작업 - 썸네일 생성 작업(.ts파일의 0초대를 썸네일 및 미리보기로 생성)- 이부분은 테스트중입니다. s3 url을 요청하여 영상파일을 실행시키는 계획을 생각했고 이는 로컬에서 성공했습니다. ec2서버에 배포한다음 위 과정을 실행해보니 변환과정에서 서버단 부하가 너무 심해서 변환하는 시간이 너무길거나 서버가 다운되는 이슈가 생겼습니다. ec2성능 자체를 올리고 업로드 용량 제한도 다시 설정할 계획이나 여전히 많은 유저가 이 기능을 사용할 경우 서버가 견디지 못할 가능성이 있다고 생각합니다. 지금 생각해보고 있는 대안은 두가지입니다. 대안 1: aws mediaConverter를 이용해 변환한다. 1. 원본 영상을 버킷a로 보낸다. 2. 람다 트리거를 이용해 aws mediaConverter로 변환요청을 보낸다. 3. 변환한 영상을 버킷 b에 저장한다. 4. 클라이언트에서 버킷 b에서 cloudFront를 통해 요청한다. 대안 2: 업로드 전용 ec2를 생성하여 따로 변환한다.(처음 계획했던 과정에 ec2를 새로 생성, 성능 고도화하기) mediaConverter의 영상변환에 필요한 작업 생성(또는 작업 프리셋 생성)이 너무 어려웠던 기억이 있어 ffmpeg를 이용할 생각을 하였는데 영상변환에 너무 많은 리소스가 들어간다는 생각을 못했습니다. 영상 변환 및 업로드 작업을 경험해본 분들이 있다면 좋은 공유를 받고싶습니다.

개발자

#aws

#ffmpeg

#mediaconverter

#m3u8

#backend

답변 1

댓글 1

조회 91

일 년 전 · 딴딴빠 님의 새로운 답변

스프링부트 aws s3 연결 방식이 궁금합니다

보통 s3쓰면 어떻게 부트랑 연결하나요? 저는 aws sdk 디펜던시를 깔아서 s3를 연결했는데 지금 간단하게 해봤을 때는 ~/.aws_key 인가?에 키를 저장해놓고 바로 버킷작업을 하는데, 다른 방식으로는 어떻게 하는지 궁금합니다.

개발자

#aws-s3

#spring-boot

답변 1

댓글 0

조회 76

일 년 전 · 이지헌 님의 새로운 댓글

Next.js 이미지 최적화 방식에 대해 질문이 있습니다.

안녕하세요! Next.js 14를 사용해 프로젝트를 진행하던 중 이미지 최적화에 관해 궁금한 점이 생겨서 이 곳에 질문을 남깁니다. 프로젝트를 하며 약 500개의 이미지를 랜덤으로 추천해서 렌더링하는 기능을 구현했습니다. 현재 작업 방식은 프로젝트에서 페이지에서 이미지를 업로드 하는 기능은 필요가 없기에 MongoDB에 이미지 'URL'을 모두 저장하고 클라이언트에서 서버로 요청하면 서버에서 DB에 있는 URL을 리턴해주면 그걸 <img> 태그를 이용해서 화면에 띄우는 방식으로 구현했습니다. 하지만, 이렇게 구현하니 이미지 렌더링 속도가 조금 늦는 현상이 발생해 이를 최적화하고 싶습니다. 제가 생각했던 방법들은 다음과 같은데 어떤 방법이 좋은지, 혹은 더 나은 방법이 있는지 아시는 분이 있으면 추천해주시면 감사하겠습니다. 1. 이미지를 모두 다운받아 public 폴더에 넣고 Next/Image를 사용한다. -> 이 방법을 하려니 사진이 500개가 되고 사진마다 png,jpg 형식도 달라서 적용하는 것도 어려울 것 같고 무엇보다도 프로젝트 파일 사이즈가 커지는게 문제가 될 것 같다는 생각을 했습니다. 만약 사진이 500개가 아니라 1000개 2000개가 된다면 더더욱 그럴 것 같아서요. 이 부분에서 추가로 생각해본 방식이 파일 형식을 모두 avif로 바꾸는건데 그런 접근도 괜찮은건가요? 2. 서버에서 URL 넘어온 그대로 Next/image를 사용한다. -> 모든 파일의 url 형식이 달라서 일일이 next.config.ts에서 설정해주는 게 쉽지않을 것 같다고 생각했습니다. 그래서 모든 파일을 AWS S3에 올려놓으면 URL 주소가 같을테니 그렇게 하는 게 맞는지 궁금했습니다. 아직 제 지식이 짧아서 생각해본 방식은 위와 같은데, 추가로 좀 더 좋은 방식이나 현업에서 사용하는 방식이 있다면 알려주시면 감사하겠습니다. 긴 글 읽어주셔서 감사합니다!!!

개발자

#next.js

#리액트

#이미지최적화

#넥스트

답변 1

댓글 1

추천해요 1

조회 215

일 년 전 · 익명 님의 질문

프론트엔드 모노레포 배포에 대해 궁금합니다 !

안녕하세요 프론트엔드에서 react로 모노레포구조로 운영하고있는데 현재는 통합 s3 1개에 각 프로젝트 빌드파일을 폴더로 구분하여 올리고 각 프로젝트당 1개의 cloudfront를 통해 해당 프로젝트에 접근하는 1:N 관계로 운영중입니다. 이번에 신규프로젝트가 추가되어 작업을해야하는데 앞으로 추가될 프로젝트가 계속 생길거같아서 그때마다 cloudfront를 추가해줘야하는 번거로움이 걱정됩니다... (앞으로 추가될 프로젝트까지하면 거의 react만 6개...) 이러한 모노레포 구조에서 더 좋은 배포방식이 있거나 cloudfront 한개로 운영할수있는 방법이있을까요?? (cloudfront 한개로 시도해봤는데.. 403,404 부분 index.html 이 한개밖에 설정이 안되어 프로젝트들이 제대로 찾지못해 막혔습니다... ㅠ)

개발자

#react

#모노레포

#s3

#cloudfront

#aws

답변 0

댓글 0

조회 85

일 년 전 · 개발새발 님의 질문 업데이트

선배님들 진지하게 프엔개발자 취준 상담부탁드립니다

안녕하세요 올해 31살입니다.. 노션으로 이력서 작성했다가 이미지 로딩이 너무 느린거에 고민을 하다가 react-notion 라이브러리를 알게됬고 그걸로 작업하다가 CORS때문에 그냥 이력서를 리액트로 제가 직접 만들었습니다. 그 이력서로 취업 문을 계속 두드리고있는데 계속 문전박대 당하고있는 상황입니다 그저 개발이 재밌고 내가 구성한거를 이쁘게 ui만들고 하는게 재밌어서 강의나 책 보면서 배운 지식들을 활용한 결과물들을 포트폴리오로 내세운거라 남들이 보기엔 어떨지모르겠지만요.. 깃사용이랑 커뮤니케이션 코드컨벤션등등을 경험하고싶어서 팀프로젝트를 구해서 해본경험도 있습니다만.. 자신감이 많이 떨어져있는 상태입니다ㅜㅜ 비전공 독학 고졸 이 세가지 타이틀을 다 가지고있는 저라서 더 미래가 불안합니다. 여태 배운지식들은 html,css,js,react,nextjs,mongodb,express,awss3활용,파이어베이스 등등입니다. 면접을위한 cs전공지식 책을 사서 겉핥기식이겠지만 cs공부와 모던자바스크립트 웹사이트에서 js공부도 계속 하고있습니다. 최근까지는 서버리스가 개인플젝만들때는 편리해서 파이어베이스랑 리액트 혹은 넥스트13으로 개발을 주로해왔습니다만 솔직히 내세울만한것도 없는거같고 해서 다른 지식들을 어필해보자! 라는 생각이들어서 최근 구상중인 아이디어를 개발할때 적용해보고자합니다 1. Nextjs+nestjs 2. Nextjs + aws서버리스플랫폼 사용 이 두가지중 어떤게 더 나아보이실까요? 마지막으로 제 이력서입니다.. https://resume-react-phi.vercel.app/

개발자

#취업

#이력서

#리액트

#react

답변 1

댓글 1

추천해요 1

조회 360

일 년 전 · 백승훈 님의 댓글 업데이트

Nginx, Express 연결 후 프론트에서 이미지 파일 전송시 408 Error

안녕하세요. 혼자 해보던 도중 도저히 해결이 되지 않아 문의드립니다. - 서버 설계 - 현재 저는 Express앱을 AWS EC2 인스턴스에 NGINX를 설치한 후 proxy_pass에 express앱이 구동중인 port를 연결하여 사용하고 있습니다. 이 과정에서 ALB를 통해 ACM을 연동하여 HTTPS 프로토콜이 사용가능하게 설정까지 하였습니다. 이미지 파일업로드는 multer-s3를 이용해 s3버킷과 연결하여 업로드 되는 방식입니다. - 문제상황 - 로그인과 기본적인 CRUD는 문제없이 되는데, 프론트에서 이미지 파일(multipart/form-data)을 서버로 전송하면 504 오류가 출력됩니다. 1. nginx의 access.log에는 해당 uri의 상태코드가 408이라 출력됩니다. 2. nginx의 error.log에는 readv() failed (104: Connection reset by peer) while reading upstream가 출력됩니다. 3. 개발자도구의 console창에 'server의 이미지 업로드 uri' from origin '프론트 도메인'이 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이라 출력됩니다. 위 오류를 해결해보기 위해 시도해본 것은 아래와 같습니다 1. NGINX의 proxy_connect_timeout, proxy_send_timeout, proxy_read_timeout, send_timeout을 600으로 설정, client_max_body_size를 500M으로 설정 2. ALB의 유휴제한시간 600 설정 3. Express 앱에 app.set('trust proxy', true); 추가 4. Express-session에 app.use(session({proxy:true})) 추가 5. body-parser에 app.use(bodyParser.json({limit: '1000mb'})); 추가 및 app.use(bodyParser.urlencoded({limit: '1000mb', extended: true})); 추가 6. 업로드되는 uri의 미들웨어에 (req, res, next) => { req.setTimeout(1000000); next(); } 추가 7. upload.single()미들웨어를 주석처리 후 req.file 출력 시도 아직도 해결을 하지 못하였습니다 ㅜㅜ 연휴임에도 도와주시면 너무 감사하겠습니다..

개발자

#aws

#alb

#nginx

#express

#ec2

답변 2

댓글 4

조회 315

일 년 전 · 이석운 님의 질문

AWS S3 이미지 파일을 삭제하고싶습니다.

안녕하세요. 현재 사이드프로젝트로 개발중인 기능중에서 본문에 이미지(S3 URL)를 HTML 이미지 태그로 삽입하여 작성되는 게시판성 기능이 있습니다. 이런 방식으로 개발하다 보니 게시글 수정 시 실제 사용하지 않는 사진과 사용하는 사진을 구분 짓기가 어렵더라구요. 제가 생각했던 방안은 현재 S3에 이미지를 업로드할때 생성되는 테이블 PK값과 URL주소를 json형태로 프론트에 전달해준후에, 실제 사용하는 이미지 정보만 다시 json형태로 서버로 전달하는 방식인데요. 혹시 현업에서는 이러한 기능을 개발할때 어떤 방식으로 개발되는지 이야기를 듣고싶습니다.

개발자

#spring

#jpa

#aws-s3

답변 0

댓글 0

조회 101

일 년 전 · 백승훈 님의 새로운 답변

react s3 배포 이슈... 도와주세요 ㅠㅠ

안녕하세요 react를 S3 + Cloudfront를 이용해서 배포하려고합니다 ! 로컬에서는 잘 되고, 빌드해서 S3에 올리면 뒤에 /list , /mypage 같은 url을 추가로 붙이면 페이지가 잘 나오는데 기본 url로 처음 들어가면 빈파일이 자동으로 다운받아지면서 접속이 안되고있습니다.... 어떻게 해야할까요..? ㅠㅜ

개발자

#react

#aws

#s3

#cloudfront

답변 1

댓글 0

조회 69

일 년 전 · 김태우 님의 답변 업데이트

프론트엔드 개발자의 시작

안녕하세요. 소프트웨어공학과 3학년을 마치고 곧 4학년, 졸업에 다가온 대학생입니다. 3년동안 전 모범생이라 부르기 어려울 정도로 수업을 자주 빼먹고 시험도 망치곤 했었습니다. 하지만 여러 공모전이나 경진대회, 캠프, 캡스톤 디자인 같은 직접적인 경험을 많이 얻고자 했어요. 그건 그냥 제 성향이었던거 같습니다.. 제 자리에 가만히 앉아서 공부 하는것보단 직접 무언갈 만들면서 깨닫고자 하는게 더 재밌고 저한테 잘 맞는다는 걸 알고있거든요 하지만 곧 졸업을 준비해야하는 때가 다가오고 지금껏 해왔던 것들보다 규모가 더 큰, 제대로 된 프로젝트를 진행해야한다는 것을 알고있습니다. 이제까지 해오면서 느꼈던 가장 큰 첫번째는 대학 수업을 열심히 들을걸.. 이라는 후회였던거 같아요 저는 프론트엔드 개발자로 제 진로를 확고히 하고 싶습니다만, 제가 할줄 아는건 강의에서 들은 HTML5, CSS3, Javascript를 조금 할줄 압니다.. 이번 캡스톤 디자인에서 안드로이드 스튜디오와 Java로 앱을 만들어본적이 있구요. 자료구조나 컴퓨터구조, 네트워크 같은 CS도 강의를 들은적은 있지만 깊게 공부하진 않았구요 학교 강의 이외로 제가 더 공부할 수 있는게 있다면 어떤걸 하는게 좋을까요? 단순하게 취업을 위한 것이 아닌 저 자신의 능력 향상을 위해 공부하고 싶습니다. 조언 부탁드립니다!

개발자

#react

#프론트엔드

#javascript

#java

답변 1

댓글 0

조회 133

일 년 전 · 빈센트 님의 새로운 답변

백엔드에서 이미지 저장 로직 관련해서 궁금한 점이 있습니다!

관계형 데이터베이스에서 이미지 처리에 대해 이 방법이 최선인지 궁금합니다. 1. 프론트에서 이미지 파일 형태로 서버로 보냅니다. 2. 서버에서 받은 이미지를 aws s3에 저장합니다. 3. 서버에서 데이터베이스의 s3에 저장된 이미지의 주소를 저장합니다. 프론트에서 이미지를 인코딩하고 보내거나 백엔드에서 인코딩해서 저장하는 방법도 있지만 이거는 잘 사용하지 않는 것으로 알고 있는데 위 방법이 최선일까요??

개발자

#프론트

#백엔드

#데이터베이스

답변 2

댓글 0

추천해요 1

조회 658

2년 전 · 강병진 님의 새로운 답변

react 모노레포 배포는 어떻게 하나요?

안녕하게요 ! 이번에 yarn berry + workspace를 사용해서 react 프로젝트를 만들어 배포할 일이 생겼습니다 ! 최소 2개 이상의 react 프로젝트가 들어갈 계획인데... 모노레포 배포는 처음이라 어떻게 해야할지 막막하네요😂 aws를 사용해야해서 루트에서 docker로 배포하는 방향이 맞는지... (현재 사내에서 다른 프로젝트는 ECS에 배포중) 아니면 정적 웹 호스팅으로 S3에 각 버킷을 생성해서 배포하는 방향이 맞는지... (이때는 각 react 프로젝트 1개당 1버킷이 맞는걸까요? dev 서버도 만들면 각 2버킷씩인지...🥲) 혹시 보통의 프론트엔드 모노레포 구조에선 어떻게 배포하는지도 알려주시면 감사하겠습니다 :) 좋은 하루 보내세요 !

개발자

#react

#monorepo

#yarn

답변 1

댓글 0

추천해요 1

조회 591

2년 전 · 백승훈 님의 답변 업데이트

프론트엔드 웹뷰 질문입니다.

1. 웹뷰 작업은 vite react 로 해도 괜찮을까요? 구글링 했을때 레퍼런스가 많지 않아서 정확하게 결정을 못내리겠습니다 2. Next 로 작업을 한다면 SSR 이외에 이점은 뭐가 있을까요? 3. 웹뷰 작업 후 React 는 AWS 를 이용한다면 S3 버킷에 올려 퍼블릭 엑세스 할당 후 클라우드 프론트를 태워서 호스팅 하면 될 것 같은데 Next 는 어떤 방식으로 호스팅을 할까요? 기존에 Vercel 과 EC2 위에 Next 프로젝트를 호스팅 한 경험이 있습니다. 4.앱에서 로그인이 된 상태에서 웹뷰를 띄었을때 세션을 유지하는 방법은 어떻게 될까요? 로그인 인증은 JWT 방식입니다. 네이티브 앱에서 로그인 된 상태에서 웹뷰를 띄어서 세션을 유지하는 방법의 플로우를 알려주시면 감사하겠습니다.

개발자

#webview

#react

#frontend

#web

#next.js

답변 1

댓글 0

조회 609

일 년 전 · 익명 님의 질문 업데이트

부트캠프 최종발표 내용에 관해서

선생님들 안녕하세요. 부트캠프에서 셀프세차장 예약 앱을 주제로 약 두달여간의 개발을 진행했고, 3일 뒤에 최종발표만을 남겨두고 있습니다. 부트캠프 운영진 측에서 최종발표 내용으로 개발 주안점을 둔 부분을 주로 다뤘으면 좋겠다고 하셨습니다. 발표 내용을 미리 구성해봤는데, 선생님들께서 보시고 조언 좀 주시면 감사하겠습니다. 저희 팀 개발 스택은 다음과 같습니다. FE: React, Redux-thunk, React-query BE: Spring Boot, MySQL, Amazon S3 아래와 같이 발표 내용을 구성해 봤습니다. 1. 프론트엔드 a. 아토믹 패턴의 활용 - 기획단계에서부터 모든 컴포넌트들을 미리 설계해놓고 atom, molecule등의 레벨로 미리 나눠놨다. 덕분에 개발을 빠르게 진행할 수 있었고, 유저들에게 일관된 인터페이스를 제공한다. b. 예외처리 - 유저들에게 보다 친절한 에러를 제공하기 위해 백엔드와 협의하여 세부 에러코드들을 정의했다. 각 컴포넌트들을 에러 바운더리로 감싸 GET 요청이 실패한 경우에는 Fallback UI로 화면을 덮어줬다. 그리고 각 API들의 onError 콜백을 부여하여 Mutation 요청이 실패한 경우에는 alert로 알려준다. c. 상태관리 - props drilling 현상을 방지하기 위해 redux-thunk를 사용해 세차장 정보를 불러올 때마다 세차장 정보를 전역 상태로 관리하여 자식 컴포넌트로 넘겨주게 구성했다. 2. 백엔드 a. 예약 신뢰성 - 사용자가 요청한 예약이 운영 시간을 준수하고 중복 예약이 방지되도록 예약 검증을 철저히 하였다. b. 예외 처리 - 명확한 예외 처리 및 상태코드 할당 c. 권한 - 역할 기반 권한 관리, 사용자 인증 및 JWT 토큰 처리 여기까지입니다. 내용을 잘 구성했는지 모르겠습니다. 제가 경험해본 프로젝트 중 가장 규모가 큰지라 발표 내용이 부족하진 않은지 걱정이 많이 됩니다. 발표 평가위원이 주로 개발자라고 하셔서, 개발자의 시선으로 봤을 때 위 주제들이 어떠한지 고견을 듣고 싶습니다. 감사합니다.

개발자

#부트캠프

#react

#spring-boot

답변 1

댓글 0

보충이 필요해요 2

조회 160

2년 전 · 장성호 님의 새로운 답변

Spring으로 토이프로젝트를 진행하는데

금전적인 문제로 Aws ec2나 s3없이 해야하는 상황입니다 어떻게 해야 떨어져있는 팀원들과 원활한 협업이 가능할까요? 현재는 백엔드1명의 데스크탑을 서버로 사용중입니다. 이게 24시간 돌아가는 상황도 아니고 개발용,배포용 서버가 따로 있는게 아니라 백엔드끼리도 백엔드-프론트끼리도 쉽지않더군요. 이미지저장같은 경우도그렇구요 혹시 저랑 비슷한 상황이실때 선배님들은 어떻게 하셨는지 궁금합니다.

개발자

#spring

#서버

답변 3

댓글 0

조회 394