#front

부트캠프로 4개월 만에 포폴 쌓기

입문자도 할 수 있는 부트캠프를 하려고 하는데요 .. 프론트엔드 메인으로 하고 백엔드 협업 프로젝트까지 기초 잡고 진행하면 좋은 포폴 만들 수 있을까요? 찾아본 부캠 → https://camp.modulabs.co.kr/frontend 다른 부캠 추천 + 활동 추천, 피드백도 댓글로 자유롭게 부탁드립니다 !!!!

header에 민감한 정보가 노출되고 있는데, 어떤 방식으로 숨길 수 있을까요?

안녕하세요. 현재 네이버 검색 api를 사용하던 중 요청을 보낼때 header에 client id같은 민감한 정보가 나타나고 있어서 해결을 하려고 하는 중입니다. 서버가 따로 존재하지 않아서 front에서 직접 네이버 api를 사용해 요청을 하고 있는 중인데 어떤식으로 숨길 수 있을 지 궁금합니다..!

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

프론트엔드 부트캠프 어떤 걸 선택해야할까요

안녕하세요. 현재 4학년 1학기를 마친 26살 대학생입니다. 학교 수업에서 HTML, css, JavaScript를 배우고 난 뒤, 프론트엔드에 관심이 생겨 7월 모집인 프론트엔드 부트캠프에 지원을 하게 되었고, 감사하게도 두 가지 캠프 모두 최종합격을 하게 되었습니다. 엘리스 트랙 react 트랙 https://elice.training/track/react kakao x groom Deep dive 프론트엔드 개발자 과정 https://deepdive.goorm.io/frontend - 둘 중 하나를 선택해야 하는 상황인데, 이에 대한 도움을 받고자 질문 드립니다. 1. 현직자 관점에서 어떤 커리큘럼이 더 나을까요? 2. deep dive에서 진행하는 프로젝트가 조금 독특(?)하던데 (웹 애플리케이션 디버깅 및 최적화, 고객사 대응 프로젝트) 다른 부트캠프에서도 이런 프로젝트를 진행 하나요? 이에 대한 정보가 부족해, 질문 드립니다 🥲

서로 다른 front end 합치기

Vue로 작성된 a 라는 페이지에서 일부를 React로 작성된 b 라는 페이지를 보여주려면 어떻게 해야 되나요? gpt 물어보니 아래처럼 알려주던데 usestate나 그런 javascript가 잘 실행 안될까봐 걱정이네요

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

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

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

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

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

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

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

Front-end 신입 취준생입니다. 이력서 Feedback 부탁드립니다 !

https://docs.google.com/document/d/1ksH6FggIJ5eHc01-UjGvTiAEKb_VQYbLZzFbI8YKzbo/edit?usp=sharing - 사진이 필요한지 ? - 프로젝트가 부족한지 ? (퀄리티가 부족한 것 같습니다..) - 어떤 점을 추가하면 좋을지 ? 서류에서 계속 떨어지다보니 경력있는 분들이 보셨을 때 어떤 느낌인지 궁금합니다!

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

영상파일을 서버 - 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를 이용할 생각을 하였는데 영상변환에 너무 많은 리소스가 들어간다는 생각을 못했습니다. 영상 변환 및 업로드 작업을 경험해본 분들이 있다면 좋은 공유를 받고싶습니다.

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

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

devops 희망하는 엔지니어입니다. 조언 부탁드립니다

현재 만 2년이 조금 넘은 엔지니어인데 devops쪽으로 전향하려 합니다 진행하는 업무는 클라우드 쪽 시스템 구축/운영 하고 있고, 물경력이 조금 쌓인 느낌이라 열심히 발버둥 치고 있네요. 열심히 하는 것은 이제 문제가 없는데 잘 하는걸 못하는 것 같습니다. 이력서를 오픈해도 연락 오는 곳은 많지 않고 업계 분위기가 안좋긴 하지만 미래를 위해서 잘 하는 방법을 알고 싶습니다. 현재 AWS SAA, CKA 자격증 보유 중이며 프로젝트 내에서 Jenkins를 이용해 파이프라인을 구성해보기도 하고 주로 AWS를 이용하긴 했지만 대체로 심도있고 깊이있는 고민을 통한 기술 도입이 아니라 수동적으로 업무를 진행 했던 것 같습니다. 그래서 홈 랩을 구축해서 토이 프로젝트 형식으로 devops + front + backend 를 구성해 직접 애플리케이션을 띄워 볼까 생각중에 있습니다. 뭐부터 해야 좋을지 감이 오지 않네요 조언 부탁드립니다..

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

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

Backend에서 endpoint를 무슨 기준으로 정하는지 궁금합니다

저가 front 부분만 공부하다가 지금 처음으로 서버 쪽 endpoint를 작성해보고 있습니다. 이 고민을 하게 된 이유는 처음에는 cookie로 정보를 보낼까 했다가 아는 backend 지인이 cookie로 보통 보내지 않고 필요한 정보는 dynamic routing을 이용해서 params로 전달하는 것이 좋다고 해서 변경하다가 endpoint가 복잡해져서 잠깐 멈추고 여기에 질문을 올립니다. endpoint를 정하는 기준이 있을까요?

REST API 서버에서 페이지 이동

현재 REACT FRONT END SERVER와 SPRING BOOT REST API SERVER 두 개의 서버로 된 프로젝트를 만들고 있는데 제가 알기로는 REST API 서버에서는 VIEW에 관여하지 않고 그렇기 때문에 REST API 서버에서 페이지 이동을 못 시켜주고 또 안시켜주는걸로 알고 있는데 REST API 서버에서 페이지 이동을 시켜달라는 요구에 제가 설명하는 능력이 부족해서 그런데 어떻게 설명하면 좋을까요?

유튜브 알고리즘 영상이 떠서봤는데요!

신입 백엔드 개발자 최소 기준이라고 하시면서 -필수- CRUD REST API JWT Swagger ERD -옵션- Docker Frontend 현업에 계신 시니어 개발자분들이 보셨을때 주니어 개발자들이 필수는 다 가지고있었을까요?? 저는 스프링만 진득하게 공부하려고했는데 늦은걸까요? ㅠㅠ 저기서 crud rest api빼고는 아직 잘 모르겠네요

비전공자 부트캠프 선택 조언

안녕하세요. 비전공자이고 프론트 희망하는 사람입니다. 지금은 리액트로 간단한 axios써서 투두리스트 앱 정도 만들 수있습니다. 다름이 아니라 이 부트캠프 어떤가 해서 글을 올립니다. 기업 연계라는 점 때문에 골랐는데 1기라.. 어떤지 잘 확신이 안서네요 https://udemy.wjtb.co.kr/bootcamp/saramin1?utm_medium=paid&utm_source=allcon&utm_campaign=recruitment_07&utm_content=front-back&utm_term=231107&fbclid=IwAR2Azy9Sb7jDDRRwWwg8NcyHefp6P4psO18az80g3RFJLHcqoiS6wbHu9Fc

프론트 커리어,,,,,,

안녕하세요 Frontend로 일하고 있는 신입개발자 입니다. 지금 회사에서 React 커리어를 6개월 정도 경력을 쌓았고 이전 회사에서는 스타트업이어서 수익 문제 때문에 VueJS로 6개월 정도 커리어를 쌓았습니다. 그런데 이번 회사에 합류한 팀이 어쩔 수 없이 해체 되어서 회사에 주력적인 Frontend 기술인 Sencha ExtJs를 사용하게 될 것 같습니다. 구인 사이트에 찾아보니까 Sencha를 사용하는 기업이 많이 없는 것 같아서 커리어를 쌓아도 되는지 고민 됩니다. 많은 의견 주시면 좋겠습니다.

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

국비교육 조언부탁드립니다.

전자공학과를 나왔고 과에서 전공에 코딩이 많아서 접하는 일이 많다보니 흥미를 갖게 되었습니다. c언어, java, linux 등 하나를 깊게 배우지 않고 조금씩 접하다 보니 제가 배운게 뭔지 몰라 개발자가 되고싶다는 막연한 생각을 하던 와중에 국비지원을 알게 되었습니다. 저는 대부분 개발자를 접할 때 웹으로 많이 시작을 한다고 해서 저도 백엔드쪽을 집중적으로 공부를 하고 추후에 클라우드도 공부를 해서 데브옵스를 전문적으로 공부를 하고 싶다는 생각을 했습니다. 그래서 여러가지 학원들을 보고 있는데 배우는 내용과 난이도가 어떤지 몰라 조언을 구하려고 합니다. C언어는 다 배웠고 JAVA는 조금 배우고 졸업작품으로 안드로이드 스튜디오로 간단한 어플리케이션 만든정도 입니다. A학원 Database : Oracle DBMS, 설치 및 Admin, SQL 기본과 활용 Programming : Java 환경설정, 기본문법활용, 클래스, 네트워크, JDBC Front-end : HTML/CSS, Javascript, jQuery Back-end: 웹개발 환경구축, 서블릿&JSP, AJAX&MVC패턴, 리눅스&클라우드 Framework: Spring Framwork(DI, JDBC, MVC), Springboot, Mybatis B학원 클라우드 기반 웹 프로그래밍 - 클라우드 기술의 이해 (리눅스, NCP Laas 등) - 웹 프로그래밍 기초 (HTML, CSS, BootStrap) - 자바스크립트 - 리액트 기초프로그래밍 - 자바 프로그래밍 - 데이터베이스 (MySQL, JDBC) - 스프링 입문 - 스프링 데이터 - SaaS API 사용하기 DevOps 프로그래밍 - 네이버클라우드 플랫폼 - DevOps 를 위한 리눅스 - NCP DB&스토리지 - 도커를 활용한 컨테이너 구축 - 운영자를 위한 DevOps - 개발자를 위한 DevOps MSA 기반 프로그래밍 -MSA 개발을 위하 쿠버네티스 - 스프링 클라우드 - 스프링 배치 - 스프링 시큐리

DRF를 자세히 공부해보고싶은데 독학으로 하려니 자꾸 턱턱걸립니다... django 백엔드에서 프론트엔드로 보낸 data가 안불러와져요

django rest framework로 웹을 개발하는 것을 공부하는 중인데 막히는부분이 많아서 점점 괴로워지네요. 이거를 보면서 독학하고 있는데요. https://wikidocs.net/book/9596 django views.py에서 response(data)를 발신하는 것까지는 되는데 next.js를 이용한 프론트에서 data를 받아오지 못하고 있어요... 왜 그럴까요? 디버그 메시지가 안뜨니 더 알기가 어렵네요. # backend/views.py """ from django.shortcuts import render from django.http import HttpResponse from rest_framework.decorators import api_view, permission_classes from rest_framework.permissions import AllowAny from rest_framework.response import Response # Create your views here. @api_view(['GET']) @permission_classes([AllowAny]) def hello_world(request): return Response('Hello, World!') # frontend/index.js """ import React, { useState, useEffect } from "react"; // config.js export const BACKEND_URL = "http://127.0.0.1:8000/"; const Home = () => { // State to store the data fetched from the backend const [data, setData] = useState(""); // useEffect hook to fetch data from the backend when the component mounts useEffect(() => { // Fetch data from the backend API using the '/api/hello' endpoint fetch("${BACKEND_URL}api/hello") .then((response) => response.json()) .then((data) => setData(data)); }, []); // Render the component JSX return ( <div> <h1>Welcome to Fine-Tuning Chatbot!</h1> <p>{data}</p> </div> ); }; export default Home; """ pure django-template를 이용해서 홈페이지 만들고 그 원리를 이해하는 것까지는 되는데 DRF는 정말 다른 세상이라고 느껴지네요...ㅎㅎ 좋은 강의나 책이 있으면 추천부탁드립니다. ㅠㅠ 위에 언급한 강의로 RESTful 배워보려는데, 기술스택이 많아서 그런건지 정보량도 많고 어렵네요 ㅠ

Next.js server component(app router)의 auth 관련 질문 입니다.

안녕하세요. 이번에 Next.js(13)에서 최신 기술인 app router를 기반으로 자그마한 홈페이지를 구축 중에 있습니다. JWT 기반으로 SSR을 구축하고 있습니다. middlware로 어떻게 든 토큰 재발행이 가능한 로그인 구현을 완료 했습니다. 하지만 ServerComponent이다 보니, RSC에서 accesstoken 혹은 refreshtoken과 같은 인증 토큰이 만료 되었을 때, 재 발행을 하려면 어떻게 해야 할까요? cookie나 header는 접근은 가능해도 Set-Cookie를 내려 보내거나 할 수는 없는 걸로 문서에 나오고 실제로도 되지 않습니다. 어떻게 하면 ServerComponent에서 토큰을 재발행 하거나 다른 인증 방법이 있을 까요? 아니면 JWT + Session으로 가는 조합을 사용 해야 할까요??? 또, client와 server 간의 토큰 공유를 위해 access-token만 http-only를 해제하고 사용 중에 있습니다. 이게 cors나 csrf와 같은 공격에 취약한 문제가 있어서 이게 올바른 구현 방법일까요? 일단 제가 찾은 방법으로 가장 쉽게 해결되는 방법은 아직 실험 단계인 server action을 활성화 해서 클라이언트에서 토큰을 가지고 있을 필요가 없이 서버에서만 관리 하는 방법입니다. BFF을 일부 수용해서 해결 했습니다. front <-> BFF <-> api

Redux 사용이유

안녕하세요 frontend 신입 개발자입니다. 운좋게 비전공자에서 교육 수강 후 바로 취업은 했지만, 성에 차지 않아서 바로 이직 준비를 하고 있습니다. 이직 준비과정에서 자소서에 쓴 내용도 그렇고 현재 기업에 취업할 때 받은 질문도 그렇고 해서 궁금한게 있습니다. 제가 첫번째 프로젝트에서 리덕스를 쓰고 그 이후부터는 리코일을 사용했습니다. 그 이유가 리덕스는 처음 배울때 너무 어려웠고, redux-thunk등 비동기 처리코드가 너무 길고 복잡하다는 단점이 있고, 리코일은 리액트의 useState훅과 비슷한 형태로 쉽게 전역 상태관리를 할 수 있다는 점이었습니다. 그래서 리코일을 사용한 이유는 저 위에 말한 이유로 대답을 했었는데, 첫 프로젝트에서 리덕스를 사용한 이유를 말하지 못했습니다. 그래서 면접에선 솔직하게 그땐 첫 프로젝트라 그때 검색했을 때 가장 많이 사용하는 것 처럼 보였기 때문에 리덕스를 선택한 것이지 장, 단점을 파악하진 못했다고 대답을 했습니다. 다행히 기업은 스타트업이고 면접관이 젊으신 분이어서 솔직함을 좋게 봐주신거 같은데, 이후에 대기업 면접에서도 똑같이 말하면 안될거 같아 고민입니다. 검색을 해봐도 리덕스 사용 이유보단 리덕스를 버리고 리코일로 넘어간 글만 보이는데, 혹시 리덕스를 사용하시는 분들이 있으시다면 그 이유를 알 수 있을까요?

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면 화면이 공유되어야합니다)

django의 request로 받는 imagefile

안녕하세요. 저는 스타트업회사에서 백엔드 개발자로 근무하고 있습니다! django의 drf 프레임워크를 활용하여 api를 생성하여 사용합니다. 개발을 하던 도중에, 모바일 앱(react-native)에선 사진을 uri, name, type의 필드들로 이루어진 json 객체를 보내는데 이것을 어떤 원리로 django가 사진이라고 이해하고 저장하는지가 궁금합니다 왜냐하면, 기존에 있던 사진들을 s3에 저장된 url 문자열로 frontend에 보내주는데, 그 값을 가지고 다시 uri, type, name으로 쪼개서 다시 백으로 넘겨준다고 하더라고요(기존 사진을 그대로 사용하는 경우) 그런데 그렇게 받은 사진에 대한 객체를 처리하기 전에, s3상에서 그 파일이 삭제가 된 경우에도 정상적으로 작동하는 이유를 모르겠어서 그렇습니다 웹(react)에서는 같은 백 api를 사용하더라도 작동이 안 되고, 앱에서는 작동이 잘 되는데 이것 역시 원인을 잘 모르겠습니다...

cloudflare vs aws

안녕하세요 최근 서버 아키텍처 및 보안에 관심이 생겨 대표적인 서비스인 aws의 다양한 기능들을 맛보기로 구경하고 공부해보고 있습니다. 역시 ec2 같은 기본적인 서비스 외에도 cloudfront, WAF, ACM, event bridge 등 이미 수많은 서비스들이 aws에 모두 존재하더군요.. 그러나 아직 제대로 사용해본적이 없어 있다는 것만 알고 구체적인 비용 정책이나 자세한 사용법은 모르고 넘어간 상태입니다. aws에 다양한 기능들이 있으며 배포 시에 필연적으로 aws를 마주하게 되지만.. 아직 취업을 하지 못하고 사이드 프로젝트만 하는 저는 비용적인 면이 크게 부담이 되었는데요.. 여기서 경제성과 편리성을 고려했을 때 cloudflare의 서비스들이 굉장히 매력적으로 느껴졌습니다. 보안 전문가가 아닌 취준 백엔드 개발자인 제가 몰랐던 보안취약점까지 모두 cloudflare가 관리하며 프리티어에서는 미국 리전이긴 하지만 cdn 서비스까지, 그리고 이 모든 점을 무료로 제공해준다는 점이 말도 안된다고 생각이 들었습니다. 또한, aws s3 대신 cloudflare r2를 사용하면 미친 비용절감이 된다는 영상도 보았는데 실무에서는 다들 aws만 사용하시는 것 같더군요.. (cloudfront+WAF+ACM 등) - s3 - ec2 와 같은 아키텍처를 (cloudflare service) - r2 - ec2로 변경하면 더 나은 보안 및 편리성 그리고 경제성을 챙길 수 있을 것 같은데 이렇게 두지 않는 이유가 있을까요?? 클라우드 서비스의 요금제도 aws와 비교했을때 제공하는 서비스에 비해 저렴한 편이라고 개인적으로 생각되네요.. 아직 잘 모르는 지망생이라 다양한 점들을 고려하지는 못했지만 aws를 사용하는 데는 이유가 있을거라고 생각이 됩니다! 의견 한번씩만 부탁드립니다! +) cdn 서비스는 한국 리전을 사용하려면 엔터프라이즈 요금제를 써야하는데 이게 엄청 비싸다는군요.. 그렇다면 해외 접속도 빈번한 글로벌 서비스라고 고려한다면 위 아키텍처가 이점을 발휘할 수 있을까요?

24살 첫 스타트업 직장인데 고민이 있네요..

안녕하세요. 올해 24살인 신입 개발자입니다. 고등학교때 기능대회 준비하면서 C로 모바일로보틱스, C++ DX9로 게임개발도 해보고, 그러면서 상도 몇 번 따면서 개발자가 되기로 마음먹었습니다. 군 제대후 국비과정(spring boot)을 마치고 근무중입니다. 생각보다 취업이 쉽지 않았습니다... 3개월정도 여자친구 집에서 동거하며 구직활동 하다 스타트업에서 연락이 와 다니게 되었습니다. 회사 직원은 사장님과 저 둘이고, 첫 프로젝트 "완료 후" 4~5년차 사수분(사장님 친구)이 오신다고 하셨습니다. 모 대기업 백엔드 + 보안 쪽이십니다. 물론 그 분이 오시기 전에도 가끔 저녁에 들르셔서 SQL문도 봐주시고, 보안 이슈 등 이것저것 봐주시고 가십니다. 한 분 더 계신데 이분은 그냥 사장님 친구분이라 게임하러 오십니다... 직원 아니고 저 퇴근시간 쯤 오시더라구요. 그리고 첫 프로젝트는 깔끔하게 엎어졌습니다. 이건 그냥 경험치 먹인다고 생각하던 반 날리려던 프로젝트라네요. 두 번째 프로젝트는 쉽게 말해 돈되는 프로젝트이고, 그 4~5년차 친구분이 엔진을 만드시면 전 웹 어플리케이션(front + back)으로 전부 구현하면 됩니다. 제가 걱정되는 부분은 원래도 DB, Java, Spring을 다루는 백엔드를 희망했었는데, 회사에 1인 개발자로서 어쩌다보니 리액트도 배우게 되었습니다. 원래도 C++을 이용해 개발을 했다보니 백엔드는 기초지식(디자인 패턴 등)이 있는데, 프론트엔드나 JS쪽은 학원 시절에도 많이 겪어보지 못했습니다. 문제는 이번 프로젝트가 javaScript로 스크래치같은 블록코딩을 구현해야 하는데... 느낌이 신입 개발자에게 주어져야할 시간보단 짧게 주어질 것 같습니다. 이건 확실합니다. 그래서 걱정이 태산입니다. 회사 상주 인원이 없고, 사장님은 본업차 제주도에 거의 가십니다. 사무실엔 항상 혼자이고 기술적인 질문이 있으면 쓰라고 챗CPT4를 사주셨는데... 아무래도 한계가 느껴집니다. 솔직히 말하면 제가 뭘하고있는지 모르겠습니다. 물론 질문을 폭탄처럼 모아서 그 사수분이 가끔 오실 때 드리면 다 알려주십니다. 그래도 회사에 상주 인원이 "나 밖에" 없다는건 제가 게으른지 모르겠지만 집중도 잘 안되고 힘듭니다. 최저임금에 가까운 연봉을 받고있습니다. 이 부분은 제가 회사에서 "배워서 써먹히기" 위해 직접 제안한 것이지만 매일매일 혼자 출근해서 혼자 밤까지 남아있다보니 그냥 저 돈 안받고 집에서 공부하고싶습니다.. 생각보다 사장님 구박도 좀 심합니다. 이미 이번주와 다음주 뭘 할지(스프링 시큐리티하고 토큰 전달 방식으로 로그인 구현) 전부 일정 표 정리해서 직접 드렸는데, 지도 API로 지도 구현도 해보랍니다. 그래서 "그것만 하면 1~2일은 분명히 걸릴것 같습니다." 라고 확실히 말씀드렸으나, 틈틈히 해보라고 하시곤 오늘 갑자기 작업물 보내라하시네요. 전 이미 지도 개발 작업이 포함된 일정 표를 업무지시 받은 당일 보내드렸습니다. 거기엔 오늘(7.12) 남은 시간내서 작업한다고 적혀있었는데 왜 아무것도 안되어 있냐. 완성하고 퇴근하라... 답답합니다. 제가 코더인 시간만 있었을 뿐, 돈을 받는 개발자로 일하는게 처음이라 참 두서없게도 글을 쓴것 같습니다. 현직 개발자 삼촌분들의 의견을 꼭 듣고싶습니다. 긴글 읽어주셔서 감사합니다.

Next.js와 SSR관련 질문있습니다 !

Next.js 를 공부하다가 궁금증이 생겨 질문합니다 ! 1. Next.js로 만들어진 프로젝트를 S3 + CloudFront와 같은 정적 웹사이트 형태로 배포시에는 SEO와 같은 SSR의 이점을 볼 수 없고, SSR이 동작을 안하는 걸까요?! 2. 페이지 내에서 useEffect를 이용해 api fetch를 통해 데이터를 가져오는 부분이 CSR형태인가요? getServersideProps를 통해 데이터를 받아오면 혹시 이 방법과 비교했을때 장점이 무엇이 있는지… 궁금합니다 ! 질문이 길지만 고수님들 답변 부탁드립니다😭

Next.js 사용시 Spring 을 혼용해서 사용하는 경우 질문하고싶어요.

안녕하세요. spring (backend) + extjs (front) 로 개발을 하다가, 요즘 nextjs 공부를 하고 있는데요 아직 개념이 잘 안 잡혀서 궁금해서 질문 드립니다. nextjs 가 fullstack framework 로 알고있고, next에서도 backend 기능이 가능하던데요 13버전 기준 app/경로/route.js 에 GET/POST 등등 사용해서 서버 처리가 가능하던데 혹시 위처럼 사용하지 않고, spring 백엔드로 axios를 사용해서 처리하는 경우와 어떤 차이점이 있나요? 비즈니스 로직의 처리 주체가 next인지 spring인지의 차이만 있는것인지.. 혹시 next + spring 을 사용하게 되면 얻는 "이점" 이 무엇인가요? 혼용해서 사용할때 얻을수 있는 장점이 궁금합니다.