2024-02-22

목차

1. Next.js 14 라우팅과 쿼리 파라미터 처리
2. AWS Amplify와 React CI/CD 배포
3. React 상태 관리: Context API vs Props Drilling
4. 성능 최적화: 스크롤 이벤트 vs IntersectionObserver
5. 이미지 저장 방지와 보안 이슈
6. 환경 변수(.env) 관리 및 Vercel 배포
7. 개발용 노트북 사양과 추천 가이드
8. React 컴포넌트 구조와 데이터 흐름 파악 팁
9. 면접에서 자주 묻는 기초 개념과 준비
10. 유용한 링크 및 참고 자료

1. Next.js 14 라우팅과 쿼리 파라미터 처리 🚀

• Next.js 14에서 주소창에 파라미터를 포함한 이동을 어떻게 처리하는지에 대한 질문이 많음.
• 기존에 쓰던 next/router 방식은 deprecated 되었고 next/navigation의 useRouter와 useSearchParams를 조합하는 방식을 사용.
• 주소 이동 시 쿼리스트링(query string)을 포함하려면 <Link> 컴포넌트에서 href에 {pathname, query} 객체 형식으로 전달하는 것이 가장 직관적.
• router.push 같은 함수형 이동은 URLSearchParams를 직접 조작해야 해서 다소 번거로움.
• 따라서 단순 페이지 이동과 파라미터 전달에는 Link 컴포넌트 사용을 권장, 라우터 직접 사용은 상황에 따라 필요함.
• 초보자 설명:
  쿼리스트링은 URL 뒤에 붙는 파라미터이며, 예를 들어 /page?name=abc와 같이 사용합니다. Next.js에서는 Link 컴포넌트에 쿼리를 넣으면 이 파라미터를 포함해 이동할 수 있습니다. useRouter는 프로그래밍 방식으로 이동할 때 URL을 조작하는 도구입니다.

2. AWS Amplify와 React CI/CD 배포 ☁️

• Amplify 사용 경험 공유: 깃허브에 코드 푸시만 하면 자동으로 React 앱 배포가 됨 (CI/CD 구현).
• CI/CD(Continuous Integration/Continuous Deployment)는 개발자가 변경사항을 빠르고 자동으로 배포하는 방식.
• Amplify는 AWS 환경에서 React 앱 호스팅과 배포를 간편하게 할 수 있는 서비스.
• 참고 링크 제공: React 무료 호스팅 및 Amplify 활용법 블로그.
• 초보자 설명:
  CI/CD는 코드가 깃허브에 올라가면 자동으로 테스트하고, 서버에 배포까지 진행해주는 자동화 도구입니다. Amplify는 AWS에서 제공하는 서비스로, 이를 쉽게 설정할 수 있어 빠른 웹앱 배포가 가능합니다.

3. React 상태 관리: Context API vs Props Drilling ⚛️

• 작은 규모 프로젝트는 props 전달이 단순하고 관리에 용이.
• 중간 이상 규모나 전역 상태가 필요한 경우 Context API 사용 권장함.
• props drilling은 컴포넌트 여러 단계로 props를 계속 전달해야 하는 현상.
• Context 사용은 중간 단계 컴포넌트를 거치지 않고 바로 하위 컴포넌트에 데이터를 전달해 줌.
• Context도 단방향 데이터 흐름을 따르며, 복잡한 로직은 구조 설계와 코드 이해도에 따른 문제일 경우가 많음.
• 초보자 설명:
  React에서 데이터를 아래 컴포넌트로 넘기려면 보통 props를 사용합니다. 단 컴포넌트가 많으면 여러 단계로 데이터를 전달해야 해서 props drilling 문제가 발생합니다. Context API를 사용하면 중간 단계를 건너뛰고 데이터를 쉽게 내려줄 수 있습니다.

4. 성능 최적화: 스크롤 이벤트 vs IntersectionObserver ⏳

• 스크롤 이벤트(window.addEventListener('scroll'))는 자주 호출되어 성능 저하 우려가 있음.
• 옵저버 API(IntersectionObserver)는 특정 요소가 화면에 보이는지 여부를 효율적으로 감지함.
• 옵저버 사용 시 불필요한 이벤트를 줄이고 성능 향상을 기대할 수 있음.
• 스크롤 이벤트는 throttle 또는 debounce 기법으로 호출 빈도를 제한해야 함.
• 초보자 설명:
  스크롤할 때마다 함수를 계속 실행하면 컴퓨터가 힘들어할 수 있습니다. 옵저버 API는 화면에 보이는 요소만 감지해 함수 호출을 줄여주어 효율적입니다.

5. 이미지 저장 방지와 보안 이슈 🖼️

• 웹에서 이미지 '우클릭 저장' 방지는 스크립트나 CSS로 어느 정도 가능하나 완벽하지 않음.
• 안드로이드 네이버 앱 등 일부 환경에서는 기본적인 방지 코드도 무력화될 수 있음.
• 대안으로 canvas 태그를 사용해 이미지 렌더링하거나, 이미지 위에 보이지 않는 투명 오버레이를 덮어 저장 방지 시도 가능.
• 하지만 저작권 보호를 완전히 구현하려면 서버 사이드 조치나 워터마킹 같은 별도 조치 필요.
• 초보자 설명:
  인터넷에서 이미지를 마우스 오른쪽 클릭 방지로 저장을 막지만, 사용자가 스크린샷을 하거나 특정 앱에서는 우회가 가능함. 완벽하게 막기는 어려우니 더 복잡한 방법이 쓰임.

6. 환경 변수(.env) 관리 및 Vercel 배포 🔐

• 로컬에서 .env.local 파일로 API 키 등 환경변수를 관리함.
• .env.local은 .gitignore에 포함되어 깃에 올라가지 않고 보안 유지가 가능.
• Vercel같은 클라우드 플랫폼에는 프로젝트별 환경 변수 설정 메뉴가 있어 거기에 직접 입력해야 함.
• 이렇게 하면 로컬 코드 내 .env.local은 제외해도 배포된 앱에서 환경 변수 정상 불러옴.
• 초보자 설명:
  .env.local 파일은 비밀번호, API 키 같은 민감한 정보를 담는 곳입니다. 깃에 올리면 위험하니 무시하고, 배포 서버에 직접 설정하면 안전합니다.

7. 개발용 노트북 사양과 추천 가이드 💻

• 개발 용도로 16GB 메모리는 기본 이상이며, 32GB 이상은 여러 빌드나 디자인 작업, 가상머신 사용 시 추천됨.
• 디자인 작업(예: 피그마) 같이 메모리 많이 사용하면 32GB 이상 권장.
• M1/M2 맥북, 인텔 노트북 각각 장단점 존재. 그래픽카드 연산 필요 여부도 따져야 함.
• 온보드(Onboard) 메모리(램, SSD)는 추가 업그레이드가 불가능할 수 있으니 구매 시 확인 필요.
• 초보자 설명:
  개발용 노트북은 메모리가 많을수록 여러 작업을 동시에 하기에 편리합니다. 디자인까지 한다면 더 높은 사양이 필요하지만, 단순 개발이라면 16GB로도 충분할 수 있습니다.

8. React 컴포넌트 구조와 데이터 흐름 파악 팁 🔄

• 컴포넌트가 많거나 깊이가 깊으면 데이터 흐름 파악이 어려워질 수 있음.
• Context 사용 시 데이터 전달 경로가 중간에 숨겨져 있어 한눈에 이해하기 어려울 수 있음.
• Props 전달과 Context를 적절히 사용하며 컴포넌트 구조를 명확히 유지하는 것이 중요함.
• 데이터 흐름 파악이 어려운 경우 컴포넌트 구조나 네이밍 개선, 코드 리딩 연습이 필요함.
• 초보자 설명:
  React 앱에서 데이터가 어디서 왔는지 이해하기 어려울 때가 많습니다. 너무 많은 컴포넌트와 복잡한 구조가 원인입니다. 간단히 유지하거나 문서화를 하면 도움이 됩니다.

9. 면접에서 자주 묻는 기초 개념과 준비 💡

• 면접에서 RDB(관계형 데이터베이스)와 RDBMS(관계형 데이터베이스 관리 시스템) 차이 질문.
• 컴파일 언어 vs 인터프리터 언어, 이벤트 버블링과 캡처링 개념도 질문 빈도가 높음.
• 준비 팁: 기본 CS 개념과 관련 용어 정확히 숙지 필요.
• 초보자 설명:
  컴파일 언어는 코드를 한꺼번에 기계어로 번역해 실행하고, 인터프리터 언어는 한 줄씩 해석하며 실행합니다. 이벤트 버블링은 이벤트가 자식 요소에서 부모 요소로 전파되는 현상이고, 캡처링은 반대 방향입니다.

10. 유용한 링크 및 참고 자료 🔗

• React Labs 2024.02 업데이트: https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024
• AWS Amplify React 배포 블로그: https://m.blog.naver.com/jinseung0327/223360962652
• Next.js App Router 문서 (조합 패턴): https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
• Tailwind CSS Chrome Extension: https://chromewebstore.google.com/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl
• 유료 & 무료 DB 관리툴: DBeaver, TablePlus, HeidiSQL(Windows)
• Zod validation 라이브러리 정보: npm zod 검색
• 노트북 사양 관련 커뮤니티: FM코리아 노트북 갤러리 https://www.fmkorea.com/5469427458

면접팁⚡

• 예상 질문: RDB와 RDBMS 차이, 컴파일 vs 인터프리터 언어, 이벤트 버블링과 캡처링 차이 등 기본 개념을 정확히 설명할 수 있어야 함.
• 데이터 흐름을 묻는 질문엔 props drilling과 Context API의 특징, 장단점을 명확히 답변할 것.
• 실무에서 사용하는 최신 Next.js 라우팅 방식과 상태관리 방법도 숙지 필요.
• 자신의 프로젝트 경험을 바탕으로 CI/CD나 환경 변수 관리 경험 공유하면 플러스가 됨.