COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-15

목차

  1. 슬랙 장애 & 드립 문화
  2. Zero Runtime CSS와 타입스크립트 선언 병합
  3. 공인 IP 변경 이력 확인
  4. ngrok 문제 및 토큰 재발급 쿠키 저장 문제
  5. 피그마 서비스 장애와 Electron.js 소개
  6. PHP 역사와 React JSX 뿌리
  7. React Router 관련 질문과 구현 팁
  8. 프리랜서 경력, SI 및 웹에이전시 경험 토론
  9. Tailwind CSS 단점 및 사용 경험
  10. Jest 테스트 관련 import 문법 에러 해결 팁

1. 슬랙 장애 & 드립 문화

  • 슬랙에서 장애 의심 멤버들의 농담 섞인 대화가 활발했음.
  • 농담과 드립이 회사 분위기를 유쾌하게 돋우는 문화로 작용.
  • 가벼운 대화로 출근 인사, 업무 분위기 전환 역할.

2. Zero Runtime CSS와 타입스크립트 선언 병합

  • Zero Runtime CSS란?

    • 스타일을 빌드 타임에 정적으로 컴파일하여, 실행 시점에 스타일 계산 비용을 줄이는 CSS 접근 방식임.
    • 빌드 시점에 CSS가 완성되어 런타임 부하가 적고 성능 최적화에 도움됨.

  • 타입스크립트 인터페이스의 선언 병합(Declaration Merging)

    • 동일한 이름의 인터페이스 또는 타입 선언이 여러 곳에서 있을 경우 자동으로 하나로 합쳐지는 기능.
    • React 컴포넌트 등 복잡한 타입 확장 시 유용하며, 오버라이드가 아닌 기존 타입에 속성을 추가하는 개념임.

3. 공인 IP 변경 이력 확인

  • 일반적으로 PC에서 공인 IP 변경 기록을 확인하는 공식 방법은 거의 없음.
  • IP 변경은 모뎀 재부팅, ISP 정책, DHCP 정책 등으로 자동 변동 가능.
  • 회사나 서버 환경에서 고정 IP 구매 시 IP가 고정되나, 상황에 따라 변경될 수 있음.
  • IP 변경 이력 추적이 필요하다면 별도 네트워크 모니터링 시스템이나 로그를 구축해야 함.

4. ngrok 문제 및 토큰 재발급 쿠키 저장 문제

  • ngrok은 외부에서 로컬 서버를 노출시키는 터널링 서비스로, 주소가 거의 일회성으로 제공됨.

  • 가끔 ngrok 접속 불가 문제가 나타날 수 있으며, 다시 실행하거나 설정 초기화 필요함.

  • Next.js(특히 Next 13)의 서버 환경에서 API 인증 토큰 재발급 후 쿠키 저장 문제

    • next/headers의 cookies().set()은 오직 Route Handler나 Middleware에서만 가능함.
    • 따라서 클라이언트 인터셉터에서 토큰 재발급 후 쿠키를 설정하려면 별도의 Route Handler API를 만들어 호출하는 방식 추천.
    • 이 방식은 보안과 SSR 환경에 적합하며, 쿠키 설정 권한 문제가 해결됨.

5. 피그마 서비스 장애와 Electron.js 소개

  • 피그마(Figma) 웹 서비스 일시 장애 발생, 프로그램 버전은 정상 작동.
  • Electron.js는 데스크톱 애플리케이션 개발 프레임워크로, 웹 기술로 데스크톱 앱을 쉽게 만들 수 있음.
  • 피그마 같은 툴의 설치버전을 만들 때 Electron.js 활용 사례가 많음.

6. PHP 역사와 React JSX 뿌리

  • PHP는 LAMP 스택 시대에 웹 개발의 주역 중 하나로 많은 사이트와 공공기관에서 아직도 사용됨.
  • 과거 PHP 코드는 보안 인식 부족, 설계 부재 등으로 인해 부정적 평가가 많음.
  • React JSX는 페이스북이 개발한 XHP(php 확장 프레임워크) 의 JS 버전에서 진화한 것이라고 알려짐.
  • 이런 역사 때문에 React가 PHP의 영향을 부분적으로 받았다는 의견 존재.

7. React Router 관련 질문과 구현 팁

  • React Router Dom에서 GNB(Global Navigation Bar) 컴포넌트를 BrowserRouter 밖에 둔다면, 내부 훅(useLocation 등)을 쓸 수 없어 경고 발생 가능.
  • NavLink 컴포넌트 활용 시 현재 경로와 연동해 활성화 메뉴 표시가 편리함.
  • GNB 컴포넌트를 라우터 안에 넣거나 Context, Redux 등 상태 관리 도구를 이용하여 경로값을 전달·관리하는 방법 추천.
  • Route 컴포넌트 내부에서 NavLink를 사용하는 것이 가장 무난함.

8. 프리랜서 경력, SI 및 웹에이전시 경험 토론

  • 프리랜서 최소 경력, 일반적으로 3년 이상을 권장하지만 본인 역량에 따라 가능.
  • SI(시스템통합)와 웹에이전시는 업무 형태, 요구되는 기술 수준이 차이남.
  • SI는 네임드 기술을 사용, 웹에이전시는 간단한 홈페이지 제작 위주인 경우가 많아 개발자 성장에 영향.
  • 웹에이전시 경험은 개인별로 차이가 크며, 일부는 개발자 무덤 취급.
  • 경력 개발자는 성장과 환경 고려해 선택할 필요 있음.

9. Tailwind CSS 단점 및 사용 경험

  • Tailwind CSS는 유틸리티 클래스 기반으로 빠른 스타일링 가능하나, 클래스 네임이 많아지면 가독성 저하가 문제됨.
  • 복잡한 스타일링 시 클래스명이 길어지고 유지보수 어려울 수 있음.
  • CSS-in-JS 또는 module.css 등과의 조합 사용 의견도 있음.
  • Tailwind를 유지보수 필요 없는 작은 프로젝트나 프로토타입에 쓰는 경우 생산성 좋음.

10. Jest 테스트 관련 import 문법 에러 해결 팁

  • SyntaxError: Cannot use import statement outside a module 에러는 Jest가 ES Module 문법(import)을 해석하지 못해 발생함.
  • 해결 방법:
    • package.json에 "type": "module" 설정 검토.
    • Jest 설정(jest.config.js)에서 transform 옵션으로 Babel 또는 ts-jest 등 트랜스파일러 지정 필요.
    • transformIgnorePatterns 설정으로 node_modules 내 특정 라이브러리도 변환 대상으로 지정 가능.
    • 관련 공식 문서 참고 권장: https://jestjs.io/docs/ecmascript-modules
  • React Native 환경 라이브러리 테스트 시 ESModule 문제 많이 발생하며 별도 세팅 필수.

면접팁⚡

  • React와 JSX 관계 이해
    JSX는 React 컴포넌트를 선언하는 문법으로, 실제로는 React.createElement 호출로 변환됨. React 초창기가 JS가 아닌 PHP 기반 XHP에서 영향을 받았다는 점도 인상적임.

  • React Router 사용 시 GNB 구현 팁
    NavLink와 useLocation 훅 사용은 Route 컴포넌트 내부에서 해야 문제 없으며, 상태 관리 라이브러리를 활용해 URL 상태를 전역 관리하는 것도 좋은 방법임.

  • Jest 환경 설정 문제 해결
    ESModule 관련 오류는 Jest 설정과 Babel 연동을 점검하며, 특히 React Native 라이브러리 테스트 시 트랜스폼 설정에 신경 써야 한다는 점 기억.

  • 프리랜서 경력 & SI, 에이전시 경험 토론 활용
    자신의 경력관리 방향과 경험 환경에 대해 솔직하게 말하고, 각 환경의 장단점을 이해하고 있음을 어필할 것.

링크🔗

#React#NextJS#TailwindCSS#TypeScript#ReactRouter#Jest#PHP#Electron#ngrok#프리랜서
이전 포스트

2023-11-14

2023년 11월 14일
다음 포스트

2023-11-16

2023년 11월 16일