All
총 63개의 포스팅이 있습니다.
n8n으로 유튜브 썰쇼츠 자동화 구축하기 1
Docker로 n8n 세팅하고 썰 생성 AI 붙이기
#n8n#Docker#youtube#ssul#shorts#ai#gemini2026-03-24
아두이노 웹 서버 포기! ESP-01 클라이언트 푸시와 PyQt 위젯으로 온습도 모니터링 성공기
버퍼 오버플로우로 뻗어버리는 아두이노 서버 대신, 클라이언트 푸시 아키텍처로 전환하여 PyQt6 위젯 서버와 통신하기. 전체 코드 및 윈도우 방화벽 인바운드 규칙 설정까지.
#Arduino#ESP-01#PyQt6#Python#Troubleshooting#IoT2026-03-05
ESP-01 모듈과 DHT22 센서 연동 트러블 슈팅: 하드웨어 뉴비의 눈물겨운 웹 서버 구축기
프론트엔드 개발자의 하드웨어 디버깅 삽질기. 부품 선정부터 CH340 보드 인식, 통신 속도 변경, 그리고 무한 0.0.0.0 에러를 넘어 AT 명령어로 웹 서버를 띄우기까지.
#Arduino#ESP-01#DHT22#Troubleshooting#IoT2026-03-04
Velog에서 Astro로 블로그 이전하기: 자동화 스크립트 작성기
Velog 블로그의 글들을 Astro 블로그로 마이그레이션하는 과정: velog-backup 도구 사용부터 Frontmatter 자동 변환, 이미지 경로 수정 및 트러블슈팅 과정 정리
#Astro#Migration#Node.js#Velog2026-03-03
Astro 블로그에 검색 기능 구현하기: search.json.ts의 비밀
Astro의 SSG 환경에서 API 엔드포인트를 활용하여 클라이언트 사이드 검색을 구현하는 원리와 React 연동 방법을 알아본다.
#Astro#React#Search#SSG#API Endpoint2026-03-03
Astro 블로그에 AI 작성 배지 추가하기(프론트매터 스위치 패턴)
Astro의 프론트매터와 Zod를 활용하여 원하는 포스트에만 선택적으로 AI 작성 명시 배지를 렌더링하는 방법
#Astro#TypeScript#Frontend#UI-Design2026-03-03
Astro 블로그 카테고리 생성 최적화, reduce를 활용한 빌드 성능 향상
Astro의 getStaticPaths에서 불필요한 필터링과 정렬 연산을 줄이고, reduce를 활용하여 카테고리별 포스트 그룹화를 최적화하는 방법
#Astro#TypeScript#JavaScript#Optimization#reduce2026-03-03
Tailwind CSS로 반응형 블로그 레이아웃 잡기 (Header, Footer, Sidebar)
Astro와 Tailwind CSS를 활용하여 헤더, 푸터 정렬부터 반응형 사이드바 레이아웃까지 구축하며 겪은 고민과 해결 과정 기록
#Tailwind#CSS#Layout#Responsive#Astro2026-03-02
구글 애드센스 "사이트가 다운되었거나 사용할 수 없음" 에러 해결기 (robots.txt 404)
클라우드플레어 환경에서 애드센스 크롤러가 사이트를 찾지 못하는 문제 원인 분석 및 robots.txt 추가로 해결한 과정
#AdSense#애드센스#Cloudflare#robots.txt#SearchConsole#트러블슈팅2026-03-02
Astro 블로그 사이드바 position: sticky 점핑 현상 해결기
Astro와 Tailwind CSS로 사이드바를 구현할 때 발생하는 position: sticky의 덜컥거리는 현상(Jumping) 원인과 픽셀 계산을 통한 해결 방법
#Astro#Tailwind CSS#Troubleshooting#Frontend2026-03-01
Astro 블로그 카테고리와 아일랜드 사이드바 구현하기
Astro를 이용해 카테고리 분류와 아일랜드 형태의 고정 사이드바를 구현하는 방법
#Astro#TailwindCSS#TypeScript#UI-Design#Optimization2026-03-01
Astro 블로그 구글 서치 콘솔 등록 및 사이트맵 제출하기
구글 검색 노출을 위한 Cloudflare DNS 인증부터 Astro 사이트맵 생성, sitemap-index.xml 까지
#Astro#SEO#GoogleSearchConsole#Sitemap#Devlog2026-03-01
Astro + Netlify + Cloudflare로 블로그 배포하고 구글 애드센스 연동하기
Vercel 대신 Netlify를 선택한 이유부터 도메인 연결, 404 에러 해결, 그리고 애드센스 승인 신청까지의 전체 과정 정리
#Astro#Netlify#Cloudflare#AdSense#Devlog2026-03-01
Astro + Tailwind 블로그에 다크 모드 적용하기
Tailwind CSS를 활용하여 깜빡임 없는 다크 모드와 커스텀 테마 토글 버튼, 마크다운 Typography 커스텀까지 구현한 과정
#Astro#TailwindCSS#Frontend#Design#Blog2026-03-01
Astro + Tailwind 가독성 튜닝과 브랜드 컬러 입히기
Astro 블로그의 레이아웃 최적화, 타이포그래피 설정, 그리고 색상 팔레트를 활용한 브랜드 디자인 적용기
#Astro#TailwindCSS#Frontend#Design#Blog2026-03-01
Astro + React + Tailwind로 블로그 구축 시작
Astro 기반의 블로그 구축 과정 정리(feat. Empty 프로젝트)
#Astro#React#TailwindCSS#Frontend#Blog2026-02-28
첫 블로그 포스팅
Astro와 React, Tailwind를 활용해 직접 블로그를 구축해보았다
#Astro#React#Frontend2026-02-27
리액트 라우터로 라우팅 기능 사용하기
MPA(Multi Page Application)은 url이 바뀔 때 마다 서버에서 html을 받아와 웹 브라우저에 출력하는 방식으로 구현된 웹 어플리케이션이다.서버에서 html을 계속 받아오므로, SSR(Server Side Rendering) 방식이 잘 맞다.
#React#router2026-02-03
전역 상태 관리(Context API, Redux Toolkit, Zustand)
리액트의 상태 관리 방식은 크게 로컬 상태 관리와 전역 상태 관리로 나눌 수 있다. 로컬 상태 관리 로컬 상태 관리는 useState나 useReducer와 같은 훅을 사용하여 각 컴포넌트에서 상태를 관리하는 것을 말한다.
#ContextAPI#React#redux-toolkit#zustand2026-02-02
Supabase 사용기
사이드 프로젝트 구축 중 DB를 사용할 일이 생겨 제미나이에게 추천을 부탁했더니, Supabase를 알려주었다. 세팅 방법 Supabase 홈페이지에 접속해서 회원가입 후 'New Project'를 누른다.
#supabase2026-01-31
TypeScript의 Enum 타입
TS에도 Enum 타입은 있지만, JS convert 문제로 Enum을 사용할 수 없는 상황이 있다. 조금 복잡하지만 Enum 대신 이 객체를 쓰면 트리 쉐이킹이 더 잘 되어 번들 사이즈를 줄일 수 있다.
#Enum#typescript2026-01-31
컴포넌트 최적화
성능을 최적화 하는 방법에는 웹 최적화와 리액트 특화 최적화가 있는데, 자습서에서는 리액트 특화 최적화 방법을 다룬다. 리액트를 최적화하는 방법은 크게 메모이제이션, 로딩 성능 최적화(코드 스플리팅), 렌더링 우선순위 조정 세 가지가 있다.
#React#최적화2026-01-23
생성 패턴 - 싱글톤 패턴
싱글톤 패턴은 클래스에서 인스턴스를 하나만 만들게 강제하는 패턴으로, 데이터베이스 연결 설정이나 사용자 설정(Config)처럼, 전역에서 접근 및 공유 해야하는 단 하나의 객체가 필요할 때 유용하다.
#DesignPattern2026-01-15
useId와 useEffect(컴포넌트 생명주기)
고유 아이디를 생성하는 useId와 사이드 이펙트를 관리하는 useEffect에 대해서 알아봤다. useEffect의 경우 사용하는 여러 사례들도 참고용으로 정리해두었다.
#React2026-01-13
생성 패턴 - 모듈 패턴
생성 패턴 중 모듈 패턴에 대해 알아보았다. 또한 모듈 패턴 이해에 필요한 JS 스코프, 클로저, IIFE에 대한 내용도 정리하였다.
#DesignPattern2026-01-11
25~26 LEARNING WORKSHEET
😎🔥
#Worksheet2026-01-11
생성 패턴 - 생성자 패턴, 프로토타입 패턴
디자인 패턴 중 첫번째로 공부하게 된 패턴은 생성 패턴 중 생성자(Constructor) 패턴이다. 생성자 패턴은 쉽게 말해 생성자를 사용하는 것, 즉 클래스로 인스턴스를 만드는 것을 의미한다.
#JavaScript#Prototype#class#designpatterns2026-01-08
자바스크립트 모듈 시스템 (.cjs, .mjs)
본격적으로 디자인 패턴을 알아보기에 앞서, 자바스크립트 모듈 시스템에 대해 알아보았다. CJS와 EMS의 우선순위와 두 시스템 간 차이점에 대해 정리했다.
#CJS#ESM#JavaScript#Module2026-01-08
VSCode에서 익스텐션 없이 스니펫 만들기 (feat. Snippet Generator)
VSCode에서 익스텐션 설치없이 스니펫(Snippet)을 사용하는 방법을 정리해보았다.
#snippet#vscode2026-01-07
할 일 앱 실습 - 로직
할 일 앱 실습에서 디자인 다음으로 예제 코드와 비교한 것은 로직이였다. svg, 기능, 폼 요소를 기준으로 컴포넌트를 나누는 기준과 그 밖의 로직의 차이점을 비교해보았다.
#React2026-01-07
할 일 앱 실습 - 디자인
할 일 앱 실습을 답을 보지 않고 진행한 후, 직접 작성한 코드와 예제 코드의 디자인 부분(html, css)을 비교하였다.
#CSS#React2026-01-07
빅오(big-O)
빅오 표기법을 사용하게 된 배경이 된 시간 복잡도 개념과 빅오 표기법의 종류에 대해 알아보았다.
#BigO#알고리즘2026-01-04
파이썬에 대한 이해
나에게 항상 약점이였던 수학적 역량을 채워보기 위해 코딩 테스트 공부를 시작했다. 웹을 같이 공부하고 있어서 타입스크립트로 코딩 테스트 공부를 할까 고민도 했는데, 이 책의 내용을 보고 파이썬으로 결정을 내렸다.
#python#알고리즘#코딩테스트2026-01-04
Vite 프로젝트 빌드 및 배포 과정
디자인 패턴 자습서에서 모듈 챕터의 .mjs 확장자를 이해하려다 자바스크립트 코드가 어떻게 빌드되고 배포되는지까지 확인하게되었다.
#vite2026-01-01
프론트엔드 개발자를 위한 웹팩
캡틴판교님의 프론트엔드 개발자를 위한 웹팩 강의를 수강하였다. 자세한 내용은 제공해주시는 웹팩 핸드북에 있지만, 개인적으로 강의를 수강하며 메모한 내용을 정리했다.
#webpack2026-01-01
로그인 UI 실습
폼 다루기 챕터 마무리 실습으로 로그인 UI Validation 로직을 짜는 예제가 나왔다.
#React#TailwindCSS2025-12-31
Recipe page main
컴포넌트를 많이 분리해서 사용해봤다. 더불어 split을 사용한 map 활용법과 li 태그 사용법, 전역 폰트 설정까지 알 수 있었던 알찬 프로젝트였다.
#FrontendMentor#React#TailwindCSS2025-12-31
Social links profile
간단한 것 같은데 은근히 배울점이 많았던 프로젝트였다.
#FrontendMentor#React#TailwindCSS2025-12-31
Blog preview card
두번째 프로젝트이자, 무료로 피그마 파일을 받을 수 있는 마지막 프로젝트이다. 크기를 정확하게 볼 수 있는게 좋았는데 아쉽다.🥲
#FrontendMentor#React#TailwindCSS2025-12-30
QR code component
첫 프로젝트로 QR 카드 페이지를 만들었다. 바닥부터 Tailwind CSS를 써보는게 처음이라 카드 가운데 정렬도 애를 먹었다.
#FrontendMentor#React#TailwindCSS2025-12-30
Frontend Mentor 시작
웹 스타일 공부 방법을 찾다가 Frontend Mentor 페이지를 찾아 클론 코딩을 시작하게 되었다.💪
#FrontendMentor2025-12-30
폼 다루기 - 폼 요소 컴포넌트 분리와 리액트 19 이후 ref(클린업)
폼 요소(ex. input, textarea)를 별도의 컴포넌트로 분리하여 사용할 수 있다. 리액트의 ComponentPropsWithRef 타입을 사용하면 HTML 태그가 가지고 있는 모든 속성을 가지고 올 수 있고, 이걸 컴포넌트의 Props로 지정하여 사용한다.
#React2025-12-29
폼 다루기 - 폼 밸리데이션(validation)
폼 밸리데이션이란 form 태그 내부에서 작성한 값이 유효한지 체크하는 로직을 말한다. 기본 밸리데이션 리액트에서 HTML5의 기본 폼 검증 기능을 사용할 수 있으며, 이 기능을 사용하면 별도의 로직 작성 없이 간단한 유효성 검사가 가능하다.
#React2025-12-29
폼 다루기 - 폼 상세 제어(포커스, 커스텀 훅)
제어 컴포넌트를 사용할 때 useRef를 활용하면 폼 요소에 포커스를 주거나 스크롤을 이동하는 동작을 수행할 수 있다.
#React2025-12-29
폼 다루기 - 비제어 컴포넌트 방식
비제어 컴포넌트 방식은 useRef를 사용해 dom의 ref에 직접 접근해서 값을 가져와 폼을 제출하는 방식을 말한다. 상태를 리액트가 관리하지 않고 DOM 자체에서 관리하도록 내버려 두기 때문에 비제어라고 부른다.
#React2025-12-27
폼 다루기 - 제어 컴포넌트 방식
제어 컴포넌트 방식은 리액트의 상태를 폼 요소의 value와 연결해서 폼을 제어하는 것이다. 폼 요소의 값이 바뀌면 리액트는 바뀐 값을 확인하고 컴포넌트를 재렌더링한다.
#React2025-12-27
폼 개념
폼이란 사용자가 상호작용하여 내용을 입력하는 UI를 말한다. 폼 요소에는 text, checkbox, radio, textarea 등이 있다. 폼 요소를 사용할 때는 <form> 태그 안에서 사용하는 것이 좋다.
#React2025-12-27
사용자 목록 실습
사용자 목록을 동적 렌더링하는 실습을 진행했다. 버튼을 눌러서 필터링이 가능한 사용자 목록 출력 페이지를 만드는 실습이다.
#React2025-12-27
동적 렌더링 - 반복 렌더링
반복 렌더링이란 갯수가 변할 수 있는 데이터를 동적으로 렌더링하는 것을 의미한다. JSX 속성으로 key를 사용하면 반복 렌더링으로 만들어진 컴포넌트를 개별적으로 구분할 수 있다. key는 반드시 고유한 값을 가져야하며, 변하지않는 값이 좋다.
#React2025-12-27
동적 렌더링 - 조건부 렌더링
조건부 렌더링은 자바스크립트의 문법 중 조건 표현식을 사용하여 컴포넌트의 상태에 따라 동적으로 렌더링 하는 것을 의미한다. 자바스크립트 조건 표현식 중 조건부 렌더링에 주로 사용하는 것은 if문, 삼항 연산자, AND 논리 연산자 이다.
#React2025-12-27
디자인 패턴 개념
리액트 자습서를 보고 공부하다가 상태 머신 패턴을 처음 접하고, 그걸 계기로 디자인 패턴 공부를 시작하게되었다. 그 중 리액트에 적용되는 디자인 패턴 책이 있어서 감사한 마음으로 집어들었다.
#React#designpatterns2025-12-23
계산기 실습
계산기 만들기 실습 예제가 있어, 예제 코드를 확인하기 전 먼저 코드를 짜보고 예제와 비교해보았다. 계산기는 간단한 사칙연산이 가능한 웹 계산기로, 샘플은 아래와 같다. 그리고 이건 내가 만든 계산기다. 자습서의 흑백 사진을 보고 만들었더니 색상이 많이 다르다.🤔
#CSS#React2025-12-20
리액트 스타일링 - 이미지, 웹 폰트 렌더링
리액트 앱에서 이미지를 렌더링 하기 위해서는 public 폴더나, src 폴더에 이미지를 저장한다. pubilc 폴더에 이미지를 넣어 렌더링하면, 빌드 과정을 거치지 않고 이미지 자체가 앱에 정적 리소스로 포함된다.
#CSS#React2025-12-19
리액트 스타일링 - Tailwind CSS
Tailwind CSS는 요즘 리액트 스타일링에서 각광받고 있는 유틸리티 퍼스트 스타일링 라이브러리이다. 유틸리티 퍼스트란 스타일 속성을 가장 작은 단위로 쪼개어 재사용 가능한 클래스로 만들어두고, 이를 조합해서 사용하는 것을 말한다.
#CSS#React#TailwindCSS#TailwindCSS설치2025-12-19
리액트 스타일링 - CSS-in-JS
CSS-in-JS 방식은 정통 스타일 방식이였던 html, js, css로 분리하여 스타일을 적용하는 것이 아닌, js 내부에서 css를 정의하는 방식이다.
#CSS#React2025-12-19
리액트 스타일링 - 전통적인 방식
리액트 컴포넌트의 스타일을 지정하는 방법은 여러가지가 있는데, 전통적인 방식(CSS 파일 활용)으로는 인라인 스타일, 글로벌 스타일, CSS 모듈 세 가지로 나눌 수가 있다.
#CSS#React2025-12-18
컴포넌트 상태
리액트의 상태란 값이 바뀔 때 마다 화면이 리렌더링되는 변수를 말한다. 리액트 컴포넌트 내부에서 let, const로 선언된 변수는 값을 바꿔도 리액트가 인식하지 못해 컴포넌트가 리렌더링 되지 않는다. 즉 변수 값을 바꿔도 화면에 반영이 되지 않는다.
#React2025-12-18
컴포넌트 이벤트
JSX 엘리먼트를 사용하면 html dom 엘리먼트(ex. button)처럼 이벤트를 사용할 수 있다. 대표적인 예는 버튼에 이벤트 속성과 이벤트 핸들러를 연결하여 버튼을 클릭할 때 함수를 호출하는 것이 있다.
#React2025-12-15
컴포넌트 Props
Props 개념 부모는 자식에게 props를 이용하여 데이터를 전달할 수 있다. props는 HTML의 속성처럼 컴포넌트의 태그 안에 입력되며, 여러개의 속성을 전달해도 항상 props 하나의 객체로 전달 된다.
#React2025-12-15
컴포넌트 개념
컴포넌트는 UI와 로직을 재사용할 수 있는 단위임. 보통 웹을 추상화하여(기능 단위로 나누어) 페이지를 여러 섹션으로 나눌 때, 하나의 섹션이 하나의 컴포넌트가 됨. 하지만 렌더링이 자주 일어나거나 성능 최적화가 필요하면 더 작게 컴포넌트를 나눌 수 있음.
#React2025-12-14
JSX 개념
JSX는 js의 문법 확장이므로 js 내부에서는 어디에서든 사용할 수 있음. 예를 들어 변수에 JSX를 저장해서 리턴 내부에서 사용하는 것도 가능함.JSX를 반드시 써야하는 것은 아님. 원래는 리액트의 createElement 메서드가 원형인데,
#React2025-12-14
리액트 개발 환경 설정
간단하게 리액트 개발 환경 설정하는 방법을 정리하였다. 리액트 개발 환경 설치 Node.js 설치 IDE(ex. VSCode) 설치 웹 브라우저 설치
#React2025-12-10
리액트의 핵심철학
리액트는 틀에 갇혀있지않은 확장성을 강조하기 위해 프레임워크라는 칭하는 것은 지양하고 라이브러리라는 용어를 사용한다고 한다. 오늘 포스팅에서는 자습서에서 소개하는 리액트의 핵심철학인 컴포넌트 기반 아키텍처, 가상 DOM, 선언적 프로그래밍 3가지를 정리해보려고 한다.
#React2025-12-10