Front-End
-
[Vue.js] Vue RouterFront-End(Web)/Vue 2021. 6. 2. 15:04
이번엔 Vue에서 공식으로 라우팅을 담당하는 Vue Router에 대해 공부해보았다. Vue 역시 SPA 웹 어플리케이션 제작을 위한 프레임워크로, URL에 따른 페이지 컴포넌트 간의 라우팅을 지원할 것으로 예상된다. 또한, React 경우엔 필요한 기능을 수동적으로 추가했지만, Vue Router는 공식 라이브러리인 만큼 params, query 나 페이지 인터렉션 등 다양한 기능을 지원한다고 한다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue Router 위에서 언급했듯, Vue Router는 Vue.js 공식 라우터 라이브러리다. SPA를 쉽게 구현하기 위해 코어와 긴밀하게 통합되어있다. - 기능 Vue 라우터 공식문서에서 소개하는 V..
-
[Vue.js] 컴포넌트(Component), Props & EventFront-End(Web)/Vue 2021. 5. 26. 21:04
이번에는 비교적 친숙한! 뷰의 컴포넌트 개념에 대해 알아보고자 한다. React와 마찬가지로 화면을 구성하는 요소이다. 현대의 모던 프레임워크들은 대부분 컴포넌트 개념을 차용하고 있기 때문에 뷰 역시 이를 기반으로 하고 있는 것 같다. 컴포넌트와 관련된 개념과 영상이 많기 때문에 포스팅 분량이 길어지고 몇 부분으로 나눠질 것 같다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 컴포넌트 React와 마찬가지로 화면을 영역 단위로 쪼개서, 재사용 가능한 코드로 캡슐화하는 개념이다. 뷰에서 컴포넌트를 등록하는 방법은 2가지가 있다. 전역 등록, 지역 등록이 바로 그것들이다. - 전역 컴포넌트 // 전역 컴포넌트 Vue.component('컴포넌트..
-
[Vue.js] 인스턴스 (Instance), 라이프사이클(LifeCycle)Front-End(Web)/Vue 2021. 5. 26. 02:09
React는 파일(혹은 모듈) 자체를 클래스형, 함수형의 컴포넌트로 제작하는 방식이었다. 이와는 달리, Vue는 컴포넌트를 포함한 다양한 정보가 담긴 인스턴스(new Vue)에 정보를 담는 것으로 보인다. 이에 해당하는 Vue 인스턴스에 대해 학습 및 포스팅할 예정이다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 인스턴스 인스턴스는 뷰로 개발할 떄 필수로 생성해야 하는 코드라고 소개된다. Vue.js로 화면을 구성하기 위해 꼭 생성해야 하는 필수 단위인 것이다. new Vue() // 변수할당 var vm = new Vue({ // options... }); Vue 앱은 Root Vue 인스턴스를 기점으로, 선택적으로 중첩이 가능하고 재사..
-
[Vue.js] Vue 개요 및 세팅(CLI)Front-End(Web)/Vue 2021. 5. 10. 18:06
🧐 인생은 한 치 앞 도 모르는 것 약 5개월간 React 개발을 공부해왔고, 프로젝트와 기술과제도 React로 진행한 내가 Vue.js 공부를 시작하게 되었다. 아무래도 가장 큰 이유는 이번에 입사하게 된 첫 회사가 Vue.js를 사용하고 있기 때문이다. React 지식이 아깝긴 하나 생각해보면 그리 오래한 것도 아니고, 오히려 양대산맥인 Vue도 경험하는게 좋겠다는 생각을 항상 하고 있었다. 특히, 컴포넌트 같은 개념은 React와 크게 다르지 않으면서도, Vue만의 프레임워크나, 양방향 데이터 바인딩 등 차이점을 직접 겪으면 흥미롭겠다는 기대 반 걱정 반으로 Vue.js 공부를 시작해본다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue...
-
[React] 공식문서 학습(문서) : 설치Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 23. 16:18
🧐 서론 최근 다른 글에서 언급했듯이, 기술면접을 몇 차례 거치면서 React의 기본적인 개념이 많이 부족하다는 점을 뼈저리게 느꼈다. 특히, 이러한 부분들은 React 공식문서에 잘 설명되어 있었기 때문에 진작 Docs 숙독을 선행하지 않은 점이 아쉽게 느껴졌다. 그렇기에 이 공식문서 학습 시리즈는 개념정리보다는 나의 자습노트의 형태가 될 것 같다. 다만, 공식문서의 순서를 따르면서 글을 정리할 것이기에, 일종의 Docs 가이드 라인을 만든다는 생각으로 정리해보겠다. 💙 설치 - 시작하기 "React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리" 라는 명료한 소개로 Docs가 시작된다. 공식문서, 블로그, 플레이그라운드(CodePen 등) 에 대한 소스안내가 주로 이루어지고 있었다...
-
[Javascript] ES6(ES2015)Front-End(Web)/Javascript 2021. 4. 9. 01:12
🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 최근 면접 준비를 하면서, 특히 이전 문법과 비교하는 강의들을 보면 기능과 편의성 측면에서 많은 개선을 지원해준 ES6 버전이다. 이를 전체적으로 훑어보고 정리해봐야겠다고 생각했으며, 동시에 감사함도 느끼는 시간이 될 것 같다! 📒 ECMAScript (선행 개념들) Javascript의 ES6는 일종의 버전이다. 2015년 버전이며, 마치 아이언맨에서 MK6(마크6) 와 같이 생각하면 되겠다. 그렇다면 ES의 뜻은 무엇인지, 버전6이 같는 의미는 무엇인지 알기 위해선 우선 선행되는 개..
-
[Javascript] 이벤트(Event)Front-End(Web)/Javascript 2021. 3. 16. 13:56
React의 이벤트에 대해 포스팅하면서, Javascript에서의 이벤트 핸들링과 흐름, 관련된 개념들 역시 정리할 필요성이 있었다. Javascript 관련된 내용을 분리했으며, 이를 토대로 이벤트 위임까지 한번 정리해보도록 하겠다. 📒 Event Handling React 합성 이벤트의 다양한 attribute들을 알아보면서, 이벤트가 기본적으로 어떻게 브라우저에서 감지되고 전파되는지 공부할 필요를 느꼈다. 그래야, bubbles의 개념이나, eventPhase의 각 페이즈를 이해할 수 있겠다고 생각했다. 1. 이벤트 핸들링(Handling) 이벤트는 마우스 클릭이나 키보드 입력같이 일반적으로 사용자가 행하는 모든 동작을 일컫는다. 이러한 이벤트를 원하는데로 처리하는것을 이벤트 핸들링 이라고 한다. ..
-
[React.js] SyntheticEvent(합성 이벤트)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:44
프로젝트를 진행하며 마우스 이벤트를 정리한다는게... 이벤트 공부로 판이 커져버렸다 😀😀 React 공식문서는 지원 이벤트를 "합성 이벤트" 개념과 함께 소개했고, 합성 이벤트를 공부하던 차에 이벤트 핸들링과 연계는 필연적이었기 때문이다. 이번 포스팅은, e(합성 이벤트)에 대해 자세히 공부하고, React가 지원하는 이벤트 종류를 한번 훑어보고자 한다! * 포스팅 : React 이벤트 핸들링(abangpa1ace.tistory.com/128) 📒 합성 이벤트(SyntheticEvent) 란? SyntheticEvent는 객체로 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper 객체이다. 대부분의 인터페이스는 브라우저 고유 이벤트와 같다. * 소프트웨어에서 래핑(Wrapping) 이란, 기..