Front-End 기술 면접 준비하기 (추가중)

JS 기술 면접 준비

브라우저 렌더링 과정

(이미지 출처:https://seopressor.com/blog/http-vs-https/)

• 웹 브라우저에 www.naver.com 을 요청하면 우선, Cache에 www.naver.com이 존재하는 지 검색한다(Cache는 한 번 가져온 값을 저장하고 있다가, 일정 시간이 지나면 없어짐)
• Cache에 값이 존재하면 접속, 값이 없다면 hosts 파일에 www.naver.com 정보가 있는지 검색
• hosts 파일에도 없다면, Local DNS에 www.naver.com의 정보를 질의함

  여기서 DNS란?
  Domain Name System 의 약자로, 우리가 인터넷 상에서 접근하는 도메인에 대해 찾아가야 할 IP 주소로 변환해주는 시스템

• Local DNS에 정보가 없다면, Root DNS에 질의
• Root DNS에 정보가 없다면, com DNS에 질의
• com DNS에 정보가 없다면, Local DNS에 naver.com DNS 정보를 제공함
• Local DNS는 naver.com DNS에 www.naver.com를 질의
• naver.com DNS는 Local DNS에 www.naver.com도메인에 대한 IP정보를 줌
• 사용자는 Web Browser에서 www.naver.com 접속

HTTP와 HTTPS 차이

(이미지 출처:https://seopressor.com/blog/http-vs-https/)

HTTP는 Hypertext Transfer Protocol의 약자이다
하이퍼텍스트란 문서와 문서가 링크로 연결되어있는 형태의 문서체계를 말하는데,
하이퍼텍스트의 가장 주요한 문서양식이 HTML이다
즉, HTML을 전송하기 위해 만들어진 통신규약이 바로 HTTP인 것이다

우리가 주소창에 URL을 입력할 때 적는 "http://" 의 의미는 "내가 이 도메인에 해당되는 컴퓨터와 통신을 할 건데, HTTP라는 프로토콜을 이용할 것이다" 라는 뜻이다

그렇다면 HTTPS는 무엇일까?
HTTPS도 HTTP와 같은 하이퍼텍스트 프로토콜이다
이 둘의 차이점은 HTTP'S'에서 드러난다
여기서 'S'는 'Over Secure Socket Layer'의 약자이다
여기서 중요한 키워드는 "Secure"!
HTTP와는 다르게 HTTPS 프로토콜은 보안장치가 결합되어 있는 형태의 통신방식이라고 생각하면 쉽다
HTTPS 프로토콜을 이용해서 데이터를 전송하게 되면, 우리가 전송하는 데이터, 상대가 우리에게 돌려주는 데이터 등이 암호화되기 때문에 제 3자가 그것을 가로챌 수 없게 된다

OOP 특징

OOP란 Object Oriented Programming 즉, 객체지향 프로그래밍을 뜻한다

특징은 크게 4가지가 있다
1. 상속 : 부모 클래스의 속성이나 기능이 자식 클래스에 상속되는 것 자식 클래스에서 따로 정의하지 않아도 부모 클래스에서 정의된 것을 자동으로 상속받음 => 코드의 재사용성 증가
2. 다형성 : 같은 함수가 있다고 칠 때, 그 함수가 매개변수에 따라 다른 역할을 할 수도 있다
ex) 도형을 만드는 Class(높이,너비) => 사각형은 너비x높이, 삼각형은 (너비x높이)/2
3. 캡슐화 : 연관 있는 것을 하나로 묶어줌 연관 있는 변수와 함수를 클래스로 묶고 외부에 감출 내용은 감춤 연관있는 것들은 잘 응집하고, 다른 모듈과는 결합도가 낮아야 함
ex) 자판기? => 사람들이 number of items에 접근하면 곤란 => 은닉화
4. 추상화 : 객체들의 공통적인 프로퍼티와 메서드를 뽑아내는 것 구현 부분을 제외한 오직 선언 부분만을 설계하는 것

Class 객체지향언어 : class vs object

class person{
  name;
  age;
  speak();
}

Class는 쉽게 말해, 붕어빵을 만들 수 있는 틀을 말함

• 클래스 자체에는 데이터가 들어있지 않고, 템플릿만 존재
• "이 클래스에는 이런 데이터가 들어올 수 있어!"라고 한 번만 선언
• 클래스는 정의만 한 것이라서 실제로 메모리에 올라가진 않음
• 속성(field), 행동(method) 포함
• 간혹 메서드 없이 데이터만 들어있는 경우도 있는데, 이를 데이터클래스라 부름

Object는 위와 같은 클래스를 이용해 실제 데이터를 넣어서 만드는 것

• class를 이용해서 많이 만들 수 있음
• 실제로 데이터를 넣으면 Object는 메모리에 올라가게 되는 것
• 붕어빵 틀인 클래스에 팥을 넣으면 팥 붕어빵(Obj), 크림을 넣으면 크림 붕어빵(Obj)

예시코드

class Person {
  // constructor
  constructor(name, age){
    //fields
    this.name = name;
    this.age = age;
  }
  
  //methods
  speak(){
    console.log(`${this.name}: hello!`)
  }
}

// 새로운 Object 생성
const seunghye = new Person("seunghye", 25)
console.log(seunghye.name) //"seunghye"
console.log(seunghye.age) //25
seunghye.speak(); //"seunghye: hello!"

이렇게 작성할 수 있는 것이다

class User{
  constructor(firstName, lastName, age){
    this.firstNmae = firstName
    this.lastName= lastName
    this.age = age
  }
}

// 만약 실수로 나이를 -1로 지정한다면?
const user1 = new User("seunghye","Lee",-1)
console.log(user1.age) //-1

만약, user가 실수로 나이를 -1이라고 지정하는 상황을 막으려면?

class User{
  constructor(firstName, lastName, age){
    this.firstNmae = firstName
    this.lastName= lastName
    this.age = age
  }
  
  
  get age(){
    return this._age
  }
  
  // this.age로 설정을 하면 무한콜백에 걸리므로, 다른 이름을 사용해 주어야 함
 
  set age(value){
    if(value<0){
      throw Error("age can not be negative")
    }
    this._age = value;
  }
}

get 키워드를 통해 값을 리턴하고
set 키워드를 통해 값을 설정할 수 있다
대신 set은 값을 설정하기 때문에 우리가 value를 받아와야 한다

DOM과 Virtual DOM

(출처:https://ryublock.tistory.com/41)

DOM

HTML파일이 브라우저에 표현되려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 올려야 한다
브라우저 렌더링 엔진은 모든 요소(Element)와 속성(Attribute)등을 각각의 객체로 만들고, 이것을 트리 구조로 구성한다 이를 DOM이라고 부른다

이런 웹 페이지의 형태는 정적인데, 이를 동적으로 변경하기 위해 프로그래밍 언어가 자신에게 접근하고 수정할 수 있도록 DOM API를 제공한다

Element를 추가, 수정, 생성하면서 DOM이 수정되면 Render Tree 생성, Layout 생성, Paint가 다시 이루어 진다 => 요소 변화가 많으면 성능 저하로 이어진다

Virtual DOM

위와 같은 문제를 해결하기 위해 Virtual DOM이 탄생함 로컬에 Virtual DOM을 생성시키고, 브라우저에 Render를 요청하기 전에 변경사항을 요청하는 방식

함수형 프로그래밍

함수형 프로그로그래밍이란, 성공적인 프로그래밍을 위해 부수 효과를 제거하고 조합성을 강조하는 프로그래밍 패러다임이다

• 순수함수를 만듦
• 조합성을 강조하여 모듈화 수준을 높임
• 오류를 줄이고 안정성을 높임
• 생산성을 높임

순수 함수

동일한 인자를 넣었을 때 항상 동일한 리턴 값을 반환하고, 외부에 영향을 받지 않는 함수이다

function add(a,b){
  return a+b;
}

console.log(add(5,6)); // 11
console.log(add(6,7)); // 13

add라는 function에 동알한 값의 인자 a,b를 넣으면 어느 곳에서 호출을 하든 동일한 리턴값을 반환하게 된다
그렇다면 순수 함수가 아닌 예제를 보자

let c = 10
function add2(a,b){
  return a+b+c;
}

console.log(add(5,6)); // 21
console.log(add(6,7)); // 23

c = 20

console.log(add(5,6)); // 31
console.log(add(6,7)); // 33

add2 function은 c라는 변수의 값이 바뀌면, 같은 인자 값을 넣었다 해도 다른 결과 값이 나온다

즉, 순수함수는 동일한 인자값을 받으면 항상 동일한 리턴값을 반환하여야 하며, 외부에 영향을 주지도 받지도 않아야 한다

JSX

JSX란 JavaScript + XML 을 합친 기존 자바스크립트의 확장 문법이다
이 둘을 합쳐서 얻을 수 있는 결과는?
☞ 자바스크립트 내부에 마크업 코드를 작성할 수 있다

const element = <h1>안녕하세요</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

위 코드와 같이 자바스크립트 내부에 마크업 코드를 작성할 수 있다는 것을 의미한다

let vs var

var는 변수 재선언이 가능하다
변수 선언을 여러 번 해도 상관없기 때문에, 필요할 때마다 변수를 사용할 수 있다는 장점이 될 수 있다
하지만 같은 변수명을 남용할 가능성이 높아지고, 이는 에러가 발생할 확률을 높인다
그에 반해 let은 변수 재선언이 불가능하다
하지만 변수 재할당은 가능함
따라서 호이스팅을 막고, 안전한 코드를 짜기 위해서는 let을 사용하는 것을 지향해야 한다

Babel

Babel은 간단히 말해, 최신의 JavaScript 코드를 아주 무난한 예전의 JavaScript 코드로 변환해 주는 것

MVC

• Model : 데이터
• View : 데이터가 어떻게 생겼는지
• Controller : 데이터를 보여주는 함수

SQL vs NoSQL

SQL은 Structured Query Kanguage의 약자로
관계형 데이터베이스 관리 시스템의 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어다
흔히 얘기하는 관계형 DB는 RDBMS(MySQL 등)이고,
SQL은 RDBMS을 설계하는데 사용된 언어이다

NoSQL은 Not Only SQL로 관계형 데이터베이스가 아닌 데이터베이스로 이해해야 한다