COMMIT.chat
View Bookmarks
react 썸네일react

2024-05-17

목차

  1. 개발 환경 및 툴 관련 이야기
  2. HTTP 클라이언트 라이브러리: Axios vs Fetch
  3. 여행 이야기와 문화 소통
  4. React 프로젝트 관련 질문과 팁
  5. 성능 최적화 및 빌드 관련 팁
  6. 커밋 메시지 작성 문화
  7. 개발현실과 직장생활 토크
  8. 최신 개발 도구(swift, Babel 등)와 체감 속도
  9. 연령대별 IT 활용 및 개발자 세대
  10. 기타 공유 및 잡담

1. 개발 환경 및 툴 관련 이야기

  • M1 맥에서 VSCode Insiders를 쓰는 이유는 초창기 버전이 M1 지원이 안되어서 속도 문제 때문.
  • Homebrew를 활용해 여러 버전의 VSCode가 같이 설치되어있는 경우도 많음.
  • React 프로젝트 마이그레이션 시 Vite 설치 후 기존 소스 폴더 옮기면 됨.
  • 리포지토리는 꼭 새로 만들 필요 없고 기존 repo에서 진행 가능함.
  • Vite + AWS SDK 조합은 호환성 이슈나 성능 문제 있을 수 있음. 주의 필요.

2. HTTP 클라이언트 라이브러리: Axios vs Fetch

  • Fetch API는 브라우저 내장 함수이고 Axios는 편의성 제공 라이브러리.
  • Axios는 요청 취소, 인터셉터, 자동 JSON 변환 등 부가 기능이 많아 편리함.
  • 많은 팀에서 무난하게 Axios를 선호해 사용하고 있음.
  • Express + Promise + Axios 조합으로 서버 및 클라이언트 비동기 처리 많이 함.
  • 초보자라면 Fetch부터 익히고 필요에 따라 Axios 사용 추천함.

참고: Fetch API

브라우저 환경에 내장된 비동기 HTTP 통신 함수. 약간 코드가 길지만 별도 라이브러리 없이 사용 가능.

참고: Axios

Promise 기반 HTTP 클라이언트. 더 편리한 인터페이스와 요청 취소, 자동 변환 기능이 있어 사용 빈도가 높음.

3. 여행 이야기와 문화 소통

  • 북유럽(스웨덴, 핀란드 등)은 백야와 극야 현상이 있어 여름엔 낮이 길고 겨울에는 낮이 거의 없음.
  • 스웨덴 등 북유럽 국가는 현지인끼리도 상당히 배타적인 문화가 있어 현지 친구 사귀기 어려움.
  • 전통 음식으로 ‘삭힌 청어(수르스트뢰밍)’가 유명. 세계에서 가장 비린 음식 중 하나로 알려져 있음.
  • 여행지 선택은 연령대에 따라 취향이 다름. 20대와 30대가 방문하는 여행지는 서로 느낌이 다름을 공유.
  • 해외 거주 경험을 5~10년 추천함. 문화 체감에 도움이 됨.

4. React 프로젝트 관련 질문과 팁

  • CRA(Create React App)에서 public 폴더 내 정적 파일 애셋 불러오기 문제는 src/assets등 별도 폴더로 옮기고 import 방식 권장.
  • CSS에서 background: url("/images/icon.svg") 형태가 작동 안되는 경우가 많아 주의 필요.
  • React + Vite 마이그레이션은 Vite 설치 후 소스 옮기고 필요한 라이브러리 재설치가 기본 절차.
  • styled-components 같은 스타일링 라이브러리 적용도 가능하며 설정 참고.

5. 성능 최적화 및 빌드 관련 팁

  • Lighthouse 점수 올리기는 일반적으로 이미지 최적화, 코드 스플리팅(Chunk 분할), 캐시 전략 적용 등으로 가능함.
  • 번들 사이즈(Builded 파일 크기)를 작게 유지해야 효율적 로딩 가능. 이를 위해 코드 쪼개기 필요.
  • Lighthouse는 로딩 시간, 접근성, SEO 등 다양한 측면 평가하는 구글 공식 도구임.
  • 로컬 빌드 후 분석 보고서 참고해 개선할 부분을 찾는 게 중요.
  • 이미지 레이지 로드, 렌더 우선순위 조정 등도 중요한 성능 최적화 요소임.

6. 커밋 메시지 작성 문화

  • 커밋 메시지는 영어로 짧고 명확하게 쓰는 경우가 많음.
  • 대형팀이나 해외 대응 위한 프로젝트에서는 영어 사용이 기본.
  • 예) “nothing special”, “button is modified”처럼 간결하게 작성함.
  • 한글 커밋 메시지 쓰는 팀도 있으나 영어가 범용적.
  • 커밋 메시지 관리는 협업과 코드 히스토리 이해에 매우 중요.

7. 개발현실과 직장생활 토크

  • 금요일 오후 반차 사용하는 사례 공유.
  • 휴가 사용에 대한 어려움과 고민 토로.
  • “일하기 실어증”, “집가기 실어증” 등 유머러스한 표현으로 직장인 공감대 형성.
  • 이직이나 커리어 고민, 스트레스 관리에 대한 자연스러운 대화 많음.

8. 최신 개발 도구(swift, Babel 등)와 체감 속도

  • Babel은 자바스크립트 코드 변환 도구로, JSX를 일반 JS로 변환해 줌. 필수 도구 중 하나임.
  • SWC는 Rust 기반 JavaScript 컴파일러로 Babel보다 컴파일 속도가 빠름.
  • Vite + SWC 조합을 쓰면 개발 속도 향상 가능하지만 프로젝트 특성 따라 달라질 수 있음.
  • 환경 구성 재미로 모노레포 시도 논의되기도 함.
  • 체감 속도는 도구별 환경 설정에 따라 달라지므로 직접 테스트해 보는 게 좋음.

9. 연령대별 IT 활용 및 개발자 세대

  • 60세 이상 고령층은 스마트폰 앱이나 챗봇 사용이 상대적으로 적지만 점차 증가 중.
  • 50~60대 개발자와 실무 경험에 대한 이야기 등장.
  • 세대별 기술 활용, 개발자 인구 구성 변화 및 문화 차이 인식.

10. 기타 공유 및 잡담

면접팁⚡

  • Axios와 Fetch API의 차이점을 정확히 이해하고 설명하기.
  • React 프로젝트 환경변경 시 기본 절차 및 문제 해결법(정적 파일 경로 문제 등).
  • Lighthouse 점수 개선 방법과 웹 성능 최적화 기법을 구체적으로 답변할 수 있어야 함.
  • 커밋 메시지는 협업 시 표준을 보여줄 수 있도록 간결하고 명확하게 작성하는 습관 강조.
  • 최신 JavaScript 빌드 도구(SWC, Babel) 역할과 차이점에 대해 이해하고 설명할 것.

링크🔗

#React#Axios#Fetch#Vite#커밋메시지#성능최적화#개발환경#여행#개발자문화#직장생활
이전 포스트

2024-05-16

2024년 5월 16일
다음 포스트

2024-05-19

2024년 5월 19일