목차
- Next.js 라이브러리와 프레임워크 차이
- VSCode 확장 프로그램과 자동 import 기능
- MongoDB 사용현황 및 Mongoose
- React 뒤로가기 막기: beforeunload 이벤트
- React setState 오용 문제와 실시간 계산 구현
- Redis 사용 위치 및 기본 구성
- yarn zero-install 및 unplugged 문제
- React 상태 관리: Context API vs 상태관리 라이브러리
- tanstack/react-table 리렌더링 이슈
- 개인 프로젝트 AWS 및 클라우드 비용 경험
1. Next.js 라이브러리와 프레임워크 차이
- Next.js는 React를 기반으로 한 프레임워크다.
- 라이브러리는 필요한 기능만 가져다 쓰는 개념이라면, 프레임워크는 전체 구조와 규칙을 제공하며 개발자가 그 안에서 코드를 작성하는 형식이다.
- Next.js는 SSR(Server Side Rendering), 동적 라우팅 등 React에서 별도 구현해야 하는 기능을 내장해 생산성을 높임.
- 회사 교육용으로 공식 사이트에 강좌(https://nextjs.org/learn/dashboard-app/getting-started)도 제공함.
- 초보 개발자에게는 Next.js를 활용하면 리액트보다 빠르게 웹 앱 구조를 잡을 수 있는 좋은 선택지임.
2. VSCode 확장 프로그램과 자동 import 기능
- 컴포넌트를 JSX에서 사용 시 자동으로 최상단에 import를 추가해 주는 기능이 있다.
- 이는 VSCode의 Quick fix(Command + .) 기능 또는 확장 프로그램에서 제공하며, 작명하는 즉시 import 구문이 자동 완성됨.
- 노마드코더 강의 등에서 소개된 기능으로 초보자에게 개발 편의성을 크게 높여줌.
3. MongoDB 사용현황 및 Mongoose
- 실무에서는 관계형 DB(SQL)을 주로 쓰지만, 상황에 따라 NoSQL인 MongoDB도 널리 활용됨.
- MongoDB는 비정형 데이터나 빠른 확장성을 필요로 할 때 좋음.
- "생 몽고DB" 사용 시 콜렉션(테이블과 유사) 관리가 어렵고 복잡할 수 있어, Mongoose 같은 ODM(Object Data Modeling) 라이브러리를 함께 써서 관리 및 검증을 수월하게 함.
- 사이드 프로젝트 또는 학습용으로도 적합하지만, 복잡한 트랜잭션 처리에는 부적합할 수 있음.
4. React 뒤로가기 막기: beforeunload 이벤트
- 브라우저에서 사용자가 뒤로가기를 하거나 페이지를 닫으려 할 때 경고창을 띄우는 방법으로 window의 'beforeunload' 이벤트를 사용함.
- 이 이벤트는 브라우저가 기본으로 제공하는 confirm 창을 띄우는데, 사용자 정의 창으로 변경은 불가능함(브라우저 정책 때문).
- SPA 환경에서는 react-router의 history.block() 등 라이브러리 별 API를 활용해 뒤로가기 방지 구현도 가능.
5. React setState 오용 문제와 실시간 계산 구현
- 실시간 입력값으로 복잡한 계산을 해야 하는 경우, 너무 많은 setState 호출은 비효율적이고 상태 업데이트 충돌 문제를 유발함.
- 상태 업데이트가 비동기적으로 처리되기 때문에 여러 setState 호출 시 마지막 호출만 적용될 수 있으며, 무분별한 호출은 React 재조정(Reconciliation)에 부하를 줌.
- 해결책으로 조건에 따라 한 번에 묶어서 상태를 갱신하거나, state 업데이트 함수 내부에서 이전 상태를 참조하는 콜백형 setState를 활용.
- 복잡한 계산 로직은 별도 함수로 분리하여 상태 관리 코드를 간결하게 유지하는 것이 중요함.
- 무한 루프는 useEffect 내부에서 상태 변경 시 의존성 배열 관리를 올바르게 해야 방지 가능.
- 사용자 입력 시 검증 로직을 세분화하여 불필요한 렌더링을 최소화하고, 입력 제한 및 에러 상태 표시도 함께 구현 권장.
6. Redis 사용 위치 및 기본 구성
- Redis는 메모리 기반의 빠른 키-값 저장소로, 캐싱과 세션 관리에 주로 사용됨.
- 리액트(프론트엔드)에 바로 연결하는 경우는 거의 없고, 보통 Node.js 백엔드 서버에서 Redis 클라이언트를 사용해 연결.
- Docker 환경에서는 Redis 서버를 별도 컨테이너로 띄우고, Node.js 앱에서 연결해 쓰는 구조가 일반적임.
- Redis로 세션 저장, API 요청 결과 캐싱, 메시지 큐 등으로 활용 가능해 프로젝트 요구에 맞게 적절히 구성 필요.
7. yarn zero-install 및 unplugged 문제
- Zero-install은 의존성 라이브러리를 프로젝트 내에 모두 포함시켜서 설치 시간을 줄이는 전략.
- yarn berry(v2 이상)에서 unplugged 폴더는 네이티브 빌드가 필요한 패키지가 별도로 분리 저장되는 장소임.
- 파일 크기가 커지고 저장소 용량이 늘어날 수 있지만, 설치 속도 및 빌드 안정성을 높임.
- 배포 시엔 라이브러리를 포함해 git에 올리는 방법도 고려함.
- 실제 설치 시간은 10~20초 대로 감소해 작업 효율 개선에 도움 됨.
8. React 상태 관리: Context API vs 상태관리 라이브러리
- Context API는 React 내에서 전역 상태를 손쉽게 공유하기 위한 도구이며, 작은 규모 혹은 특정 범위에 상태를 주입하는데 적합함.
- Redux, Zustand 등은 더 복잡한 전역상태 및 비동기 처리에 적합한 라이브러리이며, 개발 스타일에 따라 선택적으로 사용함.
- 두 방식을 같은 프로젝트 내에서 병행하는 경우도 있지만, 상태 중복 및 복잡성 증가 유의해야 함.
9. tanstack/react-table 리렌더링 이슈
- 한 셀을 수정할 때 전체 행이 재렌더링되어 성능 저하가 나타날 수 있음.
- React의 리렌더링과 실제 브라우저 Repaint는 다름: React 내부 재조정이 모두 발생해도 실제 화면 변경은 필요한 부분에서만 이루어짐.
- props로 함수가 계속 생성되어 전달되면 불필요한 리렌더링이 발생하므로, useCallback이나 메모이제이션으로 방지 필요.
- 프로파일러를 통해 성능 병목 지점을 정확히 파악하는 것이 중요함.
- 직접 구현하거나 최적화된 테이블 라이브러리 선택도 고려할 만함.
10. 개인 프로젝트 AWS 및 클라우드 비용 경험
- 간단한 개인 프로젝트 기준 AWS 프리티어를 활용하면 무료 혹은 아주 저렴하게 운영 가능.
- Amplify, Netlify, Cafe24, GCP, NCP 등의 대체 호스팅도 많아 비용과 편의성 비교 필요.
- 서버리스 스택을 활용해 초기 운영 비용을 줄이고, 서비스 규모가 커질 때 인프라 확장하는 방식 권장함.
- 비용 체감은 배포/설치 시간, 빌드 속도 등 다양한 요소에 따라 달라질 수 있음.
면접팁⚡
- Next.js와 React의 차이점은 자주 질문되는 주제로, 라이브러리와 프레임워크 차이를 명확히 이해 및 설명할 수 있으면 좋음.
- React setState의 비동기성과 호출 병합 원리를 파악하고, 상태 관리 최적화 방법에 대한 실전 경험을 어필하면 강점.
- MongoDB vs SQL 선택 이유와 Mongoose 활용법을 설명할 수 있으면 실제 업무 이해도를 보여줄 수 있음.
- React 라이프사이클 및 리렌더링 최적화 경험은 프론트엔드 직무에서 매우 중요하므로 관련 질문 대비하기.
- Redis 사용 사례 와 구성 방법에 대해 간단히 설명 가능할 정도로 실무 지식 갖추기 권장.
링크🔗
- Next.js 공식 강좌: https://nextjs.org/learn/dashboard-app/getting-started
- State of JS (트렌드 확인): https://stateofjs.com/en-US
- yarn berry zero-install 관련 리소스 (별도 링크 없음, yarn 공식문서 참고 권장)
- React 공식 문서: https://reactjs.org
- tanstack/react-table 공식 repo: https://github.com/TanStack/table
#Nextjs#React#setState#MongoDB#Redis#yarn#ReactTable#AWS#상태관리#개발팁