2024-04-03

목차

1. Git 브랜치 실수 작업 복구 방법
2. Next.js SSR과 CSR, 좋아요 갯수 실시간 반영 이슈
3. IDE 및 개발 환경 선호 관련 대화
4. Next.js Redirect 캐싱 문제와 해결법
5. CSS line-height 이슈 및 해결 팁
6. 전화번호에서 국가 코드 추출 관련
7. 깃(Git) 협업과 퍼블리셔 실무 경험 토론
8. React 컴포넌트 패턴 - 컴파운드 컴포넌트 & 슬롯
9. Storybook SVG import 오류 해결 사례
10. 초보 리액트 & 비동기 데이터 처리 조언

1. Git 브랜치 실수 작업 복구 방법

• 상황: 1번 브랜치에서 작업하다가 커밋/푸시 없이 2번 브랜치에서 작업해야 하는데 실수로 작업함.
• 해결법: 커밋하지 않은 변경 사항은 git stash 명령어로 임시 저장 가능.
  • 작업 내용 저장: git stash
  • 옮길 브랜치로 이동: git checkout 2번브랜치
  • 저장한 작업 복원: git stash pop
• git stash는 변경사항을 임시로 숨겨 다른 브랜치로 쉽게 작업을 옮길 수 있는 기능임.

2. Next.js SSR과 CSR, 좋아요 갯수 실시간 반영 이슈

• 배경: 게시판 리스트와 게시물 상세 페이지에서 좋아요 수가 실시간으로 바뀌어야 함.
• SSR(Server Side Rendering)은 페이지 최초 요청 시 서버에서 렌더링하는 방식으로, 초기 로드에 적합.
• CSR(Client Side Rendering)은 브라우저에서 동적으로 데이터 갱신 가능.
• Next.js는 SSR과 CSR을 조합 사용 가능함 (Hybrid Rendering).
• 좋아요 수 즉각 반영 위해:
  • 상세 페이지에서 좋아요 클릭 후 게시판 페이지에서 API 재요청(refetch) 필요.
  • React Query 등의 라이브러리 사용 시 refetchOnWindowFocus 등 옵션 활용 가능.
  • Next.js의 soft navigation(페이지 전환 시 전체 새로고침 없이 화면만 교체) 활용하여 상태 유지 가능.
• ISR(Incremental Static Regeneration)은 정적 페이지를 주기적으로 갱신해 SSR과 유사 결과를 냄. 다만, 서버 사이드에서만 재생성 가능해 실시간성에는 한계 있음.
• 결론적으로, "좋아요" 같은 실시간 데이터는 CSR 또는 API 재호출 방식으로 처리함.

3. IDE 및 개발 환경 선호 관련 대화

• VSCode와 IntelliJ 사용 현황 공유
  • VSCode는 가볍고 확장성이 좋아 프론트엔드 개발자 선호도가 높음.
  • IntelliJ는 자바 및 백엔드 개발에 강점 있으며, 타입스크립트가 많아질수록 무거울 수 있음.
• IDE 선택은 개인 취향과 프로젝트 성격에 달림. 둘 다 충분히 사용 가능.
• 학생과 직장인 개발자 사이에서도 IDE 선호 차이가 있음.

4. Next.js Redirect 캐싱 문제와 해결법

• 문제: next.config.js에서 redirect 설정을 바꿨는데 이전 설정이 계속 동작함.
• 원인: Next.js가 redirect를 영구(permanent) 캐싱하는 경우가 있음.
• 해결 방법:
  • permanent: false 설정 후 다시 빌드 및 캐시 삭제
  • node_modules/.next 폴더 삭제 및 재빌드(개발 서버 재시작)
• Next.js의 redirect 설정 변경 시 캐싱 문제는 자주 발생하는 이슈임.

5. CSS line-height 이슈 및 해결 팁

• 특정 UI에서 텍스트가 수직 중앙 정렬 안 될 때 line-height 영향 고려.
• line-height 속성은 텍스트의 행간 높이 설정으로, 텍스트가 위아래로 치우칠 수 있음.
• 해결법:
  • 텍스트를 감싼 태그에 line-height: 1 또는 적절한 수치로 조절해본다.
  • CSS align-items: center만으로 정렬이 안 된다면 line-height를 확인해야 함.
• 타입스크립트, 리액트 스타일 객체에서도 lineHeight 프로퍼티로 지정 가능.
• 브라우저 기본 스타일, 폰트 크기, 대문자 포함 여부에 따라 line-height가 다르게 동작할 수 있으니 주의.

6. 전화번호에서 국가 코드 추출 관련

• 전화번호만 보고 유저 국가 추론은 어려움.
• 국가별 전화번호 코드가 중복되는 예외 케이스 존재.
• 대표적인 JS 라이브러리로 libphonenumber-js 사용 추천.
• 권장 방식은 전화번호와 별도로 국가 코드(ISO 코드)를 함께 전달하여 정확한 처리.

7. 깃(Git) 협업과 퍼블리셔 실무 경험 토론

• 일부 퍼블리셔가 Git을 사용하지 않고 FTP나 백업 파일로 작업해 협업 난항 경험 공유.
• Git 사용은 협업 필수이며, 최소한 기본 명령어 익히기가 중요.
• 협업 시 커밋 메시지 및 작업 영역 주석 활용 권장.
• 대체로 국비 교육 및 좋은 회사에서는 Git과 협업 문화 교육함.
• 제대로 된 협업문화가 엔지니어러 성장에 필수임.

8. React 컴포넌트 패턴 - 컴파운드 컴포넌트 & 슬롯

• 질문: 부모 컴포넌트에서 자식 컴포넌트를 props로 구분 지어 넣는 방식이 많이 쓰이는지?
• 답변:
  • 컴파운드 컴포넌트(Compound Component) 패턴: 관련된 컴포넌트를 합성하여 하나의 큰 컴포넌트처럼 사용함.
  • 슬롯(Slot) 개념은 뷰(Vue)에서 유래, 특정 위치에 자식 컴포넌트를 꽂아넣는 메커니즘.
• React도 비슷한 개념으로 props.children이나 별도의 props로 컴포넌트 전달해 UI 구성을 만듦.
• 폼(form) 컴포넌트 등에서 자주 사용.

9. Storybook SVG import 오류 해결 사례

• Storybook 사용 시 SVG import가 undefined로 나오는 현상 보고.
• 원인: Webpack 설정이 누락되었거나 SVG 로더가 제대로 적용 안 된 경우.
• 해결법:
  • main.ts(또는 main.js) 파일에 SVG 로더 설정 추가
  • 공식 관련 이슈 및 문서 참고: https://github.com/storybookjs/storybook/issues/6188
• SVG를 컴포넌트처럼 임포트하려면 @svgr/webpack 같은 로더가 필요함.

10. 초보 리액트 & 비동기 데이터 처리 조언

• 데이터가 JSON 등 정적 파일에서 로드될 땐 비동기 처리 없이 바로 map 메서드 사용 가능.
• API 호출 등 비동기 상황에선 useEffect 내부에서 async/await로 호출하고 상태 업데이트 필요.
• map 돌릴 때는 데이터가 존재하는지 체크(data && data.map(...)) 또는 기본값 배열 설정 필요.
• 매핑 시마다 key 속성 지정은 React 성능과 안정성에 필수.

면접팁⚡

• SSR과 CSR 개념 명확히 이해하기: Next.js가 어떻게 두 방식을 혼합하는지 설명할 수 있어야 함.
• Git 실무 경험: stash, branch, reset 등 명령어 활용 사례 설명 가능하면 플러스.
• React 컴포넌트 디자인 패턴(컴파운드 컴포넌트, 슬롯 등)에 대해 알고 있으면 면접에서 좋은 인상.
• CSS 문제해결 능력: line-height, flex 정렬 등 기본 CSS 속성 조절로 UI 문제 해결 경험 강조.
• 협업 경험: Git과 협업 도구 사용 경험, 특히 퍼블리셔 등 비개발자와 협업한 경험도 어필 가능.

링크🔗

• Next.js permanent redirect 이슈 및 해결: https://velog.io/@hyevvy/Next.js%EC%9D%98-permanent
• Storybook SVG undefined 문제 사례: https://github.com/storybookjs/storybook/issues/6188
• libphonenumber-js (전화번호 국가코드 처리 라이브러리): https://github.com/catamphetamine/libphonenumber-js
• 컴파운드 컴포넌트 패턴 소개: 검색 키워드 - "React Compound Components Pattern"
• Next.js 공식문서 캐싱 및 데이터 패칭: https://nextjs.org/docs/basic-features/data-fetching