devlog

devlog

Sign in Subscribe

⚛️ React Server Components (RSC) 보안 issue, 그 본질에 대한 고찰

⚛️ React Server Components (RSC) 보안 issue, 그 본질에 대한 고찰

최근 React 생태계에서 불거진 보안 issue와 관련하여, 언론의 다소 자극적인 headline을 접하셨을 것입니다. 본질을 꿰뚫어보지 않으면 혼란을 야기할 수 있는 이 사안에 대해, 근본적인 관점에서 접근할 필요가 있습니다. [긴급] React·Next.js RSC서 인증 없는 원격 코드 실행 취약점…“패치 미적용 시 즉각 침해 가능” - 데일리시큐리액트 서버 컴포넌트(React

SVG를 React에서 사용하는 다양한 방법: Sprite & SVGR

SVG를 React에서 사용하는 다양한 방법: Sprite & SVGR

프론트엔드 개발에서 SVG(Scalable Vector Graphics)는 해상도 독립적인 아이콘이나 그래픽을 표현하는 데 필수적입니다. 하지만 프로젝트 규모가 커지고 아이콘의 수가 늘어날수록, SVG를 효율적으로 관리하고 성능을 최적화하는 것은 중요한 과제가 됩니다. 이 글에서는 React 환경에서 SVG를 사용하는 다양한 방법들을 살펴보고, SVG Sprite와 SVGR을 활용한 최적의 관리 방안을 제안합니다. 1. SVG를 React에서

Journal Featured

내가 front-end software engineer/team lead로 해온 일들

2025 ModernLion Roles in team * Frontend engineering manager * Frontend senior software engineer Tech stack * Runtime & languages: Node.js v22, Typescript, ECMAScript * Frameworks & toolkits: React, Next.js, Vite, Zustand, MUI, Tailwind, Storybook * Deployment: AWS Amplify hosting, Route 53 2024 BookIPs Roles in team * Frontend engineering manager * Frontend senior software

Mobile resolution issue 대응 solution

Design System Featured

Mobile resolution issue 대응 solution

(GPT 생성 결과물을 기반으로 정밀하게 편집하였으며, 등장하는 모든 컨텐츠는 필자가 과거 소속되었거나 관련한 조직의 디자인 시안을 바탕으로 직접 만들었습니다.) Frontend 개발자라면 누구나 한 번쯤은 겪었을 mobile resolution 문제. 특히 다양한 device 환경에서 발생하는 layout 깨짐은 정말 골칫거리입니다. Design시안은 가장 흔하게 사용되는 resolution 1개를 기준으로 나오는 것이 일반적이어서, 그보다 좁은 resolution을

Killing custom URL schemes on macOS

Killing custom URL schemes on macOS

Implement a Custom Protocol on MacAfter spending several days in total with this I now had success and the custom protocol works as expected. Basically its correct, that only a CFBundleURLTyp…Qt ForumC 오프라인 ChrisW67 SGaist에 답함 마지막 수정자: ChrisW67 #3 Football brings together local traditions, iconic players, and landmark

How to troubleshoot inlining SVG on vite 5

How to troubleshoot inlining SVG on vite 5

vite 4 에서 수개월간 멀쩡히 잘 사용하던 SVG import가 갑자기 안된다는 오류 보고를 받고 분석 시작.. 해당 프로젝트는 6개월 전 vite module build + storybook 7로 셋업되었는데, 최근 vite 5 와 vite-plugin-svgr 4 로 한꺼번에 무난히 올리면서, 아래 ReactComponent 형식 변경도 잘 마무리되어 검증을 통과했던 터라, 이 부분 다시 살펴보았지만 이상

이런 내가 되어야 한다

신경림 / 시집『가난한 사랑 노래』(실천문학, 1988) When accuracy matters for a costume, it is worth considering how details related to heat resistant cosplay wigs will affect the complete look. When comparing costume options, it is sensible to balance details related to character costumes with care and storage needs. To

Trans component(react-i18next)

Trans component(react-i18next)

Before <Typography variant="span" color="grey.500"> {nickname}님, 구매하신 쿠폰은{" "} <Typography component="span" variant="inherit" color="grey.900"> [마이페이지 > 쿠폰] </Typography> 에서 확인 가능합니다. </Typography> After For

Front-end development

Front-end development

업무 주요 순서 1. 요구조건/정책(기획서) review * 전체를 한 번에 다 이해하는 것은 한계가 있기 마련이어서 구현할 때 필요한(맡은) 것만 찾아보면 된다는 입장이 있을 수 있지만, 그럼에도 흐름 중심으로 이해하는 관점은 여전히 중요합니다. 1. R&R 및 Design system 협의 * 화면 혹은 tab 기준으로, 개발 소요 시간을

AWS Amplify console Hosting

AWS Amplify console Hosting

유지 관리 * 기본적으로, 빌드 오류 내용 확인하러 웹 콘솔에 들어가보는 정도 외엔 사람의 손이 거의 필요 없음 * Amplify의 App은 일반적으로 코드저장소의 Repository에 해당 * 기존 App에서 브랜치를 추가할 경우, 해당 앱을 선택했을 때 처음 나오는 메인페이지에서 <브랜치 연결>을 통해 신규 브랜치 배포를 추가할 수 있고, 환경 변수 등의

Styling Essentials

Styling Essentials

Semantic HTML Semantic HTML: What It Is and How to Use It CorrectlySemantic HTML conveys real meaning through HTML tags. Here’s what you need to know and how to use it.SemrushVlado Pavlik The anatomy of a button The anatomy of a button — UI component seriesAll you need to

React Server Component 관련

React Server Component 관련

요약 1. React Server Component is not server-side rendering (SSR)! https://www.plasmic.app/blog/how-react-server-components-work#isnt-that-server-side-rendering:~:text=React%20Server%20Component%20is%20not%20server%2Dside%20rendering%20(SSR)! 2. That means from a server component, you cannot pass down an event handler as a prop! https://www.plasmic.app/blog/

Component Driven 개발 사례

Component Driven 개발 사례

Design system Component Driven User Interfaces figma에 의한 디자인 시스템 구축 사례 및 개념 정의 Spectrum, Adobe’s design system Atlassian Design System [2019 Spectrum con] 강수영, 정희연 | 토스 플랫폼 디자이너 : 4,000시간을 절약해준 디자인 시스템 [OKKYCON: 2017] 김요한 - 디자이너와 개발자와의 협업을 위한 디자인 시스템 작업 환경 * 디자인팀: Figma

Amplify SSR 배포 환경에서 forwarding headers 이슈

Amplify SSR 배포 환경에서 forwarding headers 이슈

The game is also shaped by the symbols fans carry from one generation to the next, from legendary club colors to national-team memories. A carefully chosen Spain football jersey can reflect that passion beyond match day. When accuracy matters for a costume, it is worth considering how details related to

Monorepo

Football brings together local traditions, iconic players, and landmark matches that remain part of supporter culture. Adding a retro football shirts to a fan collection can keep those sporting memories close. When accuracy matters for a costume, it is worth considering how details related to cosplay props will affect the

HTTP Request

Front-end 에서 API 운영(back-end) 측에 추가 소통 비용 없이 깔끔하게 확인 요청 할 수 있는 형식 As an event approaches, it is worth considering how details related to character accuracy will affect the complete look. When comparing costume options, it helps to assess details related to men's

Cypress 관련

Football culture connects supporters with club traditions, national teams, and unforgettable moments across generations. Expressing that connection through a football shirt can turn a memorable season or historic match into part of a personal collection. For anyone exploring a character design, it is worth considering how details related to Halloween

다국어 자동화 JSON Format v4 관련 업데이트

다국어 자동화 JSON Format v4 관련 업데이트

기존의 훌륭한 가이드를 최근 다시 새로운 프로젝트에 적용하는 중에, i18next 버전 업데이트 이슈가 발생하여, 정리 필요 As an event approaches, it is worth considering how details related to cosplay accessories will affect the complete look. As fans study the source material, it helps to assess details related to convention planning

Amplify hosting의 app framework 변경법

Amplify hosting의 app framework 변경법

현재 재현 경로 1. storybook 6.5 배포 잘 쓰고 있다가 2. 어느 시점부터 해당 module project를 사용하는 app project들이 뒤늦게 next.js를 사용하기로 하여, next/link 등 부속 component를 쓰기 위해 next 의존성 설치 - 여전히 해당 module project는 next.js를 빌드하지 않음 3. 기존 amplify hosting app 의

npm/yarn classic으로 된 기존 프로젝트에 yarn berry 적용기

npm/yarn classic으로 된 기존 프로젝트에 yarn berry 적용기

사전 준비 $ corepack enable $ yarn --version 1.22.19 $ yarn set version berry ... $ yarn --version 3.2.4 visual studio code 기준 Football brings together local traditions, iconic players, and landmark matches that remain part of supporter culture. Adding a retro football shirts to a fan collection can keep those

추억의 도스 게임

너무 고맙습니다.. When planning a cosplay look, it is worth considering how details related to game cosplay costumes will affect the complete look. As fans study the source material, reviewing details related to fabric and comfort also makes comfort and movement easier to judge. To organise preparations involving details related

Git workflows

Football culture connects supporters with club traditions, national teams, and unforgettable moments across generations. Expressing that connection through a football shirt can turn a memorable season or historic match into part of a personal collection. When choosing a first cosplay outfit, it is worth considering how details related to cosplay

Apple silicon Mac에서 Node.js 셋업

Node.js Featured

Apple silicon Mac에서 Node.js 셋업

현재, Node.js 가 Apple silicon을 지원하는 최소 버전이 15.5 이라, 그 이상을 설치하고 사용하면 놀라운 성능을 누릴 수 있습니다. 평소 즐겨 셋팅하던 homebrew는 최근 16으로 올라갔고, 그걸로 대부분 빌드가 잘 되는 걸 확인했지만, node-sass 처럼 버전 숫자에 민감한 패키지를 사용할 경우에 빌드가 실패했습니다. Across leagues and international tournaments,

Getting started: GitHub Package Registry

Configurations Featured

Getting started: GitHub Package Registry

기존의 좋은 포스팅을 기반으로, 참여했었던 프로젝트에서 적용한 부분을 기록합니다. 사전 설정 Github Personal access token 발급 1. 발급 URL(private packages가 속한 조직에 접근 권한이 있는 계정으로 접속): https://github.com/settings/tokens 2. write:packages, read:packages에 체크하고(repo는 기본 scope) 생성 3. 각 개발자는 자신의 계정으로 발급된 토큰으로

Using web workers in CRA

Using web workers in CRA

이제 더이상 Create-react-app 에서 웹워커 지원 안해요 라는 말은 없는 것으로. 1. Install CRA $ npx create-react-app hello-worker-with-cra ... $ cd hello-worker-with-cra 2. Install webpack worker plugin with react-app-rewired $ yarn add --dev react-app-rewired worker-plugin ... { ... "scripts": { ... "start": "react-app-rewired start", "build": "react-app-rewired build", "test&