Sign in

dev

it dev react context

[React.js] Context API를 이용하여 전역 상태 관리하기

Context API를 이용하여 전역 상태 관리하기들어가며리액트(React.js)에서 Context API를 이용하여 전역 상태 관리하는 방법을 정리해본다.Context API를 이용하면 따로 패키지를 설치하지 않고도 전역 상태를 관리할 수 있다. Context API개념컴포넌트 트리에서 전역 상태를 보다 쉽게 공유할 수 있는 기능을 제공하는 API이 방법을 이용하면, 프롭 드릴링(Props Drilling)을 피할 수 있다. 방법① context 파일 생성하기전역으로 사용할 상태를 정의하는 @Context.js@ 파일을 생성한다. ./src/context.jsimport { createContext, useContext, useState } from 'react';// (1) Context 생성하기co..
wono | discuss |
it dev shadcnui

[번역] shadcn/ui 의 해부

올해 자바스크립트 생태계를 돌아다니다 보면 shadcn/ui라는 흥미로운 UI 라이브러리를 접했을 것입니다. 이 라이브러리는 npm 패키지로 배포되지 않고, CLI를 통해 컴포넌트의 소스 코드를 프로젝트에 포함하는 방식으로 제공됩니다. 이 라이브러리의 제작자는 shadcn/ui의 공식 웹 사이트 내에 이러한 결정을 내리게 된 이유에 대해서 작성하였습니다…
wono | discuss |
it dev typescript props

Next.js에서 타입스크립트와 함께하는 함수형 컴포넌트의 모든 것

함수형 컴포넌트는 리액트 개발에서 가독성 높고 간결한 코드 구조를 제공합니다. 이 글에서는 Next.js 환경에서 자바스크립트와 ES6 화살표 함수를 사용한 함수형 컴포넌트의 구조, 타입스크립트를 활용한 속성 정의 방법, 그리고 함수형 컴포넌트의 여러 구성 요소 및 방식에 대해 알아봅니다.
wono | discuss |
it dev tailwindcss

[tailwind CSS] 2. vscode 플러그인 추천

1. Tailwind CSS IntelliSense html 작성 시, 입력한 문자로 시작하는 클래스명들을 보여준다. 2. Tailwind CSS Explorer vscode에서 tailwind 클래스명들을 속성별로 검색 확인할 수 있다. 이와 비슷한 플러그인으로는 Tailwind Docs가 있는데, 이는 vscode에서의 바로 확인은 아니고, 검색한 클래스의 설명이 기입된 공식 사이트 페이지를 오픈한다. 3. Headwind 지정한 클래스를, 속성별로 재배열 시켜준다. 예로 다음과 같은 코드가 있다면 Mint-Coding 아래와 같이 재배열 시켜, 클래스 파악에 도움 준다. 팀워크가 아니어도, 추후 관리를 위해 강력 추천하는 플러그인이다. Mint-Coding
wono | discuss |
it dev springboot tiles

[Spring] Tiles 적용하는 법과 사용하는 방법

안녕하세요 dev-길길IT입니다. 일반적으로 웹 페이지를 구성할 때, 레이아웃을 가장 먼저 고려합니다. 상단과 하단, 좌측 사이드바, 또 메뉴 네비게이션, 본문 컨텐츠 등 다양한 컴포넌트들이 구성되는데요. 이 때 모든 요소들을 페이지 하나하나에 다 적용해주면 개발하기가 너무 어렵기 때문에 별도의 라이브러리를 사용하는데요. 그 중 하나가 Apache Tiles입니다. ※ 공식 사이트 : https://tiles.apache.org/framework/index.html Apache Tiles는 반복적인 레이아웃을 한 곳에서 관리할 수 있도록 해주는 template framework입니다. 2017년 11월 7일을 기점으로 프로젝트가 종료되어 현재는 더 이상 추가적으로 release가 되고 있지는 않습니다. ..
wono | discuss |