Wanna be a thinker

1. BOM이란?

- 브라우저와 관련된 기능을 구성하는 브라우저 객체 모델의 집합

- 최상위 객체는 window로 BOM은 window의 하위 객체

2. DOM이란?

- DO(문서 객체) : HTML TAG들을 Javascript에서 이용할 수 있는 객체로 만든 것

- DOM의 넓은 의미 : 웹 브라우저가 HTML 페이지를 인식하는 방식

- DOM의 좁은 의미 : document 객체와 관련된 객체의 집합

- 문서 객체의 생성 방식

1) 정적 생성 방식 : 웹 브라우저가 HTML 문서에 적힌 태그를 읽을 때

2) 동적 생성 방식 : 원래 HTML 페이지에 없던 문서 객체를 Javascript를 통해 생성할 때

출처 : m.blog.naver.com/magnking/220972680805

1. JavaScript Framework

1.1. 목적

자바스크립트의 구현을 쉽고 빠르게 하는 것

1.2. 개요

설계의 바탕이 되는 기반코드와 이를 커스터마이징 할 수 있는 라이브러리의 통합체이다.

1.3. 대표격

- Angular

- React

2. Angular

2.1. 목적

Single Page Application의 쉬운 작성

2.2. 개요

- 구글 지원의 오픈소스 웹 App 프레임워크

- SPA 형태의 개발

- 큰 커뮤니티

- 데이터 중심적, 테스트 주도적, 선언적 HTML

2.3. 특징

1) Two Way Data-Binding

- model과 view를 양방향으로 연결

- 한 쪽의 데이터 변경 시 양쪽 다 갱신

2) Dependency Injection

- 컴포넌트간 서비스 사용 및 의존성 관리가 용이

- 코드상 밀접한 연관이 없는 컴포넌트의 테스트가 쉬움

3) Directives

- 필요에 따라 커스텀 HTML TAG 작성, 사용 가능

3. React

3.1. 목적

데이터가 지속적으로 변화하는 대규모 APP 구축을 위해 만들어짐

3.2. 개요

- 페이스북에서 만들고 있는 자바스크립트 라이브러리

- 기존 Angular, Ember의 서버 보조 역할 탈피로 HTML5 History API등을 통해 상태별 고유 주소 구현이 가능해짐

-> 클라이언트 라이브러리 페이지가 렌더링에 관여하게 되어 검색엔진 최적화 및 성능 문제가 발생

=> 대안으로서 React가 개발됨

3.3. 특징

1) JUST the UI

- 오직 UI 컴포넌트를 만들기 위한 라이브러리

2) Virtual DOM

- DOM Tree와 같은 구조체를 Virtual DOM으로 가지고 있다.

- V-DOM은 가상의 HTML Element를 가진 상태에서 렌더링을 통해 DOM 조작 등 필요한 부분만을 갱신한다.

- 일관성이 있어 브라우저에 의존적이지 않고 테스트가 쉽다.

- 메모리 상에 DOM을 구성, 구성한 대상을 비교하여 갱신된 부분만 갱신하기 때문에 속도가 빠르다.

3) DATA Flow

- 데이터의 단방향 흐름을 지향하기 때문에 Angular처럼 코드 양이 줄지는 않는다.

- 모델 컴포넌트가 데이터를 UI 컴포넌트로 전달하기 쉬운 관리 App을 만들 수 있다.

- 이벤트를 통해 하위 컴포넌트의 변화를 감지할 수 있다.

4. Framework와 Library의 차이

4.1. Framework

4.1.1. 목적

원하는 기능 구현에만 집중한 빠른 개발을 지원

4.1.2. 개요

개발에 필요한 기능들이 어느 정도 구성된 뼈대를 제공, 개발 효율을 향상시키지만, 정해진 구조에 맞게 개발해야함

4.2. Library

4.2.1. 목적

재사용이 필요한 기능의 반복적 코드 작성 제거

4.2.2. 개요

특정 기능에 대한 API(도구/함수)의 집합 기능을 사용하기 위해 호출하는 방식

4.3. 차이점

- Library를 사용하는 AppCode는 App흐름을 직접 제어한다.

  단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐이다.

- 반면 프레임워크는 거꾸로 AppCode가 프레임워크에 의해 사용된다.(제어의 역전)

  AppCode는 프레임워크가 짜놓은 틀에서 수동적으로 동작해야 한다.

4.4. 그 외

- Backbone.js는 Javascript의 mvc 패턴을 구현하기 위한 라이브러리

- React는 단순히 UI를 렌더링 하기 위한 라이브러리

출처

www.incodom.kr/JavaScript_%ED%94%84%EB%A0%88%EC%9E%84_%EC%9B%8C%ED%81%AC_%EC%A0%95%EC%9D%98

web-front-end.tistory.com/63

blog.gaerae.com/2016/11/what-is-library-and-framework-and-architecture-and-platform.html

정의

서버로부터 HTML 파일을 받아 브라우저에 표현하는 과정

흐름

1) 브라우저가 서버로부터 HTML문서를 다운로드

2) 렌더링 엔진이 HTML 문서를 파싱하여 DOM 트리를 형성

3) 외부 css파일과 HTML 내 스타일 요소를 파싱하여 CSSOM 트리를 형성

* 브라우저의 자체 스타일, 사용자 정의 스타일, HTML 태그의 스타일 순서로 처리하며,

  중복 시, 나중에 처리되는 스타일을 따른다. 즉, 인라인 스타일 속성이 우선

4) DOM과 CSSOM 트리가 결합하여 렌더링 트리를 형성

* 화면에 드러나지 않는 head태그, display 속성에 none 값이 할당된 요소는 포함되지 않는다.

5) 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 레이아웃 혹은 리플로우 단계를 진행

* 각 객체의 정확한 크기, 위치를 파악하기 위해 브라우저는 렌더링 트리를 루트부터 순회

6) 렌더링 엔진은 각 요소의 배치장소와 크기에 따라 페인트 이벤트를 발생시켜

    렌더링 트리를 화면에 표현하는 페인팅 혹은 래스터화 단계를 진행

* 페이지가 한꺼번에 그려지지 않는 것은 모든 HTML을 파싱할 때까지 기다리지 않고

  배치와 그리기 과정을 진행하기 때문

출처 : velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80

별명

블랙박스 테스트, 펑션 테스트

정의

소프트웨어나 시스템의 테스트 수법 중 하나로서, 테스트 대상의 내부구조를 고려하지 않고 외부에서 본 기능이나 동작이 올바른지를 검증하는 수법의 테스트이다.

특징

- 입출력에만 착목하여 다양한 입력에 대해 상정한 대로 출력되는지 확인한다.

- 테스트 케이스의 작성에 내부의 처리흐름이나 프로그램 구조는 고려하지 않는다.

수법

단, 막무가내로 정한 입력값으로는 처리의 올바름을 확인할 수 없기 때문에 다음과 같은 수법을 사용한다.

- 사양상 같은 처리를 수행할 터인 값의 범위나 그룹을 구하여 각 범위의 대표치를 선택하여 테스트하는 「동치분할」

- 범위의 경계부근이 올바른 처리를 하는지 확인하는 「한계치분석(=경계치분석)」

출처 : e-words.jp/w/%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%86%E3%82%B9%E3%83%88.html

1. HTTP 메세지란?

Server와 Client간 데이터를 교환하는 방법

2. HTTP 메세지의 종류

- Request : Client로부터 발송되어 Server에서 동작하는 Message.

- Response : Request에 대한 Server로부터의 응답.

3. HTTP 메세지의 특징

- HTTP 메세지는 ASCII로 인코딩된 텍스트 정보로서, 여러 행으로 구성되어 있다.

- HTTP/1.1 혹은 그 이전 버전에서 HTTP 메세지는 정보를 있는 그대로 송신했다.

- HTTP/2 이후부터는 사람이 읽을 수 있던 메세지를 최적화와 성능 향상을 위해 HTTP frames로 분할하여 송신한다.

- 웹 개발자 등이 HTTP 메세지를 만들기도 하는데 설정 파일(프록시 / 서버)이나 API(브라우저) 혹은

  다른 인터페이스를 통해 제공한다.

4. HTTP 메세지의 구조

- Start-line : 실행할 요청 혹은 요청에 대한 성공, 실패 여부를 나타내며, 항상 한 줄이다.

- Headers : 요청, 응답 그 자체나 메세지 내의 본문에 대하여 설명한다.

- Blank line : 요청, 응답에 대한 모든 메타 정보가 송신되었음을 의미한다.

- Body : 요청에 관한 데이터나 응답에 관한 문서를 포함한다.

           Body의 유무나 사이즈 등 설명은 Start-line과 Headers에 있다.

5. HTTP Request

- Start line : 다음 세 가지 요소를 포함한다.

    1) HTTP Method : Server에서 수행될 동작을 동사(GET, PUT or POST)나 명사(HEAD or OPTIONS)로 설명한다.

                           예를 들어, GET은 자원을 가져오는 것, POST는 데이터를 서버에 보내는 것을 의미한다.

    2) Request Target : 요청할 대상을 URL, 절대 경로 등으로 지정하며 HTTP Methods에 따라 포맷이 다르다.

            (1) an Absolute path : 가장 일반적인 포맷으로 GET, POST, HEAD, OPTIONS 메서드와 함께 사용된다.

                 OPTIONS methods.

                   - POST / HTTP/1.1

                   - GET /background.png HTTP/1.0

                   - HEAD /test.html?query=alibaba HTTP/1.1

                   - OPTIONS /anypage.html HTTP/1.0

            (2) A Complete URL : 주로 Proxy에 연결할 때 GET 메서드와 함께 사용된다.

                 GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages

                 HTTP/1.1

            (3) The authority form

                 : HTTP 터널 기동 시, 오직 CONNECT 메서드와 사용되는 포맷으로, 도메인명과 포트번호를 포함한다.

                 CONNECT developer.mozilla.org:80 HTTP/1.1

            (4) The asterisk form : OPTION 메서드와 함께 사용되며, *는 서버 전체를 나타낸다.

                 OPTIONS * HTTP/1.1

    3) HTTP Version : 뒤에 올 메세지의 구조를 정의한다.

- Headers : 콜론( : )이 따라붙는 대소문자 구분 없는 문자열과 헤더에 따라 다른 값으로 구성된다.

               헤더는 한 줄 단위이며 꽤나 길어질 수 있고, 다음과 같은 그룹으로 나눌 수 있다.

    1) General Headers : via는 메세지 전체에 적용된다.

    2) Request Headers : User-Agent, Accept-Type와 같은 헤더는 요청을 구체화하고(Accept-Language),

                                컨텍스트를 제공하거나(Referer), 조건에 따라 제약을 가한다(If-None).

    3) Entity Headers : Content-Length와 같은 헤더는 Body에 적용되고, 요청 내에 Body가 없는 경우 전송되지 않는다.

- Body

6. HTTP Response

- Start line

- Headers

- Body

7. HTTP/2 Frames

8. 요약

9. 모르는 영단어

[명사]

Continuation : a situation in which something continues without stopping.

Alteration : a change in the appearance or form of something.

Presence : the existence of someone or something in a particular place.

Existence : the state of being a real or living thing, or of being present in a particular place, time, or situation.

Context : the general situation in which something happens, which helps to explain it.

[형용사]

Case-sensitive : a case-sensitive computer program is able to recognize the difference

                    between the large forms of letters, A, B, C etc and their and small forms, a, b, c etc

[동사]

Specify : to explain something in an exact and detailed way.

Fetch : to go and get something.

Vary : to be different in different situations.

Set up : to start something such as a business, organization, or institution.

[전치사]

Via : going through one place on the way to another place.

출처 : developer.mozilla.org/en-US/docs/Web/HTTP/Messages

목적

개발자가 생각치 못한 에러를 찾아내는 것

개요

시험할 부분, 조작법의 상정이나 개발자의 의도에 대한 고려 없이

시험 실시자가 즉흥적으로 조작하는 시험 방법이다.

명칭의 유래

원숭이에게 시켜 보면 어떨까? 라는 생각

상세

일반적으로 테스트는 대상의 설계, 구조, 용도, 조작법을 고려한 순서나 변수를 미리 정한다.

하지만, 몽키 테스트는 확신으로 인한 시험 관점의 누수를 배제하기 때문에

개발자가 생각하지 못한 에러를 발견하기도 한다.

주의점

에러가 발생했을 때 상황을 재현하기 위해 조작한 순서의 기록, 관찰을 신중히 해야 한다.

몽키 테스트 방식

- 랜덤한 조작을 연속적으로 시험하는 방식

- 시험대상 사용 경험이 없는 유저에게 설명 없이 사용하게 하는 방식

- 개발측의 사람이 통상적이지 않은 조작을 굳이 수행하는 방식 ... ex) 버튼 연타

출처 : e-words.jp/w/%E3%83%A2%E3%83%B3%E3%82%AD%E3%83%BC%E3%83%86%E3%82%B9%E3%83%88.html