useState 와 함수

프로젝트를 하다보면 state에 따라 모달을 열고 닫는 기능을 구현할 때가 많습니다. 이럴 때마다 부모에 state를 만들고 자식(모달)에게 useState를 내리거나 useState를 함수에 감싸서 내리는 두가지 방법에 대해 고민합니다. 복잡한 기능은 당연히 함수로 감싸서 내려야겠지만 단순한 useState만 있는 기능에서는 함수로 감싸지 않는 것이 맞나요? 실무에서는 어떻게 하는지 궁금합니다

try-catch를 다들 어디에 작성하시나요?

아래 코드에 자세한 내용 적었습니다. 1번, UI와 가까운 쪽에 작성한다 2번, 데이터 가져올 때 작성한다 이 중에서 어떻게 하시는지 궁금해요!

플러터와 리액트 웹뷰 연계 이미지 파일 업로드 질문 입니다..

현재 웹뷰 앱 작업 중에 플러터의 네이티브 기능(사진 촬영 후, 자르기)이 필요해, 리액트 내부에서 리스너를 통해 플러터를 호출하여 데이터를 받습니다. 근데.. 플러터에서 넘겨주는 데이터는 파일 객체가 아니라, 해당 이미지의 경로만 보내줍니다. 이미지 경로에 직접 접근해서 이미지 파일을 렌더링 해야하는데 어차피 갤러리를 참조해야하는거면 웹처럼 require를 통해 이미지 경로를 적어줘야하는건지.. 어떤 방식으로 경로로 접근해 이미지를 뿌려줄 수 있을 지 갈피가 안잡힙니다..

리액트 프로젝트에 컴포넌트 구조 어떤게 더 나을까요???

쟁점은 select component안에 있는 table 요소 내부를 어떤 식으로 react.memo로 component 분리해서 children으로 처리하는게 나을까요?? 아니면 useMemo로 한 컴포넌트 내에서 처리하는게 나을까요??

react에서 google oauth redirect 관련해서 좋은 방법이 있을까 해서 질문 드려요~

/pathname-a >> google oauth 로그인 >> redirect to /oauth 위 단계에서 route /oauth에서 다시 route /pathname-a 로 redirect하는 좋은 방법이 있을까요 ? /pathname-a는 언제든 바뀔 수 있는 값이고.. localStorage로 rediret 경로를 저장을 하면 react state가 저장이 되지 않아서 고민이 많네요 ㅠ

리액트 onSuccess에서 await한 로직의 테스트가 계속 fail하는 문제가 있습니다.

리액트 테스팅 라이브러리에서 useMutation의 isLoading과 onSuccess에 따른 컴포넌트 렌더링을 테스트하려고 합니다. isLoading에 의한 컴포넌트까지는 테스트가 잘 되는데, onSuccess일 때 await이 동작하지 않아서 문제가 발생하고 있어요. onSuccess에 console.log를 찍어보면 테스트가 종료되어서 찍히지 않습니다ㅠㅠ 테스트 코드는 onSuccess일 경우의 컴포넌트가 렌더링될 때까지 await을 사용해서 기다리도록 작성되어 있는데, 어떤 문제가 있는 걸까요?

리액트 루트 dom 노드 관련 질문 있습니다.

안녕하세요. 리액트 공식문서를 읽고 있는데 이해가 잘 안가는 부분이 있어서요..! React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. 여기서 일반적으로 하나의 루트 돔 노드가 있다는데 이게 꼭 하나일 필요는 아니고 필요의 경우 여러개로 구성될 수도 있다는 말인가요?

useQuery 응답 순서 문제 (query key의 일부가 다른 경우)

useQuery에서 API 호출에 필요한 parameter 가 달라지는 경우에 query key의 일부를 변경하여 재호출을 하는 것으로 알고 있는데요. useQuery({ queryKey: [ reactQueryKeys.search, searchParams, ], queryFn: () => requestSearch( searchParams, ), }) (여기서 searchParams 가 상태 값이어서 달라지는 값입니다.) parameter만 다르고 찌르는 곳이 같은 API 요청을 2번 연속으로 한다고 했을 때, 첫 번째 요청과 두 번째 요청의 결과가 요청한 순서대로 오는 것을 보장할 수 있을까요? 제가 느끼기에는 첫 번째 요청과 두 번째 요청이 서로 독립적으로 동작한다고 느껴졌거든요. 만약 응답 순서를 보정하지 않는다면 보장할 수 있는 방법이 있을지 궁금합니다. 검색어 자동완성이나, 지도를 움직일 때마다 API 요청을 하는 경우 응답 순서 문제가 발생할 수 있을 것 같아서요.

리액트 상태관리, 어떻게 하고 계신가요?

안녕하세요, 주니어 프론트엔드 개발자입니다. 현재 저는 어드민 프로젝트를 리액트로 만드는 작업을 하고 있습니다. 프로젝트 규모가 꽤 크다보니, 상태관리에 대해 많은 고민을 하고 있어요. 그 동안 내가 알던 리액트가 맞나 싶을 정도로 상태에 대해 다시 생각해보고 있습니다. 처음에는 상태관리 라이브러리 없이 작업을 했습니다. 나름대로 기획서를 보고 상태를 저마다의 컴포넌트에 넣어 사용했어요. 그런데 진행하다보니 다른 곳에서도 해당 상태를 사용해야하는 일이 빈번하게 발생해서, 수정하는 시간이 길어질 때가 많았습니다. 그래서 결국 전역 상태관리 라이브러리(zustand)를 사용하게 됐어요. 막상 사용해보니 정말 좋았습니다. 제가 생각한 장점은 다음과 같아요. - 사용할 컴포넌트에서 바로 사용이 가능하다. - 스토어에서 뽑아 사용하다보니 데이터 동기화가 비교적 쉬웠어요. - 스토어별로 파일을 분리하고, 해당 로직만 담겨 있어 파악하기가 쉽다. - 며칠 뒤에 봐도 이어서 작업하기가 좋았습니다. - 이전에는 상태들이 어느 컴포넌트에서 쓰이는지 헷갈릴 때가 많았어요. - 컴포넌트는 뷰 컴포넌트로, 비즈니스 로직이 스토어에 담겨 있어서 좋았어요. 제 짧은 경험에 느낀 장점들로 계속 사용하고는 있지만 자꾸 의문이 듭니다. 거의 모든 상태들을 스토어에 담아 사용하다보니 '전역' 라이브러리의 역할에 맞지 않다고 생각이 들어요. 페이지 간에 공유하는 상태는 없다보니 context api도 고려해봤지만, zustand와 달리 하위 컴포넌트가 리렌더링이 되고, 해당 api는 다크 모드같은 기능에 쓰고, 러닝커브가 비교적 적은 zustand를 선택했습니다. 결론은, 여러분은 상태관리를 어떻게 하고 계신지 궁금합니다. 어떠한 기준이 있는지, 전역 상태관리 라이브러리는 어떤 경우에 쓰는지 등 제가 경험이 적고 혼자 프론트 개발을 하다보니 모든 의견 하나하나가 소중합니다. 리액트 상태관리에 대한 선생님들의 고견을 부탁드립니다.

Css width height

제가 모니터로 만들때는 전체 화면 채울려고 width 100vw height 100vh로 해서 배경을 검은색으로하면 정확히 채워지고 요소들도 flex로 가운데정렬이 잘되는데 노트북으로 하면 스크롤바가 생기고 요소들도 약간 치우쳐지네요 ㅠ 해결방안이없을까요?

리액트 혹은 next.js 환경에서 모달을 관리하는 방법이 궁금합니다.

안녕하세요. 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 사이드 프로젝트를 하면서 많은 모달들을 만들어 왔었는데요. 문득 몇가지의 궁금한 점이 생겨서 현업 분들은 어떤식으로 작업하시는지 궁금해서 여쭙습니다. 1. 여러개의 모달의 오픈 유무를 전역 상태에서 한번에 관리 하는 방법이 좋을까요? 아니면 열고 닫을때 필요한 state와 함수를 custom hooks로 만들어서 컴포넌트 내에서 state와 props로 관리 하는게 좋은가요? 2. 전역 관리를 선택했을시, 모달을 켜둔 채로 뒤로가기 혹은 앞으로가기 후에 다시 본래 페이지에 되돌아오면 모달이 켜진 상태로 유지가 됩니다. 이런 경우는 어떤 식으로 처리를 하시는 편인가요? 뒤로가기 버튼에 모달을 false로 바꾸는 이벤트를 추가하는 방법일까요? 답변 기다리고 있겠습니다~

Next.js 13 서버 컴포넌트 조건부 렌더링

안녕하세요. 개인프로젝트로 SEO가 중요한 웹 애플리케이션을 만들고 있어서 Next.js 13을 배워 사용중입니다. 프로젝트를 진행하다보니 막막한 구간에 들어섰습니다. 조건부 렌더링으로 사용자의 조작에 따라서 각각 다른 컴포넌트들을 렌더링하려고 페이지 루트 컴포넌트에 useState()를 사용했습니다. 그리고 그러다보니 루트 컴포넌트에 'use client'를 선언하게 되었고 루트 컴포넌트는 자연스럽게 클라이언트 컴포넌트가 되었습니다. 그런데 여기서 의문이 들었습니다. next 13 공식문서에서는 컴포넌트를 클라이언트 컴포넌트로 만들면 모든 하위 컴포넌트들이 클라이언트 컴포넌트가 되기 때문에 SEO에 취약해질수있다. 그러니 되도록이면 서버 컴포넌트를 상위에 배치시키고 클라이언트 컴포넌트는 하위 컴포넌트로 배치하는게 좋다. 이렇게 나와있는데 조건부 렌더링 기능을 넣자니 클라이언트 컴포넌트로 만들어야되서 SEO가 취약해지고, 조건부 렌더링을 빼자니 프로젝트가 너무 밋밋해지고.. 되도록이면 루트컴포넌트는 서버컴포넌트를 유지하면서 조건부 렌더링 기능을 넣고싶은데 막막하네요.. 혹시 서버컴포넌트에서 조건부 렌더링을 할수있는 방법이 있을까요? 현업에서는 이런상황일때 어떻게 하시나요?

금융회사 sm에서 개발자 취업

준비하고 있는 5년차 직장인입니다. 프론트엔드 쪽으로 준비하고 있구요. 자바스크립트랑 리액트 중심으로 가려합니다. 공부하면서 원서를 넣고있는데 번번이 서류탈락이더라구요 .. 아무래도 금융권 sm에서는 개발역량 발전에 부적합하기 때문에 보지도않고 떨어뜨리는거 같은데.. 포폴 준비까지 하면 그래도 서류까진 가능할까요? 저같은 상황 겪어보신 분들 조언이 필요합니다

프론트엔드와 백엔드 갈림길에 오래 서있네요

안녕하세요. 저는 원래 프론트엔드를 준비하던 취준생이였습니다. 근데 요 몇달간 번아웃과 힘든게 찾아도오고 주변분들이 백엔드도 괜찮다 라는 말씀때메 프론트엔드와 백엔드 갈림길에 서 있는데요 ( 현재는 자바 기초 단계를 공부중입니다) 프론트쪽은 html /css /js /react (라우터까지) 공부를 했던 상태였습니다. 그런데 프론트쪽에서 제가 이것저것 못만들고 답답함을 너무 느끼고 제 자신한테 짜증이 나기시작하면서 번아웃이 오더라구요. 그래서 백엔드 쪽을 좀 공부를했는데 처음에는 재밌긴하였으나 프론트쪽 공부한게 좀 아쉽고 .. 제 성격상 눈에 실시간으로 보이는 걸 좋아하기에 프론트쪽이 계속 생각이 납니다.. 백엔드를 공부헀던 이유는 - 자바 > 스프링 순서로 만지면 취업하는 범위가 넓어진다 -꼼꼼히 보시는 성격상 백엔드가 어울린다 등 이런 사유때메 공부를 했었던 것 같아요. 하던 걸 자주 까먹고 어떠한 것을 배워도 활용 할 줄을 모르니.. 자신감이 떨어지더라구요 현재 그리고 사정상 독학으로만 하다보니..한계의 부딪힌 것 같은 느낌이 자꾸만 듭니다.. 현재도 맨날맨날 고민입니다 어떻게 해야할지 계속 고민만하면 시간만 갈텐데 말이죠.. 선배님들의 조언과 경험담이 있으시면 듣고싶네요

progressbar 기능 구현할 때 서버에서 클라이언트로 진행률을 보내는 방법

지금 프론트는 리액트, 백엔드는 자바를 사용하고 있습니다. 엑셀 파일을 업로드할 때 프로그레스바를 사용하려고 하는데요, 진행률을 서버에서 클라이언트로 어떻게 보내야 할까요?? 파일 업로드는 백엔드에서 하는 건데 프론트에서 퍼센트 파악이 가능한가요?? 혹시 어떻게 검색해 보면 좋을까요 ㅠㅠ

여러분의 회사에서는 어떤 CSS 라이브러리를 사용하시나요?

Q. 회사에서 어떤 CSS 라이브러리를 사용하고 계시며, 장점과 단점을 알려주실 수 있나요? Q. 반응형 웹사이트와 유지보수의 관점에서, 어느 css 라이브러리를 선택하는 것이 좋을까요? 회사에서 웹사이트를 개발 중인 신입 프론트엔드 개발자입니다. 기존에 Vue로 작성된 레거시 코드를 React로 마이그레이션하고 있습니다. 기존 코드의 스타일링은 css 파일을 import하는 방식으로 사용되었습니다. 이를 React로 변경했을 때, 클래스명이 중복되는 문제가 있어서, css-module을 사용하는 중입니다. (참고로 디자인은 정해져있는 상태입니다.) 앞으로 웹사이트를 반응형으로 제작해야하고, 기능을 추가해야합니다. 또 추후에 다른 사람이 코드를 보고 디자인을 수정해야하는 상황이 올 때, 쉽게 변경할 수 있게 만들고 싶습니다. 제가 익숙한 css 라이브러리는 Tailwind인데, 이 라이브러리는 클래스명이 복잡성이 있고, className이 길어질 수 있다는 단점 때문에, 일부 개발자들이 기피한다고 들었습니다. 제가 선택할 라이브러리를 앞으로도 회사에서 계속 사용하게 될 것 같은데, 어떤 것이 프로젝트 진행에 도움이 될 지, 혹시나 선택한 라이브러리가 걸림돌이 되진 않을지 불안합니다. 여기 계신 개발자분들은 어떤 css 라이브러리를 사용하고 계시며, 어떤 장점이 있나요?

리액트 일렉트론에서 파이썬 파일 실행

안녕하세요, 일렉트론 리액트를 이용해서 주식매매를 만들고 있는 대학생입니다. 현재 저희가 파이썬으로 주식정보 api를 받아와서 가공을 한 상태인데, 이를 리액트에서 받아서 사용하고 싶은 상황입니다. 그래서 저희가 현재 파이썬 플라스크와 pyqt5를 쓰려고 시도하고있지만, PyQt5를 인식하는데 없다고 뜨고 있습니다.. 혹시 이와 같은 문제를 해결해보신 분 계실까요ㅠㅠ 아니면 다른 좋은 방법이 또 있을까요 조언부탁드립니다..!

웹뷰로 하이브리드 앱 개발하기

안녕하세요. 현재 Flutter로 앱을 개발완료한 상태입니다. 이벤트를 할 때마다 ui를 조금씩 바꾸고 앱을 수시로 업데이트해야 하는 상황이라서 웹뷰를 담은 하이브리드 앱으로 전환하려고 합니다. (토스도 비슷한 방식으로 알고 있습니다.) Next.js 또는 React 웹뷰를 Flutter 또는 네이티브 앱에 연결하고 싶은데 둘 사이에서 소통할 때 로그인 정보나 위치 정보 등을 어떻게 주고 받는지, 보안은 어떻게 처리해야 하는지 등 정보를 찾아봐도 잘 나오지 않아 여기 질문 드립니다. 참고할만한 좋은 글이나 영상이 있을까요? 감사합니다.

제 실력과 공부하는 방식에 의구심이 들어요

전에 독학으로 공부를 조금하다가 3월 말부터 부트캠프로 프론트쪽으로 공부하고 있습니다 현재 과제나 프로젝트 같은 건 벽을 만나더라도 벽을 부스든 벽을 뛰어넘든 어떻게 잘 헤쳐나가고 있는 거 같습니다 하지만 항상 어떤것을 만들으라고 했을 때 아무것도 없는 상태에서 시작하려고 하면 항상 어렵고 머리가 멍해집니다 그래서 구글링 또는 전에 했던 프로젝트나 공부했던 것들을 계속 참고하게 되더라고요 그러다보니 이게 정말 내것이 맞을까 하는 생각도 들고 과연 나에게 vs코드 프로그램 하나만 켜주고 만들으라고 하면 내가 잘 구현할 수 있는 부분이 있을까? 라는 생각을 많이 하게 되는 거 같습니다 아직 초기 배우는 단계라서 그런 건지 시작할 때 다른 자료를 참고하는 걸 자제해야 하는지 헷갈립니다 다른분들의 생각이 듣고싶습니다