2024-02-06

목차

1. Git 브랜치 및 Express 사용 후기
2. 코파일럿 활용 팁과 한계
3. React SPA 배포 방법과 서버 선택
4. React 컴포넌트 구조: Tree와 의존성 순환 문제
5. TypeScript: interface vs type 토론
6. 카카오 인앱 브라우저 팝업 제한 이슈
7. ORM 비교: Prisma, Sequelize, TypeORM
8. 상태관리에서 JSX 직접 관리 문제
9. 기술 면접 대비 및 인성 면접 고민
10. 기타 Q&A 및 공유

1. Git 브랜치 및 Express 사용 후기

• 브랜치 생성은 GitHub와 GitLab에서 자동 지원돼서 편리함
• Express는 최근에 많이 쓰이며, 개발 효율성이 크게 증가한 패키지
• CLI 환경을 선호하는 개발자가 많고, GUI 사용 시 렉 걸리는 경험도 있음
• CLI는 직접 명령어로 작업하면서 문제 상황을 더 잘 파악할 수 있다는 의견이 있음

설명:

• Git 브랜치는 독립적으로 기능을 개발하거나 수정할 때 사용하는 기능이다. 브랜치 생성과 관리는 주요 Git 플랫폼에서 쉽게 할 수 있다.
• Express는 Node.js 기반 경량 웹 서버 프레임워크로 서버 개발을 간소화해 준다.

2. 코파일럿 활용 팁과 한계

• 많은 개발자가 코드 자동 완성 및 보일러플레이트 작성에 사용
• 예상과 다른 코드가 나오면 바로 넘기거나 사용을 중단함
• 변수명이나 메소드 이름 제안이 유용하지만, 추천 코드가 마음에 들지 않을 때 짜증도 나는 신박한 도구

설명:

• GitHub Copilot은 AI 기반 코드 자동 완성 도구로, 개발자가 코드를 작성할 때 문맥에 맞는 코드를 제안한다.
• 장점은 반복적이고 기본적인 코드를 빠르게 작성할 수 있다는 점이고, 단점은 완벽하지 않은 코드가 제안될 수 있다는 점이다.

3. React SPA 배포 방법과 서버 선택

• React로 만든 싱글 페이지 애플리케이션(SPA)은 빌드 결과물이 정적 파일들
• 일반적으로 Nginx 또는 Apache HTTP Server를 사용하여 정적 파일을 배포함
• 서버리스 데이터베이스(neon.tech 같은)도 공부 중인 개발자 다수
• AWS Aurora와 서버리스 PostgreSQL 경험 공유도 활발

설명:

• SPA는 단일 HTML 페이지 내에서 동적으로 화면을 바꾸어 사용자에게 빠른 반응성을 제공하는 방식
• 빌드 결과물은 HTML, JS, CSS 등 정적 파일 형태로, 이 파일들을 정적 웹 서버에서 서비스한다.
• Nginx, Apache는 널리 사용되는 웹 서버로, 정적 파일을 빠르게 전달하는 역할을 한다.

4. React 컴포넌트 구조: Tree와 의존성 순환 문제

• 계층 구조인 트리 UI 컴포넌트를 설계할 때 종종 Tree, TreeItem 컴포넌트가 서로를 import하며 의존성 순환 발생
• 의존성 순환(Dependency Cycle)은 두 모듈이 서로를 참조해 문제가 생기는 현상임
• 이를 피하려면 하나의 파일에서 모두 관리하거나, TreeItem만으로 재귀 처리하는 방법 제안

설명:

• 의존성 순환 (Dependency Cycle) 은 코드가 서로 맞물려 꼬이는 현상으로, 런타임 오류 또는 빌드 에러를 유발할 수 있음
• 재귀 컴포넌트 구조는 상위 컴포넌트가 자식 컴포넌트를 계속 호출하는 구조를 말하며, 단일 컴포넌트 재활용으로 순환 문제를 줄일 수 있다.

5. TypeScript: interface vs type 토론

• interface는 주로 객체의 형태 정의에, type은 좀 더 폭넓은 타입 정의에 사용
• 인터페이스는 상속과 확장에 유리하다고 알려져 있지만, 실제론 type도 확장이 가능함
• 개발 스타일, 아키텍처(예: 아토믹 패턴)나 팀 내 컨벤션에 따라 선택 하기도 함
• 인터페이스는 클래스 추상화 개념과 닮아 있으며, 타입은 데이터 타입 조합에 더 강점

설명:

• TypeScript의 interface 는 객체 및 클래스 형태를 정의하고 상속이 가능해 OOP 스타일에 적합
• type alias 는 원시, 유니언, 인터섹션 타입 등 복잡한 타입 조합에 강점
• 혼합 사용하거나 팀 내 합의를 통해 통일하는 것을 권장

6. 카카오 인앱 브라우저 팝업 제한 이슈

• 카카오 인앱 브라우저에서 alert 팝업이 작동하지 않는 문제 발생
• 팝업 대신 커스텀 UI를 화면에 구현하는 방식을 사용했으나, 카카오 인앱 브라우저는 이를 차단하는 경우도 있음
• 인앱 브라우저의 자바스크립트 실행 정책이나 보안 제한이 원인
• 해결책으로는 카카오 제공 공식 SDK 활용하거나, toast UI 같은 별도의 방식 사용 권장

7. ORM 비교: Prisma, Sequelize, TypeORM

• Prisma, Sequelize, TypeORM이 인기 ORM으로 언급됨
• 무난한 선택 기준에 대한 질문 많음
• Prisma는 타입스크립트 친화적이고 사용이 편리하다는 평
• Sequelize는 오래된 만큼 커뮤니티와 안정성이 좋음
• TypeORM은 데코레이터 기반이며 클래스를 ORM 객체로 활용하는 방식
• 용도, 팀 성향, 프로젝트 규모에 따라 선택 달라질 수 있음

8. 상태관리에서 JSX 직접 관리 문제

• Zustand 같은 상태관리 라이브러리로 JSX 코드를 상태로 관리하는 시도를 하는 경우 있음
• JSX를 상태값으로 다루면 유지보수 어려움과 버그 발생 우려 존재
• React의 선언적 UI와 맞지 않는 방식으로 권장하지 않는 의견 다수
• 컴포넌트를 전역 상태로 관리할 땐 컴포넌트 참조나 상태값 분리 권장

9. 기술 면접 대비 및 인성 면접 고민

• 면접에서 클로저, 실행 컨텍스트 같은 기본 개념 질문 종종 나옴
• 암기보다 이해가 중요하지만, 어려운 부분은 암기로 보완하는 경우도 있음
• 인성/컬쳐핏 면접은 답변 포맷이 정해져 있지 않아 어려움 많음
• 존경하는 인물 질문부터 10년 후 본인 위치 질문까지 다양하며, 면접관 진의를 파악하는 게 중요
• "기술 면접 질문만 묻는 회사는 채용 능력이 의심된다"는 경험 공유도 있음
• 이력서에 프로젝트 경험과 실무 수준이 맞는지 확인하는 과정 중요성 언급

10. 기타 Q&A 및 공유

• React DevTools가 크롬에 안 보일 때는 확장 프로그램 설치 및 활성화 확인 필요
• Nginx proxy 서버 여러 대 동작 시 한 서버 다운 시 부하 문제 문의
• 큰 이미지 파일을 display:none 처리해도 렌더링 성능 영향 있음, lazy loading 권장
• 사내 프라이빗 Git 서버 구축 시 Gitea, GitLab 등 셀프 호스팅 대안 소개
• 쇼핑 리스트처럼 데이터량 많을 땐 백엔드에서 가공하는 것이 일반적이나, 회사마다 역할 분담 다름
• UI 디자인 참고는 Dribbble, UiKit, AI 기반 템플릿 등 이용 권장
• 웹 프론트엔드 모듈 번들러는 Vite가 대세, Webpack 시대는 한풀 꺾인 분위기
• ES 모듈 import와 CommonJS require 혼용 상황 및 설정 주의 필요

면접팁⚡

• 기본적인 JavaScript 개념(클로저, 실행 컨텍스트 등)은 꼭 정확히 이해하고 설명할 수 있어야 함
• 기술 면접 질문 암기는 한계가 있어, 개념을 이해하고 다양한 예제로 익히는 것이 효과적
• 인성 면접 질문은 정답이 없으니 자연스럽고 진솔한 답변을 준비하되, 회사 문화와 맞는 점을 어필하는 것이 중요
• 직무와 관련 없는 질문은 면접관의 관심사 파악 및 관계 형성 기회로 활용하길
• 면접 전 회사의 기술 스택과 프로젝트, 문화에 대한 사전 조사가 큰 도움이 됨

링크🔗

• 코드 제너레이션 및 GraphQL 코드 생성기 - The Guild
• Pandacss 패턴 활용 (원형 등)
• React DevTools 설치 관련 도움
• Gitea 셀프 호스팅 및 CI/CD
• 네온 서버리스 Postgres
• 당근채용 공고
• TypeScript interface vs type 성능/사용법 정리 - Microsoft Wiki
• [Vercel, Tailwind CSS 공식 사이트, Dribbble 디자이너 커뮤니티](https://vercel.com/, https://tailwindcss.com/, https://dribbble.com/)