목록Javascript (17)

나아가기

Vue.js + Express로 Memo 앱만들기(2)

1. front / views에 vue 파일 만들기 GroundView.vue 파일을 기본으로 안에 다른 vue 파일들을 import 할 예정!! GrandView.vue 파일 작성하기 HeaderView.vue 파일 작성하기 Memo app FooterView.vue 파일 작성하기 © Memo App. All rights reserved. MemoView.vue 파일 작성하기 + 추가 메모 내용 1 메모 내용 2 메모 내용 3 다음과 같은 화면이 완성되게 됩니다. MemoView.vue 파일 수정하기(1) + 추가 {{ d }} 버튼이 먹히도록, MemoView.vue 파일 수정하기(2) + 추가 {{ d }} 다음과 같은 결과창이 나온다면, 아주 잘따라온 것 입니다!!
Javascript/2022 2022. 11. 8. 09:51
Vue 프로젝트 github에 커밋하기.

1. git에 커밋할 준비를 합니다. git init git add . git commit -m "message" 2. 커밋과 메세지를 넣으면 git의 이름과 이메일을 입력하라는 창이 뜹니다. git config user.name "이름 git config user.email "이메일" git remote add orgin "rep 주소" git push -u origin master 순서대로 잘 따라하시면, 커밋이 잘되었다는 다음과 같은 창이 뜹니다!! 3. 새로운 내용이 추가되거나, 수정되었을 때의 커밋 순서 git add . (또는 특정 파일이나 폴더) git commit -m "message" git push -u origin master
Javascript/2022 2022. 11. 7. 14:01
Vue.js + Express로 Memo 앱만들기(1)

1. 프로젝트 생성 1) Test 폴더를 하나 만들어줍니다. 2) 폴더 안으로 들어가서 개발환경을 셋팅합니다. //Vue 개발 환경 셋팅 npm install -g@vue/cli // frontend 폴더 생성 vue create frontend //생성 후, fontend 실행 cd fontend npm run serve npm run serve를 했을때, 다음과 같은 화면이 뜬다면 지금까지 아주 잘하고 있는 것!!!
Javascript/2022 2022. 11. 7. 13:51
Vue 에러 --fix

해당 에러에 대한 해결책!! npm run lint -- --fix
Javascript/2022 2022. 11. 4. 14:45
Vue.js에서 Sass(SCSS) 사용하기

◽ Sass(Syntactically Awesome Style Sheets)란? - 대표적인 CSS 전처리기 중 하나입니다. - CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문 등을 사용하여 더 편리하게 작성할 수 있습니다. - 웹에서는 직접 동작하지 않으므로 전처리기로 작성 후 CSS로 컴파일하는 방식으로 사용한다. ◽ SCSS(Sassy CSS)란? - Sass의 3버전에서 새롭게 등장한 것으로, CSS와 거의 같은 문법으로 Sass 기능을 지원한다. - {}(중괄호)와 ;(세미콜론)을 사용하는 점이 두드러진 차이이다. ◽ CSS로 컴파일하는 도구 - Webpack: 모듈 번들러 - Gulp: 빌드 자동화 도구 1. scss 파일 만들기 scss 파일 속에 .scss 파일은 만들어줍니다. ..
Javascript/2022 2022. 11. 2. 10:46
Vue.js에서 Splash 구현하기

1. vue-splash 플러그인 설치하기 npm i vue-splash 2. main.js 작성하기 import Vue from 'vue' import VueSplash from 'vue-splash' Vue.use(VueSplash); 3. SplashLayout.vue 작성하기 4. App.vue 작성하기
Javascript/2022 2022. 11. 1. 11:45
Vue로 어플리케이션 만들기_ Todo List(3)

1.화면단 구성하기 TodoList.vue TodoList는 추가한 값들이 저장되고, 저장된 것들을 가져와서 차례대로 보여줄 컴포넌트입니다. 간단하게 로컬스토리지에 저장해서 보여지도록 하겠습니다. {{todoItem}} 1) transition-group태그는 trasition의 뷰 애니메이션을 구현하기 위한 태그로 데이터 추가, 변경, 삭제에 대해서 페이드 인이나 페이드 아웃 등의 여러가지 애니메이션 효과를 줄 수 있습니다. 2) v-for은 지정된 갯수만큼 반복해서 html을 표시하는 반복문 디렉티브 입니다. 여기서 반복시킬 propsdata는 상위 컴포넌트로부터 전달받은 데이터를 이용할 예정입니다. 상위 컴포넌트인 App.vue에서 보내주지 않은 지금 상태에서는 prosdata가 로컬스토리지에서 가..
Javascript/2022 2022. 10. 31. 11:35
Vue로 어플리케이션 만들기_ Todo List(2)

https://blog.metafor.kr/ 아래의 블로그를 보면서 공부하고, 기록한 글입니다!! 은유 블로그 은유의 일상과 개발 및 음악,책,영화 로그 blog.metafor.kr 1. 컴포넌트 구성하기. 기본으로 연결되어 있는 컴포넌트를 지우고, 새롭게 구상한 컴포넌트를 만들고 최종적인 App.vue 컴포넌트에 종속시키는 작업을 합니다. 1) 컴포넌트를 만들어주고, 2) 컴포넌트들을 기본양식을 채워넣어준다. ① TodoHeader ② TodoFooter ③ TodoInput ④ TodoList 1) 각 컴포넌트들의 기본 양식 - 안에 TodoHeader라고 적힌 부분들만 각 컴포넌트에 맞게 바꿔줍니다. 2. App.vue에서 컴포넌트들을 등록합니다. 1) App.vue의 template 부분을 등록한..
Javascript/2022 2022. 10. 28. 17:49
Prev 1 2 3 Next