gggimmin 개발 블로그 gggimmin 개발 블로그

1. 호이스팅 (Hoisting) 의 개요 ✅ 호이스팅 이란? JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻한다. ✅ 호이스팅 1. 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태이다. (JS 엔진은 코드 실행 전 이미 모든 변수정보를 알고 있는 것) 2. 변수 정보 수집 과정을 이해하기 쉽게 설명한 '가상 개념' 2. 호이스팅 (Hoisting) 의 규칙 1. 호이스팅 법칙 1 : 매개변수 및 변수는 선언부를 호이스팅 합니다. //action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이 이해한다) //act..

자바스크립트의 실행 컨텍스트 는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 한다. 1. 선언된 변수를 위로 끌어올린다. = 호이스팅 (hoisting) 2. 외부 환경 정보를 구성한다. 3. this 값을 설정한다. 이런 현상들 때문에 JS에서는 다른 언어랑은 다른 특징들이 나타난다. 1. 실행 컨텍스트란 ? (이미지 출처 : https://velog.io/@leejuhwan/스택STACK과-큐QUEUE ) 스택은 LIFO(Last in, first out), 큐는 FIFO(First in, first out)이다. ✅ 콜스택 (call stack) 실행 컨텍스트란 실행할 코드에 제공할 환경정보들을 모아놓은 객체이다. 그..

자바스크립트에서 객체(Object)와 배열(Array)을 이용하면 굉장히 다양하고 복잡한 프로그래밍이 가능하다. 그럼에도 현실세계의 여러가지 문제들을 '프로그래밍'적으로 반영하기엔 많이 부족하다. 그래서 Map 과 Set은 이러한 한계를 극복하고자 등장한 자료구조라고 할 수 있다. (1) Map ✅ Map은 키-값 쌍을 저장하는 객체와 비슷하다. Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다. Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다. (set) 키-값 쌍 추가 및 검색 (delete) 키-값 쌍 삭제 (clear) 모든 키-값 쌍 제거 (size) Map 크기 및 존재 여부 확인 new Map ( ) 맵을 ..

자바스크립트에서 함수는 일급 객체 (First-Class Object) 라고 불린다. 그래서 함수를 객체처럼 여러가지의 방식으로 다룰 수 있다. 일반 객체와 다르게 함수는 특별한 능력을 가지고 있다. 일급객체 (First-Class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 말한다. 함수가 일급 객체로 취급되기 때문에, 우리는 함수를 유연하게 사용 가능하다. 아래는 함수가 일급 객체로 취급되는 5가지의 경우에 대해 학습한 내용이다. (1) 변수에 함수를 할당 ✅ 함수는 변수에 할당할 수 있다. 함수는 값으로 취급되기에, 다른 변수와 마찬가지로 변수에 할당 가능하다. 변수에 할당된 함수는 나중에 사용 가능하다. const sayHello = function() { c..

오늘은 자바스크립트에서 2015년도에 대규모 문법적 향상 및 변경인 ES6 문법에 대해 정리하고자 한다. 1. let 과 const ✅ let : 재할당 가능, 재선언 불가 let name = "john" console.log(name) // john name = "bob" // 재할당 가능 console.log(name) // bob let name = "alex" // 재선언 불가능, SyntaxError: Identifier 'name' has already been declared ✅ const : 재할당, 재선언 불가 / 초기값 없을시 선언 불가능 const name; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration..

오늘은 자바스크립트에서 배열(Array)를 이용하여 여러 개의 값을 저장하고 관리하는 방법, 자바스크립트의 배열과 배열 메소드에 대해 학습하였다. 1. 배열 생성 1-1. 기본적인 배열 생성 let fruits = ["사과", "바나나", "오렌지"]; 이 예제는 배열 fruits 를 생성한 예제이다. 배열을 생성할땐 대괄호 [ ~~~ ] 를 사용하고, 각 요소들은 쉼표( , )로 구분한다. 1-2. 배열의 크기 지정 let numbers = new Array(5); 이 예제는 크기가 5인 배열 numbers를 생성한다. new Array( )를 사용하여 배열의 크기를 지정 가능하다. 2. 배열 요소 접근 let fruits = ["사과", "바나나", "오렌지"]; console.log(fruits[0..

미니 팀프로젝트가 끝나고 돌입한 Javascript 학습 기간 어느정도 얕게 알고있는 Javascript 지식을 이번 학습 기간을 통해 완전히 습득해야겠다고 생각했다. 오늘은 자바스크립트에서 객체 (Object)에 대해 다시 한번 복습하는 과정을 가져보려한다. 객체란 ? - key - value pair 로 이루어짐 - 하나의 변수에 여러 개의 값을 넣을 수 있다. - key에 할당되는 value에는 어떤 값도 올 수 있다. - key : (어떤값) ex.. 문자, 숫자, Boolean 타입, 함수, 배열, 또다른 객체 - value에 올 수 있는 데이터 타입의 형태는 제한이 없다. 코드를 통해 쉽게 이해해보도록 하자 1. 기본적인 객체 생성 방법 let person = { name : "홍길동", ag..

2023.12.21 ~ 2023.12.27 까지 7일의 짧은 시간이 지나고 나의 첫 프로젝트가 성공적으로 끝났다. 우리는 첫 프로젝트로 우리 팀을 소개하는 프로젝트를 만들었다. 간단하게 우리의 프로젝트에 대해 설명해보려고 한다. 1. 프로젝트의 목적 : - 앞으로 함께하게 될 팀에 대한 소개. - 하나하나 신경써서 만든 기능으로 팀원 소개하기. - 프로젝트를 함께 만드는 팀원에 대해 소개. 2. 구현하고자 했던 필수 기능 : - 고정된 헤더 - 메인 제목과 서브 제목 - 팀을 간단하게 표현하고 소개하는 박스 - 팀원 프로필 카드팀원 프로필 카드 클릭시 상세 설명 모달창 - 방명록 조회 및 작성 3. 기능 선택 사항 : - 방명록 삭제 (구현) - 방명록 수정 (구현) - 프로필 카드의 이미지를 직접 업로..