본문 바로가기

분류 전체보기

 (112)
[JavaScript] 콜백함수의 this와 콜백지옥 콜백함수란? 콜백함수는 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다. 함수 안에서 특정한 시점에 콜백함수가 호출될때, 호출 시점에 제어권도 같이 넘어간다. //콜백함수 예제 1 [1,2,3].forEach(el=>console.log(el)) // 1 2 3 //콜백함수 예제 2 const cbFunc = () =>{ console.log('콜백함수 호출') } const func = (text,callback) => { console.log(text); callback() } func('함수호출',cbFunc) // '함수호출' // '콜백함수 호출' 콜백함수의 this 객체의 메서드를 콜백함수로 사용하면, 메서드가 함수로서 호출되면서 객체와의 연결성이 사라져 this가 달라진다. (..
[ ESlint & Prettier ] 문법오류, 코드정리 도와주는 도구들 자바스크립트로 개발을 할때, 문법오류나, 코드 정리를 해주는 도구인 ESlint와 Prettier에 대해 정리해보았다. 1 . ESlint ES LInt는 ES + Lint의 합성어이다. ES는 Ecma Script로서, Ecma라는 기구에서 만든 Script, 즉, 표준 Javascript를 의미하고, Lint는 에러가 있는 코드에 표시를 달아 놓는 것을 의미한다. 에러와 코드를 일관되게 잡아주기 때문에 여러명이 협업시 유용하다. 코딩 컨벤션 및 안티패턴들을 자동 검출하므로 사용하는것이 좋다고 한다. ESLint 설치 $ npm init -y $ npm i -D eslint //lint 초기화 설정 $ node_modules\.bin\eslint --init ESLint 설정 설정을 전부 마치면 루트 ..
[JavaScript] 명시적으로 this를 바인딩하는 방법 앞서 정리한 내용에서 this는 실행 컨텍스트가 생성될때 결정되고, 어떻게 불리느냐에 따라서 this가 달라지며, 어떤 상황에서 전역객체를 가리키고, 렉시컬 객체를 가르키는지 정리했었다. 그 중 콜백함수 호출 시 그 내부에서의 this는 생각했던것과 다르게 this를 가리키고 있었는데, 이에 관해 this를 바인딩하는 방법에 대해 정리해보도록 한다. 바인딩 메서드와 객체를 this로 묶어놓는 것을 말한다 1 call 메서드 사용 반환값 : this(첫번째 인자) 와 매개변수(나머지 인자)로 호출된 함수의 값이 반환된다. 2 apply 메서드 사용 반환값 : this(첫번째 인자) 와 매개변수(배열)로 호출된 함수의 값이 반환된다. call과 apply메서드는 서로 같으나, 차이로는 매개변수로 사용할 인자..
[Javascript] 자바스크립트의 this this라는 의미는 그냥 당장 지금 호출된 함수라던가 그 내부 변수를 가르킬것 같지만 직접 코딩을 하다보면 this가 생각과 다른것을 가르키고 있을때가있다. 그래서 this에 대해 정확히 정리하고 넘어가기로 한다. this는 어떤 방식으로 호출하느냐에 따라 가리키는 값이 달라지는데, this는 실행 컨텍스트가 생성될때 결정된다 = 즉 ,함수가 호출(실행) 될때 결정 1 전역 공간에서의 this 전역 공간에서의 this는 전역객체 window 를 가리킨다. 2 메서드로 호출할때 그 내부에서의 this 메서드 내부에서의 this에는 호출한 주체(함수명 앞의 객체)에 대한 정보 가 담긴다. 점 표기법이든 대괄호 표기 법이든, 어떤 함수를 호출할때 그 함수이름 앞에 객체가 명시되어있는 경우는 메서드로 호출한 것..
[Javascript] 실행 컨텍스트와 호이스팅, 스코프체인 실행 컨텍스트와 환경정보 실행 컨텍스트 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아놓은 것. 수집 순서 1 . 전역 - 브라우저에서 자동으로 실행하기 때문에 JS 파일이 열리는 순간 활성화된 im-designloper.tistory.com 이전에 정리했던 내용과 이어집니다 ↑ 참고 Lexical Environment 실행 컨텍스트의 환경정보 중 하나 아래와 같이 나뉘어 지는데 , 이와 관련해서 호이스팅과 스코프 체인에 대해 정리해 보려고 한다. - Environment Record : 현재 코드와 관련된 식별자 정보들이 저장된다. ➡︎ 호이스팅과 관련 - Outer environment Reference : 현재 호출된 함수가 선언될 당시의 외부 Lexical Environment을..
[Javascript] 실행 컨텍스트와 환경정보 실행 컨텍스트 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아놓은 것. 수집 순서 1 . 전역 - 브라우저에서 자동으로 실행하기 때문에 JS 파일이 열리는 순간 활성화된다. 2 . (선언이 아닌) "호출되는 함수" 순서. 함수가 호출되면, 그 함수에 관련된 환경정보를 수집해서 실행 컨텍스트를 생성하고, 콜스택에 담는다. 그러면 기존에 실행되던 코드는 중단되고, 지금 담긴 컨텍스트가 실행된다. 그리고 제일 처음에 담겼던 전역 컨텍스트까지 종료되면 콜스택은 실행해야 할 코드가 없는 빈 상태가 된다. 기존에 실행되던 코드는 중단되고 ::의 이유 자바스크립트는 싱글스레드 언어로 콜스택이 하나이기 때문에 콜스택에 새로운 컨텍스트가 쌓이면 새로운 컨텍스트가 기존 컨텍스트보다 먼저 실행되고 , 새로..
[NVM] node 이전버전 사용하기 프로젝트 파일을 npm으로 install 하는데, 오류가 났다. 내 컴퓨터의 node 버전이 최신이라 버전을 낮춰서 사용해야 한다고 해서 그 내용을 정리하려고 한다. NVM 이란? Node Version Manager 으로, 말 그대로 Node의 버전을 관리해주는 매니저이다. 여러개의 Node 버전을 설치하고 쉽게 사용할 수 있다. 01 npx 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 참고 github.com/nvm-sh/nvm 02 설치 확인 nvm ls 03 Node 설치하기 // nvm install 원하는node버전 nvm install 10.19.0 04 Node 버전 적용 // nvm u..
[ Vue ] Vue Router 사용하기 ( + query , params ) Vue Router 라우팅이란 웹 페이지의 간의 이동방법을 의미. Vue Router는 1) URL에 따라 보여줄 컴포넌트를 연결해 놓고, 2) 해당 URL로 이동했을때 연결된 컴포넌트를 보여준다. Router 설치 npm i vue-router --save routes 파일 생성 설치 후 routes.js 파일을 만들고, 사용할 컴포넌트들과 vue, vuerouter 등을 import 해준뒤 ulr과 컴포넌트들을 연결해준다. import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../views/Main.vue' // route에 등록할 컴포넌트들 등록 Vue.use(VueRouter) export const router =..
[ Vue ] CLI로 SPA프로젝트 생성하기 + Vuetify Vue CLI Vue CLI 는 Vue.js 를 생성, 관리, 실행할 수 있는 Command Line Interface 이다. Vue CLI 를 사용하면 Webpack, Babel, Lint, TypeScript, Vue Router, Vuex 등의 다양한 피쳐들을 선택해서 프로젝트를 생성할 수 있다. CLI 설치 npm install -g @vue/cli 프로젝트 생성 //vue create 생성할프로젝트이름 vue create new-project-name “Please pick a preset:” 선택옵션에서 나오면 “default(babel, lint)” 항목을 선택한다. 프로젝트 실행 npm run serve Vuetify Vuetify는 Vue.js를 위한 개발된 디자인 프레임워크이다. Rea..
[ 디자인패턴 ] FLUX와 FLUX가 생겨난 이유 뷰 내에서 Redux처럼 전역 상내 관리를 할 수 있는 기능인 Vuex를 공부하면서 Flux패턴에 대한 이야기가 나와서 정리하려고 한다. 실제로 Vuex는 Flux 패턴에 영감을 받아 만들어졌다고하며, Flux는 ReactJS의 Redux의 디자인패턴이기도 하다. 글을 읽기 전에, 일단 MVC패턴이 뭔지 알아야 하므로 전에 작성해 두었던 아래의 글을 읽고 Flux에 대해 이해하는것이 좋다. [ 디자인 패턴 ] MVC, MVP , MVVM 디자인 패턴이란 ? 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 규약을 통�� im-designloper.tistory.com Flux 모델이 생겨난 이유 MVC..

티스토리툴바