본문 바로가기

전체보기

 (286)
VueJS에서 탭을 클릭 했을 때 컴포넌트를 변경하는 방법 is 속성을 이용해 컴포넌트를 선택해서 렌더링 할 수 있다. currentTabComponent가 'home'을 리턴하는지 'blog'를 리턴하는지에 따라서 다른 컴포넌트가 나타난다. Home Blog
VueJS의 자식 컴포넌트에서 부모에 이벤트를 주는 방법 자식 컴포넌트의 버튼을 클릭하면 커스텀 이벤트인 @add-number가 호출되어 number가 1씩 더해진다. {{ number }} $emit 메소드의 두 번째 인자를 통해 특정 값을 보낼 수도 있다. $emit 메소드의 두 번째 인자에 넣은 2가 $event 들어가고 이제는 버튼을 클릭할 때마다 2씩 숫자가 오른다. app.component('child-component', { template: ` 더하기 ` }) @add-number에 메소드를 넣으면 메소드의 첫 번째 파라미터로 $event 값을 받을 수 있다. const app = Vue.createApp({ data() { return { number: 1 } }, methods: { onAddNumber(event) { this.number ..
VueJS 시작하기 React에 비해 Vue를 실행하는 것은 너무 쉽다. 아래 코드만 입력하면 끝이다. {{ message }} 먼저 head 내부에서 vue를 위한 cdn을 불러오고 나머지는 순수 자바스크립트를 이용한 구현과 유사하다. 위 예제를 입력하면 message에 'Hello World!'가 들어가 빈화면에 Hello World!가 나타나게 된다. 이제 변수 app이 참조하는 인스턴스를 통해서 DOM을 조작할 수 있다. console 창을 열고 app.message에 다른 문자를 넣으면 바뀌는 것을 확인할 수 있다. 이처럼 Vue는 DOM을 간단히 다룰 수 있게 해준다. 아래는 컴포넌트를 이용한 예제다.
NuxtJS로 Github에 블로그 만드는 방법 NuxtJS는 VueJS로 SSR(Server Side Rendering)을 가능하게 하는 프레임워크다. 블로그와 같이 정적인 문서를 다루는 웹페이지에 적합하다. 요즘에는 github.io라는 URL 페이지가 심심치 않게 보인다. 보통 jekyll라는 것을 활용하여 좋은 프리셋을 선택해 블로그로 활용하는 듯한데 Nuxt를 이용하면 디자인을 마음대로 바꿀 수 있어서 좋다. 리액트에 대해서 잘 알고 있다면 Vue를 조금 공부하더라도 어렵게만 보이는 Nuxt를 쉽게 구현할 수 있다. Nuxt 설치 아래의 create nuxt-app 명령어로 시작하자. 대부분 필요한 것들을 알아서 설치해준다. npx create nuxt-app 프로젝트-폴더-이름 생성된 프로젝트 폴더에 진입해서 아래 명령어를 입력하면 바로 실..
SEO를 위한 HTML 태그 작성 - title, meta 인공지능 기술이 무섭게 등장하는 이 시대에 검색엔진 역시 똑똑해졌다. 더 이상 키워드를 중복해서 넣는 등의 상위 노출을 위한 꼼수가 통하지 않는다. 그래도 역시 썸네일은 중요하다. 검색엔진 크롤링이나 사용자가 썸네일을 보고 사이트에 제일 먼저 접근하기 때문이다. title title 태그에는 제목이 들어간다. 검색엔진 입장에서 가장 중요한 정보일 수 있다. 때문에 페이지의 내용을 정확히 설명할 수 있도록 적어야 한다. Trouble Shooter - 자바스크립트를 이용한 문제 해결 방법들 meta meta 태그를 이용해서 아래처럼 페이지를 설명하는 글을 작성할 수 있다. 마찬가지로 검색엔진 입장에서 중요한 정보이고 title과 함께 썸네일로 활용되거나 검색 키워드에 영향을 줄 수 있다. meta 태그에서..
스크롤에 반응하는 애니메이션을 만드는 방법 스크롤을 움직여 아이템이 나타났을 때 특정 애니메이션 효과를 주려면 AOS 라이브러리를 쓰는 게 편하다. michalsnik.github.io/aos/
SASS를 이용해서 특정 색의 밝기를 비율로 조절하는 방법 .button--lighten { background: lighten(#6b717f, 20%); } .button--darken { background: darken(#6b717f, 20%); } lighten과 darken 함수에 따라서 원래 색이 변환된다.
웹 개발에 필요한 사이트 모음 Image 이미지 다운로드 unsplash.com svgbackgrounds.com 아이콘 다운로드 flaticon.com iconmonstr.com 랜덤 이미지 picsum.photos CSS Sprites cssspritestool.com SVG Sprites svgsprit.es Video 동영상 다운로드 pexels.com CSS 예제 CSS 다양한 도형 예제 css-tricks.com/the-shapes-of-css/ box-shadow 예제 getcssscan.com/css-box-shadow-examples gradient 예제 colorzilla.com/gradient-editor Color 색 조합 color.adobe.com/ko/create/color-wheel Animation CS..

티스토리툴바