코딩을 할 때 컨벤션이 굉장히 중요하다는 것은 다들 알고 있을 것이다. 이번에는 JavaScript 컨벤션 및 컨벤션을 편안하게 지킬 수 있는 방법(자동화)을 소개해보려고 한다. 유명한 자바스크립트 컨벤션 종류 NHN Ent - Toast UI Airbnb Google eslint 여기서 lint란 소스 코드에 문제가 있는지 탐색하는 작업을 의미하고, linter는 이 작업을 도와주는 소프트웨어이다. 자바스크립트는 컴파일 과정이 없는 인터프리터 언어로 런타임 에러가 발생할 확률이 높기 때문에 사전에 에러를 최대한 잡아주는 것이 중요하다. 이때 자바스크립트진영의 오픈소스로 정적 분석 도구로 eslint를 많이 사용된다. 정적 분석 도구란 코드를 분석해서 문법 오류, 안티 패턴 등을 찾아 일관된 코드 스타일..
분류 전체보기
[프로그래머스] 아픈 동물 찾기 문제 설명 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..
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 싱글 ..
