분류 전체보기 (133) 썸네일형 리스트형 Vue.js 시작하기 05 - 클래스와 스타일 바인딩 ( html class / 인라인 style 바인딩) - HTML > body - "v-bind:class='t'" and "class='u'" attribute can exist at the same time hello world! ---------------------------------------------------- class defined by obj val! ---------------------------------------------------- input the next command and check class of below line: app3.hasError = true; class defined by computed val! ---------------------------------------------------- setti.. Vue.js 시작하기 04 - computed와 watch ( vs methods) - HTML > body - original msg : {{ msg }} app1.msg = "changed msg"; reversed msg from computed : {{ reversedByComputed }} reversed msg from methods : {{ reversedByMethods() }} ---------------------------------------------------- {{ fullName }} input below line in console and watch logs app2.firstName = 'Tom'; app2.lastName = 'Cruise'; ---------------------------------------------------- yes/no 질문.. Vue.js 시작하기 03 - 템플릿 문법 (보간법, 디렉티브, 동적 전달 인자 넘기기) - HTML > body - message: {{ msg }} input: app1.msg = 'some new msg'; this message is not updated: {{ msg }} ---------------------------------------------------- {{ text4HTML }} this message here disappears ---------------------------------------------------- input: app3.idAfter="someNewId"; ---------------------------------------------------- you can use JavaScript expression {{ numVal * 2 }} {{.. Vue.js 시작하기 02 -인스턴스 (데이터, 메소드, 라이프 사이클) - HTML > body - {{ foo1 }} change {{ foo2 }} change2 - script - // 데이터 객체 var param = { a: 1 } // Vue인스턴스에 데이터 객체를 추가합니다. var vm = new Vue({ data: param }) //try console log // 인스턴스에 있는 속성은 원본 데이터에 있는 값을 반환합니다. vm.a === param.a // => true console.log('vm.a === param.a');// => true console.log(vm.a === param.a);// => true // 인스턴스에 있는 속성값을 변경하면 원본 데이터에도 영향을 미칩니다. vm.a = 2; param.a; // => 2 console.. Vue.js 시작하기 01 - 기초 문법 ( 선언적 렌더링, 조건문과 반복문, 사용자 입력 핸들링, 컴포넌트 등) - HTML > BODY - {{ message }} ---------------------------------------------------- input: app3.seen = false; ---------------------------------------------------- {{ todo.todoItem }} ---------------------------------------------------- {{ message }} 메시지 뒤집기 ---------------------------------------------------- text something below and input: app6.message; {{ message }} ----------------------------.. 팀 프로젝트에서 이해도를 높이는 태도와 실천 방법 모의 프로젝트를 진행했다. 팀으로 진행하는 프로젝트였다. 배운 점이 있다. 구현하고자 하는 프로그램 전체를 깊게 이해하고 있어야 한다는 점이다. 내가 담당하고 있는 기능은 솔직히 어느 정도 여유 있게 마쳤다. 아니, 마쳤다고 착각했다. 그래서 다른 팀원들을 도와주곤 했다. 알고 보니 내 페이지에서 기능이 몇 군데 구멍이 나 있었다. 다른 페이지와 연결해서 테스트를 해 보니까 데이터가 맞지 않아 제대로 작동하지 않는 기능도 있었다. 데이터는 잘 들어가지만, 설계상 애초에 그런 데이터가 들어가면 안 되는 경우도 있었다. 팀 회의에서 빼기로 했던 기능이었는데 혼자서 구현해 버린 곳도 있었다. 또는 조건에 따라서 비활성화돼 있어야 하는 버튼이 그대로 열려 있는 경우도 있었다. 또는 예외 처리가 빠져 있는 곳도 .. 개발할 때 뼈대부터 세우기 / 프로그래밍에서 개요짜기란 건물을 세울 때는 뼈대부터 세운다. 일단 뼈대를 세우고 나면 나머지는 살을 붙이는 일이다. 그만큼, 뼈대를 세우는 일은 큰 작업이고, 튼튼해야 하는 작업이다. 많은 일들이 이와 비슷하다. 큰 줄기부터 세우고, 곁가지를 덧붙인다. 글을 쓸 때는 개요부터 짜고 나서 문단을 채운다. 그림을 그릴 때는 밑그림부터 잡고 내용을 채운다. 수학 문제를 풀 때는 원하는 값과 그 값을 구할 수 있는 공식들부터 정한 뒤에 펜을 들고 계산을 시작한다. 프로그래밍도 그렇게 해야 한다. 개발을 할 때도 어느 정도 흐름을 짜야 한다. 전체적인 구조를 먼저 구상하고 설계해야 한다. 먼저 뼈대를 세우듯이 큰 흐름과 중심 기능들을 잡고, 그 뼈대에 살을 붙이는 식으로 접근해야 한다. 구현해야 하는 기능이 있다고 해서 무턱대고 키보드에.. 자바스크립트 천 단위 콤마 찍기 및 제거하기 - 숫자 자료형 천 단위 콤마 찍기 - 장바구니에 있던 상품들을 구매하는 화면을 만들고 있었다. 서버로부터 item list를 받아온다. 그리고 item 하나씩 row를 생성한다. 참고로 여기서 createNewCell()은 내장 함수가 아니다. input 태그 요소를 되돌려주도록 직접 만든 함수다. function addRowsToCartTable(list) { //기존에 있던 row들 지우기 const tbody = document.querySelector('tbody#orderList'); while (tbody.firstChild) { tbody.removeChild(tbody.firstChild); } //서버로부터 받아온 리스트 안에서 row를 하나씩 꺼내오기 list.forEach((item.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 17 다음