Per ardua ad astra.

- [Next.js] 렌더링 방식 정리 (CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration))

렌더링 방식 정리 (CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration))들어가며Next.js의 렌더링 방식인 CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration)에 대해 정리해본다.Next.js에서 페이지를 작성하면 기본적으로 CSR 방식으로 렌더링된다. CSR(Client Side Rendering)개념브라우저에서 자바스크립트 파일을 다운로드한 후, 클라이언트 측에서 렌더링을 ..

테마 토글 기능 설정하기 (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/..

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

갑자기 "'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다." 오류가 발생할 때 해결 방법들어가며Next.js 프로젝트 서버를 실행할 때, 갑자기 아래와 같은 오류가 발생하는 경우가 있다.$ yarn devyarn run v1.22.22$ next dev'next'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 이때, 이 문제를 해결하는 방법을 정리해본다. 방법해결 방법은 간단하다. 캐시를 지워준 후, 프로젝..

환경 변수 사용 방법들어가며Next.js에서 환경 변수(Environment Variable)를 사용하는 방법을 정리해본다. 방법① 환경 변수 파일 설정하기Next.js는 @.env@ 파일을 통해 환경 변수를 불러올 수 있다.프로젝트 최상위 경로(@/@)에 다음과 같은 @.env@ 파일을 생성한다. /.env.localNEXT_PUBLIC_API_URL=https://api.example.comAPI_SECRET_KEY=your-secret-key ⇒ 다음과 같이 @.env@뒤에 용도에 따라 다양한 접미어를 붙일 수 있다. 환경변수 파일명설명@.env.local@로컬 개발 환경에서 사용하는 환경 변수 (Git에 추가하지 않는 것이 좋다.)@.env.development@개발 환경에서 사용하는 환경 변수@..

asChild 속성들어가며@asChild@ 속성에 대해 정리해본다. asChild 속성개념Radix UI와 같은 라이브러리에서 사용되는 속성컴포넌트가 래핑(Wrapping)된 자식 컴포넌트의 스타일이나 기능을 그대로 유지하면서 특정 기능을 제공하기 위해 사용된다. 의미자식 요소를 그대로 사용한다.래핑된 컴포넌트가 새로운 DOM 노드를 생성하지 않고, 해당 자식 요소의 DOM을 그대로 사용하여 기능만 추가한다.불필요한 DOM 노드가 추가되지 않아 HTML 구조를 깔끔하게 유지하고, 스타일이 깨지지 않도록 보장한다. 사용 예 Menu ⇒ @@은 @@의 자식이지만, @@가 새로운 DOM 노드를 만들지 않는다.⇒ 대신 @@ 자체가 @DropdownMenuTrigger@로 작동하게 된다. 사용하면 좋은 경우추가..

shadcn/ui들어가며간단하게 복사 & 붙여넣기로 사용할 수 있는 shadcn/ui에 대해 정리해본다. shadcn/ui개념다양한 웹 애플리케이션 개발에 사용할 수 있는 접근 가능하고 커스터마이즈 가능한 UI 컴포넌트 모음일반적인 라이브러리와는 다르게 npm 패키지로 설치하는 대신, 사용자가 필요한 컴포넌트를 복사해서 직접 프로젝트에 붙여넣는 방식으로 사용한다.불필요한 의존성을 피할 수 있고, 자신만의 커스텀 컴포넌트 라이브러리를 구축할 수 있다.리액트(React.js)를 기반으로 작성되었고, Tailwind CSS 및 Radix UI와 같은 오픈 소스 기술들을 적극적으로 활용하여 만들어졌다.Next.js와 같은 프레임워크와 잘 통합되도록 설계되었다.MIT 라이센스로 공개되어 있어 누구나 자유롭게 수정..

폴더 구조 및 동적 경로 설정하기들어가며Next.js를 이용하여 폴더 구조 및 동적 경로를 설정하는 방법을 정리해본다. 방법① 비공개 폴더(Private Folder) 생성하기앱(@app@) 폴더는 기본적으로 URL 세그먼트가 된다.비공개 폴더(Private Folder)를 만들고 싶을 경우, 폴더 이름 앞에 밑줄(@_@)을 추가한다._css ⇒ @_css@ 폴더 생성 시, 해당 폴더는 URL 세그먼트로 노출되지 않으며, 만약 해당 경로에 접속할 경우 404 페이지를 반환한다. 비공개 폴더는 라우팅에 직접 포함되지 않는 폴더이다.일반적으로 내부 관리 목적으로 사용된다.  ② 라우트 그룹(Route Group) 생성하기라우트 그룹(Route Group)은 특정 페이지나 경로를 그룹화한다.이러한 그룹의 이름..

self.function(param)과 function(self, param)의 차이점들어가며PyQt를 이용하여 개발을 할 때, 언제 @self.function(param)@ 또는 @function(self, param)@를 써야할지 헷갈릴 때가 있다.이 둘의 차이점에 대해 정리해본다.  self개념파이썬 클래스의 인스턴스 메서드에서 현재 객체 자신을 참조하기 위한 첫 번째 매개변수클래스의 인스턴스(객체) 자신을 참조하는 변수클래스 내에서 정의된 메서드가 호출될 때 자동으로 해당 메서드가 속한 객체를 가리키도록 한다.클래스와 객체 지향 프로그래밍(OOP)에서 매우 중요한 개념메서드 내에서 객체의 속성이나 다른 메서드에 접근할 때 사용 @self@는 메서드 내에서 객체의 속성과 다른 메서드에 접근할 수 있..

daisyUI 테마 설정하기 들어가며테일윈드 CSS의 확장 라이브러리인 daisyUI를 이용하여 페이지에 테마(Theme)를 적용하는 방법을 정리해본다. 방법테마 고르기dasiyUI의 공식 문서에서 원하는 테마를 선택한다. daisyUI themes — Tailwind CSS Components ( version 4 update is here )How to use daisyUI themes?daisyui.com 이 페이지에서는 드라큘라 테마(@dracula@)를 선택했다고 가정한다. 테일윈드 CSS 설정 파일에 추가하기테일윈드 CSS 설정 파일인 @tailwind.config.js@ 파일에 아래의 테마 속성을 추가해준다../tailwind.config.js/** @type {import('tailwind..

테일윈드 설정 파일(tailwind.config.js)에서 플러그인(Plugin) 추가할 때 "'require' is not defined" 오류가 뜰 때 해결법들어가며테일윈드 설정 파일(@tailwind.config.js@)에서 @require@를 이용하여 플러그인(Plugin)을 추가할 때, @'require' is not defined@ 오류가 발생할 때 해결하는 방법을 정리해본다.  방법간단하다. 프로젝트 최상단 경로에 있는 ESLint 설정 파일(@eslint.config.js@)에 다음과 같이 환경 변수(@env@) 조건을 추가해주면 된다. ./eslint.config.js{ // ... env: { browser: true, node: true, // 추..

daisyUI들어가며테일윈드 CSS의 확장 UI 라이브러리인 dasiyUI에 대해 정리해본다. daisyUI개념테일윈드 CSS를 확장한 UI 라이브러리다양한 기본 스타일을 제공하여 빠르게 UI를 구성할 수 있도록 도와준다.테일윈드 CSS의 유틸리티 클래스와 함께 사용된다.버튼, 카드, 모달, 알림, 폼 요소 등 여러 가지 컴포넌트 스타일을 미리 정의해 둔 상태로 제공한다.daisyUI를 이용하면 UI를 쉽게 커스터마이징하고, 일관성 있는 디자인을 유지하면서 빠르게 개발할 수 있다. 특징테일윈드 CSS와 완벽하게 호환되며, 추가적인 스타일링 없이 유틸리티 클래스를 사용할 수 있다.일관된 디자인 시스템을 기반으로 하기 때문에, 프로젝트 전반에 걸쳐 일관된 UI를 유지할 수 있다.버튼, 알림, 모달, 카드 등..

자주 사용되는 테일윈드 CSS 클래스 정리들어가며테일윈드(Tailwind) CSS에서 자주 사용되는  클래스들을 정리해본다. 자주 사용되는 클래스들레이아웃(Layout)container: 반응형 컨테이너를 설정mx-auto: 수평 중앙 정렬flex: Flexbox 컨테이너 생성grid: 그리드 레이아웃 설정space-x-*: 자식 요소 간의 가로 간격 설정 (수평)space-y-*: 자식 요소 간의 세로 간격 설정 (수직) 정렬(Alignment)text-center: 텍스트를 중앙 정렬items-center: Flexbox 또는 Grid에서 요소를 수직 중앙 정렬justify-center: Flexbox 또는 Grid에서 요소를 수평 중앙 정렬 간격(Spacing)p-*: 전체 패딩 적용px-*: 좌우..

Tailwind CSS들어가며테일윈드(Tailwind) CSS에 대해 정리해본다. Tailwind CSS개념유틸리티 우선 CSS 프레임워크미리 정의된 CSS 클래스를 사용하여 빠르게 사용자 인터페이스를 구축할 수 있도록 도와준다.전통적인 CSS 프레임워크와 달리, 구성 요소를 만들기 위한 완성된 스타일이 아니라, 각 스타일 속성에 대한 클래스(유틸리티 클래스)를 제공한다.개발자는 자신의 디자인에 맞게 클래스를 조합하여 원하는 스타일을 쉽게 적용할 수 있다. 특징 다양한 스타일 속성을 제어할 수 있는 클래스를 제공한다.예) @bg-blue-500@ : 배경색을 파란색으로 설정CSS의 재사용성과 모듈화를 강조한다.클래스 이름이 의미를 가지므로, 다른 프로젝트에서도 쉽게 이해하고 사용할 수 있다.반응형 디자인..

정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)들어가며사전 렌더링 방법인 정적 생성(Static Generation)과 서버사이드 렌더링(Server-side Rendering)에 대해 정리해본다. 정적 생성(Static Generation)개념웹 페이지를 미리 생성하여 HTML 파일로 저장하는 방식웹 사이트의 빌드 단계에서 모든 페이지가 사전에 렌더링되며, 사용자가 페이지를 요청할 때 서버에서 미리 생성된 HTML 파일을 즉시 제공하는 방식빠른 로딩 속도와 서버 부하 감소를 위해 사용SSG(Static Site Generation)이라고도 한다. 장점페이지가 미리 생성되어 있으므로, 사용자는 빠르게 페이지를 볼 수 있다. (빠른 페이지 로딩)요청..

메타데이터(Metadata) 추가하기들어가며Next.js에서 컴포넌트에 메타데이터(Metadata)를 추가하는 방법을 정리해본다. 메타데이터(Metadata)웹페이지에 대한 추가 정보를 제공하는 데이터주로 HTML 문서의 @@ 태그 안에 포함되어 있으며, 검색 엔진 최적화(SEO), 소셜 미디어 공유, 브라우저 설정 등 여러 목적으로 사용된다. 메타데이터  추가하기정적 페이지(Static Page)와 동적 페이지(Dynamic Page)에 메타데이터를 추가하는 방법이 다르다. 정적 페이지방법페이지나 레이아웃 파일에 @metadata@라는 이름의 상수를 내보내는 방식을 통해 메타데이터를 설정할 수 있다.export const metadata = { title: 'All Meals', descriptio..

서버 컴포넌트와 클라이언트 컴포넌트들어가며Next.js는 서버 컴포넌트와 클라이언트 컴포넌트의 개념을 도입한 리액트 기반의 풀스택(Full-Stack) 프레임워크이다.Next.js는 단순히 프론트엔드 라이브러리인 리액트를 넘어 서버 측에서도 코드를 실행할 수 있는 기능을 제공한다. 서버 컴포넌트개념Next.js 프로젝트에서는 모든 리액트 컴포넌트가 기본적으로 서버에서 렌더링 된다.이 컴포넌트들을 서버 컴포넌트라고 하며, 브라우저가 아닌 서버에서 실행된다. 예다음과 같이 컴포넌트에 로그를 출력하면, 웹 브라우저 개발자 도구(클라이언트 단)가 아닌, IDE(서버 단)의 터미널에서 로그를 확인할 수 있다. 장점성능 향상클라이언트 측에서 다운로드해야 할 자바스크립트(JS) 코드가 줄어든다. SEO 개선서버 단에..

Image 컴포넌트들어가며Next.js에서 기본으로 제공하는 Image 컴포넌트에 대해 정리해본다. Image 컴포넌트개념Next.js에서 다양한 퍼포먼스 기능과 편리한 설정을 지원하는 컴포넌트 이미지 컴포넌트를 이용하면 이미지 불러오기 작업을 최적화할 수 있다. 또한 이미지 크기 조정, 지연 로딩(Lazy Loading)을 지원하며, WebP와 같은 최신 이미지 형식이 자동으로 처리된다. 다양한 기기와 화면 크기에 맞게 이미지 크기를 유동적으로 조절할 수 있다. 사용 방법기본 사용법@next/image@ 모듈을 불러와서 사용한다.import Image from 'next/image';export default function Home() { return ( Next.js Image E..

whitespace-pre-wrap 클래스들어가며테일윈드(Tailwind) CSS의 @whitespace-pre-wrap@ 클래스에 대해 알아보자.  @whitespace-pre-wrap@Tailwind CSS에서 사용하는 유틸리티 클래스 중 하나로, HTML 요소 내의 텍스트를 처리하는 방법을 지정한다.이 클래스를 사용하면 텍스트를 다음과 같이 처리할 수 있다. 공백 유지텍스트 내의 연속된 공백을 유지한다.여러 개의 공백이 있어도 하나로 축약되지 않는다. 강제 줄바꿈텍스트 내의 줄바꿈 문자를 유지한다.텍스트에 포함된 줄바꿈(@\n@)은 실제로 줄바꿈이 된다. 자동 줄바꿈텍스트가 요소의 너비를 초과하면 자동으로 줄이 바뀐다.이 클래스는 @white-space: pre-wrap;@ CSS 속성과 동일한 효..

QTableWidget 안의 항목 검색 및 복원 기능 구현 방법들어가며PyQt의 @QTableWidget@ 안의 항목을 검색하고, 원래의 내용을 복원 시키는 방법을 정리해본다. 방법검색하고자 하는 내용이 해당 행에 있을 경우 표시하고, 그렇지 않을 경우 숨기는 방법을 이용한다.from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QTableWidget, QTableWidgetItem, QPushButton, QLineEditclass SearchResetTableApp(QWidget): def __init__(self): super(SearchResetTableApp, self).__init__() self.ini..

QTableWidget과 SQLite3를 연동하여 구현한 CRUD 프로그램 들어가며 QTableWidget과 SQLite3를 연동하여 간단하게 구현한 CRUD 프로그램 소스 코드를 정리해본다. 소스 코드 import sys import sqlite3 from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout, QHBoxLayout, QPushButton, QLineEdit, QTableWidget, QTableWidgetItem, QLabel, QMessageBox class MainWindow(QMainWindow): def __init__(self): super().__init__() self.setWindowTitle("C..

PyQt에서 플랫폼 독립적인(Platform Independent) 스타일 적용하는 방법 (Fusion) 들어가며 윈도우와 맥에서 표시되는 PyQt 프로그램의 모습은 다르다. 그 이유는 플랫폼에 영향을 받기 때문이다. 이렇게 플랫폼에 영향을 받지 않고, OS에 상관없이 동일하게 PyQt 프로그램이 표현되도록 하는 방법이 있다. 방법 PyQt에서는 플랫폼 독립적(Platform Independent)인 스타일 플러그인인 @Fusion@을 제공한다. 이 스타일 플러그인을 이용하여 스타일을 적용시키면 OS에 상관 없이 동일한 UI가 표시될 수 있도록 할 수 있다. 이 스타일 플러그인을 사용하기 위해서는 다음과 같이 @QStyleFactory@ 모듈을 불러와야 한다. from PyQt5.QtGui import ..

맥(Mac)에서 윈도우(Windows)와 비슷하게 메뉴 표시하는 방법들어가며한 줄의 코드를 넣음으로써 맥에서 실행되는 PyQt의 메뉴가 윈도우와 비슷하게 표현되도록 만들 수 있다. 방법menubar.setNativeMenuBar(False) 참고 사이트 06) 메뉴바 만들기 - GUI 어플리케이션에서 메뉴바(menu bar…wikidocs.net

QTableWidget에 1,000 단위로 쉼표(,)를 추가하고 숫자 정렬 기능 추가하기 들어가며 PyQt5에서 @QTableWidget@에 값을 넣을 때, 기본적으로 @string@ 형식의 값이 들어가게 된다.(@int@형의 값은 넣을 수 없다.) 이 때, @QTableWidget@에 (@string@ 형의) 숫자를 넣을 때 1,000 단위로 쉼표(@,@)를 추가하고, 정렬(오름차순/내림차순)을 할 수 있도록 구현해보자. 실습을 위한 QTableWidget 객체 생성 하기 다음과 같이 실습을 위해 필요한 @QTableWidget@ 객체를 생성한다. self.table_widget = QTableWidget(self) self.table_widget.setGeometry(50, 50, 400, 200) ..

간단한 CRUD(Create, Read, Update, Delete) 프로그램 들어가며 PyQt5로 간단한 CRUD(Create, Read, Update, Delete) 기능을 수행할 수 있는 프로그램을 만들어보자. 코드 @QTextEdit@ 위젯을 이용하여 CRUD 기능을 수행할 수 있는 메모장과 비슷한 프로그램이다. import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QTextEdit, QAction, QFileDialog class TextEditor(QMainWindow): def __init__(self): super().__init__() self.initUI() def initUI(self): self.textEdit = QT..

QTimer.singleShot 함수를 특정 시간 간격으로 여러번 실행하는 방법들어가며@PyQt5@에서 @QTimer.singleShot@ 함수를 특정 시간 간격으로 여러번 실행할 수 있다.@QTimer.singleShot@ 함수는 밀리초 단위의 시간 지연을 준 후, 특정 함수를 실행해주는 함수이다.  예제다음은 @QTimer.singleShot@ 함수를 3초 간격으로 여러 번 실행하는 예제이다.반복문과 재귀 호출을 이용하여 구현하였다.from PyQt5.QtCore import QTimerclass MyClass: def __init__(self): self.count = 0 def start_timer(self): self.count = 0 self.r..

QAction에서 triggered 시그널을 사용할 때, 인자를 triggered 메서드에 전달하는 방법PyQt의 @QAction@에서 @triggered@ 시그널을 사용할 때, 인자를 @triggered@ 메서드에 전달하는 방법을 알아보자. 람다 함수 사용하기action = QAction("My Action", parent)action.triggered.connect(lambda: my_function(arg1, arg2))my_function은 arg1과 arg2를 인자로 받는 함수이다.triggered 시그널이 발생하면, 람다 함수가 호출되고 my_function이 호출된다.arg1과 arg2는 람다 함수에서 직접 전달된다. @functools.partial@ 사용하기import functoolsa..

PyQt5에서 @QClipboard.Clipboard@와 @QClipboard.Selection@의 차이점들어가며@QClipboard.Clipboard@와 @QClipboard.Selection@은 PyQt에서 클립보드의 데이터를 설정 및 가져오는 방법을 지정하는 상수이다. 사용법다음 모듈을 @import@하여 클립보드 기능을 사용할 수 있다.from PyQt5.QtGui import QClipboard 사용 예def copyElementNameToClipboard(self): name = self.sender().text() app = QApplication.instance() clipboard = app.clipboard() clipboard.setText(name, QClipb..

PyQt 커스텀 아이콘 패키지(fugueicons) 설치 및 사용해보기 들어가며 PyQt에는 기본 아이콘 팩이 있지만(참고), 아이콘의 종류가 적다. 그래서 커스텀 아이콘 패키지(@fugueicons@)를 설치하여 사용할 수 있다. 방법 @pyqt5-fugeicons@ 패키지 설치하기 터미널에서 다음 명령을 실행하여 @pyqt5-fugeicons@ 패키지를 설치한다. > pip install pyqt5-fugueicons 아이콘 사용해보기 다음과 같이 모듈을 불러와@fugeicons@의 아이콘을 사용해볼 수 있다. import pyqt5_fugueicons as fugue @icon()@ 메서드를 사용하여 아이콘을 불러올 수 있다. PyQt 기본 아이콘팩의 아이콘을 사용하는 방법과 유사하다. @QActi..

PyQt style().standardIcon() 메서드에서 사용할 수 있는 아이콘 종류 및 숫자 들어가며 PyQt에는 기본적으로 내장되어 있는 표준 아이콘(Standard Icon)들이 있다. 아이콘 파일을 직접 구하지 않고 사용할 수 있으므로, 프로그램을 만들 때 활용하면 유용하다. 아이콘 확인해보기 import sys from PyQt5.QtWidgets import QApplication, QGridLayout, QPushButton, QStyle, QWidget class Window(QWidget): def __init__(self): super(Window, self).__init__() icons = sorted([attr for attr in dir(QStyle) if attr.start..