크루루 서비스의 PopOverMenu 컴포넌트 개선기(2), 자식 요소 컴포넌트 렌더러 만들기

크루루 | 쉽고 간편한 리크루팅 솔루션크루루는 대학 연합동아리 및 스타트업 리크루팅에 최적화된 지원자 관리 솔루션입니다. 공고 제작, 지원자 관리, 평가 등 리크루팅의 모든 단계를 크루루와 함께 해결하세요.www.cruru.kr우리 서비스 크루루에서 PopOverMenu는 다양한 자식 요소를 지원해야 했습니다. 특히, 메뉴 항목 내부에서 하위 메뉴를 트리거하는 SubTrigger 요소가 필요하다는 점을 인지하게 되었고, 이를 구성하기 위해 고민한 내용을 공유합니다.기존 PopOverMenu는 단일 레벨의 메뉴를 지원했으나, 단계적으로 이동하는 메뉴를 복합적으로 구성할 필요성이 제기되었습니다. 특히 사용자가 메뉴를 통해 여러 옵션을 계층적으로 탐색하는 상황에서, 하위 트리거(SubTrigger)를 제공하여..

• format_list_bulleted 개발관련/React
• · 2024. 11. 16.
• textsms

스토리북 조금 더 잘 사용하기. Auto Docs, decorators, play function. feat Storybook 8.2

글쓰고 있는 현재 스토리북은 8.2버전까지 출시되었습니다. 이번 업데이트를 통해서 다양한 테스트 툴에서 사용되고 있는 jasmine 스타일의 테스트 코드로써 스토리를 작성할 수 있게끔, 러닝 커브를 줄이려는 모습을 보여주고 있다는 생각도 들고, 다른 테스트툴과의 연결성을 신경쓰는 듯한 모습을 보여주고 있어서 추후 더 기대되는 툴이라고 생각되어 글을 작성하게 되었습니다!스토리북을 처음 사용하시는 분들을 위한 글로 처음부터 차근차근 정리하는 식으로 글을 구성하였습니다.이 글은 스토리북을 사용하여 리액트 컴포넌트를 테스트하는 방법을 다룹니다. 우선 스토리북이 무엇인지 부터 알아가보도록 하죠!1️⃣ 스토리북(Storybook)이란 무엇인가?스토리북은 UI 컴포넌트 개발을 위한 오픈소스 도구입니다. 이를 사용하면..

• format_list_bulleted 카테고리 없음
• · 2024. 8. 19.
• textsms

[React] Context를 알아보자.

이전에 간단하게 Context를 사용한 예시에 대해서 글을 적었는데, 또 많은 부분을 공부하게 되어서 추가적으로 적어보는 시간을 가지려고 합니다.❓ Context란?컨텍스트 개념을 리액트에선 이렇게 설명합니다.보통의 경우 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달합니다. 그러나 중간에 많은 컴포넌트를 거쳐야 하거나, 애플리케이션의 많은 컴포넌트에서 동일한 정보가 필요한 경우에는 props를 전달하는 것이 번거롭고 불편할 수 있습니다. Context를 사용하면 명시적으로 props를 전달해주지 않아도 부모 컴포넌트가 트리에 있는 어떤 자식 컴포넌트에서나 (얼마나 깊게 있든지 간에) 정보를 사용할 수 있습니다.즉 drilling의 문제를 해결하기 위한 개념이라고 생각됩니다.❗️ 사용법C..

• format_list_bulleted 개발관련/React
• · 2024. 4. 30.
• textsms

[리액트 딥 다이브]02-2 가상 DOM과 리액트 파이버

🚀 가상 DOM과 리액트 파이버 리액트의 특징은 바로 가상DOM이다. 이 가상DOM이 왜 만들어졌는지, 실제 DOM과 어떤 차이가 있는지 알아보도록 하자. 1️⃣ DOM과 브라우저 렌더링 과정 브라우저는 Navigation과정을 통해 주소에 해당하는 서버에 HTML파일을 요청하고 다운로드 한다. 브라우저의 렌더링 엔진에 의해 DOM과 CSSOM이 만들어지고, 자바스크립트 엔진을 통해 AST가 만들어진다. AST는 DOM과 CSSOM에 적용되고, 이 DOM과 CSSOM은 결합하여 RenderTree가 만들어진다. 브라우저의 렌더링 엔진에 의해 레이아웃과 페인트 과정을 통해서 픽셀 단위로 화면에 뿌려지게 된다. 2️⃣ 가상 DOM의 탄생 배경 브라우저가 웹페이지를 렌더링하는 과정은 매우 복잡하고 많은 비용이..

• format_list_bulleted 개발관련/리액트 딥 다이브
• · 2024. 4. 20.
• textsms

React-query, SWR을 사용해야하는 이유. 엄격 모드

카카오 로그인을 구현하기 위해서 코드를 작성하고 있는데, 예상치 못한 부분에서 오류가 났습니다. 카카오톡 로그인은 위와 같은 과정으로 구현할 수 있습니다. 카카오 로그인에 대한 자세한 내용은 아래 공식문서를 참조하세요! Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 오류가 왜 났는지 결론부터 말씀드리자면, 인가코드로 토큰을 요청하는데 Strict-Mode 때문에, fetch 요청이 두 번 이루어 지게 되면서 오류가 난 것이었습니다. const Auth = () => { const params = useSearchParams(); const co..

• format_list_bulleted 개발관련/React
• · 2024. 1. 15.
• textsms

[React] Context를 이용하여 전역에서 사용하는 상태 만들기

이번 시간에는 React의 Context를 익히는 시간을 가지려고 합니다. ❓언제 Context를 사용할 수 있을까요? Context는 전역에 상태를 저장할 수 있습니다. 이는 일일이 컴포넌트에 props를 넘겨주지 않게 해줍니다. export default function App() { const [prop, setProp] = useState() return ( ); } export default function Box({prop}) { console.log(prop) // App 부모 요소에서 전달받은 prop 값 return ... props을 넘겨주는 예시입니다. Constext를 사용함으로써 props를 넘겨주지 않아도 됨으로써, 의존성을 없앨 수 있고, drilling을 없애 가독성을 향상시..

• format_list_bulleted 카테고리 없음
• · 2023. 12. 3.
• textsms