본문 바로가기
반응형

공부

 (106)
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..
[node.js] nodemon 설치 및 실행 방법 nodemon 이란? 📖`nodemon`은 디렉터리에서 파일 변경이 감지되면 노드 애플리케이션을 자동으로 다시 시작하여 Node.js 기반 애플리케이션을 개발하는 데 도움이 되는 도구입니다. 설치 방법 📖1. terminal에서 npm install --save-dev nodemon 입력`bash`, `terminal`에 아래 명령어를 입력하고 엔터를 눌러주세요!npm install --save-dev nodemon  2. -dev 옵션`dev` 옵션은 프로그램 실행과 관계없이 개발을 위해 필요한 의존성 모듈입니다. 그래서 `dev` 옵션을 붙이게 되면 `devDependencies`에 설치되는 것을 확인하실 수 있습니다! 실행 방법 📖1. 속성 추가`package.json` 파일에 들어가 아래 속..
Javascript 기본 2 (조건문, 반복문, 배열, 객체) 조건문 📖1. if문let x = 10;if (x > 0) { console.log("x는 양수입니다.");} if문은 조건이 참인 경우에만 코드를 실행합니다. 2. if-else문let x = -10;if (x > 0) { console.log("x는 양수입니다.");} else { console.log("x는 음수입니다.");} if-else문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행합니다. 3. if-else if-else문let x = 0;if (x > 0) { console.log("x는 양수입니다.");} else if (x   여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드를 실행합니다. 4. switch문let fruit = "사과";switch (..
Javascript 기본 1 (기본 문법) JS(자바스크립트)란? 📖언어는 사람과 사람 간 소통을 위해서 필요합니다. 그리고 사람과 컴퓨터와 소통이 필요한 순간이 생기는데 사람과 컴퓨터가 대화할 수 있는 방법이 바로 프로그래밍 언어입니다! 그중 가장 대표적인 `Javascript`에 대해서 설명해보려고 합니다!1. JS의 역사1995년 🌐 넷스케이프 커뮤니케이션이라는 곳에서 자바스크립트가 탄생했습니다!왜 생겼을까? -> 🖥️ 브라우저에 동작하기 하게 위해서 생겼습니다!(브라우저 동작 스크립트 언어)2005년 AJAX 등장! (비동기 웹 애플리케이션 개발 가능, 폭발적인 UX 향상 🚀)\2008년 V8 엔진 (google) 출시하면서 브라우저 속도가 빨라집니다! (super fast, 컴파일러🛠️, 메모리 관리 시스템👍)2009년 Nod..

티스토리툴바