Vue.js(47)
-
[Vue.js] VITE 개념(feat.CLI)
# VITE vue 3.0 typescript로 작업을 하려면 package.json에 필요한 라이브러라들을 일일이 다 적어야 함 이 과정을 자동화해주는 것이 vite node.js 개발자가 vue 관련 프로젝트를 만들때 vue와 관련된 최적화된 package.json을 만들어 주는 것 vue관련 프로젝트 작업툴, 빌드도구 설치방식이아닌 호출방식 # VITE vs CLI CLI : 표준 빌드도구, 올인원 VITE : 빠른 빌드도구, 기본 빌드도구 제공 VITE가 CLI보다 빠르다 VITE프로젝트의 목표는 CLI와 같은 올인원 도구가 아니라 빠른 개발 서버와 기본 빌드 도구를 제공하는 데 초점
2021.03.10 -
[Vue.js] TodoList 만들기(연습)
Todo List {{todo.label}} 할 일 완료 전체
2021.03.09 -
21.03.03 lamplight서비스 프로젝트(글쓰기,상세페이지,로그인 ~ 회원가입까지)
#NOTE 1.form 방식 일반 form 형식 2.axios json 방식 json 형식 :to와 to의 차이?? :이 있으면 자바스크립트 사용 가능 ex) to="article/list" :to="'article/list?boardId' + article.boardId" protected _handleResponse(axiosResponse:AxiosResponse) : AxiosResponse { // 로그인 정보 체크 // axiosResponse?.data?.resultCode == "F-A" || axiosResponse?.data?.resultCode == "F-B" (초보 버전) // axiosResponse?.data?.resultCode == "F-A" => 로그인 정보가 아예 없는 경..
2021.03.03 -
21.02.24 lamplight서비스 프로젝트(게시물 추가 테스트, 백엔드 연결, 게시물 번호별 리스팅 등)
#NOTE typescript에서는 title:string, body:string 이런식으로 type을 적어주어야 한다 setup() - setup() 함수는 프로그램 실행시 단 한번 호출된다. - setup() 함수는 프로그램당 한 개씩만 존재할 수 있으며, 최초 한 번 실행된 이후에는 재호출되지 않아야 한다. - 참고: setup() 함수 안에 선언된 변수는, draw() 함수를 비롯한 여타 함수들이 접근할 수 없다. submint.prevent - 말그대로 submit을 막는 것 reactive - reactive는 기존 뷰 문법의 data 속성 느낌이고, - ref는 좀 더 리액티브 속성을 개별적으로 선언하는 느낌....??? state?? 기존 코드에서는 props, data, methods가 ..
2021.02.24 -
21.02.22 lamplight서비스 프로젝트(FormRow 전역 컴포넌트 적용, 상황별 버튼 셋팅, 폰트 적용 등)
# NOTE @apply? - tailwind 방식을 style에 적용할 수 있도록 해주는 것? - 즉, class에 css를 입력하는 tailwind를 style에 바로 입력하는 것 https://tailwindcss.com/docs/functions-and-directives # 소스코드 {{title}} HOME ARTICLE LIST @tailwind base; @tailwind components; @tailwind utilities; /* 여기에 css를 저장할 수 있음 */ @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 400; src: url('https://cdn.jsdelivr.net/korean..
2021.02.22 -
21.02.21 clean서비스 프로젝트(TitleBar 전역 컴포넌트 개념 도입, slot 도입)
전역 컴포넌트 - 자주쓰는 컴포넌트를 app 수준에 적용을 시켜 각 페이지 vue에서 더이상 일일이 컴포넌트를 임포트하고, 정의하지 않아도 되도록 하는 것 Home Main
2021.02.21 -
21.02.20 clean서비스 프로젝트(vue 개발환경 셋팅 및 기초 연습)
# NOTE - java 14 등을 설치하듯이 자바스크립트를 사용하기 위해선 node를 설치해야 함 - node는 자바스크립트엔진 - 웹브라우저(구글)에는 웹엔진이 들어있어 자바스크립트를 구현할 수 있음 java 의존성 = 메이븐 node 의존성 = npm - 메이븐 사용시 필요한 라이브러리를 poam.xml에 입력하면 자동으로 다운로드하듯이 - 필요한 라이브러리를 npm install --save jquery 라고 치면 자동으로 다운로드가 됨 - package.json = poam.xml이라고 생각하면 됨 - package.json 파일이 있으면 npm install만 쳐도 기존 라이브러리 복구가 가능함 - vue 3.0 typescript로 작업을 하려면 package.json에 필요한 것들을 다 적..
2021.02.20 -
[Vue.js] npm, package.json 개념
java 의존성 = 메이븐 node 의존성 = npm - 메이븐 사용시 필요한 라이브러리를 poam.xml에 입력하면 자동으로 다운로드하듯이 - 필요한 라이브러리를 'npm install --save 원하는 라이브러리명' 라고 치면 자동으로 다운로드가 됨 - package.json = poam.xml이라고 생각하면 됨 - 기존의 package.json 파일이 남아있으면 'npm install'만 쳐도 기존 라이브러리 복구가 가능함
2021.02.20 -
[Vue.js] node.js
java로 웹프로그래밍을 하기 위해 java 15 등을 설치하듯이 윈도우환경에서 자바스크립트를 사용하기 위해선 node를 설치해야 함 node는 자바스크립트엔진 (웹브라우저(구글)에는 웹엔진이 들어있어 자바스크립트를 구현할 수 있음)
2021.02.20 -
[Vue.js] v-model
# v-model 개념 v-model에 연결된 태그에 입력된 값(이벤트값)과 출력값을 동기화 시켜줌, 실시간 반응 v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다. v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송 text 와 textarea 태그는 value속성과 input이벤트를 사용 체크박스들과 라디오버튼들은 checked 속성과 change 이벤트를 사용 Select 태그는 value를 prop으로, change를 이벤트로 사용 ## 개념 예시 codepen.io/cjy324/pen/bGwvQbN
2021.01.05