반응형 Web/JS & TS7 지금 당장 pnpm으로 넘어가야 하는 이유 📒 지금 당장 pnpm으로 넘어가야 하는 이유 안전빵이란 이유로 계속해서 npm을 고집해 오다 최근에 pnpm으로 넘어갔습니다. 마이그레이션을 마친 지금 생각해보면 "왜 이제야 넘어갔을까"라고 생각이 됩니다. 아직 npm과 classic yarn을 사용하시는 분들께 npm의 단점부터 pnpm의 장점, 마이그레이션, 사용법까지 전부 소개합니다. 📌 pnpm이란? pnpm은 Performant Node Package Manager의 약자로, 기존 npm의 단점을 보완하기 위해 탄생한 패키지 매니저입니다. 사내에서 기존부터 npm을 사용했었는데, 시간이 지날수록 부각되는 단점들에 의해 패키지 매니저 변경을 결정했습니다. 현존하는 여러 패키지 매니저 중 고민 끝에 pnpm을 사용하기로 했는데요. pnpm을 선택.. 2024. 4. 10. [Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) ⚡ 논리 연산자 ‘&&’, ‘||’ 📌 단축평가 console.log("aaa" || "bbb") // "aaa" console.log("aaa" && "bbb") // "bbb" 논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어지는데, 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환합니다. 즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환합니다. console.log(true && "aaa") // "aaa" console.log(false && "aaa") // false &&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환합니다. console.log(true || "aaa") // true console.log(.. 2023. 1. 10. [Javascript/자바스크립트] innerHTML, innerText, textContent의 차이 innerHTML innerHtml은 마크업 태그를 핸들링할 수 있기 때문에 태그(div, img, script...)들을 삽입 가능합니다. 각종 태그들을 삽일할 수 있다보니 input 태그에 악성 스크립트를 삽입하는 XSS 공격의 가능성이 존재합니다. Login input으로 위와 같이 스크립트 태그를 넣으니 정상적으로 작동되는 것을 볼 수 있습니다. 저는 간단히 alert를 사용했지만 충분히 악의적으로 사용할만 합니다. 이에 최대한 innerHTML 사용을 지양하는 편이 좋습니다. innerText, textContent innerText 프로퍼티는 textContent와 기능이 유사하지만 중요한 차이점이 존재합니다. 이는 반환하는 값과 성능 두가지 측면에서 알아보겠습니다. 반환 값 innerText.. 2022. 2. 7. [Javascript/자바스크립트] CSS 선택자를 사용하는 querySelector, querySelectorAll를 통해 요소 선택하기 CSS 선택자 종류 document.querySelector(선택자) document.querySelectorAll(선택자) CSS 선택자를 사용하는 querySelector를 알아보기 위해 먼저 CSS 선택자의 종류부터 알아보겠습니다. 다음 표와 같은 키워드를 사용해 특정 요소들을 가져올 수 있습니다. 이름 선택자 형태 설명 태그 선택자 태그 특정 태그를 가진 요소를 추출 아이디 선택자 #아이디 특정 id 속성을 가진 요소를 추출 클래스 선택자 .클래스 특정 class 속성을 가진 요소를 추출 속성 선택자 [속성 = 값] 특정 속성 값을 갖고 있는 요소를 추출 후손 선택자 선택자1 선택자2 선택자1 아래에 있는 선택자2를 선택 querySelector querySelector는 위와 같은 css 선택자.. 2022. 2. 4. [Javascript/자바스크립트] 나머지 매개변수(rest parameter), 전개 연산자(Spread syntax) 매개변수와 전달인자는 아래와 같이 다른 프로그래밍 언어에서도 흔히 사용되는 개념입니다. function sum(a, b) { // a, b는 매개변수 return a+b } let calc = sum(1, 10) // 1, 2는 전달인자 자바스크립트에서도 이러한 개념은 동일하지만 특이한 점이 있습니다. console.log(sum(1)) // NaN console.log(sum(1, 10, 100)) // 11 함수에 정해둔 매개변수의 개수보다 전달인자를 적게 혹은 더 넣어주어도 오류가 나지 않는다는 점입니다. 위 sum 함수에 1개의 매개변수를 넣어주면 나머지 매개변수를 undefined로 할당해 NaN이 출력되고, 더 넣어주면 왼쪽부터 순서대로 정해둔 매개변수만 사용해 출력을 내어줍니다. 그리고 추가.. 2022. 2. 3. [Javascript/자바스크립트] 데이터 타입(Data Type) 자바스크립트의 데이터 타입에는 다음과 같은 7가지 타입이 존재합니다. Number String boolean null undefined Symbol Object 이번 글에서는 7가지 타입에 대해 가볍게 알아보겠습니다. Number let num = 1 console.log(typeof num) // number let pInf = 10/0 // 양의 무한대 console.log(pInf) // Infinity let nInf = 10 / -0 // 음의 무한대 console.log(nInf); // -Infinity Number 타입은 흔히 알고 있는 그 숫자 타입과 동일합니다. 각종 수에 대한 연산이 가능하며 부등호를 이용하여 크고 작음을 비교할 수 있습니다. String let str = "abcde.. 2022. 2. 1. [Javascript] 변수 선언 var, let, const 차이점과 호이스팅 원래 자바스크립트의 변수 선언이 가능한 키워드는 var 밖에 없었습니다. var의 각종 문제점들이 대두되고, ES6부터 변수 선언 키워드로 let과 const가 추가되어 사용되고 있습니다. 그럼 변수 선언 방식에 대한 var, let, const의 차이점을 알아보겠습니다. javascript 변수 선언 중복 선언 var : 중복 선언 가능 var str = "var입니다" // 선언 O, 초기화 O console.log(str) // var입니다 var str = "다시 선언했습니다" // 선언 O, 초기화 O console.log(str) // 다시 선언했습니다 var str // 선언 O, 초기화 X console.log(str) // 다시 선언했습니다 var은 변수를 다시 선언할 수 있다는 치명적인.. 2022. 1. 29. 반응형 이전 1 다음
오픈 채팅
