표현식은 값으로 평가될 수 있는 문이다.

1. 리터럴 표현식 10 'Hello'
2. 식별자 표현식 sum (선언이 이미 존재한다고 가정, 변수명 ) person.name (객체에 접근) arr[0] (배열에 접근)
3. 연산자 표현식 10+20 sum = 30 sum !== 10

값이란?

• 리터럴 사용 : 값을 사용하는 가장 기본적인 방법
• 표현식이 평가되어 생성됨

    let sum=10+20 //값은 30

  // 변수에는 10+20이 평가되어 생성된 숫자 값 30 이 할당된다.

참고사이트

동적인 값을 주는건 알겠는데... 링크 주소에 백틱에 중괄호 들어가버리고 이래버리니까 어질어질 JSX랑 백틱이랑 템프릿리터럴이랑 분간이 안되기 시작

개발 팀장님이 넘겨준 링크

(감사합니다! 🙏)

• 내가 정리한 바에 따르면... 따옴표 안의 모든 것은 문자열로 해석된다. 백틱 안의 모든 것은 문자열로 해석된다. 단지 하나 다른 것은, ${} 가 만나면 그 안은 동적인 값이 들어간다.

• 내가 물어볼 질문을 다시 보자면, 프로젝트에 쓰인

  <Link to={`${pages.costprojects}/nomal`}>

  사전에 정의된 pages라는 폴더에서 가져온 경로에서 왔음

<Link to={'/costprojects/nomal'}>

가 된다! :-)

마지막에 남은 {}은 jsx문법으로 js표현식(리터럴표현식)을 나타낸다.

1. 파일 디렉토리

├── /src ├── /assets ├── /components ├── /hooks └── /store ├──/pages ├──/templates └──/ui ├──/atoms ├──/molecules └──/organisms

2. 설치

1) 한번에 설치 : npm install 2) 개별 설치 : package.json 내용 참고

3. 간단한 사용법

4. 프로젝트 화면

!codesandbox[statero-seutail-byeongyeonghagi-npjmop?fontsize=14&hidenavigation=1&theme=dark]

1. App.js (부모 컴포넌트)

   <App.js>
   import Input from "./Input";
   import "./styles.css";
   

export default function App() { //전체데이터 //map으로 데이터갯수만큼 UI생성 const data = ["하이", "바이"]; return (

2. styles.css(스타일)

```css
/* 상태에 따라 추가될 스타일 */
.Line {
  text-decoration: line-through;
}

3. Input.js(자식 컴포넌트)

   <Input.js>
   import { useState } from "react";
   

const Input = ({ el }) => { // state 만들기 // 버튼에 연결된 함수 만들기 const [check, isCheck] = useState(false); const setting = () => { isCheck(!check); };

return (

export default Input;

```

단순화 해서 정리해보니 훨씬 보기에 좋구나 :-)

1. useNavigate

import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();
  const goToMain = () => {
    navigate("/main");
  };

  return (
    <div>
      <button onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}

export default Login;

• useNavigate는 페이지 이동하는 함수를 반환한다. 따라서 위의 예시에서는 함수를 navigate라는 변수에 할당하여 사용했다.
• navigate의 인자로 Router에서 설정한 path를 넘겨주면 해당결로로 이동한다.

• 페이지 전환시에 추가로 처리해야 하는 로직이 있을 때 사용 예를 들어, 로그인 버튼을 눌렀을때 (정보가 일치하느냐?/안하느냐?)의 로직을 추가해야 한다.

2. Link

import React from "react";
import { Link } from "react-router-dom";

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
};

export default Login;

• Link는 프로젝트 내에서 페이지를 이동할 때 사용

• 클릭시 바로 페이지가 변환될 때 사용

3. useNavigate에 useHistory 기능도 포함!

  <button onClick={() => navigate(-2)}>
    //Go 2 pages back
  </button>
  <button onClick={() => navigate(-1)}>
    //Go back
  </button>
  <button onClick={() => navigate(1)}>
    //Go forward
  </button>
  <button onClick={() => navigate(2)}>
    //Go 2 pages forward
  </button>

useHistory란 세션기록에 대한 접근 방법과 메서드를 제공한 ㄴ것 뒤로 가기 앞으로 가기 구현할 때 사용하자!

질문 : 반응형 웹은 무엇이고 장단점에 대해 설명하세요. (Seciton4 Unit1 Chapter3. 반응형 웹 개념학습)

답변 반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미합니다.

반응형 웹의 장점으로는 검색엔진(SEO) 최적화 유리, 효율적인 유지 보수가 있으며,

반응형 웹의 단점으로는 사이트의 속도 저하, 웹브라우저 호환성 문제 등이 있습니다.

개발하는 어플리케이션의 규모가 커지면서 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 하나의 파일을 모듈이라고 한다.

모듈의 장점

• 유지보수가 용이 : 의존성 줄여
• 네임 스페이스화 : 코드의 양이 많아질수록 전역 스코프에 존재하는 변수명이 겹치는 경우가 존개한다. 이때 모듈로 분리하면 모듈안의 네임 스페이스를 갖기 때문에 그 문제를 해결할 수 있음
• 재사용성 : 모듈로 분리시켜 필요할때마다 재활용

이러한 모듈을 필요시에 언제든지 불러올 수 있도록 하는 다양한 방법들이 있다. 이렇게 모듈을 불러오는 방법을 모듈 시스템이라고 한다.

모듈 시스템의 종류

• AMD : requere.js라는 라이브러리를 통해 처음 개발
• Common JS : Node.js환경을 위해 만들어진 모듈 시스템
• UMD : AMD, Common JS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어짐
• ES Module : ES6에 도입된 자바스크립트 모듈 시스템

  ES Module 방식

  export와 import를 적용해 다른 모듈을 불러올 수 있음

  사용방법

  export

1. named export

• 하나씩 내보내기

  export const a = 1
  export function fn(){}
  export class Class{}

• 한번에 내보내기

  const a = 1
  function fn(){}
  class Class{}
  

export { a, fn, Class }

2. default export
- 함수 앞에 export default 붙이기
(default export는 모듈당 하나만 가능)
```js
// fn.js
export default function fn(){}
// Class.js
export default class Class{}

• 선언 후 내보내기

  //a.js
  const a = 1
  export default a
  

// fn.js function fn(){} export default fn

// Class.js class Class{} export default Class

#### import
1. named export를 import 하는 경우
```html
<script>
  import {a} from 'a.js'
  import {fn} from 'fn.js'
  import {Class} from 'class.js'
</script>

2. defualt export를 import 하는 경우

   <script>
   import a from 'a.js'
   import fn from 'fn.js'
   import Class from 'class.js'
   
   //default의 경우 변수명은 원하는대로 바꿔도 된다.
   import 변경가능 from 'class.js'
   </script>

   (출처 : ES Module 정리하기)[https://velog.io/@jjunyjjuny/ES-Modules-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0]

한 번의 클릭 혹은 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것

• 시간 절약
• 휴먼 에러 방지

  CI

  CD

  배포 자동화 프레임워크, Vercel

질문 : 이진 탐색 방법에 대해 설명할 수 있나요?

• 이진 탐색 방법에 대해 설명할 수 있나요? (Section4 Unit11 Chapter3-2. Binary Search Tree 개념학습, 세션 중 설명)

  이진 탐색이란 데이터가 정렬돼 있는 배열에서 특정한 값을 찾아내는 알고리즘입니다. 배열의 중간에 있는 임의의 값을 선택하여 찾고자 하는 값 X와 비교하고, X가 중간 값보다 작으면 중간 값을 기준으로 좌측의 데이터들을 대상으로, X가 중간값보다 크면 배열의 우측을 대상으로 다시 탐색합니다. 동일한 방법으로 다시 중간의 값을 임의로 선택하고 비교합니다. 이런 식으로 해당 값을 찾을 때까지 이 과정을 반복하는 방법입니다. (Ex. 업다운 게임)

  *이진 탐색 트리에 대해 질문이 들어올 수 있습니다.

  이진 탐색 트리란 이진 탐색(binary search)과 연결 리스트(linked list)를 결합한 이진트리를 말합니다. 이진 탐색의 효율적인 탐색 능력을 유지하면서도, 빈번한 자료 입력과 삭제를 가능하게끔 고안됐습니다.

질문 :Tree와 Graph의 차이점은 무엇인가요? (Section4 Unit11 Chapter3. Tree와 Graph)

Tree는 방향성이 있는 비순환 그래프이기 때문에 Cycle이 존재하지 않으나 Graphs는 노드와 노드를 연결하는 엣지로 구성되어 있는 자료구조이므로 순환, 비순환 모두 존재 가능합니다. (즉 Cycle이 있을 수도 있고 없을 수도 있습니다.) 또한 Tree는 방향 그래프만 존재하지만 Graph는 방향, 무방향 둘 다 존재합니다.

Tree는 Root Node라는 개념이 존재하고, 계층적 구조를 가지고 있기 때문에 부모-자식 관계가 존재하지만 Graph는 Root Node 개념 자체가 존재하지 않기 때문에 부모-자식 관계가 존재하지 않습니다.

질문 : Stack과 Queue의 차이점은 무엇인가요?

크루답 Stack은 “쌓다"라는 의미를 가진 자료구조입니다. 입력과 출력이 하나의 방향으로 이루어지는 제한적 접근 자료구조이며 먼저 들어간 데이터는 제일 나중에 나오는 LIFO(Last In First Out)의 구조를 가지고 있습니다. Queue는 Stack과 반대되는 개념으로, 먼저 들어간 데이터(data)가 먼저 나오는 FIFO(First In First Out) 을 특징으로 가지고 있습니다. 티켓을 사려고 줄을 서서 기다리는 모습과 흡사한 이 자료구조는 입력과 출력의 방향이 고정되어 있으며, 두 곳으로 접근이 가능합니다.

• stack과 queue에 대해 질문 받았습니다. 웹 브라우저 내부에 있는 자료 구조 입니다. JS는 하나의 스텍, 즉 싱글 스레드를 갖는 언어입니다. stack은 FILO(선입후출) 구조를 갖고 queue는 FIFO(선입선출) 구조를 갖습니다.

질문 : 둘은 어떤 관계?

• 상호보완적 관계이다. 싱글 스레드인 JS은 한번에 한줄의 코드만 실행할 수 있다. 따라서 시간이 걸리는 코드들은 stack에서 바로 처리하지 않고, queue에 쌓이게 된다. stack이 깨끗하게 비어진 뒤 queue에서는 선입선출의 구조로 코드를 다시 stack으로 올리고 실행되게 된다. 따라서 브라우저는 시간이 걸리는 코드들이 읽히기 전에 다른 코드들이 읽을 수 있기 때문에 화면 랜더링 속도를 올릴 수 있다.

질문 : 시간이 걸리는 코드들은?

• AJAX요청, setTimeOut등의 메소드 등 시간이 소요되는 요청

질문 : 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?

• 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요? (Section4 Unit4 Chapter4. 가비지 컬렉션과 캐시)

  가비지 컬렉션은 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것입니다. 이 기능을 가진 언어(혹은 엔진)는 자바, C#, 자바스크립트 등이 있습니다.

  *그러면 어떻게 가비지 컬렉션이 일어나나요? 라고 물어볼 수 있습니다.

  mark and sweep 알고리즘 방식에 의해 가비지 컬렉션이 일어난다고 설명하면 됩니다. 객체에 in-use flag를 두고, 사이클마다 메모리 관리자가 모든 객체를 추적해서 사용 중인지 아닌지를 표시(mark)합니다. 그 후 표시되지 않은 객체를 삭제(sweep)하는 단계를 통해 메모리를 해제하는 방식을 mark and sweep 알고리즘이라고 합니다.

질문 : Event Loop에 대해 설명할 수 있나요?

질문의 요지

답

질문 : JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?Section4 Unit4 Chapter2-3. 싱글 스레드와 멀티 스레드 : 세션 중 설명한 내용)

이벤트 루프(Event Loop) 동작 방식에 대해 설명할 수 있으면 되는 문제입니다. JavaScript는 싱글 스레드 방식으로 돌아가지만 실제 자바스크립트가 구동되는 환경(브라우저, Node.js등)에서는 주로 여러 개의 스레드가 사용되기 때문에 필요한 장치가 이벤트 루프이기 때문입니다.

자바스크립트의 함수가 실행되는 방식을 보통 "Run to Completion" 이라고 말합니다. 이는 하나의 함수가 실행되면 이 함수의 실행이 끝날 때까지는 다른 어떤 작업도 중간에 끼어들지 못한다는 의미입니다. 앞서 말했듯이 자바스크립트 엔진은 단일 호출 스택을 사용하며, 현재 스택에 쌓여있는 모든 함수들이 실행을 마치고 스택에서 제거되기 전까지는 다른 어떠한 함수도 실행될 수 없습니다.

자바스크립트에서는 함수 호출을 관리하는 call stack과 비동기 작업 처리를 위한 Web API가 함께 작업을 처리합니다. Web API는 특히 작업 완료에 시간이 오래 걸리는 작업을 처리하게 되는데, 이 결과값을 처리할 수 있는 callback 함수를 task queue에 쌓습니다.

하나의 js파일이 실행되면, 코드가 차례로 실행됩니다. 코드가 실행되는 도중에 함수가 호출이 되는 순간 call stack에 해당 함수 실행을 위한 모든 정보가 실행 컨텍스트에 담깁니다. 이 함수 내에서 또 함수가 호출되면, call stack에 새로운 실행 컨텍스트가 생깁니다. 함수 실행이 마무리 될 때 마다 결과값을 반환하고 해당 실행 컨텍스트는 없어집니다. 마지막 실행 컨텍스트부터 하나씩 빠지기 때문에 Stack 구조라고 부를 수 있는 것입니다.

이 과정 중에 호출되는 함수가 비동기로 작동되는 경우, 이 비동기 작업은 (브라우저는) Web API에서 처리됩니다. 이 작업의 결과를 처리하는 callback 함수는 이후에 call stack에서 따로 실행이 되어야 하는데, call stack에서 실행 컨텍스트가 아직 남아있는 경우 task queue에서 "대기"하게 됩니다.

시간이 오래 걸리는 작업이 call stack에 머물러서 싱글스레드로 작동되는 event loop를 막지 않도록 도와줍니다. 그래서 연산이 많고 시간이 오래 걸리는 작업은 비동기로 처리하는 것이 효율적인 것입니다.

• *Event Loop에 대해 설명할 수 있나요?

  JavaScript는 싱글 스레드 방식으로 돌아가지만 실제 자바스크립트가 구동되는 환경(브라우저, Node.js등)에서는 주로 여러 개의 스레드가 사용되기 때문에 필요한 장치가 이벤트 루프입니다. 핵심만 말하자면, JavaScript event loop는 call stack이 비어있는 경우, task queue에서 대기하던 callback을 call stack으로 옮겨서 callback을 실행시켜주는 역할을 합니다.

  *해당 질문에 답을 하면 바로 이어서 어떻게 동작하는지 설명해달라고 할 수 있습니다. 위의 질문의 대답을 하면 됩니다.

질문 : Node.js는 싱글 스레드인가요?(Section4 Unit4 Chapter2-3. 싱글 스레드와 멀티 스레드 : 세션 중 설명한 내용)

• Node.js는 싱글 스레드인가요?

  싱글 스레드란 한번에 하나의 태스크를 실행할 수 있는 방식입니다. 대조적으로, 멀티 스레드란 한번에 다수의 태스크를 실행할 수 있는 방식입니다. 대표적으로 자바스크립트 엔진이 싱글스레드 방식으로 작동하는데, 대기 중인 태스크들은 현재 실행중인 함수가 종료되어야 작동합니다.

  Node.js 자체는 싱글스레드 방식이 아닙니다. 싱글 스레드 방식으로 동작하는 것은 Node.js나 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진입니다. 만약 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로만 동작한다면 자바스크립트는 비동기로 동작할 수 없을 것입니다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저나 Node.js는 멀티 스레드로 동작하는 것입니다. 자바스크립트를 실행하는 부분에서만 싱글스레드로 구성되어있고, 이 때의 작업 동시성은 이벤트 루프를 통해서 구현할 수 있습니다.

질문 : React Hook의 사용 규칙에 대해 설명하세요.

질문의 요지

크루답

1. 리액트 함수의 최상위에서만 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있습니다.
2. 오직 리액트 함수 내에서만 사용되어야 합니다. 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JavaScript 함수 안에서 호출해서는 안 됩니다.

애초에 Hook은 React의 함수 컴포넌트 내에서 사용되도록 만들어진 메소드이기 때문에 근본적으로 일반 JavaScript 함수 내에서는 정상적으로 돌아가지 않습니다. 따라서 이 규칙 또한 반드시 준수해야 하는 규칙입니다.

리액트 훅이란?

클래스 없이 stste를 사용할 수 있는 기능

질문 : Class Component와 Function Component의 차이점이 무엇인가요?

질문의 요지 : 컴포넌트 선언하는 두 가지 방식을 모두 알고 있는가? 클래스 컴포넌트를 유지 보수하는데 사용할 수 있는가?

크루답변 Class Componet는 Function Component가 생기기 이전에 존재하던 컴포넌트 형식입니다. Class Component는 Function Component와 달리 컴포넌트를 확장해서 써야만 했습니다. 그러나 Function Component는 순수 함수이기 때문에 이러한 확장 과정을 거치지 않고도 컴포넌트를 만들 수 있습니다. 또한 Class Component는 React 수명 주기 메서드(ex. componentDidMount)를 사용해 React Life Cycle을 세밀하게 조작할 수 있고, Function Component는 React 수명 주기 메서드는 사용할 수 없는 대신 React Hook을 사용하여 상태 값을 사용하거나 최적화할 수 있는 기능들을 보완했습니다.

내답변 우선 Class Component와 Function Component의 역할은 동일합니다. 차이점이 있다면 클래스 컴포넌트의 경우 state 및 라이프사이클 기능을 사용할 수 있다는 것입니다. 한편 함수형 컴포넌트는 선언하기가 좀 더 편하고 메모리 자원을 덜 사용하는 장점이 있다. 과거에는 state 및 라이프사이클 기능을 사용할 수 없다는 단점이 있었는데 이어한 단점은 리액트 훅(useState, useEffect)이 도입되면서 해결되었다.

Component란?

단순히 템플릿 이상의 기능을 수해안다. 데이터가 주어졌을때 이에 맞춰 UI를 만들어주는

Class Component란?

1) 선언방식

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = '리액트';
    return <div>{name}</div>;
  }
}

export default App;

2) 차이점

• 더 많은 기능, 더 긴 코드, 복잡한 코드, 더딘 성능
• 상태 값 : o
• Life Cycle : o

  Function Component란?

  1) 선언방식

  import React from 'react';
  

function App() { const name = '리액트'; return

export default App;

``` 2) 차이점

• 더 적은 기능, 짧은 코드, 심플한 코드, 빠른 성능
• 상태 값 : x
• Life Cycle : x

3) 리액트 훅 등장 이후로?

• 상태 값 : o => useState
• Life Cycle : o => useEffect

  요즘 추세?

  요즘은 함수형 컴포넌트+HOOK을 사용하는 추세이다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 복잡함

질문 : Virtual DOM이 무엇이고, Virtual DOM(가상돔)이 어떤 면에서 좋은가요?

• React가 DOM을 조작하기 위해 사용하는 것이 Virture DOM(가상돔)입니다. React가 랜더링이 빠른 이유는 바로 이 가상돔을 사용하기 때문입니다. 실제 DOM을 조작하는하면 전체 노드들을 처음부터 다시 그려내야하기 때문에, 자원을 소모하게 됩니다. 그러나 가상돔을 사용하면, 변경된 요소 및 노드만 파악하여 한번에, 빠르게 브라우저에 렌더링 해줄 수 있습니다. 이는 빠른 로딩속도로 사용자 경험을 증대시킬 수 있습니다.

크루답변

Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.

virtualDOM을 이용하는 이유는 효율성 때문입니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아지는데요.

먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거칩니다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어 집니다. 작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하됩니다.

Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다.

따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거치게 됩니다.

DOM이란?

• HTML 요소들을 트리형태의 구조로 나타낸 것
• 문서객체모델 (Document Object Model)
• 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 DOM에 접근할 수 있는 방법을 제공하여 문서를 변경할 수 있게 돕는다.

DOM조작의 비효율성 :

• '좋아요'버튼 누르면 전체 노드들이 처음부터 다시 그려내야함
• 이는 DOM을 조작하는 소모적인 비용
• DOM 조작을 효율적으로 관리하는 최적화가 필요하다! 그래서 나온 것이?

  Virture DOM 의 효율성 :

• 기본 DOM의 복사본, 자동화, 추상화버전
• 모든 변화를 묶어서 딱 한번만 동기화(재조정)! 연산 비용이 적다.
• 가볍고 상태를 가지지 않으며, 불변성

질문 : 번들링이 왜 필요한가요?

• HTML, CSS, JS 를 하나의 파일로 압축, 전처리, 최적화하는 과정입니다. 물론, 번들링 과정을 하지 않고도 배포는 가능하지만, 사용자가 웹앱에 접근할때마다 많은 파일들을 요청하고 다운받아야 하므로, 서버와 사용자 모두에게 부담이 됩니다. 따라서 사용자에게 배포하기 전에 번들링은 필수적인 과정입니다.

크루답변 번들링을 해주지 않는다면 다양한 상황이 일어나 어려움에 처할 수 있습니다. 예를 들어,

• 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다.
• 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소합니다.
• 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기기 어렵습니다. 결국 그대로 공백을 되돌려서 코딩합니다.
• 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생했습니다.

등의 어려움이 생길 수 있기 때문에 번들링은 꼭 필요합니다.

질문 : 사용가능한 번들러?

• 웹팩, 브라우져파이, 파셀 등이 있다.

질문 : 웹팩 사용 이유?

• 웹팩은 배포하기 전에 번들링해주는 모듈 번들러이다.

웹팩 설정 파일 분석해보기

var path = require('path')
var webpack = require('webpack')

module.exports = {
  mode: 'production', // 해당 웹팩 설정파일은 배포를 위한 모드이다.
  entry: './src/main.js', // 웹팩이 빌드를 시도할 때, 첫 진입점 파일을 의미한다.
  output: {
    path: path.resolve(__dirname, './dist'), // 빌드의 결과물이 저장될 폴더명
    publicPath: '/dist/', // 1) 아래 작성
    filename: 'build.js' // 빌드 결과물의 이름
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
            },
            // .css 확장자를 가진 파일 모두, css-loader, vue-style-loader를 적용시킨다.

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
            },
            // .vue 확장자를 가진 파일 모두, vue-loader를 적용시킨다.

      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
            },
            // .js 확장자를 가진 파일 모두, babel-loader를 적용시킨다. 단, node_modules 폴더는 제외시킨다.

      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
            }
            // .png|jpg|gif|svg 확장자를 가진 파일 모두, file-loader를 적용시킨다. 이때 파일명 뒤에 해쉬를 붙인다. (이미지가 캐싱되어도 해쉬값이 변경되면 이미지 업데이트시 다시 새로운 이미지를 불러오게하기 위함)

    ]
    },

  resolve: {
        // 2
    alias: {
            'vue$': 'vue/dist/vue.esm.js'
    },
        // 3
    extensions: ['*', '.js', '.vue', '.json']
  },

    // 데브 서버 실행시, 옵션지정 참고 - https://webpack.js.org/configuration/dev-server/
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },

    // 빌드결과물 크기에 대한 경고를 띄울수있는 옵션 - https://webpack.js.org/configuration/performance/
  performance: {
    hints: false
    },

    // 소스매핑스타일에 대한 옵션 (빌드에 대한 소요시간에 영향을 끼칠 수도 있다) - https://webpack.js.org/configuration/devtool/
  devtool: '#eval-source-map'
}

출처 : 웹팩을 쓰는 이유와 사용법

질문 : 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?

• 콜 스텍(호출 스택, 스택)이란, 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트를 저장하는 자료구조 입니다. 콜 스택이란 자바스크립트 코드가 실행되며 생성되는 실행 컨텍스트(Execution Context)를 저장하는 자료구조라 정의할 수 있습니다. 만약 함수를 실행한다면, *해당 함수는 콜 스택의 가장 상단에 위치합니다. 함수의 실행이 끝난다면 해당하는 함수는 콜 스택의 가장 상단에 위치하고 있기 때문에 바로 제거할 수 있게 됩니다.

*왜 가장 상단에 위치할 수 있죠? 라는 꼬리 질문이 들어올 수 있습니다.

스택이라는 자료구조가 후입선출이라는 구조를 가지고 있기 때문에 가능한 일입니다.