일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 프론트엔드 성능 최적화 가이드
- unique identifiers
- middleware pattern
- const
- js pattern
- 자바스크립트 패턴
- package management
- 자바스크립트 딥다이브
- 제너레이터와 async/await
- pr review
- 블로그 서비스 최적화
- 자바스크립트
- 이벤트
- 진행기록
- 딥다이브
- 프로그래머스
- Babel과 Webpack
- 모던 자바스크립트 Deep Dive
- peerdependencies
- js pattern
- 올림픽 통계 서비스 최적화
- 브라우저의 렌더링 과정
- mixin pattern
- 이미지 갤러리 최적화
- 새 코드 받아오기
- 학습내용정리
- version management
- DOM
- 스코프
- 커리어
- Today
- Total
목록BootCamp_Codestates/Pre Tech Blog (16)
Dev Blog
런타임: 런타임이란 프로그래밍 언어가 구동되는 환경(=프로그램) 자바스크립트 런타임: 브라우저, node.js NVM(Node Version Manager): 다양한 node version를 설치하고 관리할 수 있는 프로그램 NPM(Node Package Manager): 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어 package.json: 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지, 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시 dependencies: 프로젝트가 돌아가기위해 반드시 필요한 모듈들. devDependencies: 프로젝트를 개발하는 환경에서 필요한 모듈들. 예를 들면 코드 모양을 잡아주는 lint나 테스팅 모듈. scripts: npm ..

동기 호출 예시 function waitSync(ms) { var start = Date.now(); var now = start; while(now - start < ms) { now = Date.now(); } } // 현재 시각과 시작 시각을 비교하여 ms 범위 내에서 무한 루프를 도는 blocking 함수 function drink(person, coffee) { console.log(person + '는 ' + coffee + '를 마십니다') } function orderCoffeeSync(coffee) { console.log(coffee + '가 접수되었습니다'); waitSync(2000); //2초동안 blocking 시킨다..!!! return coffee; } let customer..

spread syntax 란? 전개 구문(Spread Syntax)는 ECMAScript6(2015)에서 새로 추가된 문법으로 간단하게 이 문법은 문법 이름 그대로 객체 혹은 배열들을 펼칠 수 있게 해 줍니다. 1. 펼칠 대상이 객체인 경우 const myObject1 = { laptop: 'MacBook Pro', tablet: 'iPad Pro 11' } const myObject2 = {...myObject1}; console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"} console.log(myObject2); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"} console.log(my..

알고리즘을 짜기 위해서는 수도코드를 잘 작성할 줄 알아야 합니다. 이는, 현실 세계의 문제를 추상화하여 각각의 함수가 잘 작동할 수 있게 간결하게 작성하는 연습입니다. 이를 위해서, 세가지, 요구사항이 하나 이상인 문제를 여러개로 쪼개서 생각할 수 있는가. 문제를 일상적인 문장으로 표현할 수 있는가. 잘게 쪼갠 특정 문제가 Javascript의 어떤 개념과 연관되는가. 그리고, 갖추어야할 능력 5가지. 작성한 수도코드를 자바스크립트로 능숙하게 바꿀 수 있다. 타입 확인과 변환을 능숙하게 할 수 있다. 이중 반복문을 능숙하게 사용할 수 있다. 반복문 내에 여러개의 if문을 능숙하게 사용할 수 있다. for문과 while문이 필요한 때를 쉽게 파악할 수 있다. 알고리즘 문제 풀기 프로세스 텍스트에서 foo라..
특별한 대우를 받는 일급 객체(first-class citizen)인 함수는 세가지 특별 대우를 받습니다. 변수에 할당할 수 있다. assignment 다른 함수의 인자로 전달될 수 있다. argument 다른 함수의 결과로서 리턴될 수 있다. return 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미합니다. 변수에 저장할 수 있기 때문에 배열의 요소나 객체의 속성값으로 저장하는 것도 가능합니다. 다른 함수를 인자로 받는 함수는 caller => 콜백함수를 호출(invoke)하여 실행시킵니다. 그 인자로 전달되는 함수를 callback 라고 합니다. => 호출되어 실행되는데 답신전화를 뜻합니다. => '배열' 데이터를 활용하는 메..

Closure란? 클로져는 "함수와 함수가 선언된 어휘적(lexical) 환경"의 조합을 말합니다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니다. 통상적으로 "외부함수의 변수에 접근할 수 있는 내부함수"를 클로져 함수라 부릅니다. 외부함수의 실행이 종료된 후에도, 클로져는 외부함수의 스코프를 참조할 수 있습니다. 클로저 사용 예시: 클로저를 통해 커링(currying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법), 클로저 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법) 등의 패턴을 구현할 수 있습니다. 클로저의 단점: 일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고 자료..

Scope란? : 무언가 제한된 범위를 잘 들어다보기 위해 사용되는 개념, 범위가 있어야 함수가 잘 작동하는지 확인할 수 있다 Achievement Goals JavaScript의 Scope의 의미와 적용 범위를 이해할 수 있다 JavaScript의 Scope 주요 규칙을 이해할 수 있다 중첩 규칙 block scope(block-level scope) vs. function scope(function-level scope) let, const, var의 차이 전역 변수와 전역 객체의 의미 Rule1: Scope: 변수 접근 규칙에 따른 유효범위 변수는 어떠한 환경 내에서만 사용 가능. 프로그래밍 언어는 각각의 변수 접근 규칙을 가짐. 변수와 그 값이, 어디서부터 어디까지 유효한지를 판단하는 범위 자바스..

Achievement Goals 객체 기초, 퀴즈, 실습 배열 및 객체 구조를 이해하고 어떻게 사용하는 지 이해할 수 있다. 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다) 배열과 객체의 특징에 따라 실생활에서 언제 쓰여야 하는지 이해할 수 있다. 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다. 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다. 객체 실습 - 2 에서 나오는 tweet.content와 tweet['content']의 차이가 무엇인지 확실히 이해한다. obj.a = "hello" 와 같은 이질적인 객체 할당 방식을 능숙하게 다룰 수 있다. 객체 속성 삭제를 위한 del..