전체 글 (10) 썸네일형 리스트형 [vue]커스텀 디렉티브 활용 서론 HTML 태그안에 v-model, v-for 같이 v로 시작하는 속성(attribute)을 디렉티브라고 합니다. 더 자세히는 v-model 같이 개발자가 따로 정의하지 않아도 vue에서 바로 쓸 수 있는 것들을 빌드인 디렉티브라고 하는데, 여기서는 개발자가 별도로 디렉티브를 정의해보고 사용하는 방법에 대해 알아보겠습니다. 목차 커스텀 디렉티브 만들기 커스텀 디렉티브 예시(입력값 제한하기) 업무효율을 높이는 방법 커스텀 디렉티브 만들기 1. 컴포넌트에 정의하기 (1) 컴포넌트 directives코드 작성 custom directive를 사용하려는 컴포넌트의 script 태그에 directive 키를 추가하고, 그 속에 오브젝트 형식으로 개발자가 사용하려는 directive를 정의합니다. 아래 예시는,.. [vue]라우팅 방식 이해하기 서론 프레임워크 vue는 SPA(Single Page Application) 방식을 사용합니다. Single page라는 말 그대로 화면에 표현되는 html 파일은 단 한개인데, 이 안에 보여질 화면 요소들을(Components) JS코드를 이용해 동적으로 보여주는 구조를 갖고 있습니다. 즉, 사이트 내에서 사용자가 다른 화면으로 이동하면, html은 그대로 있고, 사용자가 보려는 화면의 url정보를 인식하고 해당 url에 맞는 컴포넌트를 동일한 html파일 내부에서 보여주게 됩니다. 이러한 과정을 라우팅이라고 하며, url경로에 따라 보여질 파일을 (1) 사이트에 접속하자 마자 다운받아서 준비해놓을지 (2) 사용자가 요청하면 그때 서버에 요청해서 처리할지 (3) 사용자가 요청은 안했지만, 일단 브라우저.. [JavaScript]얕은 복사, 깊은 복사 이해하기 서론 코딩을 함에 있어서 꼭 알아야 될 개념이 얕은 복사(shallow copy)와 깊은 복사(deep copy)입니다. 문자열(string), 숫자형(number) 등의 자료형과 array 또는 object 같은 객체형 자료가 복사될 때의 차이점을 아시나요? 이 개념을 모르고 코딩을 한다면, 의도치 않게 데이터값들을 무자비(?)하게 훼손하는 코딩을 하고 있을 확률이 높고 언젠가는 미궁에 빠질지도 모릅니다. 여태까지 무탈했다면 그냥 운이 좋았던 겁니다. 목차 원시타입 자료형 vs 참조타입 자료형 콜스택과 힙메모리 얕은 복사 깊은 복사 원시타입 자료형 서론에서 말씀드렸던 string, number, boolean 과 같은 자료형들은 크기가 유한합니다. 예를 들어, 이름, 이메일 같은 문자열이나, 숫자같은 .. [JavaScript] 웹 스토리지 알아보기 - local storage, session storage 서론 웹 개발을 수행하면서 데이터 저장이 필요할 때가 있습니다. 보통 이런 경우 서버DB 송수신을 쉽게 떠올리 실 텐데, 만약에 저장하려는 데이터가 크게 중요치 않고 사용자의 편의 등을 위해 가볍게(?) 쓰일 목적이라면 웹 스토리지 사용을 고려해볼만 합니다. 여기서, 웹 스토리지는 서버와 송수신 작업을 하지 않고 웹 브라우저 자체에 데이터를 저장하는 기술을 말합니다. 목차 로컬 스토리지(local storage) 세션 스토리지(session storage) 사용방법 로컬 스토리지 vs 세션 스토리지 위 서론에서 언급한, 웹 스토리지의 종류는 2가지로 나뉩니다. 로컬 스토리지와 세션 스토리지입니다. [공통점] 2개 모두 웹 스토리지의 주요 목적인, 서버와 송수신 없이 웹 브라우저 내에 데이터가 저장된다는 .. [JavaScript] this 알아보기 서론 자바스크립트의 this는 다른 언어의 this와 달리 좀 변덕(?)스럽게 느껴질 수 있습니다. 어디서 어떻게 쓰이냐에 따라서 개발자의 생각과는 다른 녀석을 가르키고 있을 수 있거든요.이번 블로그에서는 자바스크립트의 this가 어떻게 작동하는 지 그리고 주의해야될 사례들에 대해 소개하며 this 교통정리 좀 해보도록 하겠습니다. 목록 기본사용 일반함수 객체 내 메소드로 사용될 때 콜백함수의 this 생성자 화살표 함수 이벤트 리스너 기본사용 자바스크립트에서 this는 대부분의 경우 함수가 어디서 호출되었는가에 따라 결정됩니다. 이 말은 this가 포함된 함수가 어디서 또는 어떻게 사용되느냐에 따라 가리키는 대상이 달라지게 된다는 걸 의미합니다. 이 내용이 this의 핵심이기 때문에 꼭 기억하셔야 됩니.. 이전 1 2 다음
