개발
-
vue 백오피스 개발 (with vuetify3, vite) 1. 개발 환경 설정개발/Vue3 2024. 3. 16. 13:48
vue3 + vite + vuetify3를 사용하여 백오피스 어드민(관리자 사이트)을 간단하게 만들어 보고자 한다. 1. 프로젝트 구성 및 설치 node 설치 vue3는 node 18 이상 버전 설치를 요구한다. 윈도우는 node 공식 홈페이지에 접속해서 설치하도록 한다. (https://nodejs.org/en/download) Node.js — Download Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 맥에서 node를 설치하는 방법은 아래와 같다. (brew 사용) # mac에서 brew로 node 설치 brew install node@20 brew link node@20 vue3 + vite..
-
[vuejs] vuejs 설치 하기 / vue 프로젝트 생성 / vue2 install개발/Vue 2023. 10. 23. 22:25
1. vuejs 설치 1.1 node 설치 vuejs를 설치 하려면 제일 먼저 pc에 node가 설치되어 있어야한다. node 홈페이지: https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node가 설치되면 npm이 자동으로 설치되는데 이를 이용해서 vue를 설치하도록 한다. 설치 후 아래와 같이 cmd에서 node 버전을 확인하면 설치가 성공적으로 된 것을 확인 할 수 있다. node --version 1.2 vuejs 설치 vuejs 공식홈페이지에서 다양한 방법으로 vuejs를 설치 할 수 있는데 여기서는 npm으로 설치하도록한다. npm 설치후 v..
-
[클린코드 자바스크립트] 경계 다루기개발/javascript 2022. 4. 3. 21:13
* 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다. min - max 최소값, 최대값이 포함되는지 안되는지 경계가 애매할 수 있다. 최소값고 최대값의 포함여부를 결정해야한다. (이상 - 초과 / 이하 - 미만) 네이밍에 최소값과 최대값 포함 여부를 표현한다. 명시적인 코드를 작성하도록 노력한다. function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // 상수 const MIN_NUMBER = 1; const MAX_NUMBER = 45; getRandomNumber(MIN_NUMBER, MAX_NUMBER); // 상수 (최소, 최대값을 포함) const MIN_IN_NUM..
-
[클린코드 자바스크립트] eqeq 줄이기, 형변환 주의, isNaN개발/javascript 2022. 3. 14. 23:01
* 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다. eqeq 줄이기 == 보다 === 를 사용한다. === 를 사용하여 타입까지 검사하여 추후 발생되는 버그를 줄일 수 있도록 한다. # 타입 캐스팅이 이루어져 true를 반환한다. '1' == 1 // true 1 == true // true let money = $('#money'); money.value == 0 // 문제가 생길 수 있는 코드 Nunmber(money.value) === 0 // 안전하게 타입도 변경하여 비교하도록 한다. 형변환 주의 안전하게 형변환을 해서 사용하도록 한다. String(10 + 'test'); // '10test' Boolean('테스트'); // true Boolean(''); // false Numb..
-
[클린코드 자바스크립트] 타입 다루기 (undefined, null, eqeq, 형변환 주의, isNaN개발/javascript 2022. 3. 13. 21:13
* 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다. undefined 와 null 값이 없거나 정의가 되지 않은 표현 undefined 와 nulll 의 쓰임을 조심해서 사용해야 한다. undefined: 데이터 타입이자 값을 나타내며 값이 할당되지 않은 상태를 말한다. 변수는 선언했지만 값을 할당하지 않은 경우 undefined를 기본적으로 가지게된다. null: 값이 비어있음을 나타낸다. 두 값을 비교하려면 엄격한 일치연산자를 사용하도록 한다. (===) !null // true !!null // false null === false // false !null === true // true // null 은 숫자와 연산에서는 0으로 취급 null + 123 // 123 let testVa..
-
[클린코드 자바스크립트] 타입검사개발/javascript 2022. 3. 7. 20:37
* 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다. 타입검사 반환되는 값은 문자열이다. 원시형 데이터는 typeof로 수월한 검사가 가능하지만 참조형의 경우 정확한 검사가 이루어지기는 어렵다. typeof, instanceof, Object.prototype.toString.call(검사하고자 하는 값) 으로 타입을 검사할 수 있다. instanceof: 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별한다. function testFunction() {} class TestClass {} const str = new String('문자열'); typeof '문자열' // 'string' typeof true // 'boolean' typeof undefined..
-
[클린코드 자바스크립트] 호이스팅 주의개발/javascript 2022. 3. 5. 16:20
* 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다. 호이스팅 주의 런타임 시 선언과 할당이 분리되는 것을 말한다. 코드가 실행하기 전 변수, 함수 선언이 스코프의 최상단으로 올려지는 현상을 말한다. var 변수의 경우 호이스팅시 undefined로 변수를 초기화 한다. let, const 변수의 경우 선언한 변수를 호이스팅 시 초기화하지 않는다. var global = 0; function outer() { console.log(global); // undefined
-
[클린코드 자바스크립트] 임시변수 제거개발/javascript 2022. 3. 4. 16:22
* 클린코드 자바스크립트 강의를 정리하고자 작성한 게시글입니다. 임시변수 제거하기 함수 안에 변수를 하나 정의 했다고 가정했을 때 해당 함수의 길이가 길어질 수록 전역변수를 쓰는 것과 같이 버그가 발생할 확률이 높다. 임시변수 사용을 줄이려면 함수의 역할에 맞게 여러개 분리하는 것이 가장 좋다. 함수는 역할에만 충실하도록 하고 간결하게 작성하도록 고민해야한다. 임시변수를 사용하면 추가적인 코드 작성의 유혹에 빠지기 쉽다. (디버깅이 어려워짐) 임시변수 없이 바로 값을 return 하도록 고민해서 함수를 만들도록 한다. 고차함수를 사용한다. (map, filter, reduce 등) # 임시변수를 사용하는 경우 function getElements() { const result = {}; // 함수 안에 ..