REST는 “Representational State Transfer”의 약자로, 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었습니다. REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다. REST API를 작성할 때는 몇 가지 지켜야 할 규칙들이 있습니다. 로이 필딩이 논문에서 제시한 REST 방법론을 보다 더 실용적으로 적용하기 위해 레오나르드 리차드슨(Leonard Richardson)은 REST API를 잘 적용하기 위한 4단계 모델을 만들었습니다. https://blog.restcase.com/5-basic-rest-api-design-guidelines/

REST 성숙도 모델 - 0단계 0단계에서는 단순히 HTTP 프로토콜을 사용하기만 해도 됩니다. 물론 이 경우, 해당 API를 REST API라고 할 수는 없으며, 0단계는 REST API를 작성하기 위한 기본 단계입니다.

REST 성숙도 모델 - 1단계 1단계에서는 개별 리소스(Resource)와의 통신을 준수해야 합니다. REST API는 웹에서 사용되는 모든 데이터나 자원(Resource)을 HTTP URI로 표현한다고 이야기했습니다. 따라서 모든 자원은 개별 리소스에 맞는 엔드포인트(Endpoint)를 사용해야하며 요청하고 받는 자원에 대한 정보를 응답으로 전달해야 한다는 것이 1단계의 핵심입니다. 앞서 0단계에서는 요청에서의 엔드포인트로 모두 /appointment를 사용하였습니다. 하지만 1단계에서는 요청하는 리소스가 무엇인지에 따라 각기 다른 엔드포인트로 구분하여 사용합니다. 다음 예시를 보겠습니다. 예약 가능한 시간 확인이라는 요청의 응답으로 받게 되는 자원(리소스)은 허준이라는 의사의 예약 가능한 시간대입니다. 그렇기 때문에 요청 시 /doctors/허준이라는 엔드포인트를 사용한 것을 볼 수 있습니다. 그뿐만 아니라, 특정 시간에 예약하게 되면, 실제 slots라는 리소스의 123이라는 id를 가진 리소스가 변경되기 때문에, 하단의 특정 시간에 예약이라는 요청에서는 /slots/123으로 실제 변경되는 리소스를 엔드포인트로 사용하였습니다. 예시와 같이, 어떤 리소스를 변화시키는지 혹은 어떤 응답이 제공되는지에 따라 각기 다른 엔드포인트를 사용하기 때문에, 적절한 엔드포인트를 작성하는 것이 중요합니다. 엔드포인트 작성 시에는 동사, HTTP 메서드, 혹은 어떤 행위에 대한 단어 사용은 지양하고, 리소스에 집중해 명사 형태의 단어로 작성하는 것이 바람직한 방법입니다. 더불어 요청에 따른 응답으로 리소스를 전달할 때에도 사용한 리소스에 대한 정보와 함께 리소스 사용에 대한 성공/실패 여부를 반환해야 합니다. 예를 들어, 김코딩 환자가 허준 의사에게 9시에 예약을 진행하였으나 해당 시간이 마감되어 예약이 불가능하다고 가정할 때, 아래와 같이 리소스 사용에 대한 실패 여부를 포함한 응답을 받아야 합니다.

REST 성숙도 모델 - 2단계 CRUD에 맞게 적절한 HTTP 메서드를 사용하는 것에 중점을 둡니다. 앞서 0단계와 1단계 예시에서는 모든 요청을 CRUD(Create, Read, Update, Delete)와 상관없이 POST 메서드를 사용하고 있습니다. 그러나 REST 성숙도 모델 2단계에 따르면, 이는 CRUD에 따른 적합한 메서드를 사용한 것이 아닙니다. 먼저 예약 가능한 시간을 확인한다는 것은 예약 가능한 시간을 조회(READ)하는 행위를 의미하고, 특정 시간에 예약한다는 것은 해당 특정 시간에 예약을 생성(CREATE)한다는 것과 같습니다. 그렇기 때문에 조회(READ)하기 위해서는 GET 메서드를 사용하여 요청을 보내고, 이때 GET 메서드는 body를 가지지 않기 때문에 query parameter를 사용하여 필요한 리소스를 전달합니다. 또한 예약을 생성(CREATE)하기 위해서는 POST 메서드를 사용하여 요청을 보내야 하며, POST 요청에 대한 응답이 어떻게 반환되는지가 중요합니다. 이 경우 응답은 새롭게 생성된 리소스를 보내주기 때문에, 응답 코드는 201 Created 로 명확하게 작성해야 하며, 관련 리소스를 클라이언트가 Location 헤더에 작성된 URI를 통해 확인할 수 있도록 하면 완벽하게 REST 성숙도 모델의 2단계를 충족한 것이라고 볼 수 있습니다. GET 메서드 같은 경우는 서버의 데이터를 변화시키지 않는 요청에 사용 POST 메서드는 요청마다 새로운 리소스를 생성하고 PUT 메서드는 요청마다 같은 리소스를 반환합니다. 이렇게 매 요청마다 같은 리소스를 반환하는 특징을 멱등(idempotent)하다고 합니다. 그렇기 때문에 멱등성을 가지는 메서드 PUT과 그렇지 않은 메서드POST는 구분하여 사용해야 합니다. PUT 메서드와 PATCH 메서드도 구분하여 사용해야 합니다. PUT은 교체, PATCH는 수정의 용도로 사용합니다.GET 메서드 같은 경우는 서버의 데이터를 변화시키지 않는 요청에 사용해야 합니다. REST 성숙도 모델의 2단계까지 적용하면 대체적으로 잘 작성된 API 모범적인 API 디자인조차도 REST 성숙도 모델의 3단계까지 적용한 경우는 드물다. 따라서 3단계까지 무조건적으로 모두 적용해야 하는 것은 아닙니다.

REST 성숙도 모델 - 3단계 마지막 단계는 HATEOAS(Hypermedia As The Engine Of Application State)라는 약어로 표현되는 하이퍼미디어 컨트롤을 적용합니다. 3단계의 요청은 2단계와 동일하지만, 응답에는 리소스의 URI를 포함한 링크 요소를 삽입하여 작성해야 합니다. 허준이라는 의사의 예약 가능 시간을 확인한 후에는 그 시간대에 예약을 할 수 있는 링크를 삽입하거나, 특정 시간에 예약을 완료하고 나서는 그 예약을 다시 확인할 수 있도록 링크를 작성해 넣을 수도 있습니다. 이렇게 응답 내에 새로운 링크를 넣어 새로운 기능에 접근할 수 있도록 하는 것이 3단계의 핵심 포인트입니다.

Open API 정부는 Open API의 형태로 공공데이터를 제공하고 있습니다. https://www.data.go.kr/ 포털에 접속해 원하는 키워드를 검색하면, 해당 키워드와 관련된 API를 확인 글자 그대로 누구에게나 열려있는 API입니다. 그러나 "무제한으로 이용할 수 있다"라는 의미는 아닙니다. API마다 정해진 이용 수칙이 있고, 그 이용 수칙에 따라 제한사항(가격, 정보의 제한 등)이 있을 수 있습니다. https://openweathermap.org/api 제한적이나마 무료로 날씨 API를 사용할 수 있습니다. 프리 플랜에서는 기본적으로 분당 60번, 달마다 1백 번 호출이 가능합니다. 데이터를 JSON 형태로 응답합니다. API Key API를 이용하기 위해서는 API Key가 필요합니다. API key는 서버의 문을 여는 열쇠입니다. 서버를 운용하는 데에 비용이 발생하기 때문에 서버 입장에서 아무런 조건 없이 익명의 클라이언트에게 데이터를 제공할 의무는 없습니다.

Postman

HTTP API 테스트 도구(CLI) curl wuzz

HTTP API 테스트 도구(GUI) Postman Insomnia

(Client Server Architecture)

2-Tier아키택처 이렇게 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부릅니다. 리소스를 사용하는 앱이 바로 "클라이언트", 리소스를 제공(serve)하는 곳은 "서버"라고 부릅니다. 클라이언트와 서버는 요청과 응답을 주고받는 관계입니다. 클라이언트-서버 아키텍처에서는 요청이 선행되고 그 후에 응답이 옵니다.

3-Tier아키택처 일반적으로 서버는 리소스를 전달해 주는 역할만 담당합니다. 리소스를 저장하는 공간을 별도로 마련해 두는데 이 공간을 "데이터베이스"라고 부릅니다. 데이터베이스는 창고와 같은 역할을 합니다. 이처럼 기존 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처라고 부릅니다.

클라이언트 - 서버 통신과 API

프로토콜(Protocol) 프로토콜은 통신 규약, 즉 약속입니다. 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 서로 HTTP라는 프로토콜을 이용해서 서로 대화를 나눕니다. HTTP를 이용해 주고받는 메시지는 "HTTP 메시지"라고 부릅니다. OSI 7 Layers는 컴퓨터공학과 네트워크에서 자주 등장하는 개념입니다. 해당 프로토콜이 어떤 계층(layer)에 속해있는지를 표시하고 있습니다. 이 역시 참고로 알아두세요.

API 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스(interface)를 제공해 줘야 합니다. 이것을 API(Application Programming Interface)라고 합니다. Interface의 사전적 의미는 "의사소통이 가능"하도록 만들어진 "접점"을 의미합니다.즉 API를 구축해놓아야 클라이언트가 이를 활용할 수 있습니다. 보통 인터넷에 있는 데이터를 요청할 때에는 HTTP라는 프로토콜을 사용하며, 주소(URL, URI)를 통해 접근할 수 있게 됩니다. HTTP API 디자인에는 Best Practice가 존재합니다. URL 디자인은 비교적 단순하나 "메서드"라는 개념이 등장합니다. 리소스와 관련된 행동(CRUD; create/read/update/delete)을 지정할 수 있습니다.

URL과 URI

브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타냅니다. 환경에서 폴더와 파일의 위치를 찾아 이동하듯이, 슬래시(/)를 이용해 서버의 폴더에 진입하거나 파일을 요청할 수 있습니다.

URL Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냅니다. URL은 scheme, hosts, url-path로 구분할 수 있습니다. 가장 먼저 작성하는 scheme은 통신 방식(프로토콜)을 결정합니다. 일반적인 웹 브라우저에서는 http(s)를 사용합니다. hosts는 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타냅니다. url-path는 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타냅니다.

URI Uniform Resource Identifier의 줄임말로, 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, fragment를 포함합니다. query는 웹 서버에 보내는 추가적인 질문입니다. 위 그림의 http://www.google.com:80/search?q=JavaScript 를 브라우저의 검색창에 입력하면, 구글에서 JavaScript를 검색한 결과가 나타납니다. fragment는 일종의 북마크 기능을 수행하며 URL에 fragment(#)와 특정 HTML 요소의 id를 전달하면 해당 요소가 있는 곳으로 스크롤을 이동할 수 있습니다.

브라우저의 검색창을 클릭하면 나타나는 주소가 URI입니다. URI는 URL을 포함하는 상위개념입니다. 따라서, 'URL은 URI다.' 는 참이고, 'URI는 URL이다.' 는 거짓입니다. 127.0.0.1 은 로컬 PC를 나타냅니다. port는 서버로 진입할 수 있는 통로입니다.

IP와 포트

네트워크에 연결된 특정 PC의 주소를 나타내는 체계를 IP address(Internet Protocol address, IP 주소)라고 합니다.

IP Internet Protocol의 줄임말로, 인터넷상에서 사용하는 주소체계를 의미합니다. 인터넷에 연결된 모든 PC는 IP 주소체계를 따라 네 덩이의 숫자로 구분됩니다. 이렇게 네 덩이의 숫자로 구분된 IP 주소체계를 IPv4라고 합니다. IPv4는 Internet Protocol version 4의 줄임말로, IP 주소체계의 네 번째 버전을 뜻합니다. IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있습니다. 따라서 2^(32)인 약 43억 개의 IP 주소를 표현할 수 있습니다. 그중에서 몇 가지는 이미 용도가 정해져 있습니다. localhost, 127.0.0.1 : 현재 사용 중인 로컬 PC를 지칭합니다. 0.0.0.0, 255.255.255.255 : broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소입니다. 서버에서 접근 가능 IP 주소를 broadcast address 로 지정하면, 모든 기기에서 서버에 접근할 수 있습니다.

PORT 터미널에서 리액트를 실행하면 나타나는 화면에는, 로컬 PC의 IP 주소인 127.0.0.1 뒤에 :3000과 같은 숫자가 표현됩니다. 이 숫자는 IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)를 의미합니다. 리액트를 실행했을 때에는 로컬 PC의 IP 주소로 접근하여, 3000번의 통로를 통해 실행 중인 리액트를 확인할 수 있습니다. 이미 사용 중인 포트는 중복해서 사용할 수 없습니다. 만약 다른 프로그램에서 3000번 포트를 사용 중이라면, 다음과 같이 다른 포트 번호(3001)로 리액트가 실행됩니다. 포트 번호는 0~ 65535 까지 사용할 수 있습니다. 그중에서 0 ~ 1024번 까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있습니다. 반드시 알아야 할 잘 알려진 포트 번호는 다음과 같습니다. 22 : SSH 80 : HTTP 443: HTTPS 이미 정해진 포트 번호라도, 필요에 따라 자유롭게 사용할 수 있습니다. HTTP(:80), HTTPS(:443)과 같이 잘 알려진 포트의 경우, https://codestates.com:443이 아닌 https://codestates.com처럼 포트 번호를 URI에 생략할 수 있지만, 그 외의 잘 알려지지 않은 포트(3000과 같은 임시 포트)는 반드시 포트 번호를 포함해야 합니다.

도메인과 DNS

웹 브라우저를 통해 특정 사이트에 진입을 할 때, IP 주소를 대신하여 사용하는 주소가 있습니다. 만약 IP 주소가 지번 또는 도로명 주소라면, 도메인 이름은 해당 주소에 위치한 상호로 볼 수 있습니다. 도메인 이름을 이용하면, 한눈에 파악하기 힘든 IP 주소를 보다 간단하게 나타낼 수 있습니다.

DNS 네트워크 상에 존재하는 모든 PC는 IP 주소가 있습니다. 그러나 모든 IP 주소가 도메인 이름을 가지는 것은 아닙니다. 로컬 PC를 나타내는 127.0.0.1 은 localhost 로 사용할 수 있지만, 그 외의 모든 도메인 이름은 일정 기간 동안 대여하여 사용합니다. 그렇다면 이렇게 대여한 도메인 이름과 IP 주소는 어떻게 매칭하는 걸까요? 브라우저의 검색창에 도메인 이름을 입력하여 해당 사이트로 이동하기 위해서는 해당 도메인 이름과 매칭된 IP 주소를 확인하는 작업이 반드시 필요합니다. 네트워크에는 이것을 위한 서버가 별도로 있는데 이를 DNS(Domain Name System)이라고 합니다.

크롬 브라우저 에러 읽기

전체 에러 메시지 목록은 크롬 브라우저의 검색창에 chrome://network-errors/를 입력하여 확인할 수 있습니다.

HTTP

(HyperText Transfer Protocol)

HTTP Messages HTTP Messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식입니다.HTTP Messages에는 다음과 같은 두 가지 유형이 있습니다. 요청(Requests) 응답(Responses) HTTP Messages는 몇 줄의 텍스트 정보로 구성됩니다. 그러나 개발자는 이런 메시지를 직접 작성할 필요가 거의 없습니다. 구성 파일, API, 기타 인터페이스에서 HTTP Messages를 자동으로 완성합니다. start line : start line에는 요청이나 응답의 상태를 나타냅니다. 항상 첫 번째 줄에 위치합니다. 응답에서는 status line이라고 부릅니다. HTTP headers : 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다. empty line : 헤더와 본문을 구분하는 빈 줄이 있습니다. body : 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용합니다. 이 중 start line과 HTTP headers를 묶어 요청이나 응답의 헤드(head)라고 하고, payload는 body라고 이야기합니다.

Stateless 말 그대로 상태를 가지지 않는다는 뜻입니다. HTTP로 클라이언트와 서버가 통신을 주고받는 과정에서, HTTP가 클라이언트나 서버의 상태를 확인하지 않습니다. 사용자는 쇼핑몰에 로그인하거나 상품을 클릭해서 상세 화면으로 이동하고, 상품을 카트에 담거나 로그아웃할 수도 있습니다. 클라이언트에서 발생한 이런 모든 상태를 HTTP 통신이 추적하지 않습니다. 만약 쇼핑몰에서 카트에 담기 버튼을 눌렀을 때, 카트에 담긴 상품 정보(상태)를 저장해둬야 합니다. 그러나 HTTP는 통신 규약일 뿐이므로, 상태를 저장하지 않습니다. 따라서 필요에 따라 다른 방법(쿠키-세션, API 등)을 통해 상태를 확인할 수 있습니다. 지금은 Stateless(무상태성)가 HTTP의 큰 특징이라고 기억하는 것으로 충분합니다.

HTTP Requests

Start line HTTP Requests는 클라이언트가 서버에게 보내는 메시지입니다. Start line에는 세 가지 요소가 있습니다. 1- 수행할 작업(GET, PUT, POST 등)이나 방식(HEAD or OPTIONS)을 설명하는 HTTP method를 나타냅니다. 예를 들어 GET method는 리소스를 받아야 하고, POST method는 데이터를 서버로 전송합니다. 2- 요청 대상(일반적으로 URL이나 URI) 또는 프로토콜, 포트, 도메인의 절대 경로는 요청 컨텍스트에 작성됩니다. 이 요청 형식은 HTTP method 마다 다릅니다. origin 형식 : '?'와 쿼리 문자열이 붙는 절대 경로입니다. GET, POST, HEAD, OPTIONS 등의 method와 함께 사용합니다.

POST / HTTP 1.1
GET /background.png HTTP/1.0
HEAD /test.html?query=alibaba HTTP/1.1
OPTIONS /anypage.html HTTP/1.0
absolute 형식 : 완전한 URL 형식으로, 프록시에 연결하는 경우 대부분 GET method와 함께 사용합니다.
GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
authority 형식 : 도메인 이름과 포트 번호로 이루어진 URL의 일부분 입니다. HTTP 터널을 구축하는 경우, 
CONNECT와 함께 사용할 수 있습니다.
CONNECT developer.mozilla.org:80 HTTP/1.1
asterisk 형식 : OPTIONS 와 함께 별표(*) 하나로 서버 전체를 표현합니다.
OPTIONS * HTTP/1.1

3- HTTP 버전에 따라 HTTP message의 구조가 달라집니다. 따라서 start line에 HTTP 버전을 함께 입력합니다.

Headers 요청의 Headers는 기본 구조를 따릅니다. 헤더 이름(대소문자 구분이 없는 문자열), 콜론( : ), 값을 입력합니다. 값은 헤더에 따라 다릅니다. 여러 종류의 헤더가 있고, 다음과 같이 그룹을 나눌 수 있습니다. General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더입니다. Request headers : fetch를 통해 가져올 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더를 의미합니다. User-Agent, Accept-Type, Accept-Language와 같은 헤더는 요청을 보다 구체화합니다. Referer처럼 컨텍스트를 제공하거나 If-None과 같이 조건에 따라 제약을 추가할 수 있습니다. Representation headers : 이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더입니다.

Body 요청의 본문은 HTTP messages 구조의 마지막에 위치합니다. 모든 요청에 body가 필요하지는 않습니다. GET, HEAD, DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우에는 본문이 필요하지 않습니다. POST나 PUT과 같은 일부 요청은 데이터를 업데이트하기 위해 사용합니다. body는 다음과 같이 두 종류로 나눌 수 있습니다. Single-resource bodies(단일-리소스 본문) : 헤더 두 개(Content-Type과 Content-Length)로 정의된 단일 파일로 구성됩니다. Multiple-resource bodies(다중-리소스 본문) : 여러 파트로 구성된 본문에서는 각 파트마다 다른 정보를 지닙니다. 보통 HTML form과 관련이 있습니다.

HTTP Responses

Status line HTTP Responses는 서버가 클라이언트에게 보내는 메시지입니다. 응답의 첫 줄을 Status line이라고 부르며, 다음의 정보를 포함합니다. 현재 프로토콜의 버전(HTTP/1.1) 상태 코드 - 요청의 결과를 나타냅니다. (ex. 200, 302, 404 등) 상태 텍스트 - 상태 코드에 대한 설명 Status line의 한 예시로 HTTP/1.1 404 Not Found가 있습니다.

Headers 응답에 들어가는 HTTP headers는 요청 헤더와 동일한 구조를 가지고 있습니다. 대소문자 구분 없는 문자열, 콜론(:), 값을 입력합니다. 값은 헤더에 따라 다릅니다. 요청의 헤더와 마찬가지로 몇 그룹으로 나눌 수 있습니다. General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관련이 없는 헤더입니다. Response headers : 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더로, Vary, Accept-Ranges와 같이 상태 줄에 넣기에는 공간이 부족했던 추가 정보를 제공합니다. Representation headers : 이전에는 Entity headers로 불렀으며, body에 담긴 리소스의 정보(콘텐츠 길이, MIME 타입 등)를 포함하는 헤더입니다.

Body 응답의 본문은 HTTP messages 구조의 마지막에 위치합니다. 모든 응답에 body가 필요하지는 않습니다. 201, 204와 같은 상태 코드를 가지는 응답에는 본문이 필요하지 않습니다. 응답의 body는 다음과 같이 두 종류로 나눌 수 있습니다. Single-resource bodies(단일-리소스 본문) : 길이가 알려진 단일-리소스 본문은 두 개의 헤더(Content-Type, Content-Length)로 정의합니다. 길이를 모르는 단일 파일로 구성된 단일-리소스 본문은 Transfer-Encoding이 chunked 로 설정되어 있으며, 파일은 chunk로 나뉘어 인코딩되어 있습니다. Multiple-resource bodies(다중-리소스 본문) : 서로 다른 정보를 담고 있는 body입니다.

AJAX

(Asynchronous JavaScript And XMLHttpRequest) 웹페이지에서 일부분만 바꾸고 싶다면 어떻게 해야 할까요? 그럴 때 우리는 AJAX를 사용합니다. JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다.

웹페이지의 html에 의해서 유저에게 필요한 페이지가 렌더링 됩니다. 그러나 딱 한 부분만큼은 html에 작성된 대로 유저가 사용하는 것이 아니라, 유저의 요구에 따라 반응하며 변화하는 부분이 존재합니다. 그 부분이 바로 검색창입니다. 검색창에 한 글자를 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 아래 추천검색어로 보여주게 됩니다. 다시 말해, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링 되며, 여기에 AJAX가 사용됩니다. 그 외에도 우리가 사용하는 페이스북 메시지나 네이버 포털사이트의 뉴스 탭 역시 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링을 하는 것이며, 이러한 기법을 AJAX라고 합니다.

AJAX의 두 가지 핵심 기술 핵심 기술은 JavaScript와 DOM, 그리고 Fetch입니다. 전통적인 웹 애플리케이션에서는 form 태그를 이용해 서버에 데이터를 전송해야 했습니다. 또한 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공해 주어야 했습니다. 다시 말해, 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야 했습니다. 그러나 Fetch를 사용하면, 페이지를 이동하지 않아도 서버로부터 필요한 데이터를 받아올 수 있습니다. Fetch는 사용자가 현재 페이지에서 작업을 하는 동안 서버와 통신할 수 있도록 합니다. 즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용합니다. 또한 JavaScript에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있습니다.

Fetch 예제

// Fetch를 사용
fetch('http://52.78.213.9:3000/messages')
    .then (function(response) {
        return response.json();
    })
    .then(function (json) {
        ...
});

XMLHttpRequest 예제

// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');
xhr.onreadystatechange = function(){
    if(xhr.readyState !== 4) return;
    // readyState 4: 완료
    if(xhr.status === 200) {
        // status 200: 성공
        console.log(xhr.responseText); // 서버로부터 온 응답
    } else {
        console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
    }
}
xhr.send(); // 요청 전송

Fetch의 등장 이전에는 표준화된 XHR을 사용하였지만 XHR은 Cross-Site 이슈 등의 불편함이 있었고, 그에 비해 Fetch는 promise 지원 등의 장점을 가지고 있기 때문에 이제는 많은 사람들이 Fetch를 사용합니다. Fetch는 XHR의 단점을 보완한 새로운 Web API이며, XML보다 가볍고 JavaScript와 호환되는 JSON을 사용합니다.

AJAX의 장점 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있습니다. 이전에는 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링을 할 수 있었습니다. 그러나 AJAX를 사용하면 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링 할 수 있습니다. 표준화된 방법 이전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서부터 브라우저에 상관없이 AJAX를 사용할 수 있게 되었습니다. 유저 중심 애플리케이션 개발 AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있습니다. 더 작은 대역폭 대역폭: 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기 이전에는 서버로부터 완성된 HTML 파일을 받아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸습니다. 그러나 AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작습니다.

AJAX의 단점 Search Engine Optimization(SEO)에 불리 AJAX 방식의 웹 애플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려냅니다. 따라서, 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많습니다. 검색 사이트에서는 전 세계 사이트를 돌아다니며 각 사이트의 모든 정보를 긁어와 사용자에게 검색 결과로 보여줍니다. AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵습니다. 뒤로가기 버튼 문제 일반적으로 사용자는 뒤로가기 버튼을 누르면 이전 상태로 돌아갈 거라고 생각하지만, AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않습니다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 합니다.

SSR vs CSR

(Server Side Rendering)(Client Side Rendering)

SSR 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됩니다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 합니다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보냅니다. 웹 페이지를 살펴보던 사용자가, 브라우저의 다른 경로로 이동하면 어떻게 될까요? 브라우저가 다른 경로로 이동할 때마다 서버는 같은 작업을 다시 수행합니다.

CSR 일반적으로 CSR은 SSR의 반대로 여겨집니다. SSR이 서버 측에서 페이지를 렌더링한다면, CSR은 클라이언트에서 페이지를 렌더링합니다. 웹 개발에서 사용하는 대표적인 클라이언트는 웹 브라우저입니다. 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지(Single Page)를 클라이언트에 보냅니다. 이때 서버는 웹 페이지와 함께 JavaScript 파일을 보냅니다. 클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JavaScript 파일은 브라우저의 웹 페이지를 완전히 렌더링 된 페이지로 바꿉니다. 웹 페이지에 필요한 내용이 데이터베이스에 저장된 데이터인 경우에는 어떻게 해야 할까요? 브라우저는 데이터베이스에 저장된 데이터를 가져와서 웹 페이지에 렌더링을 해야 합니다. 이를 위해 Fetch와 같은 API가 사용됩니다. 마지막으로, 브라우저가 다른 경로로 이동하면 어떻게 될까요? CSR에서는 SSR과 다르게, 서버가 웹 페이지를 다시 보내지 않습니다. 브라우저는 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링합니다. 이때 보이는 웹 페이지의 파일은 맨 처음 서버로부터 전달받은 웹 페이지 파일과 동일한 파일입니다.

SSR, CSR차이점 SSR과 CSR의 주요 차이점은 페이지가 렌더링되는 위치입니다. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링합니다. CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리합니다. SSR 사용 SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용합니다. 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합합니다. 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있습니다. (네이버블로그, The NewYork Times) CSR 사용 SEO 가 우선순위가 아닌 경우, CSR을 이용할 수 있습니다. 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다. 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있습니다. (아고다)

(Object)

입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리하는 것이다. 객체는 프로퍼티의 모음이며, 프로퍼티는 이름(name 또는 key)과 값(value)의 연결로 이루어진다.

회원주소록을 만든다 가정할때

1. 모든정보에 하나하나 변수를 선언하고 할당하여 만든다. (비효율적임)
2. 배열을 사용하여 각 사용자마다 정보를 할당한다. (변수가 하나로 묶여있긴 하지만 어떤 정보를 의미하는지 파악하기 힘듬)

이럴때 객체를 사용하면 된다!

객체의 값을 사용하는 방법은 두 가지가 있다.

1. Dot notation

user.firstName; // 'Steve' user.city; // 'Seoul'

2. Bracket notaion

user['firstName']; // 'Steve' user['city']; // 'Seoul'

오늘 하루 느낀점 및 학습내용

◆ 느낀점 및 학습내용 user[firstName]; 문자열 표시를 안하면 변수로 인식된다!! 점점 이해도가 올라가는게 느껴진다. 그런데 항상 나보다 못하는 사람은 없는거 같다.... 그래도 성장한건 확실하니 기분이 좋다. 빨리 6개월이 지나갔으면 좋겠다 ㅋㅋ

◆HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">

</head>
<body>
    <div class="calculator">
      <div class="value">0</div>
   <div class="row">
     <div class="clear">C</div>
     <div class="operlater">()</div>
     <div class="operlater">%</div>
     <div class="operlater">÷</div>
   </div>
   <div class="row">
      <div class="number">7</div>
      <div class="number">8</div>
      <div class="number">9</div>
      <div class="operlater">×</div>
   </div>
   <div class="row">
      <div class="number">4</div>
      <div class="number">5</div>
      <div class="number">6</div>
      <div class="operlater">-</div>
   </div>
   <div class="row">
      <div class="number">1</div>
      <div class="number">2</div>
      <div class="number">3</div>
      <div class="operlater">+</div>
   </div>
    <div class="row">
      <div class="number">0</div>
      <div class="number">.</div>
       <div class="result">=</div>
    </div>




    </div>
</body>
</html>

◆CSS

.calculator {
    width: 285px;
    height: 500px;
    border: 5px solid rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
  }
  * {
    box-sizing: border-box;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(255, 0, 0);
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  .value {
 height: 155px;
 font-size: 40px;
 display: flex;
 justify-content: flex-end;
 align-items: flex-end;
 padding: 15px 15px 15px 15px;
 color: azure;
background-color: rgb(24, 28, 37);
border: 10px solid black;
border-radius: 20px;
font-weight: bold;
}


  .row  {
    display: flex;
    justify-content: center;
    align-items: center;
  }

 .row > div {
    height: 55px;
    width: 55px;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    display: flex;
    border-radius: 50%;
    margin: 5px;
    background-color: rgb(20, 24, 24);
    color: rgb(255, 255, 255);
    border: rgb(20, 24, 24) ;
}

.result {
    width: 120px !important;
    border-radius: 50px !important;
    background-color: rgb(55, 153, 25) !important;
}

.operlater  {
    color: rgb(36, 165, 36) !important;
    border: rgb(36, 165, 36);
}

.clear  {
    color: rgb(223, 11, 11) !important;
}

.number {
  font-weight: bold;
}

오늘 하루 느낀점 및 학습내용

◆ 느낀점 계산기를 만드는 과정에서 암기만 했던 것과 달리 각종 속성을 사용하면서 쉽게 와닿을 수 있었다. 중간엔 재밌기도 하고 시간가는 줄도 몰랐다. 역시 실습을 하면서 외우는게 최고인 것 같다. 만들 수 있을까라는 걱정과 달리 결과는 만족스러웠다. 앞으로에 비하면 아무 것도 아닌 결과물이지만 이 계기로 성취감을 맛볼 수 있었다.

◆ 학습내용 VSCODE에 필요한 각종 단축키들을 외울 수 있었다. HTML 시작할때 !만 입력해주면 기본적인 형식이 입력된다. 또 !important를 사용하면 해당 속성이 우선순위가 된다.

(Wireframe) 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다.

목업(Mock-up) 대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다. 실물 제품이 없는 무형의 웹 또는 앱은 어떻게 목업을 만들까요? 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성합니다. 예를 들어, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식입니다.

HTML 구성하기

<div id="container">
  <div class="col w10">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="col w20">
    <div class="row h40">영역1</div>
    <div class="row h40">영역2</div>
    <div class="row h20">영역3</div>
  </div>
  <div class="col w70">
    <div class="row h80">영역4</div>
    <div class="row h20">영역5</div>
  </div>
  </div>

• 참고: 클래스 이름으로 지정된 w10, w20, w70, 또는 h20, h40, h80 을 CSS로 구현하면, 다음과 같습니다.이렇게 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라고 합니다. 클래스 이름을 선언하는 방법에 대한 이야기는 CSS Architcture: Atomic CSS에서 확인할 수 있습니다.

  .w70 { width: 70%; }
  .h40 { height: 40%; }

** 레이아웃 리셋**

HTML 문서는 기본적인 스타일을 가지고 있습니다. 때때로 HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 합니다. 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, body 요소가 가진 기본 스타일에 약간의 여백이 있습니다.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}

Flexbox 개요

Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다.

display: flex 분석하기 display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법입니다. Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있습니다.

main {
  display: flex;
  border: 1px dotted red;
}

부모 요소에 적용해야하는 Flexbox 속성들

flex-direction : 정렬 축 정하기 flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.

main {
    display: flex;
    **flex-direction : row;**
}
    /* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */

flex-wrap : 줄 바꿈 설정하기 flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다.

main {
    display: flex;
    **flex-wrap : nowrap;**
}
    /* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */

justify-content : 축 수평 방향 정렬 justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다. 주요 속성값으로는 flex-start , flex-end, center, space-between, space-around 이 있습니다. 각 속성값의 특성이 잘 드러날 수 있도록 자식 요소의 크기를 동일하게 설정해놓았습니다. 각 속성값이 축 방향에 따라 요소들을 어떻게 정렬시키는지 눈으로 확인해보세요.

align-items : 축 수직 방향 정렬 align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다. 주요 속성값으로는 stretch , flex-start , flex-end , center , baseline 이 있습니다. 이번에는 각 속성값의 특징이 명확하게 드러날 수 있도록 자식 요소의 글씨 크기를 각각 다르게 설정해놓았습니다. 각 속성값이 축 방향에 따라 요소들을 어떻게 정렬시키는지 눈으로 확인해보세요.

자식 요소에 적용해야 하는 Flexbox 속성

flex 속성의 값 flex 속성에는 세 가지 값을 지정해줄 수 있습니다.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

grow(팽창 지수) : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지 shrink(수축 지수) : 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지 basis(기본 크기) : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미 자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다. 순서와 기본값은 반드시 기억해주세요. flex: grow shrink basis, flex: 0 1 auto 꼭 flex 속성 안에 세 가지 값을 한 번에 설정해줄 필요 없이, 다음과 같이 각 값을 따로 지정해줄 수 있습니다.

참고 shrink(수축 지수)는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다. 비율이 클수록 더 많이 줄어드는 것이죠. 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: grow 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장합니다. flex-shrink 속성은 width 나 이후 설명할 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다. flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다. flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됩니다. diplay 속성에 flex 가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis 로 설정된 크기가 항상 유지되는 것은 아닙니다. flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있습니다. width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다. 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다. (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고 나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 사용자 인터페이스(UI, user interface) 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다. 검색을 통해 무료로 사용할 수 있는 아이콘을 쉽게 찾을 수 있습니다. (검색어: free app icon)

id와 class의 차이점

CSS 내용 분해하기

색상 .box { color: #155724; //글자 색상 background-color: #d4edda; // 배경 색상 border-color: #c3e6cb; // 테두리 색상 }

글꼴 .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책이다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력, 순서대로 fallback이 적용된다. Google Fonts 서비스는 다양한 웹 폰트를 쉽게 사용할 수 있게 도와줍니다. HTML의 link 태그를 사용하여 간단하게 embed 할 수 있습니다. 한글 글꼴도 많이 있고, embed를 위한 코드도 제공돼, 쉽게 사용할 수 있습니다.

크기 .title { font-size: 24px; }

기타 스타일링 굵기: font-weight 밑줄, 가로줄: text-decoration 자간: letter-spacing 행간: line-height 글꼴 크기, 화면 크기등을 다룰때 단위 절대 단위: px, pt 등 상대 단위: %, em, rem, ch, vw, vh 등 사용하는 방법은 w3school이나, mdn을 통해 쉽게 확인할 수 있습니다.

픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하고 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다. 일반적인 경우 상대 단위인 rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵고 rem은 root의 글자 크기에 따라서만 상대적으로 변한다.)

화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 웹사이트의 보이는 영역을 Viewport라고 합니다. vw, vh 는 각각 viewport width와 viewport height를 뜻하며, 1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh 를 사용해 구현한 것입니다.

박스모델 기초

모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.

줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

줄 바꿈이 되는 박스는 block 박스 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스

줄 바꿈이 되는 요소: <h1>, <p>
줄 바꿈이 되지 않는 요소: <span>

MDN block 엘리먼트 목록을 통해, inline 요소의 목록은 inline 엘리먼트 목록을 통해 확인 block 박스와는 다르게 inline 박스는 width, height 속성이 적용되지 않습니다.

박스를 구성하는 요소

border (테두리) 테두리는 각 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만듭니다. border-style mdn과 같은 키워드를 구글에 검색하면, 테두리 스타일에 대한 다양한 세부 속성을 찾아볼 수 있습니다. margin (바깥 여백) 각각의 값은 top, right, bottom, left로 시계방향입니다. 값을 두 개만 넣으면 상, 하에 입력 값을 하나만 넣으면 모든 방향에 적용, 물론 특정한 방향만 적용도 가능하다. 만약 음수를 사용하면 다른 엘리먼트와 겹치게 사용가능 padding (안쪽 여백) 배경색이나 border를 적용하면, 배경색이나 border를 적용하면, 안쪽 여백을 더욱 선명하게 확인

박스를 벗어나는 콘텐츠 처리

overflow overflow 속성의 auto 값은, 콘텐츠가 넘치는 경우 스크롤을 생성하도록 한다. overflow 속성은 x축과 y축을 지정해 가로 방향으로 스크롤 하거나 세로 방향으로 스크롤 할 수 있게끔 지정할 수 있다. overflow-x 속성과 overflow-y 속성을 이용하면 두 방향을 모두 지정할 수있다. p { height: 40px; overflow: auto; }

처음 레이아웃을 디자인 할때 여백을 고려하지 않고 박스의 크기를 디자인 하는 경우가 있는데 개발과정에서 처음 생각한 레이아웃을 벗어날 수 있다. 이를 방지하기 위해서는 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가한다.

• { box-sizing: border-box; } 이렇게 모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.

기본 셀렉터

전체 셀렉터 전체 셀렉터는 문서의 모든 요소를 선택합니다.

* { }

태그 셀렉터 태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택가능

h1 { }
div { }
section, h1 { }

ID 셀렉터 ID 셀렉터는 #id로 입력하여 선택합니다.

#only { }

class 셀렉터 class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택한다.

.widget { }
.center { }

attribute 셀렉터 attribute 셀렉터는 같은 속성을 가진 요소를 선택한다.

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식 셀렉터 자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.

<header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, 
<span> 요소의 자식인 <p> 요소는 선택되지 않는다.
 header > p { } 

후손 셀렉터 후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택한다

<header> 요소의 자식인 <p> 요소를 뿐 아니라, 
<header> 요소의 자식의 자식인 있는 <p> 요소까지 모두 선택한다.
header p {}

형제 셀렉터 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다.

section ~ p { }

인접 형제 셀렉터 인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.

section + p { }

가상 클래스 셀렉터

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */ 

구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { } 

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }

오늘 하루 느낀점

느낀점 외울게 너무 많다... 그리고 또 한가지의 역경이 있었다.... 우분투가 갑자기 마우스만 움직이고 암것도 되지 않았다. 온갖 방법으로 시도해보았지만 결국 답을 찾지 못했다... 먼가 개발자 공부를 하는 과정에서 부수적인게 나를 괴롭힌다.. 결국 윈도우로 다시 깔았고 모든걸 다시 설치하느라 주말 공부도 제대로 하지 못했다. 짜증난다.. 이럴때 일수록 의지를 불태워서 그까짓거 땜에 신경쓰지말고 지금 해야 할 일을 해야지라고 되새긴다!

HTML(HyperText Markup Language)은 JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업 언어이다. Tag:부등호(<>)로 묶인 HTML의 기본 구성 요소이다. HTML은 트리구조로 이루어져 있다.

태그 내부에 내용이 없다면 (<tag></tag>와 같이 표현되는 경우) <tag/>와 같이 표현 가능

div 태그는 한 줄을 차지한다.
span 태그는 컨텐츠 크기만큼 공간을 차지한다.
이미지 삽입: <img src='링크'>
링크삽입 :<a href='링크'> 코멘트 (target ="_blank링크를 누르면 새창을 뜨게한다.)</a>
<ul>, <ol>, <li> 란?
<ul> <li>는 순서가 없는 목록이고 <ol> 순서가 있는 목록이 나타난다.

input

시맨틱 요소란?

의미를 가진 요소를 사용하는 방식을 추구하기 시작하였다. 검색 엔진이 시맨틱 요소를 더 좋아하고 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다. 또 여러개발자들과 함께 작업할때 div 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하고 데이터 유형도 예측이 쉽다.

시맨틱 요소의 종류

<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 
특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 
사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 
제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 
요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
<main> : 문서의 주된 콘텐츠를 표시합니다.

id와 class id 고유한 이름을 붙일 때(중복안됨) class 반복되는 영역을 유형별로 분류할 때(반복되는 항목에 지정하여 동일한 유형임을 확인)

오늘 하루 느낀점

느낀점Keep

그래도 오늘은 크게 어려운 것은 없었다. 어떤 기능이 있는지 외우는 것이기 때문에 실습하면서 좀 더 암기를 해야겠단 생각이 들었다. 요즘 자꾸 미루고 스스로 게으르다고 생각한다. 너무 어려우면 그렇게 되는 것 같다. 그래도 포기하지 말고 꾸준히 앞으로 가자고 되뇌인다... 홧팅!

a: 링크삽입 태그 target="_blank" 속성사용하면 새창으로 열어줌

(Iteration) 단순한 반복을 보다 효율적이고 간결하게 할 수 있도록 하는 것이 반복문이다.

for문과 while문의 차이 내가 구하고자 하는 값의 조건이 무엇인지 정확히 모를 경우, 유동적인 경우에 while문을 사용한다.

for 구문 반복할 조건을 초기화, 조건식, 증감문 순으로 넣어줍니다 let sum = 1; for(let n = 2(초기화); n <= 4(조건식); n = n + 1(증감문)) { sum = sum + n; // 반복할 내용 } console.log(sum); // 10 조건 초기화:숫자(n)는 2부터 시작한다. 조건식:숫자(n)는 4가 될때까지 반복한다. 증감문:숫자(n)는 1씩 증가한다.

while 구문 반복할 조건 중, 초기화, 증감문은 따로, 조건식만 괄호 안에 넣어줍니다 let sum = 1; let n = 2(초기화); while(n <= 4)(조건식) { sum = sum + n; n = n + 1(증감문); } console.log(sum); // 10

오늘 하루 느낀점

느낀점 역대급이다.... 매일 힘들다고 하긴 했었지만 이번만큼 어려웠던 적이 없었다. 솔직히 후반에는 문제를 거의 이해하기 보단 그냥 풀었다는 느낌이었다.. 너무 답답하다. 항상 학습난이도가 1이면 문제 난이도가 100으로 뛰는 느낌이다. 어떻게 풀라는 방법을 제시해주지 않아서 너무 짜증난다..... 비전공자에게 너무 가혹하다... 그래도 줌 라이브때 반복문에서 제일 어려웠던 4문제를 가르쳐주어 그나마 이해할 수 있었다. 그래도 다들 어렵다고 하는 분위기어서 위안이 되기도 했다.. 주말엔 시간을 내어 꼭 공부해야겠다는 생각을 하였다.

1.if(word[i] === '#')라는 조건이 찾으라는 뭔지 잘 몰랐는데 워드에 #이라는 키워드가 있는 문자열의 번호를 찾으라는 내용이었다. 2.반복문 문제에서 홀수를 리턴하는 방법중에 /,% 연산자를 사용할 수 없을때 num -2를 해서 1이 되거나 0이될때 불리언 타입을 리턴하는 방법을 사용하면 된다. 3.while문을 사용할 때 count++;이 왜 붙는지 궁금했는데 for문과 달리 밑에 증감문이 있어야 되서 그렇게 진행할 코드 밑에 증감문 count++이 붙는 것이었다. 4.result라는 변수를 지정할때 어떨 때는 1,0,'' 이 지정되는 것인지 몰랐는데 문자열이면 '' 횟수면 0 , 곱하는 것이면 1이 들어가는 것 같았다. 주말에 다시 공부해보자 5.if (parseInt(str[i]) > maxNum) 문자열을 숫자로 바꿔주는 함수에 들어있는 i가 maxnum이랑 반복하면서 if가 true가 되면 가장 큰수가 되는 것이다. 6.이중반복문 후반의 멘탈을 터트린 놈이다... 내가 배운바론 1-5를 반복하는 for문 5-9를 반복하는 for문이 있으면 1-5,1-6,1-7... 2-5,2-6,2-7...이런 식으로 진행되는 것이다. 애도 주말에 다시 공부 완전히 이해된 상태는 아니다.. 7. let을 선언하고 할당하고 나중에 또 할당하던데 할 수 있는건 알겠는데 어떻게 사용되는지는 잘 모르겠다. 8.'fflfloflowfloweflower' 플라워를 이렇게 만들라고 했을때 이중반복문을 사용하는데 1번째 반복문으로 몇번을 반복할껀지 반복횟수를 만들고 2번째 반복문으로 1번째 반복횟수만큼 글자를 붙힌다. for (let i = 0; i < str.length; i++) { for (let j = 0; j <= i; j += 1) { result = result + str[j];

더알아보기

메소드의 개념에 대해 알아보기 Math(arr) 나 Array.IsArray(arr)는 대문자로 시작하는 이유 알아보기 arr.length는 arr의 메서드를 불러내고 저건 앞에 메서드가 시작되서 그런듯? 반복문에서 break문 알아보기

(Conditional) 조건문은 어떠한 조건을 판별하는 기준을 만드는 것이다. 조건문에는 반드시 비교 연산자(comparison operator) 필요하다.

비교연산자 2 > 4 ; // false 8 < 10 ; // true 'hello' === 'world'; //false 비교의 결과는 늘 Boolean, 즉 true 혹은 false이다.

if ~ else if 조건문 if (조건1) { // 조건1이 통과할 경우 } else if (조건2) { // 조건 1이 통과하지 않고 // 조건 2가 통과할 경우 } else { // 모든 조건이 통과하지 않는 경우 [조건에는 Boolean 으로 결과가 나오는 비교구문이 들어간다] }

두가지 조건이 한번에 적용되는 경우? 논리연산자(Logical Operator)를 사용 논리1 && 논리2 ; (and) 논리1 || 논리2 ; (or) !논리1; (NOT연산자) 논리연산자의 결과에 Boolean이 아닌 값이 들어갈 수 있다.

알아두면 좋을 점

OR연산자는 truthy한 값을 만나면, 그 값을 출력한다. undefined || 10 // 10 5 || 10 // 5 5 || console.log('실행되지 않음') // 5 둘다 falsy할 경우, 뒤에 있는 값을 출력한다. undefined || false // false

AND연산자는 falsy한 값을 만나면, 그 값을 출력한다. undefined && 10 // undefined 5 && false // false 둘다 truthy할 경우, 뒤에 있는 값을 출력한다. 5 && 10 // 10

문자열이란?

(string) 일상생활에서 확인할 수 있는, 모든 글자의 나열을 문자열이라고 한다. 코드 자체도 결국 문자로 이루어져 있기 때문에 컴퓨터는 코드와 문자열을 구분하기 위해 작은따옴표(')나 큰따옴표(")를 사용하여 문자열을 구분한다.

** str[index]** let str = 'Leejinseo'; console.log(str[0]); // 'L' index로 접근은 가능하지만 값을 바꿀 수는 없다. 읽기만 가능

+연산자를 쓸 수 있음 string 타입과 다른 타입 사이에 + 연산자를 쓰면, string 형식으로 변환 -연산자는 안됨, 문자열과 숫자를 합치면 문자열 형태로 변환 let str1 = 'Lee'; let str2 = 'jinseo'; let str3 = '1'; console.log(str1 + str2) ; // 'Leejinseo' console.log(str3 + 8); // '18'

length PROPERTY 문자열의 전체 길이를 반환한다. let str = 'Leejinseo'; console.log(str.length) ; // 9

str.indexOf (searchValue) arguments: 찾고자하는 문자열 return value: 처음으로 일치하는 index, 찾고자 하는 문자열 없으면 -1 lastrindexOf는 문자열 뒤에서 부터 찾음 'Leejinseo'.indexOf('Lee'); // 0 'Leejinseo'.indexOf('lee'); // -1 (소문자 구분함) 'canal'.lastrindexOf('a'); // 3 can a l (0부터 시작) --------------------------------------012 3

str.split(seperator) arguments: 분리기준이 되는 문자열 return value: 분리된 문자열이 포함된 배열 let str 'hello my name is jinseo'; console.log(str.split(' ')); // ['hello', 'my', 'name', 'is', 'jinseo']

str.substring(start, end) arguments: 시작index, 끝index return value: 시작과 끝 index사이의 문자열
[str.slice(start, end) substring과 비슷하지만 몇가지 차이가 있다.] let str = 'abcdefghij'; console.log(str.substring(0, 3)); // 'abc' (0,1,2만 가져옴) console.log(str.substring(3, 0)); // 'abc' (순서바뀌어도 상관없음) console.log(str.substring(-1, 4)); // 'abcd' (음수는 0으로 취급)

toUpperCase()/toLowerCase() arguments: 없음 return value: 대,소문자로 변환된 문자열 console.log('abcde'.toUpperCase()); // ABCDE console.log('ABCDE'.toLowerCase()); // abcde

알아두면 좋을점

모든 string method는 immutable 즉, 원본이 변하지 않는다. array method는 immutable 및 mutable여부를 잘 기억해야 한다.

오늘 하루 느낀점

느낀점 하루가 다르게 배울게 더 많아진다. 모르는 것이 너무 많다...ㅠㅠ 그래도 이렇게 정리하다보면 어느순간 아는게 더 많아질 거라고 확신한다.

용기는 항상 크게 울부짖는 것이 아니다. 용기는 하루의 마지막 "내일 다시 해보자" 라고 말하는 작은 목소리일 때도 있다. -메리 앤 라드마커 멘탈이 나가도 내일 다시 해보자! 수고했다 오늘도!

1. 백틱이라고 탬플릿 문자열(template literal) 이란 ES6에서 새롭게 추가된 문자열 선언방식 문장을 이어서 출력할 때, 백틱 과 ${변수이름} 를 사용한 경우
2. split을 사용할때 줄바꿈을 하려면 ('\n')하면 된다.
3. math는 수학을 전문적으로 다루는 함수의 객체이다. 이를 통해 오늘 abs,floor,max,min,pow등 다양하게 사용했다. 시간이 날때 공부해서 확실하게 이해해야겠다.
4. parseInt 문자열을 숫자로 바꿔주는 함수이다.
5. includes 메서드는 특정값이 있는경우 true를 반환 없으면 false를 반환해준다.

더 알아보기

PROPERTY 프로퍼티의 개념이 먼지 제대로 알아보기 Immutable과 Mutable의 차이 알아보기 slice와 substring의 차이점 알아보기

(variable) 데이터를 편하게 다루기 위해 데이터에 이름을 붙이는 데 그 이름을 바로 변수라고 한다. age라는 변수에 숫자값 25를 할당하려고 한다. 변수의 선언: let age / 변수의 할당 age = 25 가 된다. 쉼표를 이용하여 키워드를 한번만 사용하여 변수선언과 값 할당을 할 수 있다. ex) let age = 100 , name = 'jin'

변수는 동일한 변수를 이용해 대입할 수 있다. let sum = 1; sum = sum + 2; sum = sum + 3; sum = sum + 4; 수학에서 =기호는 '같다'라는 의미로 사용하지만, 자바스크립트에서는 변수에 할당하기 위해 사용한다. console.log(sum) 값은 '10'이 된다. 또, 한번 선언했던 변수를 다시 사용할 때는 let를 쓰지 않는다

타입이란?

(type) 변수에 담을 수 있는 데이터는 숫자, 문자와 같은 특정한 형태를 가지고 있는데 이를 타입이라고 한다. 타입의 종류에는 number, string, boolean, undefined, null, symbol, object 가있다. 함수도 타입이다.

1. number type javascript에서는 숫자는 정수, 소수, 실수, n진법 구분없이 number type이다.

2. string type 문자열은 ''(작은 따옴표), ""(큰따옴표),(백틱)으로 감싼 값입니다. 꼭 문자열만 넣을 수 있는 것은 아니다.

3. boolean type true와 false값만 존재한다.

4. undefined type undefined타입인 값은 undefined가 유일하고 아무것도 할당하지 않은 변수는 undefined가 할당된다.(초기화)

5. null type null타입인 값은 null이 유일하고 undefined와 달리 null은 변수의 값이 없다는 것을 의도적으로 명시할 때 사용한다. 비어있는 상태로 둘때 사용한다.

typeof 연산자 사용법으로 실습해보기 typeof 값; console.log(typeof 1) // ----- (number) console.log(typeof '1') // ----- (string) console.log(typeof (1 < 2)) // ----- (boolean) 값이 출력되는 것을 확인할 수 있다.

함수란?

(function) 논리적인 일련의 작업을 하는 하나의 단위를 함수라고 한다. 함수는 반복적인 기능을 저장해 두었다가 필요할 때마다 호출하여 사용할 수 있으므로, 일종의 즐겨찾기 기능이라고 할 수 있다. 그리고 반드시 돌아오는 특성이 있다.(return) 또한 구체적인 입력값과 출력값이 존재한다.

함수를 이용하여 구구단 출력하기

mulTablePrinter라는 이름의 함수가 선언이 된다. 선언이 된다는 것은 특별한 저장소에 함수 내부의 코드가 저장된다는 것을 의미한다. mulTablePrinter 함수는 num이라는 변수를 매개변수로 받아서, num에 1에서 9까지의 숫자를 곱한 값을 각각 출력한다.

함수를 만드는데에 3가지 방법이 있다. 변수명엔 공백을 사용할 수 없어서 보통 단어의 첫 글자를 대문자로 써 붙인다. 낙타 등 모양처럼 생겨 Camel case라고 부름 **

1.함수선언식 function getRectangleArea (width, height) { let rectangleArea = width * height return rectangleArea }

2. 함수표현식 let getRectangleArea = function (width, height) { let rectangleArea = width * height return rectangleArea } 함수표현식에는 변수를 선언하고 익명함수를 할당하는 방법을 사용한다.

3.화살표함수 let getRectangleArea = (width, height) => { let rectangleArea = width * height return rectangleArea } 화살표함수는 변수를 선언하고 function 대신 => 기호를 할당하여 사용한다. 만약 함수의 본문(body)에 return 문만 있는 경우, return과 {}중괄호를 생략할 수 있다. ()소괄호는 사용가능하다. ex) let getRectangleArea = (width, height) => rectangleArea = width * height

오늘 하루 느낀점

수업을 처음하면서 느낀 점은 "아무도 떠먹여주지 않는구나" 였다. 배울때도 옆에서 선생님이 가르쳐주는 것이 아닌 스스로 학습플랫폼을 보면서 독학을 하고 오후에는 페어분과 함꼐 코플릿 연습문제를 풀며 공부하는 방식이었다. 그렇기 때문에 처음에는 무슨 말인지도 이해하기 어려웠다. 변수와 타입부분 학습영상을 반복학습하면서 이해했고 실습을 하면서 조금씩 익혀하기 시작했다.

하지만 함수 부분에서 난이도가 갑자기 올라가더니 이해하기 힘들었다. 페어프로그램을 하면서 파트너에게 궁금한 점이 있으면 물어보면서 코플릿 연습문제를 풀 수 있었다. 주말동안 블로그를 작성하면서 모르는 것을 다시 한번 배울 수 있었다. 앞으로는 좀 더 능동적으로 찾고 남들보다 열심히 해서 따라가야겠다는 생각을 절실히 한 하루였다....

더 알아보기

console.log가 뭐하는 앤지,,, 함수선언식 vs 함수표현식 vs 화살표함수 차이점

오티날 사람들과 대화하니 다들 공부를 어느정도 하고 온 것 같다. 그리고 성격은 왜 이렇게 쾌활한지 주눅이 들었다. 그래도 비교하지말고 나만의 길을 걸어갈 것이다. 매순간의 최선을 다하고 6개월이 끝난 뒤의 나의 모습이 궁금하기도 하다. 내일부터 시작이다. 홧팅!