본문 바로가기

전체 글

 (73)
[리액트] 왜 서버컴포넌트에만 async 키워드를 붙일 수 있을까? (Next.js) 서버 컴포넌트에서 async 키워드를 사용할 수 있는 이유는 실행 환경과 목적의 차이 때문이다. 클라이언트 컴포넌트의 실행 환경은 브라우저이며, 목적은 "실시간 DOM"조작이다.// 브라우저에서의 실제 처리 과정function renderClientComponent() { const Component = () => { return Hello; // 즉시 반환 필요 }; // 브라우저에서 실시간으로 DOM 업데이트 const element = Component(); // 동기적 실행 const domNode = ReactDOM.createRoot(container); domNode.render(element); // 즉시 DOM 반영} 반면, 서버 컴포넌트의 실행 환경은 서버이며, 목적..
[프론트엔드] 접근성을 고려한 컴포넌트 설계 (Dropdown) 최근 드롭다운 컴포넌트를 구현하면서 그동안 소홀했던 접근성을 더 깊이 고려해보게 되었습니다. 1. 키보드 네비게이션 구현드롭다운에서 지원해야 할 핵심 키보드 이벤트는 Enter, ArrowUp, ArrowDown, Escape 정도라고 생각합니다.이 중에서 preventDefault()가 필요한 키들이 있는데, 이를 처리하지 않으면 기본 동작과 드롭다운 이벤트가 함께 발생하여 의도치 않은 부작용을 초래할 수 있습니다.ArrowDown/Up 기본 동작: 페이지 스크롤Enter 기본 동작: 폼 제출 또는 기본 버튼 동작이런 부작용을 막기 위해 기본 동작을 차단하고, 대신 드롭다운만의 고유한 동작을 구현했습니다.구현 시에는 focusedIdx라는 상태를 두어 현재 포커스된 옵션을 추적하도록 했습니다: cons..
[프론트엔드] Next.js(15)에 MSW 도입하기 최근 Next.js 15 버전에서 MSW(Mock Service Worker)의 적용 방법에 대해 깊이 고민하였습니다.이 글에서 Next.js 환경에서 MSW를 도입하는 과정에서 겪었던 트러블 슈팅 경험을 공유하고자 합니다. 그냥 설치하고 깔면 되는거 아님?안타깝게도 그렇지 않았습니다.MSW는 기본적으로 브라우저의 Service Worker API를 사용하는데, 이 덕분에 네트워크 요청을 가로채서 개발할때 네트워크 탭을 열어 로그를 확인해볼 수 있는 것입니다.하지만 서버(Node.js) 환경과 클라이언트(브라우저)환경이 혼재하는 Next.js에서는 이게 병목으로 작용했습니다. Next.js는 클라이언트/서버 환경이 혼재되어 있기 때문에 별도 분리 필요일반적으로 js 파일을 만들고 아래와 같이 setU..
[프론트엔드] AWS에 Next.js 앱을 배포하기 위한 옵션들 1. AWS AmplifyAmplify는 서버리스 아키텍처 기반의 PaaS 형태로, 애플리케이션을 손쉽게 배포하고 운영할 수 있게 도와주는 도구이다.Next.js나 Nuxt.js와 같은 SSR 프레임워크는 물론, 푸시 알림 등 서버 기능이 포함된 모바일 앱도 지원한다. Vercel처럼 "딸깍"으로 배포할 수 있다는 점에서 접근성과 편의성이 뛰어나다.AWS Lambda 함수에 기반하며, Vercel에 비해 CLI 명령어를 통해 백엔드 리소스 생성, 권한 설정, 환경 구성 등 자동화와 제어가 가능해 Vercel보다 범용성과 통합성이 높다고 느꼈다. 2. AWS ECS 함께 프로젝트를 진행하는 현업 백엔드 개발자분이 추천해주신 옵션이다.최근에는 애플리케이션 실행에 필요한 코드와 설정을 도커 이미지로 묶어 컨테..
[프론트엔드] 웹 접근성 및 UX 1편 - Button 컴포넌트 웹 표준 vs 웹 접근성 웹 표준은 다양한 브라우저와 플랫폼에서 웹사이트가 동일하게 동작하도록 기술적 규칙을 정한 것이고, 웹 접근성은 장애인이나 고령자 등 모든 사용자가 웹사이트에 동등하게 접근할 수 있도록 하는 것이다.즉, 웹 표준은 ‘기술적 일관성’에 초점을 두고, 웹 접근성은 ‘사용자 모두의 접근 가능성’에 초점을 둔다.따라서 가능한 많은 사용자들의 경험 향상을 위해 웹 접근성을 고려하는 것은 프로페셔널한 프론트엔드 개발자로 성장하기 위해 중요한 요소 중 하나라고 볼 수 있다. 버튼 컴포넌트의 접근성 개선일반적으로 버튼 컴포넌트를 개발할 때, 접근성 측면에서 가장 먼저 고려해야 할 건 키보드 조작이 가능해야 한다는 것이다.즉, Tab 키로 포커스가 이동되고, Enter나 Space 키로 버튼이 눌..
[프론트엔드] 워터폴 현상 & 문제가 되는 이유 이전에 면접에서 네트워크 워터폴 현상에 대해서 알고 있냐는 질문을 받은적이 있다.이 글에서 워터폴에 대해 프론트엔드 개발의 관점에서 이해한 내용을 정리해보고, 느낀점에 대해 서술해보고자 한다. 워터폴 현상 (Waterfall problem) (feat. 서버 컴포넌트)이름처럼 워터폴 현상은 여러 비동기 작업(fetch 등)이 순차적으로, 연쇄적으로 실행되면서 성능 병목이 발생하는 상황을 말한다. 예를 들어 다음과 같은 코드는 각 요청이 이전 요청에 의존해 순차적으로 실행된다.// 비동기 요청들이 의존적으로 순차적으로 실행되어, 앞 요청이 끝나야 다음 요청이 가능해지는 상황const user = await getUser();const posts = await getPosts(user.id);const co..
[프론트엔드] 왜 프론트엔드에서는 MVC를 잘 안 쓸까? 백엔드 개발을 공부하다보면 거의 필수적으로 공부하게 되고, 습관적으로 적용하게 되는 디자인 패턴이 있는데 바로 MVC이다.오늘은 현대적인 프론트엔드 개발 환경에서 MVC가 잘 활용되지 않는 이유에 대해 알아보고자 한다. MVC란우선 MVC는 Model, View, Controller라는 세가지 계층으로 프로그램을 구성하는 디자인 패턴이다.백엔드를 기준으로 한다면 Model은 실질적인 데이터 변화 (ex. DB 입출력 등)을 반영하는 코드 모음, View는 사용자의 요청, 응답을 반환하거나 Controller에 전달하는 코드 모음, 그리고 Controller는 중간에서 응답, 요청에 따른 분기처리와 에러처리, 그리고 Model을 갱신하도록 요청을 보내는 코드 모음이라고 볼 수 있을 것이다. 현대적인 프론트..
[프론트엔드] 리액트는 어쩌다 모든걸 함수로 작성하게 되었을까? 리액트와 자바스크립트를 이용한 프로그래밍에 익숙한 프론트엔드 개발자들은 거의 모든걸 함수로 작성하는 방식에 익숙할 것이다.그러다 문득, 어째서 현대적인 프론트엔드 개발에서는 어쩌다 모든 걸 함수로 작성하는 형태로 프로그래밍을 진행하게 되었을까?에 대한 의문이 생겼습니다. 오늘은 그것에 대해 공부하고 느낀바를 정리해보고자 한다. 함수형 프로그래밍이란우선, 주제에 대해 이해하기 위해 함수형 프로그래밍이 뭔지 정의하고 넘어가야한다고 생각했다.필자가 이해한 함수형 프로그래밍이란 말 그대로 함수로 모든 프로그램 코드를 작성하는 패러다임이라는 것이다.그리고 단순히 함수를 많이 사용한다기보다는 전역 변수 사용을 최소화하고, 가능한 외부 상태를 변경하지 않는 순수 함수만을 최대한 개발, 활용하는 방식으로 프로그램을 예..

티스토리툴바