목차
- 리액트 상태값과 실시간 렌더링 이슈
- 리액트 CSS 프레임워크 및 UI 라이브러리 추천
- Next.js 13, 14 버전 특징과 토큰 처리 방법
- React.memo와 리렌더링 최적화 팁
- 면접 준비 및 취업 관련 현실 조언
- 사이드 프로젝트와 스터디 문화 경험 공유
- 웹개발 관련 도구 및 개발 환경 팁
- 웹 표준 및 SEO를 위한 타이틀 동적 변경법
- 기타 개발 토픽 및 재미있는 대화 짤막 요약
- 개발자 간 친목과 일상 잡담 분위기
1. 리액트 상태값과 실시간 렌더링 이슈 🎨
- 리액트에서 상태(state)가 변경되면 컴포넌트가 실시간으로 다시 렌더링됨.
- 상태 변경은 비동기 처리되므로, 때때로 '한 박자' 딜레이가 발생할 수 있음.
- 한 박자 딜레이 문제는 상태 꼬임(state mismatch)에서 발생하기도 함.
- 상태가 변하지 않으면 렌더링이 발생하지 않기 때문에, 상태 변화를 강제로 처리하는 방법도 검토됨.
- 예) useEffect 안에서 setTimeout을 사용해 상태를 주기적으로 업데이트하거나, 빈 상태값을 넣어 강제 리프레시를 하는 방법도 사용 가능.
- 리액트의 상태관리는 초보자가 이해하기로는 "화면에서 보여줄 값을 상태(state)로 지정하면 자동으로 반영된다"는 점이 핵심.
2. 리액트 CSS 프레임워크 및 UI 라이브러리 추천 💅
- 여러 UI 프레임워크와 라이브러리가 공유됨.
- 유명한 라이브러리: Material UI, Ant Design, Chakra UI, Mantine, Radix UI, Tailwind CSS + Headless UI 등.
- Mantine은 Tailwind 기반이며, 커스텀하기 좋은 라이브러리로 인기.
- Radix UI는 'Headless UI' 스타일의 접근성 높은 컴포넌트 라이브러리이며, 자체 테마도 제공함.
- Tailwind CSS는 유틸리티 클래스 기반으로 빠른 CSS 작성에 용이.
- React-bootstrap도 여전히 많이 쓰임.
- UI 라이브러리 선택 시 커스텀 편의성, RSC(Server Components) 지원 여부도 중요한 고려 포인트임.
- 최근 Next.js와 연동이 잘 되는 조합이나, UI 키트 조합에 대한 의견 다양.
3. Next.js 13, 14 버전 특징과 JWT 토큰 처리방법 🔑
- Next.js 13 부터는 app router와 서버 컴포넌트, 클라이언트 컴포넌트가 도입됨.
- getServerSideProps 같은 예전 방식은 점점 덜 쓰임.
- JWT 토큰 처리 관련:
- 요청 시 토큰을 프론트에서 API 호출에 포함시키는 방식이 흔함.
- 백엔드에서 매번 DB에서 JWT 검증을 하는 건 비효율적일 수 있음.
- 권장 방법은:
- 로그인 시 JWT를 클라이언트 쿠키(HTTP Only 쿠키 권장)나 세션에 저장.
- 이후 요청은 자동으로 쿠키를 통해 토큰 전달하거나, API 요청 헤더에 넣어 인증 처리.
- 보안을 위해 토큰 저장 위치 선정 시 XSS, CSRF 공격 위험을 고려해야 함.
- Next.js 미들웨어(Middleware)로 인증 및 권한 체크를 처리하는 방안도 있음.
4. React.memo와 리렌더링 최적화 🧠
- React.memo는 컴포넌트가 받는 props가 변하지 않으면 리렌더링을 방지하는 고차 컴포넌트(HOC).
- 페이지 라우팅 시 부모 컴포넌트가 바뀌면 하위 컴포넌트도 리렌더링 됨.
- 따라서 React.memo 사용이 의미 있을지 고민 필요.
예) 페이지 단위 전환이면 트리 구조가 변하지만, 컴포넌트가 공통이라면 리렌더링 방지에 도움됨. - 과도한 최적화는 불필요할 수 있으며, 성능 이슈가 크지 않다면 기본 리렌더링 허용이 권장됨.
- React.memo는 함수 컴포넌트를 최적화할 때 쓰며, props 비교 로직을 직접 추가할 수도 있음.
5. 면접 준비 및 취업 현실 조언 💼
- 이직 및 신입 취업은 어려워도 꾸준히 도전해야 함.
- 공공기관 API, 지도 관련 프로젝트(카카오, 네이버 등)를 경험하면 서류 통과 확률 증가.
- 백엔드가 프론트보다 공부할 내용이 많고 어렵지만, 채용 현장은 오히려 프론트가 경쟁률이 높거나 제한적인 경우가 많음.
- 풀스택 역량이 있으면 취업 세례를 더 잘 받을 수 있다는 이야기.
- 면접 중 기술 질문 예시:
- "왜 Redis를 썼는가"
- "백엔드와 프론트엔드 역할 차이"
- 팀 프로젝트 경험과 협업 능력 강조 필요.
- 스터디는 꾸준히 할 수 있는 분위기 조성과 사람에 따라 결과가 크게 달라짐.
6. 사이드 프로젝트와 스터디 문화 🌱
- 스터디 중도 탈락, 갈등 사례가 빈번히 등장.
- 팀 사이드 프로젝트 시 프론트와 백엔드 역할 분담이 명확해야 함.
- 무리한 기대보다 협업을 즐기고, 작은 성공 경험 중심으로 진행하는 게 중요.
- GPT, 오픈소스 협업 등 도구 활용 사례가 늘어남.
- 스터디원 모집 시 열정과 꾸준함이 핵심 요소로 꼽힘.
7. 웹개발 관련 도구 및 환경 팁 🛠
- json-server와 Postman으로 간단한 API 개발/테스트 가능.
- VSCode 확장 프로그램:
- prettier-plugin-tailwindcss: Tailwind 클래스 정렬 자동화.
- pretty-ts-errors: TypeScript 오류 가독성 향상.
- in-your-face: 오류 발생 시 표정 변화로 피드백 제공.
- Git 재베이스 실패 시 서명 문제일 가능성 있음. GPG 키 확인 필요.
- Babel은 ES버전별 변환 지원, 최신 문법도 플러그인으로 처리 가능.
- 도커 아이콘 설치 및 관리 관련도 언급됨.
8. 웹 표준 및 SEO를 위한 타이틀 동적 변경법 🌐
- react-helmet 라이브러리는 SPA 환경에서 <title> 및 <meta> 태그를 동적으로 관리할 때 편리함.
- <title>은 <head>내에 있어야 하고, 직접 DOM 조작은 권장되지 않음.
- document.querySelector('title')로 직접 변경 가능하지만, react-helmet 사용 시 SSR 지원 및 SEO 개선 가능.
- SEO에서 JS 크롤러 지원 추세이나, 여전히 <head> 설정은 필수적임.
9. 기타 개발 토픽 및 재미있는 대화 짤막 요약 🎉
- 축구 중계, 힐링 여행, 개발자 일상 잡담 다수.
- '댕원님' 별명과 드립으로 개발자 커뮤니티 특유 유머 감각 발휘.
- 개발 중 발생하는 다양한 에러 상황과 해결 팁 공유.
- 신기한 리액트 기능, Next.js 배포 이슈 등 실제 업무 사례 공유 활발.
- 오버워치, 롤 등 게임 이야기 및 간간히 삶과 일 균형에 관한 토크.
10. 개발자 간 친목과 일상 잡담 분위기 🥳
- 야근, 출근 시간, 헬스장, 밥 먹는 이야기 등 친근한 소통.
- 서로 격려와 농담을 주고받으며 친목 다짐.
- 가끔 정치, 건강, 여행 등 다양한 주제로 이야기하며 인간적 유대 형성.
- 온라인 채팅 특유의 다채로운 말투와 표현 포함.
면접팁⚡
- React 상태관리 원리 이해: 상태 변화를 통한 자동 렌더링 작동 방식 명확히 설명할 것.
- React.memo 사용법과 적용 시점, 리렌더 방지 효과에 대한 이해 필수.
- Next.js 13/14의 새로운 라우팅 및 서버/클라이언트 컴포넌트 개념 숙지.
- JWT 및 인증 토큰 처리 방식을 구체적으로 알고, 보안 고려사항을 함께 설명할 수 있어야 함.
- 백엔드와 프론트엔드 개발 난이도와 역할 차이를 현실적으로 말할 준비 필요.
- 팀 프로젝트와 협업 경험, 특히 지도 API 활용 경험 강조.
- 동적 SEO 관리 방법(react-helmet 등)과 프로젝트에 적용하는 법 아는 것이 강점.
링크🔗
-
React 강제 리렌더링 참고:
https://stackoverflow.com/questions/53215285/how-can-i-force-a-component-to-re-render-with-hooks-in-react -
Mantine UI:
https://mantine.dev/ -
Radix UI:
https://www.radix-ui.com/ -
Next.js 13/14 정리 및 서버 컴포넌트 소개:
https://ahnanne.tistory.com/92
https://velog.io/@hang_kem_0531/Next.js-13%EC%9D%B4-%EB%82%98%EC%99%80%EB%B2%84%EB%A0%B8%EB%8B%A4 -
Babel preset-env 공식문서:
https://babeljs.io/docs/babel-preset-env -
prettier-plugin-tailwindcss:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss -
React Helmet 관련:
https://stackoverflow.com/questions/413439/how-to-dynamically-change-a-web-pages-title -
VSCode 확장 아이템:
-
사이드 프로젝트 추천:
https://holaworld.io -
React Native iOS Kit (참고):
https://github.com/callstack/react-native-ios-kit -
개발자 커뮤니티 유머 영상 및 축구 하이라이트 등은 생략.
#React#Nextjs#UI라이브러리#상태관리#면접팁#취업정보#리렌더링#프론트엔드#스터디문화#웹개발