🌱 Frontend Developer

오늘은 드디어 Yarn을 청산하고 pnpm으로 패키지 매니저를 갈아탄 날이다! 🥳그래서 왜 pnpm을 선택했는지, pnpm의 장점은 무엇인지에 대해 적어보려고 한다.그전에 먼저 대표적인 패키지 매니저를 몇 개 알아보자.1. npmnpm은 패키지 매니저의 선구자라 할 수 있다.npm은 기본적으로 node_modules 폴더에 모든 라이브러리가 저장된다. 하지만 문제는 각 라이브러리가 내부적으로 또 다른 node_modules를 가지고 있다는 것이다. 이로 인해 node_modules 폴더가 굉장히 무거워지고, 파일을 탐색하는 데 시간이 오래 걸린다.또한 npm은 동일한 버전의 패키지가 여러 곳에서 필요할 때, 이를 최상위 node_modules로 호이스팅 하여 중복 설치를 방지한다. 하지만 서로 다른 버..

📃  자바스크립트의 모듈화와 번들링원래 자바스크립트에는 모듈이라는 개념이 없었다.초기의 웹은 대부분 정적인 콘텐츠로 구성되어 있었고서버가 보내준 리소스를 브라우저가 파싱하여 보여주는 형태였기 때문이다. 자바스크립트는 동적인 효과를 추가할 때 사용되었는데 정적인 콘텐츠에서는 그리 큰 비중을 차지하지 않았기 때문에 태그 안에 모든 코드를 작성해도 문제가 되지 았았다. 그러나 웹의 발전과 함께 사용자와의 인터랙션이 더욱 활발해지고 웹의 크기와 복잡성이 증가하면서 자바스크립트의 역할이 커졌다.이제는 자바스크립트 코드가 많아졌고기존의 방식처럼 태그 안에 모든 것을 작성했더니 코드 가독성, 변수 중복, 코드 재사용 등 여러 가지 문제가 생겨났다. 이러한 문제를 해결하기 위해 등장한 것이 모듈화다.자바스크립트 ..

바로 어제 Client Side Routing을 공부하면서 알게 된 History API도대체 어떻게 URL만 내부적으로 변경할 수가 있지? 🤷‍♀️브라우저는 어떻게 그걸 서버에 요청하지 않는 거야?🤷‍♂️ 도대체 왜? 🤷어떤 원리로?? 🤷‍♀️🤷‍♂️🤷 이런 궁금증이 생겨서 본격적으로 뜯어보려고 한다.📌 History API는 브라우저에 탑재된 기본 기능이다.그래서 이런 게 가능하다.(혼자 개발자 도구에 쳐보고 신기해서 소리를 질렀..) 이동 과정 :google 페이지 -> history api 검색 페이지 -> mdn 페이지 따라서 mdn 페이지에서 history.length를 콘솔에 찍어보면 3번째 페이지이기 때문에 3이 나온다.또 back(), forward() method를 통해 뒤..

1. Spread Operator (스프레드 연산자)spread라는 단어만 봐도 감이 딱! 올 것 같다. 흩뿌리는 느낌, 쫙 펼치는 그런 느낌?! 흔하게 사용하기 때문에 잘 알아두면 다른 사람 코드 분석하기에도 좋고 내 코드 짜기에도 편할 것이다.그럼 뿌셔보자! 스프레드 연산자는 다음과 같은 상황에서 사용한다.객체나 배열을 복사 할 때두 배열을 간편하게 합칠 때 예시를 살펴보며 공부해 보자.1. 객체의 복사 및 확장const user1 = { name : "Dana", level : 10, age : 28, isAdmin : true};const user2 = {...user1, name : "Jasmine"};console.log(user1); // { name: 'Dana', level: 10..

강의를 듣던 중 ??와 ||의 차이에 대한 내용이 나왔다.'그냥 똑같은 거 아닌가?'라고 생각했던 10분 전의 나. (반성해)그래 똑같으면 두 개가 있을 리 없지!다시 한번 '사소한 차이라도 지나치지 말자'를 마음에 되새기며 블로그에 박제해 두려고 한다. Null 병합 연산자 (??)는 연산자의 좌변이 falsy라 하더라도 null 또는 undefined 일 때에만 우변을 평가한다.반면OR 연산자 (||)는 좌변이 falsy 일 때 우변을 평가한다. 여기서 잠깐 ! falsy로 취급되는 값에는 어떤 것들이 있을까? (참고로 같이 알아두자): false, 0, "", null, undefined, NaN 자 다시 본론으로 돌아와서아래 예시를 보면 쉽게 이해가 갈 것이다.let initUserType = n..

객체를 여러 개 받아 하나의 객체로 합쳐 반환하는 함수를 만들어라.(단, 원본 객체들은 수정하지 않아야 한다.)라는 미션(?)을 받았다. 주의!! 여기서부터 오답잔치입니다!!! function mergeObjs(...objs) { return ...objs}이건가? 땡! 일단 나는 여러개의 배열이 들어오면서 차곡차곡 쌓여서.. return할 때도 그대로 내보내면 될 줄 알았다.🤣하지만 그건 나만의 생각ㅎ 저렇게 여러 개의 매개변수를 스프레드 형식으로 받으면 매개변수는 배열의 형태로 들어온다.function mergeObjs(...objs) { console.log(objs); // [{ x: 1, y: 2 },{ y: 3, z: 4 )] console.log(...objs); // { x: 1, y..

this? 그게 뭔데?? 🤨this는 함수를 호출하는 주체라고 이해하면 쉽다.const pizza = { name : '하와이안 피자', price : 24000, order : function () { console.log(this); // { name: 'hawaian pizza', price: 24000, order: [Function: order] } console.log(`${this.name}는 ${this.price}원입니다.`); // 하와이안 피자는 24000원입니다. }};pizza.order(); 위의 예시에서는 order 메서드를 호출한 것이 pizza이기 때문에 this는 pizza object가 된다. function orderPizza (name,price)..

알고리즘 문제를 풀던 중배열에서 중복 제거를 해야 하는 상황이 생겼다.나는 Set을 사용해서 해결했지만, 구글링 해보니 다양한 방법이 있는 거 같아 추후에 참고하기 위해 정리해두려고 한다.1.  new Set 사용하기const colors = ['red', 'blue', 'green', 'yellow','pink','green','red'];const filterDuplicatation = (arr) => { return [...new Set(arr)];}console.log(filterDuplicatation(colors)); // [ 'red', 'blue', 'green', 'yellow', 'pink' ]  new Set(arr)를 하면, 중복 값을 추가로 등록하지 않는 Set의 특성상, 중복된..

아래와 같은 문제를 받았다.* 아래 내용을 구현하세요 1. arr 배열의 start 인덱스부터 deleteCount만큼 요소를 제거한 뒤, 2. 그 자리에 items를 삽입하세요. 3. 반드시 splice 메서드를 사용해야 합니다. 4. 원본 배열 arr를 직접 조작하고, 조작된 배열을 반환하세요. * @param {any[]} arr * @param {number} start * @param {number} deleteCount * @param {...any} items * @returns {any[]} 조작 후의 arr 간단하지!function removeAndInsert(arr, start, deleteCount, ...items) { return arr.splice(start,deleteCou..

고차 함수.뭐지 이 굉장히 어려울 것만 같은 이름은..? 쫄지 말자!사실 고차 함수는 이미 우리가 밥 먹듯이 사용하고 있다.단지 저 용어가 생소할 뿐..(나만 그럴수도) 그럼 고차 함수를 파헤쳐보자. 고차 함수란?함수를 인자로 받는 함수함수를 결과로 반환하는 함수 함수를 인자로 받는다 ..? 너무 익숙하지 않나요? const getUsersName = data.map(({name}) => name) map 메서드는 인자로 콜백 함수를 넣어준다.어? 함수에 콜백 함수를 인자로 넣었네? 아! map도 고차 함수구나~ 뭐야 별거 아니네. 하지만 내가 오늘 이 글을 쓴 이유..바로 함수를 결과로 반환하는 함수에서 몇 시간을 헤맸기 때문이다.ㅎ default : throttle ..