브라우저

브라우저 렌더링 과정

브라우저 저장소에 대해서 설명하세요.

브라우저 저장소는 html5에 새롭게 추가된 기능으로 클라이언트인 웹 브라우저에 데이터를 저장할 수 있는 기능을 제공한다. 이전까지는 쿠키를 많이 사용하였다. 우선 쿠키는 클라이언트 로컬에 위치한 작은 파일 4kb의 작은 값만 저장할 수 있으며 서버에 데이터를 요청시 자동으로 header에 삽입되어 전송된다.시간을 지정해서 저장하면 브라우저를 종료하더라도 해당 시간까지 쿠키가 유지되며 시간이 만료되거나 시간을 지정하지않았을경우에 만료된다.
웹 스토리지는 HTML5부터 제공하는 기능. 쿠키와 유사. 웹 스토리지는 키와 값의 쌍의 형태로 다시 로컬스토리지와 세션스토리지로 분리. 로컬스토리지는 도메인만 같으면 브라우저를 열었다가 닫거나 다른 탭에서 열더라도 상태가 유지되는 반면 세션 스토리지는 다른 탭에서 열거나 브라우저를 닫았다 열였을때 상태유지가 되지 않는다.

로컬스토리지와 쿠키를 비교했을 때 가장 큰 차이는 지속성. 쿠키는 일정기간 유지되더라도 기간이 만료되면 삭제됨.로컬은 영원함
또한 쿠키는 요청시마다 heade에 삽입되며 4kb의 작은 용량. 반면 로컬스토리지는 서버로 전송되지않기때문에 트래픽 비용적음, 용량이 더큼

DOM

bodument objet model의 약자로 html문서 내 요소들을 노드로 변환함으로서 자바슼릡트가 조작할 수 있도록 만든 API.DOM에는 요소들이 모두 객체화되어 담겨 있으며 즉 html문서의 객체 기반 표현 방식이라고 할 수 있다.

크로스 브라우징이란?

다양한 종류의 브라우저에서 웹 페이지가 깨지지않으며 동등하게 출력되도록 만드는것을 말한다. 브라우저별 렌더링 엔진이 다르므로 어떠한 환경에도 동작하도록 대응이 필요함. 크로스 브라우징을 위해서는 caniuse를 사용해서 각 브라우저마다 적용되는 기능들을 확인 + resetcss로 브라우저마다 차이나는 기본값 초기화, 폴리필사용하는등의 대응이 필요
(+ 동일성이 아닌 동등성임. 동일하게는 불가능하므로 웹표준에 맞추어 동등한 수준의 정보-접근성을 제공하는것이 크로스브라우징의 목적)

• reset.css ? 각 브라우저마다 적용되는 기본 스타일으 초기화함으로서 동일한 스타일이 적용되게 하는 설정파일

검색 엔진 최적화란?

검색엔진 최적화란 검색엔진이 데이터를 수집하고 분석하는 방식에 맞추어 문서를 작성함으로서 검색결과 상단에 노출되도록 하는 작업을 말한다.
검색엔진최적화를 위해서는 html의 메타태그와 대체텍스트를 잘 작성하고 외부링크에 잘 연결되록 하는 방법이 있다

시맨틱 마크업이란?

의미론적이라는 뜻을 가진 시맨틱과 html문서를 작성하는 마크업의 하성어로 의미를 잘 잠도록 html문서를 작성하는것을 말한다.
예를들어 머릿말을 표현할때 논시맨틱태그보다 header를 사용함으로서 해당 컨텐츠가 머릿말을 사용함을 태그로 표현할 수 있음. 또한 독립된 컨텐츠를 작성할때 article태그를 사용하는등의 방식으로 용도에 맞게 태그를 사용하는 것을 말한다.
시맨틱마크업의 장점은 검색엔진은 시맨틱 태그를 기반으로 분석하기 때문에 검색엔진 최적화에 유리하며, 태그를 보는것만으로도 문서의 구조를 파악하며 가독성이 좋아진다는 장점

GET vs POST

GET은 서버의 리소스를 요청할때 사용합니다. 데이터베이스로 따지면 select에 가깝다.

POST는 서버의 리소스를 새로생성하거나 업데이트할때 사용됩니다. 데이터베이스로 따지면 create , update에 가깝다. (수정은 PUT을 더 사용)

또한 GET요청을 할때 응답값을 url파라미터에 담으며 POST는 바디값에 담기게 됨.

GET 요청은 멱등이며 POST는 멱등이 아니다.(멱등 =연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질.)

GET요청은 불필요한 요청을 막기위해 캐시될 수 있으며 파라미터에 정보가 모두 노출되므로 민감한 정보를 전달할때는 사용해서는 안된다. 또한 전송할 수 있는 데이터 길이에 제한이 안된다

반면 POST는 body값에 데이터가 저장되므로 암호화가 된다면 GET에 비해 안전하다. 또한 전송할 수 있는 길이 제한이 없으며 캐시되지 않는다.

자바스크립트

자바스크립트의 this?

자바스크립트의 this는 어떠한 값을 가리키는 예약어로서 실행되는 위치에 따라 다른값을 가리킨다.
*(일반함수, 객체 내 메서드. 생성자함수, 화살표함수)
그리고 this를 잃어버리는 문제 해결을 위해 call ,bind apply사용 . call과 apply는 해당 함수를 바로 실행하며 this에 특정context를 바인딩해줌. 단 call은 매개변수가 낱개 apply는 배열 형태로 전달할 수 있음. bind는 호출이 아닌 특정 context가 바인딩된 함수를 반환

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

자바스크립트에서 이벤트를 추가하기 위해서는 이벤트를 추가할 요소에 evnetListner를 등록하고 핸들러를 지정함으로서 사용이 가능. 지정한 요소에 이벤트가 발생하면 이벤트리스너에 의해 핸들러가 실행됨 .이때 자동으로 evnet객체가 매개변수로 매핑되는데 현재 이벤트가 발생한 대상, 그리고 이벤트를 발생시킨 대상등의 대한 정보가 들어있음. (event.target: 실제 이벤트를 발생시킨 대상. 버블링되더라도 항상 동일. currentTarget 혹은 this : 현재 실행중인 핸들러가 할당된 요소)
이렇게 이벤트를 발생시킨대상과 이벤트핸들러를 발생시킨 대상이 다른 이유는 자바스크립트 이벤트는 전파되는 특성을 가지기 때문.
전파되는 흐름에 따라 버블링단계와 캡처링으로 분리 . 이러한 이벤트 버블링과 캡처링이 발생하기 때문에 이벤트를 실제 방생시킨 대상과 이벤트가 호출된 대상이 다를 수 있음. (예를들어 부모요소에 이벤트리스너를 등록하고 자식요소에 이벤트를 발생시켜도 부모요소의 이벤트핸들러 실행)이러한 이벤트 버블링과 ㅂ캡쳐링을 사용하여 이벤트 위임이 가능
이벤트 버블링 중단하려면 stopPropagation

• 단 focusa같은 이벤트는 버블링되지않음!
• 기본적으로 이벤트 캡쳐링 단계에서 이벤트는 호출되지않음.만약 캡쳐링 단계를 잡아내려면 addEventListenr의 capture : true로 설정

이벤트를 사용하면 removeEventListner로 이벤트를 제거해야함. 같은 단계에 있어야하며 같은 객체에 할당해주어야함

이벤트 위임

공통 조상요소에 이벤트 핸들러를 하나만 할당하여 이벤트를 핸들링 하는 패턴

타입 시스템에 대해서 알고 있는지? 타입스크립트를 써봤는지?

타입스크립트는 자바스크립트를 기반으로 하는 더 확장된 언어이다. 여전히 뿌리는 자바스크립트이며 자바스크립트에 몇가지 기능이 더 추가된것이다. 타입스크립트의 가장 중요한 특징은 정적타입이라는 것. 자바스크립트는 본래 동적타입언어이다. 자료형은 존재하지만 함수나 변수를 선언할때 별도의 자료형을 특정짓지않음. 또 같은 변수에 다른 자료형 할당가능. 자유롭지만 큰 프로젝트에서는 예기치못한 버그 발생가능성. 타입스크립트를 사용하면 이러한 가능성을 줄일 수 있음.
장점: 컴파일 단계에서 오류를 발견할 수 있음. 서비스 중 갑자기 오류가 발생할 가능성 줄임. 또한 자바스크립트 기반이라 사용이 쉬움
단점 : 코드가 길어짐, 초기 설정 필요

코딩 컨벤션이란?

코딩 컨벤션이란 관리하기 쉽고 통일된 코드를 작성하기 위한 일종의 스타일 규약. 아러한 부분한보통 prettier를 활용해서 해결.

use strict란?

느슨한 모드를 해제하고 엄격모드를 사용하겠다는 선언으로 자바스크립트의 문법에 좀 더 엄격한 기준을 적용. 느슨한 모드에서는 무시되었던 오류 또는 자바스크립트 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킴. 코드의 문제를 더 빨리 알게되고 실수로 전역변수에 접근하는등의 문제를 막아줌

• 엄격모드를 지원하지 않는 브라우저에서는 다른방식으로 동작 가능성.

webpack이란?

자바스크립트 파일을 번들링하기 위한 모듈 번들러. 자바스크립트를 작성하다보면 기능에 따라 여러개의 모듈이 생성되는데 웹팩을 이용하면 모듈을 다시 하나의 js파일로 합칠 수 있음. 또한 css, html도 같은 확장자를 가진 파일을 묶어서 로드가 가능하기 때문에 네트워크 요청횟수를 줄여 비용을 줄일 수 있슴.
그리고 웹팩4부터 프로덕션 모드로 빌드 시 코드 난독화 압축화, 최적화 작업을 지원하므로 성능 개선이 가능

webpack 용어들

entry : 웹팩은 의존성있는 파일들을 합치는 기능을 하는데 이 의존성 그래프의 시작점을 엔트리라고 한다.
웹팩은 엔트리에 지정된 파일을 시작으로 사용되는 모든 모듈들을 하나로 합친다 . 여러개의 엔트리가 존재할 수 있음.
output: 웹팩이 생성한 번들러의 결과물의 위치
loader: 웹팩은 오직 json, js타입의 파일만 읽을 수 있으므로 다른 타입의 파일을 웹팩이 이해하고 처리가능하도록 변환시키는 작업
plugin : loader가 파일을 읽는다면 plugin은 번들된 결과물에 추가적인 작업을 진행한다

babel이란

es6와 같은 상위 버전의 자바스크립트 파일을 더 낮은 버전으로 트랜스파일 해주는 트래슨파일러
babel을 사용하기위해서는 로더와 플러그인 (preset)이 추가적으로 필요하다.
babel은 그자체로 작동하지않으며, 사실 세부적인 작업은 플러그인에 의해 발생한다. 만약 화살표함수 기능을 지원하기 위해서는 화살표함수 플러그인을 설치해야한다. 그러나 이렇게 필요한 모든 기능을 설치하고 설정에 추가하기 번거로우므로 제공해주는 것이 babel - preset이다. 해당 프리셋에는 es6이상의 신규문법을 하위 버전으로 변환하기 위한 기능들이 모두 들어있음.

• 트랜스파일러 vs 컴파일러
  컴파일 : 특정 언어로 작성된 코드를 다른 언어로 변환하는것. 예를들어 C를 어셈블리로 변환하거나 Java를 바이트코드로 변환하거나.
  트랜스파일 : 특정언어를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는것. 예를들어 타입스크립트를 자바스크립트로 변환하는것은 트랜스파일

클로저

클로저란 내부함수가 외부함수에 맥락에 접근하는것을 말한다. 함수들을 생성될 때 자신이 생성된 곳의 실행환경을 내부 숨김 프로퍼티로 갖게되고 이 값은 해당함수가 소멸될때까지 변경되거나 소멸되지않는다. 내부함수는 내부에서 어떠한 값을 참조하게 될때 가장 먼저 내부 지역변수에서 해당변수를 찾고 없다면 이 실행환경에서 해당 변수를 찾아 있다면 반환할 수 있다

클로저는 자신이 생성된 곳의 환경을 계속 유지하므로 메모리 차원에서 조심해야한다.

그러나 클로저를 이용하면 데이터를 보존하고 정보의 은닉, 캡슐화가 가능하다. 예를들어 생성자 함수내에서 변수를 선언하고 메서드에서 해당 변수에 접근할때 , 생성자함수로 객체를 생성한다면 직접적으로 해당 변수에 접근은 불가능하지만 메서드를 통해 해당 값에 접근할 수 있다

메모리 (힙,콜스택)

자바스크립트의 메모리는 크게 힙과 콜스택으로 구분된다.
이중 콜스택은 함수의 실행컨텍스트와 원시형 데이터 타입이 저장되는곳
힙은 객체형 - 참조형 데이터타입이 저장되는 곳
원시형 데이터타입은 변수에 값이 할당되면 해당값이 콜스택에 저장되고 변수는 이 콜스택을 가리키게 된다
참조형 데이터타입은 힙메모리 주소에 배열의 실제데이터가 저장되고 해당 힙 메모리 주소가 다시 콜스택에 저장되고 변수는 이 콜스택에 저장된 힙메모리의 주소를 가리키게 된다.

메모리 누수

메모리 누수는 어떠한 이유로 인해 더이상 사용하지않는 메모리를 해제하지못하는 것을 말한다. 자바스크립트에서는 가비지 컬렉터가 콜스택을 감시하면서 가비지 데이터, 즉 어디에서도 참조되지않는 데이터를 메모리에서 제거하는데 더이상 사용되지않음에도 불구하고 어떠한 이유로 가비지 컬렉터의 대상이 되지못하고 남아있어 메모리만 차지하는 경우 메모리 누수라고 함.
일반적으로
1. 전역변수의 잘못된 사용. 전역변수는 가비지 컬렉션의 대상이 되지않으므로 전역변수에 메모리를 크게 차지하는 데이터를 할당했을때, 메모리 누수가 발생할 수있음
2. 콘솔의 사용. 콘솔에 출력되는 데이터는 계속해서 메모리에 유지되므로 메모리에 계속해서 적재되고 메모리를 차지.
3. 그외 잘못된 클로저의 사용, setInterval 등으로 생성한 타이머를 제거하지않는 경우 메모리 누수 발생.
메모린 누수를 방지하기 위해서는 전역변수에 값을 할당하는것을 최소한으로 하고 더 이상 사용되지않는 함수들을 제거하고 초기화해주어야함.

const , let ,var

주로 const > let > var 순으로 사용되는것이 권장된다.
const를 사용하는것의 장점은
1. 미래의 버그를 사전에 방지하고
2. 선언과 동시에 할당이 이루어져야 하므로 변수선언에 조금 더 신중해지며 이는 더 나은 메모리 관리로 이어집니다
3. 선언방식을 보는것만으로도 어떠한 변수가 변경될 가능성이 있는지 없는지를 명확하게 알 수 있음.

React

react란?

리액트란 유저 인터페이스를 구축하기 위한 js라이브러리. 컴포넌트를 활용해서 사용자 인터페이스를 만든다.

react DOM

사실 리액트는 웹과 관련이 없습니다. 리액트는 컴포넌트의 상태를 관리하는 역할만 하고 결국 브라우저에 요소들을 전달해주는 것은 reactDom이 해주는 역할. reactDom의 주요역할 중 하나는 바로 가상돔. 리액트 돔은 컴포넌트들이 재평가되었을때, 이를 바로 실제 돔트리에 반영하는 것이 아닌 가상의 메모리 , 가상 돔에서 이를 비교한다. 그리고 실제로 변화가 발생한 부분만 실제 돔에 업데이트가 일어난다

상태관리 redux, contextAPI

react의 상태관리는 로컬 상태의 ㅅ경우 useState hooks를 사용하며 전역 상태를 관리하기 위해서는 contextAPI 혹은 redux등을 사용할 수 있다.

토이프로젝트에서 redux를 사용하였는데 가장 큰 이유는 이전 프로덕트 앱을 배포하면서 contextAPI는 사용하였지만 reudux로 프로젝트를 진행해본 경험은 없어서 배우는 의미로 선택함. 또한 비동기로 데이터를 가져와서 핸들링 후 저장하는 경우가 많기때문에 redux의 미들웨어인 reduxThunk를 사용하면 효과적으로 처리를 할 수 있을것같아서 redux를 선택했다.

react 라이프사이클

react는 컴포넌트 기반으로 UI를 구축하는 라이브러리인데 각각의 컴포넌트에는 생명주기가 있다. 일반적으로 컴포넌트가 생성되고 사라질때까지를 의미 . 라이프사이클은 크게 컴포넌트가 처음 실행될때인 mount, 상태에 변화가 있을때 update , 컴포넌트가 제거될때인 unmount로 나눌 수 있다.
함수형 컴포넌트에서는 redux의 상태관리 메서드들을 사용할 수 없었는데 16.8 버전 부터 지원이 되면서 useEffect 와 같은 생명주기 훅을 사용할 수 있게 되었다.
함수형 컴포넌트가 업데이트 되는것은 부모컴포넌트로부터 전달받는 props가 변경되거나 로컬 state가 바뀔때 혹은 부모 컴포넌트가 리렌더링될때.

redux -thunk

상태관리를 위한 라이브러리
reudx -thunk는 비동기처리를 위한 리덕스 미들웨어. 여기에서 thunk란 특정작업을 나중에 하도록 미루기 위해 함수로 감싸는것을 말한다. redux -thunk는 액션객체 바로 dispatch하는 대신 액선객체를 dispatch하는 함수를 dispatch함으로서 디스패치와 리듀서 사이에 비동기 작업을 진행할 수 있다.

• redux-saga또한 비동기 작업을 처리하기 위한 미들웨어. redux thunk가 직접 함수를 디스패치했다면 redux-saga는 액션을 모니터링하다가 특정 액션이 발생하면 특정작업이 이루어짐.

MVC, MVVM

MVC 패턴 : 애플리케이션을 모델, 뷰, 컨트롤러의 구조로 나눈것. view는 사용자에게 보여지는 UI, 모델은 데이터릴 처리하는 부분(명확히 정의할수ㅡ는 없지만 데이터를 주관한다), 컨트롤러는 액션을 확인하고 모델을 업데이트하며 다시 모델에서 데이터를 받아 뷰를 업데이트하는 역할
MVVM 패턴 : 애플리케이션을 모델, 뷰, 뷰모델의 구조로 나눈것으로 모델은 데이터를 처리하는 파트, 뷰는 UI를 표현하는 부분 그리고 뷰모델은 뷰와 모델사이에서 이들을 연결해주는 역할을 함.
모델과 뷰 사이 상호작용은 뷰모델을 통해 간접적으로 진행. 예를들어 뷰에 사용자 이벤트가 발생하면 뷰가 이를 뷰모델에 crud를 요청. 뷰모델이 모델에 모델에게서 데이터를 받거나 업데이트를 요청한 뒤 다시 뷰에게 이러한 사항들을 알림. 뷰와 모델은 직접적으로 연결안됨

실행컨텍스트

실행컨텍스트란 함수 실행에 대한 세부 정보를 담고있는 내부 데이터 구조. 실행컨텍스트는 함수가 실행될때마다 생성되며 콜스택에 순서대로 쌓이게 된다. 콜스택에 쌓이고 가장 상위에 컨텍스트부터 차례로 실행되어 pop되기때문에 함수의 순서를 관리할 수 있다 또한 실행컨텍스트 내부의 렉시컬환경을 통해 변수들의 스코프를 관리할 수 있다.

call by value /referenece

함수를 호출할때 매개변수가 전달되는 방식에 대한것.
call by value : 값에 의한 전달
call by.referecne :참조에 의한 전달

렉시컬 환경이란?

함수의 환경정보를 가진 객체로서 함수의 지역변수들을 프로퍼티로 갖으며 외부 렉시컬환경 즉, 자신이 생성된 곳의 렉시컬 환경을 참조하고 있는 객체이다.

CSS

flex란

flex란 페이지에서 레이아웃을 배치하기 위한 스타일 속성으로 기존 display ,position, float등으로 레이아웃을 배치하는데 어려움이 있어 css3에 새롭게 고안된 스타일속성이다

margin vs padding

보더를 기준으로 바깥쪽 여백은 margin 안쪽으로 생기는 여백을 padding이다

Position

position은 문서내에 요소를 배치하는 방법을 정하는 속성이다.

속성값으로 static , relative, absolute, sticky , fixed가 있다. default value는 static이며 일반적인 문서 흐름상 배치되는 방식

relative는 일반적인 문서 흐름상 배치되는 위치에서 top,left,r..값 만큼 이동하는 방식

absolute는 가장 가까운 realtive속성을 가진 조상요소를 기준으로 top,left,r..값 만큼 이동하는 방법

fixed는 요소를 일반적인 문서흐름에서 제거하고 뷰포트(브라우저창)을 기준으로 top,left,..값 만큼 이동하는 방법

sticky는 static와 fixed가 합쳐진 성격, 일반적인position: static
상태와 같이 일반적인 흐름에 따르지만 스크롤이 특정 위치에 도달하면  istoin: fixed
와 같이 박스를 화면에 고정할 수 있는 속성

박스모델

모든 html요소는 박스모양으로 구성. 이를 박스모델이라고 함. 박스모델은 html요소를 패딩, 보다, 마진, 그리고 컨텐츠로 구분한다.

box-sizing

css 박스사이징은 height나 width를 지정할때 대상이 되는 영역을 변경할 수 있다.

네트워크

OSI7계층

네트워크로 통신을 하던 초기에는 컴퓨터끼리 통신을 하는 표준이 없어 제대로된 통신이 불가능했고 이러한 문제를 해결하기 위해 국제표준화기구가 제시한 것이 바로 OSI7계층이다.
총 7ㅖ층으로 응용계층. 표현계층 세션계층 전송계층 네트워크 계층, 데이터 링크계층, 물리계층으로 이루어짐
응용계층은 응용프로세스와 관계하며 일반적인 응용 서비스를 수행함 , 사용자와 가장 가까운 계층
표현계층은 코드간 번역을 담당하는 계층으로 응용계층으로부터 받은 데이터를 세션계층이 읽을 수 있는 형태로 변환하며 인코딩, 암호화등을 진행한다
세션계층은 두 컴퓨터간 세션을 관리한다.세션이란 같은 사용자로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지하는 기술
전송계층은 일반적으로 TCP프로토콜을 이용하며 포트를 열어서 데이터를 전송할 수 있게 함. 두 피씨간 송수신되는 데이터 신뢰성을 보장하는 역할을 함.
네트워크 계층은 실제 네트워크 간 라우팅을 담당. 라우팅이란 어떤 네트워크 안에서 데이터를 보낼 최적의 경로를 선택하는 것을 말함. (그리고 여러개의 노드를 거칠때마다 경로를 찾아주는 역할을 한다.)
데이터 링크계층은 물리계층으로 송수신되는 정보의 오류와 흐름을제어.
물리계층은 데이터를 전기적인 신호로 변환해서 송수신하는 역할
실제 사용되는 TCP/IP 계층은 OSI참조모델을 기반으로 실무적으로 사용할 수 있도록 단순화한것.

그외

객체 지향 프로그래밍이란

객체 지향프로그래밍이란 컴퓨터 프로그래밍 패러다임중 하나의 프로그램을 각각의 독립된 단위인 객체들의 상호 작용으로 구성하는 방법. OOP방법은 상속을 통해 코드 재사용성이 높고 캡슐화를 통해 필요에 따라 데이터를 은닉할 수 있으며 오버라이딩, 오버로딩을 통해 다형성의 특징을 갖는다.(오버라이딩 :부모 클래스의 메서드를 자식클래스가 필요에 따라 재정의해서 사용. 오버로딩 : 같은 클래스안에서 매개변수에 따라 다른 작동을 하는 같은 이름의 함수를 정의)

메모제이션이란?

컴퓨터 프로그램들이 동일한 계산을 반복해서 수행해야할 때 이전 값을 저장해두고 사용함으로서 반복수행을 제거하여 프로그램 수행속도를 향상시키는 기술

라이브러리 와 프레임워크

프레임워크와 라이브러리의 가장 큰 차이는 흐름을 제어하는 주도권이 누구에게 있느냐이다. 프레임워크에 경우 이미 전체적인 흐름, 뼈대가 잡혀있는 틀에 개발자가 내용을 추가해 나간다면 라이브러리는 개발자가 전체적인 흐름을 만들어나가면서 필요에 따라 라이브러리의 도구들을 가져다가 사용한다고 볼 수 있다.

AJAX

asyncnonize javascript and xml 의약자로 자바스크립트를 이용해 비동기적으로 클라이언트와 서버가 데이터를 주고 받는 통신방식이다. ajax를 이용함녀 웹페이지 전체를 리프레시 하지않고도 필요에 따라 일부분만 갱신할 수 있다. 이름에는 xml이 들어가지만 요즘에는 json형태의 데이터를 주로 사용한다

JSON

JSON은 데이터를 주고 받을때 사용할 수 있는 가장 간단한 텍스트 기반 포맷이다. 키와 value의 형태로 되어있어 읽기가 매우 쉽다. 또한 직렬화를 통해 프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있다는 장점이 있다.

직렬화란 어떠한 데이터, 또는 객체가 그 상태로 메모리에 저장되거나 네트워크 통신이 불가능할때, 가능한 형태로 변환하는것.

Promise 와 콜백

콜백과 promise 모두 비동기 처리를 위해 사용되는 방식이다 (콜백 = 나중에 호출할 함수를 의미).

무언가 비동기적으로 수행할 경우 수행이 완료되었을 때 특정 동작을 하기위해서는 비동기 처리가 필요하. 그러나 콜백함수로 비동기 처리를 할 경우 중첩이 과도하게 발생 해 가독성이 떨어지고 에러처리가 힘들어진다. 불편함을 극복하기 위해 등장한것이 프로미스이다.

Promise 자바스크립트에서 제공하는 비동기 처리를 도와주는 객체이다. 정해진 기능을 수행하고나서 성공적으로 수행이된다면 정해진 결과값을, 혹은 실패했다면 에러를 전달해준다.프로미스의 체이닝을 활용하여 콜첩의 중첩을 좀 더 깔끔하게 해결할 수 있다
Promise 체이닝은 프로미스 객체의 메서드인 then과catch를 체이닝 즉 연결해서 사용하는 방법으로 프로미스의 then과catch가 그자체로 Promise를 반환한다는 점에서 착안된 방법.

그러나 만약 Promise체이닝이 많아진다면 코드가 길어질 수 있는데 이를 대신해서 async, await를 사용하면 동기식으로 코드를 작성하는것처럼 작성할 수 있다. async는 완전히 새로운 문법이아닌 promise위에 좀 더 간편하게 사용하도록 기능이 추가된 것이다. async 키워드를 붙이면 해당 함수는 promise를 사용한것처럼 동작한다. await는 async 키워드가 붙은 함수안에서 비동기함수가 처리될때까지 대기하도록 할 수 있다.

이벤트 루프

이벤트 루프는 콜스택과 태스큐를 관리하는 자바스크립트 내 루프이다. 어떠한 이벤트가 없을때는 가만히 잠들어있다가 태스크큐에 작업이 들어오면 계속해서 루프를 돌며 콜스택과 큐를 주시하다가 콜스택이 비었을때 큐의 첫번째 콜백을 스택에 쌓아 실행되도록한다. 이러한 이벤트 루프덕분에 자바스크립트는 동시성을 지원할 수 있다 (동시성 : 여러작업이 동시에 일어나는것처럼 보이는것)

• 마이크로태스크 큐란 ? 싱글 슬드인 자바스크립트에서 비동기 작업을 하기위해서는 적절한 관리가 필요하다. 이를 위해 사용되는것이 마이크로 태스크큐이다. 프로미스와 같은 비동기 작업은 프로미스 체이닝이 발생했을때, 큐에 들어가게 된다. 마이크로태스크큐는 콜스택이 비워져야만 실행되므로 프로미스의 then메서드들은 콜스택이 모두 비워지고 나서야 콜스택에 하나씩 삽입되어 실행된다.

프로토타입

프로토타입이란 자바스크립트 언어의 고유 기능으로 자바스크립트으 모든 객체는 프로토타입이라는 숨김 프로퍼티를 갖는다. 해당 프로퍼티는 null 또는 해당 객체가 생성될때 사용된 원천객체를 참조하고 있다. 만약 다른 객체를 참조하고 있는 경우 참조 대상을 해당 객체의 프로토타입이라고 한다. 이 프로토타입을 이용하여 하위 객체가 상위 객체의 프토퍼티에 접근할 수 있다.

프로토타입 체이닝이란 프로토타입을 통해 객체들이 연결되는 것을 말한다.
객체에 특정 키에 대해 접근하려고 할때 해당 객체에 해당 키가 없으면 객체의 프로토타입을 참조하여 다시 해당 키값을 찾게된다. 이러한 과정은 더이상 객체의 프로토타입이 존재하지 않을때까지 연결되며 이렇게 프로토타입을 통한 체이닝을 프로토타입 체이닝이라고한다.

주의할것은 프로토타입은 읽기전용이라는 점이다. 만약 프로퍼티를 추가하거나 지우려는 경우 프로토타입이 아닌 해당 객체에 바로 수정이 발생한다. 즉 객체의 메서드는 공유되지만 객체의 상태는 공유되지않는다. (아무리 여러개의 인스턴스가 this로 수정하려고 해도 각각의것만 수정됨)

생성자함수도 객체를 생성하는 방법중 하나로 생성자함수로 생성되는 객체의 프로토타입은 생장자 함수의 prototype 프로퍼티에 의해 결정된다.

즉 let rabbit = new Rabbit(); and Rabbit.prototype = animal일때,

rabitt.[[protoype]] === anmimal

UI란

키보드, 화면, 버튼등 사용자가 제품/서비스를 사용하기 위해 접하는 매개체

API란

프로그래밍을 하기위해 웹브라우저와 같이 기반이 되는 시스템이 제공해주는 기능을 사용하기 위한 매게체

restful api란

restful 하게 api를 작성하는것으로 즉 rest의 기본원칙을 잘 지킨 api라고 할 수 있다.
여기서 rest란 일종의 아키텍처로 api설계의 중심에 자원이 있고 method를 통해 자원을 처리하도록 설계하는것을 말한다.

TDD란

테스트 주도 개발의 약자로 우선 테스트코드를 작성한 후 해당 테스트를 통과하는 짧은 코드를 작성하는 방식이다.
말 그대로 테스트가 주도하는 개발로 매우 짧은 개발 사이클을 가지기때문에 코드가 방대해지지앟고 모듈화가 자연스럽게 잘 이루어진다는 장점이 있다.

함수형 프로그래밍

거의 모든것을 순수 함수로 나누어 문제를 해결하는 프로그래밍 패러다임으로
대입문이 없는 프로그래밍으로 정의된다. 여기서 순수함수란 사용하는 함수들은 함수의 실행이 외부에 영향을 미치지않고 같은 입력에 같은 출력을 반환하며 사이드 이펙트가 없는 함수이다.

prettier

구현외의 일관된 규칙으로 코드를 작성하도록 도와주는 포매터

eslint

코드를 정적분석함으로서 일관 규칙으로 코드를 작성하도록 도와주며 동시에 잘못된 문법의 사용을 알려주는 도구