Junhyunny's Devlogs - mysetting

2:55 5/30

junhyunny.github.io

mobile screenshot relative

2:55

junhyunny.github.io

mobile screenshot

Junhyunny's Devlogs
https://junhyunny.github.io/

개발자

저작도구: Jekyll v3.9.0

최종 피드 수집: 2026-04-10 10:16

전체 (452)

15h

사파리(safari) 브라우저 캐시 정책과 이미지 재로딩 문제

RECOMMEND POSTS BEFORE THIS
리액트(React) 스켈레톤 이미지(Skeleton Image)
0. 들어가면서
이전 글에서 썸네일(thumbnail)이 생성되는 시점까지 이미지 로딩을 재시도하는 코드를 살펴봤다

browser

safari

javascript

typescript

000

1d

2026년 3월 Axios 서플라이 체인(supply chain) 공격

1. Incident Overview
2026년 3월 30일부터 31일에 걸쳐 발생한 axios 서플라이 체인(공급망) 공격은 매주 1억 회 이상 다운로드되는 인기 자바스크립트(JavaScript) HTTP 클라이언트 라이브러리를

security

javascript

axios

cwe-506

000

2d

리액트(React) 스켈레톤 이미지(Skeleton Image)

RECOMMEND POSTS BEFORE THIS
0. 들어가면서
이미지나 동영상을 AWS S3 스토리지에 직접 업로드한 이후에 AWS 람다(lambda)에서 비동기 처리를 통해 썸네일(thumbnail) 이미지를 생성 중이다.

react

javascript

typescript

usability

000

5d

AWS 람다(lambda)

0. 들어가면서
지금 참여하는 중인 프로젝트는 서버리스(serverless) 아키텍처를 채택 중이어서 클라우드 프론트(cloudfront), S3, API 게이트웨이, 람다(lambda)를 활용 중이다. 프로젝트 초반에 참여한 것

aws

lambda

serverless

lambda-layers

001

19d

에이전트 스킬(SKILL.md)

1. Agent Skills
에이전트 스킬(agent skills)는 단순한 단축 명령어 기능에서 시작해서 현재는 여러 AI 에이전트 제품이 채택하는 강력한 ‘오픈 표준(open standard)’으로 발전했다. 과거 클로드 코드

ai

ai-agent

skills

agent-skills

000

21d

ReAct 에이전트 Playwright를 사용한 브라우저 조작 및 웹 검색

RECOMMEND POSTS BEFORE THIS
LLM 랭체인(LangChain) 예제
Playwright MCP 서버를 통한 E2E 테스트 워크플로우
ReAct(Reasoning and Acting) 에이전트
0. 들어가면서

ai

ai-agent

react-agent

+ 더보기

002

23d

ReAct(Reasoning and Acting) 에이전트

0. 들어가면서
최근 동료와 잡담할 시간이 있었다. 이때 리액트(ReAct) 에이전트라는 개념을 처음 접했다. 토이 프로젝트에서 랭그래프를 사용해서 에이전트를 개발하려고 했었는데, 이 방식보다 쉽게 에이전트를 만들어 볼 수 있을

ai

ai-agent

langchain

react-agent

001

26d

일렉트론(electron) 프레임워크의 프로세스 모델(process model)

RECOMMEND POSTS BEFORE THIS
일렉트론(electron) 프레임워크 기반 리액트(react) 프로젝트 준비
0. 들어가면서
일렉트론(electron) 프로젝트를 생성하면 3개의 스크립트 코드가 눈에 띈다.
ma

electron

desktop-application

chromium

001

27d

일렉트론(electron) 프레임워크 기반 리액트(react) 프로젝트 준비

0. 들어가면서
올해는 토이 프로젝트로 AI 에이전트 개발해 볼 생각이다. AI 에이전트가 내부적으로 어떻게 동작하는지 공부하고 싶다. 앞으로 일반적인 시스템이나 애플리케이션 보다 AI가 결합된 서비스들이 많아질 것 같다는 생각에

electron

react

frontend

desktop-application

001

30d

OpenAPI 명세서 기반 AWS API 게이트웨이(gateway)와 람다(lambda) 배포

RECOMMEND POSTS BEFORE THIS
AWS SAM(Serverless Application Model) 개념과 CLI 예제
OpenAPI 명세서를 사용한 Orval 클라이언트 코드 자동 생성하기
0. 들어가면서
이전

infra

aws

openapi

+ 더보기

001

1M

[CVE-2026-25639] Axios 프로토타입 오염 취약점

RECOMMEND POSTS BEFORE THIS
보안 취약점의 식별과 평가 기준
프로토타입 패턴 (Prototype Pattern)
자바스크립트 프로토타입 (JavaScript Prototype)
자바스크립트 프로토타입 체이닝

security

cve-2026-25639

javascript

+ 더보기

003

1M

보안 취약점의 식별과 평가 기준

0. 들어가면서
SW 보안 공부를 올해 목표로 삼았다. 모르는 개념들이 많아서 공부를 시작하기 전 용어에 대해 정리할 필요를 느꼈다. 이번 글을 통해 간단하게 정리해봤다.
1. CVE (Common Vulnerabilities a

information

security

001

1M

리액트 쿼리(react query) 낙관적 업데이트(optimistic update)

RECOMMEND POSTS BEFORE THIS
OpenAPI 명세서를 사용한 Orval 클라이언트 코드 자동 생성하기
Orval MSW(Mock Service Worker) 핸들러 생성과 React Query 테스트 작성하기

react

react-query

optimistic-update

001

1M

Orval MSW(Mock Service Worker) 핸들러 자동 생성과 React Query 테스트 작성하기

RECOMMEND POSTS BEFORE THIS
Setup Vitest for React App
목 서비스 워커 (Mock Service Worker)
OpenAPI 명세서를 사용한 Orval 클라이언트 코드 자동 생성하기
0.

react

react-query

msw

orval

000

2M

OpenAPI 명세서를 사용한 Orval 클라이언트 코드 자동 생성하기

0. 들어가면서
최근 참여한 프로젝트는 OpenAPI 사양을 Rest API의 단일 진실 공급원(single source of truth)으로 사용하려는 노력이 엿보인다.
OpenAPI 사양을 기준으로 Orval을 통해 프론트엔드

openapi

orval

auto-generate-code

+ 더보기

004

2M

Playwright 페이크 미디어 스트림(fake media stream)으로 웹캠(webcam) 촬영 테스트

RECOMMEND POSTS BEFORE THIS
리액트 브라우저 웹캠(web camera) 촬영/녹화 구현하기
0. 들어가면서
브라우저에서 웹캠으로 촬영하는 기능은 웹 API를 사용하기 때문에 단위 테스트로 검증하는 것에 한계가

playwright

e2e-test

fake

+ 더보기

003

2M

리액트 브라우저 웹캠(web camera) 촬영/녹화 구현하기

0. 들어가면서
최근 참여한 프로젝트에는 브라우저에서 비디오 녹화와 사진 촬영 기능이 구현되어 있었다. 코드가 복잡해 보여서 리팩토링이 필요해 보였다. API 기능을 정확히 이해해야 문제 없이 리팩토링 할 수 있을 것 같아서 어떻

react

browser

web-api

+ 더보기

003

2M

DynamoDB 페이지 처리(pagination)

RECOMMEND POSTS BEFORE THIS
타입스크립트 애플리케이션에서 LocalStack 테스트 컨테이너 사용하기
0. 들어가면서
DynamoDB는 조회할 때 1MB 사이즈 제한이 있다. 그 이상 데이터를 조회하고 싶은

test

test-container

aws

+ 더보기

003

2M

동시성(concurrency) 문제와 DynamoDB 원자적(atomic) 업데이트

RECOMMEND POSTS BEFORE THIS
데이터베이스 락(Database Lock)
DynamoDB single table design
타입스크립트 애플리케이션에서 LocalStack 테스트 컨테이너 사용하기
0. 들어가

test

test-container

aws

+ 더보기

002

2M

타입스크립트 애플리케이션에서 LocalStack 테스트 컨테이너 사용하기

RECOMMEND POSTS BEFORE THIS
테스트 더블(Test Double)
Setup DynamoDB with LocalStack
0. 들어가면서
신뢰할 수 있는 테스트(reliable test)를 작성하려면 실제 환경

typescript

test-container

localstack

+ 더보기

001