JAVASCRIPT - BASICS

1. 바닐라 JS 란? 노마드 코더에서 바닐라 JS를 배우기 시작했다. 자바스크립트의 원형이라고 생각하면 된다고 한다. 라이브러리나 프레임워크가 없기 때문에 더 기초적인 코드를 짜야하지만 기본기를 배울 수 있다고 한다. 사실 노마드코더에서 파이썬 데이터 사이언스 수

나름대로 자신의 코드를 가진 독립적인 아이들이다. 객체안에 있는 함수를 메소드 라고 한다.함수를 정의 할 때 먼저 앞에 fuction 을 쓰고 그 뒤에 함수이름을 정해준다. 그리고 함수안에 코드를 작성한다. 함수이름 옆에 ()가 있다.여기에 들어가는 값을 argumen

클래스는 ES6 부터 제공되는 기능이다. 클래스는 객체가 아니고 객체를 담는 template 라고 생각하면 된다.(근데 typeof 클래스 라고 하면 fucntion이 나온다.) 참고로 클래스의 첫번째 method이름은 반드시 'constructor' 이어야 한다. '

또한 획득자와 설정자라는 method 가 있다. 함수처럼 생긴 mothod 이지만 함수가 아니다. 가상의 함수이다. constructor에서 설정한 property(\_carname)를 가져와서 set 할때 쓰이는 method들이다. 그리고 get 의 이름은 prope

우선 설명하기에 앞서 생성자 함수를 2개 만들자그리고 person을 personplus에 상속한다고 할때 위의 코드처럼하면 상속이 안된다. person이 아직 new를 통해서 객체화되지 않았기 때문에다. 그냥 일반 함수를 호출한것일뿐.여기서 중요한것은 this를 어떻게

콜백함수는 다른 함수의 인자로 들어가는 함수를 말한다. 흔히 비동기적(asynchoronous, 동시에 일어나지 않는, 다른걸 하고 있는 중에 일어나는, 순서대로 일어나지 않는)인 명령을 내리고 싶을때 사용한다.예를 들어 a = func / b = func이라고 할때.

콜백함수에 대해서 어느정도 알았다. 그런데 콜백 지옥이라는 것이 있다. 콜백함수안에 콜백함수가 있고 그 콜백함수 안에 또 다시 콜백함수가 있는 식이다. 끊임없이 nesting되어진 함수들인데 가독성이 무지하게 떨어져서 디버깅할때 상당히 힘들다. 예제를 한 번 보자.Us

말 그대로 약속하는 함수이다. promise안에 있는 어떤 조건이 완료가 되면 그 안에 있는 데이터를 return하겠다고 약속하는 것이다. Promise 함수안에는 resolve,reject를 인자로 하는 execute함수가 반드시 들어가야한다. 그래서 resolve함

promise 를 통해 구현하게 되면 then을 통해서 계속해서 앞의 return값을 받아와야하기 때문에 명령이 길어지게 된다. async를 이용하면 함수안에 깔끔하게 담아서 정리가능하다. 우선 과일을 따는 함수를 만들어 보겠다.그럼 이제 바나나와 사과 모두를 따는 함

DOM은 Document Object Model 의 약자로 객체를 이용해 html 이나 xml 을 수정, 보완, 생성, 삭제 등 modify 할 수 있는 기능을 말한다.이제 title.라고 하면 index.html 파일안에 있는 id = title 의 영향을 받고 있는

우선 글자를 클릭할때마다 색깔이 바뀌게 했다. css 파일안에 몇가지 변화를 추가했다. 첫번째로, pointer클래스를 추가하고 그안에 커서를 올릴때 커서모양으로 바뀌는 효과를 추가했다. 또한 컬러가 바뀔때 서서히 바뀌게 하는 효과도 추가하고 , clicked 라는 클

진짜 신기한 기능을 알았다. 클릭 할때 마다 모든 과정이 순차적으로 실행되고 과정마다 어떤 일이 일어나는지 상세히 설명해주는 기능이다. 우선 개발자 도구에서 sources 에 들어간다. 그리고 왼쪽에 자바스크립트를 클릭한다음 오른쪽 상단에 pause를 클릭한다. 그리고

movieApp의 pagination을 위해서 구글링을 하던 도중 inline형태로 click이벤트를 추가한것을 보게되었다. 그때, inline과 기존의 AddEvent와는 무슨 차이가 있나 싶어서 찾아보게 되었다.우선 inline으로 이벤트를 등록하는 방법은 두가지가

예전 KDT에서 바닐라 JS로 라우팅하는 법을 배웠는데 MovieApp을 만들면서 적용하게 되었다. 우선 알아야 할 문법은 아래와 같다customEventdispatchEventhistory API보통 우리가 알고 있는 이벤트는 built in event이다. clic

그냥 실험용으로 간단하게 만들어 보았다. trend, upcoming을 클릭하고 page를 클릭하면 url이 ?trend?page=1 로 바뀌게 했다.만약 search term이 있으면 ?searching?query='searchTerm'?page=1 요런식으로 주소가

자 그럼 클라이언트와 서버에서 랜더링이 어떻게 차이가 나는지 살펴보자. 기준은 , "랜더링 해주는 위치" 에 있다.무엇?: 서버에서 HTML이 랜더링 된 결과(완성된 웹페이지)를 브라우저로 전달해준다. 때문에, 사용자가 새로운 URL로 이동해 새로운 웹페이지가 필요할

to do list component를 진행하다가 drag and drop에서 제대로 공부해보게 되었다. 예전에 to do list 만들때는 j query를 이용해 구현했는데 이번에는 바닐라로 만들어보고 싶어서 파기 시작했고 나름 재밌고 유용한 기술이라 생각해서 art

Instagram Sidebar를 만들다가 발견하게된 문법(?)이다.보통 obj안에 obj를 desturcturing(이하 des)해야한다면 따로따로 des를 해야했다.요런식으로 말이다.근데 한번에 des할 수 있다.짜잔! 그리고 만약 active값이 존재하지 않으면

얼마전 throttle을 구현하려고 알아보다가 질문이 생겼다. '매번 throttle을 호출하면 throttle이 계속 새로 호출되게 되고 그럼 새로운 환경이 만들어질 것 같은데 어떻게 이전 환경을 유지할까?'아래 코드를 보면 shouldWait, waitingArgs

barrel은 통 이란 뜻인데 그냥 정리된 모든것을 index안에 깔끔하게 선언한다/담는다고 보면 될것 같다.아래는 barrel에 대해 organization에 적은 설명이다.각 컴포넌트에 해당되는 폴더를 만들고 그 안에 index.js를 만듭니다.예를 들어 index

출처 : https://ui.toast.com/posts/ko_20210611

출처: https://dmitripavlutin.com/parse-url-javascript/

출처: https://ui.toast.com/posts/ko_20210603

부모의 높이를 화면의 높이로 설정그리고 자식 element들의 높이 합이 부모보다 커야함. 그래야 스크롤할 공간이 생기니깐.parentElement.scroll({top:옮기고 싶은 위치}) 로 하면 됨

우선 리액트 플젝에서 three dots 아이콘을 누르면 context menu가 랜더링 되도록하고 이후 menu의 바깥 쪽을 클릭하면 없어지게 하기 위하여 useUnmountIfClickedOutside(이하 커스텀 훅) 를 이용하였다.그런데 위의 커스텀 훅에서 이벤

<실행컨텍스트>Record (스냅샷, 나의 환경 상태) / Outer(바깥 환경에 대한 참조)모든 실행컨텍스트에 포함되어있는 값들.호이스팅 1\. 선언문이 마치 최상단에 끌어올려진 듯한 현상 2\. 엔진이 코드스캔하면서 record에 기록하기 때문2-1

이번 글에서는 요 삼총사에 대해서 알아보려고 한다. 요 삼총사는 서로 연결되어있고 친하다. 우선 Symbol에 대해서 알아보장 Symbol 이 친구는 나만 알고 싶은 비밀의 방을 만들때 사용된다. 바로 코드로 보자 요런식으로 쓰인다. id객체는 id 변수를 통해서