분류 전체보기 검색 결과

해당 글 777건

this(1) : this에 대한 모든 것

다른 언어를 사용하다 자바스크립트로 넘어온 개발자는 this를 혼동하기 쉽습니다. this는 항상 메서드가 정의된 객체를 참조할 것이라고 착각하죠. 이런 개념을 'bound this'라고 합니다. 자바스크립트에서 this는 런타임에 결정됩니다. 메서드가 어디서 정의되었는지에 상관없이 this는 ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정됩니다. 이렇게 this가 런타임에 결정되면 좋은 점도 있고 나쁜 점도 있습니다. 함수(메서드)를 하나만 만들어 여러 객체에서 재사용할 수 있다는 것은 장점이지만, 이런 유연함이 실수로 이어질 수 있다는 것은 단점입니다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { a..
Programming Language/🟨 Javascript (Core) 2020. 4. 15. 04:28

실행 컨텍스트(2) : 스코프, 스코프체인

스코프는 식별자에 대한 유효 범위입니다. 함수 내부에서 선언한 변수는 함수 내부에서만 사용 가능합니다. 글로벌 변수와 지역 변수에 대해 공부하면서 이 개념에 대해 얼핏 감을 잡아본 경험이 있을 것입니다. 이런 스코프 개념은 JS뿐만 아니라 python, C 등 거의 모든 언어에서 해당되는 개념입니다. 이러한 스코프를 안에서 부터 바깥으로 차례대로 검색해 나가는 것을 '스코프 체인'이라고 합니다. 이를 가능케 하는 것이 LexiclaEnvironment의 두 번째 수집 자료인 outerEnvironmentReference입니다. outerEnvironmentReference은 현재 호출된 함수가 선언될 당시의 LexiclaEnvironment를 참조합니다. 앞서 실행 컨텍스트에서 살펴보았듯 LexiclaE..
Programming Language/🟨 Javascript (Core) 2020. 4. 15. 01:54

실행 컨텍스트(1) : 실행 컨텍스트와 호이스팅

(JavaScript) 실행 컨텍스트 - 클로저와 호이스팅 안녕하세요. 이번 시간에는 범위에 이어 실행 컨텍스트와 클로저에 대해서 살펴보겠습니다. 제가 지난 시간에 실행 컨텍스트가 제일 중요하다고 하면서 강좌를 마쳤습니다. lexical scoping과 이것만 이해하면 자바스크립트를 이해하는데 필수적인 개념인 호이스팅, 클로저 www.zerocho.com 실행 컨텍스트와 콜스택 실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 동일한 환경에 있는 코드들을 호출 스택(콜 스택)에 쌓아뒀다가 가장 위에서부터 하나씩 실행하는 것입니다. 실행 컨텍스트를 구성할 수 있는 방법으론 전역 공간, eval(), 함수 등이 있습니다. 전역 공간(전역 컨텍스트)은 ..
Programming Language/🟨 Javascript (Core) 2020. 4. 14. 23:32

데이터 타입, immutable와 deep Copy, freeze, 메모리

Primitive & reference JS의 데이터 타입에는 기본형 혹은 원시형이라고 불리우는 Primitive type과 참조형 reference type이 있다. 위의 분류를 좀 더 정확하게 적자면 다음과 같습니다. 사실 Refence의 모든 타입들은 Object의 변형입니다. 편의를 위해 분리하여 적었을 뿐입니다. Primitive : number string boolean null undefined (Symbol) Reference : Object (Map, WeakMap, Set, WeakSet) Array Function Date Regex (괄호 속의 자료형은 ES6에서 추가된 것을 말합니다.) Primitive Type의 불변성 immutability 원시형과 참조형을 구별하는 가장 큰 ..
Programming Language/🟨 Javascript (Core) 2020. 4. 14. 19:53

코어 자바스크립트 : 소개

참고하면 좋습니다. 한국어 번역이 활발하게 이루어지고 있습니다. Hello, world! ko.javascript.info 간헐적으로 콜스택이나 실행 컨텍스트 등 JS라는 언어의 특성에 관한 글을 올렸었는데 아무래도 체계적이지 못하다보니 한 번 쭉 정리할 필요를 느꼈었다. 악명 높은 코뿔소 책을 봐야하나 했는데 오래되기도 했을 뿐더러 설명도 그리 친절한 편이 아니라 대안을 찾던 중 한국에서 출판한 책을 발견했다. 이 책이 아무래도 번역투도 아니고 설명도 친절하고 무엇보다 "얇기 때문에" 참고하였다. 물론 참고 뿐만 아니라 책에 없는 내용이라고 하더라도 JS 언어의 특성과 구동 원리를 다룬 내용을 자체적으로 추가할 생각이다. 왜냐하면 코어 자바스크립트라는 용어는 실행 환경에 독립적인 JS의 속성을 말하기 ..
Programming Language/🟨 Javascript (Core) 2020. 4. 14. 07:33

Nested Routing

React Router: Declarative Routing for React Learn once, Route Anywhere reacttraining.com React Router로 중첩 라우팅 하기 Engineering Blog by Dale Seo www.daleseo.com 기본적인 Routes는 다음과 같이 활용한다. Router 내부에 여러 개의 Route를 둔다. * react-router-dom의 모든 컴포넌트는 Router 내부에 있을 때만 작동함을 잊지 말자 * Route의 대상이 되는 컴포넌트에는 location, history, match라는 props를 갖는다. 여기서 match props가 네스트 라우팅을 구현하는데 주로 사용되므로 기억해두자. export default () =..
React, Next, Redux/⚛ React.JS 2020. 4. 14. 04:29

웹/앱 운영을 위한 서비스, 모듈

https://www.mailgun.com/ 메일건은 nodemailer와 결합하여 지금도 잘 쓰고 있다. SendGrid는 나를 화나게했다... 아마존에서도 메일 서비스가 있지만 우선은 Mailgun의 편리함 때문에 사용중이다. Mailgun Technologies Powerful Transactional Email APIs that enable you to send, receive, and track emails, built with developers in mind. Learn more today! www.mailgun.com https://mailchimp.com/ 만약 뉴스레터나 제품 홍보와 같은 까리한 메일 서비스가 필요하면 amichimp를 사용해보자. Your marketing univer..
미분류/Tip 2020. 4. 11. 23:40

fetch 간단 활용법 정리

Fetch API The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. developer.mozilla.org fetch사용시 유의 사항 (json() 함수 사용하기) · 쾌락코딩 fetch사용시 유의 사항 (json() 함수 사용하기) 25 Nov 2018 | javascript network basic js 개발자들은 network request 요청이 필요할 경우 대..
Programming Language/🟨 Javascript 2020. 4. 11. 20:19

Axios 공식 문서 정리 + cheat sheet

axios/axios Promise based HTTP client for the browser and node.js - axios/axios github.com Axios Cheat Sheet - Kapeli { // `url` is the server URL that will be used for the request url: '/user', // `method` is the request method to be used when making the request method: 'get', // default // `baseURL` will be prepended to `url` unless `url` is absolute. // It can be conve kapeli.com 백단과 프론트가 통신하..
Programming Language/🟨 Javascript 2020. 4. 11. 19:44

SEO의 첫걸음 : meta tag + og meta

meta 태그를 알아보자 (웹표준과 SEO) 처음 웹개발을 배울 때 웹표준을 배웠던 것 사실만 어렴풋이 기억난다. 그 이후 개발을 해오면서는 거의 신경쓰지 않고 개발했던 것 같다. 얼마 전, 이 블로그를 개발하면서 검색 엔진 노출을 위 junhobaik.github.io 일반 meta는 SEO를 위한 것이고 og는 다른 채팅 플랫폼이나 소셜 미디어에 노출되는 것을 의미합니다. 링크 이미지 추가 링크 붙여넣을 때 보이는 이미지는 어디서 오는 것일까? 들어가기 전에 이 글은 링크의 미리보기 제목, 설명, 이미지의 정체에 대해서 알고 싶은 마케터들을 위해 유용한 내용을 담고 있습니다. 오늘날 페이스북이나, 네이버 블로그, 카카오톡 등에서 어떤 링크에 대한 미리보기 제목, 설명, 이미지를 제공하고 있습니다. 링..
웹 전반, 브라우저/🔎 SEO 2020. 4. 10. 21:08