All

[자바스크립트] 함수를 정의할 때 주의할 네 가지

1. return 명령은 도중에 개행(표시 위치를 다음 행의 동일 위치로 이동시키는 동작) 하지 않는다. var getTriangle = function(base, height){ return// X base * height / 2;// X return base * height / 2 // O } + 위와 동일한 이유로 다음과 같은 문장에서도 명령 직후에 개행을 해서는 안 된다. - 레이블문과 함께 기술된 break / continue 명령 - throw 명령 - ++, - 연산자(후치) 특히 복잡한 루프인 경우는 return 명령 이상으로 문제를 발견하기 어렵게 될 가능성이 있다. 2. 함수는 데이터형의 하나다. Java Script에서 '함수는 데이터형의 일종'이다. 함수를 정의한다는 것은 실은 '변..

[gulp] gulp 시작하기

퍼블리셔로 일을 하다보면 마크업이 전부가 아니게 된다. 이것 저것 신경써야 할게 많고, 내 머리에서 나오는게 충분하지 않기 때문에 다양한 사이트의 힘을 빌려야 할때가 많다. 그럼 매번 작업을 하고 수정을 할때마다 똑같은 작업을 반복(예를 들어 css minify나 scss를 css로 변환하던가 하는..)해야 하는 이 번거로움을 어떻게 줄일 수 있을까? gulp를 사용해서 초기에 셋팅을 해놓으면 알아서 변환이 된다. 나도 사용안해봐서 이게 얼마나 편하고 좋은지는 모르겠다. 이제 써봐야지 싶어서(반강제적으로) gulp를 사용하기로 했다. 우선gulp를 작업 환경을 구축해야한다. 1. Node.js 다운받기 10.16.0 LTS를 다운받는다. 나는 react 때문에 미리 다운받았기 때문에 패스~ 2. git ..

[React] 리액트 작업환경 준비하기

* window환경입니다. * 다운받을 프로그램들 Node.js 다운받기 10.16.0 LTS를 다운받는다. Yarn 다운받기 npm에 이미 익숙하다면 생략가능 git for windows 다운받기 node 생성할 때 사용 VS Code 다운받기 에디터 프로그램. * 새 프로젝트 만들어보기 git Bash를 열어서 다음 명령어를 입력한다. $ npx create-react-app begin-react 입력하고 좀 기다리면 begin-react라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성된다. 생성이 끝나면 cs 명령어를 사용하여 해당 디렉터리에 들어간 다음 yarn start 명령어를 입력한다. $ cd begin-react $ yarn start 그러면 http://localhost:3000/..

[CSS] background-attachment:fixed; parallax에 최적화

https://jsfiddle.net/Kimara/fh031Lcx/6/ background-attachment scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 이미지가 움직이지 않는다. parallax에 최적화! local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. background-attachment 배경 이미지의 스크롤 여부를 결정하는 CSS이다. parallax 효과를 낼 때 사용하면 좋다. 애증의 IE에서도 사용 가능! 하지만 IE에서 스크롤을 내리거나 키보드로 내리면 이미지가 덜거덕 거린다. 세..

[SVG] svg stroke animate

CSS 사용버전 ▼ https://jsfiddle.net/Kimara/v7snm2wf/ svg stroke - JSFiddle jsfiddle.net 플러그인 사용버전 ▼ https://jsfiddle.net/Kimara/90x5qb74/7/ Edit fiddle - JSFiddle jsfiddle.net SVG를 이용해서 stroke 애니메이션 효과를 주었다!! CSS로 구현 가능하지만 IE에서 작용이 안되는 단점이 있다.ㅠㅠ IE를 버리지 않는 이상 animate효과를 크롬에서만 볼 수 있다는 뜻인데.. 하지만 세상엔 천재들이 많고요? 구글을 뒤지니 역시 제이쿼리 플러그인이 있다! 내가 쓴건 jQuery DrawSVG 플러그인 인데, 이건 윈도우 스크롤을 할때 애니메이션이 발생하게 할수도 있고, 처음..

[VUE] 조건부 렌더링

조건부 렌더링 v-if #객체 구문클래스를 동적으로 토글하기 위해 v-bind:class 에 객체를 전달할 수 있다.일반 class 속성과 공존할 수 있다.예제보기

[VUE] 클래스와 스타일 바인딩

클래스와 스타일 바인딩 HTML 클래스 바인딩하기 #객체 구문클래스를 동적으로 토글하기 위해 v-bind:class 에 객체를 전달할 수 있다.일반 class 속성과 공존할 수 있다.예제보기 #배열 구문배열을 v-bind:class 에 전달하여 클래스 목록을 지정할 수 있다.예제보기 목록에 있는 클래스를 조건부 토글 하려면 삼항 연산자를 이용할 수 있다. 이는 항상 errorClass를 적용하고 isActive 가 true 일 때만 activeClass를 적용한다.예제보기 그러나 여러 조건부 클래스가 있는 경우 장황해질 수 있어서 배열 구문 내에서 객체 구문을 사용할 수 있다.예제보기 #컴포넌트와 함께 사용하는 방법사용자 정의 컴포넌트로 class 속성을 사용하면, 클래스가 컴포넌트의 루트 엘리먼트에 추..

[VUE] computed와 watch

computed와 watch computed 속성 템플릿 내에 너무 많은 연산을 넣으면 코드가 비대해지고 유지보수가 어렵다. #기본예제예제보기 예제를 보면, vm.reverseText의 값은 항상 vm.text의 값에 의존한다. 일반 속성처럼 computed 속성에도 템플릿에서 데이터 바인딜 할 수 있다. Vue는 vm.reverseText가 vm.text에 의존하는 것을 알고 있기 때문에 vm.text가 바뀔 때 vm.reverseText에 의존하는 바인딩을 모두 업데이트 할 것이다. 그리고 가장 중요한 것은 우리가 선언적으로 의존 관계를 만들었다는 것이다. #computed 속성의 캐싱 vs 메소드computed 속성 대신 메소드와 같은 함수를 정의할 수도 있다. 최종 결과에 대해 두 가지 접근 방식..

[VUE] 템플릿 문법

템플릿 문법 보간법[각주:1](Interpolation) #문자열 데이터 바인딩의 가장 기본 형태는 "mustache"구문(이중 중괄호.. 수염 닮아서?)을 사용한 텍스트 보간이다. v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행 할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 한다. 예제보기 #원시 HTML {{}}는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. 예제보기 #속성 {{}}는 HTML 속성(인라인)에서 사용할 수 없다. 쓰고 싶으면 v-bind 디렉티브를 사용. #JavaScript 표현식 사용 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현..

[이슈노트] aOS 이슈 모음 #1 (삼성 브라우저 overflow 이슈)

모바일! html / body에 이벤트를 overflow:hidden을 주고, overflow:inherit를 써서 그 이벤트를 상쇄시킬때 다른 모든 기계와 브라우저에서는 괜찮은데 삼성 브라우저에서는 overflow:inherit가 안먹는다. 아마도 상속받을 속성이 없어서 그런걸까?? 삼성 브라우저 왜구래... 여튼 그래서 overflow:inherit를 overflow:auto로 수정했더니 잘된다~! 해결~