COMMIT.chat
View Bookmarks
react 썸네일react

2024-04-17

목차

  1. 개발 공부 및 깃허브 활용
  2. React 중첩 라우팅과 Outlet 문제 해결
  3. 개발자 커뮤니티의 일상과 소소한 이야기
  4. Tailwind CSS vs CSS 전통 방법
  5. React UI 라이브러리 비교 및 탭 컴포넌트 문제
  6. 쿠키(Cookie)와 보안관련 문제 처리 팁
  7. 면접 복장과 면접 준비 노하우
  8. Next.js 14 버전과 프로젝트 구인 정보
  9. CSS 배경 그라디언트 이슈와 reset.css 영향
  10. 기타 개발 팁 및 커뮤니티 공유

1. 개발 공부 및 깃허브 활용

  • 백준 문제 풀이를 깃허브에 꾸준히 푸시 중
  • 노드JS 공부도 병행하며 지속 학습 중
  • 백준허브 확장 프로그램(Chrome Extension) 사용 추천:
    • 백준 문제 풀이 기록을 편리하게 관리 가능
    • GitHub과 연동이 쉬워 실력 관리에 도움됨

2. React 중첩 라우팅과 Outlet 문제 해결

  • 중첩 라우팅(nested routing)은 React Router에서 하위 페이지를 부모 경로 내부에 렌더링하는 기법
  • <Outlet> 컴포넌트:
    • 상위 라우트의 특정 위치에 하위 라우트를 표시할 때 사용됨
    • 화면에 렌더링이 안 된다면:
      • 상위 라우트에 path 설정 문제
      • Outlet을 포함한 레이아웃 컴포넌트가 올바르게 렌더링 되었는지 점검
      • 라우트 구성이 적절한지 재확인 필수
  • 초보자 팁: 라우트 구조를 한눈에 볼 수 있는 다이어그램 작성 권장

3. 개발자 커뮤니티의 일상과 소소한 이야기

  • 개발 외 취미 이야기(기타 연주, 다이어트 등)로 친목 도모
  • 커피챗, 알콜챗 등 친목 활동의 중요성 공유
  • AI, 연예계 이슈 등 다양한 주제로 자유로운 대화
  • 개발자 정신 건강 관리 및 멘탈 챙기기 강조 (특히 수습 기간 불안감 관련)

4. Tailwind CSS vs CSS 전통 방법

  • Tailwind CSS: 유틸리티 클래스 기반 CSS 프레임워크
    • 빠른 스타일링 가능, 유지보수 쉬움
    • Bootstrap이나 SCSS보다 세밀한 제어 가능
    • CSS를 프로그래밍 방식으로 짜듯 쓴다는 인상
  • 개발자 의견:
    • Tailwind가 CSS계의 jQuery 같은 존재라는 평
    • SCSS, Bootstrap에 익숙한 이들에게 새로운 접근법
  • 선택 시 프로젝트 성격과 팀 숙련도 고려해야 함

5. React UI 라이브러리 비교 및 탭 컴포넌트 문제

  • MUI(Material UI), RadixUI, Mantine, Chakra UI, Ant Design, NextUI 등 비교
  • 탭 컴포넌트 인터랙션 및 애니메이션 지원 여부가 주요 고려 대상
  • MUI 탭: 접근성을 잘 지키지만 커스텀 복잡성 있음
  • RadixUI: 접근성 및 UI 커스터마이징이 좋은 평가
  • 실무 팁: 직접 커스텀하거나 애니메이션 구현 시 라이브러리 한계 인지 필요
  • 탭 이동 시 깜빡임 문제: 애니메이션 처리 방식에 따라 발생, 코드 최적화 필요

6. 쿠키(Cookie)와 보안관련 문제 처리 팁

  • Next.js 14에서 서버 사이드 쿠키 설정 시 클라이언트에 쿠키가 저장 안되는 문제 발생
  • 확인 사항:
    • Response Header로 Set-Cookie가 제대로 전송되는지 확인
    • 브라우저의 Application 탭에서 쿠키 저장 여부 검사
    • credentials: 'include' 옵션 필요 (fetch API 사용 시)
    • 서버에서 Secure 속성 설정하면 HTTPS 환경에서만 쿠키 저장 가능
  • 초보자 팁:
    • 로컬 개발 환경과 배포 환경 차이로 인한 쿠키 설정 문제 흔함
    • CORS 정책과 쿠키 옵션 꼼꼼히 체크

7. 면접 복장과 면접 준비 노하우

  • 경력직 면접 시 복장은 상황에 맞게 선택 (캐주얼, 비즈니스 캐주얼, 정장)
  • 개발자 중심 면접 문화는 비교적 자유로우나, 깔끔한 인상 중요
  • 주변에서는 면접 당일 머리 스타일 변화나 복장 변화로 면접 여부 감지하기도 함
  • 초보자 팁:
    • 평소보다 깔끔한 복장과 헤어 스타일이 무난
    • 과한 정장보다는 상황에 맞는 복장 선택 권장

8. Next.js 14 버전과 프로젝트 구인 정보

  • Next.js 14, React 18, TypeScript 5 등 최신 스택으로 진행되는 프로젝트 구인 중
  • Tailwind CSS와 SCSS를 병행하며 내부 관리용, 사용자용 UI 분리
  • Recoil, Axios, Next Auth 등 상태 관리, 데이터 요청, 인증 라이브러리 사용
  • 비슷한 스택 프로젝트 지원 희망자는 프로필 공유로 문의 가능
  • 개발자 커뮤니티 내에서는 구인 전 공지 및 허가 절차 필수 준수 권고

9. CSS 배경 그라디언트 이슈와 reset.css 영향

  • main 요소에 height: 100dvh와 배경 그라디언트 설정 시 하단 흰색 영역 발생 문제
  • 원인: reset.css의 기본 스타일이 min-width, height 등을 덮어씌울 수 있음
  • 해결법:
    • html, body, main 모두 height: 100%로 맞춰주기
    • 배경을 body쪽에 주는 것이 안정적
    • 그라디언트 반복 여부(background-repeat)와 위치 설정 점검
  • 초보자 TIP: reset.css나 normalize.css 확인 후 스타일 중복 문제 주의

10. 기타 개발 팁 및 커뮤니티 공유

  • 키보드 물 세척 경험과 복구 팁 공유 → 완전 말리기 중요
  • 포맷팅 자동화(formatOnSave)가 오래 걸릴 때는 설정 점검 권장
  • 유튜브 컨퍼런스, 실시간 트렌드, 채용 공고 링크 등 정보 공유 활발
  • 깃허브 등 소스코드 관리와 개인 프로젝트 개발의 중요성 재확인

면접팁⚡

  • 면접 복장은 깔끔함을 기본으로 하며 상황에 맞게 선택
  • 출근 전 스타일 변화(이발, 복장)로 면접 여부 파악하는 동료들이 있음
  • 실제 면접장에서는 자신감과 자세가 중요하며 복장에 너무 얽매이지 말 것
  • 경력 면접 시 평소 입는 옷 중 깔끔한 스타일이 무난함
  • 온라인 면접 시에도 깔끔한 복장과 주변 환경 정리 필요

링크🔗

#React#NextJS#TailwindCSS#개발자커뮤니티#면접팁#쿠키#UI라이브러리#CSS#중첩라우팅#프로젝트구인
이전 포스트

2024-04-16

2024년 4월 16일
다음 포스트

2024-04-18

2024년 4월 18일