mystery

우아한테크코스 5기를 준비하는 과정에서 프리코스 과제들을 접하게 됐습니다. 프리코스의 모든 과제들은 바닐라 자바스크립트로만 구현하여 제출해야하는데..... 바닐라 자바스크립트만으로 무언가를 만들어본 경험은 개발을 처음 배우기 시작했을 때 밖에 없는 것 같아 자신감이 떨어졌슴다! 아니나 다를까! 역대 지원자들의 코드를 찬찬히 살펴보던 중.... 처음 보는 코드가 있더라구요...? createDocumentFragment() 이게 무엇인고 ? 바로 공부 들어갔습니다! 0. DocumentFragment 에 대한 이해! 아래는 DocumentFragment에 대한 설명입니다. DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. Docu..

1. Execution Context (실행 컨텍스트) 란? scope, hoisting, this, function, closure 등의 동작 원리를 담고있는 자바스크립트의 핵심 원리입니다. 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 말할 수 있습니다. 자바스크립트 엔진에 의해 실행 컨텍스트 내부에는 코드 실행에 필요한 정보들이 저장됩니다. 2. 실행 컨텍스트 생성, 삭제 과정 아래 코드는 실행 컨텍스트의 생성과 삭제 과정을 잘 표현해 주는 코드입니다. var x = 'xxx'; function foo () { var y = 'yyy'; function bar () { var z = 'zzz'; console.log(x + y + z); } bar(); } foo(); 코드의 실행 과정을 실행..

☠ 과연 정확히 알고 있는가? ☠ 구글 검색창에 Call by value, Call by reference를 검색하면 많은 자료들이 Call by value 함수 호출시 전달받은 인자가 원시 타입이면? 원본 값을 그대로 복사하여 매개변수로 전달합니다! 원본 값이 함수의 영향 받지 않습니다! Call by reference 함수 호출시 전달받은 인자가 참조 타입이면? 인자의 메모리 주소값(참조)을 매개변수로 전달합니다! 원본 값이 함수의 영향을 받습니다! 라고 설명하고 있습니다. 처음 Call by XXX 키워드를 검색해서 공부할 때 원시 타입, 참조 타입에 대한 값 복사 시 각각 어떤 차이가 있는지에 대해 이미 공부한 뒤여서 비슷한 내용이라고 생각했고 그다지 어렵지 않다고 생각해 차이점만 인지하고 넘어갔..

여태 class가 뭔지 몰랐던것을 반성하며 포스팅합니다잇 ! 1. class란? ES6에서 새롭게 추가된 'class' 기존에 존재하던 prototype을 베이스로 문법만 추가된 것이라고 합니다! (나중에... 꼭.. 알아보쟈..) 클래스는 연관있는 데이터를 한 곳에 묶어놓는 일종의 컨테이너 인데유~ 속성(fields) 과 행동(methods)이 정의되어 있습니다! class는 일종의 틀인데요~ 이것을 이용해서 데이터를 넣어 찍어내면? object를 만들 수 있습니다~ class는 한번만 선언하면 되고 여러번 재사용 할 수 있습니다~~~ 백문이 불여일견 만들면서 이해해 봅시댜잇! 1-1. class 선언하기! class 키워드로 시작해서 Person 이라는 class 를 만들겠슴다. constructor..

자바스크립트 기본기를 잘 갖추지 않고 리액트니 뭐니 쓰고있던 나. 초보방을 스킵하고 고수방을 들락날락 거리다 패배의 쓴맛을 본 이 시점에 빨리 공부 해줘야한다. 자자 가봅시다~ 레고~ 1. 프로퍼티 플래그( property flags )란? 객체는 키(key) + 값(value) 쌍으로 이루어진 프로퍼티(property)가 저장된 친구에요. 저는 객체가 이게 다 인줄 알았습니다... 하지만 놀랍게도 프로퍼티는 값(value) 과 함께 플래그(flag)라고 불리는 특별한 속성 세 가지를 갖습니다!!! 모두 true 나 false 값을 가집니다잇! 1. writable -> 값(value) 수정이 가능한지 여부입니다. [ write = 쓰다 ] 2. enumerable -> 반복문을 사용해 나열 가능한지 여..

스크롤과 휠 이벤트를 사용할 때 조건으로 이런 저런 높이 값을 사용 할 일이 많았다. 고래서 정리한다잇 1. scrollHeight 문서의 시작부터 보이지 않는 부분까지 !! 즉 전체 높이를 나타내유. 요로코롬 쓰면 됩니다유. 2. clientHeight 상단 탭, 주소표시줄, 즐겨찾기바, 하단 수평 스크롤바 , 문서의 마진 등등 전부 다 빼고!!!! 문서의 보이는 부분 !! 즉 뷰포트 높이에유. 요로코롬 쓰면 됩니다유. 자매품으로 innerHeight도 있습니다유 . 결과 값은 같아여~ 3. scrollY 문서의 최상단으로 부터 내려온 만큼의 높이!! 즉 최상단으로부터 스크롤한 높이에유. 요로코롬 쓰면 됩니다유. 자매품으로 pageYOffset도 있습니다유 . 결과 값은 같아여~ 4. 간단한 활용 (쓰..