COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-08

목차

  1. 타입스크립트(TypeScript)와 최근 트렌드
  2. JSDoc vs TSDoc 및 문서 자동화
  3. tsconfig.json 설정, noEmit과 빌드 도구 관계
  4. 클래스(Class) vs 객체(Object)의 메모리 및 관리
  5. React 상태 관리와 ref 사용 시 주의점
  6. CSS 자동완성과 스타일링 라이브러리 비교 (Tailwind, Vanilla Extract, Emotion 등)
  7. React 프로젝트 설계 참고 오픈소스 및 보일러플레이트
  8. 프론트엔드 개발자의 업무 환경과 심리적 어려움
  9. 프로젝트 레이아웃 CSS 문제 사례와 해결법
  10. 서버리스 DB 대안과 프론트엔드 개발 관련 최신 도구

1. 타입스크립트(TypeScript)와 최근 트렌드

  • 최근 프론트엔드 기술 스택이 다양해지면서 숙련도가 요구되는 기술들이 많아짐.
  • 일부에서 타입스크립트를 없애려는 움직임도 있으나, 국내에서는 여전히 TS 사용이 대세임.
  • 해외에서는 자바스크립트에 공식 타입 지원 도입 등으로 TS의 입지 변화 가능성 논의 중.
  • TS는 처음엔 까다롭고 귀찮을 수 있으나, 안정성과 자동완성 덕분에 쓰임새가 크다고 평가됨.
  • JS의 주석 기능(JSDoc)을 적절히 사용하면서 TS 없이도 타입을 유추하거나 관리하는 사례는 매우 드묾.

초보 설명:
타입스크립트는 자바스크립트의 타입 체킹을 강화하여 개발자가 코드 작성 시 오류를 사전에 발견하도록 돕는 언어입니다. 자동완성, 타입 안정성 확보 덕분에 대형 프로젝트에서 널리 사용됩니다. 하지만 설정과 사용법이 복잡할 수 있어 익숙해지는 데 시간이 필요합니다.

2. JSDoc vs TSDoc 및 문서 자동화

  • JSDoc은 자바스크립트에서 주석을 활용해 문서를 자동 생성하는 도구로, 오래된 만큼 여러 언어에서 사용 가능.
  • TSDoc은 TS 전용 주석 문서 형태지만, 도구와 라이브러리 호환이 덜 되고 문서 생성 결과물이 티슈같은 문제가 있음.
  • 대부분은 JSDoc을 쓰고, TS 특성을 반영하려면 별도의 방식으로 처리하는 경우가 많음.
  • 문서 자동화에는 jsdoc-openapi 같은 변형 도구도 있음.

초보 설명:
JSDoc은 코드 위에 주석을 달아서 자동으로 API 문서를 만들어주는 툴입니다. 예를 들어 함수가 어떤 역할을 하는지, 파라미터는 무엇인지 주석으로 적으면 문서화 프로그램이 그 내용을 정리해주는 것이죠. TSDoc은 타입스크립트용 주석 표준이지만 아직 완전한 대중화 전입니다.

3. tsconfig.json 설정, noEmit과 빌드 도구 관계

  • noEmit: true는 타입스크립트 컴파일 시 JS 파일 생성 없이 타입 검사만 수행함.
  • Babel, Webpack 등 별도의 빌드 시스템을 사용하는 경우, TS 컴파일러는 타입 검사만 역할.
  • target 옵션은 어떤 JS 버전 규격을 기준으로 타입 검사할지 결정함 (예: es5, es6).
  • 라이브러리(lib) 옵션도 target에 따라 자동 조정됨.
  • 빌드 도구(Babel/Webpack)와 tsc 역할이 일부 겹치며 설정 충돌 발생 쉽게 주의 필요.
  • 대규모 프로젝트는 설정 복잡도가 매우 높아 경험 축적이 중요.

초보 설명:
TypeScript 설정 파일(tsconfig.json)에 noEmit: true를 쓰면 실제 자바스크립트 파일을 만들지 않고 코드 오류만 검사합니다. 대신 Babel이나 Webpack 같은 도구가 최종 JS 파일을 만들어 주죠. target은 생성할 JS 코드 버전을 의미해 옛날 브라우저 호환성 등을 설정할 수 있습니다.

4. 클래스(Class) vs 객체(Object)의 메모리 및 관리

  • 데이터 관리를 클레스 방식 vs 객체 리터럴 방식 중 선택 고민 많음.
  • 클래스는 인스턴스를 생성(new)할 때마다 메모리 할당이 발생하고, 메모리 누수 가능성도 있음.
  • 객체는 단순 데이터 집합으로 메모리가 적게 들 수 있지만, 기능 확장 및 캡슐화에서는 불리할 수 있음.
  • 메모리 소비 차이는 상황에 따라 근소하거나 클 수 있음.
  • 좋은 설계법칙은 필요한 경우에만 클래스로 인스턴스 생성 추천.
  • React에서 많은 new 연산자를 반복 사용하는 것은 퍼포먼스 문제로 이어질 수 있음.

초보 설명:
클래스는 '설계도'로, 객체를 여러 개 만들 때 사용합니다. 각 객체는 메모리를 차지합니다. 반면 객체 리터럴은 단순한 데이터 모음이며 가볍습니다. 무분별하게 클래스로 대량 객체 생성은 메모리를 많이 쓰고 성능 저하를 초래할 수 있습니다.

5. React 상태 관리와 ref 사용 시 주의점

  • ref.current.checked = false 등 DOM 직접 조작 시, 화면에 바로 반영되지 않는 경우가 있음.
  • 이는 React의 렌더링 방식 문제로, 상태(state)를 통해 관리해야 화면이 업데이트됨.
  • uncontrolled 컴포넌트는 리렌더링 없이 값이 바뀌지만, UI 상태 반영은 별도 상태 관리 필요.
  • 결론적으로 UI 상태 변경은 state를 사용하는 것이 권장됨.

초보 설명:
React에서는 화면에 보이는 UI 상태를 state라는 특별한 데이터로 관리합니다. DOM을 직접 건드리면 실제 값은 바뀌지만 화면에는 바로 반영이 안 될 수 있어, state 변경으로 UI를 다시 그려주는 방식이 안전합니다.

6. CSS 자동완성과 스타일링 라이브러리 비교

  • 클래스명 자동완성은 기본 VSCode 기능엔 없으며, 별도 확장프로그램 필요.
  • TailwindCSS는 유틸리티 퍼스트 CSS로 인기 있으나, 러닝커브와 코드 가독성 문제 논란 있음.
  • Vanilla Extract(VE)는 타입스크립트 친화적 CSS-in-JS 라이브러리로, 스타일명 자동완성 지원.
  • Emotion, Styled-Components는 문자열 기반 CSS-in-JS로, 클래스명 자동완성은 어려움.
  • 스타일 관련 라이브러리는 팀 선호에 따라 선택되고, 각자 장단점 있음.

초보 설명:
스타일을 작성할 때 직접 CSS 파일을 쓰기보다는, 클래스명 자동완성이나 JS 내 CSS 작성이 편한 라이브러리를 활용하는 경우가 많습니다. Tailwind는 미리 정의된 작은 스타일 조각들을 조합하는 방식이고, Vanilla Extract는 타입 안전성을 중시하는 최신 기법입니다.

7. React 프로젝트 설계 참고 오픈소스 및 보일러플레이트

8. 프론트엔드 개발자의 업무 환경과 심리적 어려움

  • 사수 부재, 지방 거주 등의 환경에서 성장 고민하는 신입 개발자 다수.
  • 업무 과중, 이직 고민, 발표 스트레스, 사람 문제 등 개발자 일상의 고충 공유.
  • 매니저와 팀원의 관계 중요성, 업무복기 및 복지 문제 공감대 형성.
  • 개인의 마음가짐과 현실적 어려움에 대한 격려 및 공감.

9. 프로젝트 레이아웃 CSS 문제 사례와 해결법

  • React에서 그리드(flex, grid) 레이아웃으로 가변적 아이템 배치 관련 고민.
  • [][][] [][__] 형태의 레이아웃을 유동적으로 만들기 어려움 경험 공유.
  • grid-template-areas와 grid-template-columns 등 CSS Grid 속성 추천.
  • 코드쉐어링 사이트(CodePen, CodeSandbox) 적극 활용 권장.
  • 레이아웃 문제 해결은 css 속성 이해 및 가독성에 달림.

10. 서버리스 DB 대안과 프론트엔드 개발 관련 최신 도구

  • Firebase 대안으로 Supabase, Neon 등 서버리스 RDBMS 소개 및 비교.
  • Supabase는 인증(auth) 기능도 탑재하고 있어 소규모 프로젝트에 적합.
  • 무료 플랜 제한(스토리지, 쿼리 횟수 등)에 대한 주의 필요.
  • Next.js 13 등 최신 프레임워크와 호환성 관련 논의.
  • Jest 설정 오류 발생 시 대응법, React Native 이미지 픽커 설치 후 발생하는 구체적 문제 토의.

면접팁⚡

  • "자바스크립트가 유동적인 언어인 이유" 질문 시
    → 동적 타이핑(Dynamic Typing), 변수 타입이 런타임에 결정된다는 점 강조.
    → 변수는 여러 타입을 가질 수 있고 타입 선언이 엄격하지 않음을 설명.

  • TS 설정 관련 질문
    → noEmit 옵션은 코드 컴파일 후 JS 파일 생성 여부를 결정하며, Babel 등의 도구와 연계해 쓰일 수 있음을 구체적으로 설명 가능.

  • React 상태관리 vs ref 차이
    → ref는 DOM 요소 직접 제어, 상태 관리가 아니며 UI 업데이트를 위해선 상태(state) 관리 필요함을 분명히 언급.

  • 클래스와 객체 메모리 차이
    → 클래스가 인스턴스 생성 시 메모리 차지하지만 관리가 쉽고 캡슐화에 용이하다는 점과 메모리 누수 주의 필요성 공유.

  • CSS 자동완성 및 스타일링 도구
    → 팀 프로젝트에 맞는 도구 선택 중요성, 각 라이브러리의 특징과 러닝커브에 대해 설명할 수 있으면 좋음.

링크🔗

#TypeScript#React#CSS#Tailwind#JSDoc#TSDoc#noEmit#클래스vs객체#상태관리#오픈소스#개발자일상
이전 포스트

2023-11-07

2023년 11월 7일
다음 포스트

2023-11-09

2023년 11월 9일