본문 바로가기
vue.js 코딩공작소 책 요약(3) 고급 컴포넌트와 라우팅 슬롯: 슬롯은 자식 컴포넌트와 부모 콘텐츠를 엮어 컴포넌트의 콘텐츠를 동적으로 업데이트하기 쉽게 한다. 동적 컴포넌트: 사용자 행동에 따라 모든 컴포넌트를 변경하기 쉽게한다. 예를들어 다양한 그래프를 표시하는 관리자 패널을 만든다고 했을때 사용자 행동을 바탕으로 간단하게 동적 컴포넌트를 사용하여 각 그래프를 변환할 수 있다. 슬롯 사용 컴포넌트를 사용할 때 컴포넌트에 데이터를 전달하기 위해 부모 콘텐츠와 자식 콘텐츠를 엮어야 할 때가 있다. 슬롯요소는 Vue.js에서 컴포넌트의 시작과 끝 태그 사이에 추가 된 데이터를 어딘가에 표시해야 할 때 사용하는 특별한 태그이다. 부모에서 자식으로 넘겨주지 않고 콘텐츠를 삽입하는 방법 컴포넌트를 사용할 때 시작과 끝 태그 사이에는 콘텐츠를 추.. 2020. 7. 16.
브라우저 밖으로 나온 자바스크립트 - 웹팩 (2) Webpack 4. 운영 모드의 도입 공식문서 실서버용과 개발용 앱은 설정이 각각 다르다 webpack에서 제공하는 dev, prod 모드의 특징과 모드의 설정방법을 살펴보자. 실서버용 번들은 압축 및 난독화가 되어있음 개발용 번들은 그나마 좀 알아보기 쉬움 모드 사용 방법 명령어 : webpack --mode=development webpack.config.js : module.exports = { mode: 'development' };dev && prod 스위칭 예 dev와 prod의 config.js파일을 따로 두어서 만약, dev라면 npx webpack만 쳐서 번들링(webpack.config.js) prod라면 webpack --config webpack.config.prod... 2020. 7. 15.
브라우저 밖으로 나온 자바스크립트 - 웹팩 (1) 생활코딩 Webpack강의를 들으며 작성한 내용입니다. Webpack 1.웹팩 이전의 세계와 모듈 이름이 충돌하는 문제 발생, 모듈의 등장 규모있는 어플리케이션에서 각각의 개발자들이 사용하고있는 변수의 이름이 중복될 가능성이 있다. 1)모듈화 전 Hello, Webpack. // source/hello.js var world = "Hello"; // source/world.js var world = "World";2)모듈화 후. hello.js, world.js를 따로 다운로드 받게된다. 네트워크 커넥션이 증가한다. 네트워크 부하 발생. 모듈화를 하면 마치 하나의 디렉토리처럼 hello.js안에서 사용하는 js 변수는 해당 파일안에서만 사용할 수 있다. // source/hello.js var world.. 2020. 7. 13.
tistory 기본 캘린더를 이용해서 일일포스팅 똥글뱅이 만들어보기 git-blog로 옮길까 말까 진지하게 고민했었던 이유가 바로 github는 contribution 내역을 예쁘게 보여주기때문..! 왠지 초록색 풀이 잔뜩 심어져있으면.. 뭔가 열심히 하고있다는 느낌도 나고.. 뿌듯할것 같았다. 하지만 마이그레이션이 엄두가 안나서 포기. 티스토리 캘린더 템플릿을 이용해서 어설프지만 비슷하게 만들어 보기로 했다. 1) 블로그 관리메뉴 > 스킨편집으로 이동한다 2) HTML 편집 클릭 3) HTML아래의 코드를 원하는 위치에 넣는다 - 처럼 sidebar 클래스 안쪽에 넣어야 한다. - 엘리먼트 안에 붙여넣지 않도록 주의한다. 4) [적용] > [새로고침] 버튼을 클릭하여 미리보기에 달력이 정상적으로 표현되는지 여부를 확인한다. 5) 실제 블로그에 와서 정상반영 여부를 확인.. 2020. 7. 10.
vue.js 스터디 1주차 7/7 1주차 Vue.js를 배우는 이유 tobe 프로젝트가 vue.js를 사용한다.(11/1 오픈) 9월 통합테스트 지원 하므로 원활한 인수인계를 받기 위해 vue.js를 미리 공부해 둘 필요가 있다. 스터디 방식은 한주에 한 챕터씩 공부하고 Q&A식으로 진행.. vue를 쓰는이유? 백그라운드 렌더링을 하기때문에 속도가 상대적으로 빠르다그외 SPA는 모든 js를 내려받는데 쇼핑몰에서 속도를 낼 수 있을까?할것 다음주까지 개발환경 구축하기 2020. 7. 7.
[vue.js] vue.js 코딩공작소 책 요약(2) 수식어 살펴보기 앞서 살펴본것처럼 v-model은 입력 값에 바인딩할 수 있다. 해당 값은 각각의 입력 이벤트에 따라 업데이트 된다. v-model 지시자와 수식어를 사용하면 작동방식을 바꿀 수 있다. 예를들어, .number를 사용해서 값을 숫자타입으로 변환하거나, 입력에 .trim을 사용하여 양쪽 공백을 제거 할 수도 있다.number 수식어 사용 .number 수식어는 v-model 지시자 값을 숫자로 변환할 때 사용한다. HTML은 type="number"라고 명시해도 항상 문자열을 반환하지만 .number 수식어를 사용하면 해당 현상을 방지하고 숫자를 반환한다.사용방법 trim 수식어 사용 폼 정보를 가져올때 앞이나 뒤에있는 여백은 사용하지 않는다. vue.js는 trim수식어로 자동으로 제거 .. 2020. 7. 7.

티스토리툴바