2024-02-03

목차

1. 연말정산과 회계 처리 소소한 이야기
2. 스타트업 근무시간과 복지에 대한 토론
3. ESLint와 코드 문법 검사 도구 이해
4. TypeScript 제네릭과 타입 추론
5. React, React Router, React Query 최신 동향 및 팁
6. 협업 경험과 포트폴리오 준비 조언
7. 디버거(Debugger)와 Console.log 차이점
8. 네트워크 포트포워딩 기본 이해
9. TypeScript 인터페이스 내 함수 유형 지정 방법
10. Next.js와 fetch 캐시 기능에 대한 고민

1. 연말정산과 회계 처리 소소한 이야기

• 계좌이체만 했는데 자동으로 안경 구매 내역으로 인식되어 놀랍다는 이야기
• 부동산 중개수수료(복비)를 현금으로 지불해도 연말정산에 반영된다는 경험담
• 이런 자동화는 세무 전산시스템이 점점 정확해지고 편리해지는 증거임

2. 스타트업 근무시간과 복지에 대한 토론

• 주 35시간, 하루 7시간 근무가 초기 스타트업에서 얼마나 적절한지 의견 교환
• 대표는 ‘무한대’ 근무 시간이지만 직원은 9시~6시 근무가 현실적
• '줬다 뺐으면' 반발이 심하니 근무시간과 복지는 초기에 정해서 유지하는 것이 중요
• 점심시간 2시간보다 1시간이 무난하고 업무량 따라 조절하는 게 좋다는 의견
• 실제 작업 시간과 근무 시간은 다를 수 있고 자율 출퇴근제를 선호하는 문화 언급
• 반복 업무에 근무 시간보다 자동화가 우선이라는 조언도 있었음

3. ESLint와 코드 문법 검사 도구 이해

• ESLint는 자바스크립트 문법 검사 및 코드 품질 관리용 정적 분석 도구임
• IDE에서 문법 오류를 빨간 밑줄 등으로 표시해줘서 편리하게 오류 파악 가능
• 설정에 따라 검사 항목과 엄격함의 정도를 조절할 수 있으니 환경 설정이 중요
• ESLint가 제대로 작동 하지 않으면 설정을 꼼꼼하게 다시 확인해야 함

초보자 추가 설명
ESLint는 코드에서 문법적 실수를 잡아줌과 동시에, 일관된 코딩 스타일 유지에 도움을 주는 도구입니다. 설치 후, 프로젝트에 맞게 룰을 설정해야 효과적으로 사용할 수 있습니다.

4. TypeScript 제네릭과 타입 추론

• reduce 함수에 제네릭 타입을 넘겨 타입 안전성을 보장하는 방법이 대화됨
• TypeScript 핵심 라이브러리 중 es5.d.ts 참고를 권장
• 제네릭은 특정 타입에 구애받지 않고 다양한 타입을 유연하게 처리할 수 있는 기능
• 기초적인 타입 규칙은 빠르게 익힐 수 있으나 제네릭 응용은 공부가 더 필요
• TypeScript는 JavaScript에 타입 시스템을 입힌 것으로 컴파일 시 타입 오류를 잡아주지만 런타임에는 사라짐

초보자 추가 설명
제네릭은 함수나 클래스 작성 시, 어느 특정 타입에만 한정하지 않고 숫자, 문자열, 객체 등 다양한 타입을 받을 수 있도록 해줍니다. reduce<U>와 같은 형태로 사용하며, 타입 안정성을 높입니다.

5. React, React Router, React Query 최신 동향 및 팁

• React 18과 React Router v6, TanStack Query (React Query) 5 버전 이야기
• React Query는 서버 상태를 쉽게 관리하며 get, post, put, delete 호출과 캐싱에 유리함
• npm install 명령어에 @beta 옵션 때문에 헷갈리기도 함 (@latest와의 차이)
• React Router에서 모든 페이지 이동 전에 커스텀 훅을 실행하려면 각 페이지 컴포넌트 내부에서 훅을 사용하는 게 권장됨
• 복잡한 HOC보다는 간단한 훅 호출 활용을 권장

6. 협업 경험과 포트폴리오 준비 조언

• 협업 경험이 없으면 팀 프로젝트 포트폴리오가 취업 시 더 유리함
• 국비 학원 등에서의 단기 경험과 회사 내 백엔드 협업 경험도 플러스 요소
• 짧은 근속 경력은 상황 설명과 함께 포트폴리오에 포함해도 크게 문제되지 않음
• 중요한 점은 지원하는 회사의 요구사항과 맞추는 것과 코드 퀄리티임
• 개인 프로젝트와 팀 프로젝트 둘 다 각자의 장점이 있으나 협업 경험은 채용 시 어필에 도움

7. 디버거(Debugger)와 Console.log 차이점

• 고수들은 Console.log 대신 debugger; 키워드를 활용하는 경우가 많음
• debugger;는 코드 실행 중 중단점을 설정해 변수 상태, 호출 스택 등을 디테일하게 분석 가능
• Chrome DevTools 등에서 중단점 역할과 코드 흐름 제어를 가능하게 함
• Console.log는 즉각적인 값 출력에 좋고, 디버거는 코드 흐름 탐색에 유리

초보자 추가 설명
debugger; 키워드는 코드가 실행될 때 자동으로 멈추게 하고, IDE나 브라우저 개발자도구에서 변수 상태를 점검할 수 있어 디버깅 경험을 향상시킵니다. Console.log보다 더 정밀한 문제 탐색용 도구입니다.

8. 네트워크 포트포워딩 기본 이해

• 외부에서 집 내 서버 PC 접속 시 공유기(iptime)에서 서버 PC 내부 IP와 포트를 포트포워딩 설정 필요
• 외부 접속 시 공인 IP 주소(네이버 등에서 확인 가능한 IP)와 포트포워딩한 외부 포트를 함께 입력해야 접근 가능
• 공유기 관리 페이지에서 NAT/라우터 설정에 들어가 내부 IP, 내부 포트, 외부 포트 모두 정확히 설정해야 함
• 프로그램이 웹 기반이 아니면 간혹 웹 브라우저 GET 요청과 다를 수 있어 설정에 더 신경 써야 함
• 권한 설정 문제도 고려해야 하며 테스트 시 정확한 서버 IP와 포트 확인 중요

9. TypeScript 인터페이스 내 함수 유형 지정 방법

• 함수 타입 프로퍼티 선언 방식 예) testd: (num1: number, num2: number) => void;
• () => void는 매개변수 없고 반환값 없는 함수의 타입이고, 매개변수가 있으면 (num1: number, num2: number) => 반환타입 형식으로 지정
• 스택오버플로우 질문 링크도 공유하며 화자 혼동 해소
• Arrow function 화살표(=>)는 함수 타입을 표현하는 문법이며 실제 화살표 함수와는 구분됨

10. Next.js와 fetch 캐시 기능에 대한 고민

• Next.js에서 fetch를 확장한 기능으로 axios 대체 고민 중
• React Query도 자체적으로 캐싱 기능이 있어 fetch 캐시의 장점이 뚜렷하지 않은 상황
• fetch API 기본 캐시는 브라우저/서버 레벨에서 작동하지만 리액트 Query는 애플리케이션 레벨에서 보다 세밀한 상태 관리 제공
• 선택은 프로젝트 요구사항, 데이터 동기화 빈도, 복잡도 고려해 결정하면 됨

면접팁⚡

• TypeScript 제네릭과 인터페이스 내 함수 타입 선언법 숙지
• ESLint 설정과 역할에 대해 명확히 설명 가능해야 함
• React Router에서 훅 사용 위치 및 HOC 개념 이해
• 디버깅 도구 차이점과 상황별 적절한 디버깅 방법 답변 준비
• 네트워크 포트포워딩 기본 개념과 문제 해결 방법 알기

링크🔗

• TypeScript reduce 선언 참고: https://github.com/Microsoft/TypeScript/blob/main/src/lib/es5.d.ts
• ESLint 공식 문서 및 설정: https://eslint.org/docs/user-guide/configuring
• React Router v6 공식 문서: https://reactrouter.com/en/main
• TanStack Query (React Query) 공식 문서: https://tanstack.com/query/latest
• 포트포워딩 설명 블로그: https://codingman.tistory.com/35
• StackOverflow: TypeScript interface function property https://stackoverflow.com/questions/60653558/typescript-interface-function-property-whats-the-difference