#vercel

비전공자 프론트엔드 신입 취업 조언 부탁드립니다..

28살 비전공자 프론트엔드 개발자로 도약 준비중인 취준생입니다. 23년에 대학교 졸업 후 공간디자인 전공을 살려 인테리어 회사에 입사하여 인테리어 디자인&설계를 진행하였습니다. 누군가가 사용하고 거주할 공간에 대해 설계를 진행하고 인간중심적인 디자인을 고안하는 과정 자체가 재밌고 흥미로웠습니다. 그렇게 나온 결과물을 사용자가 보고 기뻐하고 실제로 이용하는 모습을 보며 뿌듯함을 느끼기도 했습니다. 그렇게 실무를 진행하면서 동시에 인테리어라는 직업의 한계를 느끼기도 했습니다. 현실의 물리적인 제약으로 생각했던 설계가 불가능하기도 하고 사용자 중심으로 디자인을 진행했지만 실현이 불가능하기도 했습니다. 무엇보다 공간적, 시간적 제약이 크다는 느낌을 많이 받았습니다. 그렇게 생각하던 때에 같은 과 친구를 통해 '부트캠프' 라는 것을 알게되었고, 공간디자인을 전공하면서 관심을 기울이고 있던 '개발'이라는 분야에 대해 꿈을 꾸게 되었습니다. 나이가 더 들기 전에, 더 시간이 늦기 전에 접어뒀던 꿈을 도전해보고 싶다는 생각이 들었고 다니던 회사를 퇴사함과 동시에 국비지원 프로그램에 지원해 교육원을 다니며 5개월 가량의 수업을 들으며 개발자로서의 역량을 키워갔습니다. 교육원의 커리큘럼은 풀스택 과정이였지만 저는 프론트엔드 개발이 사용자 경험과 직결되어 있다는 부분이 제 이전 전공 경험과 실무 경험을 살릴 수 있다는 생각과 동시에 제 성격과 잘 맞을 것 같아 프론트엔드 개발에 집중하게 되었습니다. HTML, CSS, Javascript, jquery, 리액트 배우고 팀 프로젝트에서 MySQL 과 MariaDB 를 활용하여 프로젝트를 제작하였습니다. 지금은 개인 포트폴리오인 랜딩페이지와 이력서를 작성해 1월 한달동안 공고를 찾아보며 지원하고 있는데 열람은 되지만 연락이 거의 오지 않는 상태여서 나에게서 어떤 부분을 개선하고 어떤 부분에 더 노력을 쏟으면 좋을지 고민이 정말 많이 되고 선택지도 정말 많고,,조금 답답한 심정입니다. 얼른 실무에 뛰어들어 실무역량을 키우고 싶습니다.. 지금도 늦었다는 생각이 자꾸만 듭니다.. 선배님들께 피드백을 받고싶어 질문 드립니다. 아래에는 랜딩페이지 링크입니다. 현실적인 팩트 피드백 부탁드립니다 ! https://jonggu-portfolio.vercel.app/

[프론트엔드] 포토폴리오 피드백해주시면 감사하겠습니다 ㅠㅠ

안녕하세요 프론트엔드 지원 중인 신입 개발자 입니다! 포토폴리오 사이트를 만들어봤는데 지원을 넣어도 딱히 연락이 안오네요... ㅠ 피드백이 필요할 것 같아서 올려봅니다 .. 피드백 남겨주시면 너무너무 감사하고 적극 반영해서 수정하겠습니다!! https://seung-mi-pf.vercel.app/

프론트와 배포에 대해서 궁금한점

프론트엔드는 상대적으로 배포에 대한 지식을 덜 요구하는거 같은데 보통 vercel로 배포를 하는데도 봤었고 aws 자체와 좀 거리가 멀었던거같은데 요즘에는 HTML, CSS를 퍼블리싱의 영역으로 보내고, JS, React에 성능 위주의 개발과 프론트엔드만의 독자적인 인프라 구축에 예전보다 많은 관심을 받고 있다고 들었습니다. aws나 docker 같은 것도 요즘 프론트엔드 개발자라면 어느정도 지식 습득이 필요하다고 생각하는데 어떻게 생각하시나요? 아는 동생이 프론트엔드 개발자 지망인데 vercel로 배포만 해보고 어떤식으로 배포되고있는지 효율적으로 배포 플로우를 만들어 보거나 해보지를 못 했다길래 필요한지 궁금해서 qna에 남깁니다.

커리어리 개발툴은 뭘로 만들어졌을까요, 서버 최적화 방법 질의

커리어리 웹뷰는 뭘로 만들어졌나요 ? 우연히 커리어리를 알게 되어서 사이트를 구경하던중 글 남깁니다. 저는 올해 40세이고 취미로 코딩을 배우면서 현재는 메타의 threads 와 비슷한 웹뷰를 만들고 있습니다. 독학으로 배우다보니 깊이가 없어서 한계에 직면해 있는거 같아요. 커리어리에서 스크롤을 내리다보면 딜레이 없이 페이지들이 거의 무한으로 내릴 수 있던데 기술적으로 그게 참 궁금하고요. 게시글을 포스트 했을때도 거의 딜레이 없이 게시물 업데이트가 되더라구요. 저 같은 경우에는 Next JS 로 웹뷰를 구성했고 database 는 vercel neon (무료버전. 서버는 싱가폴위치) Image 는 uploadthing (100GB 유료걸제 10$. 서버는 한국) 게시글 post 시에 단순 텍스만 입력을 하더라도 업로드 되고 화면에 뿌려지는데 2~3초의 딜레이가 발생합니다. database 가 무료 버전에 싱가폴에 있어서 반응이 느린건지 코드 최적화가 문제인지 모르겠습니다. 제가 테스트중인 사이트 주소는 아래와 같습니다. https://newchat-omega-inky.vercel.app/ 게시글 업로드 속도만 높일 수 있다면 정말 좋을 거 같은데 뭔가 벽에 막힌거 같습니다 ㅜㅜ

개인 프로젝트 피드백 부탁드립니다!! (Next.js + firebase)

안녕하세요! 휴학 중에 개인 프로젝트 한번 만들어봤습니다! 아직 감이 잘 안 잡히다보니 chatGPT에 꽤나 의존했던 것 같습니다. 폴더 구조와 ssr, csr 사용 부분에서 피드백을 받고자 합니다! 또, containers 폴더 안 create 폴더에 있는 RouteChangeListener.tsx를 사용하여 퀴즈를 만들거나 푸는 도중에 현재 페이지를 벗어나려는 움직임을 감지하면 alert 창이 나오도록 설정하였습니다. 제가 생각해봤을 때 페이지가 이동했다가 다시 돌아오는 부분이 비효율적이라고 생각이 들어서 미들웨어나 다른 방법을 통해 해결할 수 있는지 여쭤보고 싶습니다. 감사합니다! 프로젝트 설명 : 퀴즈를 만들고 풀 수 있는 웹페이지 만들어봤습니다! vercel로 배포하였고, PWA 사용하여 모바일에서도 다운로드 가능하게 했습니다! 웹 앱 둘다 가능하지만 웹으로 봐주시는 것을 권장드립니다~!! 프로젝트 기술 스택: Next.js, react-query, zustand, firebase 테스트 아이디: 123@naver.com 테스트 비밀번호: 123123 GitHub 주소 : https://github.com/kmj0973/donquiz Vercel 배포 주소 : https://donquiz.vercel.app/ 따끔한 피드백 주시면 감사드리겠습니다!! 감사합니다!!

웹사이트 프로젝트 피드백 주시면 감사하겠습니다!..

안녕하세요! 저는 현재 대학교 3학년 마치고 휴학 중인 코린이입니다.... 제가 실력이 너무 부족한 느낌이라서 혼자 프로젝트를 진행해도 이게 맞는 코드인지 잘 모르겠네여 ㅠㅠ.. 코드는 client쪽만 봐주시면 됩니당! 따끔한 피드백 부탁드립니다! 감사합니다 반응형이 아니라서 ㅠㅠ 웹으로 봐주셔야합니다~ 기술 스택 : nextjs, typescript, react-query 사이트 주소 : https://bestanimals.vercel.app/ 깃허브 주소 : https://github.com/kmj0973/bestanimals

좀 더 보완할 부분 궁금합니다. !!

nextjs 연습겸 만들어봤는데 재미있네요. 보완할 부분 궁금합니다. !!! ㅠ,ㅠ https://readme-decorate.vercel.app/

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

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

[Vercel] localhost와 vercel 배포 사이트가 다른 이유

Next.js 14버전을 사용중입니다. localhost:3000으로 작업한 것을 vercel로 배포했는데 styeld-components로 스타일링 한 것이 적용이 안 돼요 ㅜㅜ localhost는 적용이 잘 돼서 어느 부분을 고쳐야 할지 감이 안 잡히네요 .. 도와주시면 감사하겠습니다.

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

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

Next.Js의 next/link, middleware 질문합니다!

안녕하세요. 회사에서 Next.js, Vercel 환경에서 개발하는 신입 프론트엔드 개발자입니다. Next.js 기술의 next/link와 middleware 기술에 대해서 궁금증이 생겨서 질문합니다!! next/link는 prefetch기능이 큰 장점으로 알고있어서 Link태그에 경로를 설정해서 미리 데이터를 받아오려고 테스트해보는데 prefetch={true} 속성값을 줘도 개발자도구에서 봤을때 미리 데이터를 받아오지 않는거같습니다 ㅠㅠ 원래 개발자 도구에는 확인이 불가능한건가요?? 그리고 next.js의 middleware는 공식문서에 구글링을 통해서 이론적인 부분은 알고있는데 어떤 경우에 사용해야할지 감이 안잡히네요. 어느 페이지에 middleware를 적용해보는게 좋을까요? 이해하기 쉽게 알려주시면 감사하겠습니다 🙏

turbo Repo 빌드 속도 멀티레포 보다 빠를까요?

최근에 회사에 모노레포 도입하려고 터보레포에 대해 학습하고 있습니다. 공식문서 보면 빌드도 병렬적으로 실행할 수 있고 원격 캐시를 통해 변경된 코드에 대한 프로젝트만 빌드가 가능하다는 내용을 봤습니다. 공식문서 앞부분을 학습해 봤을 때 제가 드는 생각은 멀티 레포로 운영되는 하나의 프로젝트 코드를 수정하고 빌드 후 배포하는 시간보다 터보 레포로 빌드하고 배포하는 시간이 대체적으로 더 빠를 것이라 생각듭니다. 예를들어 모노레포에서 lint나 공용으로 사용하는 ui컴포넌트는 packages/ 에서 관리하고 프로젝트 코드는 app/project1의 구조의 형태를 가지고 있다고 가정했을 때 case1. 린트 코드 한 줄 수정하고 배포 - 터보레포: 린트 수정한 프로젝트에 대해서만 빌드 - 멀티레포: 프로젝트에 전체 코드에 대한 빌드가 실행 case2. 한번에 린트, 공통ui, 특정 프로젝트 코드 수정하고 배포 - 터보레포: 병렬적으로 배포해서 빠른 배포 - 멀티레포: case1과 같이 전체 코드에 대한 빌드가 실행해서 case1과 빌드시간이 비슷하다 개발은 next.js로 하고 vercel에서 배포하고 있습니다. 제가 위에 작성한 case처럼 터보레포가 빌드시간이 더 빠르게 될까요?? 추가로 next.js프로젝트 vercel에 배포했을 때 캐시전략을 사용할 수도 있는지도 궁금하네요. redeploy할 때만 캐시를 사용할지 선택할 수 있는 것만 알고있습니다. 물론 개발자가 설정한 캐시 전략과 경우에 따라 다르겠지만 대체적으로 어느 방식이 더 빠른지 궁금합니다.

Next.js 미들웨어

Vercel를 사용하지 않고 배포해서 Next.js (v13.4)의 미들웨어를 사용해보았는데 잘 작동하지만 공식 문서에서는 edge runtime에서만 가능하다라고 나와있는데 추후에는 vercel를 사용하지 않고 Next.js를 배포한다면 미들웨어는 사용할 수 없는건가요?! 관련 히스토리에 대해 알고 싶습니다. 감사합니다! https://nextjs.org/docs/pages/building-your-application/routing/middleware#runtime

vercel로 배포를 했는데 이미지가 화면에 업로드가 안되는데 뭐가 원인일까요??

vscode에서 리액트 프로젝트를 만들었고 vercel로 사이트를 배포했습니다. 배포된 사이트를 들어가면 전체적으로 잘 작동을 하는데 이미지 하나가 화면에 안뜨네요... 개발자 도구로 확인을 해보면 이미지를 불러오고 있기는 한데, 화면에는 안뜨는 이유가 뭘까요? 이미지는 화면 전체를 감싸는 컨테이너 컴포넌트에 스타일 컴포넌트를 적용하고 있는데 background에서 url을 불러오는 방식을 사용하고 있습니다. ex) const Container = styled.div` background: url('/images/Image.svg') ` 위와 같은 형식으로 작성을 했습니다. 원인이 뭘까요??

프론트 배포 관련 구글 검색에 노출 질문

안녕하세요 프론트엔드 개발자 입니다 이번에 사이드 프로젝트로 Next.js로 프로젝트를 만든 이후 vercel에 배포하였습니다 해당 프로젝트에 sitemap.xml과 robots.txt 파일 모두 설정하고 meta 태그에 title과 description도 모두 설정하였는데 구글에 검색해도 노출이 되지 않네요 혹시 또 다른 설정이 필요한지 궁금합니다!

웹배포에 관해서 질문이용 ㅠ

안녕하세요 사이드프로젝트하려는 코린이 입니다. 사이드프로젝트를 만들고 배포를 해본경험과 사용자들이 있었다는 경험이 있으면 좋겟다라고 생각해서 배포를 하려는과정중 배포를 해보지 않아서 조금 찾아봐도 사용단어 가 어렵더라구용 질문점 1. Vercel로 무료배포시 트래픽 100gb가 사용자가 버튼을클릭하여 api 쏘는 량인가요? 2. 사용자가 들어오기만해도 트래픽이 발생하나요? 3. 요즘ddos가 유행이던데 vercel이나 gitpage도 어떤부분에 대해서 초과시 요금청구를 하나요?? 4. 배포를 할때 생각해야할 요금관련이 어떤것이 있을까요 아무래도 무료로 사용하면 좋겠지만 혹시나 요금이 발생한다는것에서 어디에서 발생될지 유의해야할점이 있을까요??

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

안녕하세요 올해 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/

Vercel로 배포할때 제 사이트에 광고를 넣어도 될까요?

혹시 광고를 넣으면 안된다던지 아니면 광고를 넣을려면 요금을 변경해야한다던지뭔가 있을까요

프론트엔드 배포가 의미하는 게 뭔가요?

안녕하세요. 저는 프론트엔드 취준생이고 포폴을 위한 프로젝트를 진행하고 있습니다. 도메인을 구입해서 팀원이 AWS로 배포하였는데, 여기서 백엔드 팀원분이 프론트엔드를 따로 배포할 거냐고 하셔서 얼떨결에 해보겠다고 하고 Vercel로 배포한 상태입니다. 저는 배포라는 게 사용자가 이용할 수 있는 하나의 사이트만 하면 되는 줄 알았는데, 서버와 프론트 모두 따로 배포하는 건가요? 이유는 뭔가요? 현재는 작업을 localhost에서 하고 있는데 이제 작업 시 배포한 사이트를 활용 하거나 포폴을 첨부할 때 이력서에 기재하기 위해 하는 걸까요..? 답변 주시면 감사하겠습니다.

브라우저 API KEY 노출 관련

안녕하세요 프론트엔드 개발자 취업을 준비 중인 취준생입니다 다름이 아니라 프로젝트를 진행함에 있어 궁금증이 생겼는데 생각보다 답을 찾기가 어려운 것 같아 질문 올려 봅니다 오어스나 지도, open ai 등의 api를 사용할 때, 개발자도구 네트워크 란에 들어가니까 api키가 쉽게 노출되더라구요 인증 토큰까지야 어치피 자신의 것이 노출된다고 생각하긴 하는데 api key나 다른 시크릿 키 등은 위험할 수도 있겠단 생각이 들었습니다 env가 생각보다 쉽게 노출되기 때문에 보안에 중요한 부분은 넣지 않아야 한다고 들었습니다만 위와 같은 경우, 브라우저에서 키를 보이지 않게 하는 방법이 어떤 게 있을까 해서 여쭤봅니다 조금 찾아 봤더니 사실 플랫폼 도메인과 redirect uri 같은 것을 등록하기 때문에 외부 오리진에서 api 키를 이용하는 것은 막혀 있다고 알고 있긴 한데 이렇게 잘 구성되어 있지 않은 부분이 있을 수도 있고, 말 그대로 민감한 정보가 노출될 수도 있다고 생각해서 가릴 수 있는 방법을 알고 싶습니다 FE는 ts vite react에 배포는 vercel로 진행했고 환경 변수는 버셀 프로젝트 세팅 환경 변수에 넣었습니다

사이드 프로젝트 리뷰 부탁드립니다.

안녕하세요. 개발자, 디자이너를 비롯한 혼자 작업하는 사람들이 함께 모여 작업할 수 있는 온라인 작업 공간을 만들었습니다. 개발자 3명, 디자이너 2명, 기획자 1명이 함께 진행한 프로젝트입니다. 픽셀 느낌을 살리려고 노력했습니다. ㅋㅋㅋ 일정 작업 시간이 지나면, 공용 낙서장에 낙서할 수 있는 토큰이 발급되니 작업 시간을 채워보시는 것도 좋으실 것 같습니다. 보시고, 부족한 점이나 개선할 점 알려주시면 감사하겠습니다! https://nerd-work-space.vercel.app

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

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

포트폴리오 좀 봐주시면 감사하겠습니다.

병역특례로 신입을 희망하는 학생입니다. 계속 불합격을 받아서 포트폴리오 피드백 받으려고 합니다. * 팀프로젝트는 구하려는데 자꾸 기획이 터져버리네요;; 제거 들가는 팀만 이런 건지 참 스트레스 엄청 받네요 https://introduce-murex.vercel.app/

프론트엔드 개발자를 지망하는 취준생인데 이력서에 뭐가 부족한 것일까요?

5월 19일에 국비 부트캠프를 수료한 후 현재까지 5개월 동안 구직 활동을 하고 있는 취준생입니다. 현재까지 100군데 넘게 스타트업, 중소, 중견, 대기업 가리지 않고 다 지원했는데 면접은 커녕 서류 통과가 되는 곳이 한 군데도 없습니다. 취업에 먼저 성공했던 동료 취준생과 디스코드의 개발자 커뮤니티를 통해 이력서를 수정하고 있는데 현재 맞게 진행되고 있는지 긴가민가 합니다. 그래서 여기 계시는 현직자 분들한테 피드백 요청드리고자 합니다. 가감없는 솔직한 평가 부탁 드리겠습니다. 1. 이력서 제목: '이력서 | 안녕하세요, 정연준입니다!' -부족해도 멈추지 않는 개발자 -아는 것과 모르는 것을 구분할 줄 아는 개발자 2. 자기 소개: `안녕하세요, 신입 React 프론트엔드 개발자 정연준입니다. -시행 착오를 통해 성장해나갑니다. -잘하는 것과 부족한 것을 구분하여 잘하는 것을 부각시키고, 부족한 것을 채울려고 노력하는 개발자가 될려고 합니다. -좋은 서비스와 더불어 사용자가 편하게 이용할 수 있는 서비스를 만드는 것을 목표로 하고 있습니다. ` 3. 개발 직무: 프론트엔드 개발자 4. 프로젝트: -기간: 2023.04.17 ~ 2023.05.19 -서비스 제목: One-Line -한 줄 요약: AI모델이 사용자가 작성한 게시글을 한 줄 요약 및 제목 생성 -프로젝트 종류: 팀 프로젝트 -역할: 프론트엔드 파트(메인 페이지 게시글 목록 전체 조회, 인증 페이지 구현) *메인페이지 게시글 목록 전체 조회 1) Trending 섹션 2) Recent Posts 섹션 *메인 헤더(Global Navigation 메뉴) *인증 페이지에 Firebase Authentication 기능 적용 5. 교육 이력: -기간: 2022.11.28 ~ 2023.05.19 -주관 기관: 엘리스 -교육 프로그램 이름: 엘리스 AI트랙 6기 -학습한 기술 스택: React, Express.js, MongoDB, HTML5, CSS3, JavaScript, GitLab, Python, MySQL, TensorFlow, Pandas, Node.js -세부 사항 *JavaScript 1) JavaScript 기초 2) 싱글 스레드, Event, Promise 개념 숙지 *React 1) React 기초 *Express.js 1) Express.js 기초 *MongoDB + Mongoose 1) DBMS 기초 2) MongoDB, Mongoose 기초 *데이터 분석 1) Python, SQL 기초 2) Pandas 기초 *인공지능 1) 데이터 과학 기초 2) 이미지 처리 기초 6. 링크 -프로젝트 링크: https://10team.vercel.app/ -프로젝트 시연 영상: https://drive.google.com/file/d/16Qni0swyC8HbAY2iqnEy5QWze9ianjln/view?usp=sharing -개인 블로그: https://chadolbaegi128.tistory.com/

사이드프로젝트중 proxy관련 질문있습니다.

현재 사이드프로젝트를 진행중인 취준생입니다. 프론트엔드측에서 로컬에서 원활한 API통신을 위해 proxy를 설정하여 cors를 우회하였는데요. Nextjs13을 사용중이고 rewrites 함수를 next.config 에서 사용하였습니다. 문제는 프로덕션이었습니다. 현재 저희는 Vercel 로 간편하게 배포를 해두었는데요. 프론트 개발서버에서는 cors를 우회하여 api요청과 응답이 정상적이었지만 배포된곳에서는 뜬금없이 403에러가 발생합니다. 혹시 proxy때문에 403에러가 발생하는것일까요?

API url주소를 개발서버,프로덕션일때 어떻게 구분해줘야하나요?

현재 Nextjs로 사이드프로젝트를 진행중인 프론트엔드 취준생입니다. 현재 저희는 개발서버에서 cors를 해결하기위해 next.config 에서 rewrites 함수 를 사용하여 proxy설정을 해주었는데요. 문제는 배포된곳에서 즉 프로덕션환경일때에도 proxy가 설정되어있어서 오히려 여기에서 CORS 에러가 발생하고있습니다. 즉 배포된곳에서는 API 요청을 https://own-server.vercel.app/ 요청을 보내져야하는데 localhost:3000으로 요청을 보내고있기 떄문이라고 생각하고있습니다. 이런경우 환경을 달리할때 api주소라던지 proxy설정이라던지 뭔가 나눠야할것같은데 갈피를 못잡겠어서 질문글 남겨봅니다 ㅠ

[Next.js] 미디어쿼리가 모바일 배포환경에서만 적용되지 않습니다ㅠㅠ

현재 Next.js를 이용해서 프로젝트를 진행하고 있는 대학생입니다! 프론트엔드를 개발하면서 반응형 웹을 계획하고 미디어쿼리를 이용해 반응형 레이아웃을 테스트하는데 데스크탑 개발환경 및 배포(vercel)환경에서는 미디어쿼리가 잘 작동하지만 모바일로 배포환경에 접속하면 미디어쿼리가 적용되지 않습니다. 해결을 위해 시도한 방법 1. "일반 css파일과 css_module파일이 특정 상황에서 충동을 일으킬 수 있다"는 정보를 토대로 모든 스타일 파일을 css_module로 통일했습니다. 2. "metadata에 viewport 구문이 빠져있을 수 있다"는 정보를 토대로 next/Head를 이용해서 viewport를 따로 명시했습니다. 위 방법들을 모두 시도했지만 여전히 데스트톱에서만 미디어쿼리가 작동하고 모바일 배포환경에서는 먹통입니다. 선배님들의 도움이 필요합니다ㅜㅜ

Vercel 빌드 배포 궁금한 점

기존에는 앰플리파이로 배포했던 프로젝트를 vercel로 배포하려고 설정을 하는 와중에 문제가 생겨 질문을 남깁니다. 번들링 되는 패키지들 중 프라이빗 패키지를 깃허브에서 ssh형식으로 받아와야해서 amplify.yml prebuild 부분에서 ssh-gent에 키를 등록하고 yarn install을 실행하고 빌드하는 방식으로 진행했는데 Vercel에서 프로덕션으로 디플로이를 하려고 하니 해당 패키지에서 키를 세팅해주지 않아서 인지 에러가 나면서 yarn install가 실패합니다. 공식문서에서는 깃허브 토큼 방식으로 적용하면 된다고 써져있어서 시도를 해봤는데 역시 실패하더라구요 깃헙에 올라가있는 프라이빗 패키지를 사용 할 수 있는 방법이 있을까요? 환경은 nextJS + typescript + yarn 입니다.

개인 사이드프로젝트 피드백좀 부탁드려요!

react를 사용해서 간단한 날씨에 따른 옷차림 추천 사이트를 만들었구요! pwa를 적용해놓은 사이트입니다! https://todays-outfit.vercel.app/

mediasoup를 ELB 환경에 적용하여 배

안녕하세요 mediasoup를 이용해서 웹개발 프로젝트를 진행중인 백엔드 개발자 (초보자/갓 배우는중) 입니다. 말그대로 1:N 화상채팅이 포함된 기능을 구현중인데, mediasoup가 ELB배포환경에서 작동하고 있지않아서 여기에 질문올려봅니다ㅜㅠ 아래, 시도해본것과 상황 등을 정리해본 내용을 첨부합니다! 제가 뭘 더 확인해볼수있을까요ㅜㅠㅠ?? 답변주시면 정말감사합니다!! (현재 nodejs로 express이용해서 백서버 구성하고있습니다!) -------------------------------------------------------------------------------- [상황] -> 1:N 화상통화 구현을 위하여 mediasoup를 이용 -> local에서 잘 작동 -> docker 로 local에서 돌리면 잘 작동 (announceIP를 도커 기본 IP "127.17.0.1"로 작동) -> front-vercel배포, server-local 잘 작동 -> server에서 비디오와 오디오를 보내주고 있지 않는 상황 [예상하고있는 문제] -> mediasoup는 연결이 완료되면 2000-2020 포트로 video를 보내주는데, 이부분 포트가 안열리는게 아닐까? -> announceIP에 적절한 IP를 넣지 않아서 안열리는게 아닐까? [배포환경] alb application loadbalance + docker [열어본 port 2000-2100; 2000-2100/udp] - EC2 - Elastic beanstalk 리스너 - proxy (nginx) - docker [시도해본 예상 announce Ip] - EC2 publicIP - dockerIp [mediasoup 공식문서] https://mediasoup.org/documentation/ [참고한 mediasoup영상 및 깃헙] => 유트브 https://www.youtube.com/watch?v=oCzq82xVnkU => 깃허브 https://github.com/jamalag/mediasoup3 [현재 깃허브] https://github.com/4simsimhae/Back - mediasoup4 branch 입니다! [배포된 server 링크] https://simsimhae.store/ [mediasoup test URL] https://simsimhae.store/sfu/:roomId (같은 roomId면 화면이 공유되어야합니다)