본문 바로가기
반응형

분류 전체보기

 (115)
javascript 심화 4 (콜백함수) 콜백함수 📖다른 함수가 실행이 끝난 뒤 실행되는(=callback) 함수를 말합니다! 그리고 다른 함수로 인자를 넘겨주는 함수입니다! 즉, 콜백 함수는 다른 함수에 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백함수를 위임받은 코드는 자체적으로 내부 로직에 의해 콜백 함수를 적절한 시점에 실행하게 됩니다.function func(callback) { callback();}function callback() { console.log("callback 함수입니다.");}func(callback);// 결과 : callback 함수입니다. ❗간단하게 설명하면 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 호출하는 함수! 제어권 📖1. 호출 시점콜백 함수의 제어권을 ..
Github Pages 사이트 배포하기 오늘은 Github Pages로 사이트를 배포하는 방법애 대해 소개해 보려고 합니다.우선 github에 push가 되어 있는 걸 가정하고 설명하겠습니다! 사이트 배포하기 📖1. github 이동우선 배포하고 싶은 github 레파지토리로 이동해서 Settings 버튼을 눌러 이동합니다.2. PagesSetting -> Pages 페이지로 들어와 main 브랜치와 /(root)로 설정 후 save 버튼👆을 누르면 됩니다.3. 배포 링크Save 버튼을 누르고 조금의 시간을 기다리면 내 사이트가 배포가 된 걸 확인할 수 있습니다! 😄About 설정 📖1. AboutAbout에 배포된 링크를 넣으려면 오른쪽 위 톱니바퀴 아이콘⚙️을 눌러주세요! Use Your GitHub Pages Website를 ✅체..
구글 애드센스 신청 방법! 오늘은 구글 애드센스 신청 방법과 티스토리와 연결하는 방법에 대해 소개해보려고 합니다! 구글 애드센스 신청 방법 ✨1. 시작하기아래 링크를 통해 구글 애드센스로 이동 후 시작하기 버튼을 눌러주세요!👆 https://adsense.google.com/start/ Google 애드센스 - 웹사이트에서 수익 창출하기Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다.adsense.google.com 2. 애드센스 사용 시작내 사이트 : `블로그 주소`애드센스를 최대한 활용하기 : `예`수취인 국가 / 지역 : `대한민국 / 약관 수락 버튼 클릭✅` 완료가 됐다면 애드센스 사용 시작 버..
javascript 심화 3 (this, 화살표함수, call, apply, bind) this 📖객체지향 언어에서의 this는 클래스로 생성한 인스턴스를 말합니다. 그러나 자바스크립트에서의 this는 `자신이 속한 객체` 또는 `자신이 생성할 인스턴스`를 가리키는 자기 참조 변수입니다. 즉 this를 통해 객체나 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다.  this는 언제 결정 될까?🧐this는 `함수를 호출할 때 결정`됩니다. 즉 동적으로 결정된다는 것입니다. 브라우저에서에 this는 Window객체를 의미합니다. node 환경에서의 this는 global객체를 의미합니다. 그러나 함수를 호출하는 방식에 따라 바인딩 객체가 달라집니다. 일반 함수 호출에서의 this ➡️ 전역 객체일반 함수에서의 this는 전역 객체를 의미하기 때문에, 브라우저에서는 `window`, nod..
javascript 심화 2 (호이스팅, var let const 차이점, TDZ) 호이스팅 📖  호이스팅이란? 사전에 검색해 보면 `끌어올리기`, `들어 올려 나르기`라고 나옵니다!단어 뜻처럼 스크립트 내에 변수나 함수의 선언이 스코프 최상단으로 끌어올려지는 현상을 말합니다. ❗여기서 포인트는 물리적으로 끌어 올려지는 것이 아니라 코드 전체를 스캔하고 실행 컨텍스트에 미리 기록하기 때문에 이런 현상이 발생합니다! 실행 컨텍스트가 궁금하시면❓ javascript 심화 1 (실행 컨텍스트)실행 컨텍스트 📖실행할 코드에 대한 `환경 정보`들을 모아놓은 `객체`입니다. 이렇게만 말하면 이해가 잘 안 될 것 같으니 더 자세하게 설명해 드리겠습니다. 우선 실행 컨텍스트를 이해하기mingos-habitat.tistory.com 예시코드 (매개변수, 변수)✅매개변수 및 변수는 선언부를 호이스팅 ..
javascript 심화 1 (실행 컨텍스트) 실행 컨텍스트 📖실행할 코드에 대한 `환경 정보`들을 모아놓은 `객체`입니다. 이렇게만 말하면 이해가 잘 안 될 것 같으니 더 자세하게 설명해 드리겠습니다. 우선 실행 컨텍스트를 이해하기 위해선 `콜 스택`에 대한 이해가 반드시 필요합니다! 예시코드 ✅// ---- 1번var a = 1;function outer() { function inner() { console.log(a); //undefined var a = 3; } inner(); // ---- 2번 console.log(a);}outer(); // ---- 3번console.log(a); 실행 컨텍스트의 구성 순서📃코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(o..
javascript 기본 4 (불변 객체, 얕은 복사, 깊은 복사) 불변 객체 📖불변 객체란 말 그대로 변하지 않는 객체로 객체가 생성된 후 내부 상태가 변하지 않는 객체를 의미합니다. 1. 불변 객체의 필요성예시 코드 ✅// user 객체를 생성var user = { name: 'wonjang', gender: 'male',};// 이름을 변경하는 함수, 'changeName'을 정의// 입력값 : 변경대상 user 객체, 변경하고자 하는 이름// 출력값 : 새로운 user 객체// 특징 : 객체의 프로퍼티(속성)에 접근해서 이름을 변경했네요! -> 가변var changeName = function (user, newName) { var newUser = user; newUser.name = newName; return newUser;};// 변경한 user정보를 u..
javascript 기본 3 (기본형, 참조형 데이터와 불변성) 데이터 타입 📖자바스크립트에서 값의 타입은 크게 `기본형`, `참조형`으로 구분됩니다.구분 기준은 값의 저장 방식과 불변성 여부입니다.  1. 값의 저장 방식`기본형` : 값이 담긴 주소값을 바로 복제`참조형` : 값이 담긴 주소값들로 이뤄진 묶음을 가리키는 주소값을 복제 2. 불변성 여부`기본형` : 불변성을 띔.`참조형` : 불변성을 띄지 않음. * `불변성을 띈다`라는 말을 이해하기 위해서는 메모리 관점에서 봐야 하기 때문에 잠깐 메모리와 데이터에 대한 배경지식을 알아보도록 하겠습니다! 2-1. 메모리와 데이터비트(bit) 컴퓨터가 이해할 수 있는 가장 작은 단위 ex) 0, 10과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미하고 이 조각들이 모여 메모리가 만들어집니다.바이트(byt..

티스토리툴바