👉 프론트엔드 어머 이건 봐야해!

프론트엔드에서 흥미롭거나 읽을만한 아티클 및 공식문서 링크를 모아두는 장소

IT & FE 인사이트

• 스타트업 스토리 플랫폼: 플래텀
• GeekNews - 개발/기술/스타트업 뉴스 서비스
• Daily DevBlog 이메일 구독
• Naver FE News 이메일 구독
• Korea FE Article 이메일 구독
• JavaScript Weekly 이메일 구독
• 디스콰이엇
• 요즘 IT
• 커리어리
• daily.dev
• web.dev
• Velog
• FE News

💻 국내 기업 기술 블로그

• 네이버 D2
• 카카오
• 카카오 페이
• 카카오 엔터테인먼트
• 카카오 스타일
• 라인
• 우아한 형제들
• 토스
• 당근마켓
• 직방
• 뱅크샐러드
• NHN
• 하이퍼커넥트

React & Next.js

• 카카오 페이 - React Query와 함께 Concurrent UI Pattern을 도입하는 방법
• 우아한 형제들 - 만들어 가며 알아보는 React: React는 왜 성공했나
• React 공식 문서 - React Labs: 우리가 작업 중인것 - 2022년 6월
  • 번역본
• 카카오 페이 - React 18: 리액트 서버 컴포넌트 준비하기
• 카카오 페이 - 무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요?
• 카카오 엔터테인먼트 - 합성 컴포넌트로 재사용성 극대화하기
• 토스 - 조금만 신경써서 초기 렌더링 빠르게 하기(feat. JAM Stack)
• 카카오 엔터테인먼트 - 합성 컴포넌트로 재사용성 극대화하기
• 카카오 엔터테인먼트 - MSW를 활용하는 Front-End 통합테스트
• When to useMemo and useCallback
• 네이버 - 모던 프론트엔드 프로젝트 구성 기법 - 모노레포 개념 편
• 네이버 - 모던 프론트엔드 프로젝트 구성 기법 - 모노레포 도구 편
• 라인 - 개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기
• 라인 - Turborepo로 모노레포 개발 경험 향상하기
• 우아한 형제들 - Yarn berry workspace를 활용한 프론트엔드 모노레포 구축기
• 카카오 엔터테인먼트 - React 이벤트와 브라우저 이벤트
• [번역] 우리가 Next.js로 리액트 로딩 시간을 70% 개선한 방법
• (번역) 우리가 CSS-in-JS와 헤어지는 이유
• (번역) Next.js 작동 방식
• 카카오 엔터테인먼트 - React의 Error Boundary를 이용하여 효과적으로 에러 처리하기
• Index as a key is an anti-pattern (키로서의 인덱스는 안티 패턴입니다.)
• ReactJS: Props vs. State
• Use a Render Prop!
• (번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변
• (번역) Concurrent 리액트에 대해 알아야 할 모든 것(그리고 Suspense에 대해서 약간)
• (번역) Next.js의 app 디렉터리 아키텍처 이해하기
• (번역) 기능 분할 설계 - 최고의 프런트엔드 아키텍처
• FSD(feature-sliced.design)

CI/CD

• 뱅크셀러드 - 뱅크샐러드 Web chapter에서 GitHub Action 기반의 CI 속도를 개선한 방법

함수형

• (번역) 어쨌든 함수형 프로그래밍의 장점은 뭔가요?
• 모닥불 | EP.2 함수형 프로그래밍, 프론트엔드 개발에 진짜 도움 될까?

JavaScript & TypeScript

• 카카오 엔터테인먼트 - 자바스크립트의 새로운 기능들
• 토스 - CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field
• (번역) 자바스크립트 웹 프레임워크의 새로운 흐름
• 우아한 형제들 - 우리 팀의 우아한 타입스크립트 컨벤션 정하기 여정
• 카카오 엔터테인먼트 - Typescript - Union Type, Intersection Type, Etc.
• (번역)더 좋은 타입스크립트 프로그래머로 만드는 11가지 팁
• 똑똑하게 브라우저 Polyfill 관리하기
• [번역] 자바스크립트 가비지 컬렉터 실험
• [번역] 코드 품질을 높여주는 고급 자바스크립트 함수
• [번역] ES2023에서 도입된 자바스크립트의 새로운 배열 복사 메서드

CSS

• (번역) 더 나은 CSS 트랜지션 및 애니매이션을 위한 10가지 팁

테스트

• [번역] 프런트엔드 단위 테스트 모범 사례
• (번역) 내가 작성한 Jest 테스트는 왜 이렇게 느릴까?
• 모닥불 | EP.3 프론트엔드 개발에서 테스트 자동화, 꼭 해야 할까?

최적화

• 토스 - JavaScript Bundle Diet

개발 문화

• 우아한 형제들 - 공통시스템개발팀 코드 리뷰 문화 개선 이야기
• 라인 - 효과적인 코드 리뷰를 위해서
• 뱅크샐러드 - 코드 리뷰 in 뱅크샐러드 개발 문화
• Feature Toggles (aka Feature Flags) - martinfowler

클린코드

• 모닥불 | EP.1 토스에서 말하는 “가독성 좋은 코드” 란 무엇일까?

기타

• 카카오 엔터테인먼트 - SEO 개선 초심자 가이드
• (번역) 2023년 웹 개발 트렌드 10가지

유튜브

• FEConf
• toss
• 우아한형제들
• if kakao

컨퍼런스

• 인프콘 2022
  • 나도 내 코드의 문제를 찾고 싶다고요?! - 테스트할 때 기억할 7가지
  • Rust 크로스 플랫폼 프로그래밍
  • 서버비 0원, 클라우드 큐 도입으로 해냈습니다!
  • 개발자의 셀프 브랜딩
  • 언어와 함께 성장하기 - Node.js와 10년, v0.8부터 v16까지
  • 성공하는 스터디를 만드는 10가지 방법 - 인출 위주의 스터디 여정기
  • FE 개발자도 할 수 있다! RESTful API 개발 (with Firebase, GCP)
  • 운영 중인 Vue.js 웹 서비스를 타입스크립트로 다시 쓰기
  • 우리는 오늘도 성장합니다 - 인프랩 프런트엔드 업무 프로세스 변천사
  • Vanilla JS와 함께 지속가능한 프런트엔드 코드 만들기 - 인프런 수강 바구니 개선기
• FEConf 2022
  • Track A
  • Track B
• if(kakao)dev 2022 front-end session
• Naver Deview 2023
  • 하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive
  • 눈으로 보며 듣는 음성 기록, 클로바노트 서비스의 웹 기술 톺아보기
  • UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기
  • 중요한 건 꺾이지 않는 마음: 스마트에디터의 도전
  • GraphQL 잘 쓰고 계신가요? (Production-ready GraphQL)
  • SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략
  • 자바스크립트 화이트박스 암호와 크롬 라인 메신저의 보안 강화
  • 웨일 브라우저 오픈 소스 생존기
  • 그 여자 APP, 그 남자 SDK: Kotlin Multiplatform 적용기
• Toss Slash 2023
  • Server-driven UI로 토스의 마지막 어드민 만들기
  • 퍼널: 쏟아지는 페이지 한 방에 관리하기
  • 달리는 토스 앱에 React Native 엔진 더하기
• 인프콘 2023
  • 당신의 웹페이지는 몇 점 인가요?: 라이트 하우스를 통한 프런트 성능개선
  • Turborepo, Next.js, TypeScript를 이용한 프론트엔드 모노레포 적용기
  • 안타깝게도 오늘의 TDD는 실패한 것 같군요. 내일은 가능할지도...?
  • Hello, Interactive Developer: WebGL로 아트코딩 하기
  • 주니어 프론트엔드 엔지니어의 성과 및 역량 향상을 위한 실전 가이드
  • 웹뷰를 이용해 웹 서비스를 앱으로 빠르게 구현하기
  • SSR의 기쁨과 슬픔: 렌더링의 변화의 흐름을 통해 알아보는 SSR과 Streaming SSR
  • 왜 구글 시니어 개발자는 코딩을 안할까?
• FEConf 2023
• WOOWACON 2023
• Next.js Conf 2023 with next.js 14
• React.js Conf 2024
• Vercel Ship 2024
• 인프콘 2024
• FEConf 2024
• Toss slash24
• daangn tech meetup 2024
  • 당근밋업 자료
• woowacon 2024
• if kakao 2024
• DAN 24(네이버 컨퍼런스)
  • WhaleOS: 선생님 부터 로봇 개발자 까지, 더불어 만들고 살아 숨쉬는 운영체계
  • 데이터 기반으로 지속적 성장이 가능한 네이버 검색 FE 시스템 구축하기
  • 네이버 검색에서 웹 성능 관리하는 방법: web-vitals 수집부터 개선까지
  • 여러분의 웹서비스에는 꼭 필요한 것만 있나요? 번들사이즈 최소화를 통한 웹 성능 개선
• ViteConf 2024
  • Evan You | Keynote: Vite and the Future of JavaScript Tooling | ViteConf 2024