DEV/FE

[why] 프론트엔드 개발자로써 알아야 되는 부분들

krokerdile 2024. 10. 26. 00:26
728x90

개요

현대 웹 개발에서는 수많은 기술과 도구들이 끊임없이 진화하고 있습니다. 이러한 환경에서 개발자들은 단순히 사용법을 익히는 것을 넘어, 각 기술의 존재 이유와 작동 원리를 깊이 이해할 필요가 있습니다. 이 시리즈는 프론트엔드 개발의 핵심 영역들에 대해서 학습하고 정리해보려고 합니다.

시리즈의 목적

  • 프론트엔드 기술의 근본적인 원리와 배경 이해
  • 기술 선택과 의사결정에 대한 깊이 있는 통찰 제공
  • 발전하는 웹 생태계에 대한 포괄적인 이해 도모
  • 실무에서 마주치는 문제들에 대한 해결 능력 향상

주제 목록

1. 자바스크립트의 핵심 개념

  • undefined는 어떤 목적으로 탄생했을까?
  • 자바스크립트가 스크립트 언어로 설계된 이유는?
  • 객체 기반 언어로서의 자바스크립트의 특징은?
  • 싱글 스레드 동작 방식의 장단점은?
  • 호이스팅은 어떤 원리로 동작하는가?
  • 프로토타입 기반 상속의 장점은 무엇일까?
  • this가 다른 언어와 다르게 동작하는 이유는?
  • 비동기 처리 방식은 어떻게 발전해왔을까?

2. 브라우저와 런타임 환경

  • 런타임 에러 예방이 중요한 이유는?
  • 브라우저의 복잡한 렌더링 과정 이해하기
  • CORS 정책의 필요성과 해결 방안
  • 쿠키와 세션의 역할과 차이점
  • localStorage와 sessionStorage의 활용 전략
  • SPA가 선호되는 배경과 이유
  • 이벤트 루프의 동작 원리 탐구

3. 리액트 생태계의 진화

  • CRA에서 Vite로의 전환 배경
  • 함수형 컴포넌트가 선호되는 이유
  • React가 프론트엔드 시장을 지배하게 된 배경
  • Virtual DOM의 동작 원리와 이점
  • 단방향 데이터 흐름의 장점
  • 불변성이 React 성능에 미치는 영향
  • Hook의 등장 배경과 혁신성
  • 상태관리 라이브러리의 진화 과정
  • React Query가 가져온 변화

4. 개발 도구와 환경 구성

  • pnpm의 혁신적인 특징들
  • PM2를 통한 효율적인 프로세스 관리
  • 모노레포 아키텍처의 실전 적용
  • TypeScript 도입이 가져오는 이점
  • 번들러의 역할과 발전 과정
  • Next.js의 혁신적인 기능들
  • 프론트엔드 CI/CD 구축 전략
  • 코드 품질 관리의 베스트 프랙티스

5. CSS와 스타일링 전략

  • 제로 런타임 CSS-in-JS의 장점
  • CSS 모듈의 실용적 활용법
  • CSS 아키텍처 설계의 핵심 원칙
  • 효과적인 반응형 디자인 전략
  • CSS 전처리기의 실용적 활용
  • CSS 후처리기의 최적화 기법

6. 성능 최적화 전략

  • 웹 성능이 사용자 경험에 미치는 영향
  • 이미지 최적화의 다양한 기법
  • 메모이제이션 전략과 실제 효과
  • 레이지 로딩 구현의 모범 사례
  • 효율적인 캐싱 전략 수립
  • 코드 스플리팅의 실전 적용
  • 트리 쉐이킹을 통한 번들 최적화

7. 현대적 아키텍처와 설계

  • 컴포넌트 기반 개발의 이점
  • 마이크로프론트엔드 도입 전략
  • 서버리스 아키텍처의 활용 사례
  • JAMstack의 실용적 이점
  • 웹 컴포넌트의 현재와 미래
  • 다양한 상태관리 패턴 비교

8. 테스트와 품질 보증

  • 테스트 자동화의 실질적 이점
  • E2E 테스트 구현 전략
  • 효율적인 단위 테스트 작성법
  • 통합 테스트의 중요성과 구현
  • 효과적인 코드 리뷰 문화 만들기

9. 웹 표준과 접근성 향상

  • 웹 접근성이 비즈니스에 미치는 영향
  • 시맨틱 마크업의 실질적 이점
  • 크로스 브라우징 대응 전략
  • Progressive Enhancement 적용 사례
  • WCAG 가이드라인 실전 적용법

10. 보안과 인증 전략

  • CORS 정책 대응 전략
  • CSR과 SSR의 적절한 활용
  • JWT 기반 인증의 장단점
  • OAuth 인증 구현 가이드
  • XSS 공격 방어 전략
  • HTTPS 적용의 실질적 이점

무엇을 적을지 정리해보며

웹 개발 생태계는 계속해서 진화할 것이라고 생각합니다. 제가 당장 올해 초 Next.js 14를 사용한 게 얼마 전 같은데 벌써 15 버전에 대한 업데이트가 계속 나오고 있습니다. 생각나는 것들만 적어봤는데도 이렇게 주제가 다양하고 적을 것이 많다는 건, 그만큼 제가 알아갈 수 있는 내용이 많다는 것이고 동시에 무엇을 놓치고 있는지 확인도 되었던 것 같습니다.

프론트엔드 개발자로서 이 모든 변화를 따라가는 것은 때로는 부담스럽게 느껴질 수 있습니다. 하지만 이러한 변화 속에서도 변하지 않는 핵심 원리들이 있다는 것을 깨달았습니다. JavaScript의 기본 개념들, 브라우저의 작동 방식, 웹 표준과 같은 기초적인 지식들이 바로 그것입니다.

이 시리즈를 통해 정리하고 싶은 것은 단순히 새로운 기술들의 사용법이 아닙니다. 각 기술이 등장하게 된 배경, 해결하고자 했던 문제, 그리고 그 과정에서 배울 수 있는 교훈들입니다. 이러한 이해를 바탕으로 할 때, 새로운 기술이 등장하더라도 그것을 평가하고 적용하는 데 더 나은 판단을 할 수 있을 것이라 믿습니다.

앞으로의 계획:

  1. 매주 1-2개의 주제를 선정하여 깊이 있게 다루어볼 예정입니다.
  2. 실제 프로젝트에서 마주친 문제들과 연결지어 설명하려고 합니다.
  3. 가능한 한 코드 예제와 실제 사례를 포함하여 실용적인 내용을 전달하고자 합니다.
  4. 다른 개발자들의 경험과 의견도 참고하여 다양한 관점을 담아내려고 합니다.

이 여정이 저 혼자만의 학습이 아닌, 다른 개발자들과 함께 성장할 수 있는 기회가 되길 바랍니다. 각 주제에 대해 여러분들의 의견과 경험도 자유롭게 공유해주시면 감사하겠습니다.

프론트엔드 개발의 끝은 어디일까요? 아마도 끝은 없을 것입니다. 하지만 그것이 이 분야의 매력이자 도전이 아닐까 생각합니다.

728x90
저작자표시