2024-10-16

목차

1. 개발 일정과 일상 이야기
2. Next.js 15버전 업데이트와 라우터 변화
3. React Query vs SWR 캐싱 라이브러리 논쟁
4. 상태관리 라이브러리 리코일(Recoil)의 문제점
5. 재귀 함수 및 컴포넌트 설계 팁
6. 웹 폰트 관련 이슈 및 해결 방법
7. 삼항 연산자 중첩 사용법과 가독성 팁
8. 병원 및 건강 관련 직원 경험 공유
9. 모바일 폰 구매, 통신비 절약법
10. 업무 능력 향상과 커뮤니케이션 조언

1. 개발 일정과 일상 이야기

• 취준과 프로젝트 마무리로 바쁜 일상 공유.
• 출근 시간과 컨디션 관리에 관한 이야기가 많음.
• 재택근무와 출근의 장단점 논의.
• 개인 건강 문제(손가락에 물찼다는 증상 등)와 병원 방문 경험 공유.

2. Next.js 15버전 업데이트와 라우터 변화

• Next.js 15버전은 페이지 라우터 관련 큰 변화가 도입됨.
• 일부 함수(useParams)가 Promise를 반환하는 비동기 방식으로 변함.
• 기존의 페이지 라우터와 앱 라우터의 지원 및 역할 변화가 예상됨.
• 페이지 라우터는 앞으로 입지가 줄어들 가능성이 있고, 앱 라우터 사용 권장 의견 다수.
• 관련 문서: Next.js 15 릴리즈 노트

초보자 설명

Next.js는 React 기반의 프레임워크로 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 지원.
15버전에서 라우팅 방식이 변화하면서 비동기 훅 등 새로운 개발 패턴이 추가되어, 기존 페이지 라우터 사용자는 업데이트 시 주의 필요.

3. React Query vs SWR 캐싱 라이브러리 논쟁

• React Query와 SWR은 클라이언트 상태 관리 및 서버 데이터 캐싱용 라이브러리임.
• React Query는 기능이 풍부하지만 Next.js와 서버 사이드 캐싱 처리 면에서 애매하다는 의견 존재.
• SWR은 React Query보다 가볍지만, 사용자 수가 적어 버그 발생 시 대응이 늦는 단점이 있음.
• SWR과 React Query는 역할이 유사하지만, 프로젝트 상황에 따라 선택 권장.

초보자 설명

이 라이브러리들은 서버에서 데이터를 가져와서 클라이언트 상태로 관리하며, 불필요한 네트워크 호출을 줄이기 위해 데이터 캐싱을 자동으로 처리함.

4. 상태관리 라이브러리 리코일(Recoil)의 문제점

• 리코일은 메모리 누수 문제 등 심각한 안정성 이슈 존재.
• 최근 1~2년간 업데이트가 제대로 이루어지지 않아 유지보수가 미흡함.
• 특히 AtomFamily 기능이 메모리 누수의 원인으로 지적됨.
• 실제 서비스에 도입 시 주의 필요하며, 대안으로는 GraphQL Relay 사용 언급.

초보자 설명

상태관리 라이브러리는 컴포넌트 간 데이터를 효율적으로 공유하게 하는 도구이며, 메모리 누수는 프로그램이 불필요한 메모리를 계속 차지하는 문제를 말함.

5. 재귀 함수 및 컴포넌트 설계 팁

• 깊이가 가변적인 메뉴 그룹(트리 구조)은 재귀 함수로 컴포넌트를 설계하는 것이 보편적임.
• 뎁스(깊이)가 고정이라면 굳이 재귀로 작성하지 않아도 됨.
• GPT를 활용하여 재귀 구현 방법 참고 가능.
• 재귀를 무한 반복하지 않도록 조건문이나 최대 깊이 설정이 중요.

6. 웹 폰트 관련 이슈 및 해결 방법

• Pretendard 폰트 사용 시, PC와 모바일에서 font-weight가 다르게 보이는 문제 발생.
• 모바일에서는 웹킷 기반 렌더링 특성 상 폰트가 연하게 처리될 수 있음.
• 해결법으로는 모바일 CSS에 별도의 font-weight 속성 지정, -webkit-font-smoothing: antialiased 적용 권장.
• 동일 CSS 적용에도 기기별 렌더링 차이 주의할 것.

7. 삼항 연산자 중첩 사용법과 가독성 팁

• 삼항 연산자를 이중으로 중첩해서 사용하는 코드는 가독성이 떨어지는 편임.
• 가독성을 위해 조건문(if)으로 분리하거나 함수로 뽑아내는 것을 권장.
• 문제는 중첩 자체보다 조건식이 복잡하거나 가독성을 해치는 방식임.
• 참고 자료: 중첩 삼항 연산자에 관한 글

8. 병원 및 건강 관련 직원 경험 공유

• 손가락에 물이 차는 증상(의학적으로 '방아쇠 수지' 가능성)이 수술 권고 사례 소개.
• 수술은 힘줄 통로를 열어 염증과 마찰을 해소하는 간단한 절개 절차임.
• 여러 동료들이 다양한 진료 및 병원 경험담 공유하며, 건강 관리 중요성 강조.

9. 모바일 폰 구매, 통신비 절약법

• 아이폰 16 프로와 갤럭시 사용 경험 공유 및 장단점 논의.
• 통신비는 알뜰폰 요금제와 일시불 기기 구매 조합이 저렴할 수 있음.
• 약정할인과 묶음 요금제 상황에 따라 최적 요금제가 달라짐.
• 무이자 할부도 좋은 선택이며, 할인 혜택을 잘 비교해야 함.

10. 업무 능력 향상과 커뮤니케이션 조언

• '일 잘하는 법'은 회사와 사람마다 기준이 다름.
• 꼼꼼한 일 정리, PR 준비, 불리한 상황 대비 등 기본기가 중요하다는 의견.
• 업무에 감정을 적게 쓰고, 책임감과 집중도를 높이는 태도가 필요.
• 상대방의 상태를 배려하는 진심 어린 관심(예: "괜찮으세요?" 질문)도 업무 분위기에 긍정적 영향.
• 커뮤니케이션이란 말하자면 "두괄식"으로 결론부터 명확히 하는 습관 권장.

면접팁⚡

• 리액트 상태관리 라이브러리 선택 이유에 대해 질문 받을 수 있음: 리코일의 메모리 누수 문제 및 유지보수 현황도 알고 있으면 좋음.
• 삼항 연산자 중첩 문제 해결법: 복잡한 조건문은 가독성을 위해 함수 또는 if문으로 분리할 것을 강조.
• Next.js 라우팅 변화에 대한 이해: 15버전부터 비동기 훅 도입과 앱 라우터 사용 권장 점 숙지할 것.
• 협업에서 꼼꼼한 PR과 사전 체크, 커뮤니케이션 방법(두괄식 등)을 언급하면 좋은 인상 가능.

링크🔗

• Next.js 15 릴리즈 노트: https://nextjs.org/blog/next-15-rc2
• 중첩 삼항 연산자 문제와 해결: https://medium.com/javascript-scene/nested-ternaries-are-great-361bddd0f340
• 관련 GitHub(Next.js RC): https://github.com/vercel/next.js/releases/tag/v15.0.0-rc.1
• 병원 수술 사례: https://m.blog.naver.com/zzang9ha/221616863113