react 썸네일react

2024-07-13

목차

  1. 함수의 인자 사용과 코드 가독성에 대한 고민
  2. 모노레포에 기존 저장소 추가 방법
  3. API 설계: 헤더용 알림 개수 처리 방법
  4. 근로 계약서 작성 시 주의사항
  5. 포트폴리오 제작 관련 고민과 팁
  6. 여러 컴포넌트에서 함수 사용 위치에 대한 의견
  7. 비밀번호 변경 프로세스 설계 의문
  8. 사이트 디자인 평가 및 개선점 공유
  9. 아임웹(노코드 솔루션) 한계와 대응
  10. 에어컨과 전기료, 건강 관련 짧은 의견

1. 함수의 인자 사용과 코드 가독성에 대한 고민

  • 질문: 함수 내부에서 사용하는 상태값이나 변수를 모두 함수의 매개변수로 받을지, 컴포넌트 블록 내에서 직접 참조할지 논쟁 발생.
  • 핵심 내용
    • 함수의 순수성(pure function) 유지를 위해서는 인자로 모두 받는 것이 맞음.
    • 하지만 사이드 이펙트를 일으키는 액션 함수는 꼭 인자로 받지 않아도 된다는 의견도 있음.
    • 인자로 모두 받으면 코드 가독성이 떨어질 수 있다는 지적도 있음.
  • 설명:
    • 순수 함수란 외부 상태에 의존하지 않고, 입력만으로 결과를 내는 함수다. 순수함수는 테스트와 유지보수가 쉽지만, 모든 상태를 인자로 넘겨야 해서 코드가 복잡해질 수 있음.
    • 반대로 컴포넌트 내부 상태를 그대로 사용하면 코드가 간결해지지만, 함수 테스트가 어려워지고 의존성이 증가함.
  • 의견: 상황과 팀의 코드 스타일에 따라 달라질 수 있으니, 명확한 기준이 없으면 팀 내 협의가 필요함.

2. 모노레포에 기존 저장소 추가 방법

  • 질문: Turborepo 기반 모노레포에 기존 저장소를 apps 경로에 추가하는 방법에 대한 궁금증.
  • 제안
    • 기존 저장소를 직접 드래그하거나 클론(clone)하는 방법.
    • **Git 서브모듈(Submodule)**이나 서브트리(Subtree) 기능 활용도 추천됨.
  • 설명
    • 서브모듈은 별도의 Git 저장소를 현재 프로젝트 내에 하위 모듈로 포함시키는 방식.
    • 서브트리는 외부 저장소 내용을 현재 저장소 내로 병합해 관리하는 방식.
  • 팁: 각 방법마다 장단점이 있으니 검색 후 팀 필요에 맞는 방식을 선택하는 게 좋음.

3. API 설계: 헤더용 알림 개수 처리 방법

  • 고민: 헤더에 표시할 알림 개수를 위해 별도의 API를 만들지, 기존 마이페이지(MyPage) API에 포함시킬지 결정 필요.
  • 논의 내용
    • 한쪽 의견: 도메인 별 API를 나누는 것이 유지보수에 유리.
    • 다른 쪽 의견: 내 정보 조회 영역인 마이페이지 API에 알림 개수를 포함하는 것이 자연스러움.
    • GraphQL(GQL)을 쓰면 필요한 데이터만 조합해서 받을 수 있어 해결된다는 제안도 나옴.
  • 설명:
    • API를 너무 작게 쪼개면 호출이 잦아져 성능 이슈가 생기고, 너무 크게 하면 필요 없는 데이터까지 받아 불필요한 트래픽 발생.
    • GraphQL은 클라이언트가 필요한 데이터 스키마를 요청해 효율적으로 데이터를 받을 수 있음.
  • 팁: 서비스 구조와 요구사항에 따라 API를 적절히 분리하거나 통합하되, 중복 호출과 유지보수를 고려해 설계해야 함.

4. 근로 계약서 작성 시 주의사항

  • 주제: 중소기업 근로 계약 시 주의할 점과 확인해야 할 사항 질문.
  • 의견 요약
    • 계약서 작성은 기본이며, 인사 담당자가 설명과 사본을 제공함.
    • 퇴직금 포함 연봉(퇴포) 등의 조건이 있는지 반드시 확인할 것.
    • 이상한 점 있으면 바로 얘기하거나 빠르게 대응 권유.
  • 추가 조언
    • 연봉 외 수당, 근무 조건, 계약 기간, 퇴직금 규정 등 꼼꼼히 살필 것.
    • 계약서 내용을 잘 이해 못 할 때는 주변 조언이나 법률 상담 받는 것이 좋음.

5. 포트폴리오 제작 관련 고민과 팁

  • 상황: 내일까지 포트폴리오 및 자기소개서 제출 예정. 디자인부터 막막함.
  • 의견
    • 생성형 AI 활용해 디자인 또는 초안 빠르게 만드는 방법 제안.
    • 포트폴리오는 단순 디자인보다는 프로젝트 목적, 역할, 사용 기술, 성과 등을 명확히 기술하는 것이 중요.
    • 컴포넌트별 구분, 각 세션 나누기 등은 필수는 아니지만 가독성에 도움됨.
  • 팁:
    • Next.js 같은 프레임워크 활용하면 기본 UI/UX 템플릿 빨리 구성 가능.
    • 자신의 경험과 목표가 잘 드러나도록 작성할 것.

6. 여러 컴포넌트에서 함수 사용 위치에 대한 의견

  • 질문: 여러 컴포넌트에 걸쳐 사용될 함수는 어디에 정의하는 편이 좋은가?
  • 의견
    • 여러 컴포넌트에서 자주 쓰는 함수는 컴포넌트 외부에 선언하는 게 맞음.
    • 1회성 함수라면 컴포넌트 내에 작성해도 문제 없음.
    • 상태 관리 도구(ex. Redux Toolkit, RTK)의 리듀서를 쓰면 액션과 상태 관리를 편하게 할 수 있다는 추천도 있었음.

7. 비밀번호 변경 프로세스 설계 의문

  • 질문: 본인 인증 후 인증번호 입력 → 임시 비밀번호 메시지 송신 → 임시 비밀번호로 비밀번호 변경 화면 접근. 보통은 인증번호 하나만 보내는데 왜 임시 비밀번호까지 주는지 궁금.
  • 예상 설명:
    • 임시 비밀번호 방식은 인증 후 바로 로그인할 수 있도록 하는 프로세스.
    • 보안 강화를 위해 재인증 절차를 두는 경우도 있으므로 운영 정책 따라 다름.
  • 참고: 서비스마다 비밀번호 변경 흐름이 다르므로, 사용자 편의와 보안을 적절히 맞춰 설계함.

8. 사이트 디자인 평가 및 개선점 공유

  • 평가 대상: https://aiinnovate.co.kr (아임웹으로 제작)
  • 지적 사항
    • PC버전 햄버거 메뉴 글씨 작음 → 크기 및 굵기 키움.
    • 모바일 검색 아이콘 옆 공간 부족.
    • 로그인 모달 UX 어색함.
    • 사이트 전체적으로 여백 부족해 답답한 느낌.
    • 메뉴·대제목 간 여백 추가 필요.
  • 반영 상황
    • 글씨 크기 15pt → 17pt 혹은 19pt로 조정함.
    • 여백 추가 및 주요 UI 요소 디자인 통일 진행 중.
  • 참고:
    • 아임웹과 같은 노코드 툴은 특정 커스터마이징 한계 존재.
    • 섹션 배치 이동 등 횡력 제약을 팀에서 건의하거나 외부 도구로 보완 가능.

9. 아임웹(노코드 솔루션) 한계와 대응

  • 문제점
    • 섹션 간 위치 조정이 제한적.
    • 일부 UI 요소의 자유도 낮음.
  • 대응 방법
    • 추가 섹션 생성 후 위치 재조정 시 애로사항 발생.
    • 개선 요청 사항을 서비스 제공사에 건의.
    • 필요 시 별도 HTML/CSS 커스텀 또는 다른 툴 검토.

10. 에어컨과 전기료, 건강 관련 짧은 의견

  • 대화 중 간단한 팁 공유:
    • 에어컨 틀기를 아껴서 전기료 절약하다가 건강 문제 생기는 것보다
    • 적절하게 시원하게 사용하는 것이 비용대비 효율적이고 건강에도 좋다는 의견이 있었음.

면접팁⚡

  • 함수 설계 시 순수함수 개념 설명 가능해야 함.
  • API 설계 시 도메인 구분과 GraphQL 장점 언급하기.
  • 근로 계약 관련 기본 상식 익혀두기.
  • 포트폴리오 작성 시 프로젝트 목적 및 역할 명확하게 표현하는 요령 강조.
  • 함수 위치(컴포넌트 내부 vs 외부) 결정 시 기준과 이유 제시할 수 있으면 좋음.

링크🔗

#프론트엔드#API설계#모노레포#근로계약#포트폴리오#함수설계#비밀번호보안#UI디자인#노코드#개발팁