2024-05-19

목차

1. 스타트업 투자 유치와 현실적인 조언
2. Next.js와 Server Actions 개념 정리
3. Next.js의 SSR과 API 서버 분리 이슈
4. Next.js 14의 새로운 기능과 라우팅 변경 가능성
5. 클라이언트와 서버 함수의 구분과 보안 관점
6. 페이지 간 데이터 전달 방법과 보안 고려사항
7. React, Next.js, PHP 연관성 및 개발자 경험 토론
8. Next.js와 React 생태계 및 SEO 전략
9. 개발 문화 속 ‘순응’과 컨벤션 논의
10. 면접팁⚡ 및 참고 링크

1. 스타트업 투자 유치와 현실적인 조언 💼

• 투자 유치는 회사에 실제 돈이 들어오기 전까지 확정된 게 아니다.
• 투자 집행은 보통 2~3개월의 심사 및 절차를 거친다.
• 투자 조건이 맞지 않으면 무산될 가능성도 크다.
• 런웨이(runway, 회사가 버틸 수 있는 기간)가 2달 이하일 경우, 이직 준비를 권장.
• 과거 투자(예: 2020년) 이후 후속 투자가 없다면, 정부 지원사업이나 R&D 지원금으로 일부 운영하고 있을 가능성 높음.
• 투자 시장이 얼어붙어 (불황기) 스타트업 경영이 매우 어렵다.
• 기술적인 기반, 팀 상황에 따라 피봇(사업 방향 전환) 시도도 많음. 예: 비트코인 → 생성형 AI.
• SI(시스템 통합) 회사는 대형일 경우 자금 흐름이 안정적이며, 큰 변동 없이 어느 정도 운영 가능.

피봇(Pivot) 설명: 스타트업이 기존 사업 모델이나 제품 방향을 전면 또는 부분적으로 전환하는 것을 의미. 시장 상황, 기술변화, 투자 여건에 따라 사업 전략을 수정하는 경우가 많음.

2. Next.js와 Server Actions 개념 정리 ⚙️

• Next.js는 React 기반의 서버 사이드 렌더링(SSR) 프레임워크.
• Server Actions는 클라이언트에서 호출하지만 서버에서 실행되는 함수 개념.
• Server Actions는 주로 데이터를 가져와 SSR을 수행하거나, 민감 정보 노출 없이 안전하게 처리 가능.
• 일반적인 GET 요청에 적합하며, POST 요청(업데이트 작업) 등은 별도의 API 백엔드가 필요할 때도 있음.
• Next.js 자체가 백엔드 서버 역할을 하므로, API 서버가 따로 없이도 백엔드 기능을 일부 대체 가능.

Server Actions 설명: 클라이언트 UI에서 이벤트를 발생시키면 서버에서 대응하는 코드를 실행해, DB 작업이나 다른 백엔드 로직을 처리하고 결과를 다시 클라이언트에 전달하는 기능.

3. Next.js의 SSR과 API 서버 분리 이슈 🔄

• Next.js는 SSR을 통해 초기 로딩 속도와 SEO 최적화에 강점.
• 그러나 SSR을 하면서 데이터 처리 부하가 서버에 몰릴 수 있음.
• 대규모 혹은 복잡한 애플리케이션은 API 서버를 분리해 역할을 나누는 것이 유지보수와 확장성에 유리함.
• API 서버 분리는 워터폴(waterfall) 문제 완화에도 도움을 줌.

워터폴 문제 설명: 웹 요청 중 여러 API 호출이 순차적으로 이루어져 전체 로딩 시간이 길어지는 현상. 병렬 처리나 캐싱 전략으로 개선 가능.

4. Next.js 14의 새로운 기능과 라우팅 변경 가능성 🆕

• Next.js 14부터 라우팅에서 router.query 기능이 app 라우터에서는 없어짐.
• 데이터 전달 시 쿼리 파라미터, 쿠키, 로컬스토리지, 전역 상태관리 등 다양한 방법을 활용 가능.
• Next.js의 파일 구조 및 라우팅 규칙은 현업에서 대부분 기본 규칙을 준수하고 있음.
• 라우팅 구조 변경은 거의 하지 않으며, 일종의 컨벤션 또는 표준으로 받아들여짐.

5. 클라이언트와 서버 함수의 구분과 보안 관점 🔐

• Next.js 14에서 ‘use server’, ‘use client’ 모듈을 통해 서버 전용 함수와 클라이언트 전용 코드를 구분.
• 서버 함수는 클라이언트에서 호출되지만 네트워크 요청을 통해 서버에서 실행됨.
• 클라이언트 사이드에서는 민감 정보가 노출되지 않도록 설계됨.
• 클라이언트에서 다루는 데이터는 본질적으로 공개되어 있기 때문에, 중요한 정보는 서버에서만 처리하는 것이 필수.

6. 페이지 간 데이터 전달 방법과 보안 고려사항 🔗

• 페이지 이동 시 데이터를 넘기는 방법은 다양함:
  • 쿼리 파라미터(query params)
  • 쿠키
  • 로컬 스토리지(localStorage)
  • 전역 상태관리(state management)
  • 서버 세션
• 쿼리 파라미터에 비밀번호나 민감 정보는 담으면 안 됨.
• POST 메소드(폼 데이터 전송)를 통한 안전한 데이터 전송이 권장됨.
• 클라이언트에 노출되는 정보는 암호화해도 완전한 보안이 어렵기에 주의 필요.

7. React, Next.js, PHP 연관성 및 개발자 경험 토론 💻

• React는 UI 라이브러리, Next.js는 이를 기반으로 한 SSR 프레임워크.
• PHP는 오랜 기간 웹 서버 사이드에서 사용돼온 언어.
• Next.js 등장 전 서버 사이드 렌더링은 PHP, ASP.NET 등이 담당했음.
• React 도입 후 프런트엔드 개발 패러다임이 크게 변화.
• 일부는 PHP를 유머 섞어 'use PHP'라며 익숙함과 새로운 기술 차이를 토론.
• SEO 때문에 SSR(서버 사이드 렌더링) 공부를 시작한다는 의견이 많음.

8. Next.js와 React 생태계 및 SEO 전략 🌐

• SPA(Single Page Application)는 SEO에서 불리할 수 있음.
• Next.js SSR은 서버에서 미리 완성된 HTML을 내려줘 SEO 최적화에 유리.
• React만 공부해도 내부 동작 원리와 한계를 이해하는 데 도움.
• 고객 경험은 결국 잘 보이고 빠른 UI가 중요하므로, 기술 선택은 현실적인 목표에 맞춰야 함.

9. 개발 문화 속 ‘순응’과 컨벤션 논의 🎭

• Next.js app 구조는 예약된 규칙(파일명, 폴더 구조)으로 짜여져 있음.
• 실무에서는 이 규칙을 크게 바꾸지 않고 순응하는 것이 일반적.
• ‘순응’은 약속된 컨벤션에 따라 일관성을 유지하고 협업 효율을 높이는 의미로 자주 사용.
• 개발 현장에서는 컨벤션이 작업 범위를 줄여주고 안정성을 제공함.

10. 면접팁⚡

• 스타트업 투자와 운영 현실을 이해하고, 구체적인 런웨이 및 투자절차에 대해 설명할 수 있으면 좋음.
• Next.js에서 SSR, Server Actions, API 서버 분리의 개념 차이를 명확히 이해하자.
• 보안 관점에서 클라이언트-서버 데이터 흐름을 안전하게 관리하는 방법을 숙지할 것.
• 개발 규칙(컨벤션)과 그 이유, 현업 적용 사례를 말할 줄 알아야 협업 능력 어필 가능.
• SEO 최적화와 SPA 한계에 대한 이해는 프론트엔드 개발자로서 필수이다.

링크🔗

• Server Actions 공식 문서: https://react.dev/reference/rsc/use-server
• Next.js app router 관련 공식 문서: https://nextjs.org/docs/app/api-reference/functions/use-router
• React 관련 서버 액션 가이드(한글): https://ko.react.dev/reference/rsc/use-server
• Next.js 14 관련 토픽: https://nextjs.org/blog/next-14
• 참고 GitHub 예제 (PHP + Next.js 밈): https://github.com/bufferhead-code/nextjs-use-php
• React 공식 문서(참고용): https://reactjs.org/docs/getting-started.html
• AES 암호화 참고 (클라이언트 보안): https://ko.react.dev/reference/react/experimental_taintUniqueValue
• YouTube 예시 (징글 영상 공유): https://youtube.com/shorts/7Esjna4zULg?si=fAIPnrWeXCg1Zm3N