본문 바로가기

JavaScript

 (40)
Vue.js의 구조와 인스턴스 Vue.js2 와 Vue.js3 https://dkkim2318.tistory.com/153 Options API 와 Composition APIVue.js의 개발스타일 Vue.js의 개발스타일에는 Options API 와 Composition API 두가지의 방식이 존재합니다. Vue.js의 초창기에는 Options API 방식으로 개발하는 스타일로 출발했지만 Vue 3 가 출시되며 Compositiodkkim2318.tistory.com 이전 Options API 와 Composition API 두 개발 스타일에 대해 포스팅을 했습니다. Vue.js는 현재 3 버전이 가장 최신 버전이며 Composition API가 공식적으로 가장 권장되는 방식입니다(Vue 2는 Composition API 지원 ..
Vue.js 개발환경 세팅 Vue.js 개발환경 setting Vue.js는 하나의 js 패키지 라고 볼 수 있습니다. 공식적으로 Vue.js는 앱을 개발/빌드/구성하는 도구들이 Node.js 환경에서 동작하기 때문에 전 세계의 개발자들이 Vue를 쉽게 설치하고 버전 관리 할 수 있도록 npm 레지스토리에 이를 배포하고 관리합니다https://dkkim2318.tistory.com/22 node.js & npm노드 JS WEB의 초창기 시작은 정적인 체계였습니다. 단순히 웹이라는 것은 조회 즉 읽는 기능만을 제공했습니다. 하지만 nescape 라는 웹브라우저가 등장하고 javascript를 통해 웹에 동적인 체계를 탑dkkim2318.tistory.com따라서 Vue를 설치하고 환경을 setting 하기 위해선 node.js와..
Options API 와 Composition API Vue.js의 개발스타일 Vue.js의 개발스타일에는 Options API 와 Composition API 두가지의 방식이 존재합니다. Vue.js의 초창기에는 Options API 방식으로 개발하는 스타일로 출발했지만 Vue 3 가 출시되며 Composition API라는 스타일이 추가가 됐고 이가 점점 주류가 되고 있기 때문에 앞으로의 Vue 생태계는 Composition API 중심으로 발전될 가능성이 높다고 추축되고 있습니다. Options API data, methods 및 mounted와 같은 vue의 기본 객체를 사용하여 컴포넌트 로직을 적용하는 방식입니다. 대표적인 요소를 살펴보면 아래와 같습니다.data : 컴포넌트에서 사용될 state 즉 데이터를 관리해주는 곳을 의미합니다.metho..
Vue.js란 Vue.js Vue.js는 웹 사용자 인터페이스를 만들기 위한 프레임워크 입니다 웹 프론트엔드 시장에 현재 가장 많이 사용되는 스택은 React지만 그에 못지 않게 vue.js 또한 현업에서 많은 기업들의 선택을 받아 사용되고 있습니다. 최근 프론트엔드 시장에서는 앞서 언급한 대로 React가 표준처럼 자리 잡고 있지만, 그럼에도 불구하고 Vue.js는 많은 개발자들과 기업에서 꾸준히 사용되고 있습니다. 이는 Vue.js만의 직관적인 문법 구조와 낮은 러닝 커브, 빠른 개발 생산성 덕분입니다. 특히 중소규모 프로젝트나, 프론트엔드 와 백엔드의 완전히 독립된 구조가 아닐경우 어느정도의 러닝커브가 존재하는 React나 Angular에 비해 간편하고 효울적인 선택이 될 수 있습니다. Vue.js는 구글..
라우팅 & SPA 라우팅? 웹 애플리케이션 에서는 URL을 통해 요청을 보내고 받습니다. URL에 따른 어떠한 페이지를 보여줄 수도 있고, 어떠한 동작을 수행할수도 있습니다. 웹에서의 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다. 예를 들어 게시판 서비스를 제공하는 웹 사이트가 있다고 가정해 봤을 때 해당 사이트에서는 글목록, 글쓰기 , 글수정, 글상세보기 ... 등등의 여러 페이지가 필요합니다. 이런 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해하며 프로젝트를 관리하기 위해 필요한 시스템이 바로 라우팅 시스템 입니다 리액트에서 대중적으로 많이 사용하는 라우팅 서비스는 크게 두가지가 있습니다. 리액트 라우터 : 가장 오래됐고, 가장 많이 사용..
Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태관리, 렌더링 직후 작업을 설정하는 기존에 되지 않았던 기능들을 지원하게 됐습니다. useState 가장 기본적이며 이미 함수 컴포넌트에서 여러번 사용해 봤던 hook입니다. 간단하게 코드로 살펴보자면 import React, { useState } from 'react' const Counter = () => { const [value, setValue] = useState(0); return ( 현재 값은 {value} 입니다. setValue(value +1)}>+ setValue(value -1)}>- ) }; export default Counter; 위 코드르 생성한 코드는 브라우저 상에서 위와 같은 컴포넌트를 생성하..
라이프사이클 메서드 라이프사이클 메서드 리액트에는 총 9가지의 라이프사이클 메서드가 존재합니다. 또한 이는 크게 3가지, 마운트 / 업데이트 / 언마운트 카테고리로 나뉩니다 . 첫번째 마운트(Mount) 는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 이때 호출되는 메서드는 다음과 같습니다. 컴포넌트 만들기 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드(생성자 함수) getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 먼저 코드를 통해 마운트 과정에서 호출되는 메서드를 알..
이벤트 핸들링 웹 개발에서의 event는 웹 브라우저에서 DOM 요소들과 상호 작용하는것을 의미합니다. 다른 포스팅 에서 button클릭이라던가, 키보드 입력, 마우스 커서 이동 등등 많은 이벤트 요소들이 있습니다. 이번 포스트에서는 과연 리액트에서는 이러한 이벤트 핸들링을 어떻게 처리하는지에 대해 다뤄보겠습니다. 리액트에서의 이벤트 핸들링 일반적으로 웹개발을 해보신 분이라면 HTML에 기본 이벤트 인터페이스들에 익숙할 것입니다 리액트에서는 해당 이벤트 핸들링 방법이 HTML과 동일하기 때문에 문법을 숙지하는 것은 어렵지 않으나 주의해야할 사항들이 몇가지 존재합니다. 이벤트 이름은 카멜 표기법으로 작성한다 ex) onclick ->onClick , onkeydown-> onKeyDown 이벤트에 실행할 자바스크립트 코..

티스토리툴바