전체 글

lombok 사용법 - 2(@EqualsAndHashCode, @data, @NonNull, @Cleanup, Val, @Value, @builder, @SneakyThrows, @Log, @Synchronized) 예제코드 @EqualsAndHashCode Equals()와 HashCode()를 만들어주는 어노테이션입니다. import lombok.AllArgsConstructor; import lombok.EqualsAndHashCode; @AllArgsConstructor @EqualsAndHashCode public class Member { private String email; private String name; private int age; } public class Member { pri..

arrayobj.sort(sortFunction) sorrtFunction을 생략하면 ASCII 문자 순서로 정렬된다. 예를들어 4, 11, 2, 10, 3, 1이 있다면 [1,10,11,2,3,4]로 정렬이 된다. 즉, 문자열 정렬 방식을 따르게 된다. 그렇다면 숫자를 원하는 오름차순과 내림차순으로 정렬하려면 어떻게 해야 할까? sortFunction 인수에 함수를 지정하면 (a, b) ⇒ a > b : -값 (a,b) ⇒ a = b : 0 (a,b) ⇒ a a - b); console.log(sortedNumbers); // ..

Lombok 사용법 1 (XXXArgsConstructor, Getter, Setter, ToString) 예제코드 Lombok Dependecy 설정 configurations { compileOnly { extendsFrom annotationProcessor } } compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' Configurations : 의존성 그룹으로 dependencies를 통해 의존성 그룹에 라이브러리를 추가해주는 개념이다. complieOnly: 컴파일 시 필요한 라이브러리이다. extendsFrom : 컴파일 시 형식을 확장한다는 의미다. annotat..

[프로그래머스] 역순 정렬하기 문제 설명 ANIMAL_INS 테이블은 동물 보호소에 들어온 동물의 정보를 담은 테이블입니다. ANIMAL_INS 테이블 구조는 다음과 같으며, ANIMAL_ID, ANIMAL_TYPE, DATETIME, INTAKE_CONDITION, NAME, SEX_UPON_INTAKE는 각각 동물의 아이디, 생물 종, 보호 시작일, 보호 시작 시 상태, 이름, 성별 및 중성화 여부를 나타냅니다. NAME TYPE NULLABLE ANIMAL_ID VARCHAR(N) FALSE ANIMAL_TYPE VARCHAR(N) FALSE DATETIME DATETIME FALSE INTAKE_CONDITION VARCHAR(N) FALSE NAME VARCHAR(N) TRUE SEX_UPON_..

예제코드 Spring Data JPA는 스키마를 자동으로 생성해준다. 스키마를 생성하는 application.properties 값을 한번 살펴보자. 아래와 같은 Entity를 만들어 본다. import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; @Entity @Table(name="station") public class Station { @Id @GeneratedValue(strategy..

모든 예제 코드는 github에 있습니다. 13. 마무리 수업 정리 및 향후 학습 방향 안내 Vue.js 공식 문서 Vue.js 스타일 가이드 Vue.js Cookbook Vuex 공식 문서 VueRouter 공식 문서 Vue CLI 공식 문서 Reactivity 데이터 변화를 감지해 화면에 보여주는 것으로 뷰가 가장 크게 지원해주는 부분 인스턴스 뷰로 개발할때 필수로 만들어야 하며, 인스턴스로 화면을 조작해 나갈 수 있다. 컴포넌트 화면의 영역을 구분해서 개발하는 방법 웹 프론트엔드에서 가장 중요한 핵심 컴포넌트 통신 컴포넌트로 개발할때 데이터를 흐름을 예축할수 잇고 데이터를 건너주는 것 props : 상위에서 하위로 event emit : 하위에서 상위로 HTTP 통신 라이브러리(axios) 템플릿 ..

모든 예제 코드는 github에 있습니다. 12. 최종 프로젝트 - 사용자 입력 폼 만들기 프로젝트 생성 및 마크업 작업 vue create 프로젝트 폴더 이름 vue create vue-form 기본적인 마크업 및 컴포넌트 분리 UserNameInput.vue id : PasswordInput.vue pw : LoginForm.vue login v-model 속성과 submit 이벤트 처리 이벤트 버블링과 캡쳐링 블로그 글 v-model을 사용하면 데이터와 바인딩이 된다. submit은 기본적으로 전송 한후에 새로고침을 한다. 그걸 막기 위해 event를 인자로 받아 event.preventDefault()를 한다. UserNameInput.vue id : PasswordInput.vue pw : Lo..

모든 예제 코드는 github에 있습니다. 11. 싱글 파일 컴포넌트 싱글 파일 컴포넌트에 배운 내용 적용하여 개발 시작하기 template에는 root element 하나만 있어야 한다.(아래와 같이 하면 안된다.) 컴포넌트를 재사용해야 하기 때문에 다른 컴포넌트가 데이터를 공유하면 안되기 때문에 아래와 같은 문법으로 정의해야 함 helloWorld.vue {{ message }} App.vue npm run serve로 실행해보기. 싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기 컴포넌트 파일명은 파스칼 케이스, 두 단어 이상으로 하는 것이 좋다. 한 단어로 하면, HTML 표준 태그와 충돌 날수 있기 때문이다. App.vue 에서 App Header를 사용 AppHeader.vue Header 싱글 ..

모든 예제 코드는 github에 있습니다. 10. 프로젝트 생성 도구 - CLI 최신 Vue CLI 소개 Vue CLI 공식 사이트 링크 명령어를 통해 특정 기능을 하는 것이다. CLI(Commend Line Interface) node -v / npm -v : 10.0이상 / 6.0 이상 Vue CLI 도구 설치할 때 문제점 해결 방법 Where does npm install packages? 설치시 문제가 나면 에러가 날 수 있는데, 그것은 권한이 없어서 그렇다(설치 디렉토리에) 그럴때 명령어에 sudo를 붙여준다. 맥에서는 /usr/local/lib/node_modules에 설치됩니다. CLI 2.x와 3.x의 차이점 / 프로젝트 생성 및 서버 실행 웹 개발할 때 알아두면 좋은 리눅스 기본 명령어 ..

모든 예제 코드는 github에 있습니다. 9. 템플릿 문법 - 실전 watch 데이터를 바라보는 것으로 데이터가 변경될때마다 지정한 메소드가 실행된다. increased {{ num }} watch 속성 vs computed 속성 watch 속성과 computed 속성 차이점에 관한 공식 문서 링크 {{ num }} {{ doubleNum }} computed는 Vue 내부적으로 계속 계산을 하며, 데이터 의존성이 있고 캐싱이 되고 빠르게 계산한다는 장점이 있다. 따라서 VeeValidate 내부적으로 이걸로 구현되어 있다. 단순히 Vaidation일때 많이 사용한다. watch는 Num이 변경되었을때 특정 로직을 실행하는데, 실제로 무거운 로직(매번 실행되기 부담스러운)에 많이 사용한다. 새로바뀐 값..