언어 & 프레임워크

개요 이번 글에서는 JavaScript 언어의 핵심 개념 중 하나인 스코프(Scope)에 대해 알아본다. 스코프(Scope) 란? 오늘날 대부분의 프로그래밍 언어는 변수를 선언하여 값을 저장하고 필요한 경우 참조할 수도 있다. 이처럼 변수는 메모리 상에 할당된 공간을 나타내는 추상적인 개념이자 프로그래밍 언어가 제공하는 핵심 기능 중 하나이다. 이렇게 선언된 변수는 메모리 상에 할당되어 있지만, 일반적으로 프로그래밍 언어를 통해 코드를 작성할 때에는 변수가 어느 메모리 위치에 존재하는지 확인이 필요한 경우는 매우 드물다. 왜냐하면 메모리 공간을 추상화한 것이 변수이고, 우리는 이를 제대로 식별할 수 있기만 하면 되기 때문이다. 보다 추상화 수준이 올라간 "프로그래밍 언어" 수준에서 생각해 보자. 프로그램..

안녕하세요, 이번 포스트에서는 컴포지션 API(Compisition API)에서 템플릿을 참조하는 방법에 대해 소개하려고 합니다. 사용 방법이 크게 달라지진 않았지만, 값으로써 참조하는 방법이 조금 바뀌게 되었습니다. 먼저, 기존의 템플릿 요소 참조 방법을 간략히 살펴보겠습니다. [ 기존 방식 ] 기존에는 참조하고자 하는 템플릿 요소에 ref="바인딩명" 형식으로 작성한 후, 마운트 이후 this 컨텍스트의 $refs를 통해 간단히 참조할 수 있었습니다. 다만, 컴포지션 API의 경우 this 컨텍스트가 존재하지 않으므로 조금 다른 방법으로 사용해야합니다. [ Composition API 방식 ] 참조하고자 하는 템플릿 요소에 ref 속성을 추가하는 방법은 기존과 동일합니다. 그러면 값은 어떠한 방법으..

(본 포스팅은 Vue 3와 타입스크립트를 사용하는 환경 기준으로 설명합니다) 안녕하세요 이번 포스팅에서는 Vue 3 버전부터 공식적으로 추가될 Composition API와 Vuex를 사용하는 방법에 대해 알아보려고 합니다. 기존에 사용하던 Vuex 저장소 접근 방식은 아래와 같이 바인딩된 this 컨텍스트의 $store를 통해 주입된 Vuex 저장소에 접근할 수 있었습니다. // Vuex store import vuex from 'vuex'; export default new Vuex.Store({ state: { name: '근둥' }, }) // Component export default { name: 'App', created () { console.log(this.$store.state.nam..

안녕하세요! 이번 포스팅에서는 이후 Vue.js 3 버전에서 추가될 Composition API에 대해 알아보도록 하겠습니다. 지금의 Vue.js는 2.6.11 버전이며 3버전을 향해가고 있습니다. 컴포지션 API(Composition API)가 등장한다는 소식에 많은 관심을 받았었는데요, 어떤 내용인지 한 번 알아봅시다. 1. 개발환경 준비하기 [사전 요구 사항] - Node.js (with NPM) - Vue CLI 지금의 Vue.js는 2.x 버전에 머물러 있기 때문에 컴포지션 API를 사용할 수 없습니다. 하지만, 플러그인을 통해 Vue.js 3에 추가될 컴포지션 API를 사용할 수 있습니다. https://github.com/vuejs/composition-api vuejs/composition..

이번 글에서는 자바스크립트의 self 에 대해 알아보려고 한다. this는 많이 접해보았을텐데 self 는 다소 생소할 수 있다. 이번 글을 통해 self가 무엇인지 한 번 알아보도록 하자. 1. self란 무엇인가? w3c의 문서를 확인해보면, self는 읽기 전용 속성이며 WindowProxy로서의 window 자신을 반환한다고 한다. 꽤 난해한 설명인데 WindowProxy는 또 무엇인지 궁금해 할 수 있다. WindowProxy는 브라우징 컨텍스트와 관련되어있는 주제이므로추후 다른 글에서 자세히 알아보도록 하고, 지금은 단순히 전역 객체인 window 객체 자체를 반환한다고 이해하면 된다. self는 결국 전역 객체인 window를 반환하는 속성이다. self가 this와 같은 키워드라고 오해할 ..

이번 포스팅에서는 ES6 에 추가된 전개 구문(Spread syntax, ...) 활용 트릭을 몇 가지 소개하려고 한다. 구글링을 해보면 꽤 많은 트릭과 활용 방법들이 있는데, 그 중 간단하면서 자주 사용할 수 있는 내용으로 구성해보았으니 한 번 알아보도록 하자. Rest parameter 나머지 파라미터 Rest parameter는 전개 구문에 해당하는 내용은 아니지만 눈에 보이는 코드 상으로 유사하니 한 번 알아보려고 한다. Rest parameter는 이미 널리 사용하고 있을텐데, 함수의 매개변수 갯수가 정해져있지 않을 때 사용하게 된다. const sum = (acc, ...nums) => { for (let num of nums) { acc += num; } return acc; }; sum(0..

안녕하세요 이번 포스팅에서는 ES6 (ECMAScript 2015)에 추가된 심볼(Symbol) 자료형에 대해 간단히 알아보도록 하겠습니다. 심볼은 자바스크립트의 원시(Primitive)타입으로 새롭게 추가되었습니다. 원시타입은 객체도 아니고 메서드도 아닌 타입을 의미합니다. 기존에는 string, number, boolean, null, undefined가 있었지만 여기에 오늘 알아볼 symbol 타입이 추가되었습니다. 심볼 생성 방법은 심볼 Wrapper 함수를 호출하면 됩니다. const sym = Symbol() 심볼을 생성할 때 구분하기 위한 데이터를 추가하여 생성할 수도 있습니다. Symbol(value) 심볼타입은 신기하게도 같은 value를 인자로 주고 생성하더라도 값은 같지 않습니다. S..

안녕하세요 이번 포스팅에서는 톰캣을 이클립스와 연동하는 방법에 대해 알아보도록 하겠습니다. 진행하기전에 먼저 톰캣과 이클립스가 설치되어있어야겠죠? [톰캣설치]http://codevkr.tistory.com/78 [이클립스 설치]http://codevkr.tistory.com/2 이클립스를 실행시키고 상단 메뉴의 File - Other을 선택합니다. 선택하셨다면 아래와 같은 창이 하나 뜹니다. 항목이 많은데 Server를 검색하거나 직접 찾아서 선택해줍니다. 서버를 선택하셨으면 서버 종류를 또 지정해야하는데 tomcat을 검색하여컴퓨터에 설치된 톰캣버전을 선택해주세요. 저는 톰캣 9.0 버전을 설치했기 때문에 9.0으로 선택했습니다. 아래 빨간 네모 부분은 서버가 외부에 있을 경우 호스트를 변경해주셔야합니..

안녕하세요 이번 포스팅에서는 톰캣서버의 포트를 변경하는 방법에 대해 소개할까합니다.기본적으로 톰캣의 포트는 8080인데 다른 포트를 사용하고싶으시면 설정파일에서 변경이 가능합니다. 포트를 변경하려면 톰캣이 설치되어있는 경로로 이동합니다. 톰캣 디렉토리 안에 있는 conf 폴더로 들어가주세요 conf 폴더 안에 server.xml 파일이 있습니다. 메모장이나 기타 텍스트 에디터로 열어주세요! Connector 부분을 찾아주세요 Connector의 속성으로 port="8080" 이 기본값으로 지정되어있습니다.이 부분의 포트번호를 원하는 포트로 변경해주신 후 저장해주세요 저는 8000 포트로 변경했습니다 (post="8000") 저장하신 후 톰캣을 실행시켜봅시다. bin/startup.bat 로그를 확인해보시..

안녕하세요 이번 포스팅에서는 아파치 톰캣 설치방법에 대해 작성하도록 하겠습니다. 먼저 톰캣을 설치하기 전에, JDK가 설치되어있어야합니다.아직 JDK가 설치되어있지 않으시다면 아래 링크에서 확인하실 수 있습니다. [JDK 설치 및 설정하기]http://codevkr.tistory.com/2 톰캣 설치를 위해 아래 링크로 접속합니다. https://tomcat.apache.org/ 홈페이지에 접속해보면 좌측 메뉴에 다운로드 항목이 있습니다.설치하실 톰캣 버전을 선택해주세요. 저는 최신버전인 9.0 을 선택하여 설치하도록 하겠습니다. 버전을 선택하셨다면 아래쪽에 Core: 부분이 있습니다. 컴퓨터 환경에 맞는 버전을 선택해서 다운로드받아주세요 저는 윈도우 64비트 환경이기 때문에 64-bit Windows ..