인생 1회차 (First-Life) Ing

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

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

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

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

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

처음 배우는 개념이라 아직 어렵긴 하지만 정말 신세계다..! 자바스크립트 공부하기도 바쁜데 다시 CSS 공부하는게 맞나 싶었는데 몰랐으면 후회할 뻔! 참고 (1분코딩 블로그) : https://studiomeal.com/archives/533 ※ 그리드에 대한 오해? "Grid는 인터넷 익스플로러에서 지원하지 않기 때문에 우리나라에서는 그림의 떡이다" X. IE10과 11에서도 구버전 스펙을 지원하기 때문에 좀 귀찮기는 해도 방법이 있다! 분명 한계는 있지만 뭐가 다른지를 잘 알아두고 대응하면 충분히 사용 가능! Grid 레이아웃을 만들기 위한 기본적인 HTML 구조 A B C D E F G H I 용어정리 그리드 컨테이너 (Grid Container) : display: grid를 적용하는 grid 전..

👉인프런에서 수강하는 1분코딩 강의 노트 flex는 html, css 하면서 한 번 공부했는데 Grid는 해본 적이 없어서 flex 복습 겸 grid 공부! 새로 알게된 내용도 있어서 신기ㅎㅎ 출처 : 1분코딩 블로그 https://studiomeal.com/archives/197 Flex 레이아웃을 만들기 위한 기본적인 HTML 구조 Hello flex bye Flex 컨테이너에 적용하는 속성들 display : flex 아이템들은 가로 방향(기본)으로 배치됨 자신이 가진 내용물의 width 만큼만 차지하게 됨 (inline 요소처럼) height는 컨테이너의 높이만큼 늘어남 inline-flex도 있는데, 이건 block과 inline-block의 관계와 같음 아이템들이 배치된 방향의 축을 메인 축 ..

남들이 봤을 때도 딱 알아보기 쉽게 정리하고 싶은데 (그래야 내가 나중에 다시 보기에도 쉽고) 정리가 너무 조잡한 거 같네.. ㅠㅠ 스코프, 스코프 체인 개념은 다시 봐도 어렵다 헿^^ 실행 컨텍스트 실행 컨텍스트execution context : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 스택 : 출입구가 하나뿐인 깊은 우물 같은 데이터 구조, 저장할 수 있는 스택이 넘칠 때 에러가 남 (ex. 데이터를 a, b, c, d 순으로 저장했다면 d, c, b, a 순으로 꺼냄, 후입 선출) 이것이 스택오버플로우의 그 '스택'!! 큐 : 파이프처럼 양쪽에 입구와 출구가 있는 구조 (ex. 데이터를 a,b,c,d 순으로 저장했다면 a, b, c, d 순으로 꺼냄, 선입선출) 동일한 환경에 있는 코드들을..

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

혼자 독학하다보니 내가 제대로 공부하고 있나 이걸 공부하는게 맞나 이 속도가 맞나 조금이라도 나아지고 있는 건가 라는 생각이 계속 든다ㅎㅎ 같은 걸 배우고도 남다른 결과를 만들어내는 사람들을 보면 더 비교되고 불안하고 막막하다 무작정 밀어넣는 주입식 교육에만 익숙했지, 혼자 해보고 응용해보고 이것저것 만들어보는 쪽엔 재능이 없는 것 같기도 하고... 뜻대로 안되는 환경에, 마인드컨트롤에, 내 학습력에 괜히 서러운 날이다