Development
-
[Vue.js] 템플릿 문법Development/Vue.js 2021. 9. 27. 00:32
Vue.js의 공식 문서를 참고하여 정리합니다. https://v3.vuejs-korea.org/guide/template-syntax.html#%E1%84%87%E1%85%A9%E1%84%80%E1%85%A1%E1%86%AB%E1%84%87%E1%85%A5%E1%86%B8-interpolation 템플릿 문법 | Vue.js 템플릿 문법 Vue.js는 렌더링 된 DOM을 컴포넌트 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파 v3.vuejs-korea.org 데이터 바인딩의 기본적인 형태 보간법(데이터를 보간하는 방법) = Mustache(이중 중괄호)를 사용한 텍스트 보간법입니다. {{ ms..
-
[Vue.js] 조건문과 반복문Development/Vue.js 2021. 9. 26. 19:12
공식 가이드 문서를 참고하여 조건문과 반복문에 대해 정리합니다. https://kr.vuejs.org/v2/guide/index.html#%EC%A1%B0%EA%B1%B4%EB%AC%B8%EA%B3%BC-%EB%B0%98%EB%B3%B5%EB%AC%B8 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org APP.vue는 SFC(Single File Component)로 아래와 같이 세가지의 태그로 구성할 수 있습니다. template script style 조건문 h2의 0을 클릭해서 0보다 커지면 '0보다 큽니다' 라는 문구가 출력되도록 조건문을 실행해보겠습니다. v-if로 조건문을 사용합니다. App.vue 파일 내용 {{ count }} 0보다 큽니다..
-
[Vue.js] 시작하기Development/Vue.js 2021. 9. 23. 09:33
공식 가이드 문서 https://v3.vuejs-korea.org/guide/introduction.html 시작하기 | Vue.js 시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 v3.vuejs-korea.org 공식 가이드 문서를 참고하여 정리해보도록 하겠습니다. 1. 설치 방법 https://v3.vuejs-korea.org/guide/installation.html 설치방법 | Vue.js 설치방법 Vue.js는 점진적으로 적용할 수 있도록 설계되었습니다. 이는 요구사항에 따라 여러 방법으로 프로젝트에..
-
[React] propsDevelopment/React 2021. 7. 21. 00:13
리액트의 Props에 대해서 정리해보겠습니다. 아래 리액트 홈페이지에서 해당 내용을 참고해보세요. https://ko.reactjs.org/docs/components-and-props.html Components and Props – React A JavaScript library for building user interfaces ko.reactjs.org props 는 properties의 줄임말입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용합니다. 먼저, 'name' 이라는 값을 Hello컴포넌트에 전달해보겠습니다. import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export def..
-
[Flex] 여러줄 묶음Development/CSS 2021. 5. 25. 23:51
이번에는 felx-wrap을 정리해보겠습니다. flex-wrap 속성을 사용해서 items를 한 줄 혹은 여러 줄로 만들 수 있습니다. flex-wrap의 default 값은 nowrap이기 때문에 container의 width에 따라서 가변 하면서 한 줄로 표시됩니다. (기본 값은 작성해주지 않아도 적용 됩니다) 아래 mozilla 사이트에서 브라우저 호환성과 예시를 참고해보시면 좋을 것 같습니다. https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap flex-wrap - CSS: Cascading Style Sheets | MDN CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내..
-
[Flex] 수평과 수직Development/CSS 2021. 5. 24. 23:56
css 속성 중 보다 쉽게 정렬할 수 있는 Flex에 대해 정리해보겠습니다. 먼저 아래 mozilla에서 설명해놓은 곳에서 브라우저 호환성을 확인하신 후 사용하시면 좋을 것 같습니다. https://developer.mozilla.org/ko/docs/Web/CSS/flex flex - CSS: Cascading Style Sheets | MDN flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. developer.mozilla.org 첫 번째로 가장 기본적인 수평과 수직으로 쌓는 방법입니다. Flex를 사용하여 수평으로 쌓는 방법 item1 item2 item3 .container { display: flex;..