@deveely

이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.Svelte에서 컴포넌트는 화면에 랜더링되거나 사라질 때를 나타내는 컴포넌트의 상태가 있다.이 상태의 흐름을 컴포넌트 생명주기라 한다.mounted: 컴포넌트가 화면 또는 다른 컴포넌트에 랜더링된 (연결된) 상태. 이 전에는 화면 요소에 접근할 수 없음destroyed: 컴포넌트가 화면 또는 다른 컴포넌트에서 사라진 (연결이 해제된) 상태before update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 되기 전 상태after update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 된 후 상태이런 상태들은 컴포넌트가 화면(DOM)상에서 어떻게 다뤄지냐에 따라 다양하게 호출된다.예를들어 특정 컴포넌트가..

이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.컴포넌트Svelte에서는 Single File Component를 정의하고 사용할 수 있다.Name.svelte컴포넌트 사용할 때 전달받을 데이터 (props)는 export 구문을 통해 선언한다{name}App.svelte사용 측에서 import 하여 컴포넌트를 가져온다.props는 해당 컴포넌트 attribute를 통해 전달한다. (컴포넌트에서 export된 이름에 맞춤)전달하려는 prop의 이름과 데이터 변수명이 같다면 생략하여 작성할 수도 있다.{#each names as name}{/each}컴포넌트내에서 데이터를 가공할 땐 원본 데이터에 영향이 없도록 작성하는 것이 중요하다.만약 컴포넌트 내에서 데이..

[Svelte 시리즈] 데이터 바인딩, 조건문, 반복문, 이벤트 핸들링이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.데이터 단/양방향 바인딩Svelte는 기본적으로 단방향 데이터 바인딩이다.아래 예제에서 input에 name을 바인딩 했지만, 값을 변경한다고 name 변수의 값은 바뀌지 않는다.Hello {name}양방향 바인딩을 하려면 bind 키워드를 사용해 아래와 같이 작성해주면 된다.Hello {name}조건문마크업 영역에서 조건문을 사용할 수 있다.{#if 조건} 조건문 내용 {/if} 와 같이 조건문 영역을 잡을 수 있다.{:else}, {:else if 조건} 를 통해 else / else if 구문을 작성할 수 있다.Svelte의 대부분 구문..

싱글 파일 컴포넌트를 작성하기 위해 새로은 .vue 파일을 생성한 후 scaffold라고 입력한 후 엔터를 치면 위와 같은 코드를 자동완성해준다.

빌드 시 개행문자 관련 경고가 발생했다. .eslintrc.js 파일의 rules에 'linebreak-style'을 0으로 하는 설정을 추가하는 것으로 해결했다.# .eslintrc.js module.exports = { .... rules: { 'linebreak-style': 0, .... }}

먼저 Vue-CLI 를 이용하기 위해서는 Node.js과 NPM이 설치되어있어야 한다.설치가 안된 경우 https://do-study.tistory.com/66 을 참고하여 설치할 수 있다. NPM을 이용하여 Vue-CLI 설치 (3.0.x)NPM이 설치되어있으면 아래 명령어로 Vue-CLI 를 매우 간단하게 설치할 수 있다.# Vue-CLI 설치npm i -g @vue/cli # 버전 확인을 통해 정상설치 확인 vue --version-g 옵션은 글로벌 패키지로 설치한다는 옵션으로 해당 PC 개발환경의 모든 프로젝트에서 사용이 가능하도록 하는 것이다.Vue-CLI를 이용하여 프로젝트 생성먼저 CMD창에서 프로젝트를 생성할 경로로 이동한다. 만약 C:\work 디렉토리 밑에 생성하고 싶다면 cd C:..

jQuery 를 이용해 form에 입력된 데이터를 JSON으로 생성하는 방법을 소개합니다. 1. JSON 데이터를 생성할 예시 form ID : PW : 2. form -> JSON 데이터 생성var arrayData = $('#exampleForm').serializeArray();var json = {};$.each (arrayData, function (i, e) { if (json[e.name]) { if (!json[e.name].push) { json[e.name] = [json[e.name]]; } json[e.name].push(e.value || ''); } else { json[e.name] = e.va..

jQuery.each(callback) 메소드 사용 시 break, continue 등의 제어를 해야하는 경우가 있다. 이 때 false를 return 하면 break, true를 return 하면 continue와 같은 역할을 한다. 예 1 2 3 4 5 $('.category-item').each(function(){ if($(this).hasClass('highlight')) { return false; // each문을 빠져나간다. break; 와 같음 } }); Colored by Color Scripter cs

부트스트랩 홈페이지에서 볼 수 있는 예제는 다음과 같다. var options = {html : true,container : 'body',trigger : EVENT(click, hover 등),content : function() {return 'popover로 보여질 내용 HTML';}}; $('selector').popover(options); 위처럼하면 selector 요소에 trigger에 이벤트 발생 시 팝오버가 보여진다. 하지만 trigger를 hover지정 시 content에 지정한 function이 2번 실행하는 문제가 발생했다. 구글링 결과 Bootstrap이 popover를 위해 내부적으로 2번 호출되는 메소드가 있어서 그렇다는것도 있고,hover에 mouseenter, mouseo..

1. CDN 추가 1 2 cs 2. 에디터를 보여줄 공간에 설정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Insert title here Colored by Color Scripter cs 3. 에디터 초기화 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 $(document).ready(function(){ var toolbar = [ ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['strikethrough', 'superscript', 'subscript']], ['fontsize', ['fontsize']], ['color', ['color']],..