본문 바로가기

전체 글

 (37)
Vue 선언적 렌더링과 입력 핸들링, 조건문과 반복문 [패스트캠퍼스 챌린지 28일차] 선언적 렌더링과 입력 핸들링 단일 파일 컴포넌트 SFC (Single File Component) Vue라는 확장자로 만들어져 있는 하나의 파일을 '단일의 파일로 만들어져있는 컴포넌트'라는 개념으로 부름 템플릿, 스크립트, 스타일 이 세 태그로 구성해줄 수 있음 템플릿: html(Vue 문법) 스크립트:자바스크립트(Vue 문법) 스타일:CSS(SCSS은 설정 살짝 추가해줘야 함) : 두번째 예시 {{ count }} 여기서 중요한 건 데이터를 갱신하면 그것이 연결된 브라우저의 화면도 같이 갱신된다는 것임 → 반응성 Reactivity 데이터를 갱신하면 화면도 바뀐다! —참고— //메소드. 콜론 기호랑 펑션 키워드 생략 가능 export default { data: function () {}..
Vue eslint 등 [패스트캠퍼스 챌린지 27일차] file-loader 이용, 이미지 가져오기 src 안에 assets 폴더 생성하고 그 안에 logo.png 파일 넣음 패키지 설치 npm i -D file-loader webpack.config.json 세팅 module rules에 { test: /\.(png|jpe?g|gif|webp)$/, use: 'file-loader' } module.exports에 경로별칭(Alias) 추가 속성에는 특수한 기호를 사용할 수 없으니 문자데이터로 만들어서 속성의 키값으로 사용 '~' : 틸드 경로 별칭 : 말 그대로 경로를 별칭으로 만들어서 사용하겠다는 거임 원래 특정 이미지를 찾을 때 ./나 ../ 상대 경로 많이 이용했잖아. 그런데 경로별칭을 사용하게 되면, 해당하는 경로 별칭..
Vue 시작하기 [패스트캠퍼스 챌린지 26일차] Vue.js 뷰 시작하기 개요 모던 웹 프론트엔드 개발의 꽃 framework들 : Vue React Svelte Angular 이중에 하나는 알아야 함 그중 특히 뷰가 사용 난이도도 낮고 성숙도도 높은 편이라 입문자에게 권장 현실적으로는 React 잡이 더 많음 뷰 공식 사이트 Vue.js 3버전 뷰는 공식문서가 잘 정리되어 있으니 참고 Vue.js CDN, Codepen 설치 방법 설치방법 | Vue.js 각 버전에 대한 자세한 정보는 릴리즈 정보를 참고 CDN 스크립트 태그로 연결 간단하게 문법 확인이나 연습 프로젝트 할 거라면 CDN, 더 풍성하게 사용하려면 npm으로 설치 추천 CDN 복사하고, codepen html에 붙여넣기 해서 간단하게 쓸 수도 있음 아니면 스크립트 태그 안에 주소만 복사..

티스토리툴바