#react

빠른 답변⚡서포터즈

BETA

리액트 관련 질문에는 20명의 서포터즈가 빠른 답변을 달아드려요

하루 전 · 익명 님의 질문 업데이트

넥사크로 ui 개발자 커리어

ERP SCM 대기업 수주 프로젝트를 하는 SI 회사에 신입으로 입사하였습니다. 넥사크로와같은 ui tool을 사용하여 경력를 쌓는다면 1. 개발자로서의 커리어 2. 전망 이 궁금합니다. 경력을 쌓고 서비스회사에 이직을 꿈꾸고 있습니다. 흔히 주목하고 있는 리액트와같은 툴이 아니라 생소하여 물경력이 될까 우려되는 생각이 들기도 합니다. 개인프로젝트로 계속 근무 외적인 부분에서 많은 노력이 필요할것이라 생각이 듭니다.😭

커리어

#넥사크로

#nexacro

#react

#java

답변 0

댓글 0

조회 8

하루 전 · 백우혁 님의 질문 업데이트

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

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

기술

#next.js

#next.js-13

#react

#client-component

#server-component

답변 1

댓글 0

조회 45

2일 전 · 익명 님의 질문

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

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

커리어

#react

#이직

답변 0

댓글 0

조회 9

2일 전 · 김영진 님의 질문

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

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

기술

#모달

#modal

#react

#next.js

답변 0

댓글 0

조회 13

2일 전 · 달레 님의 답변 업데이트

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

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

커리어

#프론트엔드

#백엔드

#취준생

#react

#java

답변 2

댓글 1

Up 1

조회 86

2일 전 · 이승로 님의 새로운 답변

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

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

기술

#react

#java

#prograssbar

#리액트

#자바

답변 1

댓글 0

Up 1

조회 31

3일 전 · 익명 님의 질문

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

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

기술

#react

#root-dom-node

답변 0

댓글 0

조회 22

3일 전 · 커리어리 AI 봇 님의 새로운 답변

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

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

기술

#프론트엔드

#css

#tailwind

#bootstrap

#react

답변 3

댓글 0

조회 231

3일 전 · 유택범 님의 답변 업데이트

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

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

기술

#python

#react

#플라스크

#pyqt5

답변 1

댓글 0

조회 46

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

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

기술

#react

#상태관리

#zustand

#hooks

답변 0

댓글 0

Up 4

조회 47

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

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

기술

#react

#next.js

#webview

#flutter

답변 1

댓글 1

Up 4

조회 105

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

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

기술

#react

#프론트

#공부고민

#공부방법

#프로젝트

답변 5

댓글 2

Up 5

조회 937

웹 배포시 프론트엔드 백엔드 따로 하는게 정석인가요?

안녕하세요 현재 프론트엔드 개발 취준생이고 포폴겸 실제 서비스겸 프로젝트로 MERN 스택으로 CRA + express.js로 해가지고 배포하려는데 여기저기 찾아보니 대부분 서버용 따로 클라이언트용 따로 해서 2개를 배포해서 쓰더라고요. 제 플젝은 하나의 레포로 되어있어 굳이 분리 안해도 되면 한 번에 배포하고 싶은데 이 방식은 잘 안쓰는 방식인가요? 그리고 이용자가 20명 정도는 고정으로 있을 예정이라 무료 플랫폼 써야하는데 Netlify, Vercel등 선택지가 다양해서... 보통 어떤 무료 플랫폼으로 배포하시나요? 감사합니다

기술

#react

#express

#fullstack

#deployment

#mongodb

답변 1

댓글 1

Up 1

조회 169

input form 데이터 땡겨올 때 useRef를 많이 사용하지 않는 이유가 있나요?

회원가입 폼에 input에 useRef로 값 땡겨오면 값이 변할 때 재랜더링이 없어서 좋을 것 같은데 깃헙 다른 분들 코드 보면 거의 Hooks으로 useInput 써서 하는데 무슨 이유로 더 간단한 useRef를 안 쓰고 기존 onChage 형식으로 하는 건가요?

기술

#react

#input-form

#useref

#hooks

답변 1

댓글 0

조회 56

ReactQuery 사용 중에 url이 변경되는 경우, 자동으로 리페칭되나요?

회사에서 react query를 도입하는 중입니다. 기존 코드에서는 서로 다른 페이지에서 같은 api를 지속적으로 요청하여 데이터를 받아오고 있습니다. 받아오는 데이터가 변경이 거의 없는 데이터라서, react-query의 캐싱기능을 사용하여, 불필요한 api 요청을 방지하려고 했습니다. 그런데 개발자 도구 네트워크탭에서 확인해보니, 페이지 url 경로가 변경될 때마다, 데이터가 fresh 상태임에도 불구하고 계속하여 데이터를 요청하는 api를 보내고 있습니다. staleTime도 60분으로 설정했고, 데이터가 fresh 상태임도 확인해보았습니다. 혹시 옵션값과는 상관없이, url이 변경되었을 경우(ex localhost:3000/main -> /setting) 데이터 리페칭이 자동으로 일어나는 건가요? url이 변경되었을 때, 데이터가 fresh 상태라면 리페칭을 하지 않게 하고 싶습니다.

기술

#react

#frontend

#react-query

답변 1

댓글 1

Up 2

조회 103

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

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

기술

#react

#testing

#onsuccess

답변 0

댓글 0

조회 43

react component 나눌때… 어느게 맞을까요?

안녕하세요 리액트랑 nextjs 를 사용해서 코딩중인데 한가지 의문점이 들어서 질문남깁니다 ! 하나의 페이지 templates에서 <Title /> <SearchForm /> <Content /> <ButtonBox /> 이런식으로 세세하게 하나씩 일일이 컴포넌트로 나누는게 좋은것인지... 아니면 적당히 하나의 기준으로 나누는게 좋은것인지 혹시 그렇다면 어떤기준으로 나누어야 하는지... 궁금증이 들어서 이렇게 질문남깁니다 ㅜㅠ 읽어주셔서 감사합니다 !

기술

#react

#next.js

#frontend

답변 1

댓글 0

조회 85

ChatGPT vs Copilot 비교

프론트엔드 개발자 입니다. Copilot 과 ChatGPT 둘 중 한개만 사용가능하다면 무엇을 고르실건가요? 최근 ChatGPT, Copilot 사용해보았는데 생각보다 결과가 만족스럽더라고요. GPT 는 티키타카 할수 있는 매력이 있는데 창을 넘나들면서 쓰고 원하는 코드를 찾기 위해 이것저것 요청해야하는 단계가 추가되는 불편함이 있고, 코파일럿은 작업중인 IDE 에서 실시간으로 결과물을 만들어줘서 좋은데 만들어주는 코드가 항상 만족스럽지는 않더라고요. 다른 개발자 분들은 이 둘을 어떻게 활용하고 있으신가요? 참고로 저는 next.js 를 사용하고 있습니다.

기술

#copilot

#chatgpt

#react

#next.js

답변 4

댓글 0

Up 19

조회 1,742

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

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

기술

#react

#google-oauth

#redirect

답변 0

댓글 0

조회 20

React Query 커스텀훅으로 분리, 어떤 방향으로 하나요?

Q. React Query를 커스텀훅으로 분리할 때, useQuery와 useMutation을 따로 작성하는게 좋을까요? 아니면 하나의 커스텀 훅 내에서 작성하는 것이 좋을까요? React Query를 이제 막 접하게 된 신입 프론트엔드 개발자입니다. 회사 프로젝트에서 React Query를 사용해서 서버 데이터를 받아오고 있는데, 코드 재사용성을 위해서 React Query로 데이터를 받아오는 부분과 수정 및 삭제하는 코드를 커스텀훅으로 분리하려 합니다. 검색해보니, 많은 분들이 useQuery와 useMutation을 따로 분리해서 작성하더라고요. 그런데 제가 작성하려던 방향은 다음과 같이 useQuery와 useMutation을 하나의 커스텀훅 내에서 리턴되는 방향이었습니다. React Query를 처음 써보는데, 코드의 방법 1과 방법2 중에서 어떤 방향이 더 재사용성이 좋은가요? 현업에서는 어떤 방향을 주로 사용하나요? (급하게 긁어와 수정한 코드라 정확하지 않을 수 있습니다)

기술

#react-query

#hooks

#react

답변 2

댓글 1

Up 6

조회 296

리액트 쿼리는 앞으로 어떻게 될까요?

최근 많은 컨퍼런스와 기술블로그에서 redux와 saga를 리액트 쿼리로 전환한 경험을 공유하고 있는데요. redux와 saga의 불편함과 복잡함에 비하면 리액트 쿼리는 훨씬 사용이 간편하고 캐싱과 같은 편리한 기능 때문에 그러한 내용들에 공감이 많이 됩니다. 하지만 리액트와 nextjs의 최신 버전을 보면 서버 사이드에서 데이터를 가져오는 방향으로 컴포넌트가 발전하고 있고 데이터 호출에 대한 캐싱도 제공하고 있습니다. 앞으로 이러한 기능이 점점 안정화가 된다면 유저정보와 같은 사용자만의 데이터 외에는 클라이언트 사이드에서 데이터 호출은 많이 줄어들 것으로 보이고 이 마저도 새롭게 나오는 use() 훅을 사용해볼 수 있을 것 같아서요 분명 서버데이터에 대한 상태관리 도구로 redux와 saga의 대안이 필요한건 맞지만 지금 시점에서 리액트 쿼리를 도입하는게 맞을지 고민이 되기도 합니다. 다른 개발자 분들은 어떻게 생각하시는지 궁금합니다!

기술

#react

#next.js

답변 3

댓글 2

Up 11

조회 2,311

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

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

기술

#react

#typescript

답변 0

댓글 0

조회 97

맥북 m1 Next.JS 프로젝트 생성 중 에러

프론트엔드 공부하면서 next.js 처음사용합니다. 그런데 프로젝트 생성하려고만 하면 계속 에러가 납니다. 이상한건 오류가 나도 옆에 폴더들이 생성이 됩니다. 근데 또 막상 그 폴더들로 그냥 프로젝트하려하면 계속 오류가 납니다. 이건 당연한거죠. 구글링해서 찾아보니 깔린 모듈?들의 버전이 다 달라 엉켜서 그렇다해서 다시 업데이트하고 돌려도 여전히 에러나고, 또 네트워크나 와이파이 문제라해서 와이파이도 바꿔보고 했는데도 해결이 안납니다. 선배님들의 해결 방법이나 조언이 너무 간절합니다..!

기술

#frontend

#react

#node.js

#next.js

#macos

답변 1

댓글 1

조회 65