전체 글

github.com/radix-ui/react-useControllableState 소스코드 primitives/packages/react/use-controllable-state/src/useControllableState.tsx at main · radix-ui/primitivesRadix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos. - radix-ui/primitivesgithub.com 🕹️ useControllableState() 란?Radix 라이브러리에서 제공하는 React 훅으로, 제..

상단 내용 작성 예정  ( 2025-01-31 ~ ) 2025. 02. 02 추가∙ useControllableState() 공부∙ ReactNode, ReactChild, ReactElement 공부 후, 재작성 될 예정 (아마 코드 또한 변경될 예정)   합성 컴포넌트의는 다음과 같다 1. Header, Body, Footer를 모두 호출한 경우2. Body와 Footer만 호출한 경우3. Body만 호출하고 Body에 스타일링을 덮어씌운 경우사용자가 필요한 컴포넌트만을 호출함에 따라 다양한 모양의 컴포넌트를 만들 수 있다.또한 각 컴포넌트에 className(tailwindCSS), style을 props로 넘겨주어 디자인을 수정할 수 있다. 📄 App.tsx (필요한 경우 펼쳐서 보기)더보기im..

참고사이트• 카카오 - FE 기술 블로그 / 컴포넌트 추상화• velog - jinoo.io / 컴포넌트를 레고처럼 쌓아보자! *추상화: 여러 가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용 💀 컴포넌트의 추상화현대 프론트엔드 개발은 컴포넌트 기반의 프레임워크(혹은 라이브러리)를 사용하여 개발하게 된다.컴포넌트 단위의 개발로 장점은 무엇일까? 👍🏻 장점1. 재사용성: 컴포넌트는 독립적이고 재사용 가능한 코드 블록으로, 여러 곳에서 동일한 컴포넌트를 사용할 수 있다.이는 코드의 중복을 줄이고 유지보수를 용이하게 한다.2. 유지보수 용이성: 컴포넌트는 독립적으로 관리되기 때문에 특정 기능이나 UI 요소를 수정할 때 해당 컴포넌트만 업데이트하면 된다.이는 코드의 가독성을 ..

"🍡 보기 좋은 떡이 먹기도 좋다"사람의 오감 중 가장 발달한 감각이 시각이라고한다.외부 자극에 대한 반응이 가장 민감하고 빠른 감각이기도한다고 한다.위 속담이 괜히 있는 말이 아니며, 작자는 요리를 취미로 하면서 플레이팅이 중요하다고 생각한다.기능도 중요하지만, 디자인 또한 무시할 수 없으며, 이 디자인이 사용자에게 얼마나 편리한지 또한 굉장히 중요하다. 전체적인 디자인을 위해 컴포넌트를 하나씩 제작하게 될텐데 이때, 유용한 Headless UI에 대해 알아보자.  🤕 HeadlessHeadless란, 디자인 없이 기능만 제공해주는 라이브러리이다.접근성, 상태관리와 같은 복잡한 동작을 처리하면서 개발자가 스타일을 완전히 제어 할 수 있다. `MUI`, `Bootstrap` 등의 외부 라이브러리는 기..

참고 사이트• Turborepo 공식 문서 TurboTurbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust.turbo.build  작성자의 Next.js 프로젝트에 모노레포를 적용하기 위하여 모노레포를 더욱 효과적으로 관리하기 위하여 Vercel 에서 인수한 Turborepo를 사용하기로 하였다. 왜 Turborepo를 사용해야하는지 공식문서를 통해 알아보자. 해당 게시글은 아직 모노레포 경험이 없는 개발자로, 공식문서를 보면서 터보레포가 어떠한지에 대해 주관적인 생각이 담겨 있습니다.잘못된 부분이 있으면 댓글로 따끔한 피드백을 주신다면 정정하며 배우겠습니다. 🚀 Tur..

참고 사이트• Youtube - INFCON 2023 • FastCampus - 모노레포 프로젝트를 관리하기 위한 깃 레포지토리 관리 방식을 알아보려한다.(이 글은 현재 작성자가 시작하는 동네에서 만드는 프로젝트에서 적용되는 멀티레포에 대해 중점적으로 다뤄볼까한다.) 📚 멀티레포지금까지 작성자는 토이 프로젝트로 간단히 하나하나 만들다보니 자연스럽게 각 프로젝트마다 레포지토리를 생성하였는데 이러한 방식을 '멀티레포 (Multi Repository)'라고 한다고 한다. 📦 모노레포모노레포란, '하나의 저장소'를 의미하는 '모놀리식 (Monolithic Repository)'의 줄임말로 많은 프로젝트를 단일 저장소에 저장하는 방법을 의미한다. ❓ 그럼 이 모노레포는 어떠한 장점 때문에 프론트엔드의 개..

참고사이트* 카카오 FE 기술 블로그 아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그정호일(harry) 카카오페이지에서 웹 프론트엔드를 개발하고 있습니다. 집보다 밖에 돌아다니는 걸 좋아합니다.fe-developers.kakaoent.com해당 페이지의 내용을 담고 있으며, 머릿속에 담기 위해 적어가면서 공부 (끄적.. 끄적..)  🧩 컴포넌트의 파편화비슷한 모양 및 기능을 컴포넌트가 여러 개 있다고 생각해보자.이걸 각기 하나 하나 다 만들어내는 것에 대해서는 구현하면 컴포넌트 파편화라는 제 각각의 컴포넌트가 발생한다.그럼 유지보수 할 때, 각각의 파편화된 컴포넌트를 찾아서 고쳐야하는 문제점이 발생한다. ❓ 왜 쓰는건데?디자인 시스템내에서 수 많은 수정 작업들이 일어난..

사이트https://www.acmicpc.net/problem/1157 단어 공부📄 문제알파벳 대소문자로 된 단어가 주어지면, 이 단어에서 가장 많이 사용된 알파벳이 무엇인지 알아내는 프로그램을 작성하시오. 단, 대문자와 소문자를 구분하지 않는다. ⌨️ 입력첫째 줄에 알파벳 대소문자로 이루어진 단어가 주어진다. 주어지는 단어의 길이는 1,000,000을 넘지 않는다. 🖥️ 출력첫째 줄에 이 단어에서 가장 많이 사용된 알파벳을 대문자로 출력한다. 단, 가장 많이 사용된 알파벳이 여러 개 존재하는 경우에는 ?를 출력한다. 📚 예제 입력1.Mississipi 2.zZa 3.z 📚 예제 출력1.? 2.Z 3.Z  🤔 해결책1. 알파벳은 각각 아스키코드 값을 가진다.2. 알파벳 개수 27개의 배열을 만들..