본문 바로가기

나의 Javascript 개발기록

[Deep Dive] 10장 객체 리터럴
나의 Javascript 개발기록/Javascript 2023. 2. 24. [Deep Dive] 10장 객체 리터럴 - 객체란 ? : 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체라고 할 수 있다. : 원시값은 변경 불가능한 단 하나의 값만 나타내지만, 객체는 복합적인 자료구조 타입이기 때문에 변경 가능한 값이다. -> 객체는 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. - 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. : 자바스크립트 함수는 일급 객체이기 때문에 ! 함수도 프로퍼티 값이 될 수 있다. 프로퍼티 값이 함수일 때, 이를 메서드라고 부른다. - 프로퍼티 : 객체의 상태를 나타내는 값(data) - 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작 (behavior) - 객체 리터럴에 의한 객체 생성 - 클래스 기반 객체지향 언어는 클래..
[Deep Dive] 9장 - 타입 변환과 단축 평가 (data && data.name와 data?.name와 data || data.name 의 차이를 모른다면...!) ( 논리연산자 ||, null 병합 연산자 ??, 옵셔널 체이닝)
나의 Javascript 개발기록/Javascript 2022. 12. 29. [Deep Dive] 9장 - 타입 변환과 단축 평가 (data && data.name와 data?.name와 data || data.name 의 차이를 모른다면...!) ( 논리연산자 ||, null 병합 연산자 ??, 옵셔널 체이닝) - 명시적 타입 변환 (타입 캐스팅) : 개발자가 의도로 값을 바꾸는 것 let x = 10; // 명시적 타입변환 // 숫자를 문자열로 타입 캐스팅한다 let str = x.toString(); - 암묵적 타입 변환 (타입 강제 변환) : 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것 let x = 10; //암묵적 타입 변환 //문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다 let str = x + ""; 타입 변환이 기존 원시값 (예 x)를 직접 변경하는 것은 아니다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 명시적 타입 변환은 개발자의 의도에 의해 코드에 드러나지만, 암묵적 타입 변환은 가급적 에러를 발생시키지 않..
[Deep Dive] 8장 제어문 (블록문, 조건문, switch문, while문, do...while문, break문, 레이블문, continue문 예시)
나의 Javascript 개발기록/Javascript 2022. 12. 26. [Deep Dive] 8장 제어문 (블록문, 조건문, switch문, while문, do...while문, break문, 레이블문, continue문 예시) - 제어문? 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래로 순차적으로 실행되지만 제어문을 사용하면 코드의 흐름을 인위적으로 제어할 수 있다. - 블록문 ? 0개 이상의 문을 중괄호로 묶은것으로 코드 블록이라고 한다. 자바스크립트는 일반적으로 블록문을 하나의 실행 단위로 취급한다. 일반적으로 제어문이나 함수를 정의할 때 사용하는것이 일반적이다. - 조건문 ? 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. 자바스크립트의 조건문은 if-else, switch문이 있다. 잘 알고있는 if ~ else문의 설명은 생략하고, switch문을 봐보자! switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 ..
[Deep Dive] 5장 표현식과 문 , 리터럴 , 콘솔창의 undefined는 완료값이었던 것이다..!
나의 Javascript 개발기록/Javascript 2022. 12. 23. [Deep Dive] 5장 표현식과 문 , 리터럴 , 콘솔창의 undefined는 완료값이었던 것이다..! 우선 표현식 , 문 이라고 하면 우리는 이 용어를 많이 쓰고있지만, 정확히 이해하고 설명할 수는 없을것이다 ! 이런 기본적인 단어 말고도, 자바스크립트 공부를 하다보면 대부분의 용어가 컴퓨터 공학 전반에서 사용하는 용어기 때문에, 용어를 쓸때마다 제대로 정의를 알아두고 가도록 하자 ! 1. 값 : 표현식(expression)이 평가(evaluate)되어 생성된 결과를 말한다. *평가(evaluate) : 식을 해석해서 값을 생성하거나 참조하는 행위! 예제로 이해해보면, 1 + 2 = 3이라는 식이 있을때 1 + 2 는 평가되어서 -> 숫자 값 3을 생성하는 것이다! 모든 값은 *데이터타입을 가진다. 메모리에는 비트(2진수)의 나열로 저장되고, 저장된 값은 데이터 값에 따라 다르게 해석된다. 예시 ) 값 ..
[Deep Dive] 4장 변수 , 메모리 , 식별자, 재할당, 가비지콜렉터, 매니지드언어란 ?
나의 Javascript 개발기록/Javascript 2022. 12. 22. [Deep Dive] 4장 변수 , 메모리 , 식별자, 재할당, 가비지콜렉터, 매니지드언어란 ? - 변수 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 자바스크립트 엔진이 이러한 코드를 계산하고 실행한다고 생각해보자. 10 + 20 JS엔진이 코드를 평가하려면 10,20,+라는 기호(리터럴과 연산자)의 의미를 알고 있어야 하며, 10 + 20이라는 식(표현식)의 의미도 파싱할수 있어야 한다. 표현식을 인지하고 연산자와 피연산자를 기억해야한다. 사람은 두뇌를 통해 연산하지만, 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. - 메모리 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 1바이트 단위로 데이터를 저장하고 읽어들인다. 각 셀을 고유의 메모리 주소를 갖는다. 메모리 주소는 공간의 위치를 나타..
[Deep Dive] 2장 - 3장 자바스크립트에 관해 (ECMAScript, V8, Node.js, npm, Web API)
나의 Javascript 개발기록/Javascript 2022. 12. 22. [Deep Dive] 2장 - 3장 자바스크립트에 관해 (ECMAScript, V8, Node.js, npm, Web API) - 1장에서는 너무나 기초적인 컴퓨팅 사고, 기계어 등등을 알아보면서 컴퓨터가 어떻게 우리가 작성한 코드를 해석하고 실행하는지 기본적인 작동원리에 대하여 배울수 있었다. - 2장부터는 본격적인 자바스크립트의 정의와 특징, 런타임 환경에 대하여 설명이 시작되니 상세하게 이해하는 흐름대로 적어보며, 알고있는 내용들도 많지만 꼼꼼히 찾아보고 이해하며 이번년도 목표였던 자바스크립트의 바이블인 딥다이브 1회독! 을 재빠르게 마무리 지어보자. - 자바스크립트 1995년 넷스케이프가 브라우저에서 동작하는 경량 프로그래밍 언어를 만든것이 바로 자바스크립트! "모카" - "라이브스크립트" - 를통해 "자바스크립트"라는 이름으로 명명되었다. 마이스로소프트와 넷스케이프가 시장 점유율을 높이기 위해 자사 브러우저에서만 동작하..
프로그래밍 / 자바스크립트 / AJAX / jQuery / V8 / Node.js / ECMAScript / 인터프리터와 컴파일러
나의 Javascript 개발기록/Javascript 2022. 11. 2. 프로그래밍 / 자바스크립트 / AJAX / jQuery / V8 / Node.js / ECMAScript / 인터프리터와 컴파일러 프로그래밍 : 우리가 컴퓨터와 커뮤니케이션을 하면서 실행을 요구하는것 ! 이를 잘 요구하기 위해서는 컴퓨팅 사고를 통한 문제 해결 능력이 필요하다. 프로그래밍 언어 : 컴퓨터가 이해할 수 있는 기계어로 명령을 전달하기 위해 필요한 약속된 구문 -> 우리는 프로그래밍 언어를 사용해 프로그램을 작성하고, 컴퓨터가 이해할 수 있는 기계어로 바꿔주기위해 번역기를 사용한다 그 번역기가 바로 컴파일러 : 프로그래밍 언어와 컴퓨터 언어를 번역해주는 번역기 혹은 인터프리터 라고 한다 ** 둘의 차이는 추후에 웹팩과 바벨을 블로깅하며 다시 정확히 구분짓도록 하자! // 컴퓨터가 이해하는 기계어의 예시 00000000h: 7F 45 4C 46 01 01 01 00 00 00 00 00 00 00 00 00 ; ELF....
undefined와 null의 차이를 알고 계신가요?!
나의 Javascript 개발기록/Javascript 2022. 10. 12. undefined와 null의 차이를 알고 계신가요?! 자바스크립트를 간간히 공부하면서 참으로 정의가 명확하게 들어오지 않았던 undefined와 null..! 이론으로 읽으면 어느정도 이해가 되는것 같지만.. 다시 코딩세상,, 알고리즘세상으로 돌아가서 undefined 뱉어내면 또 다시 이해못하고 애꿎은 데이터와 로직만 들쑤시던 나...! 자바스크립트에서'없음'을 나타내는 undefined와 null의 차이를 명확히 알고 넘어가자 ! Undefined - 변수를 선언하고 값을 할당하지 않은 상태 라고 가장 먼저 나오는 설명이다. 사용자가 명시적으로 이 값은 undefined이라고 지정할 수도 있지만, 값이 존재하지 않을때 자바스크립트 엔진이 자동으로 부여하는 경우도 있다! 그 경우는 -> 자바스크립트가 사용자가 어떠한 값이라고 지정할것이라고 예상되는 상황에..
[TypeScript] 제네릭이 아닙니다. Generic이 도대체 뭔데..! + codegen + 유틸리티 Type / 타입스크립트를 제대로 알고쓰자 ! 기초부터 심화까지 !
나의 Javascript 개발기록/TypeScript 2022. 10. 7. [TypeScript] 제네릭이 아닙니다. Generic이 도대체 뭔데..! + codegen + 유틸리티 Type / 타입스크립트를 제대로 알고쓰자 ! 기초부터 심화까지 ! 요즘 Javascript 만 쓰는 사람이 있을까 ! 싶을 정도로 타입스크립트는 필수라고 할 수 있다! 타입스크립트의 필요성은 모두 알고있기 때문에, 기초적인 타입스크립트 작성법부터 제너릭 타입을 지정해주는 법까지 ! 코드로 정리해보자 ! 1. 타입스크립트 설치 후 타입을 명시하지 않았을 때 타입스크립트가 '타입을 추론'하여서 aaa는 string이군.. 판단한다음, 타입오류가 있으면 뱉어준다 ! 2. 정상적인 타입명시 정상적으로 명시해주는 방법은 간단하다 ! : 써주고 타입을 지정해주면 된다 ! 그러면 오류도 나지 않고 깔끔 ~ 3. 정확하지 않은 타입명시 종종 타입을 제대로 명시한것 같은데 오류가 난다..? 하는일이 있지만 타입스크립트는 생각보다 꼼꼼하기 때문에 모든 상황에 대한 타입을 지정해주어야 한..

티스토리툴바