React Conf 2021 Recap
2021년 React Conf에서는 React 18의 출시와 동시 기능 채택을 포함한 다중 플랫폼 비전을 공유했습니다. 이 회의는 React 생태계의 미래 방향성을 제시하며, 개발자들에게 중요한 변화와 기회를 제공합니다.
#react-conf#react-18#concurrent-features#multi-platform-vision
Frontend
React, Next.js, UI 구현과 브라우저 경험 개선 사례를 정리합니다.
현재 18개의 발행 글이 이 주제에 속해 있습니다.
타입스크립트와 리액트를 활용한 실시간 전자 회로 디자인 가이드
이 글에서는 타입스크립트와 리액트를 사용하여 실제 전자 회로를 구현하는 방법을 심층적으로 다룹니다. 실무적용 사례, 흔한 함정 및 최적화 팁을 포함하여, 개발자들이 실시간 트렌드를 반영할 수 있도록 돕습니다. 또한, 실무 체크리스트와 주의사항을 통해 개발 과정에서의 실수를 줄이고, 코드 예시를 통해 이해를 돕습니다.
#타입스크립트#리액트#전자회로#웹개발
Create React App의 서비스 종료
Create React App이 새로운 앱에 대해 더 이상 지원되지 않으며, 기존 앱은 Vite, Parcel, RSBuild와 같은 빌드 도구로 마이그레이션할 것을 권장합니다. 또한, 프로젝트에 적합하지 않은 경우나 React를 직접 배우고 싶은 경우를 위한 문서도 제공됩니다.
#create-react-app#migration#vite#parcel
Next.js 16에서 Server Actions 사용 시 보안 체크리스트
Next.js 16에서 Server Actions를 사용할 때 보안을 강화하기 위한 체크리스트를 제공합니다. 이 가이드는 실무 적용 사례와 함께 보안 위협을 줄이는 방법을 심층적으로 다룹니다.
#nextjs#server-actions#보안#웹개발
Quickpick UI: React와 Vanilla JavaScript를 위한 타입 필터 피커 구현 가이드
이 글에서는 Quickpick UI를 활용하여 React와 Vanilla JavaScript에서 타입 필터 피커를 구현하는 방법을 심층적으로 설명합니다. 실무 적용 사례, 흔한 함정, 최적화 팁 등을 포함하여 개발자들이 쉽게 이해하고 활용할 수 있도록 구성했습니다.
#quickpick-ui#react#vanilla-javascript#ui-design
CSS로 구현하는 시각적 착시 효과: 실무 가이드
CSS를 활용하여 웹 페이지에서 시각적 착시 효과를 구현하는 방법을 심층적으로 탐구합니다. 기본 개념부터 실무 적용, 흔한 함정과 주의사항, 최적화 팁까지 다룹니다.
#css#optical-illusions#web-design#frontend
AWS에 MERN 스택 노트 앱 배포하기
이 튜토리얼에서는 AWS를 이용해 MERN 스택 노트 앱을 배포하는 과정을 다룹니다. EC2, RDS, S3를 활용하여 백엔드와 프론트엔드를 구성하며, AWS의 핵심 서비스를 직접 다뤄봅니다.
#aws#mern-stack#ec2#s3
CSS 상대 색상으로 테마 애니메이션 구현
CSS 상대 색상 값을 활용하여 애니메이션과 그래픽의 테마를 간소화하고 제어할 수 있는 방법을 소개한다. OKLCH 색상 공간을 사용하여 색상 팔레트를 시스템화하고, 이를 통해 애니메이션을 쉽게 구현할 수 있다.
#css-animations#relative-color#oklch#design-system
Bluetooth와 Wi-Fi를 활용한 인터넷 연결 유지: Briar 프로젝트의 기술적 접근
Briar 프로젝트는 Bluetooth와 Wi-Fi를 활용하여 안정적인 인터넷 연결을 유지하는 방법을 탐구합니다. 이 글에서는 기술적 접근 방식과 함께 실무에서 고려해야 할 요소들을 체크리스트 형식으로 정리합니다.
#bluetooth#wifi#internet-connection#briar-project
TinyMCE로 리치 텍스트 편집기 구현하기
TinyMCE는 React, Vue, Angular에서 사용할 수 있는 세계 최고의 자바스크립트 리치 텍스트 편집기 라이브러리입니다. 이 글에서는 TinyMCE를 활용한 리치 텍스트 편집기를 실무에서 적용하는 방법을 안내합니다.
#tinymce#리치-텍스트-편집기#자바스크립트#프론트엔드
i18next와 react-i18next를 활용한 국제화 구현 가이드
React 애플리케이션에서 i18next와 react-i18next를 사용하여 국제화를 효과적으로 구현하는 방법을 알아보겠습니다.
#i18next#react-i18next#국제화#프론트엔드
저렴한 비용으로 운영하는 RAG 시스템 구축 가이드
이번 글에서는 월 $5에 운영할 수 있는 RAG(리트리벌-어그리게이션-생성) 시스템을 구축하는 방법에 대해 설명합니다. Cloudflare의 엣지 컴퓨팅을 활용하여 비용 효율적으로 실시간 트렌드를 반영하는 방법을 알아보겠습니다.
#rag-system#cloudflare#비용절감#실시간트렌드
freeCodeCamp 커뮤니티의 크리스마스 선물: 파이썬, SQL, 스페인어 등을 배워보세요
2025년 freeCodeCamp 커뮤니티는 여러 교육 인증 프로그램을 출시하며 한 해를 마무리합니다. 새로운 프로그래밍 및 언어 과정이 포함되어 있으며, 다양한 언어로의 번역 작업도 진행 중입니다.
#freecodecamp#프로그래밍#언어학습#교육
웹에서 원하는 기능에 투표하세요
WebDX 커뮤니티 그룹이 웹 기능에 대한 직접적인 투표를 시작합니다. 사용자는 원하는 기능을 업보팅하여 주요 브라우저 간의 상호 운용성을 높일 수 있습니다.
#webdx#browser-support#feature-voting#developer-signals
New to the web platform in December
2025년 12월에 안정적인 웹 브라우저에서 여러 새로운 기능이 출시되었습니다. Firefox, Chrome, Safari에서 각각 새로운 CSS 속성과 API가 추가되어 웹 개발자들에게 유용한 도구가 제공됩니다.
#css#web-development#browser-features#firefox
LCP와 INP가 이제 Baseline Newly available로 제공됨
Safari 26.2의 출시로 LCP와 INP가 모든 주요 브라우저에서 지원되며, 웹 성능 측정이 향상되었습니다. 이는 웹 개발자와 비즈니스 이해관계자들에게 중요한 웹 페이지 경험을 측정하는 표준이 됩니다.
#web-vitals#lcp#inp#interop-2025
사용자에게 목소리를 주는 가상 페르소나
AI를 활용하여 사용자 페르소나를 효율적으로 생성하고, 이를 조직 내 다양한 팀이 실시간으로 활용할 수 있는 방법을 제안합니다. 연구 결과를 중앙 집중식 저장소에 통합하고, AI가 이를 기반으로 사용자 의견을 제공함으로써 의사결정 과정에서 사용자 경험을 개선할 수 있습니다.
#ai#user-research#virtual-personas#ux-design
Next.js 15 주요 변화와 마이그레이션 체크리스트
Next.js 15로의 마이그레이션, 이제 걱정하지 마세요! 주요 변화와 체크리스트를 통해 쉽게 준비하세요.
#Next.js#프론트엔드#웹 개발#마이그레이션