2024-12-19

목차

1. 코드 자동 포맷팅과 Carboon Coding 소개
2. TDD(Test-Driven Development) 진행 방식과 팁
3. React props와 state의 관계 및 렌더링 원리
4. 모바일 웹뷰 딥링크 이슈 및 해결 방법
5. 데이터 중복 제거 시 성능 고려와 in-memory 처리
6. Next.js 서버 컴포넌트와 서버 액션의 하이드레이션 개념
7. FSD(Feature-Sliced Design) 도입 고민과 컨벤션 중요성
8. Electron vs Tauri 비교 및 메모리 사용 관련 의견
9. 개발툴(에디터) 선호도: WebStorm vs VSCode vs JED 등
10. 면접팁⚡ & 링크🔗

1. 코드 자동 포맷팅과 Carboon Coding 소개

• "코드를 예쁘게 포맷팅하는 방법"에 대한 질문
• ‘Carboon Coding’이라는 사이트 추천, MacOS 느낌의 깔끔한 자동 포맷팅 제공
• 이런 서비스는 코드 스타일을 자동으로 맞춰줘서 협업 시 통일성 유지에 도움됨

초보자 설명

자동 포맷팅 도구들은 들여쓰기, 줄바꿈, 공백 등을 자동 조정해줘서 코드를 보기 좋게 정리해준다. 별도의 수동 정리가 필요 없어 코드 리뷰나 유지보수가 쉬워진다.

2. TDD(Test-Driven Development) 진행 방식과 팁

• TDD는 "요구사항 기반 테스트부터 작성"이 핵심 (MS 의견)
• GJ가 실전 순서로 "기본 마크업 구현 → 테스트 작성 → 실패 확인 → 로직 구현 → 성공 확인" 순서 질문
• 정석 TDD: 우선 실패하는 요구사항 테스트 케이스 작성 → 로직 구현 → 테스트 성공 확인 → 반복
• 테스트 코드에서는 기능을 가능한 쪼개서 작성하는 것이 좋음 (CB 의견)
• 완벽한 TDD는 존재하지 않으며, 선행 작업과 후행 작업의 균형이 중요

TDD란?

테스트 주도 개발은 먼저 테스트 코드를 작성하고 실제 기능 코드를 구현하는 방식이다. 이를 통해 요구사항 충족 여부를 명확히 하고, 버그 발생 가능성을 줄인다.

3. React props와 state의 관계 및 렌더링 원리

• props는 state가 아니며, 부모 컴포넌트가 상태를 관리하든 아니든 상관없음 (DF)
• props 변경 시 해당 컴포넌트가 리렌더링 되는 것이 정상 (DO)
• useEffect 훅에서 props를 의존성 배열에 포함하여 변화 감지가 가능하므로 'state처럼 작동'하는 것처럼 보임 (BO)

초보자 설명

React 컴포넌트는 부모가 넘긴 값을 props로 받아서 화면에 뿌린다. props는 읽기 전용이며 변경은 부모에서 한다. props가 바뀌면 컴포넌트가 다시 그려진다. state는 컴포넌트 내부에서 관리하는 값이다.

4. 모바일 웹뷰 딥링크 이슈 및 해결 방법

• 모바일 웹접근 시 앱 설치 유무에 따라 다운로드 페이지나 앱 실행으로 리디렉션하는 이슈
• blur, visibilitychange 이벤트와 타이머를 이용한 앱 설치 감지 방법은 브라우저 정책으로 매끄럽지 못함 (ZG)
• 팝업 차단 문제와 타이머 실행 타이밍 조절이 어렵고, 편법 사용에 가까움
• 가능한 해결책: 안드로이드 기준 웹뷰 대신 앱 내 액티비티로 띄우거나, 윈도우 객체 관리하여 올바른 팝업만 감지하는 방법 (JU)
• 인증이 필요 없는 공유 링크 상황에서 적용 가능성 고민 중

딥링크란?

앱 내부 특정 화면 혹은 기능으로 연결되는 링크다. 웹에서 딥링크를 사용해 앱 설치 여부를 판단하고 설치 유도 페이지로 보내기도 한다. 웹표준 및 정책 때문에 제약이 많다.

5. 데이터 중복 제거 시 성능 고려와 in-memory 처리

• 중복 제거 로직 (filter + some 활용)과 Set 사용법 비교
• 작은 데이터(예: 50개 이하)에서는 O(n*m) 연산도 성능 문제가 거의 없음 (HF, OS)
• 가독성이나 코드 간결함 때문에 복잡한 최적화가 필요하지 않을 수 있음
• 데이터가 많아질 경우에만 최적화 고려하면 됨

초보자 설명

중복되는 데이터를 제거할 때는 간단하게 여러 for문을 돌 수 있는데, 데이터가 많으면 느릴 수 있다. 하지만 데이터가 작으면 복잡한 최적화 필요 없이 간단한 코드를 쓰는 게 편리하다.

6. Next.js 서버 컴포넌트와 서버 액션의 하이드레이션 개념

• 서버 컴포넌트에서 서버 액션 호출 시, 클라이언트에 ‘최소한의 JS 코드’만 주입된다 (GB)
• 서버 액션의 실제 코드(예: DB 쿼리 등)는 클라이언트에 노출되지 않는다 (NR)
• 하이드레이션 과정은 클라이언트에 필요한 JS 코드를 주입하는데, 서버 액션 수행 자체는 서버에서 처리됨
• 만약 서버 액션 코드가 클라이언트에 완전 주입되면 보안 문제 발생

하이드레이션(yhydrate) 설명

서버에서 렌더링한 UI를 클라이언트에서 정상적으로 동작하게 하기 위해 클라이언트쪽에서 JS를 실행해 이벤트 등을 활성화하는 과정.

7. FSD(Feature-Sliced Design) 도입 고민과 컨벤션 중요성

• FSD는 기능 단위로 폴더 구조를 나누는 설계 방법
• 도입 시 팀 내 개념 동기화와 컨벤션 준수가 아주 중요함 (US)
• 컨벤션 없이는 모든 코드가 util(공통) 폴더에 난립하는 문제 발생 (NP)
• 일단 시도 후 리팩토링하는 것도 하나의 방법

8. Electron vs Tauri 비교 및 메모리 사용 관련 의견

• Electron 사용 경험 많음, Tauri는 러스트 기반이며 처음 듣는 이들도 있음 (XH, PW)
• Tauri는 메모리 사용량 줄일 수 있는 대안으로 평가됨
• 다만 현재 Tauri도 Electron 위에서 돌아가거나 호환하는 경우가 발견됨 (NP)
• 팀 용도에 따라 사내 PC에서 웹뷰 이슈가 별로 없고 항상 켜둬야 한다면 Tauri가 적당할 수 있음

9. 개발툴(에디터) 선호도: WebStorm vs VSCode vs JED 등

• Typescript 쓰면 웹스톰은 인덱싱 문제로 비추천하는 의견 (LN)
• VSCode는 타입 추론에 더 의존하고, 타입 명시로 컴플렉스 줄이고 있음 (OS)
• JetBrains 제품 중 Rider, ReSharper는 평이 좋음 (OS)
• 새로운 에디터로 JED가 거론되고 있으며, 아톰 대체로 주목받음 (UO)
• 플릿(Fleet)은 아직 베타 단계라 본격적인 사용은 미뤄져야 한다는 의견

면접팁⚡

• TDD의 기본 흐름과 목적을 정확히 설명할 수 있어야 함
• React의 props와 state 차이, 렌더링 원리를 명확히 이해하고 설명할 것
• 서버 컴포넌트에서 서버 액션 작동 방식을 보안 측면에서 설명하라면, 클라이언트에 코드가 노출되지 않음을 강조
• 복잡한 알고리즘 대신 데이터 크기에 따른 최적화 필요성을 상황에 맞게 판단하는 태도 보여주기
• 개발 도구에 대한 선호 이유와 단점도 말할 수 있으면 좋음

링크🔗

• Carboon Coding: 자동 코드 포맷팅 사이트 (검색 필요)
• TDD 관련 기사: https://yozm.wishket.com/magazine/detail/2308/
• TDD 실전 사례: https://techblog.woowahan.com/17404/
• 모바일 딥링크 처리 방법: https://funveloper.tistory.com/130
• Next.js + NestJS 연동 관련: https://velog.io/@pudding/NextJS-%EC%99%80-NestJS%EB%A5%BC-%EA%B0%99%EC%9D%B4-%EC%8D%A8%EB%B3%B4%EC%9E%90-1
• Rust 언어 PR(유머): https://github.com/rust-lang/rust/pull/126888