목차
- README 작성 방향과 과제 전형
- Next.js 14와 Fetch vs Axios
- React 프로젝트 내 정적 자산 관리 방식
- TypeScript의 any vs unknown 차이점
- React 조건부 렌더링 패턴과 Fragment 사용 팁
- Node.js에서 Axios Interceptor 활용 에러 처리
- 고정 IP와 포트포워딩 기본 개념
- 변수명 축약과 자동완성 도구 사용 경험
- 회사 내 성과 평가 관련 고민
- 면접과 채용 준비 팁
1. README 작성 방향과 과제 전형
- README에는 기본적으로 폴더 구조, 실행 방법, 고려 사항(로직 설명)을 포함하면 도움이 됨.
- 일부는 README를 거의 안 읽고 제출하지만, 이는 면접 시스템이나 회사 문화에 따라 다름.
- README에 고민했던 부분, 해결 과정, 어필할 부분 적으면 스스로 학습 점검 기회가 됨.
- 결국 README 작성 여부는 지원자 자유지만, 자세히 쓴 README는 커뮤니케이션 능력 평가 자료가 될 수 있음.
2. Next.js 14와 Fetch vs Axios
- Next.js 14는 서버 컴포넌트에서 기본적으로 fetch() API를 지원함.
- Axios 대신 fetch를 쓰는 추세가 늘고 있음.
- fetch는 기본 브라우저 제공 API라 별도 설치 필요 없고, Next.js가 최적화 작업을 해줌.
- Axios는 사용 편의성, 에러처리, 인터셉터 등 부가 기능이 많음.
- 상황과 팀 취향에 따라 선택하면 됨.
3. React 프로젝트 내 정적 자산 관리 방식
- React 클라이언트에서 최초 접속 시 public 폴더 내 정적 자산이 모두 내려받아지는 게 아님.
- 각 컴포넌트에서 필요한 정적 자산만 요청되어 받아짐.
- src 폴더 내부의 에셋은 번들에 포함되어 한꺼번에 로드됨.
- 대용량 정적 자산이라면 효율적인 코드 분할과 동적 로딩 고려 필요.
4. TypeScript의 any vs unknown 차이점
- any는 모든 타입을 의미하며, 아무 제약 없이 사용 가능해 타입 안정성 감소 위험 있음.
- unknown은 "알 수 없는" 타입으로 사용 시 타입 검사를 강제함.
- unknown은 any보다 안전하며, 타입을 좁히는 과정을 거쳐야 함.
- 타입스크립트 초보자들은 any를 쉽게 쓰지만, 점진적으로 unknown이나 구체적 타입 사용 연습 권장.
5. React 조건부 렌더링 패턴과 Fragment 사용 팁
- 조건부 렌더링 시 <>{isShow && <div>…</div>}</> 같은 방식은 React 린트 플러그인에서 경고 발생 가능.
- 린트 규칙 "react/jsx-no-useless-fragment"는 불필요한 Fragment 사용을 경고함.
- 삼항 연산자 혹은 조건 렌더링 컴포넌트를 만들어 선언적으로 처리하는 방법 추천.
- 코드 가독성과 동료 협업을 위해 적절한 방법 선택 필요.
- 예: 별도의 <Condition> 컴포넌트 사용하거나 if문으로 반환 분기 처리.
6. Node.js에서 Axios Interceptor 활용 에러 처리
- Axios Interceptor는 요청/응답 과정에서 에러를 가로채고 처리 가능함.
- 403 등의 서버 에러 메시지를 사용자에게 직접 보여주지 않고 내부적으로 처리하는 용도로 쓰임.
- 네트워크 탭에서 빨간 에러 메시지가 보이는 것은 개발자 도구가 기본 상태이기 때문이며, 실제 사용자 UI에 노출하지 않으려면 인터셉터에서 별도 처리 필요.
- 미리 서버 권한 문제 등을 방지하는 로직도 중요함.
7. 고정 IP와 포트포워딩 기본 개념
- 집과 같은 개인 네트워크에서 공인 IP는 통신사가 부여하며, 일반적으로 유동 IP가 많음.
- 고정 IP는 추가 비용을 내고 통신사에서 할당받는 경우가 많음.
- 라우터에서 내부 IP를 고정하는 것은 네트워크 내부에서만 의미 있음.
- 외부 기기에서 개인 서버 접속하려면 ISP에서 부여한 공인 IP나 DDNS 서비스 활용 + 라우터 포트포워딩 설정 필수.
8. 변수명 축약과 자동완성 도구 사용 경험
- 과거 불편한 에디터 환경에서는 변수명을 많이 축약해 코딩했으나, 현대 IDE(예: VSCode)에서 자동완성 지원되면서 긴 변수명과 명확한 이름 쓰는 편이 추세.
- 지나친 축약은 협업 시 코드 이해도와 유지보수성을 떨어뜨릴 수 있음.
- 대표적 축약 예: rgBgColor (regionBackgroundColor)
- 가능하면 의미 있는 변수명을 권장하며, 팀 내 컨벤션을 따르는 게 중요.
9. 회사 내 성과 평가 관련 고민
- 성과 평가가 잘 체계화된 회사는 직원의 업무 가치 판단과 보상이 명확함.
- 제대로 된 성과 평가 체계가 없으면 개인 어필과 팀내 평가가 중요해짐.
- 연봉 인상과 성과 평가는 회사 정책 및 부서 수익에 좌우되는 경우 많음.
- 성과 평가 방식은 회사마다 달라 "좋다/나쁘다" 보다 "체계적"인지가 관건.
10. 면접과 채용 준비 팁
- 과제 전형은 최대한 빠르게 제출하는 것보다 완성도와 내용에 집중하는 게 더 중요함.
- README와 코드 설명은 지원자의 커뮤니케이션 역량 및 문제해결 과정 보여주는 좋은 자료.
- 면접 과정에서 타입스크립트 any와 unknown 차이, 조건부 렌더링 패턴 등 기본 개념 질문 가능성 있음.
- 회사 공고, 과제, 코테를 꾸준히 체크하고 준비할 것.
면접팁⚡
- README 작성 시 폴더 구조, 실행 방법, 기술 선택 이유를 명확히 적으면 커뮤니케이션 능력과 문제 해결 과정을 어필 가능.
- TypeScript에서 any보다 unknown을 써서 안전성을 확보하는 이유를 설명할 줄 아는 것이 좋음.
- React에서 조건부 렌더링 시 불필요한 Fragment 사용 금지 규칙과 대체 방법을 미리 알고 있으면 인상적임.
- Axios Interceptor로 에러 로그 처리를 커스터마이징하는 경험은 백엔드 및 프론트 연동 이해도를 보여줄 수 있음.
링크🔗
- JavaScript Ninja Code - 코딩 관행과 변수명 줄임에 대한 심도 있는 글
- 개발자용 javah 라이브러리 (npm) - 스프링부트와 익스프레스 연동 참고자료
- Axios Interceptors 공식 문서 - 에러 처리 방법 참고
- AWS 프리티어 비용 이슈 관련 블로그 - 프리티어 오해와 비용 주의사항
- Next.js 공식 문서 - 서버 컴포넌트와 fetch API 관련 내용
- React 공식 문서 - 조건부 렌더링
- 포트포워딩 이해하기
- TypeScript any vs unknown 차이
#README#Nextjs#React#TypeScript#Nodejs#Axios#포트포워딩#코딩컨벤션#성과평가#면접준비