조금씩 천천히

지난 19일 8주의 자바스크립트 부트캠프 과정이 끝났다. 내가 들었던 과정은 자바스크립트 부트 캠프 패스트캠퍼스에 있던 자바스크립트 강의가 두 종류 였는데 내가 기초강의인 부트 캠프를 선택한 건 강사님 때문이었다. 우아한형제들 김민태님의 이름은 페이스북 등을 통해서 알고 있었기 때문에 망설임 없이 신청했다. 패스트캠퍼스에 대한 이야기는 많이 들어봤지만, 결국 강의는 강사님따라 달리지는 거고 또 듣는사람이 어떻게 하느냐에 따라 다른거라는걸 알고 있기에 거금을 지르고 (할부는 내년까지 ^ㅇ^ / ) 들었는데 결론은 듣길 잘했다라는 생각이다. 솔직히 내가 자바스크립트 기초는 알고 있다고 생각해서 기초강의인 부트 캠프를 들을까 말까 고민했었는데 기초를 알고 있었다는 건 순전히 내 착각이었다. 강의를 들을 때마다..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.12.10 강의자 : 김민태님 앱을 만들 때 처음 할일 초기화 -> 상태 생성(초기 상태), 이벤트 핸들러 연결 todo앱 만들기 첫번째 예제처럼 전역에 배열을 생성하고 메소드를 만드는 방식의 단점은 전역공간에 생기기 때문에 충돌이 날 수 있다. 따라서 전역공간에는 코드를 작성하지 않는다. (의도하지 않았는데 덮어쓸 수 있는 오류가 생길 수 있다) 전역에 객체를 만들어서 객체 안에 메소드 등 코드를 작성하면 적어도 객체 안의 내용은 보호가 된다. -> name scope, name space todoApp { //코드내용 } // name scope let TodoApp = { todos: [], start() { let inputEleme..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.12.05 강의자: 김민태님 ## 연산자 후치연산자 a = 10; a++ +5;//15 새로운 연산자 spread(확산) let 열대과일 = ['두리안', '파파야', '아보카도']; let 맛있는과일 = ['사과', '배', '수박']; let 과일 = [...맛있는과일, ...열대과일]; console.log(과일); // 두개의 배열을 하나로 만든다 로컬 - 리모트(원격) let request = new XMLHttpRequest(); request.open('GET', '/api/books', true);//요청방식/요청주소/동기적,비동기적인것에 대한 true,false, 디폴트는 true,비동기 방식이다. //api폴더밑에 book..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.11.26 강의자: 김민태님 ## promise 비동기 작업의 결과거 성공되었는지 실패되었는지 표시하기 위해 사 모든 비동기 작업의 처리결과는 두가지. 성공과 실패 코드의 흐름이 두세배 복잡해진다. new 인스턴스를 사용해서 Promise(함수); 프로미스 생성자가 함수를 즉시 호출하면서 성공실패를 resolve, reject, 성공/ 실패. 둘다 함수이고 promise가 전달해주는 함수. 단순히 비동기 처리 하나를 위해서 나온것이 아니다. 단순 비동기 작업을 처리하면 더 복잡해질 수 있다. 비동기 작업의 복잡도가 높아질 때 promise를 사용하면 작업이 단순해진다. function asyncT1(resolve, reject) { //pr..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.11.21 강의자: 김민태님 map, filter - 배열을 순회하면서 함수에서 리턴한 값을 배열로 만들어서 리턴한다 ## map a라는 형태의 데이터를 b라는 형태의 데이터로 바꿀 때 많이 사용한다 ## filter 필터링. 리턴하는 배열은 바뀌지 않는다. 안의 함수가 true, false를 확인해서 true를 반환한 값만 모아서 배열로 리턴. let idol = [ { age: 10, type: '남성', name: '방탄소년단' }, { age: 5, type: '남성', name: '샤이니' }, { age: 14, type: '남성', name: '동방신기' }, { age: 2, type: '여성', name: '2NE1' } ]..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.11.19 강의자 : 김민태님 ## 함수 가변인수, 함수 인수의 개수가 가변적인 것. 함수는 함수의 만들어진 목적대로 활용이 되려면 값의 종류와 인수의 개수를 검사해야한다. 인수의 검증. 가장 기본적인 방법은 if문을 사용해서 인수를 확인하는 방법. 함수의 사양보다 많이 전달된 인수는 함수 호출과 함께 유사배열(arguments)에 담겨서 전달된다. 이 arguments는 언제나 전달된 모든 인수가 왼쪽부터 오른쪽 순서대로 담겨진다. 함수 호출될때마다 전역으로 만들어진다. 배열처럼 사용이 가능한 것. 배열의 기본적인 형태만 사용가능하기 떄문에 유사배열이라고 한다. 순서대로 들어가있는 요소. 브라켓을 사용해 순서대로 값에 접근이 가능하다. l..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.11.14 강의자: 김민태님 ### 라이프 사이클 자바스크립트의 자원들, 값, 변수, 함수 등은 생애주기를 가진다 ### 스코프 모든 값은 저장되며 저장되기 위해서는 저장소가 필요한데, 값이 저장되는 장소를 스코프라고 한다. 전역스코프 - 단하나만 존재, 글로벌스코프가 생겼다는건 소프트웨어의 시작을 의미한다. 코드의 관점에선 언제나 존재하는 것 함수스코프(지역스코프) - es2015까지는 지역스코프, 함수스코프 같은 의미 블럭스코프(es2015에서 추가됨) - 함수가 아닌 블럭에 의해서 만들어진 스코프, 블럭은 코드블럭. if문이나 반복문의 {} 사이안에서 존재하는 스코프 스코프는 중첩될 수 있다. 바깥 쪽에선 안쪽을 알 수 없다. 안 쪽에..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.11.12 강의자: 김민태님 객체는 순서가 없는 값의 집합 객체를 만드는 가장 기본적인 방법 - 객체 리터럴 let box = {};//객체 리터럴 Function a(){//함수사용 객체생성, 인자로 값을 받아 객체에서 변수로 사용. let box = {} Return box; } 결과는 객체리터럴 방법과 함수사용법과 동일하다 Let a = {}; Let b = {}; 위 객체는 내용적으론 둘다 값이 없다로 같지만, 자바스크립트의 객체는 내용적으론 같아도 물리적으로는 다르다! 각 객체는 유일하다. New 연산자 사용 함수형객체 생성방식을 조금 더 쉽게 사용할 수 있도록. 객체리터럴방식과 함수사용 방식을 이해해야 new연산자 사용방식을 이해..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.11.07 강의자: 김민태님 api - Application Programming Interface, 앱을 프로그램으로 만들기 위해 필요한 창구. 앱과 - 스크린, 마우스, 키보드, 네트워크 등(컴퓨터의 자원들)와 소통할 수 있도록. 앱과 컴퓨터의 자원이 코드로 소통할 수 있도록 하는 것. sdk - software development kit, api의 묶음. ui - userinterface 사용자가 화면에서 보는 여러가지 요소들, 사용자와 프로그램이 소통하기 위한 창구. ##이벤트 시스템 버튼이 있다. 이 버튼을 누르는 것. 이벤트가 발생한다. 그리고 이러한 이벤트가 한곳에 기록되어있다. 기록지를 보고 버튼클릭이라는 것이 있으면 함수를..

주제: 자바스크립트 강의: 자바스크립트 부트캠프 날짜: 2018.11.05 강의자: 김민태님 prompt(), alert() - 함수, 모양을 보아도 함수. ()호출하고 있다. window.prompt() -> window객체에 있는 prompt메소드 window는 가장 상위에 있는 전역객체이기 때문에 생략이 가능. prompt의 반환값은 모두 문자열. 숫자입력도 문자열로 리턴한다. 내가 무엇인가를 만드려고 할 때 그림으로 그려보자(최대한 단순하게 그림으로 도식화하기) 문제가 여러개가 있고 사용자가 답을 입력하는 프로그램 만들기 문제1) 문제가 여러개다. -> 배열, 객체 여러개지만 문제에 각 이름은 필요없다 -> 배열(문제데이터) 답도 여러개다. -> 배열(정답데이터) 문제가 여러개가 들어있다. 문제를..