Per ardua ad astra.

- [Next.js] 테마 토글 기능 설정하기 (with shadcn/ui)

테마 토글 기능 설정하기 (with shadcn/ui)들어가며Next.js를 이용하여 테마 토글 기능을 설정하는 방법을 정리해본다.이 게시글의 내용은 타입스크립트(TypeScript)와 shadcn UI 컴포넌트 라이브러리를 바탕으로 작성되었다. 방법① 색상 템플릿 코드를 전역 스타일시트 파일(@globals.css@)에 넣기아래의 사이트에서 자신에게 맞는 라이트/다크 모드 색상 템플릿을 선택한 후, 색상 코드를 복사한다. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com 그리고 전역 스타일시트 파일(@/app/..

- [Tailwind CSS] sr-only 클래스

sr-only 클래스들어가며테일윈드(Tailwind) CSS에서 사용할 수 있는 @sr-only@ 클래스에 대해 정리해본다. sr-only 클래스개념시각장애인을 위한 스크린 리더(Screen Reader) 전용 클래스이 클래스를 사용하면 해당 요소가 화면에는 보이지 않지만, 스크린 리더를 사용하는 사용자에게는 읽힐 수 있도록 설정된다.시각장애인이 페이지를 탐색할 때 추가적인 정보를 제공할 수 있다. 사용하는 경우의미를 명확히 하기 위해 보조 텍스트를 추가할 때예를 들어, 아이콘 버튼에 추가 설명을 덧붙일 때접근성을 개선하기 위해 추가적인 텍스트가 필요하지만, 일반 사용자에게는 불필요한 정보를 숨기고 싶을 때 사용 예제 Settings CSS 스타일.sr-only { position: absolut..

- [CSS] 미디어 쿼리(Media Query) 장치 화면 너비 브레이크포인트

미디어 쿼리(Media Query) 장치 화면 너비 브레이크포인트들어가며CSS의 미디어 쿼리(Media Query)를 이용하여 반응형 디자인(Responsive Design)을 만들 수 있다.이때 사용할 수 있는 장치(Device)의 화면 너비 브레이크포인트(Breakpoint)에 대해 정리해본다. 장치 화면 너비 브레이크포인트Portrait 모드는 세로 화면, Landscape 모드는 가로 화면을 의미한다.장치브레이크포인트비고모바일320pxPortrait 모드예) iPhone 5, iPhone SE480pxLandscape 모드태블릿768pxPortrait 모드예) iPad태블릿 / 컴퓨터1024pxLandscape 모드컴퓨터1200px 이상Desktop, Laptop예제 코드/* 모바일 Portrai..

- [React.ts] PropsWithChildren

PropsWithChildren들어가며리액트(React.ts)에서 사용할 수 있는 @PropsWithChildren@ 타입에 대해 정리해본다.이 타입은 리액트와 타입스크립트를 함께 사용할 때 사용할 수 있다. PropsWithChildren개념타입스크립트(TypeScript)에서 리액트 컴포넌트에 자식 요소(@children@)를 허용하고자 할 때 사용하는 유틸리티 타입보통 컴포넌트에 전달되는 기본 @props@ 외에도 자식 요소를 포함할 수 있을 때 유용하게 사용된다.@PropsWithChildren@ 타입은 컴포넌트가 자식 요소를 가질 수 있도록 명시하며, @children@을 명시적으로 정의하지 않고도 사용할 수 있도록 해준다. 사용 예제import { PropsWithChildren } from ..

- [React.js] const Component vs. function Component

const Component vs. function Component들어가며리액트(React.js)에서 @const Component@ 형태의 화살표 함수 방식과 @function Component@ 형태의 함수 선언 방식으로 컴포넌트를 선언할 수 있다.위의 두 가지 방법에 대한 차이점을 정리해본다. ① 화살표 함수 방식const MyComponent = () => { return( .. )} 화살표 함수(Arrow Function)로 작성할 수 있으며, 짧은 코드로 작성할 수 있다는 장점이 있다.예를 들어, 한 줄로 반환하는 경우, @return@ 키워드를 생략할 수 있다.const MyComponent = () => ( ... ) 컴포넌트 선언과 동시에 @export default..

.gitignore 파일에 환경 설정 파일(.env) 등록하는 방법들어가며@.gitignore@ 파일에 환경 설정 파일(@.env@)을 등록하는 방법을 정리해본다. 방법@.gitignore@ 파일에 @.env@ 추가하기.gitignore@.gitignore@ 파일이 없을 경우 새로 생성해주고, 그 안에 @.env@을 추가해준다.# 환경 설정 파일.env (참고) @.gitignore@ 파일에 추가해도 무시되지 않을 경우만약 이미 @.env@ 파일이 Git에 의해 추적 중일 경우, @.gitignore@ 파일에 @.env@를 추가해도 무시되지 않는다.따라서 아래의 명령을 실행하여 Git 캐시에서 @.env@ 파일 추적 캐시를 제거해준다.$ git rm --cached .env

React Share 라이브러리들어가며React Share 라이브러리에 대해 정리해본다. React Share개념리액트 애플리케이션에서 다양한 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 해주는 라이브러리여러 소셜 미디어 플랫폼에 링크를 공유할 수 있는 버튼을 제공하며, 간단한 설정을 통해 버튼을 커스터마이징할 수 있다. 주요 특징간단하게 설치할 수 있다.필요한 소셜 미디어 공유 버튼을 컴포넌트로 불러와 사용할 수 있다.버튼의 크기, 모양, 스타일을 쉽게 커스터마이징할 수 있으며, SVG 아이콘을 사용하여 스타일을 자유롭게 변경할 수 있다.다양한 소셜 미디어 플랫폼을 지원한다.Facebook, X(Twitter), LinkedIn, Pinterest, Telegram, WhatsApp, Line, R..