react 썸네일react

2024-03-30

목차

  1. URL 입력 시 웹브라우저 내 처리 과정과 면접 답변 가이드
  2. 상태관리 라이브러리 비교 및 선택 팁
  3. Zustand 상태관리 라이브러리의 장단점 및 사용 경험
  4. 전역 상태관리 구조와 설계 고민
  5. 개발 공부 방법과 효율적인 학습 팁
  6. 일상과 개발자 삶에 대한 소소한 이야기

Zustand #면접팁 #웹기초 #네트워크 #개발공부 #개발자라이프 #리액트 #기술면접

1. URL 입력 시 웹브라우저 내 처리 과정과 면접 답변 가이드 🔍

  • 핵심 내용
    사용자가 브라우저에 URL을 입력하면 DNS 서버를 통해 도메인 이름을 IP 주소로 변환하는 과정부터 HTTP 요청과 응답까지 이뤄짐.
  • OSI 7계층과 네트워크 구조
    OSI 7계층 중 DNS는 애플리케이션 계층에서 작동하며 네트워크 계층은 IP 주소를 통해 데이터를 전달함.
  • CDN, GSLB, Health Check
    CDN(Contents Delivery Network)은 서버 부하 분산과 응답 속도 향상을 위해 콘텐츠를 여러 서버에 분산시킴.
    GSLB(Global Server Load Balancing)는 전세계 여러 서버에 부하를 균등하게 분산하는 기술이며, Health Check로 각 서버 상태를 점검함.
  • 면접 답변 팁
    • 5분 내에 답변할 때는 기본적으로 DNS → IP 변환 → HTTP 요청과 응답 순서만 설명해도 충분함.
    • 추가 기술(CDN, GSLB 등)은 질문이 나오면 답변하거나 꼬리질문에서 이야기하는 게 효과적임.
    • 과도한 설명은 면접관의 집중도와 흐름을 방해할 수 있으니 아는 만큼 간결히 말할 것.

2. 상태관리 라이브러리 비교 및 선택 팁 🗂️

  • 주요 라이브러리: redux-toolkit, zustand, recoil
  • redux-toolkit
    • 잘 정립된 생태계와 많은 서드파티 지원 있음.
    • 다소 러닝커브가 있고, 보일러플레이트 코드가 많다는 단점 존재.
  • recoil
    • 러닝커브가 낮고 atom 기반 상태 분리로 사용하기 편함.
    • 최근 개발 활동이 적어 프로젝트 지속 가능성이 아쉬움.
  • zustand
    • flux 패턴과 유사하지만 전역상태 관리를 간편하게 함.
    • 꾸준한 업데이트와 미래 가능성이 높아 선호도가 높음.
  • 면접 시 라이브러리 선택
    • 여러 경험 중 한 가지를 골라 선택한 이유와 장단점을 명확히 말하는 것이 좋음.
    • 단, 아는 척만 하지 말고 본인의 경험에 기반한 의견을 이야기하길 추천.

3. Zustand 상태관리 라이브러리의 장단점 및 사용 경험 ⚖️

  • 장점
    • 사용이 간편하고 상태 관리가 직관적임.
    • 공식 업데이트와 커뮤니티 유지가 활발함.
  • 단점
    • 공식 한글 문서가 부족해 영어 문서를 많이 봐야 해서 초보자에게 다소 진입 장벽이 있을 수 있음.
    • 상태(store)가 늘어나면 파일 수 증가와 구조가 복잡해질 가능성이 있음.
    • 상태 변경시 얕은 비교(shallow compare)를 사용해 변경 여부 판단해, 복잡한 경우 최적화가 필요할 수 있음.
  • 디버깅 및 구조 설계
    • store를 여러 개 만드는 패턴도 있지만 팀 내 커뮤니케이션 비용과 코드 유지보수를 고려해야 함.
    • 여러 slice를 합쳐 단일 store 형태로 관리하는 패턴도 있음.

4. 전역 상태관리 구조와 설계 고민 🏗️

  • 전역 상태관리 방식을 나누면
    • 단일 Store: 상태가 한 곳에 집중되어 가독성, 디버깅에 유리함. (예: redux)
    • 여러 Store / Atom: 각 기능별 상태 분리 가능, 관심사 분리에 효과적 (예: recoil atom, zustand slice)
  • 복잡성 고려
    • 여러 store를 만들면 코드가 분산돼 구조가 복잡해질 수 있음.
    • 하지만 관심사 분리 관점에서는 유리하므로 팀과 프로젝트 환경에 맞게 결정 필요.
  • 커뮤니케이션 비용
    • 패턴이 명확치 않거나 일관성 없으면 팀원 간 협업 효율이 떨어질 수 있음.

5. 개발 공부 방법과 효율적인 학습 팁 📚

  • 자기주도 학습 사이클
    • 구현 목표 설정 → AI 또는 인터넷 검색으로 코드와 정보 탐색 → 공식문서, 블로그, 깃허브 이슈 확인 → 모르는 점은 사람이나 AI에게 질문 → 부족하면 영상 강의나 책 활용
  • 효과적인 검색 & 문서 활용
    • 공식 문서 이해가 우선이며, 다양한 사례를 접해보는 것이 도움됨.
  • 학습 도구 비교
    • 강의는 인덱싱이 힘들고 특정 부분만 빠르게 찾아보기 어려움.
    • AI를 통한 요약이나 질문 활용이 효과적일 수 있음.
  • 개발 관련 자료 출처
    • AI, 공식문서, 벨로그, 티스토리, 유튜브, 책, 동료 개발자 등 다양하게 활용.
  • 꾸준한 실전 경험의 중요성
    • 실제 프로젝트 진행과 코딩 테스트 도전은 실력 향상에 필수적임.

6. 일상과 개발자 삶에 대한 소소한 이야기 ☕️

  • 밤샘 공부, 체력 관리, 운동의 중요성 언급됨.
  • 밥 먹어도 금방 출출해지는 일상고충 토로.
  • 개발자로서 주말 출근, 알바, 일상 소통 등 친근한 대화 분위기.
  • 동료간 간단한 농담과 격려 섞인 이야기로 릴렉스한 분위기 형성됨.

면접팁⚡

  • 네트워크, URL 처리 관련 질문
    • 면접 시 5분 이내 답해야 할 때는 DNS → IP 변환 → HTTP 요청/응답 순서로 간단하고 명확하게 설명할 것.
    • 추가적인 CDN, GSLB 등의 고급 내용은 질문 시 보충 설명으로 활용.
  • 상태관리 라이브러리 선택과 관련해서
    • 경험한 라이브러리를 솔직하고 명확하게 언급하고, 장단점을 자신의 경험 기반으로 설명하길 권고.
    • 모르는 부분은 과도하게 말하지 말고, “모르지만 배우고 싶다”는 마음가짐을 피력하는 것이 좋음.
  • 답변은 간결 명료하게, 질문에 맞게
    • 핵심 위주로 답변 후 꼬리질문에 차근차근 응답, 논지를 흐리지 않는 것이 중요.

링크🔗

#React#상태관리#Zustand#면접팁#웹기초#네트워크#개발공부#개발자라이프#리액트#기술면접