Java Script (8) 썸네일형 리스트형 Vue6 2023.05.10 Vue - Life Cycle Hook ● Navigation Guard - Vue router를 통해 특정 URL에 접근할 때 다른 url로 redirect를 하거나 해당 URL로의 접근을 막는 방법 - 종류 1. 전역 가드 : 애플리케이션 전역에서 동작 2. 라우터 가드 : 특정 URL에서만 동작 3. 컴포넌트 가드 : 라우터 컴포넌트 안에 정의 ● 전역 가드 - Global Before Guard : 다른 url 주소로 이동할 때 항상 실행 : router/index.js에 router.beforeEach()를 사용하여 설정 : 콜백 함수의 값으로 다음과 같이 3개의 인자를 받음 to -> 이동할 URL 정보가 담긴 Route 객체 from -> 현재 URL 정보가 담긴 Rout.. Vue5 2023.05.09 Vue - Vue Router ● UX - User Experience - 유저와 가장 가까이에 있는 분야, 데이터를 기반으로 유저를 조사하고 분석해서 개발자, 디자이너가 이해할 수 있게 소통 - 유저가 느끼는 느낌, 태도, 행동을 디자인 - 사람들의 마음과 생각을 이해하고 정리해서 우리 제품에 녹여내는 과정이 필요 - 유저 리서치, 데이터 설계 밍 정제, 유저 시나리오, 프로토타입 설계 등이 필요 ● UI - User Interface - 유저에게 보여지는 화면을 디자인 - UX를 고려한 디자인을 반영, 이 과정에서 기능 개선 혹은 추가가 필요한 경우 Front-end 개발자와 가장 많이 소통 - 예쁜 디자인 즉 심미적인 부분만 중요하다기보다는 사용자가 보다 쉽고 편리하게 사용할 수.. Vue4 2023.05.08 Vue - Vuex Advanced ● Local Storage - Window.localStorage : 브라우저의 내장 객체 중 하나 : key-value 형태로 데이터를 저장할 수 있는 저장소 : localStorage에 저장된 데이터는 브라우저를 종료해도 계속해서 유지 됨 : 다른 탭에서도 동일한 데이터를 공유할 수 있는 반면, 다른 도메인에서는 접근 불가 : 단, 보안과 관련된 중요한 정보를 저장하기에는 적합하지 않음 : setItem(key, value) -> key, value 형태로 데이터 저장 / 모두 문자열로 저장됨 : getItem(key) - key 값으로 저장된 데이터 불러오기 - JSON.stringify : JSON 객체의 메서드 : 자바스크립트 객체를 JS.. Vue3 2023.05.04 Vue - 상태 관리 패턴 ● State Management - state : 현재에 대한 정보(data) - 우리는 여러개의 component를 조합해서 하나의 App을 만들고 있음 - 각 component는 독립적이기 때문에 각각의 상태(data)를 가짐 - 이러한 component들이 모여서 하나의 App을 구성하기 때문에 여러 개의 component가 같은 상태(data)를 유지할 필요가 있음 - Centralized Store : 중앙 저장소(store)에 데이터를 모아서 상태 관리 : 각 component는 중앙 저장소의 데이터를 사용 : component의 계층에 상관없이 중앙 저장소에 접근해서 데이터를 얻거나 변경할 수 있음 : 중앙 저장소의 데이터가 변경되면 각각의 c.. Vue2 2023.05.03 Vue - 컴포넌트간 데이터 통신 ● Data in components - 한 페이지 내에서 같은 데이터를 공유해야 하는데 페이지들은 component로 구분이 되어있다. - 이때 필요한 컴포넌트들끼리 데이터를 주고받으면 데이터의 흐름을 파악하기 힘듦 개발 속도 저하 유지보수 난이도 증가 문제가 생기기 때문에 - 부모-자식 관계를 갖는 컴포넌트의 특성을 이용하여 부모-자식 관계만 데이터를 주고받게 하면 데이터의 흐름을 파악하기 용이하고 유지 보수하기 쉬워진다. - pass props : 부모->자식 으로의 데이터 흐름 emit event : 자식->부모 으로의 데이터 흐름 ● Pass Props - 요소의 속성(property)을 사용하여 데이터 전달 - props는 부모(상위) 컴포.. Vue1 2023.05.01 Vue - Vue 심화 문법 ● Text Interpolation - 가장 기본적인 바인딩(연결) 방법 - 중괄호 2개로 표기 - DTL과 동일한 형태로 작성 - Text interpolation 방법은 모두 일반 텍스트로 표현 ● Directives - v접두사가 있는 특수 속성에는 값을 할당 할 수 있음 - 값에는 JS 표현식을 작성 할 수 있음 - directive의 역할은 표현식의 값이 변경될 때 .... - : 을 통해 전달인자를 받을 수 있음 - . 으로 표시되는 특수 접미사 -directive를 특별한 방법으로 바인딩 ● 새 Vue instance 생성 - 각각의 instance 들은 연결된 DOM element에만 영향을 미침 - 연결되지 않은 DOM이 Vue의 영향을 .. JavaScript - 2 2023.04.19 JavaScript - 배열과 객체 ●함수 - 참조 타입 중 하나 - 함수 정의 방법 1. 함수 선언식(function declaration) : 일반적인 프로그래밍 언어의 함수 정의 방식 function 함수명() { } 2. 함수 표현식(function expression) : 표현식 내에서 함수를 정의하는 방식 : 함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능 변수 키워드 함수명 = function () { } : 표현식에서 함수 이름을 명시할 수 있지만 함수이름은 호출에 사용되지 못함 - 기본 인자 : 인자 작성 시 = 문자 뒤에 기본 인자 선언 가능 name = 'Anonymous' - 매개변수와 인자의 개수 불일치 허용 1. 매개변수 arg1 = 1, arg2 .. JavaScript - 1 2023.04.18 JavaScript - 자료형과 제어문 ● Javs Script - 클라이언트 웹(브라우저)에서 실행 - 쉽게 배울 수 있고 강력한 스크립트 언어 - 웹 페이지가 이벤트 발생 시 어떻게 작동하는지 디자인/프로그래밍 - 웹 페이지 동작을 제어하는데 널리 사용 - 클라이언트 = 고객 / 서버 = 서빙(종업원) 클라이언트가 요청하면 서버가 클라이언트의 요구사항을 응답해줌 - HTML 문서의 콘텐츠를 동적으로 변경할 수 있는 언어 ● JavaScript Engine - 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터 - 대체로 웹 브라우저(크롬, firefox..)에서 사용 - 웹 브라우저의 역할 : url을 통해 web을 탐색 : HTML/CSS/JavaScript를 이해한 뒤 해석해.. 이전 1 다음