개발자 Q&A

토픽

인기 태그

#react

빠른 답변⚡서포터즈

BETA

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

기술

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하게 서버에서 생성 해놓기를 원했던 경우에 사용하기도 하였는데 이런 부분은 구현할 수가 없는 건가요? (코드 첨부)

답변 0

13시간 전 • 조회 18

기술

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

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

답변 1 • Up 5

2일 전 • 조회 71

기술

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

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

답변 1

3일 전 • 조회 88

기술

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

안녕하세요. 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

3일 전 • 조회 79

기술

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

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

답변 2 • Up 1

3일 전 • 조회 78

기술

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

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

답변 2

4일 전 • 조회 96

기술

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

4일 전 • 조회 76

커리어

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

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

답변 1 • Up 2

7일 전 • 조회 314

기술

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

7일 전 • 조회 181

기술

type alias vs utility type

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

답변 1

7일 전 • 조회 75

커리어

주니어 프런트엔드 개발자에게 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 1

8일 전 • 조회 271

기술

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

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

답변 1

8일 전 • 조회 49

커리어

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

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

답변 1

8일 전 • 조회 256

기술

리액트 패턴/구조를 구성할 때 고려해야 하는 부분은 어떤 게 있나요?

요즘 React 패턴/구조에 관심이 많아졌는데요. 어떤 방법으로 컴포넌트를 구성하고, 폴더 구조는 어떻게 짤 지 고민이 많습니다. 다른 분들은 어떻게 하시는지 궁금한데 조언 부탁드립니다. (혹은 참고할 만한 글이 있다면 공유 부탁드려요~~ 꾸벅)

답변 2 • Up 2

9일 전 • 조회 113

커리어

신입 풀스택 개발자 다음 이직은?

현재 비전공자로 국비지원 후 부트캠프 나와서 풀스택으로 한지 1년차 입니다 연봉이 너무 작아서 이직을 하려니 고민 1. 다시 프론트로 지원을 할 지 아니면 이대로 풀스택 구하는곳으로 쭉 갈지 고민이 됩니다 (프론트와 백엔드 너무 재미있지만 둘다 깊이있게 아는게 아닌상태라서) 고민 2. 프론트로 지원을 해보긴 했는데 연락와서 아직 1년이 안된 스타트업이고 프론트는 저 혼자지만 연봉이 현재보다 600 높습니다 (현재 프론트 대신 제가 들어가는거라고 합니다) 선배님들 조언 부탁드립니다

답변 1 • Up 2

9일 전 • 조회 332

기술

객체 배열에 대해서 컴포넌트를 어떻게 설계하시나요??

안녕하세요. 객체배열에 대해서 컴포넌트를 여러분은 어떻게 제작하고 계실까요?? 처음에는 첫번째 처럼 컴포넌트를 제작하다가 다른 곳에서도 재활용 할수있는 컴포넌트가 좋을것같아서 두번째 코드처럼 설계를 했는데 단점이 이중 for문을 쓰게 되는것 입니다… 제머리로는 더 깊게는 생각이 안나서 혹시 다른방법을 사용하고 계신분이 계실까요?? 첫번째(정적인 설계) function example() { const object = [ { id: 1, age: 17, name: 'strict' }, { id: 2, age: 16, name: '"love"' } ] return ( <> {object.map((item, index) => ( <div key={item.id}> {item.age} {item.name} </div> ))} </> ) } 두번째(동적인 설계) function example() { const object = [ { id: 1, number: 17, title: 'strict' }, { id: 2, number: 16, title: 'love' } ] const object2 = [ { id: 1, age: 17, name: 'strict' }, { id: 2, age: 16, name: 'love' } ] const value1 = ['number', 'title'] const value2 = ['age', 'name'] const TwoFor = ({obj, value}) => obj.map((item) => value.map((v) => { return <div>{item[v]}</div> }) ) return ( <> <TwoFor obj={object} value={value1} /> <TwoFor obj={object2} value={value2} /> </> ) }

답변 1

9일 전 • 조회 85

기술

Next.js router에서 쿼리 값만 변경하는 방법

안녕하세요. 리스트에서 sort기능을 구현하려고 합니다. 새로고침 하거나 리스트 상세페이지로 접근 한 뒤 뒤로 갔을 때 소팅을 유지하고 싶습니다. url query값에 ?filter="베스트순" 이런식으로 추가하고 싶은데 next.js에서 url의 쿼리 값만 변경할 수 있는 방법이 있을까요?

답변 1 • Up 1

10일 전 • 조회 84

기술

(리액트)탭 메뉴 안에 탭 메뉴 어떻게 해여하죠?

리액트 사용하고 있고, 탭 메뉴 안에 탭 메뉴가 들어가야 하는데 어떻게 해야할지 모르겠어요..

답변 1

10일 전 • 조회 66

기술

쿠키&세션, jwt 중 로그인 구현에 더 잘 쓰이는 것은 무엇인가요?

안녕하세요. 저는 리액트 공부를 하고 있는 취준생입니다. 프로젝트 진행 중에 로그인 구현에 앞서서 쿠키와 세션, jwt를 알아보고, 쿠키와 웹 스토리지를 알아보았습니다. 제가 알아본 바로는 로그인 구현의 방법이 1. 쿠키와 세션 이용 2. 쿠키와 jwt 이용 이 둘로 나뉘는 것 같습니다. 찾아보면서 1번 방법은 세션 id가 쿠키에 저장되어 보안에 취약하고, 2번 방법은 1번 방법보다 보안에 더 좋다고 이해하였습니다. 제가 궁금한 것은 1. 위의 두 방법(쿠키와 세션, 쿠키와 jwt) 중 어떤 것이 보안에 더 좋은가요? 2. 두 방법(쿠키와 세션, 쿠키와 jwt) 중 실무에서 더 많이 쓰이는 것은 무엇인가요? 다른 방법이 존재하다면 무엇인가요? 3. 쿠키와 웹 스토리지를 비교하는 이유를 잘 모르겠어요. - 쿠키가 웹 스토리지에 저장되는 것이 아닌가요? 쿠키는 저장되는 것이고 웹 스토리지는 저장되는 위치라고 생각이 되어서 왜 둘을 비교하는 건지 잘 모르겠어요. 아주 짧게 답해주셔도 괜찮습니다! 읽어주셔서 감사합니다:)

답변 1

11일 전 • 조회 215

기술

React로 프로젝트할 때 반드시 필요한 라이브러리 추천해주실 수 있나요?

안녕하세요! 노마드코더 리액트 강의를 막 끝나고 이제 프로젝트를 해보려고합니다. 리액트로 프로젝트할 때 써보면 좋을 또는 여러분들이 반드시 사용하는 라이브러리가 있는지 궁금합니다. 아무래도 라이브러리가 너무 많아서 많은분들이 현업이나 프로젝트에서 사용하시는걸 공부하고싶네요. 의견 부탁드립니다:)

답변 2 • Up 1

11일 전 • 조회 145

기술

리액트에서 컴포넌트 직접 접근 후 값 수정하기

안녕하세요! 최근에 리액트를 접해서 연습삼아 리액트로 미니 게임을 만들고 있습니다. 컴포넌트를 클릭하면 해당 컴포넌트의 위치가 랜덤하게 바뀌는 걸 구현 하고 싶은데 방법을 모르겠습니다.(하늘에서 별이 랜덤으로 반짝 반짝 하듯이) useRef를 통해 DOM에 직접 접근 하는 것 까지는 알았는데 값 수정을 못해서요 ㅠㅠ 예를들어 ,바닐라 js에서는 const random = () => Math.floor(Math.random()*99+1) let x =random() let y = random() document.Queryselector().style = “position : absolute; top: “ + x.toString()+”%, left :”+ y.toString()+”%”; 이런 식으로 생각했는데 리액트에서는 어떻게 하면 좋을까요..? 구글링만 하루종일 했는데 해결법을 못 찾아 질문 남깁니다 ..!

답변 1 • Up 1

12일 전 • 조회 184

기술

React-Router-Dom 경로 관련 질문 있습니다.

현재 제 App.jsx 파일은 아래 사진과 같습니다. 기능별로 url을 구분했는데, 사용되는 페이지가 매우 많고 보여지는 것도 달라 개별 페이지들이 모두 필요합니다. 그러다보니 App.jsx에서 너무 많은 모듈(페이지 컴포넌트)들을 다 가져와서 파일의 import 부분이 너무 길고 지저분해 보입니다..ㅠㅠ 혹시 이를 개선할 방법이 있을지 궁금합니다.

답변 1 • Up 1

12일 전 • 조회 103

기술

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

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

답변 0 • Up 1

13일 전 • 조회 64

기술

seo가 중요하지 않은 웹서비스 만들 때 react랑 nextjs 중에 뭘 더 추천하시나요?

신입이지만 스타트업이라서, 어쩌다보니 제가 프론트를 리드하게 됐습니다. 웹을 만들어야 하는데 react와 nextjs 중에 고민이 됩니다. react 개발 경험은 있는데, nextjs는 처음이라서요. 어떤 걸 추천하시나요?

답변 3 • Up 2

13일 전 • 조회 365

기술

react Custom Hook을 만들려고 하는데 도움이 필요합니다ㅠㅠ

안녕하세요, react, typescript로 개발중인 주니어 취준생입니다 커스텀 훅을 처음으로 작성해보려고하는데... 제가 커스텀 훅에 대한 이해가 부족한 건지 이런 저런 방법을 사용해봐도 같은 에러가 계속 나네요ㅠㅠ vscode상에서 나타나는 에러는 없는데 로그아웃 버튼을 누르면 콘솔에 계속 같은 에러가 생깁니다...! 상황) 로그아웃 로직을 재사용할 수 있게 커스텀 훅으로 관리하려고 함 [로그아웃 로직] - 로그아웃 하면 localStorage의 access_token과 refresh_token을 삭제하고, - alert창을 띄우고, 메인화면으로 이동하게 함. 에러메세지에 있는 링크 https://reactjs.org/warnings/invalid-hook-call-warning.html 에 있는 세가지 일반적인 이유는 아래와 같습니다. 1. React와 React DOM의 버전이 일치하지 않을 수 있습니다 . -> 확인해보니 Hooks를 지원하는 버전 맞습니다. 2. Hooks 규칙을 위반하고 있을 수 있습니다 . -> Hooks규칙을 맞춰서 작성했다고 생각했는데 이부분은 정확하게 모르겠습니다. 3. 동일한 앱에 둘 이상의 React 사본이 있을 수 있습니다 . -> 링크에 나온대로 'npm ls react'를 해보면 사진과 같은 결과가 나옵니다. 혹시 3번이 문제가 있는건가요? 봐도 잘 모르겠습니다...흐ㅠㅠ 커스텀 훅이 아니라 그냥 함수로 만든 후에 재사용해야하나? 싶은데 그 함수는 컴포넌트도 아니고 커스텀훅도 아니라서 useNavigate를 사용할 수 없다는 에러가 떠서 그럼 로그아웃 로직을 사용할 때마다 컴포넌트에서 별도로 navigate처리를 해줘야 할 것 같아서 로그아웃 로직 안에서 useNavigate를 사용해서 커스텀훅으로 만들고 싶습니다...! 이런 형태의 로직은 커스텀훅으로 만들 수 없는건가요? 아니면 제가 뭔가 잘못하고있는게 있을까요ㅜㅠㅠ

답변 1

14일 전 • 조회 132

기술

react-hook-form 정규표현식 관리 방법

안녕하세요, react-hook-form을 사용해서 프로젝트를 하고있습니다. 정규표현식을 react-hook-form에서 사용할 때 다양한 방법이 있는 것으로 아는데 보통 어떻게 구현하시나요? register함수에 pattern props를 사용하거나 ex) input 태그에 ...register({pattern:~}) yup라이브러리를 사용해서 match 함수를 쓰는 방법정도 찾아본 것 같습니다!

답변 1

14일 전 • 조회 84

기술

리액트 함수 분리?

안녕하세요 현재 리액트와 파이어베이스를 사용하여 포폴작업중에있는데 중복적으로 사용되는 코드가있어서 따로 js파일을 만들어 함수로만들어 사용하려는데 쉽게 작동이되질않아서 질문올립니다..ㅠㅠ 첫번째 사진에서 reader.onloadend = ()=>{ reader.result } 저 result값이 필요한데 return이로 빼내올 방법이 무엇일까요.. 현재는 reader를 리턴으로 빼내어 사용을하니 밖에서 result를 한번 더 해줘야해서 화면에 바로 나타나질않고 input에 무언가 입력했을 때 화면이 렌더되면 그때 이미지가 나타납니다.. 그리고 두번째 코드는 파이어베이스의 이미지를 스토리지에 올리는 작업을 함수로 분리하려는중인데 이 또한 매끄럽게 완성이안되네요.. 코드는 이미지업로드가 성공적으로 완료했으면 url을 받아오는건데 이제 url은 잘 나타나는데 그 url을 여러곳에 사용을해야해서 저 url을 빼내 올 방법이나 또는 그 안에 다른 데이터베이스에 추가하는 문법을 넣어줘야하는데 그 문법을 인자로 받아올 수 있을까요? 1. 첫번째 사진은 result값을 빼오고싶습니다. onloadend 된 상태의 2. 두번째 사진은 url을 빼오거나 다른 데이터베이스 또는 auth의 유저정보에 업데이트하는 문법을 인자로 보낼 수 있을까요? 1번과2번 두 사진 모두 인자로는 이미지파일을 받고있습니다. 2번사진은 경로와 파일명도 받고있습니다. 제가 제대로 설명한게 맞는지 모르겠네요 ㅠㅠ 혹은 이러한 정보를 검색해볼만한 키워드가 있을까요?

답변 1

15일 전 • 조회 115

기술

왜 React에서 페이지를 열면 렌더링이 여러번 발생하나요??

최근 리액트 프로젝트를 리팩토링 하면서 궁금한 점이 생겼습니다. 첫 번째 사진은 가게 목록을 보여주는 페이지에 대한 컴포넌트이고 두 번째 사진은 앞서 소개한 페이지에서 호출하는 커스텀 훅에 대한 코드입니다. 해당 페이지를 새로고침하거나 이동했을 때, 세 번째 사진처럼 "test" 콘솔이 4번 이상 찍히는 것을 확인했습니다. Reat의 strictMode 때문에 2번만 찍혀야 한다고 생각했는데 왜 화면을 렌더링 할 때, "useMove(콘솔이 찍히는 함수)"를 여러번 찍히는지 궁금합니다... 다른 페이지에서는 6번 이상도 찍히는 것을 확인했는데 useEffect 때문에 초기 화면 렌더링 이후, redux의 useSelector를 사용해서 렌더링이 여러번 더 발생하는 것인지 궁금합니다.

답변 2 • Up 1

15일 전 • 조회 146

기술

next.js 폴더나 컴포넌트 구조를 어떻게 짜시나요?

회사에서 next.js 폴더 구조랑 컴포넌트를 한 번 리팩토링하려고 하는데, 어떤 구조로 접근하는게 좋은지 의견을 좀 구하려고합니다 ㅎㅎ 현재는: pages, templates, components, elements 형태로 폴더가 나뉘어져있고, pages → templates → components → elements 형태로 의존하도록 설계가 되었다고 하더라구요. 그치만 설계와는 달리 여러 훅 (비즈니스, UI 모두)들이 혼용되어서 pages, templates, components에 범벅이 되어 있는 상태입니다. 제가 생각한건: pages → templates → components → elements 형태는 유지하고, pages는 최소한의 로직만 있고 templates 에서 비즈니스 로직을 아래로 넘겨주는 형태를 생각하고 있어요. 어떤 방식일지는 케바케일 것 같은데, 가장 단순한 방법은 prop으로 넘겨주는 형태를 생각하고 있습니다. 컴포넌트 간 상태가 공유되어야한다면 카카오 형님들 블로그 (https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/) 를 좀 참고해서 compound pattern으로 만들어볼까 생각중이구요. 막상 고민하다보니 다른 분들은 어떻게 작업하시는지 궁금해서요. 혹시 여러분들은 next.js 쓰시면서 구조 같은거는 어떻게 잡으셨나요?

답변 1 • Up 7

4달 전 • 조회 409