리액트

참고사이트• woong님의 velog• Higher의 창작소/#103 🤔 NextJSNextJS는 Vercel이 개발한 풀스택 웹 애플리케이션 구축을 위한 React 프레임워크이다.서버 사이드 렌더링 (SSR)을 사용하여 웹 사이트 구축을 도와준다. Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com 🧐 Server Side Rendering웹페이지를 렌더링하는..

리액트 컴포넌트를 개발하다보면, 컴포넌트를 어떻게 분리해야할 것인가를 많이 고민한다.또, 분리하여 어떠한 패턴을 이용하여 작성할지도 고민한다. 우선 컴포넌트를 분리하는 기준에 대해 알아보자. 🦴 컴포넌트 분리1. ♻️ 재사용성 (Resualbility)👉🏻 동일한 UI나 기능을 여러 곳에서 사용할 가능성이 있는 경우 컴포넌트를 분리한다.👉🏻 ex. Button, Modal, Card, Input 코드 좀 더 이해하기 >> 유틸함수 cn(tailwind-merge) tailwind-mergeMerge Tailwind CSS classes without style conflicts. Latest version: 3.1.0, last published: 3 days ago. Start using ta..

• kyounghwan님의 GitHub.io Guide | 기억보다 기록을Guide 본 카테고리는 vue.js 에 TypeScript(TS)를 적용하자는 생각으로 TS를 공부하고 기록한 내용으로 구성되어 있습니다. 사전 준비 vue create를 통해 프로젝트를 만들었다고 가정하고 vue.js 코드 위에 tskyounghwan01.github.io  ⚠️ any 타입은 어떠한 값들이든 받을 수 있다고 선언되는데, any를 중구난방으로 사용할 경우, VanillaJS와 다른 점이 없으므로 any 타입의 선언은 하지 않는 것을 길들이자. 작성자는 프로젝트를 진행하면서 type을 위주로 쓴다.그 이유는,interface 정의 후 마우스를 호버하여 확인하려고 하면 타입 종류를 바로 확인 할 수 없는 반면,  t..

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 요소를 수정할 때 해당 컴포넌트만 업데이트하면 된다.이는 코드의 가독성을 ..

🎆 useEffectuseEffect()는 페이지의 마운트, 언마운트, 업데이트 시 작업을 설정한다.용어설명Mount컴포넌트가 페이지에 나타남unMount컴포넌트가 페이지에서 사라짐 업데이트는 useEffect() 특정값에 의존하여 해당 값이 변경, 실행되면 해당 useEffect()를 재실행한다. useEffect()의 구조는 다음과 같다.useEffect(()=> { // 마운트 완료 후 실행할 코드 return () => { // 언마운트 완료 후 실행할 코드 }}, [dependencies]) dependencies의 값이 변경되면 언마운트가 일어나면서 return()을 통해 기존 작업은 해제하고 다시 마운트 시킨다.   💻 Code리액트 프로젝트를 생성하고 다음과 같이 작성한다..

🌐 리액트 메타에서 개발한 오픈 소스 자바스크립트 라이브러리이다. 페이지 전환 및 사용자 UI 부분에서 상당히 부드럽게 작동하기 때문에 해당 라이브러리를 사용한다. 또는 html을 함수, array, object에 보관하여 재사용이 가능하여 큰 프로젝트일수록 html 관리가 편해진다. https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org ⬇️ Install 리액트 개발을 하기 위해서 nodejs를 설치해야한다. 설치가 되어있는지 확인하기 위해서 명령 프롬프트(CMD)를 열어서 아래와 같이 작성한다. ..