전체 글
[HTTP] 🌐HTTP 메서드
[HTTP] 🌐HTTP 메서드
2022.04.12인프런의 모든 개발자를 위한 HTTP 웹 기본 지식을 듣고 정리한 내용입니다. 🪧HTTP API를 만들어보자 요구사항 (회원 정보 관리 API) 회원 목록 조회 회원 조회 회원 등록 회원 수정 회원 삭제 ⇒ 위의 요구사항을 바탕으로 API를 만드려면 어떻게 해야할까❔ API URI 설계 회원 목록 조회 /read-member-list 회원 조회 /read-member-by-id 회원 등록 /create-list 회원 수정 /update-list 회원 삭제 /delete-list ⇒ 단순하게 이와 같은 설계를 할 수 있다. 하지만 위의 설계는 좋은 URI 설계가 아니다. URI 설계에서 가장 중요한 것은 리소스의 식별 이다. 여기서 리소스란 무엇을 의미할까❔ 리소스의 의미 회원을 등록 하고 수정 하고 조회..
[HTTP] 🌐HTTP 기본
[HTTP] 🌐HTTP 기본
2022.04.06인프런의 모든 개발자를 위한 HTTP 웹 기본 지식을 듣고 정리한 내용입니다. 💎HTTP(HyperText Transfer Protol) 처음에는 문서간 링크를 통해 연결할 수 있는 프로토콜로 사용했으나, 현재는 HTTP 메시지에 모든 것을 전송한다. HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML (API) 거의 모든 형태의 데이터를 전송 가능하다. 서버간에 데이터를 주고 받을 때도 대부분 HTTP를 사용한다. 📜HTTP 역사 HTTP/0.9(1991): GET 메서드만 지원, HTTP 헤더❌ HTTP/1.0(1996): 메서드, 헤더 추가 HTTP/1.1(1997): 가장 많이 사용, 가장 핵심인 버전 RFC2068(1997) → RFC2616(1999) → RFC7230~723..
[HTTP] 🌐URI와 웹 브라우저 요청 흐름
[HTTP] 🌐URI와 웹 브라우저 요청 흐름
2022.04.04인프런의 모든 개발자를 위한 HTTP 웹 기본 지식을 듣고 정리한 내용입니다. 📌URI(Uniform Resource Identifier) Uniform: 리소스를 식별하는 통일된 방식 Resource: 자원, URI로 식별할 수 있는 모든 것(제한 없음) Identifier: 다른 항목과 구분하는데 필요한 정보 URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다. URI는 리소스를 식별하는 방법 이다.(사람을 주민번호를 통해 식별이 가능한 것과 같다.) URI는 URL(Uniform Resource Locator), URN(Uniform Resource Name)의 개념을 포함한다. URL은 리소스의 위치 를 특정하고, URN은 리소스의 이름 을 특정한다. 위치는 변..
[HTTP] 🌐인터넷 네트워크
[HTTP] 🌐인터넷 네트워크
2022.04.01인프런의 모든 개발자를 위한 HTTP 웹 기본 지식을 듣고 정리한 내용입니다. 🤔인터넷에서 컴퓨터는 어떻게 통신할까? 만약 클라이언트와 서버가 물리적으로 연결되어 있다면 케이블을 이용해서 서로 통신할 수 있다. 그렇지 않고 인터넷을 이용한다면 수많은 중간 노드(서버)를 거쳐서 통신해야 한다. 이 때 보내려는 메시지가 어떠한 규칙으로 어떻게 넘어갈 수 있을지 알기 위해서 IP(인터넷 프로토콜)을 이해해야 한다. 📍IP(인터넷 프로토콜) 복잡한 인터넷망을 통해서 컴퓨터끼리 통신하기 위해서는 최소한의 규칙이 있어야 한다. 먼저, IP 주소를 부여한다. 메시지를 보내는 클라이언트에 IP 주소를 부여하고 받는 서버도 마찬가지로 IP 주소가 있어야 한다. IP의 역할 지정한 IP 주소(IP Address)에 데이터..
[JS] 🗓️JavaScript 30 - Day 12
[JS] 🗓️JavaScript 30 - Day 12
2021.11.29📖Day 12 - Key Sequence Detection (KONAMI CODE) JavaScript 30의 Day 12 프로젝트는 지정해놓은 코나미 커맨드(치트코드의 일종이라고 한다.)를 입력하면 화면에 랜덤한 유니콘 이미지를 보여주는 프로젝트이다. 🤓📄코드 모아보기 HTML CSS body { margin: 0; padding: 0; width: 100vw; height: 100vh; background: linear-gradient( 135deg, #f0e9d2 0%, #e6ddc4 20%, #678983 60%, #181d31 100% ); background-size: cover; display: flex; justify-content: center; align-items: center; } ..
[JS] 🗓️JavaScript 30 - Day 11
[JS] 🗓️JavaScript 30 - Day 11
2021.11.28📖Day 11 - Custom HTML5 Video Player JavaScript 30의 Day 11 프로젝트는 HTML, CSS, JavaScript만을 이용해서 나만의 비디오 플레이어를 만들어보는 프로젝트이다. 🤓📄코드 모아보기 HTML ► 🔊 « 10s 10s » 🔳 CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; display: flex; background: #7a419b; min-height: 100vh; background: linear-gradient(135deg, #7c1599 0%, #921099 48%, #7e4ae8 100%); ..
[JS] 🗓️JavaScript 30 - Day 10
[JS] 🗓️JavaScript 30 - Day 10
2021.11.26📖Day 10 - Hold Shift to Check Multiple Checkboxes JavaScript 30의 Day 10 프로젝트는 여러 개의 체크박스 중에서 shift키를 누른 상태로 체크한 박스와 기존의 체크 되어있던 박스 사이의 체크박스들이 모두 체크되어지는 기능을 구현하는 프로젝트이다. 🤓📄코드 모아보기 HTML This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything in between should also be set to checked Try to do it without any libraries Just regular JavaScript Good Luck! Don'..
[JS] 🗓️JavaScript 30 - Day 9
[JS] 🗓️JavaScript 30 - Day 9
2021.11.23📖Day 9 - 14 Must Know Dev Tools Tricks JavaScript 30의 Day 9 프로젝트는 개발자 도구의 다양한 기능들을 알아보는 프로젝트이다. 🤓📄코드 모아보기 HTML ×BREAK×DOWN× JavaScript const dogs = [ { name: "Snickers", age: 2 }, { name: "hugo", age: 8 }, ]; function makeGreen() { const p = document.querySelector("p"); p.style.color = "#BADA55"; p.style.fontSize = "50px"; } // Regular console.log("Hello"); // Interpolated console.log("Hello I a..
[JS] 🗓️JavaScript 30 - Day 8
[JS] 🗓️JavaScript 30 - Day 8
2021.11.22📖Day 8 - Fun with HTML5 Canvas JavaScript 30의 Day 8 프로젝트는 HTML의 canvas element와 다양한 메서드를 사용하여 낙서해보는 프로젝트이다. 🤓📄코드 모아보기 HTML 🖌️ ARTIST MODE CSS html, body { margin: 0; height: 100vh; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient( 270deg, #f0e9d2 0%, #e6ddc4 33%, #678983 66%, #181d31 100% ); } #draw { background-color: whit..
[JS] 🗓️JavaScript 30 - Day 7
[JS] 🗓️JavaScript 30 - Day 7
2021.11.21📖Day 7 - Array Cardio Day 2 JavaScript 30의 Day 7 프로젝트는 Day 4와 마찬가지로 무언갈 만드는게 아닌 JavaScript의 Array에 대해서 더 알아보는 프로젝트이다. 저번에 배운 것과 다른 method들을 공부해보자. 🤓📄코드 모아보기 HTML Psst: have a look at the JavaScript Console 💁 JavaScript // ## Array Cardio Day 2 const people = [ { name: "Wes", year: 1988 }, { name: "Kait", year: 1986 }, { name: "Irv", year: 1970 }, { name: "Lux", year: 2015 }, ]; const comments = ..
[JS] 🗓️JavaScript 30 - Day 6
[JS] 🗓️JavaScript 30 - Day 6
2021.11.19📖Day 6 - Ajax Type Ahead JavaScript 30의 Day 6 프로젝트는 Fetch API와 정규표현식을 이용해 검색창에 문자를 입력하면 해당 문자가 포함된 도시를 나열하는 프로젝트이다. 🤓📄코드 모아보기 HTML Filter for a city or a state CSS html { box-sizing: border-box; background: linear-gradient( 90deg, #98ddca 0%, #d5ecc2 33%, #ffd3b4 66%, #ffaaa7 100% ); font-family: "helvetica neue"; font-size: 20px; font-weight: 200; } *, *:before, *:after { box-sizing: inherit; }..
[JS] 🗓️JavaScript 30 - Day 5
[JS] 🗓️JavaScript 30 - Day 5
2021.11.18📖Day 5 - Flex Panels Image Gallery JavaScript 30의 Day 5 프로젝트는 Flexbox를 이용해 Image Gallery를 만드는 프로젝트이다. 🤓📄코드 모아보기 HTML Your time is limited, so don't waste it living someone else's life. Just Steve Jobs Action is the foundational key to all success. Do Pablo Picasso Anyone who has never made a mistake has never tried anything new. It Albert Einstein The way get started is to quit talking a..