언어 & 프레임워크

[Vue 3] Composition API와 템플릿 참조(refs)

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

[Vue 3] Composition API와 Vuex 사용하기

(본 포스팅은 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 3] Composition API 살펴보기

안녕하세요! 이번 포스팅에서는 이후 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..

[JavsScript] self란 무엇인가?

안녕하세요! 정말 오랜만에 작성하는 포스팅인 것 같습니다. 최근 바쁜 일도 생기고 이런저런 개인 사정 때문에 블로그 관리에 소홀했던 것 같습니다.. 여름 시즌까지 꽤 바쁠 것 같은데 시간 쪼개서 글 자주 업로드해보도록 노력하겠습니다 :) 이번 포스팅에서는 자바스크립트의 self에 대해 알아보려고 합니다. this는 많이 접해보셨을텐데 self는 보신 분들도 있을 테고 이번이 처음이신 분들도 있을 수 있습니다. 그렇게 널리 사용되는 친구는 아니기 때문인데요..! 이번 포스팅을 통해 self가 무엇인지 한 번 알아보도록 합시다. 1. self란 무엇인가? w3c의 문서를 확인해보니, self는 읽기 전용 속성이며 WindowProxy로서의 window 자신을 반환합니다. 라고 합니다. 처음 접한 self인데..

[JavaScript] 전개 구문 활용 (Spread syntax)

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

[JavaScript] 심볼 (Symbol)

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

[Tomcat] 아파치 톰캣 이클립스와 연동하기

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

[Tomcat] 아파치 톰캣 서버 포트 변경하기

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

[Tomcat] 아파치 톰캣 설치하기

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

[JQuery] Ajax 동기 방식으로 사용하기

JQuery의 Ajax는 기본적으로 비동기 방식으로 동작합니다. 순차적으로 요청을 하고 싶을때는 옵션에 값을 하나 추가만 해주시면 됩니다. 옵션에 async 값을 false 로 지정한 후 사용하시면 됩니다. async 에 값을 지정하지 않을 경우 기본값으로 true가 사용됩니다.