본문 바로가기

전체 글266

CSS로 로고 정렬 사이트에서는 사이트 제목이 필요하고 그 옆에 붙는 것이 바로 로고이다.흔히 로고와 사이트 제목의 간격과 라인을 잘 맞춰줘야 하는데, 본 작업은 여간 귀찮은 작업이 아니다.나는 로고에 position: absolute; 로 설정해주고 top, left 속성을 조절하며 제목과 맞추었었는데,최근 알아낸것이 로고의 position 속성을 absolute가 아닌 relative 로 설정해주고 top, left 속성을 부여해주는 방식이다. 내가 원래 썻던 방식은 로고의 상위 객체에 position: relative를 설정해주어야 하는 반면,(absolute는 relative에 종속되니까 그렇습니다.)처음부터 로고에 position: relative를 설정해주면 앞과같은 귀찮은 설정을 안 해도 top, left 로 .. 2017. 4. 8.
vue.js에서 jquery와 bootstrap을 쓰는 방법 아래의 링크에 세밀하게 잘 나와있다. https://vuejs-kr.github.io/jekyll/update/2017/03/02/vuejs-jquery-bootstrap/ 2017. 3. 31.
vue.js에서 컴포넌트를 사용해야 될때 vue.js의 핵심적인 기능중 하나가 바로 UI 컴포넌트화이다.이를 통해 우리는 UI 협업 개발이 가능해지며, 재사용성까지 높아진다. 하지만 최근까지 vue.js를 사용해본 나는 몇몇 문제에 부딫혔다.도대체 언제 컴포넌트를 사용해주면 되는 것과, 컴포넌트의 범위는 어디까지 정해놓고 개발해야 되는가 하는 문제이다.아직까지 대형 앱 개발을 안 해서인지 컴포넌트를 사용할 일이 많지 않았다. 초반에는 그냥 모든 UI를 컴포넌트화 시켜서 사용하면 되지 않을까? 하고 주구장창 만들었었는데,만들다가 이게 뭔 뻘짓인가 싶었다.그래서 컴포넌트를 꼭 사용하는 이유에 대해서 찾기 시작했고,두가지 결론에 이르렀다. 첫번째, 구조적인 웹페이지를 만들고 싶으면 컴포넌트를 사용해라.페이지를 컴포넌트로 구조화 시킴으로써 사이트 협업.. 2017. 3. 31.
vue.js computed와 methods의 차이2 vue.js에서 computed와 methods의 차이가 하나 더 있다면,바로 methods는 함수에서 매개변수를 받아올 수 있지만computed는 그럴수 없다. 또한 computed는 주로 배열 sorting이나 값 filter를 할때 많이 쓰이고,methods는 이벤트에 따른 어떠한 기능을 수행할때 주로 쓰는것을 발견할 수 있었다. 간단하지만 중요한 사항인거 같다. 2017. 3. 30.
vue cli의 .vue파일에서 sass사용하기 vue cli에서 .vue 확장자 파일로 개발하다 보면 css를 sass로 사용하고 싶을때가 많다.그래서 그게 가능한지 찾아보았는데, 4번의 시도를 해보아도 쉽게 적용되지 않았다.그래서 vue.js의 멘토이신 김청진님께 물었을때 아래와 같은 참조페이지를 소개해주었고, https://vuejs-kr.github.io/jekyll/update/2017/01/17/vuejs-external-css-library/ 잘 해결할 수 있었다. yeah~~ 2017. 3. 29.
vue.js에서 jquery를 쓰는 경우 vue.js를 공부하면서 jquery는 더이상 쓸 일이 없지 않을까?(bootstrap 불러오는거 빼고)라고 생각했었다.그런데 최근 vue.js를 가지고 코드를 짜다가 vue.js의 methods 속성 안의 함수에서 jquery를 사용하게 되었다. 사용의 발단은 input에서 텍스트를 입력하고 엔터를 치면 안에 있는 값을 판별하여 어떠한 기능을 수행하고자 함이었는데,컴포넌트의 data는 건들기 싫었다.그렇게 되었을때 결국에는 javascript나 jquery를 사용하여 input의 value에 접근할 수밖에 없었다. 이 경험을 통해 생각하게 된것이 만약 vue.js안에서 해당 컴포넌트에 속하지 않은 다른 컴포넌트의 속성이나 값을 받아와야 할때 jquery를 이용할 수 있지 않을까? 라는 생각을 하게 되었.. 2017. 3. 29.
vue.js의 methods속성에서 유의할 점 vue.js를 쓰다보면 이벤트 함수정의에서 methods 속성을 잘 쓰게 된다.이때 주의할 점이 있다.바로 methods 내부에서 es6 문법을 썼을때 생기는 문제다.대부분 methods 안에서의 함수는 어떠한 데이터 속성을 조작하는 경우가 많다. 이때 this라는 객체를 사용해주어 데이터에 접근하게 된다.하지만 여기에서 () => {} 같은 es6 함수 문법을 사용해 주면,this 객체로 데이터에 접근을 하지 못하게 된다. 원인은 es6안의 this가 함수 내 객체로 변경되기 때문이다.사소한 문제이지만 vue.js를 es6문법으로 작성한 사람에게는 원인을 알 수 없는 미스테리한 삽질 문제가 될 수 있다.(혹 모르는 분들이 있으면 주의하길 바랍니다. ㅎㅎ) 2017. 3. 29.
vue.js의 v-else-if 디렉토리 허용 버전 최근 vue.js를 공부하면서 v-else-if를 사용할 일이 생겼다.그런데 계속해서 에러가 났다... (10분을 낭비..)문제의 원인을 찾아보니 v-else-if는 vue.js 2.1.0 버전부터 지원하고 있었다.(내가 쓴 버전은 2.0.1 버전..) https://kr.vuejs.org/v2/guide/conditional.html#v-else-if(위의 문서를 참고했다.) 모두 참고하길 바래요. ㅎㅎ 2017. 3. 29.
D3.js transform의 translate 함수 웹콘텐츠가 깔끔하고 근사한 디자인이 되려면 배치와 여백이 핵심이라고 할 수 있다.그것을 위해 우리는 CSS에서 float, margin, padding, border 등등을 이용한다. D3.js도 단순히 구현만 하는것이 아니라 그것을 배치하고 적절한 여백을 주는 것이 중요하다.그래야 콘텐츠가 보다 더 깔끔하고 근사하게 보일 것이다. 나는 항상 D3.js 콘텐츠를 구현할때 초기 여백 설정을 한다.D3.js는 SVG 기반으로 CSS와 다르게 따로 여백 함수가 있지는 않고 transform 의 translate 함수를 사용해서 여백을 설정해줘야 한다.그리고 콘텐츠 또한 설정한 여백을 기반으로 계산하여 만들어 줘야 한다. 초반에 이러한 여백 부여 방식에 적응하기가 쉽지 않았지만,자주 사용하면서 점차 익숙해져가고.. 2017. 3. 28.

티스토리툴바