뷰 리소스를 사용하는 방법은 CDN을 이용해서 라이브러리를로딩하는 방식과 NPM으로 라이브러리를 설치하는 방법이 있다.CDN 설치 방법을 이용하여 간단히 뷰 리소스로 서버에서 특정데이터를 받아와 로그로 출력해보겠다. 아래 소스를 보자. 먼저 위 코드는 버튼을 하나 추가해 클릭하면지정한 URL의 데이터를 가져오는 소스이다.여기서 불러오는 데이터는 JSON 형식의 간단한 파일이며 프레임워크 종류 - 프레임워크 이름 형태로 키- 쌍 조합으로총 7개의 데이터 쌍으로 되어있다. 먼저 7line에서는 버튼을 인스턴스 영역안인 태그안에태그로 추가했다. 그리고 v-on:click을 이용해버튼을 클릭하면 getData가 호출되도록 한다. 17line은 getData()에는 뷰 리로스 에서 제공하는 API인this.$ht..
요즘 웹 앱 에서 서버에 데이터를 요청하는HTTP통신을 필수로 구현해야 하는 기능이다.과거 웹 사이트가 정적인 텍스트나 간단한 이미지를나타내는데 그쳤다면 이젠 사용자와의 상호 작용에 따라데이터를 동적으로 화면에 표시해 줘야 하기 때문이다. 여기서 HTTP는 브라우저와 서버 간에 데이터를주고받는 통신 프로토콜이다. 브라우저에서 특정데이터를 보내달라고 request를 보내면 서버에서 response로해당 데이터를 보내주는 방식이다.서버에 해당 데이터를 보내달라고 메시지를보내는 것이 HTTP요청을 보내는것과 같다. 웹 앱의 HTTP 통신의 대표적인 것으로 jQuery의 ajax가 있다.ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기..
네임드 뷰(Named View)는 특정 페이지로 이동 했을 때여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식이다.이전 포스티에서 알아보았던 네스티드 라우터는 아래의이미지처럼 상위 컴포넌트가 하위 컴포넌트를 포함하는 형태이다. 하지만 네임드 뷰는 아래 이미지처럼 같은 레벨에서여러 개의 컴포넌트를 한 번에 표시한다. 이제 간단하게 네임드 뷰 구조를 소스로 확인하자 먼저 9~13line에서는 태그 안에 를 3개 추가하고name속성을 추가한다. 여기서 name 속성은 아래 components 속성에정의하는 컴포넌트와 매칭하기 위한 속성이다. Header컴포넌트는 headerFooter컴포넌트는 footer를 각각 name속성에 값으로 설정한다.다음 name속성이 없는 두 번째 는 default로 표시될 컴포넌..
네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼수 있다.네스티드 라우터는 상위컴포넌트 1개에하위 컴포넌트 1개를 포함하는 구조를 갖는다.네스티드 라우터를 이용하면 URL에 따라서 컴포넌트의하위 컴포넌트가 다르게 표시 된다. 먼저 간단하게 네스티드 라우터를 구현하는 소스를 보자. 먼저 10line은 User 컴포넌트가 뿌려질 영역이다.다음 15~24line에서 User, UserPost, UserProfile 컴포넌트의내용을 각 객체에 정의한다. 컴포넌트가 전환된 것을 알수 있게template속성을 컴포넌트 내용에 추가했다. 여기서 봐야할 부분은User컴포넌트의 template에 하위 컴포넌트를 표시할 가하나 더 있다는 부분이다.26~38line routes에 라우..
라우팅이란? 라우터를 이해하기 위해선 먼저 라우팅이 무엇인지 알아야 한다. 라우팅이란 웹 페이지 간의이동 방법을 말한다. 라우팅은 현대 웹 앱 형태중 하나로싱글페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용한다. 라우티을 이용하면 화면간의 전환이매끄럽고 애플리케이션의 사용자 경험을 향상 시킬수 있다. 보통 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안화면상에 깜빡거림 현상이 나타난다. 이런 부분들을라우팅으로 처리하면 매끄럽게 전환 할 수 있다.그리고 더 빠르게 화면을 조작할수 있다.뷰 뿐만 아니라 리액트와 앵귤러 모두 라우팅을 이용한다.프런트엔드 프레임워크를 사용하지 않고 일반 HTML파일들로도라우팅 자바스크..
이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에데이터를 주고받을 수 있는 방법이다.이전 포스팅에서 컴포넌트간 통신은 항상 상위-하위구조를 유지해야 데이터를 주고받을 수 있었다.이벤트 버스를 사용하면 이런 상위-하위 관계를유지하고 있지 않아도 데이터를 한 컴포넌트에서다른 컴포넌트로 전달할 수 있다. 먼저 아래 그림을 보자. 최하위에 있는 하위컴포넌트B에서 상위 컴포넌트A로데이터를 전달하려면 Vue에서 제시하는 기본적인컴포넌트 통신 방식을 생각해야한다.하위컴포넌트B 상위컴포넌트B 최상위컴포넌트를 거쳐서상위 컴포넌트A까지 가야한다. 하지만 웹이 커져컴포넌트가 많아지면 이런식의 데이터 전달 방식은 번거롭다.이럴 경우 이벤트버스를 사용하면 중간 컴포넌트들을 거치지 않고하위컴포넌트B 에서 바로 상위 컴포넌트A로..
4월 15일 정보처리기사 실기 시험이 있다. 작년 3회 실기에서 떨어져 이번에 다시보는데이번엔 꼭 좀 붙었으면 좋겟다. 알고리즘과 데이터베이스는쉬운데 IT신기술 동향이 외울게 너무 많아 어렵다.다시 실기 공부를 하려고 데이터베이스쪽부터 공부중이다. 그러던 와중 그냥 데이터베이스의 기본정의가 있어 보고있는데블로그에 데이터베이스의 기본 정의와 특징 글이 없으므로지금 포스팅 하려한다. 먼저 데이터베이스의 정의 이다.데이터베이스는 특정 조직의 업무를 수행하는 데 필요한 상호관련된 데이터 들의 모임으로 다음과 같이 정의할 수 있다. 통합 데이터(Integrated Data) : 검색의 효율성을 위해중복이 최소화된 데이터의 모임저장 데이터(Stored Data) : 컴퓨터가 접근 가능한 저장 매체에 저장된 데이터운..
이번엔 쓰레드의 메모리구성에 대해 알아보자.쓰레드 생성 포스팅에서 쓰레드가 생성되면 가상머신은쓰레드의 실행을 위한 별도의 메모리 공간을 할당한다고 했다.그렇다면 이러한 별도의 메모리공간은정확히 무엇을 의미하는걸까?쓰레드의 가장 큰 역할은 별도의 실행흐름 형성이다. 그리고 별도의 실행흐름은 메소드의 호출을 통해서 형성된다.즉 처음에 run메소드가 호출되고 run메소드 내에서 또다른 메소드를호출하면서 main메소드와는 다른 흐름을 형성한다.이렇듯 main 메소드와는 전혀 다른 실행흐름을 형성하기 위해서는별도의 스택이 쓰레드에게 할당되어야 한다.따라서 main 쓰레드 이외에 두 개의 쓰레드가 추가로 생성되면가상 머신은 아래의 형태로 메모리를 구성한다. 위 그림에서 처럼 모든 쓰레드는 자신의 스택을 할당 받는다..
