#브라우저

개발자 커리어(포지션)를 위한 이직을 해야 할까요?

안녕하세요. 5년차 Windows 개발자입니다. 현회사에서 포지션 관련 고민이 계속 생겨서 여기 계신 분들께 조언을 얻고자 질문 드립니다. 현회사에는 Windows 포지션으로 경력 입사를 했지만, 실제로는 서버, ai 관련 에이전트(파이썬), js 등의 업무 비율이 주 포지션(Windows, c/c++)보다 훨씬 높은 상황입니다. 추후에는 안드로이드와 브라우저 개발에 참여할 거 같습니다. 이렁 상황이다보니 요즘들어 이직 고민을 하게 되었고, 두 회사에서 제안이 와 한 곳은 최종합격, 한 곳은 처우협의 중입니다. 1번 회사 - 스타트업 - Windows 시스템 및 응용 개발(드라이버~응용)만 약속 - 리더 직책 고려 중 - 시드 투자 단계 - GS 1등급 획득 - 업력이 높진 않지만, 모회사가 존재하여, 기술지원과 QA 인력이 뱔도 존재 - 모회사 거래 업체에 제품 계약이 이뤄지고 있는 중 - 급여 15프로 인상, 복지 및 혜택 더 좋음 2번 회사 - 현회사와 경쟁사로 중소기업 - Windows 시스템 및 응용 개발(드라이버~응용)만 약속 - 제품 유지 보수 및 연구가 주 업무 - 처우 협의 중이지만, 연봉 및 복지는 현회사와 차이 없을 것으로 예상 현회사 - 상장 중소 기업 - Windows 포지션으로 들어왔지만, 다른 업무 비율 높음 - 유지 보수(고객사 페이지, js) 작업 등 - 주 포지션 외 프로젝트에 투입(ai 에이전트 서버) - 면담 후, 안드로이드, 자체 브라우저 개발 프로젝트 투입 가능성 이런 상황에서 저의 제일 큰 고민은 1. 이직을 하여 개발자 전체 커리어를 7~8년차까지 Windows로 깊게 가져가면서 조금씩 리눅스 등으로 확장하는 것이 맞을지 - 이 경우, 스타트업을 가게 되면 이후 이직이 많이 어려울지 고민됩니다. 2. 현회사에서 다양한 포지션의 프로젝트를 경험하며, 지금부터 넓게 가져가는게 맞을지 입니다. 어떤 선택을 하면 좋을지 조언 부탁 드립니다.

next.js15 img태그에 Link태그 감싸기

안녕하세요 next.js15에서 img태그에 링크를 감싸고 있는데 아예 아무 반응을 하지않습니다.. useRouter도 먹히지않고 브라우저 콘솔에는 DOM에 클래스가 존재하지않는다고 뜨는데 아무리 찾아도 이유를 모르겠습니다

이직 시 단독 작업한게 걸림돌이 될까요?

프론트엔드 3년차 입니다. 디자이너,백엔드 개발자와 작업은 같이 했지만 프론트엔드 파트는 혼자 전부 진행하였습니다. 회사에서 보낸 시간이 너무 많아서 1년반정도가 인생에서 사라진 느낌이 들 정도였습니다. 그동안 트러블 슈팅, 혼자서 해결한 문제들이 너무 많아서 그런것들 보단 ( 알고보면 단순한 내용들이거나 시니어가 있었다면 금방 해결될 문제들입니다. ) 어려운 전제조건 하에 개발한 기능, 수치적으로 표현 가능한 기능에 대해서 이력서에 기입했습니다 허나 기입한 기능들 자체가 글로 적으면 대단해 보이지가 않는다는게 문제입니다. 오히려 단독으로 했다고 하면 과장해서 적어놓은 사기꾼같아보일까봐 걱정입니다. 이력서에 적힌걸 보면 정렬,최적화,구조 변경 이런것들이거든요... 근대 그것들을 클라이언트 단에서 디자인 패턴까지 쓰지않으면 안될정도의 복잡한 로직을 구현한거긴합니다만 결과 자체는 단순히 필터링 정렬 표기 그런것들입니다.. , 그걸 이력서에 다 기입할 수가 없어서 고민입니다. (react , next를 사용하였습니다) 또한 혼자서 서비스와 백오피스를 다 작성했다보니 효율적으로 수정 가능하게 진행했다, 다른 프로젝트에서 사용하기 용이하게 코드구조를 변경했다. 정도만 적을 수 밖에없었습니다. 어렵기 보단 얼마나 효율적으로 구조를 잡고 진행하냐의 문제였거든요. 이력상으로 봤을때 화려한 기능이나 서비스를 만든건 아니라서 더 더욱 차반 취급받을까봐 고민입니다.. 혼자서 많은 고민과 문제를 해결했지만 3자입장에서 봤을때 전혀 볼게 없는 심각한 상황입니다.. (시간만주면 3d든 스트리밍 chart든 브라우저 api 활용이든 map api든 canvas든 다 금방 배워서 할 자신이 있지만 그런 종류의 작업들은 회사 일로선 전혀 하질 못했습니다.. ) 연봉을 대거 낮춰서 신입 자리라도 지원해야할까요..? 최근엔 회사에서 먹고 자지 않아도 될정도라 알고리즘도 공부하고있고 트러블 슈팅이나 개발하면서 문제해결에 도움되었던 것들을 적으려고 블로그도 만들고 있긴합니다만. 너무나도 부족하고 모자라 보입니다.. 개발 실력도 올랐고 배포,운영 경험도 쌓였지만 작업내용 특성상 죄다 공개를 하지 못하니 어떻게해야할지 고민입니다..

프론트엔드 1차 직무 면접

안녕하세요, 혹시 프론트 1차(직무) 면접 봐보신 분들 중에 회바회겠지만 경험상으로 일반적인 기술 개념(js, css, 브라우저 등) 위주로 물어보셨나요 아니면 이력서 기반으로 많이 물어보셨나요?? 준비해야 할게 참 많은 데 우선순위를 좀 두면 좋을 것 같아서요 !

시스템 폰트 사이즈에 의한 RN 어플 레이아웃 변경

안녕하세요 선배님들 처음으로 어플리케이션 프로젝트를 진행중입니다... 웹으로 할 때는 극적으로 작게 줄인 브라우저 창 및 극적인 스케일링을 반응형으로 적절히 조절했었는데 스마트폰이라는 환경상 너무 작은 디스플레이에 많은 정보가 존재하고 시력이 약한 노년층의 경우 스마트폰 자체의 폰트사이즈가 커서 레이아웃 조절에 어려움을 겪고 있습니다... 폰트 사이즈를 계산해서 레이아웃을 변경한다는 엄청나게 복잡한 생각을 하다가 스마트폰의 폰트 사이즈를 따르지 않게 고정하고 앱을 처음으로 실행할 때 사용자가 원하는 폰트 사이즈 선택에 맞춰 레이아웃을 설정시키는 초기 세팅 모달을 띄우는 것이 훨씬 간단하다는 생각이 들어서 이 방향으로 굳어지는 중입니다. 혹시 선배님들은 작은 디스플레이에서의 사용자의 폰트 사이즈 설정에 따른 레이아웃 조절을 어떻게 구현하시는 지 궁금합니다... 두서없는 질문을 읽어주셔서 감사합니다.

자바스크립트의 이벤트 처리 질문

리액트로 이미지 inpainting 컴포넌트를 만들고 있습니다. 사용자가 이미지 업로드를 하면 canvas 영역에 그 이미지가 채워지고 그 이미지에 mask 영역을 칠할 수 있는 이미지 에디터 컴포넌트인데요, 궁금한게 생겨 질문드립니다. 첨부한 코드는 컴포넌트의 코드중 이미지 업로드 시 onChange 이벤트의 처리기인 handleImageUpload 함수와, handleImageUpload 함수에서 호출되는 loadImage 함수의 코드입니다. 사용자가 input 요소에 이미지를 업로드하면 onChange 이벤트가 발생해 handleImageUpload 함수가 실행되고 loadImage 함수가 실행됩니다. loadImage 함수가 실행되면 img 객체가 생성되고 img 객체의 src를 지정하죠. 그러면 브라우저는 이미지 로딩을 시작하고 이미지 로딩이 완료되면 onload 콜백함수가 실행됩니다. 저는 이 과정을 자바스크립트의 콜스택, 이벤트 루프, 태스크큐 구조에서 나타내보자면 다음과 같다고 생각했습니다. 1. 초기상태 콜스택 : [ ] 태스크큐 : [ ] 2. 사용자가 파일을 업로드 -> onChange 이벤트 발생 콜스택 : [handleImageUpload] 태스크큐 : [ ] 3. handleImageUpload 내부에서 loadImage 함수 호출 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] 4. loadImage 내부에서 img 객체 생성 및 src 할당 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] Web API : 이미지 로딩 시작 5. loadImage 함수 종료, handleImageUpload 함수 종료 콜스택 : [ ] 태스크큐 : [ ] Web API : 이미지 로딩 진행중 6. 이미지 로딩이 완료되면 Web API가 onload 콜백을 태스크큐에 추가 콜스택 : [ ] 태스크큐 : [onload] Web API : 이미지 로딩 완료 7. 이벤트 루프가 콜스택이 비어있음을 확인하고 태스크큐에서 onload 콜백을 콜스택으로 이동 콜스택 : [onload] 태스크큐 : [ ] 8. onload 콜백 실행 (캔버스에 이미지 그리기 등) 콜 스택 : [onload, drawImage, ...] 태스크큐 : [ ] 일단 이 과정이 맞나요? 만약 이게 맞다면 생기는 궁금증이 있습니다. Web API에서 이미지 로딩이 진행되는동안 loadImage 함수 및 handleImageUpload 함수가 종료되면 loadImage 함수 내에서 생성된 img 객체는 가비지 컬렉터에 의해 지워져야 하지 않나? 그렇게 img 객체가 GC에 의해 사라지면 이미지 로딩이 완료되었을 시점엔 img 객체의 onload 함수도 없어진것이니 onload 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

리액트에서 브라우저 Intersection Observer 사용 질문,

안녕하세요, 채팅 관련 프로그램을 개발하고 있습니다. 다름이 아니라 Intersection Observer를 통한 화면 최적화를 진행하고 있습니다. 원하는 최적화 방식은 isIntersector의 true/false 여부를 통해 화면에 메시지 컴포넌트를 제공하고 있습니다. 동작은 정상적입니다. 그런데 문제가 있습니다. 부모에 Intersection Observer를 두나 자식에 Intersection Observer를 두나 아래 2가지 버그가 동일하게 나타납니다. 1. 다소 긴 채팅 또는 무거운 채팅 메시지는 화면 영역에 나타났음에도 isIntersector가 가끔 false 인경우가 있습니다. 그래서 부모가 높이는 가지고 있으나 내용이 빈 경우가 종종있습니다. 2. 메시지가 화면에서 딱 사라지는 순간 isIntersector가 무한 루프 되면서 true/false를 번갈아 가면서 반환합니다. 브라우저는 엣지입니다. 크롬은 불가능합니다. 1번 같은 경우는 산발적으로 발생하고, 2번은 저 상태가 되면 무조건 발생하는 에러입니다. 검색을 이리저리 해봤는데 도통 해결방법이 나오지 않아 여기에 문의드립니다.

react 모바일웹 헤더가 Safari 상단 url 바 가림 현상

React / typescript / tailwindcss 헤더를 fixed / sticky로 고정을 해서 크롬에서는 잘 적용됬는데 아이폰 safari 브라우저에서 설정 - 단일탭으로 하고 들어가면 첨부파일처럼 상단 URL 바를 제 헤더가 가려버리는 현상이 나옵니다. index.html에 아래 속성도 추가된 상태입니다ㅠㅠ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 저와 비슷한 현상인 분 계실까요??

next.js url 파라미터 변경 시 데이터 호출

next.js 서버 컴포넌트에서 fetch후 클라이언트 컴포넌트로 넘겨주는 구조에서 브라우저 url 파라미터 값이 바뀔때마다 새로운 데이터를 호출하도록 구현하고 싶습니다,. useEffect를 활용하려했으나 fetch 함수가 async다보니 클라이언트 컴포넌트에서 사용할 수 없더라구요... 방법이 뭔지 모르겠습니다ㅠㅠ 알려주시면 감사하겠습니다!!

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

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 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 * 프로젝트의 중요 정보는 제외했습니다.

네이버 앱 css 적용 범위

안녕하세요 리액트로 웹 페이지를 만들면서, 브라우저별로 css가 잘 적용이 되었는지 확인을 하면서 궁금한게 생겨서 질문을 남깁니다. 크롬이나 웨일에서는 잘 적용이 되는 부분들이 네이버 앱을 통해 웹 페이지에 들어가는 경우에는 css가 적용되지 않는 부분이 있더라구요.. 적용하는 css마다 일일이 확인을 해야하는건지.. 아니면 caniuse에서 어떤 브라우저의 어떤 버전에 해당되면 되는건지 궁금합니다. 혹시 같은 고민을 하고 계시거나 정보를 아시는 분이 있으면 좋겠네요

다국어 변역 api사용 저장시 느린 속도 문제

DB에 정보 저장하는데요 ranslationResponse response = restTemplate.postForObject(TRANSLATION_ENDPOINT, request, TranslationResponse.class); api를 통해 영어 중국어 일본어로 변역해서 변역 내용 같이 DB에 저장 하려고 합니다. 그런데 저장할 때 문장이 길어지면 변역 시간이 느려저서 사용자쪽에서 많이 기다려야 하는 상황입니다. 기본 내용만 저장하고 파이널리문에서 번역해서 다시 저장하는 방법을 생각 해서 적용 해보았는데 브라우저에서 결과 받는 속도는 같았습니다.ㅠ 그렇다고 브라우저에서 ok 결과를 받은 후 번역을 비동기로 호출하는 것도 불필요한 비용 발생일 것 같고요 창을 먼저 꺼버리자니 오류 처리 못할 것 같구요 저장중 이라는 알림으로 처리 해야하는건지 사용자 입장에서 개선 하고 싶은데 방법을 잘 모르겠습니다. 혹시 해결방안 알고 계신분이 계시다면 조언 부탁드립니다.

인턴생활이 원래 이런건가요..?

안녕하세요 교수님의 추천으로 방학기간동안 한 erp중소기업에서 인턴을 하고 있는 학생입니다 다름이 아니라 제가 회사생활도 처음이고 이게 맞나 싶어 질문 드립니다.. 인턴 생활을 시작하자마자 갑자기 회의실로 부르더니 유지 보수를 1도 안한 오래된 프로그램을 보여주면서 이제 브라우저 호환성 문제가 생겼으니 저보고 고치라고 지시했습니다. 여기까지는 이해 합니다 이런저런 경험 쌓고싶어서 인턴 하는거니깐요..근데 문제는 여기서 시작됐습니다. 일단 프로그램의 구조의 대한 설명을 안해줍니다. 오류가 발생하면 먼저 구조 파악 후 원인을 찾아야 한다고 생각하는데요.. 절대 안알려줍니다. 여러번 질문 해봤으나 알아서 찾아 고치라고 화내고 짜증내는 답변만 돌아올뿐입니다.. 이런식으로 방치해놓고 갑자기 어디까지 다했냐고 물어봅니다 당연히 프로그램 구조 파악하는데 시간을 쏟은 저는 일부분만 고칠 수 있었고요…그럴때마다 아직도 여기냐면서 모르는게 있으면 질문을 해야지 질문은 왜 안했냐 라고 짜증내고 이래가지고 나중에 취업 어떻게 할꺼냐 대학교에서 뭘 배운거냐며 비난합니다. 다른곳도 다 이러는건지 궁금합니다.. 제 능력이 정말 부족해서 매일 혼만 나는건지 아니면 이 회사가 비정상인건지 모르겠습니다…이런 일이 매일 반복되다보니 개발자가 정말 나하고 맞는건지 의심까지 드네요

API 서비스 Xss 필터 적용 질문

웹 브라우저 클라이언트에서 api를 호출하는게 아니라 각 서버 클라이언트에서 호출할 경우에도 xss필터를 적용해야 하나요??

API 서버에 데이터 요청 처리 질문입니다!

안녕하세요. API 서버를 별도로 구축하고, 인증은 토큰방식으로 체택했습니다! 이제 웹페이지를 제작하고있는데요, 문득 드는 의문이 API서버에 대한 데이터 요청은 클라이언트 사이드단에서 처리를 해야 맞는건가요? 아니면, 서버 사이드단에서 처리를 해야 맞는건가요? 인가에 대한 토큰은 쿠키에 있다고 한다면, 1. 클라이언트 사이드단 처리 클라이언트에서 브라우저의 쿠키 접근 -> 인가 토큰 획득 -> 헤더에 포함하여, API서버에 요청. -> 데이터 요청 완료. 2. 서버사이드 처리 클라이언트에서 브라우저의 쿠키를 헤더에 포함하여 서버사이드로 데이터 요청 -> 서버사이드에서 인가토큰을 획득하여, API서버에 요청 -> 클라이언트에게 해당 데이터를 응답 -> 데이터 요청 완료. 1번 방법은 API서버가 외부에 노출되어있어서 보안에 취약하지만, 트래픽이 많아질경우, API서버에 대한 처리만 잘 하면 될것같고, 2번 방법은 API서버는 웹서버와만 통신을 하니, 보안에 강하지만, 트래픽이 많아질경우, 웹서버에 대한 처리, API 서버에 대한 처리 둘다 고민해야할것같은데.. 보통 어느방법을 선택하나요??

대규모 사이트의 데이터 수집 sdk를 만들어야하는데...

합쳐서 수십~수백만 사용자가 있는 웹사이트의 회원/비회원 데이터를 수집하는 sdk를 만들어야합니다.. 기본적인 브라우저 정보, 회원정보 부터 접속한 url, 체류시간, utm과 같은 로그까지 수집해야하는게 요구사항입니다. 단순 브라우저 및 회원 데이터의 경우 단발성으로 저장하니 상관없을꺼같은데 로그의 경우 페이지 이동 혹은 매 접속마다 api로 요청하여 db에 저장하는 방법인지... 모르겠네요 😭 어떤식으로 접근해야하는지 감이안와 이렇게 질문 작성합니다 ! 읽어주셔서 감사합니다🙇‍♂️

next.js에서 브라우저에 있는 탭기능을 구현하려고 합니다.

next.js로 구성된 사이트에서 특정 링크를 클릭해서 새로운 url로 이동되면 새로운 url로 이동됨과 동시에 브라우저 탭처럼 새로운 탭이 생성됩니다. 그리고 다른 url로 이동하면 새로운 탭이 생성 됩니다. 그리고 기존의 탭에는 새로운 url로 변경하기전에 있는 데이터들과 상태값이 유지되어 있고, 사용자가 해당 탭을 클릭시에 기존에 하던 화면을 그대로 보여줘야 합니다. 간단하게 이야기해서 웹사이트내에 크롬 상단 브라우저탭 기능을 만들려고합니다. 이것저것 시도해보고 있는데 next.js의 url routing를 사용하면서 기존의 상태값을 유지하기가 쉽지가 않네요 혹시 좋은 조언이 있으면 구하고 싶습니다. 감사합니다!

next.js에서 히스토리 탭 기능 구현

next.js를 사용해서 브라우저에 탭 기능을 사이트 내에서 구현해야 하는 상황입니다. 탭 기능에 추가로 페이지 내부에서 다른 페이지로 가는 링크를 클릭하면 탭 목록에 추가되어야 하고 기존에 있던 탭에 보이던 페이지는 상태가 유지되어야 합니다. 지금 구현한 방법은 미리 모든 페이지의 페이지 컴포넌트를 하나의 파일에 넣어두고 링크를 클릭하면 store에 해당 페이지의 데이터를 넣어주고 Layout 컴포넌트에서 router.path를 비교해서 show/hide을 결정해주고 있는데 뭔가 다른 방식이 없을까요?

요즘 들어 많이 보이는 형태의 UX/UI 레이아웃 디자인을 지칭하는 용어가 있을까요?

안녕하세요. 최근에 쇼핑몰이나 온라인 서비스를 브라우저로 서칭하다보면 자주 보이는 형태가 있는데요. 모바일 크기인데 데스크톱이든 태블릿이든 상관없이 스마트폰 크기 하나만 지원하는 제품이 많이 보이더군요. 스마트폰보다 큰 화면에서 접속하면 양 옆이 footer 역할을 하는 형태의 제품 레이아웃을 보이기도 합니다. 반응형 대신 모바일 디자인만 고려하면 된다는 점에서 관심이 생겼는데, 이러한 레이아웃 디자인을 부르는 명칭이나 용어가 있을까 해서 질문 드립니다. Tailwind CSS를 접하면서 모바일 우선(Mobile-first)이라는 용어는 알고 있습니다. 그렇다면 저런 형태는 모바일 온리(Mobile-only)라고 부르는 걸까요? 특정 사이트를 언급해도 되는지 모르겠지만, 링크 걸어보고 문제 시 알려주시면 수정하겠습니다. - 페이브릴 https://fabrill.co.kr - 밸런스 https://www.balance.site - 모두의셔틀 https://www.modooshuttle.com - 팬심 https://fancim.me 조금 더 넓은 범위의 레이아웃을 보여주는 - 모요 https://www.moyoplan.com

삼성인터넷 앱 열기

React native로 구현중입니다. 링크를 클릭했을때 안드로이드의 기본 브라우저 앱 삼성인터넷으로 이동하길 바랍니다. samsunginternet://으로 시작하는 딥링크를 사용해도 안됩니다..

토큰값을 받아오지 못하는 문제 (undefined)

안녕하세요 JWT 토큰을 이용해 로그인 검증하는 로직을 구현하고 있습니다. 로컬스토리지에 토큰을 저장하는 것까지 성공했으나 프론트 측에서 로그인 검증을 요청할때 실제 토큰 값을 받아오지 못하는 문제가 있어 질문 드립니다. login-required에서 토큰 값 유무 로직을 전부 지우고 콘솔로만 찍는 경우 undefined와 실제 토큰값이 나타납니다. 만약 토큰 값 유무 로직을 이용한다면 undefined값만 서버로 들어와 페이지가 무한로딩 되는 현상이 나타납니다. next()처리가 안되기 때문인 것 같습니다. (+ index.html은 test.js를 연결하고 있습니다.) 사진으로 보면 네트워크 요청헤더에서 확인한 결과 1. 처음엔 document 유형의 localhost를, (인증 헤더 x) 이후 js를 불러온다 2. 마지막에 xhr형식인 localhost를 불러옵니다 (인증 헤더 o) (여기서 undefined, 실제 토큰값이 콘솔에 동시에 나타나는 이유라고 생각이 듦) (순서를 보면 document 유형 localhost -> css, js -> xhr 유형 localhost 즉 처음에 document 유형에서 인증헤더를 못가져와서 (js가 로드되기 전이여서) 토큰 유무를 체크하지 못하는 것 같습니다) 결론적으로 제가 생각한 문제 분석 (1) ('/') 에 get 요청을 보낸다. (2) 서버는 loginRequired를 실행한다. (3) 서버로 부터 html을 받지 못한 상태에 loginRequired가 실행되어 토큰 값은 undefined가 된다. (4) next()를 거쳐 서버에서 html을 클라이언트로 부터 응답을 해준다. (5) html을 브라우저에 보여주면서 그 html에 연결된 js를 불러온다. (6) 이때 불러온 test.js에서 get요청 ('/') 로직을 불러와 다시 server.js에서 loginRequired 응답으로 토큰 값을 불러온다. 즉 js가 로드가 되어야 userToken을 로컬스토리지로 부터 받아오고 요청을 하여 토큰 값을 불러올 수 있다. 그런데 get 요청전에 토큰 검증을 하고 허가가 되어야 html을 로드해야 하지 않을까? 그렇다면 서버에서 처리를 해야하는가? 배워가는 학부생으로 많이 부족하다고 생각합니다,, 선배님들의 견해를 받고 싶어 게시물 올립니다..! 핵심 코드는 다음과 같습니다.

NextJS 14에서 JWT를 쿠키를 통해 관리하려고 하는데 서버에서 set-cookie 해주는 방식말고 route 핸들러에서 주입할수는 없나요?

안녕하세요. 최근 NextJs를 공부하며 이전 리액트 기반의 사이드 프로젝트를 NextJs로 구현해보고 있습니다. 카카오 로그인만 지원을 하고 있고, 프론트 쪽에서 카카오 인가 코드를 백엔드로 넘기면 백에서 jwt를 발급해서 응답으로 access token과 refresh token을 프론트로 넘겨주고 있습니다. 이전 프로젝트에서는 두 토큰 모두 localStorage에 저장하는 방식으로 했었는데요, 이번에는 쿠키를 이용해보려고 하고 있습니다. 다만 백엔드에서 set-cookie를 해놓지 않아서 응답으로 받은 토큰을 따로 쿠키에 저장해야하는 상황입니다. 하지만 Server Component에서는 set cookie가 안되는 것으로 알고 있습니다. <목표 구현 방식> route handler를 통해서 백엔드 api를 호출하고 그 값을 쿠키에 저장하도록 코드를 짰습니다. (/app/api/token/route.ts) return 값은 확인을 위해서 임의로 넣었습니다. 그리고 쿠키에 저장된 토큰을 통해서 서버 컴포넌트에서 이를 이용해 백엔드 api 통신을 하고 싶습니다. 하지만 서버 컴포넌트에서 쿠키를 확인하니 비어있는 쿠키인 것을 알 수 있었습니다. 얕은 지식으로 생각을 했을때, (route handler - 브라우저 혹은 서버 컴포넌트)에서 생성한 쿠키는 (백엔드 도메인 - 브라우저 혹은 서버 컴포넌트) 통신에 사용되는 쿠키와 다르기 때문이라고 생각이 들었는데 해답을 찾지 못했습니다. <질문 사항> - 백엔드 서버에서 set-cookie를 하지 않고 직접 구현할 순 없을까요? 쿠키는 forwarding이 안되나요? - 제가 생각한 구조 말고 추천하시는 토큰 관리 방식에 대해서 알려주셔도 감사하겠습니다. 아직 초보 개발자에 글도 잘 쓰지 못해 이해하시기 힘들 것 같지만, 넓으신 아량으로 지식을 나눠주신다면 정말 큰 도움이 될 것 같습니다. 긴글 읽어주셔서 감사합니다 (_ _)

이거 번아웃 증상 맞나요?

안녕하세요. 저는 현재 3~4년차 프론트 개발자이고 작년 말에 b2b 스타트업으로 이직하여 약 4개월 정도 근무하고 있습니다. 전 직장은 이커머스 업계였고 주로 백오피스 쪽 개발을 주로 담당했습니다. 이전 회사는 인턴십으로 입사했고 그 시절을 떠올려보면 뭐든지 흡수하고 빠르게 배우는 진공청소기였던 걸로 기억합니다. 어떻게든 정규직으로 전환되고픈 절박함 때문이었는지 퇴근하고 나면 JS 코어 이론이나 궁금했던 브라우저 관련 지식들을 닥치는대로 검색하면서 정리했습니다. 심지어 아침에 지하철로 출근하면서 구독한 아티클을 틈틈이 읽으면서 나름 트렌드를 익히고 공부했었죠. 배운 지식을 그대로 개발에 쉽게 활용할 수 있었던 환경 덕분이었는지 나름 재밌었던 같았습니다. 하지만 지금 직장을 옮기고 나서부터 그저 무기력할 뿐입니다. 처음 여기 면접보았을 때는 이미 출시한 프로덕트가 있다고 들었고 나름 현실적인 수요층이 있는 틈새시장을 개척할 수 있는 기회를 놓치고 싶지 않았습니다. 그래서 이 스타트업에서 제대로 성장해보자고 결심하고 헤드헌터, 전 직장동료들과 지인들의 만류에도 불구하고 여기로 이직했습니다. 그런데 막상 와보니 프론트 개발팀은 전부 주니어 개발자들로만 있었고 심지어 제가 2순위로 연차가 높은, 말그대로 제가 믿고 따를 사수가 없어서 조금 불안하더군요 게다가 2달을 주기로 고객들을 대상으로 릴리즈 오픈을 하는데 2달이라는 한정된 시간 내에 기획팀에서 정책을 내놓는 일정이 늦춰지는 일이 다반사입니다. 그래서 정책과 API가 개발될 때까지 한달 동안 붕 떠있다가 나머지 한달 내내 야근을 하면서 벼락치기 식으로 개발을 진행하고 있습니다. 팀 인원이 5명도 되지 않은데 몇 십개의 페이지들을 한달 안에 개발하고 QA까지 진행해야 하니 시간에 쫓기면서 결과물이 나오도록 짜집기식으로 페이지를 만들게 되더군요. 게다가 오픈일까지 일주일도 남지 않은 시점에 갑자기 추가로 개발할 페이지들이 있다고 요청이 들어오기도 하고 계속 결론이 나지 않는 리뷰 회의에 들어갔다 오면 어느새 2~3시간 지나서 개발할 시간이 부족해지곤 합니다. 그러다 과연 이 서비스를 정식으로 출시한다고 해도 과연 타사들과 경쟁할 정도의 품질을 보장할 수 있을지가 의문이 들었고 솔직히 이 프로덕트에 믿음이 가지 않더군요. 다들 퇴사하고 싶다거나 회사 욕을 하는 등의 부정적인 얘기들이 뒤에서 자주 오가고(지난 주에 한 분이 나갔는데 이게 도미노의 시작이 아닐까 합니다) 저조차 여기서는 도저히 개발자로서 성장하기 힘들 뿐만 아니라 여기 1년을 채워서 근무해서 남을게 없을 것 같다고 생각하고 있습니다. 심적으로 매우 지쳐서 최근에는 제가 왜 개발자가 되었는지와 월급을 받아가면서 무엇을 추구하려는지에 대해서 자주 고민하고 있고 이참에 개발 직무 자체를 포기하고 싶습니다. 지금은 사실 성장할 의지도 거의 없고 그저 퇴근하면 개발 관련된건 아무 것도 하기 싫을 정도로 스트레스를 받고 있습니다. 하루종일 앉아있어도 집중도 잘 안되고 개발하려고 고민한다면 어느새 1시간이 지나있곤 해서 "내가 이것 밖에 안되는건가?" 등의 부정적인 생각이 들면서 제 경력에 대해서 자책하기도 하고 심지어 최근에는 하도 야근과 주말 근무를 하다보니 한달 근무시간이 200시간을 넘겨서 강제로 퇴근한 적도 있는데 제가 일을 잘 못하는 사람으로 낙인이 찍히는게 아닌가라는 불안감도 생겼습니다. 혹시 저와 비슷한 경험을 가지거나 가졌던 분들이 계시다면 어떻게 극복했는지 알 수 있을까요? 그리고 제가 잘못 생각하고 있는 부분을 짚어주신다면 도움이 많이 될 것 같습니다.

Next JS 14 쿠키 관련 질문입니다.

현재 NextJS 14 버전을 사용 중에 있으며 App Router로 폴더 구성을 하고 로그인 작업을 진행 중에 있으며, 로그인 프로세스는 다음과 같습니다. 1. 프론트엔드 : 사용자가 로그인 버튼 클릭 2. 디스코드 서비스에서 인증 (디스코드 페이지로 이동) 3. 백엔드 서버로 인증코드 전송 4. 백엔드 서버에서 프론트엔드로 리다이렉트 (이 때 쿠키로 엑세스 토큰과 같은 정보를 보내줌) 쿠키 설정도 https에 백엔드랑 같은 도메인으로 맞춰 줬습니다. 여기서 1~4번까지 에러 없이 잘 동작하고, 쿠키도 브라우저에 잘 저장되고 있습니다. 근데 여기서 한 가지 문제가 발생했는데, Nexjs가 서버 사이드 컴포넌트(layout) 에서는 쿠키를 잘 불러오고 있지만 클라이언트 사이드 컴포넌트(page) 에서는 쿠키를 불러올 수 없었습니다. (undefined) 현재 클라이언트 사이드 컴포넌트에는 최 상위에 'use client' 를 붙혀 잘 사용하고 있고, cookies-next 라는 라이브러리로 불러오고 있습니다. 어떤 것이 문제일까요? 문제의 원인과 해결 방법을 알고 싶습니다.

Next.js RSC Network response관련해서 질문이 있습니다.

Next.js App router를 사용하고 있습니다. 간단한 검색기능을 구현하는 프로젝트를 진행 중인데 패칭 과정은 아래와 같습니다. 1. 자식 Client 컴포넌트에서 url의 searchParams(router.replace)를 변경하면, 2. 부모 Server Component는 변경된 Search Params를 바탕으로 라우트 핸들러에서 서버에 요청을 하고 필요한 데이터를 Server Component로 받아옵니다 . (부모 RSC는 캐싱을 하지 않게 구현되어있습니다.) 3. 받아온 데이터를 가공 후 자식 Client 컴포넌트에 내려주면, 4. props를 받은 자식 Client 컴포넌트에서 보여주는 방식으로 진행하고 있습니다. 위 과정에서 에러가 발생하는 것은 아니고 정상적으로 잘 동작하고 있습니다. 다만 브라우저 devtool의 Network 탭을 확인하는데 의문점이 있어서 질문을 드립니다. RSC에서 요청을 하면 _rsc 페이로드로 데이터를 받아오는 걸로 알고 있습니다. 분명 _rsc로 요청이 가고 정상적으로 네트워크탭의 preview에 RSC 페이로드가 찍히는가하면 정상적으로 요청이가고 페이지를 확인했을 땐 정상적으로 패칭과 렌더링까지 완료되었는데, 네트워크에서 preview에는 "no data found for resource with given identifier"로 나옵니다. 결론은 패칭과 렌더링은 정상적으로 동작하지만 네트워크탭의 preview와 response가 나올 때도 있고 안 나올 때도 있어서, 명확한 기준이 있는지 궁금해서 질문을 올립니다.

vite에 관하여 질문드립니다.

프로덕션에 vite를 사용하여 개발환경을 구성하려고 공부 중인데, 궁금한 점이 생겼으나 정보가 파편화되어있어 정확한 이해가 어려워 질문 올립니다! 제가 vite 공식 가이드와 구글링하면서 이해한 바로는 “기존 브라우저 환경에서는 모듈화된 코드들을 브라우저가 읽을 수 없어 webpack과 같은 번들러를 이용해 하나의 파일로 합치는 과정을 거쳤고, 이것이 일반적인 번들러의 역할이었으나 브라우저가 ESM을 지원하면서 import, export를 별도의 도구 없이 브라우저 자체에서 해석할 수 있고 처리할 수 있게 되었으며 vite는 이 점을 활용하여 번들링 과정 없이 바로 실행하여 파일이 import되어 필요할 때 불러오는 방식을 사용한다. “ 라고 이해했는데 혹시 맞을까요? 추가로 vite의 공식 가이드에는 “프로덕션에서 번들 되지 않은 ESM을 가져오는 것은 중첩된 import로 인한 추가 네트워크 통신으로 인해 여전히 비효율적입니다” 라고 나와있는것을 보았을때, 위에 적힌 번들링없이 실행하는 것은 개발모드에만 사용되며, 프로덕션에는 여전히 webpack과같이 번들링을 진행하며 webpack대신 Rollup을 사용한다는 점만 다르다고 이해하였는데 이부분에서 틀린내용이 있을까요? 만약 그렇다면 vite가 강조하는 장점이 프로덕션에는 크게 작용하지않는다고 느껴져서요. 질문 자체가 잘못되었거나 ,틀린내용이 있다면 편하게 지적주시고 알려주시면 감사드리겠습니다!

vscode 터미널에서 출력창 띄우기

안녕하세요 현재 nextJs 공부중입니다. 항상 브라우저 콘솔에서 출력창을 확인 했었는데 nextJs는 서버에서 출력이 되어 vscode 터미널에서 확인 해야 하는데 제 컴퓨터에서는 뜨질 않네요 ㅜㅜ 어떤 걸 해야 터미널에서 콘솔 출력창을 띄울 수 있을까요?

유독 프론트엔드 강의가 더 많은 이유가 무엇인가요?

독학으로 개발공부를 하고있는 도중에 유독 프론트엔드쪽 강의와 커뮤니티가 백엔드 또는 앱개발에 비해 더 활성화된 느낌이 들었습니다. 실제로도 유튜브에서 무료 강의를 찾아보았을때 프론트엔드 관련 영상이 최근 업로드 된것이 더 많고 양적으로도 더 많다고 느꼈습니다. 질문하면서 생각해봤을때 입문하기 쉬운편인 js, 입문자에게 바로 보여지는 브라우저 화면으로 인한 흥미유발, 자주 변화하는 프레임워크 정도로 생각됩니다만 다른 분들의 생각도 궁금합니다.

노드 https질문

안녀하세요. 프로젝트를 진행중에 애러를 만났는데 혹시 알고계신분 답변해주시면 정말 감사합니다. 리액트로 프론트를 만들고 node+express 를 웹서버 역할로 프록시 설정을 했습니다. 그리고 ssl 인증을하여 브라우저에 https로 접속 가능하게 하였습니다. 문제는 여기부터인데,, 기존 통신 api가 http로 되어있었는데 그런데 백앤드 개발자분이 api도 https로 바꾸셨다고 하여 https 통신을 하니 Error occurred while proxying request happyman:11111 to https://happyman:11111/ [EPROTO] (https://nodejs.org/api/errors.html#errors_common_system_errors) 라는 오류가 났습니다. 또 신기한건 기존 http로 설정된 api 통신은 되네요? 인터넷이서 하라는거 대부분 했는데 잘 안되네요ㅠㅠ

Next.js app router의 쿠키값을 어떻게 세팅해야 할까요?

Next.js app router에서 쿠키로 JWT로그인을 사용 하고 있습니다. 서버는 백엔드 api 서버가 별도로 존재하는 상황입니다. 현재 인증 기반 api를 호출을 할 때, 만약 해당 accessToken이 만료가 됐다면 재발급을 해주는 백엔드 api를 통해 새로운 accessToken을 브라우저에 업데이트하는 로직을 구현하려고 했습니다. 클라이언트 컴포넌트에서는 전혀 문제가 없었습니다. 어차피 set-cookie를 백엔드에서 해주면 알아서 브라우저에 반영이 되니까요. 근데 문제는 서버 컴포넌트에서 동일한 요청을 하는 경우입니다. 동일하게 재발급 요청을 보낸 다음 set-cookie를 백엔드에서 해줘도 어차피 서버 컴포넌트에서 api를 쐈던것이기 때문에 그 반환값이 서버 컴포넌트로 오게 되고, 이는 브라우저에 반영이 안 되는데요ㅠ 혹시 이럴 경우에는 어떻게 처리를 하는게 좋을까요? 미들웨어나 라우트 핸들러를 사용하려 해도 그 방법을 도저히 모르겠네요