Mong dev blog

전체 글206

nvm으로 node버전 관리하기(mac)
🧐 프로젝트마다 요하는 node버전이 다르며, 여러 개의 프로젝트를 진행할 경우 노드 버전을 변경해줘야한다. 하지만 조금 더 편하게 노드 버전을 변경할 순 없을까? 이번시간에는 nvm에 대해 알아보았다! 1. nvm이란? nvm은 node version manager로, 여러 노드 버전을 관리하는 스크립트이다. nvm명령어을 이용해 다양한 버전의 노드를 빠르게 설치하고 변경할 수 있다. 유사한 노드 버전 매니저로는 n이 존재한다. 2. nvm 사용법 😉 nvm을 사용하기 위해서는 설치가 필요하다. mac에서는 어떻게 설치하고 적용하는지 알아보자! 1) brew로 설치하기 brew 명령어를 사용해 nvm을 설치해준다. 설치후 brew update를 사용해 brew 패키지를 업데이트 해주자. brew ins..
2022. 2. 15.
input file 버튼 커스터마이징하기
이번 시간에는 input [type=”file”]의 스타일을 커스텀해보자! 1. input [type=”file”]? input에 type을 file로 지정하면 파일을 업로드할 수 있는 버튼을 만들 수 있다. 만약 특정 파일 유형만 허용하려면 accept를 사용하면 된다. multiple 속성을 추가하면 2개 이상의 파일을 추가할 수 있다. 이처럼, file은 파일 업로드를 빠르게 구현할 수 있지만, input자체에 스타일을 적용할 수 없는 단점이 있다. 아래 예시는 input에 스타일을 준 모습이다. 앞서 언급했듯이 스타일이 적용되지 않았다ㅜ See the Pen input file not apply style by KumJungMin (@kumjungmin) on CodePen. 2. 스타일 지정하는..
2022. 2. 11.
width, height:0 안될 때(feat. inline, inline-block)
우리는 공간 차지없이 요소를 없앨 때, 요소의 display를 none으로 지정하거나 요소의 너비와 높이를 0으로 지정하는 방법을 사용할 수 있다. 아래 예시는 display: none과 width&height: 0 적용한 모습이다. See the Pen width, height vs display none by KumJungMin (@kumjungmin) on CodePen. 😃 그러면 , 도 width, height:0을 이용해서 요소를 감출 수 있겠는걸? 아래 예시는 , 에 width, height: 0을 지정한 모습이다. 예상과는 다르게, 약간의 공간을 차지하는 걸 볼 수 있다. See the Pen input width, height 0 by KumJungMin (@kumjungmin) on C..
2022. 2. 9.
Mock Service Worker (feat. vue)
1. Mock Service Worker(MSW)? 1) MSW란? MSW는 서비스 워커(아래에서 설명)를 사용하여, HTTP 요청을 가로채 모의 응답을 보내는 API 도구이다. MSW를 사용하면 사용자가 요청하는 것처럼 API를 구성할 수 있어, 실제 백엔드 API가 완성되어도 코드를 변경할 필요가 없다. 🙄 그런데, MSW를 사용하는 이유는 무엇일까? 백엔드 API를 그대로 쓰면 안될까? 프로젝트를 진행하다보면, 백엔드 개발이 예상보다 길어지는 경우가 발생한다. 이 경우 프론트는 UI적인 개발을 먼저할 수 있지만, 백엔드 개발을 기다리면서 시간을 낭비하는 게 좋지 않다. 그러므로 프론트에서는 백엔드로부터 API 요청&응답 형태를 요청받아 MSW로 작업하는게 좋다. 2) 서비스 워커란? 🤔 앞서 언급했..
2022. 2. 3.
canvas blur 문제를 해결하는 법
☝️ 캔버스를 이용하여 선을 그리다보면, 흐릿하게 나타나는 경우가 있다. 도대체 왜 흐릿하게 보이는 걸까? 오늘은 캔버스에서 선을 뚜렷하게 그리는 법을 알아보겠다! (참고) 1. 왜 blur 현상이 발생할까? 만약 우리가 캔버스에서 1px짜리 선을 그린다고 가정해보자. 먼저, y축 좌표를 10에서 1px 선을 그려보았다. const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(200,10); ctx.stroke(); 이번에는, y축 좌표를 10에서 10.5로 변경하여 다시 그려보았다. const..
2022. 1. 26.
indexedDB에 대해 알아보자!
🤔 indexedDB는 무엇이며, 어떻게 사용하는 걸까? 이번 시간에는 indexedDB정의와 사용법에 대해 알아보았다! (마지막에는 vue에서는 indexedDB를 어떻게 사용하는지 링크도 공유해두었다 참고해보자!) 1. indexedDB? 1) indexedDB는 무엇일까? (1) indexedDB의 정의 우리가 데이터를 저장할 때, 클라이언트 스토리지(브라우저 제공 db)를 이용할 수 있다. 클라이언트 스토리지에는 localStorage, cookies, indexedDB가 존재한다. ❓ 그런데 localStorage 대신 indexedDB를 쓰는 이유가 있을까? localStoage의 경우 : 적은 양의 데이터를 저장할 때 유용하다. : 동기적으로 작동하며, 오직 문자열 타입의 키&값만을 사용할 ..
2022. 1. 24.
Array에서 NaN, undefined, null 제거하기
🏃 array 요소에 NaN, undefined, null와 같은 유효치 않은 값을 제거해보자! 1. 전체 코드 보기 코드는 아래와 같이 간단하다. 배열에 대해 filter()와 Boolean를 사용해주면 된다. function getValidArr(arr) { return arr.filter(Boolean); } const arr = [NaN, undefined, '', 0, false, null]; console.log(getValidArr(arr)); // [] 2. 코드 상세보기 (1) Boolean(), 값을 true, false로 반환 JS에서 유효치 않은 값은 NaN, undefined, ‘’, 0, false, null이 존재한다. 우리는 배열에서 이 값을 전부 제외하고자 한..
2022. 1. 21.
JS 클린코드-함수편(1)
🤔 이번 시간에는 자바스크립트 클린코드, 함수편 일부를 공부해보았다! -함수 인자는 이상적으로 2개 이하가 좋다. -하나의 함수에는 하나의 책임을 주자 -매개변수로 플래그를 사용하지 말자 -조건문을 캡슐화 하자 -부정조건문을 사용하지 말자 -조건문 작성을 지양하자 (1) 함수 인자는 이상적으로 2개 이하가 좋다. 매개변수의 개수를 제한하면, 함수 테스팅을 좀 더 용이하게 할 수 있다. 만약 인자수가 많으면 테스트해야할 경우의 수가 많아지며 이는 많은 시간을 소요하게 한다. 또한 함수에 많은 인자가 있다는 건, 해당 함수가 많은 역할을 한다는 말도 된다. 🙄 하지만 전 정말 3개 이상의 매개변수를 받아야 하는데요? 그렇다면, 매개변수를 받을 때 객체 형태로 받는 게 좋다. // Bad function cu..
2022. 1. 20.
JS 클린코드 <변수편>
🤔 이번 시간에는 자바스크립트 클린코드를 공부해보았다! 1. 변수 -무의미한 변수명은 지양하자 -상수를 그대로 쓰지 말고 변수에 할당하자 - 변수의 의도를 나타내자 - 문맥상 중복되는 말은 제외하자 - 매개변수에 기본값을 지정하자 (1) 무의미한 변수명은 지양하자 변수명을 지을 때, 해당 변수가 어떤 데이터를 담고 있는지 명시적으로 적어야 한다. 아래 예시는 음식리스트를 담고 있는 배열이다. 예시1처럼 변수를 선언했을 때, 다른 개발자는 이 변수가 어떤 데이터를 담고 있는지 쉽사리 알기 어렵다. // 예시1 const aa = [&#39;apple&#39;, &#39;orange&#39;, &#39;lemon&#39;] 예시2와 같이 해당 데이터를 표현할 수 있는 명시적인 이름으로 지정하자. // 예시2..
2022. 1. 15.

티스토리툴바