data life

Fetch promise기반으로 구성 자바스크립트의 기본 기능으로 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. Ajax와 같이 비동기적 방식으로 정보를 가져올 수 있다. 그렇다면 fetch 기본 문법에 대해서 알아보도록 하자 fetch(url, option) .then(res=>res.text()) .then(text=>console.log(text)); ✔️ url : 요청할 url ✔️option - http method, headers, body 정의 - default GET 방식 http 상태는 응답 프로퍼티를 사용해서 확인이 가능하다 status : HTTP 상태 코드 ok : HTTP 상태 코드가 200~299 사이일 경우 true 반환 let response = ..

HTTP Hyper Text Transfer Protocol로 텍스트 기반의 통신 규약 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 웹에서 이루어지는 모든 데이터 교환의 기초 클라이언트-서버 프로토콜이라고도 한다. 클라이언트-서버 프로토콜 '클라이언트'는 사용자를 대신해서 동작하는 도구로 브라우저에 의해 수행되는데 이때, 브라우저는 항상 요청을 보내주는 개체로써 사용자에게 웹페이지를 표시해줍니다. 클라이언트에 의한 요청에 대한 문서를 제공해주는 '서버'가 존재하며 웹 브라우저와 서버 사이에는 여러 계층으로 이루어져있는데 그 중 애플리케이션 계층에서 동작하는 것들을 일반적으로 프록시(proxy)라고 합니다. * Https : Http를 ssl로 암호화한 것 웹 동작원리는 크게 다음과 ..

스코프(Scope) 1️⃣ 전역 스코프 vs 전역 스코프 2️⃣ 전역 객체 3️⃣ 호이스팅 4️⃣ IIFE 1️⃣ 전역 스코프 vs 전역 스코프 전역 스코프 (Global Scope) let foo = 'foo'; { console.log(foo); //foo } function func(){ console.log(foo); //foo } if (true) { console.log(foo); //foo } 어디서나 쓸 수 있지만 동작 결과는 예측하기 어렵다 즉, 전역 스코프의 큰 단점은 런타임 시점(프로그래밍 실행시점)을 알지 못한다는 것 지역 스코프 (Local Scope) - 함수 스코프 - 블록 스코프 { } var let const 전역 스코프 ⭕️ ❌ ❌ 함수 스코프 ⭕️ ⭕️ ⭕️ 블록 스코프..

setTimeout() 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행하도록 도와주는 함수입니다. - 첫번째 인자 : 실행할 코드 - 두번째 인자 : 지연 시간(ms) setTimeout(() => console.log("5초 후에 실행됨"), 5000); 예시로 5초 후에 위와 같은 문자열을 콘솔에 출력해보는 setTimeout()함수를 작성하였습니다. 추가로 setTimeout() 함수는 세번째 인자로 가변 인자를 받는데요. 첫번째 인자로 받은 실행코드 함수에 들어갈 인자를 명시해주기 위해서 사용합니다. 두 개의 수(num1, num2)를 인자로 받아 더한 값을 출력해주는 sum() 함수에 인자로 3과 4를 넘겨 5초를 기다린 후에 호출해보겠습니다. const sum(num1, num2) { c..

함수 (Function) 1️⃣ 함수 선언과 표현식 2️⃣ 인수(arguments)와 전달 방식 3️⃣ 매개변수(parameters) 4️⃣ 화살표 함수 (arrow function) 5️⃣ 내부 함수 1️⃣ 함수 선언과 표현식 ❓ 함수란? - 어떠한 기능(function)을 코드로 표현한 집합 - 독립적으로 설계되어 있다. - 반복적인 코드 작성 피할 수 있다. (코드 간결화) - 쉬운 유지보수 함수 호출 (function call) // 함수 선언 function sum(num1, num2){ return num1 + num2; } // 함수 호출 sum(1,2) 2️⃣ 인수(arguments)와 전달 방식 ❓ 인수란? - 함수 호출 시에 전달하는 값 또는 데이터 // 함수 선언 function su..

❓calc() 를 사용하는 이유? 반응형 웹을 구축하기 위해서는 고정 단위가 아닌 em, %와 같은 상대적인 단위를 이용하게 된다. 만약 전체 width 100wv에서 20px을 제외한 길이만큼 영역 지정을 하고 싶다면 이 경우 어떻게 해야할까? 고정된 영역에서 20px을 빼거나 더하는 것은 간단하지만 반응형 웹에서는 상대적인 단위를 사용하기 때문에 %, em 등의 수치에 px, pt를 계산해야만 한다. 이때 css의 calc()를 이용하면 손쉽게 계산해서 그 값을 나타내줄 수 있다. div { width: calc(100wv - 20px); } 화면을 최소화할 경우, 최소한 20px의 여분을 주어 안의 내용에 영향을 주지 않도록 도와준다. (화면 조정해서 확인해보세요!) HTML 삽입 미리보기할 수 없..

Pagination GET /posts?_page=7 GET /posts?_page=7&_limit=20 //20개씩 나뉜 데이터에서 페이지7을 가져오라는 의미 >> 만일 limit이 존재하지 않을 경우 기본값(default)는 10임 currentPage: 현재 페이지 totalCount: 총 데이터의 갯수 pageCount: 화면에 나타날 페이지 갯수 limit: 한 페이지 당 나타낼 데이터의 갯수 ✅ 총 페이지 갯수 계산하기 //총 페이지 갯수 계산하기 let totalPage = Math.ceil(totalCount / limit) 예시 > const totalCount = 53 const limit = 5 let totalPage = Math.ceil(totalCount / limit) // 1..

json-server 란? 사실 우리가 무엇인가 개발하기 위해서는 백엔드의 구현이 필요합니다. 프론트엔드 개발자들에게 있어서 직접 백엔드 기능을 구현하는 것은 상당한 시간이 걸리기 때문에 짧은 시간에 가짜 API 서버를 구축해줄 도구인 json-sever를 이용해보도록 하겠습니다. npm을 통해 설치 가능하며 이름과 같이 json 파일 하나로 연습용 서버를 쉽게 구성 할 수 있으나 실제 프로덕션에서 사용하지는 않기 때문에 이 서버를 이용해서 실제 프로젝트를 개발 하면 안된다는 점!!! 유의바랍니다. 실제 프로젝트 개발 시에는 백엔드 공부를 통해 서버를 직접 준비하거나 Firebase 를 사용해서 구현을 하도록 합시다! json-server 설치 npm install -g json-server db.jso..

TCP / IP 란? 앞서 소개한 OSI7 계층은 표준 모델로서 작용하고 현재 우리가 인터넷을 사용하기 위해 작용하는 모델은 TCP / IP 계층이다. IP 란? 지정한 IP 주소에 데이터의 조각들을 패킷(packet) 단위로 최대한 빨리 목적지로 보내는 역할 순서나 누락에 대해 신경쓰지 않음 - IPv4 : Internet Protocol version 4 : 32bit로 구성 (8bit.8bit.8bit.8bit : 0.0.0.0 ~ 255.255.255.255) - IPv6 : Internet Protocol version 6 : 128bit로 구성 TCP 란? 정확한 패킷 데이터의 전달로 보낸 순서대로 받게 해줌 도착한 조각을 확인하여 손상/누락된 데이터를 다시 요청 고유의 'SYN'와 'ACK'..

TCP (Transmission Control Protocol) - 연결형 프로토콜 - 데이터의 전송 순서 보장 - 데이터 신뢰성 보장 UDP (User Datagram Protocol) - 비연결형 프로토콜 - 신뢰성보단 빠른 전송속도 중시 - 실시간 전송 유리 : 스트리밍 / 브로드캐스팅 서비스