COMMIT.chat
View Bookmarks
react 썸네일react

2024-01-24

목차

  1. 서버 500 에러 및 인증 문제
  2. React 쿼리 및 Next.js useSearchParams 이슈
  3. 이미지 파일명 처리와 관리 팁
  4. 연봉 협상 및 이직 이야기
  5. 개발 면접 준비와 코딩 테스트 전략
  6. 블록체인 개발 현황과 경험 공유
  7. 개발 도구와 라이브러리 설정 경험
  8. 프로젝트 관리 및 아키텍처 이해
  9. 개발자의 건강과 워라밸 이야기
  10. 기타 개발 관련 Q&A 및 잡담

1. 서버 500 에러 및 인증 문제 🔧

  • 500 에러는 서버에서 예상하지 못한 오류가 발생한 상태를 의미함.
  • 클라이언트 요청이 잘못되어 처리 못하는 경우는 400번대(주로 400 Bad Request)로 처리해야 함.
  • 원인 파악 방법: 서버 로그 확인, 토큰 전달 여부 및 만료 여부 점검 필수.
  • 로그인 세션 풀림 문제는 서버 인증 로직이나 토큰 만료와 연관됨.
  • 백엔드 개발자와 긴밀히 협업하여 인증 관련 문제의 근원을 찾아야 함.

[초보자 팁]: HTTP 상태코드는 클라이언트와 서버 간 통신에서 상태를 알리는 숫자입니다.
500번대 에러는 서버 문제, 400번대는 클라이언트 문제로 이해하면 됨.

2. React 쿼리와 Next.js useSearchParams 이슈 ⚛️

  • useSearchParams 훅은 클라이언트 사이드 렌더링(CSR) 환경에서 동작함.
  • Next.js 13 이상의 서버 컴포넌트에서는 직접 useSearchParams를 사용할 때 에러가 발생할 수 있음.
  • 해결법: 해당 컴포넌트를 Suspense로 감싸거나, CSR 전용으로 처리("use client";)해야 함.
  • Suspense는 React에서 비동기 처리를 감싸는 컴포넌트로, 데이터 로딩 등의 작업이 완료될 때까지 대기하는 역할을 함.

[초보자 팁]: SSR(Server-Side Rendering)은 서버에서 HTML을 렌더링하는 방식, CSR은 클라이언트 브라우저에서 렌더링하는 방식을 의미함.
Next.js는 둘을 섞어 쓰는데, 기능별로 어느 환경인지를 의식하고 코드를 작성해야 함.

3. 이미지 파일명 처리와 관리 팁 🖼️

  • 긴 이미지 파일명을 배열로 관리하는 대신, 이름을 새롭게 정해 저장하는 방법 추천.
  • 랜덤값이나 규칙적인 네이밍으로 변경하면 파일명 중복이나 충돌 문제를 방지할 수 있음.
  • 단, 특정 규칙이 반드시 지켜져야 한다면, 무작정 파일명을 변경하는 것은 위험할 수 있음.
  • 저장소에서는 AWS S3 같은 클라우드 스토리지를 이용하고, 접근 권한 관리(IAM)와 키 관리(KMS)가 중요함.

4. 연봉 협상 및 이직 이야기 💰

  • 중소기업 연봉은 케이스별로 크게 편차가 있으며, 평균 7천만 원 내외라는 의견도 존재.
  • 연봉 협상 시 준비된 근거가 매우 중요함. 단순 요구는 효과가 적음.
  • 주변 시세, 자신의 업무 기여도, 시장 상황 등을 고려한 객관적 자기 평가 필요.
  • 이직 시 연봉 점프 사례가 많으며, 특히 초기 경력자일수록 이직으로 급격한 상승이 가능함.
  • 6개월 이상 근무 기록이 중요하며, 짧은 재직 기간은 이직 시 감점 요인이 될 수 있음.

5. 개발 면접 준비와 코딩 테스트 전략 📝

  • 신입·초보자는 토스, 당근마켓 같은 기업의 하반기 채용을 준비하며, 기업별 난이도 차이를 고려해야 함.
  • 영어 면접과 코딩 테스트(코테)를 준비하는 경우가 많으며, 체계적 준비 필요.
  • 라이브 코딩 테스트(Live Coding)는 실무와 흡사한 환경으로 연습하는 것이 좋음.
  • 면접 준비 시 기술 능력과 함께 자기소개, 협업 경험 등도 중요하게 평가됨.

6. 블록체인 개발 현황과 경험 공유 ⛓️

  • 블록체인 개발도 웹, 서버, 앱 개발과 동일한 요청-응답 패턴을 가짐.
  • 스마트 컨트랙트 작성은 플랫폼(이더리움 외 TON, ICP 등)에 따라 언어와 도구가 다름.
  • 보안상 개인키는 절대 평문으로 저장하지 않고, 키 쪼개기(Shamir's Secret Sharing) 등 암호화 관리 권장.
  • 블록체인 자체가 신뢰(Trustless)를 위한 기술이지만, 운영 체계와 보안 관리가 쉽지 않음.

7. 개발 도구와 라이브러리 설정 경험 🛠️

  • Flowbite-React와 같은 UI 라이브러리는 TailwindCSS 설정 여부에 따라 디자인 표시가 달라짐.
  • Vite, Next.js, React 프로젝트에서 Tailwind 사용 시 tailwind.config.js에 content 설정이 중요함.
  • AWS CodeCommit, CodeBuild 등 AWS Code 시리즈를 사용하는 이유는 GitHub Actions 대비 AWS 리소스 접근과 관리가 용이하기 때문.
  • 개발환경 세팅 오류는 대부분 휴먼오류가 많아 꼼꼼한 설정 점검 권장.

8. 프로젝트 관리 및 아키텍처 이해 🏗️

  • Node.js + Express, MySQL, SpringBoot는 충분한 백엔드 스택으로 평가됨.
  • 한 프로젝트 내에서 Node.js와 SpringBoot를 굳이 같이 쓸 필요는 없으며, 아키텍처 설계가 중요함.
  • 프론트엔드에서 백엔드를 연동할 때 직통연결 vs 컨트롤러-서비스-레포지토리 계층 관리 차이를 이해해야 함.
  • SI 프로젝트 경험이 많은 개발자들은 리팩토링과 코드 개선 과정에서 겪는 어려움과 성장기를 공유함.

9. 개발자의 건강과 워라밸 🏃‍♂️

  • 개발 능력만큼이나 신체 건강이 중요하며, 운동과 자기관리를 강조.
  • 집중력 유지와 스트레스 감소를 위해 운동 습관 권장.
  • 야근과 장시간 작업이 잦은 환경에서 자기관리와 휴식 필요성 토론.
  • 키보드 청소 및 윤활 작업도 파트 타임(?) 개발자의 일상 중 하나로 언급됨.

10. 기타 개발 관련 Q&A 및 잡담 💬

  • 도메인 서브도메인 추가 시 DNS 업체 및 서버 설정 모두 필요함.
  • React-query와 Next.js fetch 기능 차이에 대한 질문이 있었으며, Next.js는 SSR 캐싱의 장점이 있어 React-query 필수는 아님.
  • 개인 오픈챗 운영 경험과 닉네임 관리, 오타 등 소소한 토론.
  • 다양한 라이브러리 추천(예: datepicker), UI 프레임워크 부트스트랩과 테일윈드 차이, 개발환경 세팅 에러 등 실무 팁 공유.
  • 개발자의 자존감과 긍정적 사고법, 공부와 현실 직면의 중요성 강조.

면접팁⚡

  • 서버 에러 해석 능력: 500번대는 서버 문제, 400번대는 클라이언트 문제임을 명확히 이해하고 설명할 수 있어야 함.
  • Next.js SSR/CSR 이해: useSearchParams와 같은 훅은 클라이언트 전용임을 알고, 서버 컴포넌트와의 혼용 시 발생하는 오류를 설명할 수 있어야 함.
  • 코딩 테스트 준비: 전략적으로 기업별 난이도를 파악하고, 반복 학습과 실전 연습을 병행할 것.
  • 연봉 협상 전략: 구체적 성과, 시장 상황, 자기 역할 등을 바탕으로 논리적 근거 제시 중요.
  • 개발 아키텍처 지식: 프론트엔드와 백엔드 간 계층 구조 차이점, 효율적 아키텍처 설계 경험 공유 가능하면 유리함.

링크🔗

#React#NextJS#API#인증#코딩테스트#연봉협상#블록체인#개발도구#이미지관리#개발자팁
이전 포스트

2024-01-23

2024년 1월 23일
다음 포스트

2024-01-25

2024년 1월 25일