우문현답
愚 問 賢 答
회사별 면접직군별진행 방식
    홈›회사별›토스›프론트엔드›질문 상세
    問
    토토스프론트엔드직무 역량2026년 출제

    프론트엔드 개발 환경을 개선하기 위해 어떤 도구나 라이브러리를 사용해 본 경험이 있나요? 그 과정에서 어떤 문제를 해결했는지 설명해 주세요.

    답변 미리보기

    동아리 프로젝트에서 팀원 4명이 코드 스타일이 달라서 PR마다 스타일 관련 댓글이 절반이었습니다. ESLint와 Prettier를 같이 설정하기로 했는데…

    예상 답변 시간
    60~90초
    예상 꼬리질문
    3회
    난이도
    난이도 중상
    출제 빈도
    높음
    INTERVIEWER'S INTENT · 면접관의 의도

    이 질문, 네 갈래로 뜯어봅니다.

    면접관이 이 한 문장으로 확인하려는 것들. 각 갈래를 알면 답의 뼈대가 잡혀요.

    問
    01
    도구 사용 경험이 있는가?
    개발 환경 개선을 위해 사용한 도구나 라이브러리의 흔적이 답에 있어야 합니다. 없으면 면접관이 '왜 그 도구를 선택했나요?'를 추가로 묻는 경우가 자주 보입니다.
    骨
    02
    문제 해결 과정은 어떤가?
    문제 해결 과정에서의 구체적인 행동이나 결정이 답에 있어야 합니다. 없으면 면접관이 '어떤 방법으로 해결했나요?'를 추가로 묻는 경우가 많습니다.
    語
    03
    개선 효과를 알리는가?
    개선한 결과에 대한 효과나 변화를 설명하는 흔적이 답에 있어야 합니다. 없으면 면접관이 '결과는 어땠나요?'라며 추가 질문을 던지는 자리가 자주 보입니다.
    本
    04
    도구 선택 기준은 무엇인가?
    사용한 도구나 라이브러리 선택 기준에 대한 논리가 답에 있어야 합니다. 없으면 면접관이 '어떤 기준으로 선택했나요?'를 추가로 묻는 경우가 많습니다.
    말로 해봐야 는다
    읽는 것과 말하는 건 다릅니다.
    이 질문, 소리 내어 답해 볼까요?
    토스 면접관 페르소나가 이 질문을 던지고, 당신의 답에 꼬리질문으로 되물어요.
    음성으로 답해보기
    팀 프로젝트에서 코드 스타일 통일을 위해 린터를 설정한 경험약 85초CRA에서 Vite로 전환했던 경험과 배운 점약 80초프로젝트에서 공통 패키지를 분리하려 한 경험약 78초
    ESLint+Prettier 설정 경험
    약 85초

    팀 프로젝트에서 코드 스타일 통일을 위해 린터를 설정한 경험

    동아리 프로젝트에서 팀원 4명이 코드 스타일이 달라서 PR마다 스타일 관련 댓글이 절반이었습니다. ESLint와 Prettier를 같이 설정하기로 했는데, 처음에는 규칙 충돌로 저장할 때마다 코드가 이상하게 변하는 문제가 발생했습니다. eslint-config-prettier로 충돌하는 규칙을 꺼야 한다는 것을 이틀 만에 알아냈습니다. pre-commit 훅까지 연결하여 린트 실패 시 커밋이 되지 않도록 했으나, 팀원 한 명이 자꾸 우회 방법을 찾아서 갈등이 생겼습니다. 강제가 아니라 팀이 왜 이 도구를 쓰는지 공감해야 작동한다는 것을 배웠습니다. 현재는 린터 규칙을 선정할 때 팀원 의견을 먼저 듣는 방식으로 변경되었습니다.

    이 결의 특징
    4명 팀에서 PR의 절반이 스타일 관련 댓글로 채워진 구체적 문제 상황에서 시작합니다. ESLint와 Prettier의 규칙 충돌로 인한 '저장할 때마다 코드가 이상하게 변하는 문제'를 2일 만에 'eslint-config-prettier'라는 정확한 해법으로 찾아낸 과정이 있습니다. 그 이후 pre-commit 훅에서 생긴 '팀원의 우회 시도'라는 예상치 못한 갈등이 '강제가 아니라 공감이 필요하다'는 배움으로 이어집니다.
    이 결이 통하는 자리
    린트나 포매터라는 도구를 강제하는 것만으로는 팀의 습관이 안 바뀐다는 걸 몸으로 경험한 사람입니다. 이 사람이 챕터에 들어가면 규칙을 정할 때 '팀원 의견을 먼저 듣는 방식'으로 진행하겠다는 약속이 단순한 소통 가치관이 아니라 실제 갈등 해결 경험에서 나온 것이라는 신뢰가 생깁니다.
    Vite 마이그레이션 경험
    약 80초

    CRA에서 Vite로 전환했던 경험과 배운 점

    개인 프로젝트가 커지면서 CRA 기반 빌드 시간이 40초가 넘어갔어요. 핫 리로딩도 느려서 작은 변경사항 하나 확인하는 데 답답했어요. Vite로 마이그레이션한다는 글을 보고 시도했는데, 절대 경로 alias 설정과 환경 변수 형식이 달라서 처음에 빌드가 깨졌어요. 이틀 동안 삽질해서 마이그레이션을 완료했고, 빌드 시간이 40초에서 6초로 줄었어요. HMR이 빨라지니까 개발 흐름이 끊기지 않았어요. 근데 플러그인 생태계가 CRA보다 얇아서 일부 기능은 직접 설정해야 했어요. 이 경험으로 도구 마이그레이션은 성능 이득과 세팅 비용을 같이 따져봐야 한다는 걸 배웠어요.

    이 결의 특징
    개인 프로젝트가 커지면서 'CRA 기반 빌드 시간이 40초'를 넘어간 구체적 고통에서 시작합니다. 'Vite로 마이그레이션'을 시도했지만 '절대 경로 alias 설정과 환경 변수 형식이 달라' 처음 빌드가 깨진 구체적인 장애를 명시합니다. 2일 '삽질'으로 완료한 뒤 '40초에서 6초로' 줄인 수치가 그 고생의 대가를 증명합니다.
    이 결이 통하는 자리
    '도구 마이그레이션은 성능 이득과 세팅 비용을 같이 따져봐야 한다'는 결론이 통하려면 이 사람이 실제로 그 비용을 당했다는 게 함께 살아 있을 때입니다. '플러그인 생태계가 얇아서 일부 기능은 직접 설정해야 했다'는 트레이드오프를 명시한 자리에서 면접관이 이 사람을 신중한 기술 선택자로 봅니다.
    모노레포 구조 경험
    약 78초

    프로젝트에서 공통 패키지를 분리하려 한 경험

    졸업 프로젝트에서 웹앱과 관리자 앱이 동시에 있었는데, 공통 유틸 함수와 타입 정의가 각각에 복붙되어 있었어요. 한 쪽을 수정하면 다른 쪽도 같이 바꿔야 해서 실수가 자주 났어요. pnpm workspace로 모노레포를 시도했는데, 경로 설정과 tsconfig 상속 구조를 잘못 짜서 처음엔 타입 에러가 20개 넘게 났어요. 이틀 반 만에 겨우 빌드를 성공시켰지만, 그 이후론 어느 쪽 수정이든 공통 패키지 한 군데만 고치면 됐어요. 실패하면서 설정한 구조가 오히려 더 오래 기억에 남는다는 걸 느꼈고, 개발 환경 개선은 단기 고통이 있더라도 장기 생산성을 높이면 가치 있다고 생각해요.

    이 결의 특징
    졸업 프로젝트에서 '웹앱과 관리자 앱이 동시'에 있으면서 '공통 유틸 함수와 타입 정의가 각각에 복붙'되어 있다는 구체적 비효율을 발견합니다. '한 쪽을 수정하면 다른 쪽도 같이 바꿔야 해서 실수가 자주' 난다는 조직적 고통을 명시합니다. pnpm workspace 시도 중 '경로 설정과 tsconfig 상속 구조를 잘못 짜서 타입 에러가 20개' 났고 '2일 반 만에 겨우 빌드 성공'했다는 구체 난항이 있습니다.
    이 결이 통하는 자리
    '실패하면서 설정한 구조가 오히려 더 오래 기억에 남는다'는 발견과 '개발 환경 개선은 단기 고통이 있더라도 장기 생산성을 높이면 가치 있다'는 확신이 통하려면, 타입 에러 20개를 실제로 손으로 치며 고친 경험이 함께 살아 있을 때입니다. 그런 사람은 이후 환경 개선 제안을 할 때도 비용-편익을 함께 말하게 됩니다.
    !
    위 답변은 여러 풀이 중 한 가지 예시입니다. 정답이 아니며, 외워서 그대로 말하면 면접관이 다음 질문을 그 자리에서 시작하는 경우가 많습니다. 본인의 프로젝트·기준·숫자로 다시 짜는 자리로만 쓰세요.
    ✕자주 빠지는 자리

    같은 실수가 반복돼요. 이것만 피해도 절반은 갑니다.

    • ✕떨어뜨린 옵션이 1개라도 있는가? "이게 답이었어요"만으로는 의사결정이 아니라 그냥 선택입니다.
    • ✕선택 기준이 그 프로젝트에 한정되는가? "성능이 좋아서"는 일반론, "우리 트래픽이 X 패턴이라서"가 본인의 답입니다.
    • ✕결과 숫자 1개를 정확히 말할 수 있는가? P95·QPS·적중률 — 무엇이든 1개. 숫자가 없으면 직감으로 한 일처럼 들리기 쉽습니다.
    • ✕지금 다시 한다면 어떻게 할지 답할 수 있는가? "잘했다"보다 "이건 다르게 했을 것 같다"가 더 깊은 인상을 남깁니다.
    ▶이어질 꼬리질문

    진짜 면접은 두 번째 질문부터예요. 이 답 뒤에 따라올 법한 것들.

    壹그 도구를 선택한 이유는 무엇인가요?
    貳사용한 도구로 인해 어떤 구체적인 성과가 있었나요?
    參과정 중에 겪었던 어려움은 무엇이었나요?
    이제, 직접 답해볼 차례예요.
    눈으로 읽은 답은 면접장에서 나오지 않아요. 토스 면접관과 이 질문으로 한 번 대화해 보세요.
    이 질문으로 모의면접 해보기
    또는, 다음 질문으로

    같은 흐름에서 자주 이어지는 질문들이에요.

    토스 · 프론트엔드
    프론트엔드 개발 환경을 개선하기 위해 어떤 방법을 사용해본 적이 있나요?
    이 질문 보기
    하나은행 디지털 하나로 · 공통직무·미지정
    프론트엔드 개발 과정에서 주로 어떤 기술을 배우게 되는데, 그 중 가장 관심있는 기술은 무엇인가요?
    이 질문 보기
    마켓컬리 · UX·프로덕트 디자인 일반
    프론트엔드 개발자와의 협업 경험에서 발생했던 주요 이슈와 그 해결 과정을 공유해줄 수 있나요?
    이 질문 보기
    여기어때 · 프론트엔드
    프론트엔드 개발 조직을 이끌면서 어떤 기술 방향성을 설정할 계획인지 설명해 주세요.
    이 질문 보기
    안내 · 이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 실제 출제·회사 공식 입장과는 무관하며, 정정 요청 시 24시간 내 반영합니다. 자세히
    개인정보처리방침이용약관문의
    © 2026 우문현답. All rights reserved.
    이 페이지 목차
    01면접관의 의도02답변의 결03실수·꼬리질문04관련 질문
    말로 해봐야 는다
    이 질문, 토스 면접관과
    음성으로 답해볼까요?
    모의면접 해보기
    첫 회 무료 · 종료 즉시 음성 폐기