Half Road

function keyword 없이 함수를 정의하는 케이스 들을 정리해 보았습니다. 1.Arrow Function const fn = n => console.log(n) 2.Object Method const obj = { name: 'Half', greet() { console.log(`${name} 안녕하세요`) } // function greet() {...} 축약 표현 } 3.Class Method class Person { constructor(name) { this.name = name; } greet() { console.log(`hi ${this.name}`) } } 참고 https://levelup.gitconnected.com/why-we-dont-need-the-function-key..

공부하다보니 분해구조할당(Destructuring Assign)이 ES modules와 관련이 있어 정리합니다. Destructuring Assign Object 각 속성을 개별 할당하는 syntax입니다. 바로 예시를 보시죠. const obj = { a: '1', b: '2' }; const { a, b } = obj; console.log(a, b); // output // 1 2 const obj = { a: '1', b: '2' }; const item = []; // 좌변 '{}'을 block 처리되게 하지 않기위해서는 '()'로 묶어야함. ({a:item[0], b:item[1]} = obj); console.log('item:', item); // output // item: [1, 2] ..

vue2에서 model속성에 prop, event 정의해서 구현했던 Component 2-way-binding 방식이 vue3에서 Component v-model로 편리하게 구현 가능하게 되었습니다. Child 컴포넌트와 Parent 컴포넌트 정의를 각각 보겠습니다. Options API로 설명하겠습니다. Child 컴포넌트 정의된 prop과 emit을 구현하면 되는데 바로 'modelValue' prop & 'update:modelValue' emit 입니다. Child : :value, @input을 정의하여 지정한 prop과 emit을 연결시킵니다. data의 in - out을 결정했습니다. 여기서는 부모 컴포넌트가 input 값을 받아야하기 때문에 emit함수 2번째 인자에 input 값을 넘겨주..

Vue를 공부하다 보니 Proxy 객체를 종종 보게 되더라구요. 그래서 찿아본김에 간단한 예제를 만들어 보았습니다. Label 요소에 Data를 바인딩해보는 예제입니다. Data 변경시 Label도 같이 바뀌도록 하겠습니다. 기본원리 객체에 어떤 작업을 가할 때 javascript에 내부 메서드(internal method)가 관여합니다. proxy는 이 내부 메서드에 대응하는 트랩이 있으며, 트랩을 구현하면 해당 내부 메서드 동작시 트랩이 가로채서 별도의 처리를 할 수 있게됩니다. 거꾸로 가정하여 어떠한 트랩도 구현되지 않으면 투명한 wrapper로 동작하여 proxy target에 가하는 작업은 있는 그대로 처리될 것입니다. let obj = {say:'hello'} obj = new Proxy(ob..

1. Snake-case ex) my_app_app1 2.Kebab-case ex) my-app-app1 3.Paskal-case ex) MyAppApp1 4.Camel-case ex) myAppApp1

먼저 Project에서 ESLint, Prettier 사용과 VSCode에 적용은 별개라는것을 확인하겠습니다. CLI를 통한 실행 ESLint, Prettier를 CLI로 실행하여 파일들을 검사할 수 있습니다. 해당 도구들을 설치하면 명령어를 실행하여 파일들을 검사하는 것이지 Editor에서 해당 설정이 동작하는것은 아니라는점 숙지해주세요. ESLint, Prettier 적용 npm init vue@latest # Vue CLI를 통한 프로젝트 생성 vue CLI를 통해 ESLint와 Prettier를 설치하신분은 .eslintrc.cjs 파일을 보실수 있습니다. 없다면 ESLint와 Prettier를 각각 깔아주시고 환경설정 파일을 생성해주셔야합니다. 환경설정 파일은 다양한 포멧이 있으니 제일 하단에 ..

보통 ESLint 와 Prettier는 같이 사용하는데 어떤 차이가 있는지 정리해보겠습니다. 사용설명보다는 차이에 대해 집중해서 작성하겠습니다. ESLint 정적코드 검사 도구(static code analysis tool)로 안티패턴이나 문법적인 오류를 수정해줍니다. rule을 적용하여 해당 rule에 위배되는 코드를 검사하여 수정해줍니다. 예시 rule : no-dupe-keys 적용시 Incorrect Code : bar key 중복 사용 rule : no-dupe-else-if 적용시 Incorrect Code : else if 동일 조건 사용 recommended rule이 있는데 ESLint에서 사용을 권장하는 rule 입니다. 예시는 아래와 같습니다. rule : no-unused-vars ..

최근 Vue 설치하신분들은 Vite(비트)를 Build Tool로 지정하여 사용하실 텐데요. Vite에서 @ Alias(별칭)에 대한 소개가 별로 없어서 정리해보겠습니다. Vite 설정파일 Vite 설정파일은 Project 폴더 바로 아래 위치합니다. 해당 파일 안에서 alias를 지정할 수 있는데요. 기본적으로 ./src -> @ 로 지정되어있습니다. 위 이미지처럼 alias 를 지정하였기 때문에 @를 사용해서 경로 지정이 가능합니다. ./src/components -> @/components 이런식으로 작성하면 상대 경로를 고민할 필요없이 간단하게 작성이 가능합니다. VSCode Editor에 별칭 등록 Vite는 Build Tool이기 떄문에 Compile시에 Alias를 정해진 Url로 바꿔줄수 ..