COMMIT.chat
View Bookmarks
react 썸네일react

2024-05-09

목차

  1. 1인 창업과 개발자의 고충
  2. 환율과 해외 송금 수수료 꿀팁
  3. 개발 장비 추천: 맥북 M3, RAM 16GB 맞을까?
  4. 바람막이/아우터 추천과 용도별 설명
  5. Tanstack Router 사용 후기 및 이슈
  6. 컴포넌트 설계: 리스트 아이템에 컴포넌트 전달 vs 자식 컴포넌트 활용
  7. SEO 이슈: React SPA 환경에서 meta title과 검색 결과 문제
  8. 개발 생산성 팁: 쉼표 연산자(Comma Operator) 소개
  9. 개발 도구와 환경: VSCode, IntelliJ, Node 버전 고민
  10. 커뮤니케이션과 협업 문화, 개발자 일상 이야기

1. 1인 창업과 개발자의 고충

  • 1인 창업자는 기획, 디자인, 개발 모두 혼자 맡아 힘들다는 공감대가 형성됨.
  • 자유롭게 결정하지만 그만큼 책임과 멘탈 관리가 중요함.
  • 정부나 투자자 요구 따른 개발 현실을 지적하며, 보람과 고난이 공존함.
  • 서비스 출시 목표가 올해 안으로 설정되어 있음.

2. 환율과 해외 송금 수수료 꿀팁

  • 환전 수수료 우대 요청 가능 여부 체크 중요.
  • 키움증권은 오후 5시 이후 출금 요청 시 '가환율'이 적용되고, 다음날 정규 환율로 조정해 차익을 계좌에 페이백 해줌.
  • 수수료가 저렴하고 환전 우대 혜택이 있는 곳을 잘 선택하면 비용 절감 가능.
  • 가환율이란 특정 시간대에 임시로 적용하는 환율이며, 실제 환율과 차이가 나는 부분의 보정을 말함.

3. 개발 장비 추천: 맥북 M3, RAM 16GB 적합 여부

  • 맥북 에어 M3, RAM 16GB, SSD 512GB는 프론트엔드 개발용으로 적절함.
  • RAM 16GB면 웹 개발과 기본적인 작업에 충분하고, 더 높은 스펙은 회사 지원받는 쪽이 보통.
  • M1 Max, M3 Pro 등 고사양 모델과 체감 성능 차이가 큰 편은 아님.
  • 가성비 최고는 M1 Air 추천.
  • 중고 맥북 옵션도 검토할 만함.
  • 고사양 맥북은 모니터 3개 이상 사용 등 고부하 작업에 주로 적합.

4. 바람막이/아우터 추천과 용도별 설명

  • 용도에 따라 맞는 바람막이 재질과 브랜드가 달라짐.
  • 일상용이냐 등산용 하드쉘(방풍·방수 재질) 이냐에 따라 차이가 큼.
  • 하드쉘은 등산용이나 강력한 방풍 보호가 필요할 때 추천하며, 일상엔 무거울 수 있음.
  • 브랜드별 추천: 파타고니아(Patagonia), 몽벨(Montbell), 노페, 나이키(Nike), 아디다스(Adidas 테렉스 라인) 등.
  • 가격대는 20만원대부터 다양한 옵션 존재.
  • 스포츠 의류 전문 브랜드가 기능성에서 강점 있음.
  • 브랜드 선택은 가성비 vs 기능성, 디자인 취향 고려 필요.

5. Tanstack Router 사용 후기 및 이슈

  • Tanstack Router로 개발 중 navigate 함수가 두 번 클릭해야 동작하는 문제 발생.
  • 아직 프로덕션 수준으론 부족한 느낌이 듦.
  • 오픈소스 기여 컨트리뷰터 역할도 강조됨.
  • 라우터 라이브러리 변경이나 개선에 관심 있는 개발자는 PR(풀 리퀘스트) 참여 추천.
  • Tanstack Router는 React Router 대안으로 모던한 API를 제공함.
  • navigate 문제는 이벤트 핸들링이나 상태 관리 문제일 가능성 있음.

6. 컴포넌트 설계: 리스트 아이템에 컴포넌트 전달 vs 자식 컴포넌트 활용

  • 두 가지 방법 모두 장단점이 있음.
  • 선택은 프로젝트 특성과 상태 관리 방식에 따라 다름.
  • 컨테이너에서 컴포넌트를 prop으로 내려주는 방식은 의존성 관리가 좀 더 복잡해질 수 있음.
  • 리스트 아이템 내부에서 key로 컴포넌트를 조회해서 JSX에 넣는 방식은 재사용성에 유리할 수 있으나 유연성 제한 가능성 있음.
  • 인프런 CTO님 조언에 따르면 좋은 구조는 팀원과 시간 경과를 거쳐 협업 속에서 피드백 받아 결정하는 것이 바람직.
  • 개발 초기에 무조건 최적 설계하려 하다 오버엔지니어링 위험 있음.
  • 언제든 리팩토링 가능하고 부작용 없는 설계를 고민하는 게 중요함.

7. SEO 이슈: React SPA 환경에서 meta title과 검색 결과 문제

  • React SPA에서 검색엔진이 meta 태그의 title 내용을 검색 결과에 바로 반영하지 않는 경우가 있음.
  • SPA는 URL 이동 시 페이지가 리로딩되지 않고 JS로만 렌더링되므로 SEO 크롤러가 콘텐츠 구조를 인지하지 못할 수 있음.
  • 주요 문제점: 하위 페이지가 링크(a 태그)로 되어 있지 않고, 자바스크립트 라우터로만 구현되어 있어 크롤러가 페이지를 탐색하지 못함.
  • 구글 검색 결과가 메인 페이지 제목 또는 다른 대표 제목으로 노출됨.
  • 이를 방지하려면
    • 올바른 <a> 태그 사용 및 링크 구조 보장
    • SSR(Server Side Rendering) 또는 SSG(Static Site Generation) 사용
    • 사이트맵 생성과 제출
    • robots.txt 및 메타 태그 설정 점검 필요
  • React Router 같은 SPA 라우터는 <Link> 컴포넌트를 사용하는 것이 좋음.
  • <button onClick> 대신 <a> 또는 <Link> 태그를 쓰는 이유는 새 탭 열기(Ctrl+Click 등)와 SEO, 사용자 경험 차원에서 유리함.
  • 구글 공식 문서(https://developers.google.com/search/docs/appearance/title-link?hl=ko) 참고 권장.

8. 개발 생산성 팁: 쉼표 연산자(Comma Operator) 소개

  • 쉼표 연산자는 여러 표현식을 하나의 문장에 쓸 때 순차적으로 실행하며 마지막 값 반환함.
  • 예: for (let i=0, j=10; i<10; i++, j--) {...} 처럼 여러 변수를 한 문장에 초기화/갱신 가능.
  • 고급 JS에서 복잡한 로직 작성 시 가독성을 저하할 수 있어 신중한 사용 권장.
  • 보통 여러 변수 초기화나 조건문에서 쓰이고, 대개는 간단한 for 루프 변수 선언에 사용.
  • MDN 문서(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comma_operator) 참고.

9. 개발 도구와 환경: VSCode, IntelliJ, Node 버전 고민

  • 프론트엔드 개발은 VSCode가 널리 사용됨.
  • 백엔드는 IntelliJ 사용자를 많이 봄. 구독료가 부담되는 경우 무료 버전이나 스튜던트 라이선스 활용 가능.
  • Node.js 버전은 프로젝트 요구에 맞게 설정하지만, 최신 LTS 버전 권장.
  • 리액트 19버전 마이그레이션 시 최신 도구(create vite) 사용해도 무방하나, 라이브러리 호환성과 빌드 설정 주의 필요.
  • 팀/프로젝트 환경에 맞는 버전 정책 중요.

10. 커뮤니케이션과 협업 문화, 개발자 일상 이야기

  • 점심시간, 산책, 헬스 등 건강한 생활 습관 권장.
  • 걷기 등 가벼운 운동이 두뇌 활동에 도움됨.
  • 코드 리뷰와 피드백 문화, 커밋 메시지 관리 등 협업 태도 중요.
  • 무심코 발견하는 사소한 이슈(커밋 날짜, PR 답변 늦음 등)는 협업 효율에 영향.
  • 오픈소스 기여와 컨트리뷰션 참여는 개인 역량 강화 기회임.
  • 스트레스 해소 및 일과 삶 균형을 위한 대화 활발.

면접팁⚡

  • 스벨트(Svelte) 사용 이유 질문 시,
    • "빠르고 간결한 코드 작성 가능", "가볍고 성능 좋은 UI 프레임워크", "생태계는 작지만 숙련자 선호" 등 답변 가능.
    • 다만 생태계가 작아 레퍼런스는 부족할 수 있음.
  • React SPA SEO 문제 대처 경험 언급 시,
    • "SSR/SSG 도입", "사이트맵 구성 및 링크 적절 사용", "SEO를 위한 메타 태그 관리" 등의 대안을 설명하면 좋음.
  • 컴포넌트 설계 방법 질문 시,
    • "프로젝트 특성에 따른 설계 선택", "리팩토링 가능 구조 중요성", "팀 협업과 시간 경과에 따른 최적화"를 강조할 것.

링크🔗

#React#SEO#컴포넌트설계#맥북추천#TanstackRouter#1인창업#JavaScript#개발도구#협업문화#환율수수료
이전 포스트

2024-05-08

2024년 5월 8일
다음 포스트

2024-05-10

2024년 5월 10일