javascript
-
[javascript] this bindingjavascript 2021. 1. 10. 16:46
🙇♂️ 서론 🙇♂️ 이 글은 개발한지 1년이 된 예비 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정했으면 하는 부분은 댓글로 알려주시면 감사하겠습니다. this란? this는 이 메소드를 호출한 인스턴스를 가르킨다. this binding? javascript에서는 this binding이 다른 객체지향 언어와는 다르게 설정된다. 다른 언어들은 그 메소드를 호출한 인스턴스로 바로 잡히지만 javascript는 method로 호출하는지 혹은 함수로 실행하는지에 따라서 달라진다. 위를 보면 4가지 상황이 나오게 된다. 1. 전역 전역은 기본적으로 Window에 this가 바인딩 된다. node라면 Global에 된다. 2. 인스턴스 안에서 메소드 호출 인스턴스 안에 있는 메소드는..
-
what is webpackjavascript 2021. 1. 6. 09:39
🙇♂️ 서론 🙇♂️ 이 글은 개발한지 1년이 된 예비 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정했으면 하는 부분은 댓글로 알려주시면 감사하겠습니다. what is webpack webpack은 javascript file들을 dependency에 따라서 파일을 모아 주는 번들러 입니다. why we use webpack? 그럼 우리는 왜 웹팩을 사용하는 것일까요? 이유는 단순합니다. 브라우저 입장에서 여러개의 파일을 다운받는 것은 매우 부담스럽고, 무겁습니다. 그래서 webpack은 엄청나게 많은 파일들을 적은 수의 파일로 묶어서 넘겨 주는 것입니다. webpack의 장점 webpack말고도 gulp나 다른 여러가지 번들링 툴들이 있는데 우리는 왜 굳이 webpack을 사..
-
표현식과 문javascript 2021. 1. 6. 09:30
🙇서론🙇 이 글은 벨로그를 보다가 자신의 근본이 부족하다고 생각하게 된 1년된 세미 개발자가 쓴 글로, 오류가 있다면 댓글이나 메일로 보내주시면 감사히 반영하겠습니다. 어디서 나온겨? javascript를 공부하다 보면 표현식과 문의 차이점을 물어볼 때가 가끔 있다. 필자도 글을 읽다가 javascript를 공부한다면 꼭 알아야 한다고 해서 공부하고 글을 남긴다. 나같은 우매한 자가 더 많아지지 않기를 바라면서 글을 쓴다 표현식 표현식은 값으로 평가될 수 있는 것들 을 말한다. 예를 들면 리터널들도 표현식이라고 할 수 있고, 값을 리턴하는 녀석들을 표현식이라고 할 수 있다. 표현식이 평가되면 값을 리턴하거나 참조한다. 문 프로그램을 구성하는 최소 단위이다. 구분법 간단하다 표현식만 가지고 있는 특별한..
-
axios intercepter를 이용한 error handlingjavascript 2021. 1. 5. 17:00
Error Handling? error handling은 언제 해야 할까요? 대체적으로 프론트엔드에서는 에러 핸들링을 해야 할때는, api server와 통신할 때 자주 해야 합니다. 프론트엔드 개발자라면, api server와 통신할 때, 특정 error에 대응해주어야 할 때, 코드 중복이 자주 발생하는 것을 느낀 적 있을 겁니다. (적어도 저는 그랬습니다.) 물론 요청마다 겹치지 않는 handling도 있지만, 401같은 token expired는 공통적인 error입니다. 그럼 저 401같은 에러는 한군데 묶어서 관리할 수 있지 않을까요? Axios Intercepter axios에는 request를 보내기 전이나 response를 받기 전에, 코드를 실행할 수 있습니다. axios intercep..
-
npm install과 버전문제javascript 2021. 1. 4. 17:20
npm install npm install은 package.json에 있는 dependency가 있는 library들을 다운받는 명령어 이다. package.json은 dependency version을 ^를 이용하여 다운로드 한다. 이 때, ^는 어떤 방식으로 구동될까? 다음과 같이, ^1.1.0으로 표기되어 있을 경우에 1.1.0에서 2.0.0의 범위를 가지고 있다고 내포하고 있다. 하지만 0.0.x부터는 miner version을 범위로 치기때문에, 2번째 범위인 ^0.0.1이면 0.0.1
-
progressive Server Side Renderingjavascript 2021. 1. 4. 11:45
서론 이 글은 UX와 최적화에 관심이 많지만, 개발한지 1년밖에 안됀 예비 개발자가 쓴 글이므로, 오류 및 오타가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다. CSR Client Side Rendering(클라이언트 사이드 렌더링) html을 클라이언트에서 주고, javascript로 서버에 요청해서 내용을 채우는 방식이다. 출처(https://medium.com/the-thinkmill/progressive-rendering-the-key-to-faster-web-ebfbbece41a4) 다음과 같은 형식으로 이루어 지는데, html 프레임을 가지고 있고 그 안에 컨텐트들은 javascript로 인한 통신 후에 만들어 진다. 출처: (https://medium.com/the-thinkmill/..
-
pwa 생명주기javascript 2021. 1. 2. 14:40
읽기 전에... 이 글은 pwa를 막 접한 세미 개발자가 쓴 글로 오류가 있다면 댓글로 혼내주시면 감사하겠습니다. PWA의 serviceWorker.js pwa의 시작이자 꽃이라고 할 수 있는 serviceWorker가 어떤 경로로 등록되고, 삭제되는지 알아보자. 다운로드 navigator.serviceWorker.register를 사용하고 나면 새로운 서비스 워커를 등록할 때 마다, 자바스크립트가 다운로드되고 파싱되고 나면, 서비스 워커는 설치중 상태에 들어서게 됩니다. 설치가 성공적으로 이루어지면 다운로드 완료 상태가 되고, 에러가 발생하면 페이지를 새로고침하여 다시 등록하거나, 중복 상태에 빠져들게 됩니다. 중복상태 시에는 아에 스크립트를 사용할 수 없게 됩니다. 만약 다운로드중 상태를 오래 유지해..
-
Event Capturing, Event Bubblingjavascript 2021. 1. 1. 17:52
서론 js에서는 html에서 발생하는 event를 인식할 수 있는 event handler가 있다. 이 때, event handler가 event를 인식할 때, 특별한 형태로 event가 발생하게 되는데, 이에 대해 알아보자. Event Bubbling, Capturing 다음과 같은 html이 있을 경우에, 밑과 같이 event가 일어난다. 출처 우선 Event Capturing이라는 것이 일어나는데, 최상단 요소에서 클릭한 요소로 찾아가는 과정을 의미합니다. 이 과정에서, 이벤트가 따로 발생된다거나 그런 것은 없습니다. 그 이후에, 클릭한 요소에서 이벤트가 발생합니다. 여기서 등록한 event handler가 실행됩니다. 그 이후에는 Event Bubbling 이 일어납니다. Event Bubblin..