프론트엔드 아티클

필터 0

선택된 필터 없음

· 2025년 3월 25일

Chrome 확장 프로그램 개발 가이드

Chrome 확장 프로그램의 활용 사례와 장점을 소개하고, Manifest V3 기반 개발 구조를 설명했습니다. Content Script, Service Worker, Shadow DOM을 활용한 구현 방식도 정리했습니다.

토스의 디자인 편집기 ‘데우스’, 이렇게 만들었어요! | EP.11

토스가 자체 디자인 편집기 데우스(Deus)를 만든 이유와 개발 과정을 소개했습니다. 상태 관리로 MobX를 선택한 배경과 기술적 도전도 함께 다뤘습니다.

여기어때 시스템 아이콘 개선기

기존 시스템 아이콘의 스타일 불일치와 가독성 문제를 개선한 과정을 공유했습니다. 브랜드 아이덴티티를 반영한 그래픽 규칙으로 일관성과 사용성을 높였습니다.

Android SharedFlow, StateFlow 도입기

Android 내비게이션 엔진 도입 과정에서 Kotlin의 SharedFlow와 StateFlow를 적용한 사례를 소개했습니다. 발췌만으로는 구체적인 문제 해결 내용은 충분히 확인되지 않았습니다.

Next.js Server Action과 프론트엔드 보안

Next.js Server Action의 내부 동작과 보안 주의점을 설명했습니다. 편의성 뒤에 있는 인증·인가, 입력 검증, 인젝션 방지 책임을 강조했습니다.

Next.js Server Action과 프론트엔드 보안

Next.js Server Action의 동작 방식과 기본 보안 메커니즘을 설명했습니다. 편의성 뒤에 숨은 인증·인가, 입력 검증, SSRF 등 보안 책임을 강조했습니다.

Next.js Server Action과 프론트엔드 보안

Next.js Server Action의 동작 방식과 보안 주의를 정리했습니다. 편의성만 믿지 말고 입력 검증, 인증/인가, 주입 공격 대응을 함께 챙겨야 합니다.

#Next.js#Server Action

81005분

테스트는 어떻게 좋은 코드를 만드는가(feat. 험블 객체 패턴)

· 2025년 3월 19일

프론트엔드

테스트는 어떻게 좋은 코드를 만드는가(feat. 험블 객체 패턴)

테스트 코드가 어려워지는 원인을 고수준 목과 얽힌 설계 문제로 설명했습니다. 험블 객체 패턴과 인터페이스로 테스트하기 쉬운 구조를 만드는 방법을 다뤘습니다.

코드 품질 개선 기법 6편: 마구 자를 것인가 반듯하게 자를 것인가

줄 바꿈은 코드를 의미 단위로 나눌 때 더 읽기 쉬워집니다. 메서드 체인, 폴백 체인, 엘비스 리턴은 의미가 크게 갈리는 지점에서 끊는 것이 좋습니다.

ESBuild를 위한 HMR, 직접 만들기

프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.

자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기

토스증권 PC의 그리드 레이아웃을 이진 트리 자료구조로 직접 구현한 사례를 소개했습니다. 복잡한 요구사항을 데이터 구조와 컴포넌트 분리로 해결하고 저장·복구까지 구현했습니다.

2024 Frontend Global Workshop 참석 후기

LY Corporation Front-end Global Workshop 2024 참석 후기를 공유했습니다. 기술 세션과 네트워킹을 함께 설계해 교류를 넓힌 점이 인상적이었습니다.

#프런트엔드#세미나

137005분