Vue(/vjuː/ 로 발음,view와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한프로그레시브 프레임워크입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는현대적 도구및지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.
Vue를 알아보기 전에 Vue에 대해 자세히 알고 싶다면 핵심 원칙과 샘플 프로젝트를 바탕으로 설명하는비디오를 만들었으니, 참고하시면 좋을 것 입니다.
이미 숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면다른 프레임워크와의 비교를 확인하십시오.
ES 2015 (ES 6)
1. let, const 키워드 추가
기존의 변수는 함수 scope를 가진 var 키워드를 이용하여 선언하였다. 때문에 block scope 를 가진 let과 const 키워드를 추가하였다. 기존에는 상수형 키워드가 없어 CONST_TEST와 같이 대문자로 상수임을 표시했다면, ES 6부터 const 키워드가 추가되어 값의 변경을 통제한다.
2. arrow 문법 지원
arror 문법은 두 가지의 장점을 제공한다. 첫 번째는 익숙하면 편하고 간결해진 코드를 작성할 수 있다. 두 번째는 this 를 바인딩하지 않는다. (다르게 말하면, this는 해당 scope의 this와 같다.)
두 번째 this를 바인딩 하지 않는다는 코드로 설명하겠다. 우선 아래 코드를 보자. test 객체에 name변수와 fn이라는 메소드를 두었다. 아래 test.fun으로 메소드를 실행한다.
3. iterator / generator 추가
위 arrorw에서 샛길로 빠져서 더 새진 않겠습니다. 이 둘은 따로 공부해서 글을 쓸 정도로 내용이 깊고 많습니다.
4. module import / export 추가
사실 저는 익숙하고 당연하게 import / export를 써 왔는데 도입된 시점이 그리 오래되지 않았다는 것에 잠깐 놀라네요.
5. Promise 도입
자바스크립트의 비 동기 callback hell을 해결해 줄 기법이 추가 되었습니다.
ECMA 2017 (ES 8)
사실 ECMA 2017 까진 정리하지 않으려 했는데, 보던 중 반가운 기능이 추가되어 소개 합니다.
async — await
위에서 ES6에서 callback hell을 해결하기 위해 Promise가 도입되었다고 했는데 async-await도 Promise처럼 callback 을 해결할 뿐만 아니라 좀 더 직관적이고 단순하게 코드를 만들 수 있습니다.
0. 공통 명명 규칙
대소문자가 구분되며 길이에 제한이 없다.
예약어를 사용해서는 안 된다.
숫자로 시작해서는 안 된다.
특수문자는 '_' 와 '$'만을 허용한다.
파스칼 표기법 (PascalCase)과 카멜 표기법(camelCase)를 사용한다.
PascalCase : 모든 단어에서 첫 번째 문자는 대문자이며 나머지는 소문자이다.
camelCase : 최초에 사용된 단어를 제외한 첫 번째 문자가 대문자이며 나머지는 소문자이다.
반의어는 반드시 대응하는 개념으로 사용해야 한다.
1. 패키지(Package) 명명 규칙
패키지명은 표준 패턴을 따라야 한다.
Ex) [com].[Company].[Project].[TopPackage].[LowerPackage]
패키지명은 가급적 한 단어의 명사를 사용한다.
Ex) 좋은 예 : com.nexon.sudden.member.object
Ex) 나쁜 예 : sudden.memberObject
2. 클래스(Class) 명명 규칙
클래스명에는 파스칼을 사용한다.
Ex) public class HelloWorld {}
인터페이스에는 특별한 접두사나 접미사를 사용하지 않고 파스칼을 사용한다.
Ex) public interface Animal {}
인터페이스를 구현한 클래스에는 특별한 접두사나 접미사를 사용하지 않고 파스칼을 사용한다.
Ex) public class Tiger implements animal{}
추상 클래스에는 특별한 접두사 접미사를 사용하지 않고 파스칼을 사용한다.
Ex) public abstract class Animal {}
3. 메소드(Method) 명명 규칙
메소드명에는 파스칼 표기법을 사용한다.
Ex) public void SendMessage(String message) {}
속성에 접근하는 메소드명의 접두사는 'get','set'을 사용한다.
Ex) public void setDisplayName
Ex) public void getDisplayName
데이터를 조회하는 메소드명의 접두사는 find를 사용한다.
Ex) public void findData(String data){}
데이터를 입력하는 메소드명의 접두사는 input을 사용한다.
Ex) public void inputData(HashMap data){}
데이터를 변경하는 메소드명의 접두사는 modify를 사용한다.
Ex) public void modifyData(HashMap data){}
데이터를 삭제하는 메소드명의 접두사는 delete를 사용한다.
Ex) public void deleteData(String data){}
데이터를 초기화 하는 메소드명의 접두사는 initialize을 사용한다.
Ex) public void initData(String data){}
반환값의 타입이 boolean인 메소드는 접두사로 is를 사용한다.
Ex) public void isData(String Data){}
데이터를 불러오는 메소드명의 접두사는 load를 사용한다.
Ex) public void loadData(){}
데이터가 있는지 확인하는 메소드명의 접두사는 has를 사용한다.
Ex) public void hasData(){}
보다 지능적인 set이 요구될때 사용하는 메소드명의 접두사는 register를 사용한다.
Ex) public void registerAccount(){}
새로운 객체를 만든뒤 해당 객체를 리턴해주는 메소드명의 접두사는 create를 사용한다.
Ex) public void createAccount(){}
해당 객체를 다른 형태의 객체로 변환해주는 메소드명의 접두사는 to를 사용한다.
Ex) public void toString(){}
해당 객체가 복수인지 단일인지 구분하는 메서드명의 접미사는 s를 사용한다.
Ex) public void getMembers(){}
B를 기준으로 A를 하겠다는 메소드명의 전치사는 By를 사용한다.
Ex) public void getUserByName(String name){}
반환값의 타입이 boolean인 메소드는 접두사로 is를 사용한다.
Ex) public void isData(String Data){}
데이터를 불러오는 메소드명의 접두사는 load를 사용한다.
Ex) public void loadData(){}
데이터가 있는지 확인하는 메소드명의 접두사는 has를 사용한다.
Ex) public void hasData(){}
보다 지능적인 set이 요구될때 사용하는 메소드명의 접두사는 register를 사용한다.
Ex) public void registerAccount(){}
새로운 객체를 만든뒤 해당 객체를 리턴해주는 메소드명의 접두사는 create를 사용한다.
Ex) public void createAccount(){}
해당 객체를 다른 형태의 객체로 변환해주는 메소드명의 접두사는 to를 사용한다.
Ex) public void toString(){}
해당 객체가 복수인지 단일인지 구분하는 메서드명의 접미사는 s를 사용한다.
Ex) public void getMembers(){}
B를 기준으로 A를 하겠다는 메소드명의 전치사는 By를 사용한다.
Ex) public void getUserByName(String name){}
4. 변수(Variable) 명명 규칙
변수와 메소드의 파라미터에는 카멜표기법을 사용한다.
변수에 약어를 사용하지 않고 모든 의미를 충분히 담는다.
한 글자로 된 이름을 사용하지 않는다.
선언된 지점에서 초기화하며, 가능한 사용범위를 최소화 한다. 숫자 0 레퍼런스 null
반복문에서 인덱스로 사용할 변수는 i,j,k 등으로 사용한다.
Ex) for(int i = 0; i < 10; i++){}
지역변수와 멤버변수(전역변수)는 변수명 앞에 밑줄(_)을 사용하여 구별한다.
boolean타입의 변수는 접두사로 is를 사용한다 Ex) isCheck
