COMMIT.chat
View Bookmarks
react 썸네일react

2024-05-16

목차

  1. 패키지 및 호스팅 서비스 이야기
  2. React 상태 관리와 useEffect 의존성 문제
  3. AWS Summit과 업무 관련 소소한 대화
  4. React에서 로그인 상태 유지 방법과 보안 이슈
  5. Next.js 인증·인가와 서버 컴포넌트, 서버 액션 이해하기
  6. React 프로젝트 내 특정 폴더명(import 문제) 이슈
  7. 개발 경력(년차) 표현과 문화 이야기
  8. 개발 환경: VSCode, 모니터 세팅, 라이브러리 충돌 및 버전 문제
  9. React Native, Expo 질문 및 답변
  10. 소소한 개발자 일상과 잡담 정리

1. 패키지 및 호스팅 서비스 이야기

  • GoDaddy, 가비아 등 호스팅 서비스가 언급됨.
  • GoDaddy가 가장 많이 사용하는 편이라는 의견이 있었음.

2. React 상태 관리와 useEffect 의존성 문제

  • React에서 상태(State) 객체가 바뀔 때 깊은 복사(deep copy)를 하지 않으면 상태 변경이 감지되지 않는 경우가 있음.
    • 상태를 업데이트 할 때, 기존 객체를 그대로 참조하면 React가 변경을 인지하지 못함.
    • 따라서, state를 업데이트할 때는 변경된 부분을 복사해서 새로운 객체를 만들어야 함.
  • useEffect 훅의 의존성 배열에 객체를 넣으면, 객체가 참조 타입이므로 내부 값이 바뀌지 않아도 매번 실행될 수 있음.
    • 의존성 배열에 [obj.key, obj.key2]와 같이 구체적 프로퍼티를 명시하는 방법으로 이를 방지할 수 있음.
  • 비동기 내부에서 state setter를 사용하는 패턴이 문제를 일으킬 수 있으니 주의해야 함.
  • effect는 의존성 배열에 따라 실행 시점이 달라짐. 라이브러리나 React 버전마다 실행 방식이 다를 수 있음.

3. AWS Summit과 업무 관련 소소한 대화

  • 'AWS Summit Seoul' 행사에 관한 간단한 대화가 오감.
  • 업무 중 스팸 문자 차단 때문에 불편함이 있었다는 이야기.
  • 주 4일제와 관련된 희망과 현실 이야기, 주 4일제 시행 후 업무 강도가 꽤 높아지는 경험을 공유함.

4. React에서 로그인 상태 유지 방법과 보안 이슈

  • 페이지 새로고침 시 로그인 사용자 ID 유지 문제.
  • 일반적으로 JWT 토큰은 로컬 스토리지에 저장하지만 보안상 위험(XSS 공격)에 노출됨.
  • 보안팀 권장사항은 토큰을 쿠키에 저장하는 것.
  • 토큰 만료시간을 체크해 유효성 검증 후 갱신하거나 로그아웃 처리하는 방법.
  • App 컴포넌트 최초 렌더링 시 토큰 유무를 확인하여 상태를 복원하는 것이 보통의 패턴.
  • 참고로 React에서 로컬 스토리지에 대해 주의가 필요하며, 토큰 보안은 최우선 고려사항임.

초보자도 알기 쉽게!

  • XSS (크로스 사이트 스크립팅): 악성 스크립트를 웹페이지에 삽입해 사용자의 정보를 탈취할 수 있는 공격 방법.
  • JWT (JSON Web Token): 서버와 클라이언트 간 인증 정보를 안전하게 전달하는 토큰 방식.
  • 로컬 스토리지는 쉽게 접근 가능해 공격에 취약하므로 중요한 정보는 쿠키(적절히 설정한 HttpOnly, Secure 옵션 포함)에 저장하는게 안전.

5. Next.js 인증·인가와 서버 컴포넌트, 서버 액션 이해하기

  • Next.js의 app router에서 서버 컴포넌트(Server Component)와 클라이언트 컴포넌트(Client Component)의 역할이 중요함.
  • 서버 컴포넌트는 서버에서 렌더링되는 컴포넌트이며, 클라이언트 컴포넌트는 브라우저에서 동작하는 컴포넌트임.
  • 폼(form) 제출은 보통 클라이언트 컴포넌트에서 처리하지만, Next.js의 서버 액션(Server Action)을 사용하면 서버 컴포넌트 안에서 서버측 로직을 선언하고 클라이언트 컴포넌트에서 호출 가능함.
  • 서버 액션은 비동기 함수이며, React의 experimental 기능으로 아직 정식으로 안정적 사용이 확립되지는 않았지만 발전 중임.
  • 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 분리해서 작성해야 하며, 서버 컴포넌트 내에서 클라이언트 컴포넌트로 기능을 넘기는 패턴이 중요함.
  • 인증 처리 역시 서버에서 하도록 설계하는 것이 보안상 좋음.

6. React 프로젝트 내 특정 폴더명(import 문제) 이슈

  • constants 폴더명을 사용하는 도중, import가 안 되는 문제 발생.
  • 이유는 Node.js 기본 모듈과 이름이 충돌하기 때문임.
    • Node.js 기본 모듈에 constants라는 이름이 존재해, 동일 폴더명을 import할 때 충돌이 생겨 경로 해석 문제 발생.
  • 해결 방법:
    • 폴더명을 constant 같은 다른 이름으로 수정하거나
    • alias 설정(tsconfig.json 또는 jsconfig.json)에서 경로 충돌을 회피하는 방법.
    • npm install @types/node를 통해 타입 정의를 명확히 하면 에디터가 올바르게 인식 가능.
  • 이런 문제는 모듈 네임 스페이스 충돌(Module Name Collision) 또는 네이밍 충돌로 표현될 수 있음.

7. 개발 경력(년차) 표현과 문화 이야기

  • "0년차" 개발자는 있을 수 없는 표현이라는 의견과, 경력 산정이 모호하다는 논의.
  • 경력 산정은 보통 실제 일한 기간(365일 단위)로 하지만 업계나 개인마다 다를 수 있음.
  • 신입, 초년 등으로 표현하는 경우가 많고, 경력 년차를 구체적으로 따지는 문화는 차이가 있음.
  • 예를 들어, 1년차는 만 1년이 지난 사람, 2년차는 만 2년이 지났을 때.
  • 경력 개념과 비슷한 예시로 임신 주차나 한국 나이 같은 사회적 기준 비유가 나왔음.

8. 개발 환경: VSCode, 모니터 세팅, 라이브러리 충돌 및 버전 문제

  • VSCode 업데이트 알림이 계속 떠서 불편함, 재설치를 권장하는 의견.
  • 모니터 사이즈 및 피벗(pivot) 기능 사용에 대한 경험 공유 (24", 27", 32" 조합 추천).
  • 라이브러리 충돌 또는 path 문제 해결을 위해 node_modules 삭제 후 재설치, 의존성 하나씩 제거하며 문제 찾기 권장.
  • Tailwind CSS로 레이아웃 작업 후 MSW(Mock Service Worker)와 GraphQL 조합 시도 경험 공유.
  • 여러 프로젝트, 레포지토리를 한 번에 열어 작업할 경우 노트북 사양 문제 언급.
  • GitHub 비공개 저장소 문제와 코드 리뷰 요청 시 공유 문제도 거론됨.

9. React Native, Expo 질문 및 답변

  • Expo에서 package.json 버전 설정 관련 팁:
    • 버전을 직접 입력하는 대신 "*" 같은 와일드카드 문자 사용 시 자동으로 최신 버전을 불러올 수 있음.
  • React Native에서도 React와 유사한 패턴이지만, 특정 제한사항은 없고 질문 자유롭게 가능함.
  • React Native 프로젝트에서 constants 폴더 import 문제와 관련한 문의.
  • Expo, React Native 커뮤니티에서 유용한 정보들이 공유됨.

10. 소소한 개발자 일상과 잡담 정리

  • 오프라인 행사, AWS Summit, 팬미팅 등 개발자 커뮤니티 활동 언급.
  • 개발 업무, 야근, 주말 출근, 일과 삶 균형 고민.
  • 웃음 섞인 농담, ‘연봉’, ‘데이트 비용’, ‘훈훈한 사무실 분위기’ 등 다양한 이야기.
  • 게임 ‘얼라이언스 vs 호드’ 밈, 드립 대화.
  • 치킨, 돈까스 같은 음식 이야기와 함께 이모티콘 활용한 대화.
  • GPT 활용 팁, 코파일럿에 대한 기대감과 스니펫 작성법.
  • 개발을 처음 시작하는 초보자들이 겪는 질문과 응원.

면접팁⚡

  • React 상태 관리에서 깊은 복사의 중요성: 상태 변경 시 참조가 아닌 새로운 객체를 만들어야 React가 변경을 감지함을 정확하게 설명할 수 있어야 함.
  • JWT 토큰 저장 방식과 보안 문제: 로컬 스토리지와 쿠키 저장의 차이점, XSS 공격 위험성, 서버 검증 패턴을 이해하고 설명하기.
  • Next.js 서버 컴포넌트와 서버 액션 활용법: SSR과 CSR의 차이, 데이터 처리의 위치 분리, 인증 처리 권장 방식에 대한 이해도 중요.
  • 모듈 네이밍 충돌 문제 해결 경험 공유: 프로젝트에서 발생할 수 있는 네이밍 충돌 문제와 해결법을 구체적으로 언급할 것.
  • 경력(년차 기준) 표현에 관한 유연한 이해: 면접에서 경력 산정 방식에 관해 현업 분위기와 문화를 염두에 두고 답변하기.

링크🔗

#React#NextJS#JWT#useEffect#서버액션#ReactNative#인증#로그인#개발년차#AWS
이전 포스트

2024-05-15

2024년 5월 15일
다음 포스트

2024-05-17

2024년 5월 17일