WANZARGEN

전역 수준 컴포넌트의 문제점 빌드 단계가 없음 ECMAScript 2015 이상, Typescript와 같은 최신 문법을 사용할 수 없음 CSS 빌드 & 모듈화 기능이 없음 template이 모두 고유한 id를 가지도록 개발자가 관리해야 함 그래서 생겨난게... ↓ ↓ ↓ 단일 파일 컴포넌트(Single File Component) 단일파일 컴포넌트: , 위 코드는 아래의 HTML로 생성된다. CSS Module을 적용한 버튼 Hello World hand, box, border과 같이 코드에 주어진 스타일명이 아닌, 충돌하지 않도록 생성된 다른 이름이 클래스명으로 사용된다. 슬롯 부모 컴포넌트에서 자식 컴포넌트로 전달할 정보가 HTML 태그를 포함하고 있다면, props를 사용해 전달하기 쉽지 않다. ..

Vue 컴포넌트? 작고 독립적이며 재사용할 수 있는 -> 뷰 세계에서 가장 기본적인 구성 요소 컴포넌트 시스템 = 컴포넌트의 조합 컴포넌트 여러개가 모여서 컴포넌트 시스템을 이루어 대규모 애플리케이션 구축이 가능하다. 각각의 컴포넌트들은 트리구조로 이루어져 있으며, 서로 상호작용을 하여 애플리케이션 서비스를 이룬다. 컴포넌트 작성과 사용 파라미터 태그명: 컴포넌트를 사용할 태그 태그명은 대소문자를 구별하지 않으므로, 가능한 케밥 표기법을 따르는 것이 좋다! 옵션: 기타 정보(template, props 등) 템플릿 작성 방식 1. 인라인 템플릿 위처럼, template 옵션에 템플릿 문자열을 사용하는 방식을 인라인 템플릿(inline template)이라고 한다. 그리 권장되는 방법은 아니다. 2. te..

Vue.js 공식 홈페이지에서는 단위 테스팅(Unit Testing)을 위한 테스트 러너로써 Karma를 적극 권장하고 있다. 어떤건지 궁금해서 한번 써본 적은 있지만, 실무에 적용해보기에 앞서 너란 놈에 대해 깊은 공부가 필요함을 느끼고... 정말 오랜만의 포스팅 주제로 삼았다. KARMA 공식 홈페이지에 가보면, 이렇게 소개하고 있다. A tool which spawns a web server that executes source code against test code for each of the browsers connected. 위의 영어가 너무 어려워서, 아래처럼 아름다운 한글로 풀어봤다. 카르마는 어떤 웹 서버를 생성하는 도구이다. 이 웹 서버는, 다양한 브라우저들과 연결되어 있다. 그리고,..

뷰 최신 버전인 2.5.17 버전에서 트랜지션을 사용해보았다. 참고로 그 사용 방법은 Vue.js 공식 페이지에 기가막히게 잘 나와있다. 뷰 트랜지션을 써보다가 마주친 문제를 설명하기에 앞서, 그놈을 어떤식으로 사용하는지 알아보자아~. 뷰(Vue) 트랜지션 사용하기 뷰 트랜지션을 이용하여, 로고 3개를 차례로 뿅뿅뿅 나타나게하는 효과를 적용해보려고 한다. 뷰 템플릿(template) 작성 먼저 template 부분인데, 아주아주 간단하다. 그냥 "transition-group" 이라는 태그를 사용해주면 되고, 효과 이름을 정해서 name="내가 정한 트랜지션 이름" 의 형태로 속성을 넣어주고, 자식 엘리먼트들에다가 'key'를 부여해주자. 그리고, 이 효과가 나타나게 해주는 switch 역할을 하는 v-..

자바스크립트를 공부하다보면 클로저 함수라는 놈을 만나게 된다. 그런데 요놈, 한마디로 설명하기엔 내 머릿속에 정리가 잘 안되어 있어서, 이 참에 제대로 짚고 넘어가련다. 그래서 이번 포스트는 요놈, 클로저와 스코프 체인을 다뤄보려 한다. 스코프 체인(Scope chain)?스코프 체인이 무엇인가 설명하기 전에, 먼저 글로벌 객체와 콜 객체를 알아야 한다. 글로벌 객체 & 콜 객체?자바스크립트가 실행되면 내부적으로 글로벌 객체를 만든다.요 글로벌 객체에는 글로벌 변수나 글로벌 함수가 담겨있다. 같은 맥락으로,자바스크립트의 어떤 함수가 있는데, 요 함수가 실행되면 내부적으로 Call 객체를 만든다.콜 객체에는 그럼 뭐가 있겠느냐구. 함수 내에서 정의된 로컬 변수와 내부 함수가 있을 것이다. 콜 객체? 듣보인..

오늘은. 요즘 아주 핫한 아마존 웹 서비스(AWS)에 대한 간단한 소개를 하고... EC2를 만들다가 내가 겪었던 짜증나는 AWS 자동 전화인증 문제와, 해결하기 위해 거쳐야 했던 귀찮은 과정을 설명하겠다. 지금당장 전화인증 문제 해결을 위해 이 글을 읽고있는 당신, 빠르게 아래로 스크롤 ㄱㄱ. 자. 아마존 웹 서비스를 쓸거라고 하면서도 이게 정확히 뭔지 모르는 사람들이 많다. 대관절 EC2 인스턴스를 만든다는게 뭔 말인지 모르고 이 글을 읽고 있을지도 모르는 안타까운 영혼들(사실 그게 나였음)을 위해 짧게나마 설명하겠다. 아마존 웹 서비스(AWS)란?AWS 는 Amazon Web Services 의 약자다. 이거슨 아마존이 제공하는 웹 서비스로, 각종 원격 컴퓨팅 서비스를 제공한다. AWS 사이트에 가..

아놔. 요즘 배그에 빠져서는 블로그는 나몰라라 하고 있다 ㅠㅠ 매번 쓸때마다 오랜만이긴 한데. 역시나 오랜만이니까 기초지식 다뤄보겠다. 이번에는 자바의 클래스 패스와 그것을 시스템 환경변수에 설정하는 목적에 대해 포스팅 해보겠다. 클래스 패스(Class Path)란?자바 가상머신이 프로그램을 실행할 때, 클래스 파일을 찾는 데에 기준이 되는 파일 경로라고 할 수 있다.즉, 자바 가상머신이 클래스 파일을 찾는 경로다. 물론, 이 클래스 패스는 개발자인 너, 나, 우리가 지정해준다.지정해주지 않으면 자바 가상머신은 현재 디렉토리에서 필요한 클래스들을 가져와서 쓴다. 현재 디렉토리는 현재 명령 프롬프트가 가리키고 있는, 위치하고 있는 그 경로를 말한다. >> java 파일명.class이러한 명령어를 명령 프롬..

이번 포스트에서는 프로세스와 스레드의 차이가 뭣인지 설명하도록 하겠다. 1. 프로세스(process)란?프로세스는 짧게 말해, 실행 중인 프로그램이라고 할 수 있다. 이 대목에서 또 프로그램은 뭐고, 프로세스는 뭔지 헷갈릴 거신데. 뭣이냐면. 프로그램은 하드디스크 등에 저장되어 있는 '실행코드'를 의미한다. 그니까, 맘만 먹으면 실행할 수 있는거긴 한데 정적인 상태의 어떤 파일(?)을 프로그램이라 한다. 프로세스는 그 프로그램을 구동했을 때, 그 프로그램 자체 + 메모리 상에서 실행되고 있는 작업 단위를 말한다.쉽게 말해, 프로그램을 실행한게 프로세스인데, 이 프로그램을 여러번 구동시키면 여러 개의 프로세스가 생기는거다. 정적인 프로그램과, 동적인 프로세스가 뭔지 대충 이해가 됐길 바란다. 자. 그럼 스..

플젝이 끝난지 벌써 1달이 훌쩍... 오랜만에 기술용어들을 접하면서 멘붕이 왔다. 아니... 나 이거 분명 아는건데? 왤케 생소한거? 똥망의 냄새. 아 난 기억력이 정말 똥파리 수준이라는것조차 망각하고 말았다. 이래서 내가 블로그를 시작했지 참. 멘탈이 탈탈 털리고 정신을 차리고 아주 기초적인 용어들을 다시 잡아볼까 한다. 그 시작은 바로 에이잭스! 뚜둔-. AJAX란?에이잭스로 말할 것 같으면, 일단 위키는 이렇게 설명하고 있다. Ajax는 비동기적인 웹 앱 제작을 위해 어떠한 "조합"을 이용하는 웹 개발 기법이다. 즉, 얘는 그 자체가 하나의 기술을 말하는건 아니고, 그냥 같이 쓰는 몇 개의 기술이 있는데 걔네들을 묶어서 이렇게 부르는 거다. 그렇담, 묶어서 쓴다는 그 기술들은 뭔데? - HTML &..

이전에 자바 웹 프로젝트를 생성하는 것을 설명한 적이 있었당. 요것을 모르겠다면 이전 포스트 읽고오시길. => 2017/06/01 - [Programming/Lib, Tools] - Eclipse :: 이클립스에서 웹 애플리케이션(Web Application) 프로젝트 만들기 이번 포스트에서는 이클립스의 자바 웹 애플리케이션 구조 와 실무의 자바 웹 애플리케이션 구조 를 설명하고 어떻게 다른지 비교하면서 왜. 대체 왜 실무에서는 다른 프로젝트 폴더 구조를 사용하는지를 이야기하며 마무리하도록 하게따. 1. 이클립스 웹 애플리케이션 디렉토리 구조$workspace/프로젝트명/build /classes /src /WebContent /META-INF /WEB-INF /lib 이거슨 이클립스의 자바 웹 애플리케..