개발자 Q&A

토픽

인기 태그

#react

빠른 답변⚡서포터즈

BETA

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

기술

폼 유효성 검사 후 제출 하는 방법

폼 내부 인풋 값들의 유효성을 각각 검사한 뒤에 모두 정상이면 제출하려 합니다 인풋의 유효성 검사 결과도 각각 state로 관리하는데 state는 비동기로 바뀌다보니 유효성 검사 후 아직 state가 바뀌기 전에 값을 참조하게 되었고 그러면서 인풋이 정상이 아닌데도 제출되는 상황이 발생했습니다.. 유효성 검사 -> 유효성 검사 결과 state 변경 -> 유효성 검사 결과 state 확인 후 모두 정상일 경우에만 제출 이 흐름의 순서를 보장할 수 있는 방법이 있을까요..? 유효성 검사가 모두 완료되었는지 또 다른 state를 하나 더 추가해야할까요..?

답변 1

13시간 전 • 조회 32

기술

커스텀 훅의 사용법과 관련해 두가지 궁금한 점이 있습니다!

커스텀 훅을 사용해보고 있는데 두가지 궁금한 점이 있습니다 커스텀 훅 내부에서 컴포넌트를 이용하려면 확장자를 ts가 아닌 tsx로 해야하는데 일반적으로 ts로만 작성하는 것 같습니다! tsx를 사용하는 경우는 없을까요? 커스텀 훅을 재사용의 목적보다 단순히 컴포넌트 내 비즈니스 로직을 분리하기 위한 목적 만으로 사용하기도 하나요? 여러 군데 사용되는 것이 아니라 한 컴포넌트의 비즈니스 로직을 분리한 의존성 높은 커스텀 훅도 있는지 궁금합니다!

답변 1 • Up 1

13시간 전 • 조회 29

기술

'꼭 nextjs를 사용할 이유가 없다'가 리액트를 사용해야 할 이유가 될 수 있을까요?

프로젝트를 진행하면서 팀원들과 리액트와 nextjs 중 어떤 기술 스택을 사용할지 논의하게 되었습니다. 그런데 '이정도 기능에 특별히 nextjs를 사용할 이유가 없고 리액트로 별다른 어려움 없이 충분히 가능하다'는 이유로 리액트 사용에 찬성하는 의견을 들었습니다. 언뜻 듣기엔 그게 맞다고 생각했지만 곱씹다보니 nextjs를 사용하면 안되는 이유도, 리액트를 꼭 사용해야 하는 이유도 아닌 nextjs 굳이 사용할 이유가 없다는 것이 리액트를 사용하자는 말의 근거가 될 수 있을지 문득 궁금증이 생겼습니다. 선택지가 리액트와 nextjs 둘 뿐이라면, nextjs가 리액트를 기반으로 여러 기능이 더해진 프레임워크이기 때문에 단순한 기호나 숙련도 등 개인적인 이유를 배제한다면 기본적으로 먼저 리액트를 고려하고 특별한 이유가 있을 때만 nextjs를 사용하자는 것이 정론일까요?

답변 1

13시간 전 • 조회 45

기술

next.js getStaticProps에서 user agent를 확인하는 방법?

안녕하세요 next.js로 웹 사이트를 만들고 있는데 질문이 있습니다. 서버사이드에서 mobile 기기 접속여부를 알아야 하는데 getStaticProps안에서 user agent를 확인하는 방법이 있을까요?

답변 1 • Up 2

18시간 전 • 조회 41

기술

드래그를 시작했을 때 잡고 있는 컴포넌트를 다른 컴포넌트로 바꿔버리고 싶으면 어떻게 해야 할까요?

안녕하세요 이제 막 리액트 기초를 배우고 프로젝트를 시작하는 학생입니다. 제목 그대로 드래그를 시작했을 때 잡고있는 컴포넌트를 다른 컴포넌트로 바꿔버리고 싶은데 어떻게 구현하면 좋을까요..? 좋은 아이디어나 해결해보신분 있으시면 답변 부탁드립니다!

답변 1 • Up 1

하루 전 • 조회 24

기술

props drilling 어떻게 대처하시나요?

변수나 함수를 props로 넘기다 보니 detail 페이지 안에 component들 안으로 넘어가 props.drilling이 생기는데 context api로 하려고 생각중이긴 하지만 이것 또한 불편한점이 조금 있더라구요. 실무에서는 어떻게 하나 궁금합니다

답변 3

하루 전 • 조회 88

기술

useCallback 으로 내부 컴포넌트를 선언하고 사용할 경우 얻는 장점이 무엇인가요?

아래 코드와 같이 내부에서 사용하는 컴포넌트를 useCallback 으로 선언해서 사용하는 코드가 있습니다. 저는 InnerComponent 를 새로운 컴포넌트로 만들고 props 만 넘겨주는게 더 효율적일 것 같아요. 이렇게 useCallback 을 사용해서 컴포넌트를 선언해서 얻는 장점이 있는 걸까요 ?

답변 2 • Up 1

3일 전 • 조회 85

기술

리액트 네이티브 웹 실무 도입

개인적으로 검토해 보았을 때 리액트 네이티브와 합이 좋고 문제가 될만한 부분은 딱히 없었는데, 커뮤니티가 크지 읺다는 점이 조금 걸립니다. 반드시 리액트 네이티브 웹을 사용해야 하는 상황은 아니라서 더 고민이 됩니다. 다만 RN Web 선택 시 개발 편의성이 확실히 좋아지긴 합니다. 개발자 커뮤니티가 크지 않다는 점이 걸림돌이 될까요? 저는 아직 커뮤니티가 미치는 영향이 딱히 와닿지 않은 상태라 그게 기술 스택 결정 시 고려해야 할만한 문제인지도 조금 의문이 듭니다.

답변 1 • Up 1

4일 전 • 조회 51

기술

마크다운 에디터에 클립보드 이미지 붙여넣기 기능을 구현하려면 어떻게 해야 하나요?

제목 그대로 마크다운 에디터에 클립보드 이미지 붙여넣기 기능을 구현해야 하는데요. 어떤 식으로 접근해야 하는지 조언을 구하고자 합니다. clipboard API로 검색하니 관련 정보가 좀 나오긴 하는데요.. 내용을 봐도 어떤 흐름으로 동작시켜야 하는지 감이 잘 안 와서 질문 드립니다ㅠㅠ 리액트를 사용하고 있고, 업로드하는 이미지는 사내 CDN url로 바꾸고 있어요! 추가로 라이브러리를 사용해야 하는 건지 직접 구현해야 하는 건지도 의견 주시면 감사하겠습니다.

답변 1

6일 전 • 조회 63

기술

웹 개발 반응형 테스트할 때 에뮬레이터도 사용해야할까요?

안녕하세요, 리엑트로 웹 개발을하고 있습니다. 1인 개발을 통해서 수익까지 창출하려고 하는데 서비스 특성상 모바일 접속이 많을 것 같아서 반응형에 신경을 많이 쓰려고해요. 현업에서는 웹 반응형 구현할 때 어떤 방법으로 테스트하는지 궁금합니다. 개발자 도구 통해서 responsive 조정해가면서 개발하고 있긴한데, 시뮬이나 에뮬레이터 실제로 켜보고 웹 접속해서 해봐야하는지 궁금하네요. 보통 어떻게 하시나요?

답변 2 • Up 3

8일 전 • 조회 107

기술

이메일을 통한 인증번호 구현

제가 프론트쪽담당인데요 구현해야되는것 중에 1)이메일 입력하고 전송버튼 누른다 2)이메일로 인증번호 받는다 3)인증번호를 입력해서 인증버튼 누른다 이게 있어요 백엔드 개발자랑 얘기하는데 인증번호를 프론트에서 생성해서 html 메일폼을 api post로 넘기라는거에요 자기는 그걸 받아서 인증번호 저장하고 받은 html로 메일보내는 역할만 하겠다고.. 전 당연히 인증부분은 데이터관리하는 백엔드에서 해야된다고 생각해서 전 이메일만 api로 보내고 백엔드에서 인증번호 생성 후 거기서 메일보내야 한다고 생각하는데요 그후 사용자가 입력한 인증번호 맞는지만 체크하고.. 제가 프론트경력이 1년 밖에 안되다보니 이게 어딴게 맞는지 모르겠어서 자문을 구해봅니다 여기회사는 물어볼사람이 없어요

답변 4 • Up 1

8일 전 • 조회 216

커리어

프론트엔드 주니어 이력서 질문입니다!!

안녕하세요 프론트엔드 국비수료후 12월부터 지금까지 이력서 넣고 있는 취준생입니다. 현재 40개이상은 지원한거 같은데 면접을 한곳봤습니다ㅜㅜ 포토폴리오가 부족해서 그런가 싶어서 next.js로 한 개인프로젝트를 구현중입니다. 하지만 혼자하다보니 막히는부분도 많네요ㅜㅜ 포토폴리오를 추가하며 계속이력서를 넣는게 맞는지 궁금해서 질문드려요!! 추가로 퍼블리셔 구인공고에서 우대사항쪽에 react가능한분을 찾고 있는곳이 많던데 퍼블리셔 지원하는건 어떻게 생각하는지 궁금합니다 선배님들!!

답변 2 • Up 2

9일 전 • 조회 239

기술

React 프로젝트 진행할 때

프로젝트를 진행할 때 클래스형 컴포넌트로 하는게 좋을까요 함수형 컴포넌트로 하는게 좋을까요?

답변 4 • Up 3

9일 전 • 조회 155

기술

리엑트 props 전달 뎁스는 어느정도가 적당할까요?

props를 전달하는 뎁스에 대한 가이드라인이나 어느 정도의 뎁스가 성능적으로 좋은지 판단하기가 어렵습니다. 리엑트로 개발하시는 분들은 어떤 기준으로 props 뎁스를 전달하고 계신가요? global state로 전환하는 기준도 궁금합니다. 감사합니다!

답변 2 • Up 2 • Down 1

10일 전 • 조회 183

기술

React-responsive 훅 관련

안녕하세요 리액트를 통해서 미니 프로젝트를 하나 만들고 있습니다! 반응형으로 만들기 위해서 react-responsive 를 설치한 다음 mediaquery 태그로 감싸고 최소 너비를 지정해 주었습니다. 대부분은 반응형으로 작동하지만 일부 요소들은 적용이 되지 않고 독립적으로 작동하는 것 같은데 이런 경우가 있나요..?

답변 1 • Up 1

10일 전 • 조회 128

기술

nextjs 13 getStaticProps 질문

안녕하세요. nextjs 13에서 변경된 app 디렉토리에서는 getStaticProps를 지원하지 않고 fetch의 cache로 getStaticProps 등의 동작을 수행할 수 있게 된 부분에 있어서 의문점이 생겨서 질문 남깁니다. 1. 서버 컴포넌트니까 console등은 서버에서 찍히는 것을 확인하였습니다. 이것은 서버 컴포넌트는 항상 ssr로 동작한다는 의미인것인가요? 2. fetch를 사용하지 않고서는 static, ssr, isr 을 구분시킬 수 없는 건가요? 3. 이전 버전(12)에서는 getStaticProps를 사용해서 fs, gray-matter 같은 static하게 서버에서 생성 해놓기를 원했던 경우에 사용하기도 하였는데 이런 부분은 구현할 수가 없는 건가요? (코드 첨부)

답변 1 • Up 1

11일 전 • 조회 107

기술

lodash 체이닝(_.chain)은 왜 사용하나요?

안녕하세요 로대쉬를 사용하다가 궁금한점이 있어서 질문 남깁니다. sortBy.map.filter 이런식으로 chain메서드 없이도 체이닝을 할 수 있는데 chain 메서드는 왜 사용하는지 어떤 장점이 있는지 문득 궁금해졌습니다. 혹시 이유를 아시는 분 있으시면 답변해주시면 큰 도움이 될 것 같습니다!

답변 2 • Up 15 • Down 1

13일 전 • 조회 520

기술

React 에서 token, refresh-token 을 전역 상태로 관리하려고 하는데 어떻게 구현하는게 좋을까요 ?

안녕하세요!! token, refresh token 에 대한 global 상태관리를 해야 합니다. 이정도 규모의 상태관리는 어떤 기능을 활용하는게 적당할까요 ? - redux (사용해본 경험이 있어서 편하긴 한데.. 고민이 됩니다) - recoil

답변 1

14일 전 • 조회 164

기술

렌더링의 속도차이가 얼마나 나는지 아시는분 계실까요??

안녕하세요. react를 하다가 문득궁금해진게 있어서 질문해봅니다..! 컴포넌트를 제작하던중에 첫번째 const hello = {a: 1, b: 2, c:3} Return( <div>{hello.a}</div> <div>{hello.b}</div> <div>{hello.c}</div> ) 두번째 const hello = {a: 1, b: 2, c:3} const world = [a,b,c] return ( world.map((v) => ( <div>hello[v]</div> )) ) 두번째는 map을 사용하기때문에 O(N)이 걸린다고 생각이 듭니다. 혹시 컴포넌트가 렌더링 되는 속도도 둘이 차이가 있을까요?? 차이가 있다면 첫번째 컴포넌트 같은경우에는 O(1)의 속도를 갖는걸까요?

답변 1

14일 전 • 조회 118

기술

React에서 함수형 컴포넌트를 사용할 때 <Component/> vs Component() 어떤 차이가 있나요?

안녕하세요! React에서 컴포넌트를 사용할 때 <Component />와 같이 사용할 수 있고 호출 하는 방식으로 사용할 수 있는 것 같은데 어떤 차이가 있는지 궁금합니다! 최근에 합류한 사이드 프로젝트에서 두 방식이 혼용되어 사용하고 있는데 문득 궁금해져서 질문 드렸습니다. 감사합니다

답변 2 • Up 3

14일 전 • 조회 109

기술

next js에서 사용자 검증시 화면 안깜빡거림은 ssr만 가능한가요?

안녕하세요, 리액트 넥스트로 앱을 만드는 개발자 입니다. 사용자 검증을 csr(useEffect), ssr(getServerSideProps)둘 다 해보았습니다. 다만 csr의 경우 완전한 렌더링 이후 검증을 하기에 잠시나마 화면 깜빡임이 있습니다. ssr의 경우 서버에서 검증을 하기에 화면 깜빡임은 없지만 모든 화면에 ssr로직을 작성해야 합니다. 만약 화면 깜빡거림 없이 즉시 사용자 정보 UI를 화면에 나타내려면 SSR이나 getinitialProps를 사용하는 방법밖에 없나요?

답변 2

15일 전 • 조회 126

기술

next js getStaticProps rehydration 질문 있습니다.

SSG, ISR, SSR 이론은 다 알고 있습니다. 그런데 개발도중 NEXT.JS 고질병인 client, server 충돌경고를 종종 겪는중 의문이 생겼습니다. 페이지를 미리 그리는데 왜 에러가 나지 하는 생각에 질문 드립니다. 1. 만약 SSG로 만든 페이지가 HTML로 만들어져서 화면에 미리 렌더링이 되는데, 그럼 미리 렌더링된 이후(제어권이 리액트로 넘어감) CSR은 화면을 로드할때 사전에 만든 HTML을 로딩하나요? 아니면 해당 페이지를 새로 그리나요? 2. 만약 새로 페이지를 그린다면 기존 pre render된 html 파일 내용과 csr이 그린 데이터가 다르면 next.js가 match 경고를 출력하나요? 2.1 next js에서 server, client 내용이 다르면 match경고를 발생시키는 이유는 무엇인가요? 3. csr이 미리 만들어진 html을 사용하여 페이지를 그린다면 이유가 뭔가요?

답변 1

15일 전 • 조회 94

커리어

프론트와 백.. 대기업 가려면 얼마나 공부해야될까요??

전공자이며 단순히 프로젝트만 여러개 하면서 포트폴리오만 쌓아나가고 있습니다. 그러나 이런 프로젝트는 다른 사람들도 충분히 할 수 있다고 생각해 어디까지 공부를 해야될지 모르겠습니다.. 리액트와 스프링 공부 중입니다 전공자라 cs랑 코테는 공부를 계속 하고 있는 중입니다.

답변 1 • Up 2

18일 전 • 조회 342

기술

React의 Reconciliation 동작에서 children에 key를 추가했을 때, 트리의 변환 작업이 효율적이게 되는 이유를 모르겠습니다.

안녕하세요. React의 Reconciliation에 대해서 공부중인 FE 개발자입니다. https://ko.reactjs.org/docs/reconciliation.html 위 공식 문서를 보다보면, "자식에 대한 재귀적 처리"에 대한 내용이 나오는데요, 여기서 children에 key를 추가하면 트리의 변환 작업을 효율적으로 할 수 있다고 설명을 하고 있습니다만, 과연 이게 실제로도 효율적으로 처리되는지가 궁금합니다. (key가 없을 때 새 항목이 상단부터 추가되는 경우 의도한대로 동작하지 않는다는 것은 이미 알고 있습니다.) 아래는 제가 테스트한 코드인데요, 제가 생각했을 때, key가 없을 때는 counts 배열에 요소를 추가할 때마다 기존 ChildComponent 컴포넌트들이 모두 언마운트되고 다시 생성되는 등의 비효율적인 작업이 있거나, 그게 아니더라도 뭔가 key가 있을 때보다 매 클릭 시 렌더링이 느려야할 것으로 생각을 했었는데, key가 있든 없든 상관없이 기존 ChildComponent는 재생성되지 않고 그대로 사용되고(useEffect 훅이 최초 렌더링 이후에는 전혀 실행되지 않음), 렌더링 속도도 별 차이가 없는 것 같습니다. 혹시 제가 놓치고 있는 부분이 있을까요? key의 존재 유무에 따른 트리 변환 작업 효율성 테스트를 어떻게 해보아야 제대로 이해할 수 있을까요?

답변 1 • Up 2

18일 전 • 조회 197

기술

type alias vs utility type

큰 프로젝트에서 type alias와 utilty type 이 두개 중에 성능이나 가독성면에서 차이가 있나요? 아직 타입스크립트에 익숙하진 않아서 제 생각에는 취향 차이인 것 같은데 다른 분들 의견은 어떠신지 궁금합니다

답변 1

18일 전 • 조회 80

커리어

주니어 프런트엔드 개발자에게 CS 지식은 별로 중요하지 않나요?

안녕하세요, 중소기업 다니는 React 개발 경력 6개월된 주니어 프런트엔드 개발자입니다. 질문부터 먼저 드리면, 프런트엔드 개발자가 CS 지식(자료구조, 알고리즘, 네트워크 정도) 습득을 위해 퇴근 후 3~6개월정도 따로 공부하는 것은 시간 낭비일까요? (물론 무엇이든 아무것도 하지 않는 것보다 하는 것이 좋겠지만, 우선순위측면에서도 CS 지식이 과연 현재 제 상황에서 높은 순위를 차지하는지도 궁금합니다.) 제가 프런트엔드 개발자임에도 불구하고 CS 지식을 공부하려고 하는 이유는 크게 2가지입니다. 1. 대기업 코딩테스트를 통과하고, 기술 면접에서 CS 지식에 대한 대답을 잘하기 위해서 2. 네트워크의 경우 실무에서도 문제 해결을 위해 직결되는 지식이라고 생각하고, 자료구조, 알고리즘의 경우 실무에서 직접 쓰일 일은 많이 없겠지만, 개발자로서 문제를 정의하고 해결해나가는 역량을 키울 수 있을 것 같아서 또한, 근래에 시리즈 C~D 정도되는 스타트업 기술 면접을 본 적이 있는데요, 질문들중, 약 1/2은 React, 1/4는 CS, 1/4는 JavaScript 질문이었고, 제 스스로 느끼기에 React 질문은 80%이상 잘 대답했으나, 나머지 CS와 JavaScript쪽에서는 조금 대답이 약했다고 생각했기 때문에 CS와 JavaScript 기본기에 좀 더 집중해야겠다는 생각을 했습니다. 아무쪼록 현재 CS와 JavaScript쪽에 최소 몇개월을 집중해서 기반을 더 잘 닦아야겠다는 생각과 실천을 하고 있던 중, 근래에 운좋게 누구나 알만한 IT 대기업의 프런트엔드 개발 리드분을 만나서 이와 관련된 질문은 했었는데요, 그 분께서는 "CS 지식은 프런트엔드 개발에서 솔직히 많이 쓰이지 않으니, 차라리 React관련된 것들을 더 깊게 파는 것이 좋겠다.(이직을 위해서든 개발을 위해서든)"라고 말씀하셨습니다. 거기서 제가 들었던 생각은 IT 대기업들 중에서도 면접 전에 코딩테스트를 보는 기업도 있고 사전과제를 보는 기업도 있는걸 보면, 사전과제를 보는 기업(위에서 만났던 개발 리드분 기업이 그렇습니다.)들은 프런트엔드 개발자에게 CS 지식은 크게 중요하지 않으니 과제로 내주는 것 같다는 생각이 들고, 코딩테스트를 보는 기업들은 그래도 능력있는 개발자를 뽑으려면 프런트엔드 직무 또한 기초적인 CS 지식이 있어야 한다고 생각하는 것 같습니다. 정리하자면, 저는 이직을 위해서도 그렇지만, 개발자로 일하는 그날까지 프런트엔드 개발자도 CS 지식을 어느 정도 알고 일하는 것이 좋을거란 생각이 드는데요(지금이 그걸 공부해야 하는 적기라고 생각합니다.), 과연 제가 3~6개월정도 CS 지식을 공부하는 것은 React를 좀 더 깊게 파는 등의 다른 것들과의 우선순위까지 따져보았을 때 시간 낭비일까요? 현업에서 최소 2년이상은 프런트엔드 개발만 하신 분들의 의견을 듣고싶습니다. 긴 글 읽어주셔서 감사합니다.

답변 1 • Up 16 • Down 1

19일 전 • 조회 906

기술

내부 CMS 개발 시 기술 설계를 어떻게 하나요?

안녕하세요. 회사에서 컨텐츠 생산/관리를 위해 여러 유료/무료 headless CMS를 검토했는데 결국 요구사항에 맞는 정도로 customization이 안 되어서 자체적으로 구현을 해야하는 상황입니다. 저희 팀에서는 프론트엔드를 React로 작성하고 있어서 Draft.js, ProseMirror 등 여러 rich content editor를 검토하고 있는데 내부 CMS를 구현해본 경험이 있는 선배님들께 기술 자문을 구하고 싶습니다. 기획에서 원하는 것은 퍼블리처럼 여러 형태의 rich text를 지원하면서 고객들이 컨텐츠 원하는 부분에 하이라이트, 메모를 기록/저장할 수 있고, 추후에 custom link 같은 자체 기능을 추가할 수 있는 확장에도 열려있는 것입니다. 스펙이 엄청 큰 것 같아 어디에서부터 시작해야할지 조금 막막한데 기술 설계에 대한 어떠한 조언이라도 주시면 정말 감사드리겠습니다. 컨설팅 비용을 받고 커피챗/화상미팅 참여해주실 수 있는 분도 적극 환영입니다!!

답변 1

19일 전 • 조회 56

커리어

신입 서류통과의 비법이 있을까요?

안녕하세요, 프론트 엔드 취업 준비생입니다. 최근 배포를 마치고 이력서를 여러군대 넣지만 서류통과가 전혀 되질않아 노하우나 부족한 점을 지적 받고자 질문드려봅니다. 미비된 점에대해 지적이나, 욕도 좋습니다. 누군가의 관심은 고마운것 이라 생각합니다. 부족한점을 매꾸고 싶습니다. 구글링, 공식문서 유튜브 만으로 배운것들뿐이라 부족한게 많은게 같다고 느껴 질문드려봅니다. 포트폴리오 노션: 삭제된 링크 먼저 제가 서류탈락 하고 다시금 되돌아보면서 느낀점은 아래와 같습니다. 다른분들의 개인 포폴웹을 보면 아름답게 장식된걸 보고 포트폴리오 웹이 반응형 미지원에 css가 부족함을 느끼고 변경중입니다. 다양한 기능이 부족한것을 느낍니다. 코드의 재사용성을 고려한다고 했지만 부족한거같습니다. spa 환경을 쓰면서 웹페이지는 정적웹과의 차이가 없다 생각합니다. 에러 핸들링에 관한 글이 부족한거같아 코드를 짜면서 힘들게 해결한 부분을 깃 허브의 이전에 커밋된 내용을 보고 적으려합니다. 관심이라도 주시면 감사히 받겠습니다.

답변 1

19일 전 • 조회 289