#컴포넌트

iOS 웹뷰에서 getUserMedia 호출 시 마이크 권한 관련 질문입니다.

안녕하세요 React를 이용하여 웹뷰 기반 애플리케이션을 제작 중입니다. 다름이 아니라 리액트 코드 내에서 마이크 권한 획득 및 녹음 기능이 있는데요, navigator.mediaDevices.getUserMedia 메소드로 권한 획득과 녹음을 진행하고 있습니다. 그런데 최초 접속 시에는 위 메소드를 사용하는 컴포넌트가 렌더링 될 때 애플리케이션 자체(네이티브)에서 마이크 권한 여부를 물어보는데요 "앱 이름"에서 마이크 권한을 요청합니다. 라고 노출이 됩니다. 그런데 문제는 여기서 허용을 했음에도 불구하고 녹음을 진행하려고 하면 "웹뷰 도메인"에서 마이크를 사용하도록 허용하겠습니까? 라고 이중으로 권한을 확인하게 됩니다. Safari 자체적으로 막는거라 정상적인 동작인지, 아니면 다른 옵션이 있는지 모르겠네요ㅠㅠ 해결 방법이 있을까요?

React면 되는것을 굳이 Next.js로 구현하는것

SEO나 서버사이드 렌더링이 필요없는 서비스를 구현할 때, 이걸 그냥 React로 개발하는것과 Next.js로 개발하는것의 차이가 있나요? 저는 Next.js를 써야겠다 싶은 경우가 아니면 React로 개발하고 싶은데, Next.js에서 모든 컴포넌트를 그냥 다 클라이언트 컴포넌트로 하면 React랑 똑같은 거 아니야? 라는 질문을 들었을 때 할말이 없더라구요. React만으로 구현할 수 있는걸 굳이 Next.js를 쓰는게, 뭔가 그냥.. 닭잡는데 소잡는 칼 쓰는 느낌이라 굳이 그럴필요 없다 정도로만 생각했는데 정확한 근거를 들어보라니 대답을 못하겠더군요 둘의 차이가 정확히 무엇일까요? 기존의 SPA 앱같은걸 개발할 때 React만 쓰는게 좋은 이유가 있나요?

Next 서버 컴포넌트와 전역 상태관리

안녕하세요. Next15에서 서버 컴포넌트를 적극적으로 도입하여 프로덕트를 개발하고 있는데, 고민이 되는 부분이 있어 여러 분들의 도움을 얻고자 질문을 남깁니다. 서버 컴포넌트에서 받아온 데이터와 클라이언트 컴포넌트에서 사용하는 zustand가 적절히 사용되고 있는지 고민이 듭니다. 현재 GET 요청의 경우 각각의 서버 컴포넌트에서 fetch를 통해 진행하고, 해당 데이터를 자식 클라이언트 컴포넌트에서 사용할 경우 props로 내려 사용하고 있는데, 이때, 드릴링이 심해질 경우 zustand와 같은 전역 상태관리 라이브러리를 함께 사용하려고 합니다. 예를 들어, 서버 컴포넌트의 첫 번째 자식인 클라이언트 컴포넌트에서 zustand를 사용하고, 이후 자식 클라이언트 컴포넌트에서는 zustand를 통해 상태관리 할 때 자식인 클라이언트 컴포넌트의 업데이트가 진행되는 부분에서 try/catch를 통해 요청을 보내고, router.refresh()를 통해 서버 컴포넌트에서 데이터를 새로 받아옵니다. 이후 클라이언트 컴포넌트에서는 useEffect로 서버 컴포넌트에서 props로 받아온 데이터가 바뀌는 것을 감지하고, 해당 props를 zustand에서 사용하는 데이터로 업데이트하려고 하는데 문제가 될만한 점이 있을까요? 이와 관련된 링크나 답변이 있으시다면 감사히 받겠습니다!

개발자 분야가 고민됩니다

안녕하세요 저는 프론트엔드 개발을 목표로 하는 취준생입니다. 비전공생이며 인프런 강좌룰 통해 개발 공부를 시작했고, 퇴사 후 프론트엔드 부트캠프를 수료했습니다. uxui 디자인 일을 했었고, 퍼블리싱 경험을 하며 자연스레 프론트엔드 개발일에 흥미를 느끼게 되었습니다. 여전히 프론트엔드 취업을 준비하고 있지만 한편으로는 백엔드로 진로를 틀어야할까 고민이 됩니다. 고민이 되는 이유는 첫번째, 적성입니다. 자연스레 눈에 보이는 것이 좋고 사용자경험에 관심이 있어 프론트엔드 개발을 정했고 당시엔 백엔드에 대해서 잘 몰랐습니다. uxui디자인을 했으니 당연히 프론트가 더 잘맞아! 라고 생각했죠. 하지만 전 프론트를 공부하면서 눈에 보이는 것 보다는 점점 컴포넌트나 데이터를 어떻게 잘 관리한지에 대한 설계를 하고 구조를 잡는 것에 더 재미를 느끼는 것을 깨달았습니다. 물론 프론트 개발도 당연히 필요한 부분이지만 백이 그 부분을 주요 업무로 가져간다면 백이 더 잘 맞을까… 고민이 됩니다. 두번째 이유는 입지.? 서비스의 앞단 디자인은 대기업이 아닌이상 자주 바뀌는 게 아닌 거 같습니다. 물론 프론트엔드가 ui만을 그리는 개발만 하는 것이 아니고 랜더링 및 최적화 등을 중요하게 생각하는 것을 압니다. 다만, 현실적으로 비전공자로서 제가 들어갈 수 있는 첫 회사는 그런 대기업보다는 중소기업일 거라 생각합니다. 그러면 그런 회사 입장에선 프론트는 한 번 앞단 개발을 마치면 일이 적어져서 빨리 퇴출되는 것이 아닐까… 하는 걱정이 듭니다. 위의 고민 때문에 백으로 이제라도 진로를 잡고 가야할까 생각이 드는데, 제가 개발시장을 아직 잘 모르고 프론트 개발도 딥하게 공부를 아직 하지 않은 상태라 겉핥기 시각일 수도 있습니다. 이 점 양해 부탁드리고 제 생각이 틀렸다면 따끔하게 지적해주시면 감사하게 듣겠습니다

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

리액트로 이미지 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 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

invalidateQueries가 안먹힙니다.

사진 순서대로 1. 유저 정보 수정 Mutation훅 2. 유저 정보 수정 Mutation훅을 호출하는 컴포넌트 3. 유저 정보를 새로받아오는 Query 훅 입니다. invalidateQueries, refetchQueries, 옵션추가 등등 다해봤는데 쿼리를 무효화하는 요청이 아예안갑니다..ㅜ 쿼리키도 똑같은데 뭐가 문제일까요? 두번째 사진은 흐리게보여서 코드로 올립니다.

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

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

부트 캠프 이후, 로드맵 고민입니다.

안녕하세요, 삼성청년SW아카데미 11기 Python 비전공반 출신 개발자입니다. 업계에서는 실력있는 머신러닝 엔지니어를 원해, 제가 교육동안 AI 모델을 서비스에 적용시키는 수준으로는 취업이 많이 어려워, 진로를 고민하고 있습니다. (YOLO 모델 사용, Spring-FastAPI 통신 등) 입사를 희망한다면, 머신 비전쪽을 희망합니다. 웹 개발 프로젝트를 진행하면서, 프론트엔드의 레이아웃 디자인이나 동적 컴포넌트등으로 다양한 경험을 선보일 수 있는 부분에서 프론트엔드 개발을 희망했습니다. 수료가 곧이고, 하반기 인턴 및 채용공고를 바라보며, 꾸준히 성장하고 싶은 마음과 취업에 대한 압박때문에 질문글을 작성해봅니다. 제 개인적 성장도 원하지만, 20대 후반에 접어들며 현재는 취업이 우선이라고 생각돠어 글 남깁니다. 현직자님들의 현실적인 답변 부탁드립니다.

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

Nextjs with tailwind기반 ui라이브러리 질문

프론트엔드 취업전인 학생입니다. Rollup으로 라이브러리 번들 관련하여 질문입니다. 제작 현시점은 사용자가 컴포넌트를 import 하였을때 사용자가 tailwind.config.ts에 node_module경로의 제 라이브러리를 경로를 설정해야 스타일이 적용이 되는상황입니다. 개발자도구 element에는 텍스트상 적용이돼있는데 해당 방법말고는 못찾았습니다. 개발자분들의 좋은의견 부탁드립니다. 아래는 현재 rollup.config.js입니다.

리액트에서 최상단 더보기 기능에서 스크롤 문제

안녕하세요, 리액트로 채팅 기능 구현중입니다. 다름이 아니라 최상단 더보기 버튼을 클릭하면 api통신을 통해 새로운 메시지와 기존 메시지가 합쳐집니다. 그런데 리액트는 불변성이라서 컴포넌트를 새로 그릴때 더보기한 메시지가 먼저 그려지다 보니 스크롤이 계속 탑으로 변경되는데요,,, 모든 메시지가 다 그려지고 스크롤을 이동하면 되겠지만은, 근데 생각해보니 화면은 그대로 유지(스크롤 위치)가 되면서 업데이트 하는 방법은 없을까 계속 시도중인데 도저히 방법을 모르겠습니다.

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

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

expo에서 tabs로 동적라우팅 설계할때

지금 expo 사용해서 공부하는 중인데 tabs 컴포넌트 사용해서 바텀네비게이션 구현하고 tabs를 사용해서 동적라우팅 설정하려면 폴더구조를 어떻게 해야하나요? (tabs)폴더로 그룹화 해서 gym, board, search, profile 폴더 만들어준 후에 tabs에 4개 항목 유지하면서 /profile/:userid 경로로 동적라우팅 하고 싶은데 여기에 사진처럼 profile 폴더-> [userId]폴더-> index 파일 설정하면 디바이스의 tabs 항목에 /profile/ [userId]/index 가 같이 나옵니다... tabs에 4개 항목만 유지하면서 동적라우팅 하려면 폴더구조 어떻게 해야하나요 ㅠㅠ

가로 스크롤 만드는 방법 질문 드립니다.

아래와 같은 스크롤 컴포넌트가 있습니다. 저 컴포넌트를 width:100vw;로 지정한 부모에서 불러오려고 합니다. 제 예상으로는 Container가 부모의 너비만큼 100vw만큼의 너비를 가질것이고, Div는 그보다 더 긴 너비를 가진다면 부모가 아니라 Container에서 스크롤이 생길것이라고 생각했습니다. 그런데 Container의 너비는 100vw를 훨씬 초과하여 부모에 스크롤이 생겨버리더라구요. 이처럼 부모 너비에 따라 동적으로 너비가 달라지는 컴포넌트에서 가로 스크롤을 구현하려면 어떻게 해야하나요?

Suspense, useSuspenseQuery를 이용해서 skeleton ui를 구현하는데 초기 렌더링시 화면이 덜그럭거리는 문제가 있습니다.

200ms 동안은 이전 UI를 보여주고, 그 다음부터는 skeleton ui를 보여주고 싶습니다. 하지만, 현재상황은 이렇습니다. useSuspenseQuery를 이용했을때, 처음 200ms동안 데이터가 없어서 높이가 0이 되었다가 다시 높아지면서 화면이 덜그럭거리는 문제가 있습니다. 그래서 useTransition을 이용해서 이전 UI상태를 유지하도록 했지만 지연시간이 길어졌을때는 skeleton ui가 보이질 않습니다. 제가 궁금한건 다음과 같습니다. 1. 보통 useSuspensequery를 사용해 skeleton ui를 보여줄때 초기 렌더링시 이전 데이터가 보이지 않아서 화면이 깜빡이는 문제를 어떻게 해결하나요? 2. useTransition과 skeleton ui는 같이 사용할 수 없는 건가요? 대략적인 코드는 다음과 같습니다. 각각 최상위 부모인 Search 페이지, 데이터를 불러오고 카드리스트를 업데이트하는 CardList 컴포넌트, 스켈레톤 UI의 지연을 처리하는 DeferredComponent 입니다.

3년차 물경력 프론트 개발자 이직고민..

안녕하세요. 저는 이제 3년차에 접어드는 프론트엔드 개발자입니다. 현재 SI 분야에서 근무하고 있으며, 처음에는 환경이 좋지 않아서 1년 정도만 다니고 이직할 계획이었지만 어느새 2년을 넘기게 되었습니다. 특히. 개발문화를 바꾸고 싶었는데 결국은 바뀌지 않더라고요. CI/CD등 개발환경을 만들어놓으면 다른 개발자는 같이 협동하는게 아니라 그냥 워라벨을 지키는 수단으로 무임승차를;; 시도합니다. 예를 들어 동료가 컴포넌트를 만들어야하면 안 만들다가 제가 비슷한 용도의 컴포넌트를 만들면 그걸 그대로 코드째로 복사해서 변경해 사용합니다. 아무튼 최근 1년간 여러 회사에 서류를 제출하면서 깨달은 점은 제가 일하고 있는 환경이나 경력이 다른 기업들에게는 크게 어필되지 않는다는 것입니다. 특히, SI 특성상 긴급한 프로젝트 마감 일정과 제한된 기술적 요구 사항 속에서 일해 온 경험이 한정적으로 보일 수 있다는 점을 깨달았습니다. 면접에서 이부분에 대한 공격을 크게 받는것 같더라고요. 질문을 듣자마자 아.. 이건 떨어지겠다 싶은 부분을 몇번 받았습니다. (참고로 2년차 개발자 뽑는 면접이었습니다) 사실상 회사 업무로는 어필이 안된다고 판단되는데 사이드프로젝트라도 해야할지 고민입니다.

이 컴포넌트는 어디 껀가요?

Pull to refresh 같은데서 여기 저기 보이던데 모양도 다 똑같더라구요? mui도 아닌거 같던데 어디일까요?

React Next infinite scroll

A 라는 infinite scroll페이지에서 500개 데이터를 보여주고 scroll은 70프로 내려왔다고 가정했을 때 다른 페이지 갔다가 돌아왔을 때 500개 데이터랑 scroll 위치 그대로 유지하는 좋은 방법 뭐 있을까요? localstorage나 context 이용했을때는 dom을 다시 랜더링하고 state 값을 다시 주입 했을 때 부드럽지 않은 느낌입니다. redux를 이용해서 전역으로 상태값을 저장해 놓고 컴포넌트에서 사용하면 될까요?

Nextjs14 서버 컴퍼넌트 JWT 갱신 방법 문의

안녕하세요 NextJS14 에서 JWT 로그인 방식으로 프로젝트 진행중에 있습니다. 현재 AccessToken 만료시 재 갱신하는 로직을 하면서 해결하지 못하는 내용이 있어서 문의 드리립니다. 서버 컴포넌트와 클라이언트 컴포넌트에서 갱신된 AccessToken 을 공유 하는 법에 대해서 어떻게 처리 하셨나요? - app router 사용 - accessToken, refreshToken 쿠키 사용 - fetch 를 이용하여 API 호출 아래 테스트 내용으로 서버 컴포넌트에서 AccessToken 만료되어 갱신되는 경우 클라이언트로 쿠키를 갱신해줄 방법을 모르겠습니다. 너무 CSR 구조로 생각하는거 같기도해서, 이런 경우 어떻게 토큰을 현행화 해서 사용하는지 문의 드립니다. 별도 가이드 문서를 더 찾아보면 서버 컴포넌트에서는 쿠키를 사용하지 말라는 글도 보여서, 방향성을 잘못잡고 있는 느낌도 들고 있습니다. 많은 조언 부탁드립니다!! 테스트 케이스) 1. 서버 <-> 클라이언트 (에러) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출 -> 쿠키 set -> 클라이언트에서 백엔드 API 호출(당연히 클라이언트에서는 쿠키가 갱신안되서 에러) 2. 서버 <-> 서버(성공) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 서버 백엔드 API 호출 3. 클라이언트 <-> 클라이언트 (성공) - 클라이언트 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 클라이언트 백엔드 API 호출

nextjs 서버컴포넌트 질문있습니다 !

안녕하세요 nextjs 14 app router 공부 중 질문이있어 이렇게 글 남깁니다.... 1. ”use client“ 클라이언트 컴포넌트가 자식으로 서버컴포넌트를 가져오면 그 아래의 모든 컴포넌트는 서버컴포넌트로 동작이 아닌 클라이언트 컴포넌트가 되는건지 궁금합니다.. 2. 그렇다면 layout단에서 use client를 사용한 provider가 있다면 children으로 받은 모든 페이지들은 클라이언트 컴포넌트가 되는건지 궁금합니다... 3. 서버컴포넌트랑 SSR이 다른 개념이라는데 너무 헷갈립니다.. 혹시 다른점이 뭔지 알 수 있을까요? 궁금한 점들을 나열하다보니 두서가 없어진거같아서 죄송합니다.. 좋은 히루 보내세요 :) !!!!

리액트 lazy와 Suspense질문있습니다.

Spa를 만들면서 lazy와 suspense로 로딩처리하는것을 너무 남발하는거같단 생각이 들었습니다. 하나의 잘못된 예시로는.. 모든 라우트경로를 lazy로 처리해주고 전체 라우트를 suspense로 감싸고 로딩처리를 해주는경우인거같은데요.. 아래 코드는 실제로 제가 적용한 코드입니다. 이렇게 하니까 새로고침하면 로딩컴포넌트가 잠깐 반짝하고 사라지는데.. 아무래도 반짝하고 사라지면 사용자 경험측면에서 문제가 될거같단 생각이 들었습니다. 최초 페이지 이동시에도 순식간에 로딩이 떳다 사라지긴하지만 이건 그러려니 하고있습니다. 혹시 다른분들은 어떤식으로 사용중이신가요? useTransition라는 선택지가 있기는하지만 이거는 지금 제 상황과는 맞지않다는 생각입니다. (페이지네이션같은곳에 적용하면 좋을거같단 생각중..) lazy처리해주기에는 라우터 페이지 수가 적으니 걷어내는것도 정답이긴 하겠지만 lazy를 한번 꼭 적용시키고싶습니다. 아니면 메인페이지인 Homepage만 lazy를 걷어낼까요?

Next.js SSR CSR에서의 캐시 문제

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

next.js의 캐시와 react query 캐시 질문

next.js와 react query를 사용해 프로젝트를 진행하다가 이해가 안되는 현상이 있어서 질문드립니다. 어떤 A 라는 페이지에 들어오면 포스트와 포스트의 댓글들이 보이는 상황입니다. 첨부한 코드는 A 페이지를 담당하는 page.tsx 코드와 page 에서 사용중인 컴포넌트중 댓글 컴포넌트인 Comments 컴포넌트, 그리고 Comments 에서 useQuery의 queryFn으로 지정한 getComments 함수의 코드입니다. Comments 컴포넌트의 useQuery의 staleTime은 10초로 해두었고, queryFn인 getComments 함수의 fetch는 revalidate를 60초로 해둔 상황입니다. useQuery의 staleTime보다 fetch의 revalidate 시간을 길게 한건 react query로 인한 클라이언트측의 캐시와, next.js의 fetch에 의한 서버 측의 캐시의 차이점을 확인해보려고 그런것입니다. A 페이지에 처음 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리로 인해 받아온 댓글(comments) 데이터가 화면에 보입니다. 이 댓글에는 랜덤으로 생성된 이미지가 있습니다. 우선 10초가 지나기 전에는 새로고침에도 기존의 데이터 그대로 보이고, fetch 요청을 받는 백엔드 api에도 요청이 들어오지 않습니다. react query로 인해 쿼리가 실행되지 않아서 그런 것이겠죠? 그러고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale 상태가 된 후에 A 페이지를 새로고침하면 ['posts', id, 'comments'] 쿼리는 다시 fresh 해지는데 백엔드 api에는 요청이 들어오지 않았더라구요. 화면상의 댓글의 이미지들도 이전과 동일하게 나옵니다. 저는 이게 "A 페이지에 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리가 실행되어 fetch 요청이 실행되는데 이 ['posts', id, 'comments'] 쿼리는 서버 컴포넌트에서 프리패치 되는 거니까, 즉 fetch가 서버쪽에서 실행되는 거니까 react query의 캐시가 아닌 fetch의 캐시 설정을 따른다. 그렇기 때문에 ['posts', id, 'comments'] 쿼리가 실행되어 fetch가 실행되지만 fetch의 캐시는 남아있으니까 캐싱된 값을 사용해서 백엔드 api에는 요청이 안들어온것이다." 라고 생각했고 이걸 확인하기위해 새로고침을 해본것이었기 때문에 이 결과에 대해 납득하긴 했는데요.. 이 생각이 맞는건지가 일단 궁금합니다. 그리고 진짜 이해가 안되는건 이겁니다. A 페이지에 들어오고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale해지면 이번에는 다른 페이지로 이동했다가 A 페이지로 다시 돌아옵니다. A 페이지에서 새로고침을 하지 않고 사이트 내에서 페이지 이동으로 A 페이지에 다시 들어오는거죠. 이러면 백엔드 api에 요청이 들어오더라구요. 이게 왜 그런건지 모르겠습니다. 10초가 지나 ['posts', id, 'comments'] 쿼리는 stale 해졌지만 60초는 안지나서 fetch의 캐시는 유효한... 위의 새로고침 경우와 동일한 상황인데 새로고침 시에는 api로 요청이 안들어오고, 다른 페이지로 이동했다가 다시 돌아온 경우는 api로 요청이 들어오네요. A 페이지에서 새로고침을 하나, 다른 페이지에서 A 페이지로 페이지 이동을 하나, 둘 다 page 컴포넌트가 실행되고 ['posts', id, 'comments'] 쿼리가 서버에서 프리패치되니까 fetch가 서버에서 실행되는거 아닌가요? 근데 왜 새로고침하면 fetch의 캐싱이 적용되는것처럼 백엔드 api로 요청이 안들어오고 페이지 이동 시에는 들어올까요... 이걸 아무리 생각해도 모르겠습니다. 60초가 지난 후에는 새로고침 시에도 백엔드 api로 요청이 들어오더라구요. 이것으로보아 60초 전에는 새로고침 시 요청이 안들어오는게 fetch의 캐시 때문인것도 맞는 거 같은데, 왜 페이지 이동 시에는 60초 전에도 캐싱값을 안쓰고 api로 요청을 보내는지 모르겠습니다. 어떤 메커니즘으로 이렇게 되는것일까요? 아직 Next.js의 캐싱과 react query에 대해 잘 알지 못해서 이해가 안됩니다.. ㅠ 도와주십쇼..!

프론트엔드 공부에 대해 궁금합니다.

작년 국비학원을 다니고 그 후 인강을 보면서 공부중입니다. 인강을 보면서 예를 들어 부모 컴포넌트의 코드를 작성하고 또 자식 컴포넌트를 만드는데 여기서 자식컴포넌트에 부모컴포넌트에 있는 값이 필요하네 그럼 부모컴포넌트에서 props로 넘겨 받아 자식 컴포넌트에서 쓰면 된다..... 이렇게 이해는 하고 제가 다시 혼자 한번 만들다고 이 컴포넌트에서 부모 컴포넌트에 있는 값이 필요하다 필요없다 이런 생각조차 나지 않더라구요. 다른 부분도 이런 부분과 마찬가지인데 초보자가 어떻게 공부를 하면 혼자 그래도 생각하면서 이럴땐 이런 코드를 이렇게 쓰면 되겠다..하면서 코드를 작성할 수 있을지 궁금합니다.

중국 유학생이 한국에서 Java 개발 직업을 찾으려면 어떻게 해야 하나요?

안녕하세요, 저는 중국에서 온 유학생입니다. 25년 2월에 졸업 예정입니다. 한국에서 Java 백엔드 개발자 직업을 찾고 싶습니다. 현재 개인적으로 진행한 프로젝트가 두 가지 있습니다. 프로젝트 1: Hash 해시 알고리즘을 기반으로 한 데이터베이스 라우팅 컴포넌트 프로젝트. 사용한 기술 스택: Springboot, MySQL, ThreadLocal, Mybatis, AOP 어노테이션. 프로젝트 2: 커뮤니케이션 플랫폼 시스템. 사용한 기술 스택: Springboot, Redis, Kafka, MySQL, ElasticSearch, Spring Security. 이 프로젝트들이 한국의 Java 개발 직무와 부합할까요?

NextJs 확장 fetch로 서버 컴포넌트에서 동적으로 api를 받는 방법

안녕하세요. 선배 개발자 선생님들. 오늘도 한 단계 성장하기 위해 질문을 남겨봅니다. 저는 NextJs, App router 방식으로 코드를 구현중이며, 서버 상태는 React-Query로 상태값을 관리하고 있었습니다. 왜 리액트 쿼리를 사용했는가? why? 1. Optimistic update, 무한스크롤에 대해 공부하고 적용해보고 싶었습니다. 2. 클라이언트 상태, 서버 상태를 나눈다는 개념이 너무 좋아서 서버 상태는 React-Query로 다뤘습니다. 3. statleTime, gcTime을 조정하여 캐싱기능이 좋았습니다. 갑자기 문득 나는 NextJS를 잘 쓰고 있는건가? 리액트랑 폴더 구조 말고는 다른게 없는거 아닌가? 라는 생각이 들었고, NextJs의 기능을 최대한 활용하고 나머지 불편한 부분이 생긴다면 외부 라이브러리를 사용하자! 라는 생각이 들었습니다. 그래서 저는 React-Query로 상태를 관리하던걸 NextJs의 확장 fetch로 바꿀려고 합니다. Optimistic update, 무한스크롤 기능을 제외하고 나머지 모든 서버 상태는 확장 fetch로 바꿀려고 합니다. 페이지네이션 페이지네이션 처럼 사용자와 상호 작용하는 부분, 즉 동적으로 데이터를 받아오게 하기 위해 url을 변경한 뒤, [id]/page.tsx에서 param로 받던지 혹은 header()를 통해 params를 받아서 처리를 할 수 있다고 생각하고, 저는 header()로 params를 받아서 처리를 했습니다. 모달에서의 페이지네이션 그런데 문제는 모달을 띄우고, 모달 내부에서 페이지네이션이 있는 경우 어떻게 데이터를 동적으로 받아오는지 고민을 해봐도 방법이 없는 것 같습니다. 1. 모달에서 다음 페이지 클릭시 url을 변경한다. -> 안해봤지만 동작을 할 수 있더라도 뭔가 느낌적으로 아닌 것 같습니다. 2. 클라이언트 컴포넌트에서 상태값을 서버 컴포넌트로 전달한다 -> 불가능 궁금한 점 1. 모달 내부에서 페이지네이션을 처리할때 url을 변경해서 서버 컴포넌트에서 확장 fetch로 데이터를 관리하는 게 적절할까요? 2. 모달 내부에서는 페이지네이션을 처리할 때는 react-query로 데이터를 관리하는 걸 확장 fetch로 바꿀 수 없는 건가요?? 바꿀 필요가 없는 건가요? 3. 더 좋은 방법이 있는 건가요?

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

react 컴포넌트 작게 쪼갤경우에 파일을 분리하는게 좋나요?

현재 공통으로 사용되지않고, 하나의 page에서만 사용되는 컴포넌트들의 경우 pages폴더의 signUp 폴더에서 (회원가입 페이지의 경우) 계층으로 작성하고있습니다. 단일책임원칙에 따라 하나의 컴포넌트가 하나의 일만 하도록 작게 쪼개고있는데, 폴더의 뎁스도 늘어나고 파일이 너무 많아지는거같아 이렇게 하는 방식이 옳은것인가? 라는 의문이 들어 질문을 작성합니다. 이처럼 컴포넌트를 하나의 일만 하도록 최대한 작게 쪼개는게 옳은 방식인지... 그렇다면 폴더를 계층으로 쪼개는게 맞는건지... 알려주시면 감사하겠습니다 ! 한가지 예시 signUp/content /form / buttonGroup.tsx 요런식입니다

data fetching은 어디서 하는 게 좋은 것일까요?

안녕하세요. 저는 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 피드백을 적극 환영하기에 많은 피드백 혹은 의견을 많이 남겨주시면 감사하겠습니다. 저는 데이터 페칭을 어디서 하는 게 좋을지 고민 중이라 글을 남깁니다. 아래와 같이 3개로 글을 구성해봤습니다. 1. 현재 개발상황 2. 현재 저의 데이터 페칭 위치 3. 궁금한 점 1. 현재 개발상황 저는 개인 프로젝트로 Next.js와 React Query를 사용하여 개발하고 있습니다. 현재 Next.js의 App Router를 사용 중이며, 프로젝트 구조는 아래와 같습니다. app: page.tsx, layout.tsx components: 최소 2번 반복 사용되는 재사용 가능한 컴포넌트 container: 일반적인 컴포넌트 (조합 등) hook, service 등 2. 현재 저의 데이터 페칭 위치 현재 데이터 페칭은 최상단의 app -> page.tsx에서 수행하고 있으며, 자식 컴포넌트에는 데이터를 props로 전달하고 있습니다. 이러한 이유는 prop drilling이 발생하더라도 데이터 페칭을 한 곳에서 처리하면 코드 이해가 쉬울 것 같아서입니다. 현재로서는 전역 상태 라이브러리를 사용하지 않아 최대 4단계까지 prop drilling이 발생하고 있지만, 전역 상태 라이브러리를 도입하면 prop drilling 문제는 해결될 것으로 생각하고 있습니다. 추가적으로 현재 이렇게 구현하면서 data fetch할때 필요한 query값들도 최상단에서 관리해야하는 불편함이 있었습니다. -> 최상단에서 관리해야 하는 상태값이 늘어남 3. 궁금한 점 3-1. 아래의 2가지 data fetching 방법 중 어느것이 적절한지? 합리적인지 의견이 궁금합니다. - 최상단에서 Fetching - 장점 : 한 곳에서 Fetching하기에 코드 일관성, 가독성, 코드를 이해하는데 좋다고 생각 - 단점 : prop drilling, 추가적인 전역 상태 관리 해야한다고 생각 - 필요한 컴포넌트에서 Fetching - 장점 : 필요한 컴포넌트에서 fetching 하기에 prop driling과 같은 불필요한 코드 작성 할 필요 x - 단점 : 어떤 컴포넌트에서 fetching 했는지 파악하기 힘들어짐 3-2. 현재 최상단에서 모든 데이터 페칭을 하고 props로 전달하는 방식 vs 필요한 컴포넌트에서 데이터 페칭을 하는 두 가지 방식 중 어느 것이 더 많이 사용되는 패턴인지 궁금합니다. 3-3. React Query는 서버 상태 관리, 캐싱, Optimistic Update와 같은 기능을 위해 도입했습니다. 그러나 prop drilling을 해결하기 위해 React Query에서 가져온 서버 데이터를 전역 상태 라이브러리에 담게 되면 서버와 클라이언트 상태를 구분하는 의미가 없어지는 것 같다는 생각이 듭니다. 제가 잘못 사용하고 있는것인지 궁금합니다.

성과를 수치로 작성하는게 어려워요

안녕하세요, 현재 퍼블리셔로 일하고 있습니다. 업무를 진행하며 이직 이력서를 작성 중인데, 성과를 수치로 나타내는 것이 어렵습니다. 대부분 과업 특성이 어떤 레이아웃 혹은 기능을 구현하는 수준에서 결과물이 도출했다 라는 것인데요 "성과를 수치로 작성하는 것이 참으로 어렵습니다." 예를 들어 x%에서 xy%로 시간 단축/혹은 고객확보 이런식으로요 제가 구현한 UI가 사용자/고객에게 어떤 불편함이 있었고 혹은 이전 대비 어떤 차이점이 있는지 확인하기가 어렵습니다. 저와 같은 고민에 있었거나/ 있는 분들은 어떻게 이런 이슈를 해결하셨나요? 저와 같은 경우, 관심있는 라이브러리/언어로 개인 포트폴리오로 어필을 해야할까요, 현재 회사에서 다음의 작업을 진행했고/하고 있습니다, : 회사 홈페이지, 웹&모바일 리뉴얼 및 JS인터렉션 기능 추가 : GSAP으로 서비스 가이드 애니메이션 구현 => GSAP을 회사에서 정해준게 아니라, 필요한 기능이 GSAP으로 할 수 있는거 같아, 진행함 : 리액트로, 채팅앱 UI 프론트 담당 - 비동기 통신, 상태관리를 제외한 채팅앱 UI 기능 구현(프론트 담당) > 비동기 통신, 상태관리 데이터 구조는 백엔드 개발자가 정리한 목업 데이터를 가져다 사용하다 보니 - 컴포넌트 기능 개발(ex) 아코디언, 체크박스 등등 ) 성과-> 수치에 대한 방법에 대해 의견있는 분 있을까요? P.S 1. 혹시 저와 같이 퍼블리셔인데 리액트 업무를 하시는 분들은 어떻게 진행한 리액트 작업/업무는 어떻게 어필을 하면 좋을까요? 2. 현재 리액트 코드는 (회사에서) 작업 중 인데, 리펙토링하게 된 계기와 이유 혹은 코드 정리하는 것으로 성과(수치)를 설명해야 할까요? 감사합니다