티스토리

프론트엔드 개발
검색하기

블로그 홈

프론트엔드 개발

taenami.tistory.com/m

태나미 님의 블로그입니다.

구독자
3
방명록 방문하기
공지 처음이라면? 모두보기

주요 글 목록

  • JS - 얕은 복사(Shallow Copy )와 깊은 복사(Deep Copy) 바로 전에, primitive type과 reference type의 차이점을 메모리에 어떻게 할당되는지 알아보았습니다. 오늘은 referenct type에서 객체를 복사할 때 얕은 복사와 깊은 복사의 차이점을 공부해보겠습니다. primitive type의 값을 복사할 때는, 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않습니다. const age = 29; let nextYearAge = age; nextYearAge += 1; console.log(age); // 29 console.log(nextYearAge); // 30 reference type의 값을 복사할 때는, 선언된 변수의 주소가 객체의 주소를 가리키고 있기 때문에, 아래와 같습니다 const me = .. 공감수 0 댓글수 0 2021. 9. 17.
  • 모듈 모듈이란? 여러 기능들에 관한 코드가 모여있는 하나의 파일 모듈화는, 거대한 문제를 작은 조각의 문제로 나누어 다루기 쉽도록 하는 과정 모듈화를 통해 얻는 장점으로는, 파일들간에 중복적으로 발생할 수 있는 이름 충돌 방지 서로 간의 코드를 분리함으로써 모듈성 높여준다. 모듈간의 재사용성을 높여준다. 모듈화를 하지 않았을 때 발생하는 점 아래 예시에서는 html에서 module1.js 파일과 module2.js 파일을 만들어서 예시를 해보겠습니다. index.html module 1 function callMyName () { console.log("taenami"); } module 2 callMyName("taenami"); // taenami 위에서 module1.js 파일에서 callMyName 함.. 공감수 0 댓글수 0 2021. 9. 4.
  • let과 const는 호이스팅되지 않는다?? TDZ란 지난 시간에 var, let, const를 비교하면서 공부를 하였는데, 이번 시간에는 TDZ란 무엇이고, 추가적으로 공부를 하기 위해서 작성하였습니다 1. TDZ란? TDZ란 변수가 선언되고 초기화되기의 범위를 TDZ(Temporal Dead Zone)에 있다고 합니다. var, let, const를 보면서 TDZ에 대해 배워보겠습니다. 2. var와 let, const 비교 1) var console.log(myName); // undefined var myName = "taenami"; var는 선언하기 전에 사용할 수 있습니다. 위와 같이 선언한 myName이라는 변수는 error가 발생하는 대신, undefined가 나오는데, var로 선언된 변수는 *호이스팅 되기 때문입니다. 2) let, co.. 공감수 3 댓글수 0 2021. 8. 28.
  • 함수 선언식 과 함수 표현식 차이점 JavaScript에서 함수를 정의하는 방법에는 함수 선언식과 함수 표현식이 있습니다. 함수 선언식과 함수표현식이란? 함수 선언식 (function declartion) 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것 function sum(a,b) { return a + b; } 함수 표현식 (function Expression) 정의한 function을 별도의 변수에 할당하는 것 const sum = function(a,b) { return a + b; } 함수 선언식과 함수 표현식의 차이 주요 차이점은, 호이스팅에서 차이가 발생합니다. 함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다. 함수 표현식은 별도의 변수에.. 공감수 1 댓글수 0 2021. 8. 19.
  • ECMAScript 2020 ECMAScript 6부터 일 년 단위 릴리스(yearly release)로 변경된 이후로, 해마다 연도별 명세가 완성되고 공개되고 있다. 2020 6월18일 ECMAScript 2020(ECMA-262 11번째 에디션)이 공식적으로 릴리스 되었다. ECMAScript 2020 릴리스된 내용들을 살펴보겠다. Optional Chaining (?.) 연산자인 ?.는 연결된 체인의 속성 값이 nullish(null 또는 undefined)인 경우, undefined를 반환한다. const title = data && data.article && data.article.title // 위의 표현식은 다음의 optional chaining 연산자를 통해 동일하게 표현될 수 있다. const title = dat.. 공감수 0 댓글수 0 2021. 4. 8.
  • 함수형 프로그래밍 프로그래밍 패러다임 - 절차 지향 프로그래밍 - 객체지향 프로그래밍 - 함수형 프로그래밍 - 함수형 반응형 프로그래밍 함수형에 특화된 프로그래밍 언어들 F# Haskell OCaml Erlang 함수형 프로그래밍을 지원하는 언어들 Javascript Kotlin Go Python Java C++ 등 1958년 최초의 함수형 프로그래밍 언어인 LISP가 나오게 되었는데, 최근에 함수형 프로그래밍이 다시 화제가 된 이유는, 요즘 AI, IoT, 빅데이터, 비트코인이 화제가 되면서, 방대한 데이터를 빠르게 계산해서 병렬적, 안정적으로 처리하는 것의 중요성이 부각되면서 다시 주목받기 시작한 것 파이프라인과 비유해 보면, 인풋(입력)을 넣으면 처리과정을 거쳐서 아웃풋(결과)가 나오게 되는 것이며, 외부에서는 파이.. 공감수 0 댓글수 0 2021. 3. 24.
  • 자바스크립트 동작원리 JavaScript는 CallStack, Event Queue를 이용하여 Single Thread 기반으로 동작한다. Single Thread 기반에서는 단 하나의 CallStack만 존재하기 때문에 네트워크 요청 등 비용이 많이 드는 연산을 수행하게 되면 매우 비효율적으로 동작된다. 이러한 문제점을 어떻게 해결해나갈까? 자바스크립트 자바스크립트 엔진은 실행할 전체 함수를 실행 직전에 간단히 변수 및 함수 선언들만 스캔하는 JIT 컴파일 과정을 거치기 때문에 컴파일 과정을 갖는 인터프리터 언어라고 부릅니다. 자바스크립트 엔진 자바스크립트 엔진의 대표적인 예는 Google V8 엔진입니다. V8 은 Chrome 브라우저와 Node.js에서 사용합니다. 엔진의 주요 두 구성요소는 Memory Heap : 메.. 공감수 0 댓글수 0 2021. 3. 23.
  • prototype JS에서 prototype이 필요한 이유 function Person(name, fir, sec, thi) { this.name = name; this.fir = fir; this.sec = sec; this.thi = thi; this.sum = function() { return this.fir + this.sec + this.thi; } } const kim = new Person('kim', 100, 100, 100); console.log(kim.sum()); // 300 kim.sum = function(){ return (this.fir + this.sec )/ this.thi } console.log(kim.sum()); // 2 const park = new Person('park', 5.. 공감수 0 댓글수 0 2021. 3. 19.
  • this 자바스크립트에서 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 함수의 호출 방식 1. 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 4. apply / call / bind 호출 const tell = function () { console.dir(this); }; // 1. 함수 호출 tell(); // window // 2. 메소드 호출 const person = { say: tel.. 공감수 0 댓글수 0 2021. 3. 19.
  • null 과 undefined 차이점 undefined undefined는 데이터 타입이자, 값을 나타냅니다. undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다. temp라는 변수를 선언하였지만, 값을 할당하지 않았기 때문에 temp변수에 undefined를 할당하게 됩니다. 변수만 선언했지만 값을 가지게 되어 undefined는 값이면서 데이터 타입인 것입니다. let currentUser; console.log(currentUser, typeof currentUser); // undefined, "undefined" null null 타입 변수의 경우는 명시적으로 '값이 비어있음'을 나타내는데 사용합니다. 다시 말해, 아무것도 참조하고 있지 않다는 의미가 담겨 있으며 주로 객체를 담을 변수를 초기화할 때 많이 사용합.. 공감수 0 댓글수 0 2021. 3. 14.
  • Regular Expression 정규표현식이란? 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 문자 검색(search), 문자 대체(replace), 문자 추출(extract)와 같은 역할을 수행합니다. 예를들어, 많은 텍스트 중에 전화번호의 텍스트를 찾거나 웹사이트의 패턴을 찾을 수 있습니다. 이렇게 찾아진 패턴을 다른 문자열로 변환시킬 수도 있습니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit https://example.com. Officia veniam molestias iure rem vero totam fuga rerum consequatur sed placeat? Sed, fugit dolor voluptatem libero... 공감수 1 댓글수 0 2021. 3. 9.
  • JSON JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JSON은 완벽하게 언어로부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그 외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다. Json 특징 JSON stands for JavaScript Object Notation JSON is a lightweight data-interchange format JSON is "self-describing" and easy to un.. 공감수 0 댓글수 0 2021. 3. 7.
  • javascript - object 자바스크립트는 객체(object) 기반의 스크립트 언어이며, 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 객체는 new Object() 'object constructor' 문법 또는 {} 'object literal' 문법을 사용하여 만들 수 있다. Property value shorthand const person1 = {name: 'jihun', age: 28}; const person2 = {name: 'changhan', age: 23}; const person3 = {name: 'taenam', age: 21}; 만약에, 다음과 같이 person1부터 3까.. 공감수 0 댓글수 0 2021. 2. 7.
  • javascript - 객체지향언어, class 객체지향언어(OOP)란? 서로 관련 있는 데이터와 명령어들을 묶어서 객체라는 것을 만들고, 이 객체에 지정된 방향대로 실행되는 방식이다. 이렇게 여러가지 객체들을 조립하는 방식으로 프로그래밍하는 것 객체 지향 언어의 특징 캡슐화(Encapsulation) - 프로그램 내에서 같은 기능을 목적으로 작성된 코드를 모아서 다른 곳(클래스)에서 안 보이게 숨기는 것. - 클래스에 정의된 속성(Attribute)는 숨기고(Private), 객체가 수행할 기능(Function)은 공개(Public)하는 것. 상속(Inheritance) - 자식 클래스는 상속받은 부모 클래스의 속성(변수) 및 기능(메서드, 함수)을 물려받는 것. 다형성(Polymorphism) - 하나의 클래스나 메소드가 다양한 방식으로 동작이 가.. 공감수 0 댓글수 0 2021. 2. 3.
  • javascript - function function is object type Parameters premitive parameters: passed by value object parameters: passed by reference (메모리에 ref가 전달) Rest parameters ( ES6에서 추가) // parameters가 ...으로 선언하면 배열로 전달되어진다. function printAll(...args) { for(let i = 0; i console.log(arg)); }; printA.. 공감수 0 댓글수 0 2021. 1. 31.
  • javascript - variable types 1. primitive type - 더 이상 나눠질 수 없는 - 값 자체가 메모리에 저장된다 number special numeric values const infinity = 1 / 0; // Infinity const netativeInfinity = -1 / 0; // -Infinity const nAn = 'not a number' / 10; //NaN string boolean falsy 한 값: 0, null, undefined, NaN, '' truthy: 어느 값이든 있는 null 텅텅 비어있는 empty 값, 값이 할당이 되어 있는 undefined 선언은 되었지만, 값이 지정되어있지 않은 symbol 동시에 다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 때 사용 고유한 식별자.. 공감수 0 댓글수 0 2021. 1. 30.
  • javascript - let, var, const varaible * mutable = 값을 계속 변경될 수 있는, all objects type * immutable = 값을 변경할 수 없는, primitive type var 1. 값을 재선언 및 재할당 할 수 있다 console.log(age); //undefined age = 4; console.log(age); //4 var age; 첫 줄에서 변수는 정의되어있지만, 값이 안 들어가 있다는 의미. 값을 할당하고 console.log를 찍어보면 값인 4가 반환된다. => var hoisting 호이스팅은, 어디에서 선언하는 것과 상관없이 제일 위로 끌어올려주는 것. 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, functi.. 공감수 0 댓글수 0 2021. 1. 30.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.