[모의면접]2주차

1. 브라우저의 렌더링 과정에 대해 설명해주세요.

⇒ 리플로우 지양해야된다, 레이아웃에 영향을 미치는 속성이 어떤 게 있는지 공부해보기

"브라우저는 HTML, CSS, JavaScript 파일을 받아 화면을 그리는 과정을 거칩니다. 가장 먼저 HTML을 받아 **DOM(Document Object Model)**을 생성하고, CSS 파일로 **CSSOM(CSS Object Model)**을 만듭니다. 이어서 이 둘을 결합해 렌더 트리를 생성하고, 레이아웃 계산 후 GPU를 통해 최종 화면을 그립니다. 이러한 과정은 사용자가 웹페이지를 볼 수 있게 하는 렌더링 파이프라인의 핵심입니다."

2. 프로덕트의 퀄리티와 데드라인 중 어느 쪽에 더 중요도를 두시나요?(완벽)

"저는 프로젝트의 성격과 목표에 따라 우선순위가 달라질 수 있다고 생각합니다. 데드라인이 중요한 경우라면, 예를 들어 출시 시점이 마케팅이나 시장 점유율에 직접적인 영향을 미치는 상황에서는 핵심 기능에 집중해 빠르게 출시하고, 이후에 추가 업데이트를 통해 개선점을 보완하는 것이 효과적입니다.

반면, 신뢰성과 완성도가 중요한 프로젝트라면, 예를 들어 금융 서비스처럼 오류가 사용자의 신뢰에 큰 영향을 미칠 수 있는 경우, 데드라인을 조정해서라도 퀄리티를 높이는 것이 더 중요합니다. 이러한 상황에서는 충분한 테스트와 검증 과정을 통해 완성도를 확보하는 것이 우선입니다.

결국, 저는 사용자에게 가장 큰 가치를 제공할 수 있는 방향으로 결정해야 한다고 생각합니다. 팀원들과의 논의를 통해 프로젝트의 목표와 우선순위를 명확히 하고, 필요한 경우 데드라인과 퀄리티 간의 균형을 맞추는 것이 최선의 접근이라고 봅니다."

3. 특정 기술 스택을 선택했던 경험과 그 과정을 설명해주세요.

"제가 참여한 프로젝트에서 Next.js를 기술 스택으로 선택했던 경험이 있습니다. 선택 과정에서는 팀의 요구사항과 프로젝트의 목표를 우선적으로 고려했습니다. Next.js를 선택한 이유는 첫째, 서버 사이드 렌더링을 지원해서 검색엔진 최적화(SEO)에 유리했고, 둘째, 파일 기반 라우팅을 통해 코드 관리가 용이했기 때문입니다. 또한, 이미지 최적화와 코드 스플리팅 같은 기본 제공 기능이 성능 향상에 도움이 될 것이라 판단했습니다. 이러한 장점들을 분석하고 팀원들과 공유한 후 최종적으로 Next.js를 채택했습니다."

4. 제어 컴포넌트와 비제어 컴포넌트의 장단점에 대해 설명해주세요.

비제어 컴포넌트는 렌더링 최적화가 필요한 상황에서 효과적인 선택이 될 수 있습니다.

제어 컴포넌트는 React에서 권장되는 방식으로, 상태 관리를 통해 화면과 입력값을 동기화하기 쉽지만, 입력값이 변경될 때마다 렌더링이 발생하는 단점이 있습니다. 특히, 폼에 입력 필드가 많거나 유효성 검사를 빈번히 수행해야 하는 경우, 성능 문제가 발생할 수 있습니다.

이런 경우에는 비제어 컴포넌트를 사용하여 렌더링 부담을 줄이는 것이 적합합니다. 비제어 컴포넌트는 DOM에서 값을 직접 관리하므로 렌더링 횟수를 줄일 수 있지만, 상태 관리와 동기화가 복잡해질 수 있다는 점도 고려해야 합니다.

결론적으로, 제어 컴포넌트는 기본적으로 권장되지만, 성능 최적화가 필요한 경우 상황에 따라 비제어 컴포넌트를 사용하는 것이 더 나은 선택이 될 수 있습니다.

5. 리팩터링을 통해 코드 가독성을 높인 경험이 있나요?

"네, 최근 진행했던 프로젝트에서 중복된 코드가 많은 컴포넌트를 리팩터링했던 경험이 있습니다. 비슷한 구조를 가진 여러 컴포넌트를 하나의 재사용 가능한 컴포넌트로 만들고, props를 통해 데이터를 동적으로 전달하도록 변경했습니다. 이를 통해 코드의 길이가 줄어들었고, 새로운 요구사항이 생겼을 때 유지보수와 확장이 훨씬 용이해졌습니다. 또한, 코드 리뷰 과정에서도 가독성이 좋아졌다는 피드백을 받을 수 있었습니다."

6. Next.js에서 라우트 핸들러를 사용했던 경험과 그 장단점에 대해 설명해주세요. ⇒ REST API, 서버리스함수에 대해 공부하기

"Next.js 14에서 API를 구현할 때 라우트 핸들러를 사용했던 경험이 있습니다. 예를 들어 사용자 인증 기능에서 라우트 핸들러를 사용해 로그인과 비밀번호 초기화 기능을 구현했습니다. 장점으로는 파일 기반으로 API를 생성할 수 있어 코드의 구조화가 쉽고, 서버에서 처리해야 하는 로직을 깔끔하게 분리할 수 있다는 점이 있습니다. 단점으로는 복잡한 비즈니스 로직이 많아질 경우 라우트 핸들러 내부의 코드가 길어질 수 있어 유지보수가 어려워질 수 있다는 점이 있습니다. 이를 해결하기 위해 로직을 서비스 파일로 분리해 관리했습니다."

7. 팀원과 의견 충돌이 있었던 경험과 해결 방법을 설명해주세요.

"Next.js 프로젝트를 진행하면서 팀원과 데이터를 가져오는 방식에 대해 의견이 충돌했던 적이 있습니다. 팀원은 클라이언트 컴포넌트에서 데이터를 가져오는 방식(CSR)을 선호했고, 저는 서버 컴포넌트를 활용한 SSR(Server-Side Rendering)을 제안했었습니다.

제가 SSR을 제안한 이유는, 첫째로 데이터를 서버에서 미리 가져오면 초기 로딩 속도가 개선될 수 있고, 둘째로 SEO(Search Engine Optimization)가 중요한 페이지에서는 SSR이 검색엔진 크롤링에 유리하기 때문이었습니다.

하지만 논의를 통해 프로젝트의 특성상 사용자 인터랙션이 많고, 서버 요청을 최소화해 사용자 경험을 빠르게 제공하는 것이 더 적합하다는 결론에 도달했습니다. 최종적으로 클라이언트 컴포넌트와 CSR 방식을 선택했으며, 로딩 중 스켈레톤 UI를 추가해 초기 화면의 사용자 경험을 개선하는 방법을 함께 적용했습니다. 이렇게 각 방식의 장단점을 명확히 이해하고, 프로젝트의 요구사항에 맞춰 결정을 내릴 수 있었습니다."

8. 가장 최근에 진행한 프로젝트와 본인의 역할에 대해 설명해주세요.

"가장 최근에 진행한 프로젝트는 Next.js 14를 활용한 학습 관리 시스템 개발이었습니다. 이 프로젝트에서 저는 Next.js의 App Router를 사용해 동적 라우팅을 구현했고, 학습 리스트 페이지와 학습 카드 페이지, 최신학습리스트페이지를 담당했습니다.

학습 리스트 페이지에서는 Supabase와 연동해 학습 데이터를 서버에서 가져오고, 사용자에게 목록 형태로 제공하는 기능을 구현했습니다. 또한, 학습 카드 페이지에서는 선택된 학습 아이템의 세부 정보를 표시하고, 관련 데이터를 효율적으로 로드하기 위해 Next.js의 Server Components를 활용했습니다.

• *ISR(Incremental Static Regeneration)**도 사용해 학습 데이터가 자주 변경되지 않는 점을 고려하면서도 일정 주기로 최신 데이터가 반영되도록 설정했습니다. 예를 들어, 최신학습리스트페이지는 하루에 몇 번만 데이터를 새로 생성해야 했기 때문에 ISR을 활용해 정적 페이지를 효율적으로 업데이트할 수 있었습니다. 이를 통해 초기 로딩 속도를 크게 개선하면서도 서버 부하를 줄일 수 있었습니다.

또한, Tailwind CSS를 사용해 반응형 디자인을 적용해 사용자들이 다양한 디바이스에서 학습 시스템을 원활하게 사용할 수 있도록 했습니다. 이번 프로젝트를 통해 Next.js의 동적 라우팅, ISR, 그리고 Supabase 연동에 대한 실무 경험을 쌓으며 퍼포먼스 최적화와 사용자 경험 개선에 기여할 수 있었습니다."