2024-04-04

목차

1. 디자인 컨펌과 협업 프로세스
2. React와 로드 관리 이슈
3. 코드 주석과 깃 커밋 에티켓
4. 개발 중 디버깅 방법과 콘솔 로그 활용
5. 퇴사, 이직, 연봉 협상 및 취업 고민
6. Flutter와 React Native 개발환경 비교
7. Next.js App Router와 레이아웃 관리
8. 알고리즘 공부 및 면접 준비 팁
9. 음성 자동 실행 및 브라우저 제한 이슈
10. 개발자 커뮤니케이션과 회사 분위기

1. 디자인 컨펌과 협업 프로세스 🎨

• 핵심 : UI/UX 디자이너와 개발자 간 디자인 확인(컨펌)은 프로젝트 진행에서 필수 과정임.
• 설명 :
  • "디자이너 컨펌"이란 디자이너가 제공한 디자인 시안을 개발자가 구현 후, 디자이너가 최종 확인하는 절차를 의미함.
  • 단순히 주어진 핸드아웃대로 구현하는 것이 아니라, 구현 완료 후 "더블체크"를 통해 실제 화면이 의도와 맞는지 검증함.
  • 개발 도중 레이아웃 수정이 필요할 수 있어 기능 구현과 디자인 QA 단계가 모두 필요함.
• 의견 :
  • 좋은 협업 툴로 피그마 코멘트 활용하거나 PPT로 피드백 받는 방법이 있음.
  • 디자이너 없이 혼자 개발하는 경우에는 직접 판단하는 수밖에 없으며, 가능하면 협의를 통해 조율할 것을 추천함.

2. React에서 외부 JS 파일 1회 로드 관리 ⚙️

• 문제 : 브라우저 리렌더링 때문에 외부 JS 파일이 중복 로드되는 이슈.
• 설명 :
  • React 컴포넌트는 여러 번 마운트, 언마운트 되므로, 외부 JS 파일을 무조건 컴포넌트 내부에서 임포트하면 중복 로드가 일어날 수 있음.
  • 이를 방지하기 위해 React의 useEffect Hook을 이용해 빈 배열([])을 의존성으로 설정하면 컴포넌트가 처음 마운트 될 때 한 번만 로드 가능.
  • 만약 여러 페이지에서 공통으로 사용하는 JS라면, 최상단 라우터 혹은 메인 JS 진입점에서 로드를 담당하는 게 효과적임.
• 팁 :
  • 로딩 유무 상태를 전역 상태 혹은 변수로 관리해서 중복 로드를 막는 방법도 고려.
  • 커스텀 훅으로 로드 로직 분리하면 재사용성 증가.

3. 코드 주석과 깃 커밋 에티켓 📝

• 핵심 : 회사 코드에 비하성 혹은 부정적인 주석은 삼가야 함.
• 설명 :
  • 주석은 협업하는 동료들을 위한 소통 창구이며, 부정적·비하적 내용은 팀 분위기와 코드 가독성을 해침.
  • 깃 커밋 메시지 또한 공개되는 경우가 많으니 전문적이고 명확한 메시지를 남겨야 함.
• 예시 :
  • "이딴걸 쓰는 능지" 같은 부적절한 주석은 절대 사용하지 말것.
  • 문제 발생 시 슬랙 등 공식 커뮤니케이션 채널에서 논의하는 것이 좋음.
• 의견 :
  • 가벼운 농담은 때때로 분위기를 살릴 수 있지만, 공식 문서와 코드에는 최소화해야 함.

4. 디버깅: console.log vs 디버거 활용 🔍

• 현황 : 많은 개발자가 디버깅시 console.log를 자주 사용하지만 주석처리 문제와 코드 난잡함 발생.
• 설명 :
  • console.log는 빠른 임시 확인용으로 적합하나, 운영 배포 전에는 주석 처리나 제거가 필요.
  • 브라우저 개발자 도구의 디버거 기능을 활용하면 브레이크포인트 설정과 변수 실시간 관찰이 가능해 더 체계적인 디버깅 가능.
  • VSCode, 크롬 등 다양한 IDE와 브라우저에 기본 탑재된 디버거 활용 추천.
• 팁 :
  • 코드에 console.log를 대량으로 남기기보다, 로그 관리 라이브러리를 사용하거나 실행 환경에 따라 자동 제거하는 방법도 고려.
  • debugger 키워드나, 환경변수를 활용해 개발/운영 로그를 분리 관리하는 방법도 도움됨.

5. 퇴사, 이직, 연봉 협상과 취업 고민 💼

• 주요 대화 포인트 :
  • 갑작스런 연봉삭감 통보, 회사 분위기 악화, 이직 준비 및 면접 시 질문 등.
  • 연봉 협상 시 원하는 금액보다 약간 높게 제시하는 게 유리하며, 지나치게 과한 요구는 부정적 영향.
  • 퇴사 전후 고민은 누구나 하는 문제로, 자신의 커리어 방향과 맞는 회사를 찾는 게 중요함.
• 면접 질문 팁 :
  • 회사 규모, 야근률, 팀 구성, 개발 문화 등에 대해 묻는 것이 일반적임.
  • 연봉이나 복리후생 질문은 면접 말미에 자연스럽게 하는 것이 좋음.
• 취업 팁 :
  • 서류만 여러 곳 넣기보다 전략적으로 지원하고, 면접 경험을 쌓는 것이 더 중요.
  • 자신감 부족할 때는 주변 조언과 이력서 첨삭 도움받기 추천.

6. Flutter vs React Native 개발 환경 이야기 📱

• 설명 :
  • Flutter는 구글이 만든 크로스플랫폼 프레임워크로 Dart라는 언어를 사용함.
  • React Native는 JavaScript(또는 TypeScript)를 기반으로 하며, 이미 React 경험이 있다면 진입 장벽이 낮음.
  • Flutter는 UI 커스터마이징이 쉽고 퍼포먼스가 좋은 편이지만, Dart 언어를 새로 배워야 하는 부가적 비용이 존재.
  • React Native는 기존 JavaScript 경험 활용 가능하지만 플랫폼 별 네이티브 모듈 관리가 필요.
• 개발 환경 :
  • Flutter는 Android Studio, VSCode에서 개발 가능.
  • React Native는 Expo를 통한 빠른 개발도 지원.
• 의견 :
  • 개인 역량과 프로젝트 특성에 따라 선택하며, 한 달 내 기본 UI 개발은 가능하지만 숙련엔 시간이 필요함.

7. Next.js App Router와 레이아웃 관리 🗂️

• 핵심 : Next.js App Router는 하위 페이지에 기본 레이아웃(루트 레이아웃)이 자동으로 적용됨.
• 기술설명 :
  • 특정 하위 페이지에서 루트 레이아웃을 적용하지 않으려면 "라우트 그룹(Route Group)" 기능을 활용할 수 있음.
  • (default), (no-default)와 같은 그룹을 만들어 전체 공통 레이아웃을 분리하고, 특정 페이지에는 별도의 레이아웃을 적용 가능.
• 팁 :
  • 프로젝트 구조를 적절히 설계하여 유지보수성과 확장성을 높이는 것이 중요.
  • 공식 문서(https://nextjs.org/docs/app/building-your-application/routing/route-groups) 참고 추천.

8. 알고리즘 공부 및 면접 준비 🚀

• 주요 내용 :
  • DFS, BFS, 연결 리스트, 다익스트라, A* 알고리즘 등 주요 개념 공부 권장.
  • A* 알고리즘은 최단 경로 탐색에 활용되며 네비게이션, 게임 AI 등에 쓰임.
  • 알고리즘 문제풀이 전 이론 학습과 개념 이해가 선행되어야 무작정 문제 풀이보다 효과적임.
• 기술언어 :
  • 알고리즘 기술언어(ADL, Algorithm Description Language)는 코드와 달리 알고리즘을 쉽게 설명하기 위한 표현 수단임. 수도코드와 비슷하지만 표준화된 문법을 가짐.
• 팁 :
  • 꾸준한 문제 풀이와 함께 관련 알고리즘의 원리를 이해하는 것이 중요.
  • 온라인 강의, 블로그, 유튜브 플레이리스트로 공부 지원 가능.

9. 음성 자동 실행 및 브라우저 제한 이슈 🔈

• 문제 : 브라우저에서 음성 자동 실행은 사용자 인터랙션 없이는 제한됨.
• 설명 :
  • 보안 및 사용자 경험 문제로 크롬, 사파리 등 많은 브라우저가 유저 제스처(클릭, 터치 등) 없이는 자동 음성 재생을 불허함.
  • 방송 후원 음성이나 알림음 같은 기능은 보통 클라이언트 애플리케이션 자체나 외부 프로그램에서 처리함.
• 대안 :
  • 웹에서는 TTS(Text To Speech) 라이브러리 사용 시 유저 인터렉션을 유도하고, 음성 출력 시점 조절 필요.
  • 자동 재생 기능이 필요하다면 설치형 클라이언트 프로그램 개발을 고려할 수 있음.

10. 개발자 커뮤니케이션과 회사 분위기 🤝

• 경험 공유 :
  • 회사 내 소통 문제, 야근 문화, 상사/팀장과의 관계, 퇴사 준비, 최근 경기 침체와 인력 시장 변화에 대한 현실적인 이야기.
  • 서로 농담과 격려를 주고받으며 힘든 시기를 함께 이겨내는 모습을 보여줌.
• 팁 :
  • 개발 업무 중간중간 휴식을 챙기고 스트레스를 풀 수 있는 건강한 소통 채널을 만드는 것이 중요함.
  • 어려운 상황일수록 차분한 판단과 계획 수립이 필요하며 무리한 감정 표현은 자제할 것.

면접팁⚡

• 연봉 협상은 원하는 금액보다 약간 높게 부르는 것이 좋고, 과한 요구는 피해야 함.
• 디버깅 경험에 대해 질문 받으면 console.log와 개발자 도구 디버거 활용법 양쪽 모두에 대해 이야기할 것.
• 알고리즘 질문시 단순 문제풀이보다 개념적 이해와 사고 흐름을 잘 설명하는 게 중요.
• 협업 경험, 특히 디자인과 개발 간 조율 경험을 구체적으로 말할 준비.
• 면접장에서 회사 문화나 개발 환경에 대해 질문하는 것도 좋은 인상.

링크🔗

• 디자인 피그마 코멘트 활용 팁 : https://www.figma.com
• Next.js Route Groups 공식 문서 : https://nextjs.org/docs/app/building-your-application/routing/route-groups
• 알고리즘 유튜브 플레이리스트 : https://youtube.com/playlist?list=PLZHQObOWTQDNU6R1_67000Dx_ZCJB-3pi
• Mens Underwear Index (남성 속옷 지수) : https://en.m.wikipedia.org/wiki/Men%27s_underwear_index
• 백틱 입력 팁 참고 링크 : https://gist.github.com/zi-gae/777c1b797bb01de79d35db556f760484
• 네이버 로버트 월터스 채용 안내 : https://www.joongang.co.kr/article/25181560