WEB개발이야기/React.js 2024. 2. 28.
Next.js 14버전에서 모달창 띄우는 초간단 방법
Next.js 14 버전에서 모달 창을 쉽게 띄우는 방법을 포스팅하려고 합니다. Next.js는 폴더의 형태와 이름에 따라 경로 구성과 기능이 달라지니, 폴더 구조와 이름을 주의 깊게 설정하는 것이 중요합니다. 아래 글을 참고하여 설정해 보세요. Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드 모달 창을 띄우기 위한 기술 Next 14버전에서 모달을 띄우기 위한 핵심기술로 패러랠 라우트와 인터셉트 라우트가 있습니다. 일반적으로 모달을 구현하기 위해 다음과 같은 폴더 구조를 사용합니다. └── app ├── @modal │ ├── default.js │ ├── (.)flow │ │ └── page.js │ └── ... └── ... 패러랠 라우트 개념 하나의 layou..
WEB개발이야기/React.js 2023. 11. 25.
nextjs(react)에서 tailwindcss와 구글폰트 연계해서 사용하기
Next.js를 사용할 때 스타일링으로 tailwindcss를 많이 사용할 것입니다. 또한 폰트로 Google Fonts도 많이 사용하게 되는데요. 구글 웹폰트를 사용하는 경우 보통 아래와 같이 CDN으로 구글에서 웹폰트를 불러와서 적용하는 방법을 많이 사용합니다. Making the Web Beautiful! 이럴 경우 사용이 편한 장점도 있지만 오프라인이거나 네트워크가 좋지 않은 환경에서는 단점으로 작용을 합니다. 그래서 Next.js에서는 폰트를 별도의 패키지로 만들어서 제공하고 있습니다. 이럴 경우 사용하는 것은 웹폰트를 사용하는 것만큼 쉽고 퍼블리싱 할 때 local로 해당 폴더만 가져가기 때문에 오프라인일 때도 웹폰트가 표현이 되는 장점이 있습니다. Next.js에서 Google Fonts 적..
WEB개발이야기/React.js 2023. 11. 17.
Nextjs(React)에서 Google Sheets를 데이터베이스로 사용할 수 있을까
영세한 개발자나 취미로 개발을 하는 사람이라면 항상 생각하는 것이 내가 개발한 웹서비스를 무료로 서버에 올려서 사용할 수 있을까? 라는 것입니다. 스태틱 한 웹서비스인 경우는 상대적으로 길이 많은데 데이터베이스까지 붙여야 한다면 이건 또 말이 다르게 됩니다. 고성능의 데이터베이스까지는 필요도 없는데 말이죠. 저도 이번에 Next.js(React)로 아주 간단한 웹서비스를 토이 프로그램으로 개발하기로 하면서 데이터베이스에 대해 문득 든 생각이 Google Sheets를 사용하면 되지 않으까?였습니다. 그래서 여기저기 이것저것 알아보다가 굳이 고성능이 필요하지 않다면 Google Sheets가 대안이 될 수도 있겠다고 판단하여 시도해 봤습니다. 결과는 어느 정도 성공적이어서 잊어버리기 전에 공유를 하려고 합..
WEB개발이야기/React.js 2022. 7. 14.
React.js에서 JSX사용하기
JSX란? React에서 JSX는 필수 요소는 아니지만 React를 코딩하는데 많은 편리함을 더해주는 확장 문법이라고 보면 됩니다. JSX란? - React 공식웹사이트 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. React는 JSX 사용이 필수가 아니지만, 대부분..
WEB개발이야기/React.js 2022. 7. 11.
React.js의 아주 기초적인 사용법
React를 공부하기 시작했습니다. 아주 간단한 것부터 알게 된 것을 기록해 볼까 합니다. React는 프레임워크라기보다는 라이브러리라고 할 수 있습니다. 그렇기 때문에 기존의 HTML에 간단하게 React를 적용할 수 있습니다. 먼저 가장 기본적인 HTML은 아래와 같습니다. React.js 적용하기 react.js를 적용하기 위해서 먼저 react.js javascript CDN을 적용해야 합니다. 이제 이 HTML 문서는 React를 실행시킬 수 있습니다. 간단하죠? 한번 간단하게 적용해 보겠습니다. 먼저 react가 발현될 dev를 지정합니다. 보통은 id="root"를 많이 사용하나 바꾸어도 상관없습니다. 그리고 react 문을 작성합니다. react도 javascript이므로 javascrip..
WEB개발이야기/웹퍼블리싱 2021. 10. 20.
자식 컴포넌트의 CSS(SCSS)를 정의할 수 있는 딥셀렉터(v-deep) 설정하는 방법
Vue 프로젝트를 진행하다 보면 vuetify나 quasar 등 매우 다양한 프레임워크나 컴포넌트를 사용하게 됩니다. 그러면서 그 컴포넌트를 내 Vue 프로젝트의 자식 컴포넌트로 불러와서 사용하는 경우가 있는데 그 컴포넌트를 어떻게 CSS를 적용해서 내 입맛에 맞추어 스타일을 변경하고 싶으나 그게 생각처럼 되지 않는 경우가 있습니다. 그걸 되게 하는 방법을 설명해 보려고 합니다. 자식 컴포넌트의 CSS에 쉽게 접근이 되지 않는 이유이렇게 되는 이유는 웹 컴포넌트의 중요한 측면인 스타일 캡슐화때문이라고 합니다. 다시말해서 현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 간섭이 되지 않도록 하기 위함이라고 보시면 됩니다. 그래서 Vue컴포넌트에서 그런데 scoped를..
WEB개발이야기/Vue.js 2021. 1. 11.
Vue의 Vuetify로 대규모 프로젝트 SCSS(CSS) 진행하는 방법
안정성이 입증되었는지 요즘에는 Vue로 대규모 프로젝트를 많이 하는 추세인것 같습니다. 저도 대규모 프로젝트에 퍼블리셔로 참여하면서 얻은 경험을 기록 차원에서 포스팅을 해보려고 합니다. Vue는 하나의 파일에 구조(Template)와 구현(javascript), 표현(CSS)을 모두 다 담고 있기 때문에 풀스택(Full Stack) 개발자에게는 더할 나위 없이 편한 구조이지만 대규모 프로젝트 처럼 개발자, 디자이너, 퍼블리셔가 별도로 존재하는 경우에는 상당히 불편할 수 있는 구조를 가지고 있습니다. 개발자가 개발하는 파일을 퍼블리셔도 동일한 파일의 이번 포스팅에서는 Vue로 대규모 프로젝트를 진행할 때 퍼블리셔 관점에서 퍼블리셔와 프론트앤드 개발자와 협업을 원활히 하는 방법에 대해서 기술하려고 합니다. ..
WEB개발이야기/Vue.js 2020. 7. 27.
Vue에서 왕대접 받고있는 고급 에디터 컴포넌트 tiptap
Angular나 React에도 에디터 컴포넌트가 있겠지만 Vue에도 쓸만한 에디터 컴포넌트가 있습니다. Awesome Vue.js의 Rich Text Editing를 통해 알게된 에디터 컴포넌트입니다. 얼마전까지는 vue-quill-editor가 가장 많은 github Star(현재 5.8k)를 받고 있었지만 언제 부턴가 tiptap에디터가 github Star(현재 7.6k)를 넘어서 현재 1위를 달리고 있습니다. Star가 많다는 것은 그만큼 많은 사람들이 만족하게 사용하고 있다는 뜻이기도 합니다. Prosemirror를 기반으로 한 renderless 에디터라고 하네요. Prosemirror를 이번에 알게 되었지만 Prosemirror github star가 4.5k 정도이니 tiptap이 엄마보다..
WEB개발이야기/Vue.js 2020. 7. 23.
vuex-persistedstate 덕분에 Vue.js 화면을 새로고침 해도 안전해요.
Vue.js로 프로젝트를 개발하는 경우 화면을 이동 할 때 일반 웹페이지처럼 페이지 전체를 새로 고침하는 방식이 아니라 SPA(Single Page Application)와 같이 javascript로 필요한 부분만 교체하는 식으로 개발을 하게 됩니다. 이런 SPA방식의 개발은 모던한 웹사이트 개발에서 많은 잇점을 주고 있는 것이 사실이지만 몇가지 불편한 부분도 있습니다. 지금 소개하려고 하는 vuex-persistedstate는 이러한 불편을 해소해 주는 Vue플러그인이라고 생각하면 됩니다. 보통 모바일 웹이나 앱일 경우는 크게 착각하지 않는데 일반 웹브라우저에서 띄운 경우 습관적으로 뒤로가기 버튼을 클릭 할 때 화면이 새로고침이 되어 버립니다. 또는 기타 다른 이유로 화면을 새로고침하는 경우가 발생하게..
WEB개발이야기/Vue.js 2020. 7. 21.
Vue.js에서 fortawesome아이콘 라이브러리 사용하기
현재 가장 영향력 있는 무료 아이콘 제공처는 Fortawesome일 것입니다. Fortawesome은 초창기 유행하던 Font의 딩벳 형태로 아이콘을 제공하며 많은 개발자들의 사랑을 받았었습니다. Font Awesome 5를 슬기롭게 사용하는 방법 하지만 아이콘을 폰트형태로 만들어서 사용하는 방식에는 한가지 큰 문제가 있었습니다. 아이콘을 하나만 사용하던지, 100개를 사용하던지, 폰트에 포함되어 있는 아이콘을 일단 한번은 모두 다운로드 받아야 한다는 점입니다. 이럴 경우 몇개의 아이콘만 사용하면 되는데 너무 큰 트래픽의 손해를 봐야한다는 점입니다. 트래픽은 바로 비용과 연결이 되기 때문에 규모가 큰 웹사이트는 잘 사용하지 않게 됩니다. 그래서 현재 아이콘을 사용하는 방법의 유행이 fonts방식에서 SV..
WEB개발이야기/Vue.js 2020. 6. 12.
Vue.js에서 Vue-infinite-loading으로 firebase(firestore) 데이터 불러오기
Vue로 웹페이지나 모바일 페이지를 제작할 때 대부분 데이터베이스를 연동해서 불러와 사용하게 됩니다. 트래픽이 많지 않거나 용량을 많이 사용하지 않을 경우 또는 개발자가 테스트용으로 개발을 할때 Google의 Firebase는 매우 유용한 서비스 입니다. 사용량이 많지 않다면 무료로 사용을 할 수 있으닌까요. 만약 게시판의 리스트 형태로 데이터를 보여 줄 경우 일반적으로 페이지를 나누어서 데이터베이스에서 긁어와서 보여주는 것이 일반적입니다. 하지만 요즘 트랜드나 모바일에서는 옛날처럼 페이지를 나누는 것이 아니라 리스트의 가장 아래쪽으로 이동 했을 때 다음 페이지를 불러와서 보여주는 식으로 많이 구현을 하고 있습니다. 그런 것을 보통 infinite-scroll 또는 infinite-loading 이라고 ..
WEB개발이야기/Vue.js 2020. 6. 11.
vue.js가 객체변수의 변화 감지를 못해 깊은 빡침이 있을 때 해결방법
근래의 javascript가 좋아진 이유 중 하나는 ajax와 더불어 실시간 데이터의 변화를 감지해서 바로바로 적용해 주는 것 입니다. vue.js도 그중에 하나라고 할 수 있습니다. vue.js는 data로 선언된 객체변수를 computed나 getters를 사용해서 조건에 부합하는 데이터를 실시간으로 filtering해서 가져올 수 있습니다. 예를들면 아래와 같습니다. data() { return { todos: [ { id: 1, name: '...', age: '...', sex: '...', done: false}, { id: 2, name: '...', age: '...', sex: '...', done: true} { id: 3, name: '...', age: '...', sex: '.....
WEB개발이야기/Vue.js 2020. 4. 8.
Vue에서 moment사용하기 (feat. vue-moment)
자바스크립트에서 거의 표준으로 사용되고 있는 날짜관련 라이브러리인 Moment를 Vue에서 쉽게 사용할 수 있는 라이브러리가 있습니다. vue-moment는 Vue에서 필터 형식으로 Moment를 사용할 수 있게 해 줍니다. 설치하기설치는 아래와 같이 패키지 형태로 설치합니다. npm 패키지로 설치할 경우는 아래의 명령어로 설치하세요. $ npm install vue-moment --save또는 yarn 패키지로 설치할 경우는 아래의 명령어로 설치하시면 됩니다. $ yarn add vue-moment사용하기사용하는 법은 간단합니다. 일단 해당 라이브러리를 불러와서 선언해 준다음 HTML에서 필터형태로 사용하면 됩니다. 먼저 아래와 같이 로딩 후 선언을 해 줍니다. import Vue from 'vue' ..
WEB개발이야기/Vue.js 2020. 3. 24.
Vue.js와 NativeScript로 앱개발을 하기위한 환경 세팅하는 방법
Vue.js로 스마트폰 앱을 개발할 때 가장 많이 사용하는 것이 아마도 네이티브스크립트(NativeScript)일 것입니다. 그냥 웹을 개발하는 것과 달리 모바일 앱을 개발할 때는 JDK나 SDK등 여러가지를 설치하고 세팅하는 것이 헷갈리고 번거로울 수 있는데 그 환경 세팅을 하는 것에 대해서 포스팅하려고 합니다. 사전설치 장비는 Windows 10과 갤럭시 S10을 기준으로 설명하도록 하겠습니다. Chocolatey 설치 Chocolatey는 Windows용 패키지 관리툴이라고 보시면 됩니다. 리눅스나 맥OS는 패키지 관리툴을 많이 사용하지만 Windows는 패키지 관리툴이 있는지도 잘 모르는 사람들이 많습니다. 쉽게 설명하면 보통 윈도우에 프로그램을 설치하려면 웹사이트에 접속해서 설치프로그램을 다운로..
WEB개발이야기/Vue.js 2019. 7. 24.
개발하면서 경험으로 알게 된 Vuex에서 Store활용 방법
Vue의 개발을 편리하게 도와 주는 공식 툴 중에 Vuex가 있습니다. Vuex의 주요 기능은 개발하는 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역활 및 관리 입니다. 만약 이게 없다면 컴포넌트간 데이터를 주고받기 위해서 부모는 자식에서 props의 방법으로, 자식은 부모에게 Emit event의 방법으로 데이터를 주고 받아야 합니다. 또한 형제 컴포넌트간 데이터를 주고 받으려면 너무 복잡해져서 EventBus를 활용해야 그나마 사용을 할 수 있게 됩니다. 간단한 프로젝트인 경우에야 사용이 가능하겠지만 대형 프로젝트인 경우에는 이러한 방법으로는 도저히 감당이 되지 않고 개발 후 운영을 한다고 해도 거의 맨붕이 올 것입니다. 이러한 문제를 해결해 주는 것이 Vuex라고 보시면 됩니다. 데이터..
WEB개발이야기/Vue.js 2019. 6. 28.
Vue의 Nuxt로 개발할 떄 자동으로 브라우저 띄우는 방법
Nuxt로 Vue를 개발하다 보면 항상 사용하는 명령어가 npm run dev 또는 npm dev 또는 yarn run dev 또는 yarn dev 일 것입니다. 모두 동일하게 Nuxt를 개발 모드로 띄워라 인데.. 몇가지 명령어를 덫붙히면 dev모드 실행과 동시에 브라우저를 자동으로 띄 울 수 있는 몇가지 방법이 있습니다. 첫번째 방법 아주 간단한 첫번째 방법은 package.json을 사용하는 방법입니다. 아래와 같이 package.json의 scripts명령어 중에 원하는 실행 명령 뒤에 "dev": "nuxt --open"와 같이 --open을 붙히는 것입니다. { //... "scripts": { "dev": "nuxt --open", "build": "nuxt build", "start": "..
WEB개발이야기/Vue.js 2019. 6. 21.
Vue의 NUXT에서 SASS를 적용해서 사용하는 방법(feat. BULMA)
웹화면은 HTML, CSS, JAVASCRIPT로 구성되어 있습니다. 웹개발자 분은 보통 HTML과 JAVASCIPT로 작업을 하고, 웹디자이너는 HTML과 CSS로 작업을 합니다. 하지만 점차 시간이 지남에 따라 HTML, CSS, JAVASCRIPT, 심지어 백오피스까지 손을 대는 풀스텍 개발자가 나오게 되었습니다. 그러면서 자연스럽게 CSS 마저도 마치 프로그램처럼 작성하고 싶은 요구가 생겨나기 시작했습니다. 그런 요구에 따라 CSS도 프로그램처럼 개발하는 언어가 생겼는데 그것을 CSS 프리프로세서, 한국말로 CSS 전처리기라고 합니다. CSS 프리프로세서로 코딩을 하고 컴파일을 하면 결과물은 기존의 CSS 형태로 되어져서 나옵니다. CSS프리프로세서의 종류는 LESS, SASS(SCSS), Sty..
WEB개발이야기/Vue.js 2019. 6. 18.
Vue의 NUXT 템플릿을 쉽게 설치하는 3가지 방법
Vuejs의 장점은 매우 가볍고 쉽고 빠르게 기존에 있는 웹서비스에 접목해서 사용하는 것입니다. 새로운 웹프로젝트에도 쉽고 빠르게 적용을 할 수 있습니다. 하지만 쉽다고 해도 Vuejs의 최대 성능을 끌어 올려서 처음부터 파일을 만든다는 것은 생각보다 쉽지 않습니다. 더욱이 개발자 마다, 또는 개발할때마다 기본 틀이 달라진다면 혼자 개발할때는 문제가 없지만 통일된 규격을 가지고 있어야 할 대규모 프로젝트를 진행하기에는 어려운 점이 너무나 많습니다. 그래서 React의 NEXT처럼 Vue에서도 NUXT를 제공하고 있습니다. NUXT는 일반적인 Vue.js 어플리케이션을 정해진 규격에 맞게 만드는 프레임워크라고 할 수 있습니다. NUXT 설치하기 NUXT에 대한 설명은 나중에 포스팅을 하도록 하겠습니다. 여..
WEB개발이야기/Vue.js 2019. 4. 24.
Vue.js용 페이지 네비게이션 인 vuejs-Paginate Component를 소개합니다
Vue.js를 사용하다보면 수많은 사람들이 만들어서 무료로 공유해 놓은 Components들이 많이 있습니다. 라이선스를 꼭 확인해야 하겠지만 대부분 사용에 안전한 MIT라이선스를 주로 사용합니다. 그중에 보통 게시판 리스트 하단에 페이지를 넘기는데 사용하는 Paginate 컴포넌트를 소개해 볼까 합니다. 이 컴포넌트는 디자인은 Bootstrap3을 사용하고 있기때문에 Bootstrap3도 같이 설치를 해야 합니다. 설치하기 npm이나 yarn을 사용한다면 설치는 쉽습니다. NPM으로 설치 $ npm install vuejs-paginate bootstrap@3.3.x --save Yarn으로 설치 $ yarn add vuejs-paginate bootstrap@3.3.x CDN으로 설치 CDN은 설치라..
WEB개발이야기/Vue.js 2019. 4. 24.
Vue.js에서 axios를 사용하여 서버통신하는 방법
웹 또는 앱을 개발하다 보면 거의 대부분이 서버가 필요하게 됩니다. 서버에 내용을 저장하고 웹이나 앱에서 서버의 저장된 내용을 불러다가 사용자에게 보여주게 되는데요. 이때 javascript에는 axios라는 아주 훌륭한 플러그인이 있습니다. axios는 javascript용 플러그인으로 많이 사용하지만 Vue.js에서도 매우 요긴하게 사용되어 집니다. axios는 Promise 기반의 자바스크립트 비동기 처리방식을 사용합니다. 그래서 요청후 .then()으로 결과값을 받아서 처리를 하는 형식으로 구성되어 있습니다. axios.get('/api/data').then(res => { console.log(res.data) }) /api/data에서 데이터를 불러옵니다. 불러온 데이터는 .then()의 re..
WEB개발이야기/Vue.js 2019. 4. 17.
Vuejs의 컴포넌트 사용 시 알아두면 좋은 6가지
Vue.js의 컴포넌트를 사용할때 알아두면 유용한 6가지에 대해서 포스팅을 해보겠습니다. 이것을 알게계시면 소스코드도 많이 줄일 수 있고 보기에도 좋은 코딩을 할 수 있습니다. 케밥표현과 카멜표현 컴포넌트의 영역에서 다른 컴포넌트 명을 작성할 때 2개 이상의 단어가 조합된 이름 일 경우 꼭 케밥(-) 형식으로 작성해야 합니다. HTML에서는 대소문자를 구별하지 않기 떄문에 hongGilDong 과 honggildong을 동일하게 처리하기 때문입니다. 컴포넌트의 영역에서 이름을 카멜형식(hongGilDong)으로 작성했더라도 영역에 작성할 때는 케밥형식으로 변경하여 작성하면 됩니다. Vue.js가 자동으로 같은 컴포넌트로 인식을 합니다. 케밥 형식 : 단어와 단어 사이를 '-'로 연결시키는 표현 (예 : ..
WEB개발이야기/Vue.js 2019. 3. 29.
Vue-CLI 도구 활용방법
Vue를 활용하여 개발 한다면 Vue-CLI는 반드시 알고 있어야 하는 도구 입니다. Vue-CLI가 Vue의 코어는 아니지만 개발자가 쉽게 Vue 프로젝트를 개발 할 수 있게 해주는 아주 유용한 도구입니다. Vue-CLI 란 무엇인가??? Vue-CLI에서 CLI는 Command Line Interface의 약자로 윈도우에서는 Command 창, 맥에서는 터미널 창에서 타이핑으로 명령어를 입력하여 원하는 바를 실행 시키는 도구를 말합니다. Vue-CLI은 내부적으로 Webpack을 활용합니다. Vue-cli로 명령을 실행 시키면 cli가 자동으로 최적화된 Webpack 형태의 결과물을 생성 시켜 줍니다. Vue-CLI로 할 수 있는 것은 무엇인가??? 그럼 Vue-cli로 할 수 있는 것이 무엇이냐??..
WEB개발이야기/Vue.js 2019. 3. 27.
javascript(Vue.js)로 배열에서 ID를 활용하여 Index값을 찾을때 요긴한 함수
Vue.js에서 배열에 있는 특정 id의 Index값을 찾아서 그 배열을 처리하는 요긴하면서 쉬운 함수를 공유합니다. 아래의 예제는 todolist배열을 화면에 나열해 놓고 그 중에 항목을 하나 클릭할 경우 doneToggle(id) 또는 deleteTodo(id)를 불러와서 반대 값으로 토글 시키거나 항목을 삭제하는 함수입니다. {{ a.todo }} (완료) × doneToggle : function(id) { var index = this.todolist.findIndex(function(item){ return item.id === id; }) this.todolist[index].done = !this.todolist[index].done } 핵심은 findIndex() 함수입니다. 함수에서 받..
WEB개발이야기/Vue.js 2019. 2. 20.
Vue.js의 이벤트버스에 대한 정리
Vue에서 컴포넌트 간 기본적으로 데이터를 통신하는 방법은 props와 events라는 것은 알고 있을 것이라는 전제로 정리하겠습니다. 부모컴포넌트 --> 자식컴포넌트 : props(속성 정의만으로 전달) 자식컴포넌트 --> 부모컴포넌트 : events(이벤트 발생 시켜 전달) 하지만 컴포넌트가 부모, 자식 관계만 있는것은 아니고 형제컴포넌트, 손자컴포넌트도 있을 것입니다. 이럴경우 사용할 수 있는 방법이 이벤트버스를 이용하는 방법입니다. 이벤트버스는 컴포넌트가 많지 않아 규모가 작은 중소 프로젝트에 사용해야 합니다. 컴포넌트가 많아지고 복잡해 지면 누가 누구에게 통신을 하고 있는지 헷갈리기 떄문에 디버깅이 너무 힘들어 지게 됩니다. 그래서 대규모 Vue 프로젝트인 경우는 Vuex라이브러리를 사용하여 통..
WEB개발이야기/Vue.js 2019. 2. 13.
Vue.js 템플릿 구문 작성시 주의할 점
Vue.js의 꽃인 컴포넌트에서 DOM을 구성하기 위한 Template을 만들때 주의할 점 몇가지를 포스팅합니다. is 특성 사용하기컴포넌트를 등록하고 HTML에서 이것을 사용하려면 보통 아래와 같이 사용합니다. 하지만 컴포넌트가 기존 HTML테그의 하위로 들어갈 경우 정상적으로 렌더링이 되지 않는 경우가 있는데 이럴때 is특성을 사용하면 정상적으로 렌더링이 됩니다. 아래와 같이 작성할 경우 라는 HTML태그에 컴포넌트가 들어가 있으므로 실제로 렌더링을 하면 이 나오지 않습니다. 이럴때 아래처럼 컴포넌트를 불러올 때 is특성을 사용하면 정상적으로 나옵니다. 컴포넌트의 템플릿 작성시 루트요소는 하나여야 합니다.컴포넌트 안에 옵션을 작성하는 요소중에 Template가 있습니다. DOM을 형성할 때 어떻게 나..
WEB개발이야기/Vue.js 2019. 2. 13.
Vue.js의 핵심인 컴포넌트에 대한 간략한 정리
Vue.js의 핵심이자 꽃이라 할 수 있는 컴포넌트(Component)에 대해 간략히 정리해 보려고 합니다. Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발을 하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용합니다. 또한 각각의 컴포넌트간 데이터의 이동에 대해서는 단방향 이동만 가능하다고 합니다. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식 컴포넌트가 읽어 올 수 있습니다. 가진 것을 모두 퍼 주는 부모님의 내리사랑 같은거에요. 하지만 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 넘기기 위해서는 기본적으로는 넘길 수 없고 Event를 사용해서 보내..
WEB개발이야기/Vue.js 2019. 1. 15.
Vue.js의 이벤트 사용 방법 정리
Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다. HTML에는 나 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript를 통해서 기본 이벤트와 어우러지게 사용하는 방법들이 있구요. 여기에서 Vue.js는 javascript로 조금 어렵게 구현했던 기능들을 v-on 디렉티브를 통해서 좀더 쉽게 구현할 수 있는 방법을 제공하고 있습니다. 이벤트 구현 Vue.js에서 이벤트를 구현하는 방법인 v-on 디렉티브를 이용합니다. v-on은 줄여서 @로 대체할 수 있습니다. 예> 좋아요 좋아요 좋아요 버튼을 클릭하면 javascript로 작성된 goodgood() 메서드를 호출합니다. 활용 이벤트 명 아래의 이벤트명을 v-on 또는 @와 같이 사용하면 됩니다. v-o..
WEB개발이야기/Vue.js 2019. 1. 15.
Vue 인스턴스의 라이프사이클
보통 프레임워크나 라이브러리의 경우 처리 순서에 따라 라이프사이클이 존재합니다. 사실 사람이 인식하기도 전에 순식간에 라이프사이클이 지나가 버리기 때문에 육안으로는 관찰이 거의 어렵습니다. 하지만 컴포넌트를 개발하거나 일반 개발 과정에서 라이프사이클은 중요한 요소로 작용을 합니다. 예를 들면, 분명 내 생각에는 A * ( B + C ) = D가 나와야 하는데 E가 나오는 경우가 발생을 합니다. 확실하게 D가 나와야 하는데 말이죠.. 이런 경우 십중팔구는 라이프사이클 때문 일 확률이 높습니다. 아직 순서 상으로( B + C )가 계산 되기도 전 인데 먼저 A * B를 계산해 버리는 경우 이런 문제가 발생할 수 있다는 것입니다. 그래서 라이프사이클을 이해하는 것은 나중에 심도있게 개발 할 때 중요한 요소 일..
WEB개발이야기/Vue.js 2019. 1. 11.
Vue 인스턴스의 주요 옵션 정리
Vue를 실행시기키 위해서는 먼저 Vue.js를 import를 한 후 Vue 인스턴스를 생성해야 합니다. Vue인스턴스를 생성할때 지정된 몇가지 옵션 객체를 전달해야 하는데 이 옵션객체들이 어떤것이 있고 어떻게 사용되는지 간단히 정리하려고 합니다. Vue 인스턴스란? Vue를 실행하기 위해 첫번째로 정의 하고 생성해야 하는 객체입니다. Vue 인스턴스 예제 var vm = new Vue ({ el : '#test', data : { name : '홍길동'}, }) 옵션 설명 예제 비고 el Vue가 실행될 HTML의 DOM 요소를 지정 el : '#test' CSS의 선택자를 선택하듯이 선택 (#--> id 지정, . --> 클레스 지정) data Vue가 바라보는 data 객체를 지정 data : { ..
