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 |
it dev java springboot actuator

(Spring Boot)Spring Boot Actuator 소개

서론웹 개발자로서 웹 애플리케이션을 만들 때 신경써야할 것은 서비스 로직 뿐만이 아니다. 웹 애플리케이션의 사용자는 누구인지(일반인? 외부시스템?), 어떤 경로로 애플리케이션에 요청을 할 지(Load Balancing, Fire Wall), 요청 수나 TPS 등 많은 것들을 고려해야한다. 이번에 소개할 spring-boot-actuator라는 모듈은 애플리
wono | discuss |
it dev jdk classpath

Java 설치 및 환경 변수 설정 가이드

안녕하세요! 오늘은 Java 개발 환경 구축을 위한 JDK 설치 및 환경변수 설정 방법을 소개하고자 합니다. JDK(Java Development Kit)는 Java 언어로 개발한 프로그램을 실행하기 위해 필요한 도구 모음으로, 개발자들은 이를 설치하고 환경변수 설정을 통해 쉽게 Java 프로그램을 개발할 수 있습니다. 이번 글에서는 JDK 다운로드 및 설치 방법, 환경변수 설정 방법, 설치된 JDK 버전 확인 방법 등을 자세히 설명합니다. JDK 설치 및 환경변수 설정으로 개발 환경을 더욱 편리하게 구축해 보세요. 1. JDK 다운로드 및 설치 ○ Oracle의 공식 웹사이트에서 JDK를 다운로드합니다. Oracle 공식 웹사이트에서 Linux, maxOS, Windows 사용 중인 운영 체제(OS)를..
wono | discuss |