개발
Node.js 에서 Nodemon으로 자동으로 서버 새로고침 하기
Node를 통해 서버를 실행할 경우, 파일의 변경 사항이 발생하여도 서버가 실행 중일 경우에는 자동으로 새로고침 되어 변경 사항이 반영되지 않습니다. 따라서, 커맨드 라인에서 실행 중인 서버를 종료하고 다시 노드를 실행하고, 새로고침해서 확인해야 하는 번거로움이 있는데요. 변경 사항을 자동으로 반영하도록 할 수는 없을까요? 노드에서 자동으로 서버 새로고침하기 파일에 변경 사항이 발생했을 때, 노드에서 자동으로 서버를 새로고침하려면 다음과 같이 새로운 NPM 인 nodemon을 설치해야 합니다. npm install -g nodemon nodemon 을 설치한 다음에는 이를 사용하기 위해 node server.js와 같이 파일을 실행하지 않고, nodemon server.js 와 같이 파일을 실행합니다. ..
package.json 파일이란 무엇이며 어떤 역할을 할까요?
모든 npm 패키지는 package.json 파일을 프로젝트 루트에 포함하고 있습니다. package.json 파일은 무엇이며 또 어떤 역할을 할까요? pacakage.json이란? package.json 파일에는 프로젝트와 관련된 메타데이터가 담깁니다. 앞서 npm을 패키지를 주고 받는 장소라고 설명했는데요. package.json 은 주고 받는 패키지에 대한 상세 설명서라고 할 수 있습니다. 즉, 패키지의 이름, 버전, 데이터 등이 담긴 파일이 바로 package.json입니다. 이러한 정보들은 모두 npm 뿐만 아니라 패키지의 최종 사용자에게 무척 중요한 것들입니다. 이러한 package.json 파일은 보통 Node.js 프로젝트의 루트 디렉토리에 위치해 있으며, npm 은 이를 통해 프로젝트를 ..
NPM 패키지 매니저 개념과 작동 방식
NPM이란? NPM은 Node Package Manager의 약자로 유용한 패키지를 빠르고 쉽게 공유할 수 있게 하는 패키지 매니저입니다. 패키지란 개발자들이 만든 일련의 유용한 도구 및 프레임워크를 의미하는데요. NPM이란 이러한 패키지를 관리하는 장소이자 도구 및 방법입니다. 오늘날 NPM은 자바스크립트 런타임 Node.js의 기본 패키지 매니저로 사용되고 있습니다. NPM은 다음 두 가지 주된 요소로 구성됩니다. 패키지 출시 및 다운로드를 위한 CLI(Command-Line Interface) 도구 자바스크립트 패키지 호스팅을 위한 온라인 저장소 정리하자면 NPM이란 Node.js에서 사용되는 기본 패키지 매니저로 개발자들이 만든 유용한 패키지들을 함께 공유하는 장소 및 도구입니다. 다양한 NPM ..
웹 스토리지 API 사용 방법 (로컬 스토리지)
웹 스토리지 API 메커니즘은 브라우저에 키/값 쌍을 저장하는 방법입니다. 웹 스토리지는 세션 스토리지(sessionStorage)와 로컬 스토리지(localStorage)로 나뉩니다. 웹 스토리지의 개념 스토리지(Storage)는 브라우저 내에서 키/값 쌍을 저장할 수 있는 작은 저장 공간이며, 모든 키와 값은 문자열로 저장됩니다(예를 들어, 숫자는 자동으로 문자열로 치환). 웹 스토리지는 크게 두 가지 유형으로 나뉩니다. 세션 스토리지(sessionStorage): 페이지 세션이 종료되지 않을 때까지 키와 값을 보유합니다. 즉, 페이지 세션이 종료되면 저장된 데이터가 함께 삭제됩니다. 로컬 스토리지(localStorage): 브라우저가 종료되고, 이를 다시 열어도 계속해서 키와 값이 존재합니다. 즉,..
자바스크립트 배열 중복 요소 확인하기: indexOf()와 lastIndexOf() 활용
자바스크립트 indexOf()와 lastIndexOf()를 활용하여 문자열과 배열의 중복 요소를 확인할 수 있습니다. indexOf() 메소드 설명 자바스크립트 indexOf() 메소드는 자바스크립트 lastIndexOf() 메소드는 호출하는 문자열 내 특정 값이 등장하는 첫 인덱스를 리턴하며, 값이 발견되지 않으면 -1을 리턴합니다. const paragraph = 'Show me the money, big money.'; const searchTerm = 'money'; console.log(paragraph.indexOf(searchTerm)); // 12물론, 이를 배열에도 사용할 수 있습니다. const words = ['dash', 'apple..
[코드 워즈] 8. 특정 문자열 치환하기(못 풂)
문제 문자열을 "(" 또는 ")"로 변환하기. 특정 문자가 한 번만 등장할 경우 "("로, 두 번 이상 등장할 경우 ")"로 치환하기. 문제 주소: www.codewars.com/kata/54b42f9314d9229fd6000d9c/train/javascript Codewars: Achieve mastery through challenge Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential. www.codewars.com 내 풀이(못 풂) function duplicateEncode(word){ const words = word...
[코드 워즈] 7. RGB To Hex Conversion
문제 RGB 숫자 값을 16진수로 변경하기. RGB 숫자는 0에서 255사이이며, 16진수는 반드시 여섯 자리여야함. RGB 숫자 값이 해당 범위 밖에 있는 경우 가장 가까운 유효 숫자로 전환되어야 함. 문제 주소: www.codewars.com/kata/513e08acc600c94f01000001/train/javascript Codewars: Achieve mastery through challenge Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential. www.codewars.com 내 풀이 function rgb(r, g,..
RGB에서 HEX로 변환하기: 웹 컬러 코드 표현에 대한 이해
웹 개발의 초창기 때부터 배경, 경계, 폰트 등 요소의 색을 다양하게 지정할 수 있었습니다. 일부는 웹에서 지원하는 컬러 키워드를 사용하기도 하지만, 어떤 이들은 HSL(Hue, Saturation, Lightness) 시스템을 사용하기도 합니다. 그러나 오늘날에는 RGB 컬러 코드와 16진수(HEX) 컬러 코드를 가장 많이 사용합니다. 이번 포스팅에서는 RGB 컬러 코드와 HEX 컬러 코드에 대해 살펴보도록 하겠습니다. 이 글은 RGB to Hex: Understanding the Major Web Color Codes를 번역 및 요약한 것입니다. RGB 컬러 코드에 대한 이해 RGB 컬러 코드는 오늘날 웹 페이지에서 색을 정의할 때 가장 많이 사용되는 방법입니다. 때로는 RGBA 컬러 코드를 사용하기..
