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

javascript 26

자바스크립트에서 CSS 다루기

하나씩 변경하기 const element = document.querySelector("h1") element.style.color = 'blue' // 변수 값을 사용 하고 싶다면 백틱 기존에 정의된 style에 새로운 속성 추가 여러개 변경하기 const element = document.querySelector("div") element.style.cssText = 'color:blue; background-color:red' // 변수 값을 사용 하고 싶다면 백틱 기존에 정의된 style을 지우고, cssText로 덮어씀 참고링크 : https://hianna.tistory.com/671

모던 자바스크립트 Deep Dive #09 (원시 값과 객체의 비교 )

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체타입)은 크게 원시 타입promitive type과 객체 타입object/reference type으로 구분할 수 있다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값immutable value이다. 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값mutable value이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달pass by value라 한다. 객체를 가리키는 변수를 다른 ..

모던 자바스크립트 Deep Dive #07 (타입 변환과 단축 평가)

타입 변환이란? 자바스크립트의 모든 값은 타입이 있으며 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환explicit coercion 또는 타입 캐스팅type casting이라 한다. 반대로 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데, 이를 암묵적 타입 변환implicit coercion 또는 타입 강제 변환type coercion이라 한다. 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아니다. 원시 값은 변경 불가능한 값immutable value이므로 변경할 수 없다. 타입 변환이란 기존 원시 값을 사용해 다른 타..

☕ 문벅스 카페 메뉴 앱 만들기 #01 (에스프레소 메뉴판 만들기)

☕ 블랙커피 Vanilla JS Lv1. 문벅스 카페 메뉴 앱 만들기 메이커준님 유데미 강의 시작! 강의도 여러개 끊어놓고 책도 읽고 있지만 그저 따라치고 뭘 어떻게 만들어야 할지 갈피를 잡지 못하던 나에게 딱 필요한 강의인 것 같아서 유데미 할인할 때 저렴하게 질렀다!! (이렇게 산 것만 수두룩^^*) 강의 목적 바닐라 자바스크립트를 아는 걸 넘어 자바스크립트를 잘 사용하는 방법(사고하는 방법) 바닐라 자바스크립트로 상태관리가 가능한 애플리케이션 만들기 1. 요구사항 분석 요구사항의 목적을 명확히 체크 (기능 구현을 위한 필요한 지식과 개념이 무엇인지 파악) 기능을 세부적으로 쪼개서 (메뉴추가/수정/삭제) 순서대로 적어보기 ※ 요구사항 예시 ※ 에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입..

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

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

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

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

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

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

코어 자바스크립트 #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는 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있는데, 브라우저 환경에서 전역 객체는..

[노마드코더] 바닐라 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..