본문 바로가기

전체 글

[JS] 자바스크립트 this, 바인딩, call()/apply()/bind()
[JS] 자바스크립트 this, 바인딩, call()/apply()/bind() 2024. 3. 27. *해당 글은 정재남의 '코어 자바스크립트' 도서를 참고했습니다.* This 대부분의 다른 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 없지만 자바스크립트에서 this는 클래스 외 어디든 사용할 수 있다. 상황에 따라 this가 바라보는 대상이 달라진다. JS에서 this는 함수를 호출할 때 결정된다 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되기 때문에, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있다. 어쨌든, This는 함수를 실행할 때 함수 내부에서 사용되는 값이며, 함수를 호출한 컨텍스트를 가리킨다. var a = 1; consol..
[JS] 자바스크립트 객체
[JS] 자바스크립트 객체 2024. 3. 26. *해당 글은 김기수의 '코딩 자율학습 HTML + CSS + 자바스크립트', 정재남의 '코어 자바스크립트' 도서를 참고했습니다.* 객체 객체는 키(key)와 값(value)으로 구성된 속성의 집합이다. 자바스크립트에서 객체는 원시 타입을 제외한 모든 것을 칭한다. 그렇다면, value는 무엇일까? 열쇠인 키(key)로 값(value)를 가져온다는 것이다. 요약해보자면 키와 값으로 이루어진 하나의 컨테이너이자 박스라고 생각하면 된다. 객체의 선언 const person = {}; 예시와 같이 중괄호로 표현하면 된다. 보통 객체는 빈 괄호로 선언하지 않고 처음부터 속성을 지정한 상태로 생성한다. 예제와 함께 속성에 대해서도 알아보겠다. const person = { firstName: "kim", lastN..
[JS] 자바스크립트 실행 컨텍스트, 스코프 체인, environmentRecord/outerEnvironmentReference
[JS] 자바스크립트 실행 컨텍스트, 스코프 체인, environmentRecord/outerEnvironmentReference 2024. 3. 26. *해당 포스팅은 정재남의 '코어 자바스크립트' 도서를 참고했습니다.* 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅) 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행한다. 이를 CallStack에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드와 환경과 순서를 보장한다. 예제를 보자. example //------------(1) var a = 1; function outer(){ function inner(){ console.log(a); //undefined var a = 3; } inner(); // -----..
[JS] 자바스크립트 조건문, 반복문
[JS] 자바스크립트 조건문, 반복문 2024. 3. 24. *해당 포스팅은 김기수의 '코딩 자율학습 HTML + CSS + 자바스크립트' 도서를 참고했습니다.* 조건문 조건문을 사용하면 특정 조건에 따라 다르게 실행되는 코드를 작성할 수 있다. 자바스크립트의 조건문은 대표적으로 if문과 switch문이 있다. if if문은 if 뒤에 오는 소괄호 안의 조건식이 참으로 평가되면 중괄호 안의 코드를 실행하는 조건문이다. 조건식은 어떤 자료형이든 참/거짓으로 평가되며, 결과에 따라 중괄호 안의 코드를 실행하거나 실행하지 않는다. 예를 들어, 짝수를 판별하는 조건문을 작성한다고 가정해보겠다. let num =10; if(num % 2 === 0){ console.log("변수 num에 할당된 숫자는 짝수입니다."); } 숫자를 2로 나머지 연산했을 때 0이라면 그 수는..
[JS] 자바스크립트 함수, 순수 함수/일급 함수,함수 표현식/함수 선언식/화살표 함수, 함수 호이스팅
[JS] 자바스크립트 함수, 순수 함수/일급 함수,함수 표현식/함수 선언식/화살표 함수, 함수 호이스팅 2024. 3. 24. *해당 포스팅은 김기수의 '코딩 자율학습 HTML + CSS + 자바스크립트', 정재남의 '코어 자바스크립트' 도서를 참고했습니다.* 함수 함수 4 函數 명사 수학 두 개의 변수 x, y 사이에서, x가 일정한 범위 내에서 값이 변하는 데 따라서 y의 값이 종속적으로 정해질 때, x에 대하여 y를 이르는 말. y가 x의 함수라는 것은 y=f(x)로 표시한다. 자바스크립트에서 함수(function)는 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문이다. 코드를 함수로 만들면 함수를 호출해 함수 내부에 모아 둔 여러줄의 코드를 한 번에 실행할 수 있다. 그러므로 재사용이 편하다. 그림으로 예를 들어 보겠다. 아이디어가 샘솟는 사업가가 있다. 이는 도자기를 생산해 판매할 생각이라 점토를 많이 사들였다. 대량..
[JS] 자바스크립트 const, 깊은 복사/얕은 복사
[JS] 자바스크립트 const, 깊은 복사/얕은 복사 2024. 3. 23. *해당 포스팅은 김기수의 '코딩 자율학습 HTML + CSS + 자바스크립트', 정재남의 '코어 자바스크립트' 도서를 참고했습니다.* const const는 constant인 '상수'의 어원으로 말 그대로 변하지 않는 상수를 의미한다. const도 let과 같이 ES6에서 추가됐는데, 기본 내용은 let과 비슷하다. let과 다른점이 있다면, 재할당이 안 된다. 그래서 상수 변수를 선언할 때 사용하는 키워드라고 부른다. 선언과 동시에 값이 할당되어야 하며, 메모리에 시작과 동시에 공간이 할당됨을 의미한다. const num = 20; num = 10; Cannot assign to "num" because it is a constant 재할당이 되지 않는다. 또한, 선언을 먼저 하고 할당을 나중에 하는 ..
[JS] 자바스크립트 변수 var/let, 호이스팅, 블록 스코프/함수 스코프, 불변값/가변값
[JS] 자바스크립트 변수 var/let, 호이스팅, 블록 스코프/함수 스코프, 불변값/가변값 2024. 3. 23. *해당 포스팅은 김기수의 '코딩 자율학습 HTML + CSS + 자바스크립트', 정재남의 '코어 자바스크립트' 도서를 참고했습니다.* (Link) 지난 포스팅에서 자바스크립트의 변수의 정의와 할당/선언, 그리고 메모리 구조에 대해서 알아봤다. 이번 포스팅에서는 자바스크립트의 변수의 종류는 무엇이 있는지, 각 특징은 무엇인지 알아보겠다. 종류는 총 3가지이다. 하지만 내용이 길어지는 관계로 const는 다음 주제에서 다룬다. 자바스크립트 변수의 종류 그 전에, 변수마다 사용되는 스코프가 다르다. 스코프(scope)는 식별자에 대한 유효 범위를 이야기한다. 그 식별자가 어느 범위까지 살아있는가?를 보면 된다. 스코프 (Scope) 스코프는 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙이다. 자바..
[JS] 자바스크립트 변수의 정의, 선언/할당, 메모리 구조, 리터럴
[JS] 자바스크립트 변수의 정의, 선언/할당, 메모리 구조, 리터럴 2024. 3. 23. *해당 포스팅은 김기수의 '코딩 자율학습 HTML + CSS + 자바스크립트', 정재남의 '코어 자바스크립트' 도서를 참고했습니다.* 1. 변수란? 변수란 흔히 '변할 수 있는 수'라고 알려져있다. '수'라고 해서 숫자만 포함되는 것이 아닌, 말 그대로 변할 수 있는 '데이터'를 의미한다. 데이터를 저장하는데 사용되는 이름이 붙은 저장소, 변수를 사용함으로 우리가 원하는대로 저장, 수정, 검색할 수 있다. 아마 흔히들 이렇게 생각할 것이다. name이라는 변수명(식별자)에 "seo"라는 문자열을 담으면, 메모리에 name이라는 곳이 "seo"일 것이라고. 하지만 실제로 이렇게 저장되진 않는다. 변수 vs 식별자? 변수와 식별자의 의미를 명확히 할 필요가 있다고 생각한다. 변수는 말 그대로 변할 수 있는 ..
[Spring] Spring DI (Chapter 3) - 1
[Spring] Spring DI (Chapter 3) - 1 2024. 2. 12. * 이 포스팅은예제 코드를 생략한다. * 예제 코드는 https://github.com/seoeunhyo/Spring seoeunhyo/Spring 스프링 프로그래밍 개인 공부 . Contribute to seoeunhyo/Spring development by creating an account on GitHub. github.com * 최범균의 스프링5 프로그래밍 도서를 참고했다. 1. 의존이란? DI는 Dependency Injection의 약자로, 의존 주입이라고 번역한다. 여기서 말하는 의존은, 객체 간의 의존을 의미한다. 예를 들어, 회원가입을 생각할때 존재하는지 여부를 확인할 때 Dao의 클래스의 메서드를 사용한다는 점이다. 이를 객체(클래스)간 의존한다고 표현할 수 있다. 의존하는 객체를 ..

티스토리툴바