2023-11-05

목차

1. ⚡️ 13년차 레거시 코드와 하드코딩 이슈
2. Vercel hobby 플랜에서 Github 퍼블릭 레포 배포 여부
3. Turborepo 환경에서 라이브러리 설치 위치
4. Typescript 프로젝트 내 타입 파일 명명과 공유 방식
5. 브라우저 위치정보 API 사용 시 UX 개선 팁
6. 프론트엔드 패키지 정기 업데이트에 관한 고민
7. while문, for문 바디 없이 사용 가능한 점과 함수 호출
8. 개발자들의 일상과 멘탈 관리 이야기
9. 기술 면접 팁 : 코딩 성공 경험과 멘탈 관리
10. 공유된 유용 링크 정리

1. ⚡️ 13년차 레거시 코드와 하드코딩 이슈

• 특정 ID와 프로필 정보를 메일로 받아 엑셀에 넣고, 거기서 조건문(elseif)을 생성해 코드를 하드코딩하는 사례 언급
• 13년차 경력임에도 불구하고 이런 방식은 매우 비효율적이고 관리하기 어려움
• 하드코딩이란?
  • 코드에 조건이나 값들을 직접 고정해서 넣는 방식으로, 유지보수가 힘들고 확장성이 떨어짐
• 특히 “모르는 게 너무 많은데 잘 안다고 착각하는 경력자”가 문제라는 의견
• 레거시 코드란?
  • 오래되어서 새롭게 수정하거나 이해하기 어려운 기존 코드를 의미
• 이런 상황에서는 리팩토링과 자동화가 꼭 필요함

2. Vercel hobby 플랜에서 Github 퍼블릭 레포 배포 여부

• Vercel hobby 플랜에서 Github Organization의 퍼블릭 레포 배포가 가능한지 질문
• 배포가 처음이라 관련 정보를 찾기 어려움
• 작년에는 hobby 플랜으로도 배포 가능했다는 경험담이 있지만, 변경된 정책이 있을 수 있음
• 공식 문서 확인 방법: Vercel Deployment Guide (vercel.com/docs)
• 해결 팁:
  • 개발 환경과 요금제별 정책을 반드시 공식 문서에서 확인할 것
  • 배포가 안 될 경우 개인 레포지토리로 클론해서 배포를 시도해볼 수도 있음

3. Turborepo 환경에서 라이브러리 설치 위치

• monorepo 기반 Turborepo 프로젝트에서 라이브러리 설치 위치에 대한 문의
• UI 폴더에서만 필요하면 그곳에 설치하면 된다는 답변
• 라이브러리는 필요한 곳에 설치하는 것이 원칙이며, 전역 설치는 권장되지 않음
• Turborepo란?
  • 여러 패키지와 앱을 하나의 저장소에서 관리하는 모노레포 툴로, 빌드/배포를 효율적으로 할 수 있음
• 설치 위치에 따라 의존성 관리와 빌드에 영향을 줄 수 있으므로, 목적에 맞게 설치할 것

4. Typescript 프로젝트 내 타입 파일 명명과 공유 방식

• Next.js 프로젝트에서 타입 정보를 src/types 폴더에 저장할 때 파일명을 response.dto.ts로 할지 고민
• DTO(Data Transfer Object)는 주로 백엔드에서 사용하는 용어로, 데이터 전송용 객체를 의미
• 프론트엔드에서는 단순 타입 정의 파일로 자유롭게 이름 붙여도 무방
• 백엔드와 프론트엔드가 모두 TypeScript라면, 타입 공유법을 고민하는 것도 추천(예: monorepo 구조)
• 타입 공유하면 중복 방지와 유지보수 효율성 증대 가능

5. 브라우저 위치정보 API 사용 시 UX 개선 팁

• navigator.geolocation.getCurrentPosition API를 통해 위치 정보를 요청 시 1~3초 정도 대기 시간 발생
• 이 대기 시간이 사용자 경험(UX)에 부정적 영향을 줄 수 있음
• 추천 UX 개선 방법:
  • “위치정보를 가져오는 중입니다, 잠시만 기다려주세요” 같은 안내 텍스트 혹은 로딩 상태 표시
  • 위치 정보가 늦는 이유: GPS 신호 수신, 브라우저 권한 허용 대기 등
  • 위치 정확도가 필요 없으면 비동기로 최대한 빠른 응답 처리 권장
• 과도한 대기 시간에 대한 UX 대처법은 앱마다 다양하며, 사용자에게 진행 상태를 명확히 알리는 것이 중요

6. 프론트엔드 패키지 정기 업데이트에 관한 고민

• 사용하는 프론트엔드 패키지들의 버전이 많이 달라져서 정기적으로 업데이트를 하는 게 좋을지 고민
• 위험: 업데이트 시 사이드 이펙트 발생 가능성 있음
• 조언:
  • 필요한 시점(신기능, 보안 이슈 발생 시)에 업데이트 진행
  • 한꺼번에 대규모 업데이트보다는 점진적, 단계적 진행 권장
  • 테스트를 충분히 해서 안정성을 확보할 것

7. while문, for문 바디 없이 사용 가능한 점과 함수 호출

• while, for문에서 본문(body) 없이도 작동한다는 사실에 대한 개발자 충격
• 예: while문 내부에 실행할 함수 호출만 두고 바로 반복 가능
• 이런 문법은 자바스크립트에서 가능하며, 반복 조건과 함수 호출이 동시에 이루어질 때 활용
• 다만 가독성 문제 때문에 무분별한 사용은 권장하지 않음
• 면접 등에서 이런 문법 상황을 묻기도 하니 참고하면 좋음

8. 개발자들의 일상과 멘탈 관리 이야기

• 멘탈 관리, 번아웃 극복법으로 음식(햄버거, 피자)과 가벼운 게임(루미큐브) 추천
• 잠, 낮잠을 통한 회복 이야기
• 일과 삶의 균형, 꾸준한 휴식의 중요성 강조
• 긍정적인 메시지: “작은 성공 하나라도 이루는 모습 자체가 멋짐”, “항상 화이팅!”

9. 기술 면접팁⚡

• 코딩 테스트나 면접에서 흔히 묻는 내용 중 하나는 “코드를 어떻게 효율적이고 유지보수 가능하게 작성하느냐”
• 레거시 코드 경험을 바탕으로 자동화 및 리팩토링의 필요성을 강조해서 설명 가능
• 자바스크립트 문법의 독특한 사용법(while문 바디 생략 등)도 알고 있다는 점 어필하면 좋음
• 멘탈 관리, 끈기, 실패를 극복하고 작은 성공을 경험하는 자세도 면접관에게 긍정적으로 작용
• 타입스크립트 프로젝트에서 타입 관리 및 구조화 관련 질문 예상됨 → monorepo 및 DTO 파일 네이밍 언급

10. 링크🔗

• Vercel Deployment Guide: https://vercel.com/docs/deployments/overview#git
• JS 딥다이브 강의(유튜브): https://www.youtube.com/watch?v=cCOL7MC4Pl0
• React useMemo, useCallback 관련 글: https://kentcdodds.com/blog/usememo-and-usecallback
• 유튜브 숏 영상(재미있음): https://youtube.com/shorts/nlGxQQUcFU8?feature=share
• 기타 음악 링크(옛날 노래): https://youtu.be/eYiDIeSk3Go?si=7alRK3l6GT8oeEa-