[ 프론트엔드 면접 ] Vue.js 면접 질문 정리

안녕하세요!~
오늘 프론트엔드 개발자로써 채용 지원, 면접 준비 과정과 첫 면접 후기를 정리해 기록해봤습니다.

신입 프론트엔드 채용 내용

채용 내용
- Vue.js 프론트엔드 개발자 ( 신입사원 공개채용 )

담당업무
- FrontEnd 개발( VueJs, Typescript 기반 웹 프론트엔드 개발)
- SI 사업에 FrontEnd 개발 [ SI, System Integration(시스템 구축) ]

핵심역량
- HTML, CSS, JavaScript 기본 이해
- 팀워크 및 개인 프트폴리오 준비
- VueJs, Typescript 경험
- Webpack, Vite, Javascript Library 사용 경험
- 개발자로써 가져야할 자신감과 멘탈

프론트엔드 개발자로써 성장 과정

프론트엔드 분야로 취업 준비를 하면서 첫걸음은 대학교 3학년때 진행했던 팀 프로젝트를 진행하면서 시작했습니다. 인터넷 속도 증가하고 보안을 향상시켜주는 VPN 서비스를 개발하게 되었고 벡엔드는 PHP, DB는 MySQL은 사용했으며 개인적으로 일반 HTML,CSS,JS을 사용해 사용자 UI 프론트엔드 개발 작업을 맡아서 개발했었습니다.

프론트엔드 분야는 계속 트렌드가 바꿔가지만 대표적으로 React를 자주 사용합니다. 커뮤니티도 많고 MERN Stack ( MongoDB, Express, React and Node.js ) 웹 서비스를 개발하는데 쉽고 빠른 장점을 가지고 있지만 SPA ( A Single Page Application ) 경험 없는 초보자한테 약간 어려울수 있습니다.

그래서 ReactJS 배우기 전에 같은 JavaScript 프레임워크 VueJS을 먼저 배우기 시작했습니다. React, Argular, Vue중 VueJs를 선택했던 이유는 생각보다 쉽습니다. 알아보니까 AngularJs는 매우 방대하고 보통 Typescript를 강제로 써야하고 React는 기존 JavaScript을 잘해야 하고 JS 문법을 매우 많이 활용하고 보다 깔끔한 Vue를 선택하게 되었습니다.

개인적으로 느껴본 결과 리액트는 for 반복문을 하나 쓰려고 해도 map, forEach, for in, for of 등 많은 반복문을 이용할 수 있으며 상황에 따라 언제 어디서 쓸 지도 배워야 합니다. Vue는 답이 정해져있는데 HTML div 요소로 v-for 박아넣습니다. 깔끔하고 쉽고 빠르지만 아직 커뮤니티가 리액트처럼 많지 않아서 공식 문서나 오타 해결하는데 뷰보다 리액트를 훨씬 많다는 점 느꼈습니다.

이어서 개인 포트플리로 프로젝트와 개인 블로그를 개발하면서 Vuejs 반복문, 조건, 컨포넌트, 라우터, URL 파라미터, 데이터 렌더링, props 등 다양한 VueJS 문법들 배웠습니다. 보통 Vuejs와 Spring Boot이나 PHP Laravel 벡엔드를 자주 사용하지만 전 개인적으로 아직 서버 개발 경험이 없어서 보다 쉬운 Firebase을 사용해 회원가입 & 로그인 (User Authentication ), Firestore CRUD ( Create Read Update Delete ) 이용해 블로그 업로드, 불러오기 등 실제 회사에서 사용되는 기술들 간단하지만 경험해봤습니다.

Vue.js 프레임워크 특징, 다른 프레임워크과 차이점

기본정보 정리:

컴포넌트 기반 아키텍처 : Vue.js도 React처럼 컴포넌트 기반 개발을 중심으로 합니다.
Vue.js만의 특징은 컴포넌트의 자바스크립트 집중도가 낮다고 합니다.
컴포넌트 구조와 구성요소를 작성할 때 HTML 마크업 기반의 템플릿 문법을 사용합니다.
다른 프레임워크들과 마찬가지로 Vue.js도 CLI ( A command-line interface ) 툴을 제공합니다.
애플리케이션 개발에 필요한 다른 모듈을 React처럼 사용자에게 책임을 맡기지 않고 가이드 문서를 통해 특정모듈을 권장하고 있습니다.
Angular처럼 내장모듈로 정해진 것은 아니지만 React처럼 방임에 가깝게 두지도 않고 둘 사이를 절충한다고 볼 수 있습니다.
Vue.js는 단방향 데이터 바인딩과 양방향 데이터 바인딩 모두 지원합니다. 양방향 데이터 바인딩은 뷰가 변경되면 모델도 변경되며 모델이 변경되면 뷰도 변경되는 처리방식입니다. 단방향 데이터 바인딩은 일반적으로 예측 가능성이 높기 때문에 코드가 더 안정적이지만, 양방향 바인딩에 비해서 코드 작성시간이 더 필요합니다.

Vue.js의 장점 :

가볍고 빠릅니다. Vue.js는 내부에서 가장 빠른 JavaScript 프레임워크는 아니지만 SPA 및 UI에서 완벽한 UX를 생성하기에 충분한 기능 이상을 가지고 있습니다.
유연하고 쉽게 배울 수 있습니다: Vue.js는 다른 프레임워크에 비해 상대적으로 쉬운 학습 곡선을 가지며, 간단한 문법과 유연성으로 빠르게 개발할 수 있습니다.
템플릿 시스템: Vue.js는 템플릿 시스템을 사용하여 UI를 더 쉽게 작성할 수 있습니다. 이러한 템플릿은 HTML, CSS 및 JavaScript와 유사하므로 기존의 웹 개발 지식을 활용하여 쉽게 작성할 수 있습니다.
Vue가 권장하는 캠페인 기여자(Webpack 또는 Browserify)는 사용자가 선택한 전처리기를 사용하여 소스 코드를 이후에 변경할 수 있도록 하여 개발자에게 상당한 자유를 제공합니다.
작은 크기: 프레임워크의 다운로드 가능한 zip 파일 크기는 18KB입니다. 가볍기 때문에 빠르게 설치되고 검색 엔진 순위와 성능이 향상됩니다.
강력한 커뮤니티 및 생태계: Vue.js는 큰 커뮤니티와 생태계를 가지고 있으며, 수많은 다양한 플러그인과 라이브러리를 제공합니다. 이를 통해 개발자들은 보다 빠르게 애플리케이션을 개발할 수 있습니다.

Vue.js의 단점:

Vue.js 프레임워크를 잡한 프로젝트에서 사용되는 경우 솔루션에 대한 적시 지원을 위해 광범위한 네트워크를 보유해야 합니다.
생태계의 상대적으로 작음: Vue.js는 React와 Angular에 비해 상대적으로 작은 생태계를 가지고 있습니다. 이는 Vue.js를 사용하여 필요한 모든 기능을 구현할 수 없을 수도 있다는 것을 의미합니다.

Vue.js에서 컴포넌트란 무엇인가요?

다양한 프레임워크에서 컴퍼넌트를 자주 사용하며 한마디로 재사용 가능한 UI 요소를 의미합니다. 즉, 컴포넌트는 하나의 기능을 담당하는 독립적인 모듈이며, 이러한 컴포넌트들을 조합하여 전체적인 애플리케이션을 구성합니다. Vue.js에서 컴포넌트는 각각의 컴포넌트는 데이터, 메서드, 프로퍼티, 이벤트 등을 가질 수 있습니다.

컴포넌트 간 통신 방법으로는 크게 두 가지가 있습니다

1. Props와 Custom Events를 이용한 상위 (부모) 컴포넌트에서 하위 ( 자식 ) 컴포넌트로 데이터 전달
2. Vuex를 이용한 상태 관리

Vue.js에서 Props 무엇인가요? 예시로 설명해주세요~

Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방법입니다. 상위 컴포넌트에서 하위 컴포넌트에게 props를 전달하면 하위 컴포넌트에서는 해당 props를 받아 사용할 수 있습니다. props을 사용해 간단한 데이터를 전달해보겠습니다. 3가지 순서로 이용 가능합니다.

Step 1. App.vue 파일 Component 태그 안에 갔다 쓸 데이터를 미리 저장합니다. App.vue 에서 미리 저장된 rooms, infoIndex 데이터들 있는 상태입니다.

App.vue

<Model  :rooms = "rooms" :infoIndex  = "infoIndex" />

// ":" 은 vue 문법이라 부모 데이터 가지고 있는 데이터를 자식 데이터 전달
// "rooms" 은 <Model /> Component 파일에 사용할 데이터 이름

Step 2. Component 파일 데이터 보건서로 우리가 갔다 쓸 데이터들 props 으로 저장합니다.

export default{   
    name : 'Card',
    
    props : {
        rooms : Array,
        infoIndex : Number,        
    }
}

Step 3. Component 안에서 부모 데이터를 갔다 쓰면 됩니다.

<div> 
  <h1> Rooms {{rooms}} </h1>
</div>

Vue.js에서 많이 쓰이는 중요한 상태(State) Hooks 종류들에 대한 설명해보세요?

data() 메서드 이란?

Vue.js의 data 옵션은 Vue 인스턴스의 상태를 정의하는 데 사용됩니다. data 옵션에는 JavaScript 객체를 반환하는 함수를 전달할 수 있습니다. 이 함수는 Vue 인스턴스의 데이터 속성을 정의하며, 각 속성은 Vue 인스턴스의 반응성 시스템에 의해 관찰됩니다. 즉, 데이터가 변경될 때마다 Vue는 자동으로 DOM을 업데이트합니다.

data 객체를 사용하여 간단한 예시 변수를 할당해보겠습니다. 다음 counter이란 속성은 Vue 인스턴스 내에서 참조할 수 있으며, 템플릿에서 {{ counter }}와 같은 방식으로 표현될 수 있습니다.

<script>
export default {
  data() {
    return {
      count: 1
    }
  },
}
</script>

<template>
  <h1>Count is: {{ count }}</h1>
</template>


// 결과는 Count is: 1 입니다

computed() 메서드 이란?

Vue.js의 computed 옵션은 Vue 인스턴스에서 계산된 속성을 정의하는 데 사용됩니다. computed 속성은 함수 형태로 정의되며, Vue 인스턴스에서 호출할 수 있는 프로퍼티로 사용됩니다. 이는 Vue 인스턴스의 데이터를 가공하여 렌더링하는데 유용합니다.

다음은 computed 속성을 사용하여 Vue 인스턴스에서 firstName과 lastName 데이터 속성을 기반으로 fullName 계산된 속성을 정의하는 예시입니다.

<script>
export default {
  data() {
    return {
      name : "John",
      lastName : "Prime",
    }
  },
 computed: {
    fullName() {
      return `${this.name} ${this.lastName}`
    }
  }
}
</script>

<template>
  <h1>
    Full Name : {{ fullName}}
  </h1>
</template>

//결과는 "Full Name : John Prime" 입니다

watch() 메서드 이란?

Vue.js의 watch 옵션은 Vue 인스턴스에서 데이터 속성의 변경을 감지하고, 변경 사항에 대한 대응 방법을 정의하는 데 사용됩니다. watch 옵션은 객체 형태로 정의되며, 감시할 데이터 속성의 이름을 키로 사용하고, 해당 속성이 변경될 때 실행할 콜백 함수를 값으로 사용합니다.

watch 옵션을 사용하는 이유는 다양하며 computed 속성은 의존하는 데이터 속성이 변경될 때마다 자동으로 다시 계산되지만, 그렇지 않은 경우에는 watch 옵션을 사용하여 데이터 속성의 변경을 수동으로 감지할 수 있습니다.

Vue.js의 watch 옵션은 Vue 인스턴스에서 데이터 속성의 변경을 감지하고, 변경 사항에 대한 대응 방법을 정의하는 데 사용됩니다. watch 옵션은 객체 형태로 정의되며, 감시할 데이터 속성의 이름을 키로 사용하고, 해당 속성이 변경될 때 실행할 콜백 함수를 값으로 사용합니다.

methods() 메서드 이란?

Vue.js의 methods 옵션은 Vue 인스턴스에서 사용 가능한 메서드를 정의하는 데 사용됩니다. methods 옵션은 객체 형태로 정의되며, 메서드의 이름을 키로 사용하고, 해당 메서드의 구현을 값으로 사용합니다. 메서드 내에서는 Vue 인스턴스의 데이터 속성 및 다른 메서드에 접근할 수 있습니다. methods 옵션으로 간단한 인사 함수를 만들어보겠습니다.

data() {
    return {
    say: 'Click Me',
      num : 1
    }
  },

methods: {
    greeting(){
      this.say = "Okay, Done!"
    },
    up() {
      this.num += 1;
    }
  }

methods 옵션의 특징은 다음과 같습니다.

Vue 인스턴스에서 사용 가능한 메서드를 정의할 수 있습니다.
메서드 내에서 Vue 인스턴스의 데이터 속성 및 다른 메서드에 접근할 수 있습니다.
데이터 속성의 변경을 감지하거나, 계산된 값을 캐싱하는 등의 기능을 수행할 수 없습니다.
computed 속성과 달리, 메서드는 매번 호출될 때마다 새로운 값을 반환합니다.

methods 옵션을 사용하는 이유는 사용자 입력을 처리하거나, 이벤트를 처리하거나, 메서드를 호출하는 등의 기능을 수행할 수 있습니다. 또한, computed 속성이나 watch 옵션으로 해결할 수 없는 복잡한 로직을 처리하는 데 사용할 수 있습니다. 따라서, methods 옵션은 Vue.js에서 메서드를 정의하고, 해당 메서드를 사용하여 애플리케이션의 로직을 처리하는 데 필수적인 기능입니다.

created() 메서드 이란?

Vue.js의 created() 라이프사이클 훅은 Vue 인스턴스가 생성되자마자 호출되는 메서드입니다. created() 메서드는 Vue 인스턴스의 데이터 속성이나 메서드에 접근할 수 있으며, 해당 속성과 메서드를 초기화할 수 있습니다. 또한, 외부 API 호출과 같은 비동기 작업을 수행하는 데 사용될 수 있습니다. created() 메서드를 사용하여 데이터 속성을 초기화하는 예시를 만들어보겠습니다.

<script>
export default {
  data() {
    return {
    sample: '',
    }
  },
  created(){
    this.sample = "Init Value";
  },
  methods:{
    changed(){
      this.sample = "Running ...";
    }
  }
}
</script>

created() 메서드를 사용하는 이유는 다양합니다. 예를 들어, Vue 인스턴스가 생성된 직후에 초기화 작업을 수행하거나, 데이터를 불러오거나, 외부 API 호출을 수행하거나, 이벤트를 등록하는 등의 기능을 수행할 수 있습니다.

mounted() 메서드 이란?

Vue.js의 mounted() 라이프사이클 훅은 Vue 인스턴스가 DOM에 마운트된 후에 호출되는 메서드입니다. mounted() 메서드는 Vue 인스턴스가 DOM에 연결된 후에 실행되므로, Vue 인스턴스가 렌더링 된 후에 DOM에 직접적인 접근이 가능합니다. 따라서, DOM 요소에 대한 초기화 작업을 수행하는 데 사용됩니다. 간단한 예시로 mounted 메서드 사용해 보겠습니다.

DOM 요소를 초기화하거나, 외부 라이브러리를 호출하거나, Vue에서 렌더링 된 후에 수행해야 하는 초기화 작업을 수행할 수 있습니다. 따라서, mounted() 메서드는 Vue.js에서 인스턴스가 DOM에 마운트된 후에 초기화 작업을 수행하는 데 필수적인 기능입니다.

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hell0, World!'
    }
  },
  mounted() {
    console.log('Component has been mounted.')
  }
}
</script>


//개발자 도구 console장을 확인해보면 
// 'Component has been mounted.' 표시됩니다.

Vue.js 데이터바인딩 문법, 특징 정리

데이터바인딩은 Vue.js에서 가장 기본적인 기능 중 하나이며, Vue.js의 가장 큰 특징 중 하나입니다. 데이터바인딩을 사용하여 뷰와 데이터를 연결하고, 데이터의 변화에 따라 뷰가 자동으로 업데이트되도록 할 수 있습니다.

Vue.js의 데이터바인딩의 특징은 다음과 같습니다.

템플릿 표현식 내에서 JavaScript 표현식을 사용할 수 있습니다.
v-bind를 사용하여 속성에 동적으로 바인딩할 수 있습니다.
v-model을 사용하여 양방향 데이터바인딩을 할 수 있습니다.
데이터바인딩을 사용하여 데이터와 뷰 간의 동기화를 쉽게 할 수 있습니다.
뷰에서 표시되는 데이터의 값을 동적으로 변경할 수 있습니다.

1. Vue.js에서 가장 간단한 데이터바인딩 방법은 인터폴레이션(Interpolation) 바인딩입니다. 이 방법은 {{ }} 안에 Vue 인스턴스의 데이터를 넣어서 사용합니다.

<div>{{ message }}</div>

2. Vue.js에서 요소의 속성에 데이터를 바인딩할 때는 v-bind 디렉티브를 사용합니다. 이 디렉티브는 :로 축약해서 사용할 수 있습니다.

<h1 v-bind:src="sample">{{sample}}</h1>

<img v-bind:src="imageSrc" alt ="" />

3. Vue.js에서 폼 요소와 같은 입력 요소의 값을 바인딩할 때는 v-model 디렉티브를 사용합니다. 이 디렉티브는 양방향 데이터바인딩을 지원합니다.

<input v-model="message">

v-for 반복문

Vue.js의 v-for 디렉티브는 Vue.js 애플리케이션에서 반복적으로 렌더링해야하는 엘리먼트나 컴포넌트를 생성하기 위해 사용되는 디렉티브입니다. v-for를 사용하면 배열이나 객체의 각 항목을 순회하며 템플릿을 렌더링할 수 있습니다.

v-for 디렉티브는 다음과 같은 형식으로 사용됩니다:

<div v-for="item in items" :key="item.id">{{ item.text }}</div>

v-for 반복문 주요 특징은 다음과 같습니다:

반복: 배열이나 객체의 각 항목을 반복하며 템플릿을 생성합니다.

인덱스와 값: v-for="(item, index) in items"와 같이 사용하여 인덱스와 값에 접근할 수 있습니다.

객체 반복: 객체의 속성을 반복하고 key와 value에 접근할 수 있습니다.

범위 반복: v-for 디렉티브를 사용하여 숫자 범위를 반복할 수도 있습니다.

리액티브: 배열이나 객체가 변경될 때 자동으로 렌더링이 업데이트됩니다.

key 속성: 각 항목의 고유한 식별자를 제공하여 효율적인 렌더링을 돕는데 사용됩니다.

반복 범위 제한: v-for="(item, index) in items.slice(1, 3)"와 같이 반복 범위를 제한할 수 있습니다.

https://prmblogs.tistory.com/45

자주 사용하는 35가지 GitHub 명령어 모음

prmblogs.tistory.com

'면접준비' 카테고리의 다른 글

[프론트엔드 면접] HTML과 HTML5의 차이점은? (0)	2024.02.17
[프론트엔드 면접] HTTP와 HTTPS의 개념 및 차이점 (6)	2024.02.12
[ 리액트 면접준비 ] 프론트엔드 면접 준비, React.js (3)	2023.02.21
[ 면접 준비 ] 프론트엔드 개발자 면접 준비 , JavaSctipt (0)	2023.02.21
[ 면접 준비 ] 프론트엔드 개발자 면접 준비 , HTML + CSS (0)	2023.02.20

[ 프론트엔드 면접 ] Vue.js 면접 질문 정리

신입 프론트엔드 채용 내용

프론트엔드 개발자로써 성장 과정

Vue.js 프레임워크 특징, 다른 프레임워크과 차이점

Vue.js에서 컴포넌트란 무엇인가요?

Vue.js에서 Props 무엇인가요? 예시로 설명해주세요~

Vue.js에서 많이 쓰이는 중요한 상태(State) Hooks 종류들에 대한 설명해보세요?

data() 메서드 이란?

computed() 메서드 이란?

watch() 메서드 이란?

methods() 메서드 이란?

created() 메서드 이란?

mounted() 메서드 이란?

Vue.js 데이터바인딩 문법, 특징 정리

v-for 반복문

'면접준비' 카테고리의 다른 글

관련글

티스토리툴바