누가봐도 인생 1회차의 기록장

자바스크립트 26

☕ 문벅스 카페 메뉴 앱 만들기 #02 (메뉴판 여러개 만들기)

1. 요구사항 분석 2. 로컬스토리지 개념 localStorage : 브라우저에 저장할 수 있는 저장소 (url 별로 저장 / key:value 형태로 저장) setItem() : 저장 getItem() : 가져오기 JSON.stringify() : 로컬스토리지는 문자열로만 저장되기 때문에 객체 형태를 문자열로 저장 상태(=데이터)관리 : 변할 수 있는 데이터 > 변하기 때문에 관리를 해줘야 하는구나! 3. 메뉴상태 저장하여 관리 (추가, 수정, 삭제, 불러오기) map() : 배열을 순회(리턴한 값으로 새로운 배열로 만듦) join() : 문자열을 하나로 합쳐줌 상태 초기화를 해주는 이유 : 어떤 데이터를 넣을지 정의하고 관리하는지 명확히 알 수 있음 data- : html마크업에서 어떤 데이터를 저장..

모던 자바스크립트 Deep Dive #01 (프로그래밍, 자바스크립트란?)

새로 시작한 책은 지금까지 읽었던 책 중에 가장 두껍다!! 그만큼 공부가 많이 되겠지? 자라나라 지식지식!! :) 프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션. 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물이 바로 코드다. 우리는 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야 한다. 이때 필요한 것이 Computational thingking(컴퓨팅 사고)이다. 컴퓨터와 사람은 사고, 인지 방식이 다르기 때문에 컴퓨터의 관점에서 문제를 사고해야 한다. 여기는 논리적, 수학적 사고가 필요하며, 해결과제를 작은 단위로 분해하고 패턴화 해서 추출하며, 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의..

코어 자바스크립트 #08 (클래스)

드디어 마지막 장까지 끝냈다!! 사실 뒤에 클래스 상속 부분이 더 있었지만 아직 개념이 안 잡혀서 그런지 예제 부분이 전혀 이해가 안 되길래 (책에서도 다 이해하려고 애쓰지 않아도 된다고 했음.. 아무튼 그랬음....) 지금은 과감히 스킵하기로 했다! 책 한 권 다 읽은 거 뿌-듯 :) 다음 책에서 모르는 내용 더 배우고 돌아와서 다시 읽을 때 수정해야지! 클래스와 인스턴스의 개념 이해 클래스Class : 공통 속성을 지닌 집단을 분류하기 위한 개념 인스턴스instance : 어떤 클래스의 속성을 지니는 구체적인 개체 현실의 개념과 다르게 프로그래밍 언어상 인스턴스는 어떤 인스턴스가 다양한 클래스에 속할 수는 있지만 이 클래스들은 모두 인스턴스 입장에서는 '직계존속'이다. 다중 상속을 지원하는 언어이든 ..

코어 자바스크립트 #07 (프로토타입)

정말.. 다들 이걸 이해하고 사용하는 걸까.. (흐린 눈) 나만 몰라... 나만 지식 없어...... 자바스크립트는 프로토타입prototype 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형prototype으로 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 유명한 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있다. 프로토타입의 개념 이해 constructor, prototype, instance var instance = new Constructor(); 어떤 생성자 함수Constructor 를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스..

코어 자바스크립트 #06 (클로저)

와.. 정말 너무 어려운 개념이다... 이해도 안 되고 집중도 안돼서 흐린 눈으로 책 본 것 같다ㅠㅠ 다음에 볼 때 더 집중해봐야지! 클로저의 의미 및 원리 이해 클로저Closure : 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달한 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 함수를 선언할 때 만들어지는 유효 범위가 사라진 후에도 호출할 수 있는 함수 - 존 레식, 《자바스크립트 닌자 비급》, 인사이트(p116) 이미 생명주기가 끝난 외부 함수의 변수를 참조하는 함수 - 송형주 고현준, 《인사이드 자바스크립트》, 한빛미디어(p157) 자신이 생성될 때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행될 때 사용할 변수들만을 기억하여 유지시키는..

코어 자바스크립트 #05 (콜백함수)

콜백함수 콜백함수callback function : 다른 코드의 인자로 넘겨주는 함수 콜백함수는 제어권과 관련이 깊다. '부르다, 호출(실행)하다'의 의미인 call과 '되돌아오다, 되돌다'의 back의 합성어로 '되돌아 호출하라'는 명령이다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 알려달라'는 요청을 함께 보내는 것. 이처럼 콜백 함수는 다른 코드 (함수 또는 메서드)에게 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 제어권 호출 시점을 스스로 판단해서 실행 (setInterval) 인자로 넘겨줄 값들 및 그 순서가 정해져 있음 (map 메서드) this : 콜백함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조하지만, 제어권을 넘겨받을 코드에서 콜백 함수에..

코어 자바스크립트 #04 (this - 2 명시적으로 this를 바인딩하는 방법)

call 메서드 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령. 이때 call 메서드는 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다. 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call 메서드를 이용하면 임의의 객체를 this로 지정할 수 있다. (메서드도 동일. 그냥 호출하면 this는 객체 참조, call 메서드를 이용하면 임의의 객체를 this로 지정) apply 메서드 call 메서드와 기능적으로 완전히 동일하지만 call 메서드는 첫번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정하는 반면, apply 메서드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다. call / appl..

코어 자바스크립트 #03 (this - 1 상황에 따라 달라지는 this)

양치기 공부스타일이 맞는 건지 처음 봤을 땐 하나도 이해 못 했던 내용들이 여러 강의랑 책이랑 번갈아가면서 공부하니까 제법 용어들도 눈에 익고 어느 정도 이해된다 (한.. 5%..? ㅎㅎ) 다음번에 볼 때는 이 내용들이 더 친근하게 와닿길..! this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정되는데, 실행 컨텍스트는 함수를 호출할 때 생성된다. 즉, this는 함수를 호출할 때 결정된다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다. 전역 공간에서의 this 전역 공간에서의 this는 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있는데, 브라우저 환경에서 전역 객체는..

코어 자바스크립트 #01 (데이터 타입)

인사이드 자바스크립트 후반부(프로토타입 체이닝 실행컨텍스트 스코프체인 클로저 등)는 거의 이해가 안되길래 책을 바꿔서 공부하고 다시 돌아가서 보려고 한다ㅎㅎ 목차를 보니 마침 내가 이해 못했던 부분 위주로 구성돼있음! 어차피 이쪽 책은 꾸준히 봐야 되니까...! 이것도 이해 못하면...? ㄱㅊㄱㅊ~! 다음 책 또 찜해놓음^^ . . 그런데... 그것이 일어나고야 말았다 저번책보다 더.. 어려운 책인 것 같다.. ㅎㅎ; 예제로 나오는 코드 이해를 못하겠어 ㅠ^ㅠ 데이터 타입의 종류 기본형(원시형Primative type) : 숫자number, 문자열string, 불리언boolean, null, undefined, 심볼Symbol(ES6 추가) 할당이나 연산시 복제 값이 담긴 주솟값을 바로 복제 불변성imm..

[노마드코더] 바닐라 JS로 크롬 앱 만들기 #07 (weather)

getCurrentPosition() : 장치의 현재 위치를 가져옴 openwhathermap 사이트 : https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweat..