data life

스코프(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) - 비연결형 프로토콜 - 신뢰성보단 빠른 전송속도 중시 - 실시간 전송 유리 : 스트리밍 / 브로드캐스팅 서비스

네트워크 (network) - 네트워크 종류 - 프로토콜 - OSI7 계층 📶 네트워크 (network) 란? 쉽게 설명하자면 컴퓨터 간의 통신을 의미한다. 우리는 네트워크를 통해서 수많은 자료들을 공유하고 있는데 인터넷이나 각종 sns를 통해서 사진, 음악, 영상 등의 디지털 미디어들도 감상이 가능한 것도 네트워크 덕분이라고 볼 수 있다! 네트워크 종류 PAN (Personal Area Network) : 개인 통신망 LAN (Local Area Network) : 랜선친구의 랜으로 한 건물이나 일정 지역 내에서 파일 또는 주변장치를 공유할 수 있도록 한 통신망 MAN (Metropolitan Area Network) : 도시, 번화가, 대단위 아파트단지 등을 대상으로 구성하는 통신망 WAN (Wide..

let user = { name : "홍길동", age : 20, } let newUser = user; 위와 같이 user 이름을 가진 객체를 가져와 새로운 객체를 생성하기 위해 복사를 진행해보도록 하자. 만일, 위의 데이터 값을 변경해주면 기존의 객체는 그대로일까? newUser.age = 30; console.log(newUser.age) //30 console.log(user.age) //30 기존 객체도 새로운 객체와 동시에 변경된 것을 확인할 수 있다. 이러한 문제점이 일어난 이유에 대해 알아보도록 하겠다. 자바스크립트 변수의 개념과 마찬가지로 객체는 전체를 복사하는 것이 아니라 객체 내의 주소값만 복사하기 때문에 문제점이 발생할 수 밖에 없다. 이를 해결하기 위해 '얕은 복사' 와 '깊은 복..