분류 전체보기

Vue.js Router로 싱글 페이지 어플리케이션(SPA) 페이지 라우팅 구현

Vue.js Router Vue.js Router는 Vue.js 프레임워크에서 사용되는공식 라우터 라이브러리로, SPA에서 페이지 라우팅을 구현하는데 사용됩니다. Vue.js Router는 Vue 어플리케이션에서 다양한 View와 URL 간의 매핑을 정의하고, 사용자가 브라우저의 주소 표시줄을 통해 URL을 변경하거나 링크를 클릭할 때마다 적절한 뷰를 렌더링합니다. 각 라우트에 대해 컴포넌트를 매핑하고, 중첩된 라우트와 동적 라우팅을 설정하여 사용할 수 있습니다. 또한 뒤로/앞으로 버튼을 클릭할 때마다 적절한 컴포넌트를 자동으로 로드하여, SPA에서 페이지 전환을 간편하게 관리할 수 있습니다. 💁‍♂️싱글 페이지 어플리케이션(SPA)이란? 싱글 페이지 어플리케이션이란 우리가 기본적으로 알고있는 어플리케이..

Vue.js 컴포넌트: Props, Emit, Event Bus를 활용한 통신 방법

Vue 컴포넌트 컴포넌트 Vue 어플리케이션에서 코드를 재사용할 수 있는 기본 단위입니다. 각각의 컴포넌트는 특정한기능과 템플릿을 갖고, 데이터와 메서드를 정의하여 독립적으로 동작할 수 있습니다. 컴포넌트를 이용하면 HTML 요소들을 확장하고 화면을 구조화함으로 코드를 캡슐화하여 재사용 및 유지보수를 용이하게 해줍니다. Vue 컴포넌트 작성 {{ title }} {{ count }} Count 증가 Vue 컴포넌트 등록 전역 등록 main.js: import Vue from 'vue'; import GlobalComponent from './components/GlobalComponent.vue'; Vue.component('global-component', GlobalComponent); new Vue..

Vue.js 뷰 인스턴스와 인스턴스 라이프 사이클

Vue 인스턴스 Vue 어플리케이션을 개발하기 위해 Vue 인스턴스를 생성하여 적용합니다. {{ message }} Vue.js에서 인스턴스를 생성할 때, data 옵션을 사용하여 데이터를 정의할 수 있습니다. 이때, data 옵션을 정의하는 방식은 두 가지가 있습니다. data: {} 위 예제처럼 객체 리터럴을 사용하여 data 객체를 정의하는 방식입니다. 이 방식은 객체 안에 정의된 프로퍼티가 Vue.js의 반응성 시스템에 등록되어, 해당 프로퍼티가 변경될 때마다 화면이 자동으로 업데이트 됩니다. data() { return {} } data 옵션을 함수 형태로 정의하는 방식입니다. 이때 함수는 객체를 반환해야 하고, 이 객체 안에 정의된 프로퍼티 역시 Vue.js의 반응성 시스템에 등록됩니다. 차이..

JS Fetch API를 이용한 Ajax 통신

Fetch API 방식 이용한 Ajax Ajax는 정통적으로 XMLHttpRequest() 객체를 사용하여 서버와 데이터를 교환합니다. 하지만 이 방식은 코드가 복잡하고 가독성이 좋지 않아 최신 기술인 fetch() 메서드를 통해 Ajax 통신하는 법에 대해 포스팅하겠습니다. Fetch API 사용 장점 Fetch API는 Promise 기반으로 구성되어 있어 비동기 처리 방식에 적합한 형태입니다. 체이닝 방식으로 작성 가능하기 때문에 가독성이 좋습니다. Fetch API는 JavaScript 기본 기능이기 때문에 JQuery 같은 라이브러리를 가져다 쓰지 않기 때문에 가볍습니다. Fetch 문법 사용법 fetch("URL", option) .then((response) => response.text()..

JS AJAX ( Asynchronous JavaScript And XML )

AJAX: Asynchronous JavaScript And XML AJAX는 Javascript와 XML을 이용한 비동기적 정보 교환 기법입니다. AJAX를 이용함으로 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 받을 수 있습니다. 또한 사용자가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있습니다. Ajax 기초 메서드 종류 설명 load() (데이터를 전송하여) 외부 콘텐츠를 가져올 때 사용 $.ajax() 데이터를 서버에 HTTP POST, GET방식으로 전송할 수 있음. HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있음. $.post(), $.get(), $.getJSON() 메소드의 기능을 하나로 합쳐 놓은 통합적인 메서드. $.post() 데이터를 서..

JS JSON: JavaScript Object Notion

JSON: JavaScript Object Notion JavaScript 객체 표기법으로 작성된 텍스트 기반의 방식입니다. JSON은 쉽게 읽고 작성할 수 있고, 소프트웨어에서 파싱 및 생성하기도 쉽습니다. 때문에 주로 컴퓨터간 데이터 교환 형식으로 쓰입니다. JSON 표기법 {}로 데이터를 묶고 key: value로 구성 데이터는 ,로 구분합니다. {중괄호}는 객체를 구성 [대괄호]는 배열을 구성 // 예제 1 '{"name":"kim", "age":25, "address":null}' // 예제 2 { "students":[ {"name":"kim", "age":25}, {"name":"lee", "age":30}, {"name":"choo", "age":18} ] } JSON ↔ JS 객체 파싱 ..

JS JQuery ( + JQuery 사용 방법 )

사실 JQuery가 무거워서 일를 사용하기 보다는 기존 JS를 이용하여 개발을 하는 것이 더욱 좋은 퍼포먼스를 낼 수 있다는 말도 있습니다. 실제로 프로트엔트 커리큘럼 한 자료에서는 JQuery가 빠졌을 정도로 대체가 가능하지만 그래도 아직은 사용하는 곳이 많은거 같기 때문에 간단하게라도 봐보도록 하겠습니다. JQuery JQuery란 화면의 동적 기능을 JS(자바스크립트)보다 쉽게 개발할 수 있게 해주는 JS 기반 라이브러리입니다. DOM과 이벤트 객체는 브라우저 종류가 다를 경우 다른 결과 값을 나타낼 수 있다는 단점이 있습니다. 이런 호환성 문제는 JQuery를 이용함으로 해결되었습니다. 호환성 문제만이 아니라 JQuery는 다양한 애니메이션과 효과를 지원하는 메서드를 지원하기 때문에 개발 시간을 ..

JS Web API ( storage, fetch, geolocation )

Storage API Web Storage API는 브라우저에서 Key-Value 구조 데이터로 저장하고 검색하기 위한 방법을 제공합니다. window.localStorage 특정 웹사이트의 로컬 저장소에 대한 접근을 제공 해당 도메인에 대한 데이터를 저장, 읽기, 수정, 삭제 할 수 있습니다. 데이터는 만료일이 없이 저장되어 브라우저를 닫아도 삭제되지 않습니다. localStorage.setItem("name", "Kim"); // 저장소에 데이터 저장 localStorage.getItem("name"); // 저장소에서 데이터 항목 검색 window.sessionStorage localStorage 객체와 세션에 저장한다는 차이점만 빼면 똑같습니다. 세션에 저장하기 때문에 브라우저를 닫으면 데이터가 ..