data life

1. 프라이빗 클래스 필드와 메소드 - 객체 지향 프로그래밍에서 중요한 역할을 합니다. - 다른 사람이 작성한 함수를 사용할 시, 프라이빗해야 하는 문제를 해결해줍니다. class MyClass { #privateMethod() { console.log("This is a private method."); } publicMethod() { console.log("This is a public method."); this.#privateMethod(); // 클래스 내부에서만 호출 가능 } } const instance = new MyClass(); instance.publicMethod(); // "This is a public method." 출력 // 아래 코드는 문법 오류입니다. 클래스 외부에서 호..

최근 스크롤 움직임에 따라 반응하는 웹사이트들이 많아 오랜만에 자바스크립트로만 작은 프로젝트를 진행하려고 한다. 해당 라이브러리를 이용하여 쉽게 스크롤 애니메이션을 주도록 해보자! 해당 공식문서를 읽고 싶다면 아래에 ⬇️ 공식문서 : AOS.js 공식문서 1. 설치하기 yarn add aos npm install aos --save bower install aos --save해당 프로젝트는 자바스크립트로만 진행하기에 아래와 같이 설치하도록 해줌 //CSS //JS 자바스크립트로 init()을 해줘야 동작한다. 2. data-aos 사용하기 data-aos-* 속성을 사용하여 동작을 조정한다. 2-1. animation 종류 Fade animations fade fade-up fade-down fade-l..

브라우저 주소창에 www.google.com을 입력한다. 브라우저가 www.google.com의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인한다. 만약 요청한 URL(www.google.com)이 캐시에 없다면, ISP의 DNS 서버가 DNS 쿼리로 www.google.com을 호스팅하는 서버의 IP 주소를 찾는다. 브라우저가 해당 서버와 TCP 연결을 시작한다. 브라우저가 웹서버에 HTTP 요청을 보낸다. 서버가 요청을 처리하고 응답을 보낸다. 서버가 HTTP 응답을 보낸다. 브라우저가 HTML 컨텐츠를 보여준다. 1. 브라우저 주소창에 www.google.com을 입력한다. 2. 브라우저가 www.google.com의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인한다. 사실 말이 굉장히 ..

깊고 복잡한 배열 구조를 간단하게 정리하기 위해 사용하는 함수입니다. map()함수는 다들 많이 이해하고 사용하고 계시지만 ES2019에 추가된 flat()과 flatMap()에 대해 알아보도록 합시다! flat() 중첩된 배열을 정해진 깊이만큼 평탄하게 만들어 주는 함수입니다. const newArr = arr.flat([depth]) 매개변수로 어느 깊이까지 평탄하게 할 지 정할 수 있는 depth 변수가 있고 이는 선택사항입니다. 생략 시, 기본값은 1이 적용되며 만일, infinity를 사용하게 된다면 하위 배열이 없을때까지 평탄화해줍니다. const exampleArray = ["a", , ["b"], ["c"]]; const newArray = exampleArray.flat(); //newA..

프로토타입 1️⃣ 생성자 2️⃣ 프로토타입 3️⃣ 프로토타입 생성 4️⃣ 프로토타입 체인 1️⃣ 생성자 생성자란? - 객체를 생성하는 함수 - 함수명의 첫글자는 대문자 - new / this 키워드를 이용한다. 변수타입 변수명 = new 생성자함수(); 구조를 정해놓을 수 있어서 편리하며 생성자 하나로 여러 객체 생성이 가능합니다. const Info(name, age){ this.name = name; this.age = age; } var info1 = new Info("사람1", 20); var info2 = new Info("사람2", 21); var info3 = new Info("사람3", 22); 2️⃣ 프로토타입 프로토타입(prototype)이란? - 어떠한 객체가 만들어지기 위한 객체의 ..

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..