COMMIT.chat
View Bookmarks
react 썸네일react

2023-10-22

목차

  1. Next.js 13버전 router.push 쿼리 전송 이슈
  2. JavaScript Map vs Object 사용법과 최적화
  3. SSR 적용 시 로더블 컴포넌트 대안 사례
  4. CSS 작성 팁과 추천 라이브러리
  5. React Native - Splash Screen 흰 화면 문제 해결법
  6. 소셜 로그인 후 새로고침 시 로그인 유지 방법
  7. Next.js에서 여러 개 테이블 상태 관리 고민
  8. 개발자 취준과 멘탈 이야기
  9. 빌드 성능 최적화 및 Tailwind JIT 소개
  10. 개발 관련 유용 링크 모음

1. Next.js 13버전 router.push 쿼리 전송 이슈

  • Next.js 13부터 라우팅 메커니즘이 바뀌며 query 전달 방법이 달라짐.
  • import 구문이 달라지고, 이전처럼 간단한 쿼리 전송이 어려워질 수 있음.
  • 공식 문서와 최신 예제 참고하길 권장.
  • 질문 후 즉시 해결되는 사례가 많으므로 적극적으로 커뮤니티 활용하기.

2. JavaScript Map vs Object 사용법과 최적화

  • 핵심: Map과 Object 둘 다 키-값 쌍 저장하지만 용도가 다름.
  • Object
    • 키가 고정적이고 미리 정의된 경우 적합.
    • 키 접근이 간단하고 일반적인 데이터 구조로 많이 사용됨.
    • 값 변경이 직관적임 (obj[key]++ 가능).
  • Map
    • 키가 동적이고 많을 때 최적화되어 있음.
    • 메서드(set, get)가 있어 명확한 조작 가능.
    • 키의 타입이 자유로워 문자열 외에도 객체나 함수가 될 수 있음.
  • 엔진 최적화
    • V8 엔진의 히든 클래스(Hidden Class) 최적화 때문에 Object의 키가 자주 바뀌면 속도가 느려짐.
    • 알고리즘 급에서는 성능 차이가 크지 않으므로 상황에 맞게 선택 가능.
  • 참고 링크: Hidden Class Optimization in V8 엔진

3. SSR 적용 시 로더블 컴포넌트 대안 사례

  • 기존에 SSR에서 로더블 컴포넌트를 쓰던 방식이 최신 Next.js에서 적합하지 않을 수 있음.
  • Velog 클라이언트 오픈소스를 참고하면 프레임워크 없이 SSR을 구현하는 방법을 배울 수 있음.
  • 관련 링크:

4. CSS 작성 팁과 추천 라이브러리

  • CSS 어려움을 해결하는 방법
    • CSS 자체를 최소화하거나 디자인 시스템을 이용해 중복 작업을 줄임.
    • 클린 CSS 작성법과 opinionated 스타일 툴을 학습.
  • 추천 CSS 라이브러리
    • Linaria: CSS-in-JS 스타일
    • Tailwind CSS: 유틸리티 퍼스트 프레임워크, JIT 지원 빌드 속도 개선
    • Panda CSS: Tailwind 스타일을 참고, 타입 안전, 아토믹 CSS 지원
    • Vanilla Extract: TypeScript 기반 CSS 작성
  • 장단점은 있으니 프로젝트 규모와 팀 스타일에 맞춰 선택 권장.
  • 참고 링크: Panda CSS 공식 사이트
  • Tailwind JIT는 대규모 프로젝트에서도 빌드 속도를 800ms 이하로 줄여 유용함.

5. React Native - Splash Screen 흰 화면 문제 해결법

  • 스플래시 스크린 이후 앱이 흰 화면만 나오는 현상은 꽤 자주 발생함.
  • 해결 팁
    • useEffect 훅에서 splash.hide()를 호출해 스플래시를 종료해야 함.
    • 앱 초기 진입점에서 스플래시 제어가 이루어져야 하며, 콘솔에 로그가 보이더라도 화면이 계속 흰색일 수 있음.
  • 참고 링크:
    StackOverflow - react native white screen after splash

6. 소셜 로그인 후 새로고침 시 로그인 유지 방법

  • 서버에서 JWT 토큰(액세스 토큰, 리프레시 토큰)을 쿠키에 저장한 후 새로고침 때 로그인 유지가 필요함.
  • 로그인 상태 유지 구현 방법
    • 홈페이지 진입 시 쿠키에서 액세스 토큰 확인.
    • 토큰이 있으면 서버에 회원 정보 로드 요청.
    • 액세스 토큰이 만료됐으면 리프레시 토큰으로 새 토큰 발급 요청.
    • 두 토큰 모두 없으면 로그인 페이지로 이동.
  • 프론트엔드에서는 토큰 유무에 따라 렌더링 조건 분기 처리 필요.
  • 핵심은 ‘토큰의 유효성 검사 및 갱신 로직’을 구현하고, 컴포넌트 감싸서 로그인 여부에 따른 화면 분기 처리.

7. Next.js에서 여러 개 테이블 상태 관리 고민

  • 한 페이지 내 여러 테이블을 표시해야 할 때 각각 별도의 state 관리가 번거로움.
  • 기본 상태들
    • 테이블 데이터 배열
    • 페이지 인덱스
    • 한 페이지 출력 행 수
    • 전체 데이터 길이 등
  • 상태 관리 방법
    • 각 테이블별 별도의 state를 독립적으로 두어 관리 가능하지만 비효율적임.
    • 리덕스 같은 전역 상태 관리 도구 사용 고려.
    • React Query 등 서버 상태 관리 라이브러리도 대안 가능.
  • 상태 공동 관리가 쉽도록 custom hook 작성하거나 컴포넌트 구조 설계 필요함.

8. 개발자 취준과 멘탈 이야기

  • 취업준비 기간이 길면 자괴감, 좌절을 많이 겪는다고 공감하는 의견.
  • 나이 많거나 연차 있는 구직자들도 같은 고민이 있음.
  • 좋은 사람들과 함께 성장할 수 있는 회사 입사가 가장 중요하다는 조언.
  • 대표가 개발을 모를 때 개발 난이도를 저평가하는 상황은 자주 겪음.

9. 빌드 성능 최적화 및 Tailwind JIT 소개

  • 빌드 속도가 느려 개발 생산성 저하 경험 공유.
  • Tailwind CSS JIT(Just-in-time compiler)는 빌드 속도 문제를 해결하기 위해 도입됨.
  • JIT 덕분에 대형 프로젝트도 1초 이하 빌드 가능.
  • 최신 CSS-in-JS 라이브러리들도 JIT 개념을 도입해 빌드 최적화를 도모 중임.

10. 개발 관련 유용 링크 모음

면접팁⚡

  • JavaScript Map vs Object 질문:
    • 왜 Map을 쓰는지, Object와의 차이 설명
    • 성능 최적화(히든 클래스)를 간단히 설명 가능하면 감점 없음
  • Next.js 상태 관리:
    • 여러 컴포넌트의 상태 공유 방안(전역 상태 관리, 커스텀 훅 소개)
  • 로그인 유지 구현:
    • 토큰 저장 위치(쿠키), 갱신 로직, 새로고침 시 로그인 상태 유지 방법을 명확히 이해하고 설명
  • React Native Splash Screen 문제 해결:
    • 스플래시 화면 종료 시기와 app 초기화 처리 방법 숙지
  • CSS 도구 이름과 사용 경험 초점:
    • Tailwind JIT, Panda CSS 등 사용 경험과 각각 장단점 언급 가능하면 가산점.
#Nextjs#React#JavaScript#ReactNative#CSS#로그인#상태관리#TailwindCSS#면접팁#개발팁
이전 포스트

2023-10-21

2023년 10월 21일
다음 포스트

2023-10-23

2023년 10월 23일