자바스크립트 - 클로저 자바스크립트에서 클로저는 "함수와 그 함수가 선언됐을 때 렉시컬 환경과의 조합이다." MDN docs의 예시를 보면서 저 말의 의미를 탐구해보자. makeFunc()함수는 내부의 displayName()함수를 리턴하는 함수이고 이를 myFunc라는 변수가 리턴을 받게 된다. 결국은 myFunc가 displayName함수를 갖게 되는데 이때 myFunc를 실행하면 makeFunc내부의 변수 name에 접근할 수 있게 된다. 상식적으로는 함수가 종료된다면 그 함수의 변수에는 참조할 수 없는 것이 맞을텐데 이 구조에서는 함수가 종료되어도 어떠한 변수에 의해서 참조되고 있기 때문에 종료된 함수의 변수에도 참조할 수 있게 된다. 즉 "외부함수가 종료되어도 참조만 된다면 그 함수 내부의 값들..

Vue - 사용자 지정 directive Vue에서 directive는 Vue 자체에서 내장하고 있는 directive와 사용자 지정 directive가 있다. 전자의 경우 html태그를 보다 동적으로, 효율적으로 다룰 수 있게 해주고, 후자의 경우는 사용자가 직접 디렉티브 지시어를 설정해 사용함으로써 특정 기능을 만들 수 있다. 이번 게시글에서는 사용자 지정 directive를 다뤄볼 것이다. 왜 사용자 지정 directive를 사용하는가? 1) 지시어를 선언함으로써 재사용성이 증가한다. (여러 컴포넌트에서 사용할 때) 2) 개발자의 의도로 directive hook을 통해 DOM에 side-effect를 줄 수 있다. (mounted 훅의 코드를 줄여주는 등) 사용자 지정 directive에는 전역과..

다음 순열-next_purmutations 파이썬에서 순열에 대한 라이브러리는 제공하지만 다음 순열값을 불러오는 것에 대해서는 제공하지 않는다. 순열은 서로 다른 n개에 집합에서 r개를 순서있게 나열하는 것이다. 보통 알고리즘 문제에서는 1) a,b,d,e 다음에 나올 최솟값은 무엇이 나오는가? 2) 1,2,4,3,5 다음에 나올 최솟값은 무엇인가? 로 볼 수 있다. 필자는 해커랭크 문제에서 해당 알고리즘의 필요성을 느꼈다. https://www.hackerrank.com/challenges/bigger-is-greater/problem?isFullScreen=true Bigger is Greater | HackerRank Rearrange the letters of a string to construc..

웹팩이란 웹팩은 번들링(통합) 작업을 통하여 javascript, css, html파일 등을 하나의 파일로 통합시켜주는 도구이다. 이는 모듈 번들러라고도 부른다. 웹팩을 알기 전에 웹팩이 필요한 이유에 대해서 생각해보자. 웹팩의 필요성 1) Network의 request가 감소한다 -> 웹팩을 사용하지 않을 때 브라우저는 그 대상이 css든 png파일이든 javascript파일이든 여러개의 request를 보낸다. 이는 서버 로딩시간에 연결되며 사용할때와 사용하지 않을 때 큰 차이가 나타난다. 2) 파일 단위로 변수를 관리할 수 있다 -> 하나의 html파일 내부에서 여러가지의 script를 가지고 온다고 가정해보자. script파일에서 불러온 변수들은 무수히 많을 것이고 이들 내부의 변수이름이 같다면 ..

npm 그리고 node.js NodeJS는? node.js는 자바스크립트 실행할수있는 환경이다. 이를 이용하여 브라우저 밖에서도 자바스크립트를 사용가능하기에 네이티브 앱, 커맨드라인 명령어 개발, 프론트엔드 개발, 백엔드 개발 등에서 사용이 된다. npm은? npm은 자바스크립트로 이루어진 라이브러리를 관리하는 도구이다. 이를 이용하여 유용한 라이브러리들을 손쉽게 설치하고 삭제하고 설정을 관리할 수 있다. npm init -y를 하면 기본값으로 package.json파일이 생성된다. package.json 파일 내부는 아래와 같다. { "name": "npm", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": ..

Vue-firebase 프로젝트 생성하기, 웹 호스팅 이번 글에서는 Vue에서 firebase 프로젝트를 생성하려고 한다. firebase 백엔드를 이용하면 데이터베이스에 대한 지식없이도 간편하게 스스로 웹사이트의 폼에 대한 정보나 그 외 정보들을 저장하고 관리할 수 있다. 1. 먼저 google에 firebase를 검색해서 사이트에 들어가고 오른쪽 상단에 콘솔로 이동을 누른다. 2. 프로젝트 생성을 클릭하고 프로젝트 생성에 아무거나 적어준다. (계속을 누르다보면 애널리틱스 생성과 같은 것도 있는데 이것도 어떻게 하든 상관없다. 일단 넘어가자) 3. authentic에 들어간 뒤 4가지 탭 중에 Sign-in method에 들어간다. 4. 만약 이메일에 관한 데이터정보를 담고 싶으면 이메일을 클릭한 뒤 ..