COMMIT.chat
View Bookmarks
react 썸네일react

2024-01-30

목차

  1. 사수 부재와 자기개발 경험 공유
  2. React 상태관리와 URL 동기화 이슈
  3. Next.js 14의 SSR(Server Side Rendering) vs React Query 활용 논쟁
  4. 난독화(Obfuscation)와 보안, 성능 이슈
  5. 인피니티 스크롤 및 React Query 활용 경험
  6. 개발 환경 및 하드웨어 조립 경험 공유
  7. 다양한 개발 도구와 에디터 사용 경험
  8. React 및 TypeScript 기초질문과 답변
  9. 면접 준비와 이직 경험 공유
  10. 개발자들의 일상과 소소한 이야기

1. 사수 부재와 자기개발 경험 공유 👨‍💻

  • 사수가 없는 개발 환경에서 일하면서 위기감을 느끼는 경험이 많았음.
  • 사수가 없으면 업무 지시가 힘들고, 윗사람이 비개발자일 경우 소통이 어려워 더 힘듦.
  • 그러나 이러한 환경에서 스스로 개발 방향성을 잡는 것은 중요한 자기개발 기회임.
  • 사수 및 부사수 존재 여부가 업무 분배와 협업에 큰 영향을 미침.
  • "그저 살아남으면 장땡"이란 말이 공감되고, 이직을 고려하는 사례도 많음.

초보자 팁:

  • 사수가 없다면 스스로 명확한 목표와 계획을 세워 집중하는 것이 중요.
  • 온라인 커뮤니티나 문서, 공식 자료를 적극 활용하여 부족한 부분을 채우길 추천함.

2. React 상태관리와 URL 동기화 이슈 🔄

  • 버튼 클릭 시 상태(state)와 URL을 동시에 바꾸는 방식을 고민함.
  • 한 쪽(예: URL 변경 후 URL을 읽어 버튼 상태에 반영)만 변경하는 방법도 있으나, setState 동작이 비동기적이므로 즉각적인 반응이 떨어질 수 있음.
  • 함수는 하나의 동작(액션)을 하는 것이 유지보수 및 디버깅에 효과적임.
  • 따라서, 버튼 클릭 시 버튼 상태와 URL 모두를 동시에 업데이트하는 기존 방식이 더 적합.
  • Next.js 환경에서는 URL과 버튼 상태를 따로 관리해도 큰 성능 차이는 없을 것으로 예상됨.

기술 개념 설명:

  • React useState: 컴포넌트 내 상태를 관리하는 훅으로, 비동기적으로 상태 업데이트가 발생함.
  • URL 상태 동기화: URL 쿼리 파라미터나 경로를 앱 상태와 연동해 사용자 경험을 일관되게 유지하는 방법.
  • Next.js router: Next.js에서 페이지 전환 및 URL 관리를 지원하는 훅과 기능들.

3. Next.js 14의 SSR과 React Query 활용 논쟁 🆚

  • SSR과 React Query 각각의 장단점과 활용 상황에 대해 의견이 분분함.
  • SSR은 SEO(검색 엔진 최적화)에 유리하고, 서버에서 데이터 페칭을 할 경우 초기 렌더링 속도가 빠름.
  • React Query는 클라이언트 쪽에서 실시간 데이터 갱신 및 refetch에 유용함.
  • 일부 강사는 SSR이 프론트엔드 서버에 부담을 준다고 주장하지만, 실제 적용 시 상황에 따라 달라질 수 있음.
  • 서버 컴포넌트에서 DB 직접 접근과 관련한 오해가 있었으나, API는 보통 필요함.
  • 가장 좋은 방법은 공식문서, 다양한 강의, 현장 경험을 조합하여 선택하는 것.

초보자 팁:

  • SSR(Server Side Rendering): 서버에서 HTML을 미리 생성하여 SEO와 초기 로딩 성능을 높임.
  • CSR(Client Side Rendering): 클라이언트가 주도해 렌더링하며, 사용자 인터랙션에 빠르게 반응함.
  • 상황에 따라 SSR과 CSR을 혼용하는 전략이 효과적임.

4. 난독화(Obfuscation)와 보안, 성능 이슈 🛡️

  • 난독화는 코드 가독성을 낮춰 리버스 엔지니어링을 어렵게 만드는 기술임.
  • 완벽한 보안 수단은 아니며, 마음만 먹으면 해독 가능함.
  • 난독화는 코드 분석 난이도를 높여 보안에 간접 도움이 될 수 있음.
  • 성능 면에서는 gzip 압축률에 영향이 있어 결과적으로 로딩 속도에 일부 영향이 있음.
  • 자바스크립트 보안은 주로 민감한 로직을 서버에서 처리하여 클라이언트 노출을 최소화해야 함.

초보자 팁:

  • 난독화는 보안을 위한 유일한 수단이 아니며, 서버 사이드 보안 강화도 필수임.
  • 디버깅 및 유지보수 시 난독화 코드는 큰 장애물이 될 수 있으니 적절히 사용해야 함.

5. 인피니티 스크롤 및 React Query 활용 경험 🔍

  • React Query(useInfiniteQuery)로 인피니티 스크롤 구현 중 queryKey에 따른 데이터 저장 문제가 발생.
  • 여러 탭에서 인피니티 스크롤 시 파라미터가 섞이는 현상이 있어 어려움.
  • 해결책은 API로 받은 각 페이지별 데이터를 적절히 가공(concat)하여 누적 관리하는 것.
  • 테이블 라이브러리를 직접 만들어 사용하는 경우도 있고, 킹지그리드 같은 외부 라이브러리 활용도 언급됨.

초보자 팁:

  • React Query의 queryKey는 캐싱과 데이터 분리에 중요하므로 고유하고 일관되게 설정할 것.
  • 인피니티 스크롤 구현 시 매 페이지 데이터를 누적 관리하는 로직 설계가 필수임.

6. 개발 환경 및 하드웨어 조립 경험 💻

  • 개발자들이 직접 맞춘 고사양 PC, 모니터, 수냉쿨러 등 하드웨어 정보를 공유함.
  • CPU, GPU, RAM, 케이스 및 쿨러 추천과 조립 노하우, 호환성 체크 방법 등이 언급됨.
  • 컴퓨터 업그레이드 시 파워서플라이와 케이스 크기, 쿨러 호환성 등을 반드시 고려해야 함.
  • 하드웨어 커뮤니티(퀘이사존, 드래곤볼 등)와 유튜브를 참고하는 것이 도움됨.

7. 다양한 개발 도구와 에디터 사용 경험 🛠️

  • VSCode와 WebStorm, IntelliJ 등 편한 에디터 선택은 개인 취향과 사양에 따라 다름.
  • React, TypeScript, JSX 코딩에 맞는 플러그인과 환경 구성이 중요.
  • GPT, 코파일럿 같은 AI 도구들이 코딩 생산성 향상에 도움을 준다고 평가됨.

8. React 및 TypeScript 기초질문과 답변 ❓

  • 함수 선언문과 함수 객체, 함수 리터럴은 자바스크립트에서 모두 함수 객체로 이해됨.
  • JSX는 JavaScript XML 또는 JavaScript eXtended의 약자로 해석되며, 실제로는 JavaScript 코드 확장 마크업임.
  • useState, useEffect 사용법과 상태 변화에 따른 리렌더링이 설명됨.
  • 타입스크립트 타입 강제 변환(as)과 제너릭(<Type>) 차이에 대한 간단한 소개도 있었음.

9. 면접 준비와 이직 경험 공유 🎯

  • 이직 준비 시 평소에 실력을 꾸준히 쌓는 것이 중요함.
  • 코딩 테스트, 과제 준비는 꾸준한 복습과 경험 축적이 도움됨.
  • 면접 질문은 회사와 면접관에 따라 매우 다양하며, 모든 문제를 기억하거나 완벽히 대비하기 어려움.
  • 포트폴리오 및 이력서 최신화는 필수.
  • 질문에 대해 솔직하고 자신감 있는 답변이 좋음.

10. 개발자들의 일상과 소소한 이야기 🌈

  • 운동, 취미, 건강관리, 식사, 취업 스트레스 등 일상적인 이야기와 농담이 활발히 오감.
  • 개발자 커뮤니티의 특유의 유머와 동료애가 느껴지는 대화들이 많음.
  • 일과 삶의 균형, 번아웃 극복에 관한 긍정적인 의견도 공유됨.

면접팁⚡

  • 면접 준비는 평소 실력 쌓기가 가장 중요: 평소 프로젝트 경험, 코드 정리, 문제 해결 능력 강화에 집중하세요.
  • 면접 질문에 대해 너무 완벽하려 하지 말 것: 긴장과 기억력 한계가 있으니 핵심을 솔직하고 명확하게 설명하는 것이 좋음.
  • 포트폴리오와 이력서를 항상 최신 상태로 유지: 지원하는 회사에 맞게 맞춤형 준비가 필요합니다.
  • 코딩 테스트 대비: 기본적인 자료구조와 알고리즘 문제풀이에 익숙해지도록 하며, 생성형 AI 도구 활용은 연습 후 면접에는 직접 풀이 능력을 보여주세요.
  • 코드 관리 및 협업 경험 강조: 사수 없이 일했던 경험, 상태 관리, API와 URL 동기화 경험 등 실무적 고민거리 공유는 좋은 인상으로 작용함.

링크🔗

#React#Nextjs#ReactQuery#JavaScript#TypeScript#개발자일상#면접준비#상태관리#SSR#난독화
이전 포스트

2024-01-29

2024년 1월 29일
다음 포스트

2024-01-31

2024년 1월 31일