드림코딩 - 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현
자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6) -function *JS에서 function은 object로 간주되어지기때문에 function을 변수에 할당할 수도 있고 parameter로 전달이 되고, 함수를 return할 수도 있는 것 이전에도 말했지만 JS에서는 type이 없음 그래서 function log(message) { console.log(message); } 라고 작성했을 때 message에 어떤 data type을 사용해야 하는지 명확하지 않음 이 점을 보완하기 위한 것이 바로 TypeScript 타입스크립트를 쓰는 게 조금 더 명확하고 개발일을 더 쉽게 만들어줌 parameter의 datatype과 ..
2020. 8. 16. 12:21
드림코딩 - 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁
자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6) \n 줄바꿈 || or 둘중하나라도 && and 둘다 (+ 이러한 logical operators 작성할 때 헤비한 오퍼레이터일수록 맨 뒤에 작성하는 것이 효율적임.) ! not 반대로 -object의 특징 object는 메모리에 reference가 저장됨 object - reference - 속성 - 속성값 ===은 타입까지 같은지 판단함 ? operators(Ternary Operator) if를 더 간단하게 쓸 수 있음 condition ? value1 : value2 -switch operators if문에서 else if 를 반복해서 사용해야 한다면 스위..
2020. 8. 15. 20:38
드림코딩 - 자바스크립트 3. 데이터타입, data types, let vs var, hoisting
자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+) 프로그래밍에서 가장 중요한 것은? 입력 / 연산 / 출력 사용자에게 받은 데이터를 잘 처리하고 연산해서 알맞게 사용자에게 출력해주는 것. CPU에 최적화된 연산 메모리의 사용을 최소화 -변수 variable 변경될 수 있는 값. let (added in ES6) -Block scope (지역변수) / Global scope (전역변수) 글로벌한 변수들은 어플리케이션이 실행되고 끝날 때까지 메모리에 탑재되어있기 때문에 최소한으로 쓰는 게 좋음 가능하면 클래스, 함수, if, for 등 필요한 부분에서만 정의해서 쓰는 게 좋음 -var은 이제 쓰지 마! 값을 ..
2020. 8. 15. 19:22
드림코딩 - 자바스크립트 기초 1,2
https://youtu.be/wcsVjmHrUQg ECMAScript 브라우저에서 동작하는 언어를 만들 때, 엔진이 이 언어를 이해하기 위해 필요한 문법 사항을 정리한 문서 자바스크립트 라이브러리(jQuery, dojo 등)의 등장 개발자들이 더이상 다른 브라우저의 구현 사항을 신경써지 않아도 되게 됨 "우리가 제공하는 APIs만 쓰면, 우리가 제공하는 함수들만 호출하면 다른 브라우저 상에서 동작할 수 있게 신경 써줄게!" 좋은 프로그래밍의 철학 APIs들을 잘 작성해서, 나중에 구현사항이 바뀌더라도 인터페이스를 사용하고 있는 사용자의 코드는 수정하지 않도록 만드는 것! ECMAScript 5 in 2009 ECMAScript 6 in 2015 js는 잘 정착된 언어이다. 모든 브라우저들이 ECMASc..
2020. 8. 13. 22:54숫자야구 연습
1. 일단 랜덤한 숫자 4개로 숫자야구 문제를 내는 배열 만들기(공격) var list = [0,1,2,3,4,5,6,7,8,9]; var number = []; for (var i = 0; i < 4; i++) { var select = Math.floor(Math.random() * list.length); number[i] = list.splice(select, 1)[0]; } 더보기 랜덤한 숫자에 들어갈 숫자들 모음을 배열로 선언해준 다음. 그 숫자들로 랜덤 조합해서 문제 낼 배열도 하나 선언해주고. 랜덤한 숫자를 4번 뽑아야하니까 반복문. (for문에서 많이 쓰는 i++는 i 연산을 우선 실행하고, 다음 라인 명령을 실행하기 전에 1 더해주는 녀석) 우선 i = 0이라서 i < 4 가 true니..
2020. 8. 12. 10:50dongpani - JavascriptConcepts
출처: https://github.com/dongpani/JavascriptConcepts 1. 클로저 function parent() { var a = 100; var child = function() { console.log(a); } return child; }; var inner = parent(); inner(); 기본적으로 유효범위(scope)따라 함수 안에 선언된 변수에는 접근할 수 없는게 원칙이다. 하지만 함수내부에서 선언된 변수의 값을 리턴하게 되면 그 값을 참조할 수 있다. inner() 같이 이미 실행이 종료 된 함수 스코프에 변수를 참조하는 것을 클로저 라고 부른다. 2. arguments 객체 function add(a, b) { console.dir(arguments); retu..
2020. 8. 10. 17:12
zerocho js 4
4-1 비동기 & 숫자야구 순서도 코드는 위에서 순서대로 한줄씩 실행됨(동기) 그 예외가 1. 조건문 2. 반복문 3. 저번 시간에 한 콜백함수 폼.addEventListener('submit', function 콜백함수 (a) { }여기서 노란색 부분까지만 실행되고 뒷부분 콜백함수는 실행은 안되고 컴퓨터가 기억만 해두고 있음. 이렇게 코드 상의 순서대로 실행되지 않는 코드를 비동기라고 함. 비동기는 실행되기 전까지는 언제 실행될지 모름. 언젠가는 실행될거니까 대비는 해야 됨 코딩의 핵심은 반복을 최소화하고 재사용하는 것. 숫자야구 시작!순서도를 만든다. 4-2 배열 메서드 - push, pop, shift, unshift 숫자후보 = [1,2,3,4,5,6,7,8,9]; 숫자배열 = []; for(va..
2020. 8. 9. 13:50
zerocho js 3
3-1 window 객체 콘솔창에 window 쳐보면 굉장히 많은 속성들이 나옴. 브라우저가 기본적으로 제공하는 것들임 window.document (혹은 window['document']) 를 입력하면 #document가 뜨는데 여기에 마우스를 대면 보이는 화면이 파란색으로 선택되는 것을 알 수 있음 즉, 화면을 담당하는 객체가 document 브라우저 전체를 담당하는 객체는 window 쉽게 말해, window는 브라우저 document는 페이지(탭)이라고 생각하자. +) TCP school 설명 첨부 Window 객체 window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있습니다. 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 wi..
2020. 8. 8. 16:55
zerocho js 1,2강
0804 화 프로그래밍: 컴퓨터한테 명령을 내리는 것 자바스크립트: 명령할 때의 언어, 웹사이트를 만들 때 사용 ★0627 토 1-5 변수(var) var(variable):변수 변수로 만들어서, 선언해서 어떤 값을 컴퓨터가 기억하도록 저장하도록 하는 것. var 결과 = 15라고 입력하면 컴퓨터가 결과=15로 기억해서 결과 라고 쳤을 때 15라고 출력됨. 웹페이지를 새로고침하면 그 기억을 지움. 초기화 됨 변수이름? 변수명은 & _를 제외한 특수문자는 안됨! 또한 숫자를 첫글자로 쓸 수 없음. 1-6 null, undefined 값의 종류 숫자, 문자, 참/거짓(불린), undefined(정의되지않은), null var로 할 때, 변수가 기억하고 있는 값을 바꿀 수 있음. (이건 바닐라코딩 수업에서 들..
2020. 8. 2. 17:15