본문 바로가기

Frontend/JavaScript30

[ 자바스크립트(JavaScript) ] filter + join 메서드로 가독성있는 코드 작성하기 📍 filter + join 메서드로 가독성 있는 코드 작성하기 string | null 타입을 가지는 a, b를 사용하여 a·b로 나타내야한다. 만약, 둘 중에 하나라도 null일 경우 ·를 표시하지 않고, string 타입만 나타내야한다. 예를 들어 a = 'foo'이고, b = 'bar'일 때 둘 다 값이 존재하면 foo·bar로, a타입만 존재하면 foo, b타입만 존재하면 bar, a와 b 둘 다 존재하지 않는 경우 null 혹은 ''을 나타내야한다. 이럴 때 어떻게 가독성 있게 코드를 작성할 것인가? 리액트에서 사용할 때 AS-IS는 조건식과 join 메서드를 사용하여 a && b ? [a, b].join('·') : a || b로 나타냈는데, 가독성이 너무 떨어졌다. 그래서 TO-BE 처럼 .. 2022. 11. 15.
[ 자바스크립트(JavaScript) ] shuffle 함수를 만들어보자 📍 shuffle 함수를 만들어보자 JS로 shuffle 함수를 만들 때 가장 먼저 생각나는 메서드는 sort() 일 것이다. 아마도 다음 코드처럼 구성하지 않았을까?? // sort shuffle const arr = [1, 2, 3, 4, 5]; const shuffle = arr.sort(() => Math.random() - 0.5) console.log(shuffle); 👉🏾 [ 5, 3, 2, 1, 4 ] 구현 로직을 살펴보면 배열을 순회하면서 Math.random() 메서드를 사용하여 나온 랜덤 한 값에 -0.5를 하여 sort() 메서드를 거치게 된다. 만약, Math.random() - 0.5를 한 값이 양수라면 오름차순으로 정렬되고, 음수를 리턴하면 내림차순으로 정렬된다. arr 배열을.. 2022. 11. 5.
[ 자바스크립트(JavaScript) ] window.history.pushState와 history.replaceState을 알아보자 📍 window.history.pushState와 history.replaceState을 알아보자 history.pushState()는 브라우저의 세션 기록 스택에 새롭게 추가한다. 문법은 다음과 같은데, (pushState(state, unused, url?)) state는 사용자가 새로운 페이지로 이동할 때마다 popstate 이벤트가 발생한다. unused는 역사적 이유로 존재하며, 생략할 수 없다. 추후에 변경 예정이므로 당분간 빈 문자열('')을 사용하자. url을 사용하면 해당 URL로 이동하지 않지만, 나중에 사용자가 브라우저를 재 시작하면 해당 URL 로드를 시도할 수 있다. 반환 값은 undefined이다. 포인트는 URL값은 현재 URL과 동일한 출처(same origin)여야 하는데,.. 2022. 10. 26.
[ 자바스크립트(JavaScript) ] npm install 후 package-lock.json의 diff가 많고 npm run dev가 안될 때 📍npm install 후 package-lock.json의 diff가 많고 npm run dev가 안될 때 내가 담당한 repository를 본격적으로 작업하기 전에, 터미널에 npm install으로 해당 project를 실행하기 위해 필요한 패키지를 설치하는 도중 VSCode의 Source Control - Changes에서 main 브랜치의 package-lock.json의 코드와 다르게 diff가 엄청 많이 생기면서 npm run dev를 실행하면 오류가 뜨면서 정상적으로 local 환경 실행이 안 되는 경우가 있었다. main 브랜치의 package-lock.json과 다른것도 없는데 갑자기 diff가 많이 생겨서 당황했지만, 침착을 유지하며 구글링을 한 결과 원인은 npm이 항상 packag.. 2022. 6. 13.
[ 자바스크립트(JavaScript) ] npm과 caret, tilde, 패키지 설치하는 방법 알아보기 📍 npm과 caret, tilde, 패키지 설치하는 방법 알아보기 npm은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line Interface)를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고, 필요한 패키지를 검색하여 재사용할 수도 있다. 내가 다니는 회사에서는 npm 패키지를 직접 만들어 사용하고 관리한다.(npm 패키지 보러가기) 취업 준비할 때 프로젝트를 하면 항상 패키지 === 가져다 쓰는 것이라고 생각했는데, 직접 패키지를 만들고 버전을 관리해야 하다 보니 까다로운 것이 한둘이 아니었다. 그래서 패키지 버전의 기본적인 내용들을 현업에 적용할 때 까먹지 않기 위해 글을 남긴.. 2022. 5. 11.