프론트엔드 개발자 면접 예상 질문 간단 정리

김형석·2022년 7월 17일

개념공부 스터디

목록 보기

5/27

1. SQL 과 NoSQL 의 차이점

관계형 데이터베이스

행과 열을 가지는 표 형식 데이터를 저장하는 형태의 데이터베이스를 가리키며 SQL이라는 언어를 써서 조작함
데이터는 정해진 데이터 스키마에 따라 테이블에 저장됨
데이터는 관계를 통해 여러 테이블에 분산됨
명확하게 정의된 스키마, 데이터 무결성 보장, 관계는 각 데이터를 중복없이 한번에 저장
스키마를 사전에 계획하고 알려야 함(나중에 수정 복잡), 관계를 맺고 있기 때문에 조건문이 많은 쿼리가 만들어 질 수 있음
복잡한 계산 및 실시간 데이터 정합성이 필요한 업무

NoSQL 데이터베이스

SQL을 사용하지 않는 데이터베이스를 말하며 유연한 스키마, 확장성이 특징
스키마도 없고, 관계도 없음
다른 구조의 데이터를 같은 컬렉션에 추가할 수 있음(데이터의 구조가 같을 필요가 없다)
데이터는 애플리케이션이 필요로 하는 형식으로 저장, 데이터 읽어오는 속도가 빨라짐
로그 및 이력 등의 단순 기록형 업무

브라우저 저장소

대표적인 캐시로는 웹 브라우저의 작은 저장소 쿠키, 로컬 스토리지, 세션 스토리지가 있음

쿠키

쿠키는 만료기한이 있는 키-값 저장소
4kb 까지 데이터를 저장할 수 있고 만료기한을 정할 수 있고, 만료기한이 정해지면 브라우저가 종료되어도 인증이 유지
쿠키는 매번 서버로 전송

로컬 스토리지

만료기한이 없는 키-값 저장소
웹브라우저를 닫아도 유지되고 도메인 단위로 저장, 생성됨
10mb 까지 저장

세션 스토리지

만료기한이 없는 키-값 저장소
탭 단위로 세션 스토리지를 생성, 탭을 닫을 때 해당 데이터가 삭제
5mb 까지 저장

영구저장소(LocalStorage)와 임시저장소(SessionStorage)가 구분되기 때문에, 데이터의 지속성에 따라 선택이 가능

브라우저 렌더링 동작 과정

HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.(Parsing)
두 Tree를 결합하여 Rendering Tree를 만든다.(Style)
Rendering Tree에서 각 노드의 위치와 크기를 계산한다.(Layout)
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어르 만든다.(Paint)
레이어를 합성하여 실제 화면에 나타낸다.(Composite)

HTTP의 상태코드와 메서드

HTTP 메서드 CRUD
1xx (정보): 요청을 받았으며 프로세스를 계속한다
2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용합니다.

200 OK : 요청이 성공적으로 되었습니다.

201 Created : 요청이 성공적이었으며 그 결과로 새로운 리소스가 생성되 었습니다.
3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다

301 Moved Perma nently : 이 응답코드는 요청한 리소스의 URI가 변경되었음을 의미합니다. 변경된 새로운 URI를 응답에서 주는 것이 좋습니다. 4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다.

400 Bad Request : 이 응답은 잘못된 문법으로 인하여 서버가 요청을 이해할수 없음을 의미합니다.

401 Unauthorized 클라이언트의 인증이 되지 않음을 의미합니다.
5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다 - 500 Internal Server Error : 서버에 오류가 있음을 의미합니다

RESTful API

API - 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법
REST - 웹에 존재하는 모든 자원에 주소를 지정하는 규칙

RESTful API는 REST 특징을 지키면서 API를 제공한다는 의미, 간단하게 프론트엔드에서 백엔드 API를 호출할 URL을 어떻게 만들 것인가에 대한 이야기

RESTful 하게 만든 API는 요청을 보내는 주소만으로도 대략 어떤 요청인지 파악이 가능

서버에 데이터 요청을 보낼 때는 HTTP란 규약에 따라 신호를 전송, 주소만으로도 대략 어떤 요청인지 파악이 가능해야 하기 때문에 GET, POST 사용 할 때에 CRUD를 맞추어 사용해야 한다.

결국 REST API란 HTTP(HyperText Transfer Protocol) 요청을 보낼 때 어떤 URI에 어떤 메소드를 사용할지 개발자들 사이에 지켜지는 약속

HTTP의 두가지 특징
Request / Response (요청 / 응답)
소통의 핵심은 요청과 응답입니다. 인간의 소통방식이 컴퓨터끼리의 소통 방식에도 적용된 것. 말이 아닌 메시지의 형식으로 요청하고 응답
HTTP 요청은 사실 프론트엔드(클라이언트) 에서 백엔드(서버)에 일(데이터 처리)을 시작하게 하기 위해 보내는 메세지

객체 지향 프로그래밍(Object Oriented Programming)

객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.

장점

코드 재사용이 용이
남이 만든 클래스를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용할 수 있다.
유지보수가 쉬움
절차 지향 프로그래밍에서는 코드를 수정해야할 때 일일이 찾아 수정해야하는 반면 객체 지향 프로그래밍에서느 수정해야 할 부분이 클래스 내부에 멤버 변수 혹은 메서드로 존재하기 때문에 해당 부분만 수정하면 된다.
대형 프로젝트에 적합
클래스 단위로 모듈화를 시켜서 개발할 수 있으므로 대형 프로젝트처럼 팀으로 개발할 때 업무 분담이 쉽다.

단점

처리 속도가 상대적으로 느림
객체가 많으면 용량이 커질 수 있음
설계시 많은 시간과 노력이 필요

특성

클래스 + 인스턴스(객체)
클래스 - 어떤 문제를 해결하기 위한 데이터를 만들기 위해 추상화를 거쳐 집단에 속하는 속성과 행위를 변수와 메서드로 정의한 것으로 객체를 만들기 위한 메타정보라고 볼 수 있다.
인스턴스(객체) - 클래스에서 정의한 것을 토대로 실제 메모리에 할당된 것으로 실제 프로그래밍에서 사용되는 데이터
추상화
추상 클래스나 추상 클래스가 갖는 추상 메서드를 의미하기보다는 클래스를 설계하는 것 자체를 의미
즉, 공통의 속성이나 기능을 묶어 이름을 붙이는 것
캡슐화
기능과 특성의 모음을 클래스라는 캡슐에 분류해서 넣는 것이 캡슐화
특징
코드를 재수정 없이 재활용할 수 있음
접근 제어자를 통한 정보 은닉 - 객체가 외부에 노출하지 않아야할 정보 또는 기능을 접근제어자를 통해 적절히 제어 권한이 있는 객체에서만 접근하도록 할 수 있음, 그러므로 코드에 수정이 일어났을 때 책임이 있는 객체만 수정하면 된다.
상속
부모 클래스의 속성과 기능을 그래도 이어받아 사용할 수 있게하고 기능의 일부분을 변경해야 할 경우, 상속받은 자식 클래스에서 해당 기능만 다시 수정하여 사용할 수 있게 하는 것이다.
다형성
하나의 변수명, 함수명 등이 상황에 따라 다른 의미로 해석될 수 있는 것

자바스크립트는 여러가지 스타일로 프로그래밍 할 수 있는 멀티 패러다임 언어입니다.

명령형 프로그래밍(함수형이 속해있는) 도 가능하며, 객체지향도 가능합니다!

하지만 함수형 프로그래밍의 중요한 개념인 순수함수를 완벽하게 표현(?)을 할 수는 없다

함수형 프로그래밍

프로그래밍의 여러 종류 중 하나이며, 함수를 이용해 프로그래밍을 하는 것이다.

소프트웨어가 커짐에 따라 복잡하게 엉킨 스파게티 코드를 유지보수 하는 것이 매우 힘들어, 이를 해결하기 위해 함수형 프로그래밍 패러다임에 관심을 갖게 되었다.
거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법.
작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 함.

특징

불변 데이터
함수형 프로그래밍을 가능하게 하는 요수 중 하나가 바로 immutable Data
한번 정해진 값은 바뀌지 않음
1급 함수
함수의 인자로 전달되고 함수의 결과로서 리턴되며, 변수에 할당
함수도 데이터처럼 구성이 가능해짐
자바스크립트에서는 함수를 1급으로 처리하고 있음
순수함수
동일한 입력에는 항상 같은 값을 반환해야 하는 함수
함수의 실행이 프로그램의 실행에 영향을 미치지 않아야 하는 함수

함수형 프로그래밍과 객체지향 프로그래밍의 차이

객체지향 프로그래밍과 함수형의 차이는 데이터(상태)를 다루는 개념과 '간결한 코드 작성'에 대한 관점 차이가 있다.
객체지향이 함수의 동작부를 캡슐화해서 코드를 이해할 수 있게 한다면, 함수형 프로그래밍은 동작부를 최소화해서 코드 이해를 돕는다.

함수형 언어에서는 함수(Function) 자체가 일급 객체가 되겠지만, 객체지향 언어에서는 클래스(또는 객체, Object)가 일급 객체가 된다.
일급객체란?
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다!

비동기 프로그래밍

javascript는 단일 스레드에서 동작
싱글스레드만으로 멀티스레드처럼 부드러운 소프트웨어를 만들기 위해서 비동기적 프로그래밍을 사용

비동기 프로그래밍은 연산을 요청한 후에 결과를 기다리지 않고 다른 작업을 수행하는 프로그래밍 스타일을 말한다.

콜백방식

자바스크립트에서 함수는 일급 객체이므로 파라미터로 넘길 수 있음
콜백을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 콜백 안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수 없음(콜백지옥)

Promise

복잡한 처리에서 콜백 방식은 콜백 헬 발생
콜백에 비해 쉽게 컨트롤이 가능하며, 가독성이 좋음
오류를 가시적으로 대응할 수 있음
then과 catch로 접근이 가능

async/await

async를 실행하게 되면 무조건 promise 객체가 반환
결과 값을 then, catch를 통해 다루는 것이 아닌 변수의 담아 동기적 코드처럼 작성해 줄 수 있다는 점에서 편리
await키워드를 사용하면 기존에 실행 순서가 예측이 불가능했던 비동기 작동 방식이 동기적으로 실행되는 코드처럼 예측 가능해질 수 있다
try catch로 에러 핸들링

AJAX

JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술이다.

기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래하고 말 것이다.

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있다.

undefined 와 null의 차이

undefinde는 변수를 선언하고 값을 할당하지 않은 상태,
null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다, 어떤 값이 의도적으로 비어있음을 표현한다
즉 undefined는 자료형이 없는 상태이다.

typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력된다.

undefined == null은 true

상태관리

상태

상태(state)는 쉽게 말하면 데이터라고 생각할 수 있다.
객체지향 프로그래밍에서는 기본 단위가 객체이고, 프론트엔드에서는 비슷한 개념으로 컴포넌트라는 용어를 사용
객체가 인스턴스 변수(데이터)로 상태를 갖고 있듯이 컴포넌트도 상태(데이터)를 가질 수 있음

상태관리

변화하는 데이터 관리
여러 컴포넌트 간에 데이터 전달과 이벤트 통신을 한곳에서 관리하는 것

왜 필요

데이터가 바뀌어도 페이지가 렌더링 되지 않게 하기 위해
상태가 복잡하기 때문, 상태들이 복잡하게 얽혀있다면, UI가 어떻게 변하는지 알기 어려울 수 있기에 효율적으로 관리해야한다.

Redux(리덕스)란

javascript 상태관리 라이브러리

특징

동일한 데이터는 항상 같은 곳에서 가지고 온다.
리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
변경은 순수함수로만 가능하며, 리듀서와 연관되는 개념이다.

Store(스토어) – Action(액션) – Reducer(리듀서)

Store(스토어)

스토어는 상태과 관리되는 오직 하나의 공간이다.

컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
컴포넌트에서 상태 정보가 필요할 때 스토어에 접근

Action(액션

액션은 앱에서 스토어에 운반할 데이터를 말한다.(주문서)
액션은 자바스크립트 객체 형식으로 되어있다.

Reducer(리듀서)

액션을 스토어에 바로 전달하는 것이 아니다.
액션을 리듀서에 전달해야한다.
리듀서가 주문을 보고 스토어의 상태를 업데이트하는 것이다.
액션을 리듀서에 전달하기 위해서는 dipatch() 메서드를 사용해야한다.

액션 객체가 dispatch() 메서드에 전달된다
액션을 통해 리듀서를 호출한다.
리듀서는 새로운 스토어를 생성한다.

Redux의 상태관리 도식화

장점

상태를 예측 가능하게 만든다(순수함수 사용하기 때문)
유지보수
디버깅에 유리

redux의 데이터 흐름은 동일하게 단방향으로 view(컴포넌트)에서 Dispatch(store에서 주는 state를 바꾸는 함수)라는 함수를 동해 action(디스 패치 함수 이름)이 발동되고 reducer에 정의된 로직에 따라 store의 state가 변화하고 그 state를 쓰는 view(컴포넌트)가 변하는 흐름을 따릅니다.

자바스크립트 this란?

메서드를 호출한 객체가 저장되어 있는 속성
자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 한다.
즉, 선언이 아닌 호출에 따라 달라진다는 것이다. 각 상황별로 this가 어디에 바인딩되는지 알아야 한다.

상황에 따라 다르게 결정된다.
1. 함수에서의 this
2. 메소드에서의 this
3. 생성자에서의 this
4. 객체에서의 this
5. 간접 실행에서의 this
6. 바인딩 함수에서의 this
7. 화살표 함수에서의 this

this의 전역 객체

브라우저에서의 this의 전역객체는 window이다.

메서드에서의 this

메서드에서의 this는 메서드 실행 때 메서드를 소유하고 있는 객체

생성자에서의 this

생성자는 new 키워드를 붙여야한다. new를 붙이지 않을 시에 에러 발생
ES6 부터는 calss를 사용 할 수 있다.

생성자 this

function person(_name, _age) {
    this.name = _name;
    this.age = _age;
}

/* Peson객체 메소드 추가 */
person.prototype.changeName = function(newName) {
    this.name = newName;
}

// 1 
const p = new person('Enjo', '22');
console.log(p.name); // Enjo 출력
// 2 
p.changeName('Requiem');
console.log(p.name); // Requiem 이 출력

class생성자에서의 this

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    changeName(newName) {
        this.name = newName;
    }
}

const p = new Person('Enjo', '22');
console.log(p.name); // Enjo 출력
p.changeName('Requiem');
console.log(p.name); // Requiem 이 출력

객체에서의 this

객체에서의 this는 객체를 가리킨다.

간접 실행에서의 this

간접 실행이란 call(), apply() 메서드를 호출하는 것을 의미한다.
call()메서드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출함
apply()메서드는 주어진 this 값과 배열(또는 유사 배열 객체)로 제공돠는 arguments로 함수를 호출

둘이 유사하지만 call()은 인수 목록, apply()는 인수 배열을 받는 것이 차이

바인딩 함수에서의 this

bind()메서드와 함께 사용되며 bind()는 새로운 함수를 만드는 역할을 함
strict mode 시에 차이를 보임

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

unboundGetX는 전역에서 호출이 되었고, boundGetX는 module의 getX를 호출함.

화살표 함수에서의 this

화살표 함수는 간단한 형태로 정의하거나 혹은 문맥을 바인드 하기 위해 주로 사용

let person = {
    name: "youngjin",
    getName: function () {
        console.log(this) // person 객체를 가리킨다
        setTimeout(() => {
          console.log(this) // person객체를 가리킨다
          console.log(this.name); // youngjin 을 출력한다.
      }, 1000);
  }
}

person.getName();

일반함수와 화살표함수의 this 차이

자바스크립트 내부 함수는 일반함수, 메서드, 콜백함수 어디서 선언되었든지 this가 전역 객체를 가리킨다.
일반함수의 this는 window(전역)을 가리키며, 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.

Call, Apply, Bind 함수

3가지 방법은 this를 바인딩 하기 위한 방법이다.

call() - this 를 바인딩하면서 함수를 호출하는 것, 두 번째 인자를 하나씩 넘기는 것
apply() - this 를 바인딩하면서 함수를 호출하는 것, 두 번째 인자가 배열
bind() - 함수를 호출하는 것이 아닌 this가 바인딩된 새로운 함수를 리턴

use strict모드에서의 this

일반 함수에서 this는 undefined가 바인딩 된다.

자바스크립트 이벤트 관리 방법, 이벤트 설계

ex) 이벤트 캡쳐링 & 버블링
ex) 이벤트 등록 & 해제
ex) 이벤트 위임 방식

이벤트 전파

이벤트 버블링 - Event Bubbling

특정 화면 요소에서 이벤트가 발생했을 때 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
즉, 자식에서 부모에게 전파

이벤트 캡쳐링 - Event Captureing

버블링과 반대로 진행되는 이벤트 전파 방식
즉, 부모에서 자식으로 전파ㅣ

이벤트 위임 - Event Delegation

이벤트 위임을 한 문장으로 정리하자면,
하위에서 각각 이벤트를 붙이지 않고, 상위 요소에서 하위 요소의 이벤트를 제어하는 방식

프론트엔드 빌드 시스템

바벨이란?

모든 브라우저가 최신 자바스크립트 문법을 이해하지 못해서, babel이 브라우저가 이해할 수 있도록 변환해줌
바벨은 파싱과 출력을 담당, 플러인이 변환을 담당
바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타냄

Node.js 란?

javascript 런타임
런타임이란 프로그래밍 언어가 구동되는 환경
노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다.
node.js는 javascript를 서버에서도 사용할 수 있도록 만든 프로그램이다.(언어가 아님 환경, 프로그램임)
node.js는 javascript를 위해 만들어진 것이다.
스크립트언어(javascript)는 웹브라우저가 없으면 사용할 수 없기 때문에 node.js가 나옴
node.js를 통해 서버를 만들 수 있다.

npm이란?

Node Package Manager(노드 패키지를 관리해주는 틀)
Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램
package.json파일에서 설치된 목록 및 버전 확인 가능

ESLint란?

javascript코드에서 발견된 문제 패턴을 식벼하기 위한 정적 코드 분석 도구
문법에 맞게 코드를 짤 수 있도록 도움말 역할을 해준다.

Prettier란?

VSCode Extension 중 하나
정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구

React 프레임워크 왜?

라이브러리, 프레임워크의 등장 배경
동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함
dom 관리와 상태 변화 관리를 최소화하고, 개발자는 오직 기능 개발, 사용자 인터페이스에 보다 더 집중할 수 있도록 도와줌

컴포넌트 기반의 화면구성, 가상 Virtual DOM으로 인한 빠른 속도, 사용자 인터페이스를 만들기 위한 Javascript 라이브러리(view만 제공 view에만 집중하고 있어 프레임워크 보다는 라이브러리에 가깝다)

1. Component 단위 작성

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, 이러한 특징은 컴포넌트를 재활용하는 등 생산성과 유지 보수를 용이하게 한다.

2. JSX

JSX(JavaScript + xml)는 자바스크립트에 대한 확장 문법으로서, 리엑트에서 element(요소)를 제공해준다.
jsx는 리액트로 프로젝트를 개발할 때 사용되므로 고식적인 자바스크리븥 문법은 아님
브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
jsx는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.

3.Virtual DOM

UI의 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그램인 개념이다.

DOM이란?

Document Object Model로 객체를 통해 구조화된 문서를 표현하는 방법
트리형태로 되어 있어 특정 node를 찾거나 수정, 제거가 가능

유저의 인터랙션에 의해 상태 변화가 일어나면 브라우저 작동 원리에 의해 렌더링 과정을 반복하게 된다. Virtual DOM은 이러한 과정에 의해 발생하는 비효율성을 최소화하기 위해 탄생하게 되었다.

과정

전체 Virtual DOM이 업데이트 된다.
Virtual DOM을 업데이트 이전의 시점과 비교한다.
실제로 바뀐 부분만 real DOM에서 바꾼다.
real DOM에서의변화가 스크린에 그려진다.

Diffing 알고리즘

Virtual DOM 이 업데이트되면, React는 Virtual DOM을 업데이트 이전의 Virtual DOM 스냅샷과 비교하여 정확히 어떤 Virtual DOM이 바뀌었는지 검사한다.

백엔드 개발 경험

처음 c언어 공부하면서 아이유 팬명록 프로젝트에서 간단한 CRUD를 python을 이용하여 구현

CRUD(Create, Read, Update, Delete)에 해당하는 동작을 각각 POST, GET 에 맞춰 개발
통신은 ajax를 이용하였으며, mongoDB로 데이터를 관리하였음

웹 서비스 배포

AWS(Amazon Web Service)는 소위 클라우드 서비스라고도 한다. 유저가 직접 서버를 구입하고 설치할 필요없이 AWS상에서 클릭 몇번으로 서버를 구축하고 사용할 수 있음

E2C란?

E2C는 독립된 컴퓨터 한대를 임대해서 사용할 수 있게 해주는 서비스
1. 마우스 클릭 몇 번으로 컴퓨터 한대를 구성할 수 있다.
2. 원하는 스펙의 가상 서버를 구축하고, 스펙을 사용한만큼의 비용만 지불
3. 하나의 EC2 Instance 는 컴퓨터 한 대를 의미

검색 엔진 최적화 (Search Engine Optimization, SEO)

SEO란

페이지가 검색 결과 페이지에서 잘 노출 되도록 웹 페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 시책
검색했을 때 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나, 즉 더 많이 방문하게 되니까 효과적인 인터넷 마케팅 방법 중 하나라 볼 수 있다.

Next.js 의 SEO

SSR, SSG 이미 컨텐츠가 구성되어 있는 HTML로 렌더링되기 때문에 검색엔진에서 파악하기 쉬움

웹 접근성과 시맨틱 마크업이란?

웹 접근성

「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다.
즉, 장애인이나 고령자 분들도 똑같이 우리처럼 웹을 이용할 수 있게 보장하게 하는 것.

시맨틱 마크업이란?

시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다
즉, 의미를 잘 전달 하도록 문서를 작성하는 것.

헤더 / 푸터 : <header>, <footer>
메인 컨텐츠 : <main>, <section>
독립적인 컨텐츠 : <article>
최상위 제목 : <h1>
순서가 없는 목록 : <ul>, <li>
네비게이션 : <nav>

해당 코드가 어떤 역할(기능)을 하는지 직관적인 이해를 높임. => 코드의 가독성 up
화면 판독기로 페이지를 탐색 시 시멘틱 마크업을 푯말로 사용할 수 있다.
검색엔진이 시멘틱 태그를 중요한 키워드로 간주해 SEO에 유리.

타입스크립트

자바스크립트에 타입을 부여한 언어.
타입 스크립트는 JS와 달리 브라우저에서 실행하려면 파일을 한번 변환(컴파일)해주어야 함.

장점

1.에러의 사전 방지

2.코드 자동 완성과 가이드

개발 툴의 기능을 최대로 활용 할 수 있습니다.
JS의 경우 타입이 정해져 있지 않기 때문에 자동완성이 미리 뜨지 않아 일일이 타이핑해야함.
TS의 경우 타입 정해놔서 미리 자동완성이 떠서 빠르고 정확하게 작성해 나갈 수 있음.

map, filter, reduce()

map

map메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
요소들에게 일괄적으로 함수를 적용하고 싶을 때 사용하기 적합.

filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
true인 경우에만 배열에 추가하기 때문에 중복 제거처럼 조건에 맞는 특정 요소들만 새 배열에 넣고 싶은 경우 사용에 적합.

reduce

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
map, filter같은 함수형 메서드를 reduce만으로도 구현할 수 있습니다.
보통 누적계산에 사용

자바스크립트 관련해서 모르는 문법이나 API가 나왔을 때 관련 정보를 어떻게 검색하는지?

MDN Web Docs

우선 모르는 문법이 나오게 되면 구글에 해당 문법에 대해 검색해봅니다.
처음엔 이게 문법인지도 모르기 때문에 구글 검색을 통해 무엇인지 부터 파악하고,
MDN에 검색해봅니다.

사용 예

MDN에서도 예제가 나오긴 하지만, 이해를 못 할때가 있습니다.
그래서 저는 MDN검색 후에 다시 구글을 통해 예제를 검색해봅니다.
예제를 먼저 이해해보고, MDN에서 이해하지 못했던 부분을 다시 이해하려 노력합니다.

클로저

클로저란 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다.

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }
}
inner = outter();
inner();

이 경우 inner에서 outter이 호출되고 그다음 inner()에서 outter는 종료되지만, 외부함수의 지역변수 title이 출력된다.
즉, 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 말한다.

프로토타입

Java,Python등 객체 지향언어에서 많이 볼 수 있는 Class.
하지만 자바스크립트는 객체지향언어지만, Class는 없고, 프로토타입이라는 것이 있습니다.
(ES6에서 Class문법이 추가됨.)

JavaScript에서 기본 데이터 타입을 제외한 모든 것이 객체입니다.
객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입객체를 이용하여 객체를 만드는데, 이 때 만들어진 객체안에 __proto__속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있습니다. 이 링크를 프로토타입이라고 정의합니다.

SSR, CSR

SSR

서버에서 렌더링 되는 방식
클라이언트에서 요청을 하면 서
버에서 데이터까지 갖춘 html을 클라이언트에 전달

장점

웹페이지 로드시 한번의 요청으로 페이지를 구성하기 때문에 처음 로딩이 짧음
컨텐츠가 구성되어 있는 HTML을 서버에서 받기 때문에 SEO에 최적화 되어 있음

단점

페이지를 이동, 클릭 이벤트 요청이 생길 경우 요청하고 전달받는 과정을 계속 반복하기 때문에 불필요한 렌더링이 있음(서버 과부화)

CSR

다음은 spa입니다. 싱글 페이지 어플리케이션은 맨 렌더링 방식으로 Client Side Rendering, 클라이언트 사이드의 렌더링을 채택합니다

클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식입니다

장점

사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 깜빡이지 않고 바로 수정된 데이터가 표시됩니다.
빠른 속도와 서버 부하 감소

단점
-모든js 파일을 다운받아 하기 때문에 초기 로딩 시간의 더 오래 걸린다는 점입니다.

seo는 불리하다는 단점

MPA(SSR)

multi page application의 약자로 여러 페이지로 구성된 웹 어플리케이션입니다.

사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을

받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식입니다.

SPA(CSR)

Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션 입니다.

브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식입니다.

스코프(Scope)

'범위’의 의미를 가지고 있다.

👉 식별자 접근 규칙에 따른 유효 범위

스코프의 정의는 “식별자 접근 규칙에 따른 유효 범위”이다.
식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.
범위는 중괄호(블록) 또는 함수에 의해 나눠진다.
그 범위를 스코프라고 부른다.
그래서 각각을 Block Scope와 Function Scope라고 부른다

👉 const 키워드

유효 범위 : 블록 스코프 / 함수 스코프
값 재할당 : 불가능
재선언 : 불가능

👉 let 키워드

유효 범위 : 블록 스코프 / 함수 스코프
값 재할당 : 가능
재선언 : 불가능

👉 var 키워드

유효 범위 : 함수 스코프
값 재할당 : 가능
재선언 : 가능

클로저

자신이 선언될 당시의 환경을 기억하는 함수
클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

내부함수가 외부함수의 지역변수에 접근 가능
외부함수가 소멸 후에도 내부함수가 지역변수에 접근 가능

호이스팅

호이스팅이란 선언문을 스코프의 최상단으로 끌어올리는 것 처럼 동작하는 특징을 의미합니다.
선언문에는 var a와 같은 변수 선언 뿐만 아니라, 함수, 클래스 또한 포함

호이스팅은 선언부가 실행 컨텍스트 최상단으로 올라간것처럼 동작하는 것을 의미합니다.

var, let, const 모두 호이스팅이 일어납니다.
다만, let, const 를 사용하면 undefined로 초기화된것이 아니라 is not defined 참조 에러를 발생시킵니다.
변수 선언시 let, const 사용을 권장합니다.
함수를 만드는 3가지 방법 중 함수 선언식만 호이스팅이 일어납니다.
const 예약어를 사용하는 함수 표현식을 권장합니다.
변수, 함수 호이스팅 순서 - 변수 선언 -> 함수 선언 -> 변수 할당

CORS

Cross Origin Resource Sharing의 약자로 클라이언트 애플리케이션과 다른 origin을 가진 서버 애플리케이션이 서로 통신할 수 있도록 허용하는 프로토콜

클라이언트와 서버의 origin이 달라도 통신을 무조건 허용하면 클라이언트에서 악의적으로 서버에 접근할 가능성이 너무 높기 때문

UseEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook

useCallback

메모리제이션된 함수를 반환

useMemo

메모리제이션된 값을 반환

useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다.
useMemo는 함수의 연산량이 많을때 이전 결과값을 재사용하는 목적이고, useCallback은 함수가 재생성 되는것을 방지하기 위한 목적이다.

SWR 라이브러리

데이터 전역관리 가능
캐시된 데이터 사용

김형석

블로그 이사 : https://hengxi.tistory.com

이전 포스트