자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

더글라스 크락포드 - 자바스크립트 핵심 가이드현재의 회사를 입사하기 전, 백엔드 개발자인 내가 내 스스로에게 정말 부족하다고 생각되었던 스킬은 자바스크립트였다. 그래서 자바스크립트 책을 통해 '기본기를 다시한번 복습하고, 프론트엔드 개발자와 소통하는데 큰 어려움은 없을 정도가 되자.' 라는 목적으로 책을 구매하게 되었다. 그리고 현재 다 읽어낸 지금... 아주 크게 도움이 되진 않는 것 같다. 이 책을 읽고나서, 프로젝트를 진행하는데 큰 도움이 되진 않았다. 그 이유가 무엇일까 고민해본 결과 이 책은 본래 외국인이 작성한 책이며, 그것을 한글로 번역하여 출간한 책이라는 것이다. 저자가 전달하고자 하는 내용이 번역이 되어 나에게 전달되니 내용은 딱딱했고, 지루함이 느껴졌다. 더군다나 꽤나 오래된 책이라 그..

[인프런] 김정환 - 실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발회사에서 자바스크립트 프레임워크인 Vue.js를 실무에 적용하려 하는 계획으로 인해 프레임워크 공부를 시작하게 되었다. 매일 아침 10시부터 오후1시까지 처음으로 Vue.js 강의를 보게 되었다. 강의는 쇼핑몰 형식의 프로그램을 만드는 것을 목표로 VanillaJS를 이용해 MVC 패턴으로 제작하는 것과 VueJS를 이용해 MVVM 패턴으로 동일한 프로그램을 만들며 뷰에 대한 개념적 설명을 하는 내용이었다. 자바스크립트에 대해 충분한 지식이나 기술적 스킬을 갖추고 있지 않았으나 강의를 소개하는 설명에서 입문자들도 쉽게 보며 학습할 수 있다는 내용에 기대를 많이 했었다. 그리고 강의 내용을 들어본 결과 내가 내린 결..

[인프런] 백기선 - Spring Boot현재 다니는 회사에 채용되고 인프런이라는 IT 온라인 강의 사이트가 있다는 것을 알게 되었다.입사 후 한 달 정도 스프링 부트, JPA 프레임워크로 토이 프로젝트를 진행했는데 해당 프레임워크들의 개념을 공부해가면서 진행한 프로젝트였고 사내에 해당 프레임워크들을 알고 계신 분들이 없어 웹 검색을 기준으로 프로젝트를 진행했었다. 그러다보니 개념이 중구난방으로 건너건너 알게되는 지식들이 대부분이었고 그것이 어떠한 원리로 이루어지는 개념인지를 자세하게 알 수 없었다. 인프런 사이트에서 백기선님의 스프링 부트 강의를 접하고 매일 10시부터 1시까지 강의를 들으며 공부를 했다. 사실 IT 온라인 강의는 처음 듣는 거라 어렵진 않을까, 어떻게 공부해야할까 고민도 많이 했었는데..

뷰 템플릿뷰의 템플릿은 HTML , CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성이다. 템플릿 속성을 사용하는 방법은 두 가지가 있는데, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법이다.123new Vue({ template : 'Hello {{ message }}'});Colored by Color Scriptercs 템플릿 속성에 대해 반드시 알아야 할 특징이 있는데, 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다.변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을..

뷰 HTTP 통신HTTP 통신이란 브라우저와 서버 간 데이터를 주고받는 통신 프로토콜이다.브라우저에서 데이터를 보내달라고 서버에게 요청하면 서버가 그에 알맞는 데이터를 응답해주는 방식이다. (브라우저와 서버간 HTTP 통신 흐름) 웹 앱에서 HTTP 통신을 하는데 대표적인 사례로는 제이쿼리의 ajax가 있다. (vanilla JS에서는 XmlHttpRequest)ajax는 서버에서 받은 데이터를 화면에 표현할 때 화면 전체를 갱신(새로고침)하지 않아도 일부분만 변경할 수 있게 하는 자바스크립트 기법이다. 뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공한다.뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 많이 사용하는 액시오스(axios)가 있다. 뷰 리소스뷰 리소스는 초기에 공..

뷰 라우터라우팅이란 웹 페이지 간 이동 방법을 뜻한다.라우팅은 싱글 페이지 애플리케이션에서 주로 사용된다. 라우팅을 이용하면 화면 간 전환이 매끄러워진다.페이지 이동을 라우팅으로 처리하면 매끄럽게 전환할 수 있고, 더 빠르게 화면을 조작할 수 있다. 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리다.뷰 라우터를 이용해 뷰로 만들어진 페이지 간 자유롭게 이동할 수 있다.뷰 라우터를 구현할 때 필요한 특수 태그와 기능은 아래와 같다. 태그 설명 페이지 이동 태그. 화면에서는 로 표시되며, 클릭하면 to에 지정한 URL로 이동된다. 페이지 표시 태그.변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역이다. 뷰 라우터를 이용해 예제를 작성해보자. (뷰 라우터를 이용해 만든 예제이다..

뷰 컴포넌트 통신뷰의 경우 컴포넌트 단위로 화면을 구성하기 때문에 같은 웹 페이지라 하더라도 데이터를 서로 공유할 수가 없다는 특징이 있다.그 이유는 컴포넌트마다 자체적으로 유효 범위를 갖기 때문인데, 각 컴포넌트마다 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 상 - 하위 컴포넌트 관계컴포넌트간 데이터 전달을 하기 위해서는 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다. 상위 컴포넌트 - 하위 컴포넌트를 등록한 인스턴스 - new Vue() (부모 컴포넌트)하위 컴포넌트 - 지역 또는 전역으로 등록한 컴포넌트 - Vue.component() or new Vue({components}) (자식 컴포넌트) 상 - 하위 컴포넌트 간 통신 방식(Do..

뷰 컴포넌트컴포넌트는 화면을 구성하는 블록을 의미한다.컴포넌트를 활용하면 화면을 빠르게 구조화하여 정해진 패턴으로 개발할 수 있게 된다.화면을 컴포넌트 단위로 재활용하는 형태로 관리하면 코드를 재사용하기 편리해진다. 특히 코드를 직관적으로 이해할 수 있다는 것이 큰 장점이다. 컴포넌트 종류컴포넌트를 사용하는 방법은 전역 선언과 지역 선언 두 가지 방식이 존재한다.지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근이 가능한 Vue 생성자를 이용해 등록한다.Vue 생성자에 .component()를 호출하여 수행한다. 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 ..