프론트엔드
1.토스 Frontend Fundamentals 모의고사 1회 참여 후기
최근 "확장성 있는 프론트엔드 구조", "응집성과 모듈성", "관심사 분리", "추상화" 등 실제 코드에 적용하기 어려운 주제들에 대해 고민하던 중, LinkedIn을 통해 토스 Frontend Fundamentals 모의고사를 알게 되었다. 토스 과제를 직접 풀어보고
2.DOM을 숨기는 기술, Shadow DOM
지난 글에서 살펴본 Cutom Elements의 문제점은 다음과 같았다. 내부에 있는 div, button 같은 요소들이 외부 CSS 선택자에 그대로 잡힌다.
3.오픈소스 기여, 생각보다 어렵지 않다
우아한테크코스 7기로 활동하며, 오픈소스에 기여하는 크루들을 보며 나도 한 번 도전해보고 싶다는 생각을 하고 당시에 처음으로 오픈소스 기여를 시작하게 되었다.최근에는 토스에서 운영하는 리액트 기반 라이브러리인 react-simplikit의 공식 문서를 읽어보게 되었다.
4.Webpack 설정 구조와 Production 최적화
React 프로젝트를 일정 규모 이상으로 운영하다 보면 Webpack 설정을 하나의 파일에 몰아넣기 어렵다. 개발 환경과 배포 환경은 목적이 완전히 다르기 때문이다.따라서 프로젝트에서 Webpack 설정을 어떻게 구조화했는지와 각 파일이 어떤 역할을 하는지 이 글을 통
5.이미지 리사이징과 WebP 포맷 변환
서비스 운영 초기에는 데이터의 수가 적기때문에, LCP가 낮게 나왔지만 데이터가 늘어나면서 메인페이지의 체감 속도가 점점 느려졌고, Lighthouse 점수도 기대 이하로 나오면서 이미지 최적화를 고려하게 되었다.Lighthouse를 통해 문제를 분석해보니, 이미지 전
6.CSR에서 Lambda@Edge로 OG 태그 동적 생성하기
웹 사이트의 링크를 친구에게 공유해 본 경험이 있으실 겁니다. 보통 메신저나 SNS에 링크를 붙여 넣으면 해당 페이지의 제목과 이미지가 미리보기 형태로 표시됩니다.하지만 React 기반의 SPA(Single Page Application)로 만든 웹사이트에서는 예상과
7.GitHub Actions로 프론트엔드 CI 자동화하기
CI는 Continuous Integration, 즉 지속적 통합을 의미합니다. 쉽게 말하면 코드를 푸시하거나 PR을 열었을 때 자동으로 정해진 작업을 실행해주는 파이프라인입니다.빌드가 되는지, 테스트를 통과하는지, 린트 규칙을 지키는지 등을 사람이 일일이 확인하지 않
8.AWS CodePipeline으로 프론트엔드 CD 자동화하기
이전 글에서 CI에 대해 살펴봤으니, 이번 글에서는 CD에 대해 다뤄보겠습니다.CD는 크게 위와 같이 구분 할 수 있는데, 프로젝트에서는 Continuous Deployment 방식을 택했습니다. main 브랜치에 머지되면, 그 이후로는 별도의 작업 없이 사용자에게 새
9.토스 Frontend Fundamentals 모의고사 2회 참여 후기
모의고사 1회에서 인터페이스 우선 설계, 추상화 레벨, 전역 상태 기준 등 실질적인 인사이트를 얻었어서, 2회에도 자연스럽게 신청하게 되었습니다. 특히 이번에는 저번에 강의해주신 한재엽님과 더불어 문동욱님의 이야기를 직접 들을 수 있다는 점이 더욱 기대되었습니다.코드를
10.웹 접근성을 위한 WAI-ARIA
WAI-ARIA란 무엇인가요? WAI는 W3C에서 주도하는 웹 접근성 국제 표준 활동입니다. ARIA는 그 결과물 중 하나로, HTML만으로 표현하기 어려운 의미와 상태를 보완하기 위한 속성 집합입니다. 한 마디로 정리하면, WAI-ARIA는 "HTML만으로 부족한
11.접근성을 고려한 모달 구현
스크린리더가 어떻게 동작하는지 확인하고 싶어서 여러 항공사 사이트에서 스크린리더를 사용해 본 적이 있습니다. 대한항공 홈페이지는 모달이 열리면 포커스가 모달 안으로 이동하고, 스크린리더가 제목을 읽어줬습니다. 모달이 열렸다는 사실을 소리만으로도 바로 알 수 있었습니다.
12.화면에 보이는 만큼만 그리는 가상 리스트
웹에서 많은 데이터를 보여줄 때 가장 단순한 방법은 모든 데이터를 한 번에 DOM에 렌더링하는 것입니다. 코드는 간단하고 직관적이지만, 데이터가 늘어날수록 문제가 드러납니다. 브라우저는 DOM 노드 하나하나에 대해 레이아웃 계산, 스타일 적용, 실제 픽셀로의 변환을
13.Custom Elements로 커스텀 태그 만들기
HTML을 사용하다보면 <div>나 <button> 같은 기본 HTML태그가 아닌커스텀 태그를 사용할 수 없는가에 대해 의문이 생긴다.Custom Elements를 활용하면 아래와 같은 커스텀 태그를 만들 수 있다.이를 통해 의미 있는 이름으로 태그를 사용
14.URL 필터 변경 시 목록이 깜빡이는 문제 해결
프로젝트 목록이나 아티클 목록에서 정렬 조건을 바꿀 때 화면이 잠깐 하얗게 비는 문제가 있었습니다. 예를 들어 최신순에서 조회순으로 바꾸거나, 기술 스택 필터를 선택하면 목록이 잠깐 사라졌다가 다시 나타났습니다. 데이터는 정상적으로 다시 받아오고 있었지만, 사용자
15.Next.js App Router에서 15분마다 로그인 풀리던 문제 해결하기
로그인한 지 15분쯤 지나면 세션이 풀린 것처럼 보이는 문제가 있었습니다. 이 프로젝트의 access token 유효 시간은 15분이었기 때문에,처음에는 "세션 시간을 너무 짧게 잡은 건가?"라고 생각했습니다. 그런데 원인은 15분이라는 숫자 자체가 아니었습니다.