Knowledge Wiki (169) 썸네일형 리스트형 Vue.js for문 1. Vue에도 당연히 for가 있다. n번 순회 ex) Home 리스트 순회 ex) {{ product }} 인덱스 포함 순회 ex) {{ product }} Vue.js 데이터 바인딩 1. 데이터 바인딩 쉬움 데이터 담는 변수 만들고 {{ 데이터바인딩 객체 }} 이렇게 선언하면 끝남. 2. 데이터 바인딩 하는 이유 1) HTML에 하드코딩 해놓으면 나중에 변경 어려움 2) Vue의 실시간 자동 렌더링 쓰려면 필요 3. HTML 속성도 데이터 바인딩 가능... 이때는 속성 앞에 ':' 이거 붙여줘야 함. Vue 문법임. ex) 4. style 속성 데이터바인딩 5. 클래스명 데이터 바인딩 + 기존 클래스명 사용법 예시 filter는 데이터 바인딩 filter-item 은 기존 클래스명 Vue.js .vue 파일 1. .vue파일에 다 있음 .vue에 script 영역, HTML 영역 등 다 몰려있다. 그래서 vue 파일을 그냥 브라우저에서 실행하면 못 알아먹음. 한 예로 App.vue의 정보는 index.html 파일에 변환되어 있다. Vue.js 설치, 생성, 실행 1. Vue 설치 npm install -g @vue/cli 2. Vue 프로젝트 생성 vue create [프로젝트명] 3. Vue 프로젝트 실행 npm run serve Vue.js 기본 환경 세팅 1. 내가 쓰는 쓰는 Tool들 NodeJS Visual Code 2. 내가 쓰는 Extension들 Vetur HTML CSS Support Vue 3 Snippets (쌩코딩 방지용) Vue.js 에 관하여 1. Vue를 쓰는 이유? 쉬워서. 그리고 개발자들끼리 코딩스타일 맞추기가 편해서. 한 기능을 개발할 때 구현할 수 있는 방법이 적어서 다른 프레임워크에 비해 개발자간 차이가 많이 안 남. HTML 렌더링이 빨라서 비트코인 거래소등 값이 실시간으로 변하는 화면에 쓰기 좋음. 2. Vue는 데이터 중심으로 개발해야 함. Vue에서 개발할때는 리스트에서 특정 요소를 안보이게 할 때 CSS display 속성을 바꾸는 게 아니라 바인딩된 데이터를 바꿔야함. JAVA 스트림 그룹화, 분할 - partitioningBy(), groupingBy() 1. 스트림의 그룹화와 분할 partitioningBy()는 스트림을 2 분할한다. groupingBy()보다 빠르다. groupingBy()는 스트림을 n분할한다. Map stuBySex = stuStream.collect(partitioningBy(Student::isMale)); // 학생들을 성별로 분할 List maleStudent = stuBySex.get(true); // 남학생 목록 List femaleStudent = stuBySex.get(false); / /여학생 목록 Map stuNumBySex = stuStream.collect(partitioningBy(Student::isMale, counting())); // 분할 + 통계 int maleCnt = stuNumBySex.get.. JAVA Collector 인터페이스, Collectors 클래스 1. Collector 인터페이스는 수집(collect)에 필요한 메서드를 정의해 놓은 인터페이스 2. Collectors 클래스는 다양한 기능의 컬렉터(Collector 인터페이스를 구현한 클래스)를 제공 long count = stuStream.count(); // 항상 전체 count long count = stuStream.collect(counting()); // 그룹별로 나눠서 counting할 수 있음. 여기선 그룹이 안나눠져있어서 위 코드와 같은 의미 이전 1 ··· 12 13 14 15 16 17 18 ··· 22 다음