내일배움캠프 81일차 (3차 모의면접)

유지보수성이 높은 코드를 작성하기 위한 방법들에 대해서 설명해주세요.

먼저, 의미있는 변수 및 함수 이름을 사용하여 이름만 보고도 어떤 역할을 하는지 예상할 수 있도록 하고 ESLint 및 Prettier를 활용하여 일관된 코드 스타일을 준수함으로써 코드의 가독성을 높일 수 있습니다.

다음으로, 단일 책임 원칙을 토대로 컴포넌트를 적절히 분리하고 반복적으로 사용되는 로직은 커스텀 훅으로 분리함으로써 코드의 재사용성을 높일 수 있습니다.

또한, 페이지의 특성에 맞는 적절한 렌더링 방식을 선택하거나 파일 기반 라우팅 구조를 명확하게 설계하는 등 React 및 Next.js의 이점을 적절하게 활용하는 것도 유지보수를 용이하게 해주는 방안이 될 수 있습니다.

 

 

JavaScript가 싱글 쓰레드임에도 불구하고 동시에 여러 개의 작업이 가능한 것처럼 보이는 이유에 대해서 설명해주세요.

JavaScript는 기본적으로 싱글 스레드로 동작하지만, 이벤트 루프 및 비동기 작업 처리 매커니즘에 의해서 여러 작업을 동시에 처리하는 것처럼 동작합니다.

JavaScript 엔진은 하나의 콜 스택을 사용하여 동기 작업을 순차적으로 처리하지만, 비동기 작업의 경우 브라우저 또는 Node.js의 런타임 환경에서 처리된 후 콜백 함수를 테스크 큐 또는 마이크로 테스크 큐로 전달합니다. 이벤트 루프는 콜 스택이 비어있을 때 마이크로 테스크 큐의 작업을 우선적으로 처리하고 이후 테스트 큐의 작업을 처리해줌으로써 프로그램이 여러 작업을 동시에 처리하는 것처럼 보이게 됩니다.

 

 

Promise와 async/await의 차이점과 각각의 장단점에 대해서 설명해주세요.

Promise는 비동기 로직을 처리하기 위해서 사용되는 객체로서, 비동기 로직의 결과 값을 Promise 객체로 반환합니다. then과 catch를 사용해서 성공과 실패를 처리할 수 있고 Promise.all을 사용하여 병렬 작업을 처리하는 것도 가능합니다. 하지만 비동기 로직이 복잡해지면 then 체이닝이 길어져 가독성이 떨어질 수 있고 에러 디버깅이 어려워질 수 있습니다.

async/await은 비동기식 코드를 동기식으로 표현할 수 있게 해주는 문법으로 Promise를 기반으로 동작합니다. 동기식 코드처럼 보이기 때문에 비동기 흐름이 복잡해지더라도 가독성이 좋고 try-catch문을 사용하면 명확한 에러 처리가 가능합니다. 하지만 기본적으로 순차적으로 실행되기 때문에 병렬 작업에는 적합하지 않을 수 있습니다.

 

 

TypeScript에서 interface와 type의 차이점에 대해서 설명해주세요.

interface와 type 모두 TypeScript에서 데이터의 구조를 정의하는데 사용되고 거의 유사하지만 확장성이라는 관점에서 차이점이 있습니다.

먼저 interface는 extends 키워드를 사용해서 다른 인터페이스를 상속하거나 동일한 이름으로 선언을 병합함으로써 이전에 선언한 인터페이스에 새로운 속성을 추가할 수 있기 때문에, 객체의 구조를 정의하거나 확장 가능성이 있는 경우에 주로 사용합니다. 반면 type은 동일한 이름으로 재선언하는 것은 불가능하지만 & (교차 타입) 키워드를 사용해서 타입을 확장할 수 있기 때문에, 여러 타입을 결합하거나 복잡한 데이터 구조를 표현할 때 주로 사용합니다.

두 방식 모두 장단점이 있기 때문에 어떤 방식이 더 좋다기 보다는 주어진 상황에 따라 적절하게 선택해서 사용하는 것이 중요합니다.

 

 

프론트엔드 개발자로서 최종 프로젝트를 통해 가장 성장했다고 느낀 부분에 대해서 설명해주세요.

프로젝트를 진행할 때마다 실력적으로 조금씩 성장하였지만, 이번 최종 프로젝트를 통해서는 실력뿐만 아니라 실제 실무에서 요구되는 사고 능력을 향상시킬 수 있었다고 생각합니다.

모든 개발의 궁극적인 목표는 사용자에게 서비스를 제공하는 것이고 사용자에게 제공할 형태로 만들어내는 역할을 하는 것이 프론트엔드 개발자라고 생각하는데, 그동안의 프로젝트들은 실제 사용자가 있는 서비스가 아니었기 때문에 기술 습득이나 기능 구현 자체에 초점을 두고 개발을 했었습니다. 하지만 최종 프로젝트의 경우 실제 사용자를 고려한 서비스로 기획되었고 사용자의 입장에서 서비스를 바라보는 경험을 하면서 기능 구현도 물론 중요했지만 사용자 경험을 높이고 성능을 최적화하는 것에 많은 시간을 투자했던 것 같습니다.

 

 

CORS 에러는 무엇이고, 이를 해결할 수 있는 방법에는 어떤 것들이 있는지 설명해주세요.

CORS 에러는 웹 브라우저에서 보안상의 이유로 다른 출처(도메인, 포트, 프로토콜)에서의 리소스 요청을 제한하는 정책으로 인해 발생하는 문제를 의미합니다.

이를 해결하기 위해서는 서버에서 Access-Control-Allow-Origin 헤더를 설정함으로써 요청을 허용할 출처를 명시하거나, 클라이언트와 서버 사이에 프록시 서버를 배치함으로써 클라이언트가 동일 출처로 요청을 보내는 것처럼 처리할 수 있습니다. 또한 브라우저의 사전 요청을 처리하기 위해서 서버가 OPTIONS 메서드에 응답을 하고 필요한 헤더를 설정해줄 수 있습니다.

 

 

웹브라우저 저장소인 쿠키, 로컬스토리지, 세션스토리지가 각각 무엇이고, 어떤 차이점이 있는지 설명해주세요.

쿠키는 key와 value 형태의 작은 데이터 파일로 최대 4KB까지 저장 가능하고 브라우저가 종료되어도 유효 시간동안 값이 유지됩니다. 요청이 발생하면 사용자가 별도로 지정해주지 않아도 자동으로 서버에 전송이 되기 때문에 주로 사용자 인증 정보나 세션 데이터 등을 저장하여 서버와의 통신에 사용합니다.

로컬 스토리지와 세션 스토리지는 최대 5~10MB까지 저장 가능하고 서버에 자동으로 전송되지 않기 때문에 주로 클라이언트 측에서 사용할 데이터를 저장하는데 사용합니다.

로컬 스토리지는 브라우저가 종료되어도 사용자가 데이터를 삭제하기 전까지는 값이 영구적으로 유지되기 때문에 (사용자 설정 정보나 캐싱 데이터처럼) 지속적으로 필요한 데이터를 저장할 때 주로 사용되고, 세션 스토리지는 브라우저가 종료되면 값도 같이 삭제되기 때문에 일시적으로 필요한 데이터나 페이지 이동 시에 유지되어야 하는 데이터를 저장할 때 주로 사용됩니다.

 

 

프로젝트 진행 시 사용자 경험을 향상시키기 위해 신경썼던 부분에 대해서 설명해주세요.

사용자 경험을 향상시키기 위해서는 서비스에 처음 방문한 사용자의 입장에서 봤을 때 헷갈리거나 모호한 부분을 최소화하는 것이 가장 중요하다고 생각합니다.

그래서 실시간 유효성 검사를 제공함으로써 요구되는 입력값을 명확하게 보여주었고, 스켈레톤 UI나 로딩 상태를 적절히 사용함으로써 컨텐츠가 로드되기 전이라고 할지라도 현재 페이지가 어떤 상태이고 해당 부분에 어떤 컨텐츠가 들어올 것인지 충분히 예상 가능하도록 구현하였습니다. 또한, 요즘에는 웹 서비스라고 할지라도 모바일로 사용을 하는 경우도 많기 때문에 반응형을 신경쓰는 동시에 hover처럼 웹에 특화된 동작들을 사용하는 것을 최소화하려고 노력하였습니다.

 

 

현재 프로젝트에서 App Router 방식을 사용하고 있는데, 이를 선택한 이유와 장단점에 대해서 설명해주세요.

app router 방식을 사용하면 별도로 라우팅과 관련된 설정을 해주지 않아도 폴더 및 파일 구조에 따라 경로가 자동으로 설정되기 때문에 직관적이고, 공통 UI와 에러 및 로딩 상태를 효율적으로 관리할 수 있다는 점에서 선택하게 되었습니다.

이뿐만 아니라, Next.js 13버전에서 도입된 서버 컴포넌트라는 개념을 활용하여 서버 측과 클라이언트 측의 로직을 적절히 분리함으로써 성능과 유지보수성을 동시에 향상시킬 수 있고, Suspense와 스트리밍이라는 개념을 활용하여 페이지의 모든 데이터가 로드되지 않았더라도 먼저 로드된 컨텐츠부터 점진적으로 사용자에게 제공함으로써 사용자 경험도 향상시킬 수 있다는 장점이 있습니다.

하지만 대규모 프로젝트인 경우 폴더 구조가 복잡해질 수 있고, 기존 page router 방식에 익숙한 개발자인 경우 학습 곡선이 존재할 수 있습니다.

 

 

TanStack Query의 stale-while-revalidate 로직에 대해서 설명해주세요.

stale-while-revalidate는 사용자에게 데이터를 최대한 빠르게 보여주면서도 데이터의 최신성을 유지하기 위해 데이터 검증 및 동기화를 지속적으로 수행하는 효율적인 캐싱 전략입니다.

데이터가 stale하다는 것은 해당 데이터가 캐시에 존재하지만 더 이상 최신 데이터가 아님을 의미합니다. 사용자의 요청이 발생했을 때 캐시된 stale한 데이터가 있으면 이를 화면에 즉시 보여줌으로써 사용자 경험을 향상시키는 동시에 백그라운드에서 서버에 최신 데이터를 요청하고, 서버로부터 응답이 오면 이를 캐시에 저장하고 UI를 업데이트하여 사용자에게 최신 정보를 제공합니다.

이처럼 사용자 경험을 향상시키면서 데이터의 최신 상태 또한 보장할 수 있다는 장점이 있지만, 백그라운드에서 불필요한 요청이 과도하게 발생하지 않도록 staleTime과 cacheTime을 적절하게 설정해주는 것이 중요합니다.