전체 글 13

{ 모든 개발자를 위한 HTTP 웹 기본 지식 } #7 - HTTP 헤더 (일반 헤더)

1. HTTP 헤더 개요 HTTP 헤더 header-field = field-name ":" OWS field-values OWS HTTP 전송에 필요한 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 등 모든 부가 정보를 헤더에 넣는다. 표준 헤더가 굉장히 많다. * 필요시 임의의 헤더 추가가 가능하다. HTTP 헤더 - RFC2616 헤더 분류 General 헤더 : 요청 메시지든 응답 메시시든 구분없이 메시지 전체에 적용되는 정보이다. Connection: close Request 헤더 : 요청 정보 User-Agent: Mozilla/5.0 (Macintosh;..) Reponse 헤더 : 응답 정보 Server: Apache Entity 헤더 :..

BackEnd/HTTP 2022.03.21

{ 모든 개발자를 위한 HTTP 웹 기본 지식 } #6 - HTTP 상태코드

* 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식을 수강하면서 정리한 내용입니다. 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com 1. HTTP 상태코드 소개 상태코드 1xx (Informational) : 요청이 수신되어 처리중 ➡️ 거의 사용이 되지 않음 2xx (Successful) : 요청 정상 처리 3xx (Redirection) : 요청을 완료하려면 추가 행동이 필요 4xx (Client Error) : 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 5xx (Server Error) : 서버 오류, 서버가..

BackEnd/HTTP 2022.03.01

{ 모든 개발자를 위한 HTTP 웹 기본 지식 } #5 - HTTP 메서드 활용

* 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식을 수강하면서 정리한 내용입니다. 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com 1. 클라이언트에서 서버로 데이터 전송 쿼리 파라미터를 통한 데이터 전송 주로 GET 방식으로 많이 사용하고 검색어로 검색할 때, 게시판 리스트에 정렬 조건을 넣을 때 쿼리 파라미터를 이용해서 많이 사용한다. 메시지 바디를 통한 데이터 전송 클라이언트에서 서버로 전송할 때 HTTP 메시지 바디를 통해서 데이터를 전송한다. POST, PUT, PATCH 방식으로 주로 사용한다. 회원가입을 하려면 클라이언트에서..

BackEnd/HTTP 2022.02.28

{ 모든 개발자를 위한 HTTP 웹 기본 지식 } #4 - HTTP 메서드

* 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식을 수강하면서 정리한 내용입니다. 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com 1. HTTP API를 만들어보자 요구사항 및 API URI 설계 회원 정보 관리 API 설계 1. 회원 목록 조회 : /read-member-list 2. 회원 조회 : /read-member-by-id 3. 회원 등록 : /create-member 4. 회원 수정 : /update-member 5. 회원 삭제 : /delete-member 요구사항 기반으로 API를 만들게 되는게 위와 같이 현업에서 잘못..

BackEnd/HTTP 2022.02.27

{ 모든 개발자를 위한 HTTP 웹 기본 지식 } #3 - HTTP 기본

* 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식을 수강하면서 정리한 내용입니다. 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com 1. 모든 것이 HTTP HTTP(HyperText Transfer Protocol) 문서 간의 링크를 통해서 하이퍼텍스트 문서를 통해서 연결하는 프로토콜이다. HTTP 프토토콜에 HTML, TEXT, IMAGE, 음성, 영상, 파일, JSON, XML (API) 등 모든 형태의 데이터를 담아서 전송이 가능하다. 심지어 서버간에 데이터를 주고 받을 때도 사용한다. HTTP 역사 1. HTTP/0.9 (199..

BackEnd/HTTP 2022.02.26

{ 모든 개발자를 위한 HTTP 웹 기본 지식 } #2 - URI와 웹 브라우저 요청 흐름

* 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식을 수강하면서 정리한 내용입니다. 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com 1. URI URI? URL? URN? URI는 로케이터(Locator), 이름(Name) 또는 둘다 추가로 분류될 수 있다. URI (Uniform Resource Identifier) Uniform : 리소스 식별하는 통일된 방식이다. Resource : URI로 식별할 수 있는 모든 걸 자원이라고 한다. 웹 브라우저에 있는 HTML의 파일 것만 자원을 뜻하는 게 아니라 실시간 교통 정보 등등 이런것도 ..

BackEnd/HTTP 2022.02.26

{ 모든 개발자를 위한 HTTP 웹 기본 지식 } #1 - 인터넷 네트워크

* 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식을 수강하면서 정리한 내용입니다. 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com 1. 인터넷 통신 인터넷망에서 컴퓨터들은 어떻게 통신할까? 예를 들어서 클라이언트 옆에 서버가 있으면 간단하게 케이블을 연결해서 'Hello, world!'라는 메시지를 보내면 통신이 된다. 그런데 클라이언트와 서버 사이에 인터넷망이라는 중간에 있으면 어떻게 될까? 클라이언트가 한국에 있고 서버가 미국에 있다면 한국에 있는 클라이언트가 'Hello, world'라는 메시지를 보내야 하는데 중간에 해저광 케이..

BackEnd/HTTP 2022.02.26

{ 김버그의 HTML는 재밌다 } # 4 - section, article, nav, aside, header, footer

Twitter Markup Challenge 1. 구조적인 웹 문서 설계 웹 문서를 설계한다는 거는 글의 구조를 쉽게 파악하는 것이다. 글의 전개 흐름을 파악하고 정보의 위계질서를 파악할 수 있다. 이럴 땐 사용하는 거는 Sectioning Elements이다. ``, ``, ``, `` , ``, ``, ``로 구성되어 있다. 상황에 맞는 적절한 Sectioning Elements를 올바르게 사용하는 방법으로 구조적으로 아름답게 웹 문서 설계를 작성해야 한다. - 검색 최적화에 도움이 된다. 2. 올바른 Sectioning Element 공통적으로 지켜야할 룰 섹션의 제목 ... 메뉴 링크 `Sectioning Element` 내에는 반드시 ``를 작성해야 한다. 눈에 보이지 않아도 제목을 반드시 명시..

FrontEnd/HTML 2022.01.06

{ 김버그의 HTML는 재밌다 } #3 - html, head, body, title, link, style, script, meta

1. DOCTYPE & Document Structure 🎈 HTML문서를 작성할 때 가장 먼저 해줘야 하는 것이 ``을 선언 해줘야 한다. HTML5 표준에 맞게 작성된 문서라는 거를 브라우저에게 선언하는 것이다. 🎈 ``에는 ` 웹 문서에 관한 중요하지만 보이지 않은 메타 데이터를 선언할 때 사용하는 태그이다. 문서가 어떻게 작성해야 하고 문서가 참조하고 있는 다른 문서는 어떤 것인지 등등 눈에 보이지 않는 정보들을 담아두는 것이다. 🎈 웹 문서에게 보여주게 될 문서의 모든 콘텐츠를 담아내는 태그이다. 2. Title, Link, Style & Script 🎈 HTML의 대제목 역할을 하는 태그이다. 검색 최적화에 굉장히 큰 역할을 한다. 👉🏻 title를 잘 쓰는 방법 - 키워드를 단순히 나열하는 ..

FrontEnd/HTML 2022.01.06

{ UI GUI 디자인 } #2 - 그리드시스템

1. 그리드시스템, 왜 사용하는 걸까? 그리드 시스템은 격자를 의미한다. 디자인의 요소끼리 간격이나 여백을 쉽게 배치하는 용도이다. 격자가 없으면 디자인의 요소끼리 배치하는게 어렵다. 디자인을 구성하는 요소를 간단히 도식화 하면 큰 박스로 표현하는 것이 Column이라고 한다. 디자인을 하는 모든 요소들이 그리드 안에서 Column들이 이루어진다. 처음 시작하는 디자이너들이 오류를 범하는 것 중에 하나가 디자인적인 요소들이 모두 다 그리드에 맞춘다고 생각한다. 그리고 Navigation Bar 안에서는 로고, 메뉴들이 배치 되어 있는데 이런 것들이 어떻게 그리드에 맞춰야 되는지 질문이 많다. Navigation Bar 같은 경우는 한 개의 column으로 표기를 하고 column 안에 로고와 메뉴들은 각..