#렌더링

react, rn 리스트 엔트리 구현시 원본 리스트를 수정하는 함수 최적화가 고민됩니다..

리스트 A 엔트리 컴포넌트 B A를 수정하는 함수 C 이렇게 있을 때 B에서 A를 수정해야 하는 상황입니다. 모바일 환경이라 최대한 엔트리 B를 최적화 하고 싶은데 memo를 해야할 때 함수C는 어떻게 최적화 해야할까요 A에 선언하면 A의 최신 값을 얻기 위해 C가 변경될 때 마다 B또한 C의 변경에 의해 재렌더링 될 것이니 기존에는 이런 재렌더링을 막기위해 setA( (prevA) => { ... } ) 와 같은식으로 setA 내부의 callback으로 A의 최신값을 사용해서 A를 C의 의존성 배열에 추가하는 것을 피해왔는데 수정시 api의 res data를 사용할 일이 생기니 setState내에서는 async await 사용이 불가능해서 질문드립니다... 바보같은 저에게 단비 같은 가르침을 내려주세요..

NextJs에 따로 백엔드를 두는경우

안녕하세요. 토이프로젝트로 글, 댓글, 로그인 기능을 포함한 블로그를 만들어보고있습니다. 원래 프론트엔드는 ReactJs, 백엔드는 Golang으로 만들려고 했는데, 글 기능을 구현하던 중 글기능은 SEO가 필요한데, React는 그게 잘 안되서 원래 React프로젝트 구조를 유지하고 SSR로 렌더링 하기 위해서 NEXTJs로 바꾸려고 합니다. 또 이미지 최적화 기능이나 폴더기반때문에 편하기도 하고요. 근데 Next로 프론트엔드만 바꾸고 GO 백엔드는 유지하려고 하는데, NEXTJS를 프론트로 사용하고 따로 백엔드를 두는게 많이 쓰이는 방식인가요..? NEXT가 백엔드기능까지 제공하는 풀스택 프레임워크로 알고있는데 백엔드서버를 따로 두는게 바보같은 방식인가 궁금합니다.

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만 쓰는게 좋은 이유가 있나요?

리액트에서 이벤트 루프관련해서 질문이 있습니다

안녕하세요. 리액트에서 이벤트 루프 동작 관련해서 제가 이해한내용이 맞는지 질문드립니다! 코드를 간단히 설명드리면 List를 그리는 scroll container가 있고 아이템이 추가되면 마지막으로 추가된 아이템으로 스크롤을 시키려는 코드입니다. (useEffect를 사용해도 되지만 이벤트 루프를 이해하기 위해서 작성하였습니다!) 스크롤을 시키기 위해 작성한 코드는 세가지입니다! 1번 코드는 스크롤이 되지 않습니다. 이유는 리액트에서 batch 업데이트 과정에서 렌더링되기 전에 호출되었으니 스크롤이 되지 않습니다. 2번 코드는 스크롤이 되었습니다. 리액트의 상태변화는 마이크로태스크큐에서 실행이 되었고 렌더링이 발생한 후에 매크 태스크큐가 실행되기 때문에 올바르게 렌더링 후에 실행이 되었습니다. 3번 코드는 스크롤이 되었습니다. 이건 이유를 정확히 모르겠습니다. 개발자 도구에서 실행된 시점을 봐도 마이크로태스크큐에서 스크롤 함수가 실행되었지만 올바르게 실행이 되었습니다. 마이크로 태스크 큐 실행과정에서 appenchild가 발생하고나서 렌더링이 되기전에 이미 레이아웃이 다 계산은 완료가 되는걸까요? 어떻게 이해를 해야될지 모르겠습니다.

React 리렌더링 질문있습니다.

안녕하세요. React를 사용하는 프로젝트에서 테이블을 생성하여 editable 가능하도록 개발하고 있습니다. 해당 테이블에 input도 있고 switch 기능도 있습니다. editable 테이블의 경우 전체 테이블 값을 다 받아서 업데이트 하는 형식입니다. 원래는 ref를 사용해서 진행하려고 했는데 input 과 switch 가 동시에 있어서 row 단위에 값을 받을 때 문제가 발생됩니다..(rows state 와 ref 와 데이터 불일치가 발생됨) 저는 input 에 1글자 쓸 때마다 리렌더링 되는게 안좋다고 생각해서 ref를 사용한건데 그냥 rows state만 사용하고 memo로 리렌더링을 줄이는게 맞을까요? 고견부탁드리겠습니다(_ _)

Router back 렌더링

Nextjs router가 페이지 이동 하다가 다시 back 할 때 이전페이지 상태가 유지가 안돼서 다시 렌더링 하는 문제가 있는데 어떻게 해결하나요? 이전 페이지 내용이 많거나 스크롤 이거나 페이지 그런게 있을 때 어떻게 해야 되나요

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 입니다.

토큰 관리, 로그인 유지를 현업에서는 어떻게 진행하는지 궁금합니다

안녕하세요 토이프로젝트로 인증/ 인가 파트를 맡게되었습니다 이전의 프로젝트에서는 로컬스토리지과 전역 상태 관리 라이브러리의 persist를 활용하여 토큰과 로그인상태를 로컬스토리지에 저장하여 진행하였습니다 하지만 이번에 새롭게 진행하는 프로젝트를 위해 다양한 웹사이트를 개발자도구로 참고하였지만 토큰이나 isLogined와 같이 로그인 여부 상태를 로컬, 세션 스토리지에서 관리하는 사이트를 확인할 수 없었고, 검색을 통해 보안을 위해 Http Only 쿠키를 통해 액세스 토큰과 리프레시 토큰을 관리하는 방법이 일반적이란것을 알 수 있었습니다 이러한 방법에서 몇 가지 궁금증이 생겨 질문을 드리고 싶습니다 1. 현업에서는 어떠한 방식으로 토큰을 관리하고 로그인 상태를 유지하나요? 2. 만약 http only 쿠키를 사용하게 된다면, 쿠키에 저장된 토큰을 클라이언트에서 조작할 수 없으니, 매번 페이지를 렌더링 할 때마다 토큰이 유효한지 api 호출을 통해서 로그인 상태를 유지해야하는걸까요? (api를 통해 토큰이 유효하다면 로그인 유지, 아니라면 로그인 페이지 리다이렉션) 3. http only 쿠키 외에 인증 / 인가를 위해서 클라이언트 단에서 보안적으로 신경써야하는 부분은 어떠한것이 있을까요? 가장 기본적이지만 가장 어려운 인증/인가 부분 현업 선배님들께서는 어떻게 진행하시는지 답변해주시면 감사하겠습니다

React 동작 원리와 관련된 질문

아래 코드에서 handleClick 실행 시 setPending으로 "ready"로 상태가 변경되면 렌더링되고 delay이후 "done"으로 변경되면 또 렌더링 되는 건 알고있습니다. 1. 여기서 비동기함수(위에서 delay)와 관련해 batch 렌더링이 적용되지 않는 이유를 react 공문 링크나 설명 가능하신 분 계신가요? 2. handleClick의 컨텍스트에서 setPending으로 상태가 변경되고 react의 render함수가 실행되고 이후 delay함수가 실행되고 그 다음 setPending이 실행, 다시 render함수가 실행되는 과정을 실행컨텍스트 관점에서 알고싶습니다.

리액트에서 스크롤로 opacity 조절할때, ref vs opacity

안녕하세요. 리액트로 스크롤할 때 opacity를 조절하는 기능을 만들고 있습니다. 이 컴포넌트에는 작성자, 이미지 등 다양한 값들이 존재하는데요. 스크롤할 때는 style의 opacity만 변경됩니다. 그렇다보니.. 굳이 리렌더링을 트리거하는 state로 이걸 관리해야되나 싶긴한데요. 이런 상황이라면 다들 어떻게 개발하시나요?

useState와 useEffect에 대해 너무 헷갈립니다.

안녕하세요 useState와 useEffect를 공부중인데 아직 초보자라 너무 헷갈리더라구요. 제가 이해한 것은 우선 useState는 클릭했을 때 모달창이 나온다거나, 사용자가 input에 입력한 값처럼 무언가를 동적으로 변경이 되게 할 때 사용하고 또 API를 사용할 때 이 데이터를 저장할 때 사용한다...로 알고 있고 useEffect는 컴포넌트가 처음 렌더링 될 때 html 부분이 먼저 화면에 그려진 후 데이터가 실행되게 할 때 useEffect를 사용한다...까지만 이해하고 있습니다. 여기서 궁금한점이 첫번째로, useState는 제가 설명한대로만 사용하면 되는지 궁금합니다. 두번째로, useEffect는 이 안에 작성한 코드는 한번만 실행이 된다라고 하는데 이 한번만 실행이 된다라는게 무슨 말인지 그리고 useEffect안에 console.log()와 useEffect 밖에 console.log() 이렇게 했을 땐 뭐가 다른것인지 너무 헷갈립니다. 제가 아직 초보자라 정말 정말 쉽게 설명해주시면 너무 감사드리겠습니다. ㅜㅜ

usecallback

usecallback을 사용하여, 참여기능, 좋아요기능 함수에 usecallback으로 감싼것을 성능최적화 경험이라고 할수있을까요 ? 참여나 좋아요 함수가 다른 함수들 때문에 불필요한 리렌더링이 될수가있어서.. 사용해보았는데 궁금합니다. 이외 다른..실무에서 usecallback이 사용되는 경우가 궁금합니다.

useEffect 훅에 대해 질문있습니다.

현재 리액트를 공부중인데 useEffect에 대해서 계속 헷갈리더라구요. useEffect는 처음에 렌더링이 될 때 최초에 한번만 실행이 된다. 그리고 주로 API 데이터작업을 할 때 사용한다...라는 정도만 알고 있는데 한번만 실행이 된다라는 말과 API 관련코드를 주로 왜 useEffect안에 작성이 되는지 이 부분이 이해가 되지 않더라구요. useEffect에 대해 구글링도 하고 공식문서도 읽어봤지만 아직 기초를 공부하고 있는 저에게는 설명이 너무 어렵더라구요. 그래서 useEffect에 대해서 정말 이해하기 쉽게 설명해주시면 너무 감사드리겠습니다.

react 전역 상태 관리 도구 사용

안녕하세요~! 최근에 프론트엔드를 배우게 되어서 여쭤봅니다.. react 를 사용하면서 props drilling 을 겪고, 복잡한 코드가 되어 가는 중입니다. 궁금한 점은 zustand를 전역 상태 관리 도구로 사용하고 있는데 zustand를 어떻게 사용해야 잘 사용하는 것 일까요? 렌더링을 조금 깔끔하게 하고 싶어서 문의드립니다. 상황에 따라 다르겠지만 zustand를 많이 써서 state를 store 형태로 보관해서 사용하는게 좋을까요? 전문가들의 고견 부탁드립니다.(_ _)

react-query로 이미지를 가져올 때, 이미지가 깜빡거리는 문제를 해결하고 싶어요.

React 프로젝트에서 차량 데이터 목록(차량 모델 사진, 차량명, ....등)을 보여주는 웹 프로젝트를 진행하고 있습니다. 차량 데이터 목록 화면에서 react-query를 통해 가져온 데이터는 (예시 데이터) const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식으로 가져와서 map을 통해 CarCard 컴포넌트에 데이터를 props로 보내어 현재 출력하고 있습니다. 여기서 이미지 같은 경우는 백엔드에서 차량 모델 이미지를 가져오는 api를 따로 만들어놓아서, props로 전달받은 car_model_image 즉, 차량 모델 이미지의 id를 통해서 차량 모델 이미지 api에 데이터를 요청해서 이미지를 출력하고 있습니다. 이때. 페이지를 전환하거나, 한 페이지에서 아무동작을 하지 않아도 게속 이미지가 깜빡거리면서 재렌더링이 되고, 계속 무한정으로 이미지를 호출하는 문제가 발생하였습니다. map을 통해 CarCard를 호출하고 CarCard 안에서 이미지를 호출함에 따라서 계속 이미지가 깜빡깜빡 거리는 것 같은데, 컴포넌트 안에서 이미지를 호출할 때 어떻게 하면 무한정으로 이미지를 불러오지 않도록 하고 깜빡거림을 없앨 수 있을까요 ?...어떻게 해결해야 할지 감이 안 잡혀요.... //차량 목록 페이지 한 부분 ... const { data } = useGetCarList(); //useQuery를 통해 서버에서 데이터 전달받음 // const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식 .... return ( <div> data.map((data: CarData) => { return ( <Carcard ascCarData={data} key={Math.random()} handleClick={() => handleClick(data)} isActive={true} /> ); }) </div> ) //Carcard 컴포넌트 const { data: carImage } = useGetCarModeImage(ascCarData.car_model_image); // 이미지 데이터 가져오기

새로고침 시 로그인 유지할 때 어떤식으로 하나요?

안녕하세요. 서버를 구축하고 JWT로 로그인 구현 연습 중인 프론트엔드 개발자 지망생입니다. 로그인을 했을때 서버에서 액세스 토큰과 유저 정보(유저 이름)를 받고 토큰은 웹 로컬스토리지에 저장하고 유저 정보는 리덕스로 상태를 관리하였습니다. 하지만 새로고침을 하면 리덕스의 상태가 없어져서 화면에 표시한 유저정보(유저 이름)가 사라지는 문제가 발생합니다. 이에 저는 2가지 방법을 생각해봤습니다. 1. 로그인을 한 후 토큰 뿐만 아니라 유저 정보(유저이름)도 같이 웹 로컬스토리지에 저장하여 app.js 첫 렌더링 시 유저 정보를 리덕스 상태에 넣기 2. 토큰만 저장하고 새로고침할 때 마다 서버에 요청해서 유저 정보를 가져오기 위 두 방법 중 어떤 방법이 옳은 방법인지 궁금합니다. 아니면 더 좋은 방법이 있는 지 궁금합니다.

공공데이터 API 호출 및 렌더링 과정에서 고민이 있습니다..

공공데이터api 관련 프로젝트를 진행 하고 있습니다. 기획, 디자인 전부 저를 비롯한 팀원과 함께하고 있는데, api를 불러와 정보 데이터를 표시하는데 <p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);">덕순이.. 이상하게 보자마자 덕순이란 이름이 떠올랐어요.</span></p><p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);"><br></span></p><p><span 이런식으로 스트링 값으로 불러와집니다. 문자열로만 추출하니 개행, 문장 이음새 등등이 가독성이 아래사진 처럼 매우 떨어지게 됩니다 다음 상황에서 어떤 방법이 좋을까요? 위와 같은 태그로 표시되기에 이를 React에서 그대로 태그 형식으로 출력하는 방법을 생각해보고 있지만, 컬러,폰트 크기 같은 속성은 제외하고 <p> <span>등의 태그만 유지하도록 필터링해야하는 것인가요? 혹시 그렇다면 그 필터되 값을 문자열 형식말고 태그형식으로 적용할 수 있을까요? (추가) 현재 gpt 도움으로 아래의 방법으로 진행하여 성공하게 되었는데 이방법보다 효율적인 방법이 있을까요? 또한 이방법으로는 폰트 사이즈, 굵기가 임의 조절이 되지않는 단점이 있어서 이를 해결하고 싶습니다.

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

리액트 투두리스트 체크박스

리액트로 투두리스트를 만들어보고 있는데 삭제 기능은 filter() 메서드로 구현하였고, 체크박스는 input에 css :checked로 구현하였습니다. 문제는 첫번째 항목을 체크하고 난 후에 리스트 앞부분에 새로운 항목을 추가해도 체크박스는 항상 첫번째 항목에 체크되어 있습니다... 인풋 박스를 독립적으로 빼서 컴포넌트로 사용하면 개별로 적용될거 같았는데 결과는 같았고, state로 체크 된 항목을 따로 관리해봤는데 그거또한 결과가 같았습니다...ㅠㅠ 리스트의 key는 map의 index로 사용하고 filter()로 삭제 기능을 구현하니 키는 마지막 순서만 삭제되면서 재렌더링으로 리스트가 변경되서 체크박스가 개별로 적용이 안되는것으로 예상이 됩니다만 너무 어렵네요ㅠ.. 구체적으로 도와주시면 감사하겠습니다ㅠㅠㅠ코드는 첨부했습니다!

백엔드 테스트 와 머신러닝 테스트가 따로 하면 잘되는데 같이 하면 오류가 발생합니다.

저희 프로젝트의 기본적인 골자는 osmd라고 하는 mxl포맷 파일을 악보 형태로 렌더링해주는 라이브러리를 사용하구요, 스트림되는 오디오를 듣고 그걸 머신러닝 파이썬 코드가 처리한 뒤 timestamp라는 값을 반환하면 그에 맞춰 악보의 현재 위치를 가리키는 cursor를 움직이는 프로젝트입니다. 또한 오디오 스트림을 넘겨받기 위해서 aws에다가 쿠렌토 미디어 서버를 만들었구요, 머신러닝 코드는 로컬에서 돌아가고 있습니다. 각기 따로 스트림을 처리했을때(stdin stdout) 잘 되는 것을 확인했습니다(https://github.com/Kurento/kurento-java 쿠렌토 서버의 구현은 이 레포를 참고해서 만들었습니다) 또한 import sys def main(): while True: line = sys.stdin.readline() if not line: break output = line.strip() + '2' print(output) if __name__ == "__main__": main() 이 예제를 활용해서 테스트해봤을 때 문제없이 작동했습니다(쿠렌토) 머신러닝 코드는 wav 파일을 버퍼 잘라서 stdin에 집어넣고 테스트해보았습니다 작동은 둘 다 문제없이 작동했지만 같이 이어서 하게되면 Failed to write data: The pipe is being closed라는 오류 로그가 찍힙니다. (요약) 1. 백엔드에서 Kurento Media Server(webrtc) 인풋 들어온거에 아무거나 붙여서 반환하는거로 테스트 해봤을 때 문제 없이 스트림 처리가 되는 것으로 확인 됨 2. 머신러닝 쪽에서 오디오 스트림 모드를 만들고 stdin으로 들어온 스트림에 대한 결과값을 stdout으로 반환하는 것이 확인 됨 3. 그렇지만 둘을 이제 갖다붙이면 위 에러 로그 발생 이유 아시는 분들은 알려주시면 감사드립니다. 두서없이 장문을 써서 이해가 안되는 부분들 말씀해주시면 설명드리겠습니다. 감사합니다.

next.js를 사용하는것의 의미

안녕하세요. 신입 프론트엔드 개발자로 취업한지 3주된 뉴비입니다. react만 써보다가 취업 후 next.js를 공부하고 있는데요, next.js를 공부한지 얼마 안돼서 아직 모르는게 많은데 본질적으로 궁금한게 있어서 질문드립니다. next.js가 서버 사이드 렌더링이 되는것 뿐만 아니라 next.js 프로젝트 내에서 다양한 백엔드 로직을 수행하는 api들도 정의할 수 있는(심지어 DB 접근까지) 풀스택 프레임워크라고 알고있어요. 그럼 next.js로 프론트엔드와 백엔드 로직 모두 다루면 백엔드 서버는 따로 만들 필요 없는건가요? 그리고 요즘 프론트엔드 기술을 next.js를 채택하고 있는 기업들이 굉장히 많은데, 이런 곳들도 사실상 모두 백엔드 개발자가 따로 있잖아요? DB 데이터 처리, 보안 등과 같은 중요한 백엔드 작업을 전문적으로 수행하는 백엔드 개발자가 따로 있으면 어차피 프론트엔드 개발자는 결국 React 등을 사용해서 개발할 때처럼 클라이언트단만 신경쓰면 될듯한데 왜 굳이 프론트를 풀스택 프레임워크인 next.js를 사용하는 경우가 그렇게 많은 것인지가 궁금합니다. 단지 서버 사이드 렌더링이 된다는게 그렇게 의미가 큰걸까요? 궁금합니다..!

리액트에서의 오픈그래프 적용?

안녕하세요. 현재 리액트를 활용해서 대학축제에서 사용할 채팅앱을 개발하고 있습니다. 저희 앱에서는 학교 축제 정보(몇시에 어떤 행사가 있는지)와 학우 간 채팅 기능을 제공하는데요. 카카오톡 채팅방에 링크를 보내면 카드형태로 보여주는 링크 미리보기 기능을 저희 앱에도 구현하고자 합니다. 더욱 구체적으로 말씀드리자면, 서버로부터 받아온 대학 축제정보 게시물이 여러개가 있는데, 이 모든 게시물들에 오픈그래프를 적용하고 싶습니다. 그래서 채팅방에서 공유할 때 링크 미리보기가 출력되게 하고 싶습니다. 문제는 리액트 특성 상 클라이언트에서 렌더링하기 때문에 적용이 어렵다는 것입니다. 1. axios.get('festival/1')을 호출하여 스프링 서버에서 축제 정보를 JSON으로 받아온다. 2. 리액트에서 받아온 JSON을 바탕으로 렌더링한다. 이런 상황에서 오픈그래프를 적용할 수 있는 방법이 있을까요?

사용자 등급에 따라 다른 화면을 보여주고 싶어요.

Next.js 14버전을 사용하고 있습니다. 홈페이지에 접속했을 때, 사용자의 로그인 상태 여부에 따라 각기 다른 컴포넌트를 보여주고 싶습니다. const Main = () => { const isLogin = useRecoilValue(loginStatus); const user = useRecoilValue(userAtom); return ( <> <AuthWrapper> {isLogin && user ? <Login/> : <Logout />} </AuthWrapper> </> ) }; export default Main; isLogin과 user는 로그인 여부와 회원 정보에 대한 전역 변수입니다. isLogin의 default값은 false이고, user의 경우 isLogin이 true일 때만 존재합니다. (로그인 상태일 때 해당 유저 정보를 api로 호출) 그리고 <AuthWrapper>를 통해 해당 전역 변수들을 업데이트 해줍니다. 제가 원하는 건 최초 페이지 접속 시에 AuthWrapper를 통해 state값을 초기화해주고, 이에 알맞게 컴포넌트가 렌더링 되는 것입니다. 하지만 isLogin의 default값이 false이기에 로그인 상태일 경우, 순간적으로 Logout컴포넌트가 출력되었다가 AuthWrapper에서 검증 후 state값이 변경되면 Login컴포넌트가 출력됩니다. 이 순간적인 깜빡임을 없애고 바로 동작할 수 있게 하는 방법이 있을까요? +) 추가로.. 서버 사이드에서 처리하기에는 AuthWrapper 내부에서 storage값을 사용하거나 useEffect등을 사용하기에 불가능했습니다.

useSuspenseQuery의 SSR 요청

안녕하세요, Next.js (v13-14), react-query (v5), page router 환경일 때, useSuspenseQuery와 Suspense를 사용했는데 찾아보니 useSuspenseQuery는 컴포넌트 렌더링 시점에 데이터를 로딩하도록 설계가 되어 있어서 Next.js에서 getStaticProps or getServerSideProps 함수를 사용하지 않아도 서버에서 api 요청이 보내지는게 맞을까요? 제가 테스트해보니 위의 가정 했던 것 처럼 동작하는것을 확인을 했지만 문서에서는 그런 내용을 찾을 수가 없어서 질문을 올려봅니다. 감사합니다!

Next.js의 SSG와 react-query의 useSuspenseQuery

Next.js v14의 페이지 라우터 및 react-query v5의 useSuspenseQuery를 사용하여 Suspense를 사용할 때 페이지 컴포넌트에서 getStaticProps를 사용하지 않아도 SSG 빌드 타임에서 API request 하는 현상이 발생해서 찾아보니 useSuspenseQuery가 컴포넌트 렌더링 시점에 데이터 로딩하도록 설계가 되어 있기 때문에 빌드 타임에서 HTML을 만들 때 결국 API request 하게 되는 것이라고 이해했었는데 제가 이해한 부분이 맞을까요? react-query(tanstack-query)나 next.js의 공식문서에는 그러한 내용을 찾기가 어려워서 정확한 정보인지 알고 싶습니다!

next.js에서 interceptor 어떻게 사용하고 계신가요?

안녕하세요 page router 형식으로 프로젝트 진행 중 궁금한게 있어 게시글 남깁니다. 현재 프로젝트에서는 두가지 AJAX 요청이 존재하는데요. 한가지는 클라이언트 사이드에서의 요청(좋아요 누르기 기능 등)과 서버 사이드 렌더링을 위한 getserversideprops에서의 요청입니다. 문제는 인증 방식으로 엑세스토큰을 사용중인데 axios interceptor을 사용하려고 보니 하나의 interceptor로 두가지 요청을 커버하기가 어렵겠더라구요. 혹시 비슷한 경험이 있으신분들 어떻게 사용하셨는지 공유해주시면 감사하겠습니다.

리액트의 조건부 처리가 궁금합니다.

프로젝트들을 진행하면서 조건부 처리를 많이 사용하는데 이 두 개의 조건부 처리에 대해서 갑자기 궁금해서 질문 드립니다. const [isMCategoryVisible, setIsMCategoryVisible] = useState(false); - 조건부로 처리 {isMCategoryVisible && <MoblieCategory menu={menu} />} - 스타일 조건부로 처리 <MoblieCategory className={`${isMCategoryVisible && hidden}`} /> 이렇게 자주 사용합니다. 조건부로 처리하는 것은 렌더링을 할때 자바스크립트 조건을 검사하여 참 일때만 요소가 렌더링이 되며, 스타일로 `display:hidden`을 처리하면 HTML 검사할때 `hidden`을 찾아서 처리하지만 여기서 조건으로 처리가 되면 위에 조건부 처리로 하는 것과 같나요? 스타일 조건부로는 애니메이션을 사용할 때 많이 사용한거 같은데 어느 것이 더 효율적이나요??

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 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가 나올 때도 있고 안 나올 때도 있어서, 명확한 기준이 있는지 궁금해서 질문을 올립니다.