Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned 사전적 정의 property : 소유물 attribute : 속성 프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 프로퍼티 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드의 개념을 알아보자. ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드 이다. 이중 대괄호 로 감싼 이름들이 내부 슬롯과 내부 메서드다. ( [[...]] ) 이들은 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 공개된 객체의 프로퍼티는 아니다. 즉 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 직접 접근하거나 호출할 수 없다. 그러나 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 ..

❤️‍🔥TIL : Today I Learned 함수는 마치 재료를 투입받아 제품을 생산하는 기계와 같다. 함수 자바스크립트에서 가장 중요한 핵심 개념 [스코프, 실행 컨텍스트, 클로저, 생성자함수에 의한 객체 생성,메서드, this, 프로토타입, 모듈화] 등이 모두 함수와 깊은 관련이 있다. 함수란 함수는 일련의 과정을 문(statement)으로 구현하고, 코드블록으로 감싸서 하나의 실행단위 로 정의한 것 이다. 여기서 자주 햇갈리는 내용인 매개변수와 인수가 있다. 매개변수(parameter)는 함수를 선언(정의)할 때 사용하는 변수를 의미한다. 인수(argument)는 함수를 호출할때, 즉 입력될 때 넣는 값을 인수라고 한다. 함수 정의 함수를 정의는 다양한 방법이 있지만 함수 선언문을 사용하여 정의한..

❤️‍🔥TIL : Today I Learned 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 제어문(control flow statement) 조건에 따라 코드 블록을 실행(조건문)하거나, 반복실행(반복문)할 때 사용한다. 블록문(block statement) 0개 이상 의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. { } 문의 끝에는 세미콜론을 붙이는 것이 일반적이다. 하지만 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. // 블록문 { var foo = 10; } // 제어문 var x = 1; if (x < 10) { x++; } // 함수 선언문 function sum(a, b) { ret..

❤️‍🔥TIL : Today I Learned 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 변수란 무엇인가? 왜 필요한가? 애플리케이션은 데이터를 다룬다. 아무리 복잡해도 데이터를 입력(input)받아 처리하고, 결과를 출력(output)하는 것이 전부다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리 메모리(memory)는 데이터를 저장할 수 있는 메모리셀의 집합체다. 1바이트 단위로 데이터를 저장(save)하거나 읽어(read) 들인다. 각 셀은 그림의 왼쪽에 보이는 것 처럼 메모리 주소를 갖는다. 메모리 공간의 위치를 나타낸다. 컴퓨터는 모든 ..

❤️‍🔥TIL : Today I Learned 모던 자바스크립트 스터디 주제 : 모듈 리액트 사용, 여러 js를 묶어놓은 index.js 등을 html 파일에 연결시킬 때 script 태그 안에 작성하는 속성으로 타입을 모듈로 작성해준다 type="module" 모듈은 파일의 크기가 커지면 커질수록 사용 가능성이 높으며 프로젝트 간 필수적으로 사용 할 수밖에 없는 기능이다 모듈 타입은 기본값으로 defer 속성이 있다 즉, html 요소가 모두 파싱이 된 이후 script를 실행한다 여기서 defer와 async 의 차이점이 궁금해져 공부했다. 공통점 : 스크립트를 다운로드하는동안 HTML 이 중단되지 않음 defer : html 다 다운받고 나서 dom 조작 가능 할수 있도록! script 가 html..

❤️‍🔥TIL : Today I Learned 배열 메서드 forEach() map() filter() reduce() forEach() 오직 Array 배열에서만 사용 가능한 메서드 (ES6부터는 Map, Set 등에서도 지원) forEach 구문의 인자로 callback 함수를 등록할 수 있으며, 배열의 각 요소들이 반복될 때 callback 함수가 호출 callback 함수에서 배열 요소의 인덱스와 값에 접근가능 (아래 코드에서는 item 에 해당) array의 길이(length)가 5라면 1, 2, 3, 4, 5 까지 순서대로, 하나씩 접근하여 반환 const items = ['사과', '바나나', '복숭아']; items.forEach(function(item) { console.log(item..

❤️‍🔥TIL : Today I Learned yarn vs npm 우선 둘은 가장 활발하게 사용되는 자바스크립트 런타임 환경인 node.js의 프로젝트 '패키지 관리자' 이다 yarn yarn 설치 npm npm 설치 둘의 차이점 yarn 페이스북에서 개발한 패키지 관리자 이며, 리액트 와 같은 프로젝트를 진행하며 격는 어려움을 해결하기 위해 개발하였고, npm 레지스트리와 호환 하면서 속도, 안정성 측면에서 npm 보다 향상 되었다. 페이스북 아티클 https://engineering.fb.com/2016/10/11/web/yarn-a-new-package-manager-for-javascript/ Yarn: A new package manager for JavaScript In the JavaScr..

❤️‍🔥TIL : Today I Learned 명시적 this 바인딩 상황에 따라 달라지는 this 메서드 내부 함수에서 this 우회 명시적 this 바인딩 상황에 따라 달라지는 this this는 실행 컨텍스트가 생성될 때 결정(this binding) === this는 함수를 호출할 때 결정하며 전역 공간에서 this === window // 전역 공간에서의 this console.log(this); console.log(window); console.log(this === window); //true 함수 호출시 this === window ex) function(); // 함수와 메서드 호출시 각각 this 는 각각 다르게 할당 var func = function (x) { console.log..