Programming/JavaScript18 [NodeJS] NVM으로 Node 버전 여러 개 사용하기 (MacOS) 🔎 Node Version 관리의 필요성 개발을 하다 보면 Node Version을 여러 개 관리해야 할 상황이 생긴다. 예를 들어, 프로젝트마다 Node 버전을 다르게 사용해야 할 경우가 있다. 또는 기존 프로젝트의 Node Version을 업데이트하면서 다른 의존성 라이브러리와의 충돌을 체크하며 마이그레이션해야 하는 경우가 있다. ✅ 배경 Node Version 관리가 필요해진 이유는 기존 프로젝트에 테스트 코드를 적용을 하기 위해서이다. 현재 실무에서 진행하는 프로젝트는 Node v10.16.0을 사용하고 있다. 해당 프로젝트에 테스팅 라이브러리인 Jest를 사용해서 테스트 코드를 적용하려고 시도했으나, import 할 때부터 에러가 발생하고 순탄하지 않아서 Jest 공식 문서를 확인해 보니 Nod.. 2023. 7. 21. [JavaScript] Moment.js 사용법 (현재 날짜, 날짜 포맷, 날짜 비교) 💡Moment.js란?Moment.js는 JavaScript에서 가장 많이 사용되어 온 날짜 라이브러리입니다. 개발할 때 현재 날짜를 가져오거나, 특정 날짜의 년/월/일만을 가져오거나, 내가 원하는 날짜 포맷으로 형식을 변경해 주거나, 특정 날짜와 비교해 주는 등 날짜 관련해서 다양한 처리가 필요할 때 사용합니다. ⚠️ 참고사항더 이상 업데이트가 없어 deprecated 되었고 레거시 프로젝트가 되었지만, 아직 실무에 사용하는 곳이 많고 다른 라이브러리에 의존성을 가진 경우가 많으며 정통 날짜 라이브러리로 많이 사용되고 있습니다. 제가 실무에서 개발하는 프로젝트에서도 Moment.js를 사용하고 있습니다. 그래서 오늘은 자주 사용하는 Moment.js의 사용법을 정리하고자 합니다. 🖥️ Moment.js.. 2023. 6. 23. [JavaScript] e.preventDefault()와 e.stopPropagation()의 차이점 e.preventDefault() VS e.stopPropagation() 자바스크립트 이벤트 리스너에서 e.preventDefault()와 e.stopPropagation() 둘 다 이벤트를 중단하는 메서드이다. 이 둘의 차이점과 어떤 상황에서 사용해야 하는지 정리해 보자. 먼저 이벤트 중단 시에 e.preventDefault()와 e.stopPropagation()가 어떤 역할을 하는지 간단하게 정리해 보았다. e.preventDefault(): 현재 이벤트의 기본 동작을 중단한다. e.stopPropagation(): 이벤트가 상위 DOM으로 전파되지 않도록 막는다. 이 외에도 e.stopImmediatePropagation()과 return false로 이벤트를 중단할 수 있다. e.stopImm.. 2023. 1. 5. [JavaScript] Set 사용법 Set이란? Set 객체는 중복되지 않는 유일한 값들의 집합입니다. Set 객체는 배열과 비슷하지만 차이점이 존재합니다. 배열 Set 객체 동일한 값을 중복하여 포함 가능하다. O X 요소 순서가 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 위의 특성으로 보아 Set 객체는 수학적 집합의 특성과 일치하며, 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있습니다. Set 객체 생성 Set 생성자 함수로 Set 객체를 생성합니다. 생성자 함수에 인자를 전달하지 않으면 빈 Set 객체가 생성됩니다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성하는데, 이때 이터러블의 중복.. 2020. 3. 23. [Node.js] Node.js 입력 받는 방법, 표준입출력 Node.js 표준입출력 readline을 사용하여 사용자에게 입력을 받을 수 있다. 한 줄의 입력만 받고 프로그램 종료하는 방법 const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); rl.on("line", function(line) { console.log("hello !", line); rl.close(); }) .on("close", function() { process.exit(); }); 예시: 두 수를 공백으로 구분지어 입력 -> 합을 구해 출력 const readline = require('readline'); const .. 2020. 3. 18. [jQuery] jQuery 요소 찾기, 텍스트 바꾸기, 요소 변경/생성 1. 텍스트 바꾸기 안녕하세요? What is jQuery? jQuery is the most popular JavaScript library. It gives developers lots of useful functions so they can make their webpage interactive across multiple browsers. jQuery is an open source library with a big community of contributors. Why should you learn jQuery? If you learn jQuery, you'll be able to use it in your own webpages, understand other developer's webpag.. 2019. 12. 22. [Node.js] Node.js로 서버 구축하기 간단한 턴제 게임의 서버를 구축해보기 서버 실행 코드 cd [file_path] node server.js server.js const http = require('http'); const url = require('url'); const fs = require('fs'); http.createServer((request, response) => { const path = url.parse(request.url, true).pathname; // url에서 path 추출 if (request.method === 'GET') { // GET 요청이면 if (path === '/about') { // 주소가 /about이면 response.writeHead(200,{'Content-Type':'text/ht.. 2019. 12. 22. AJAX란 Ajax(Asynchronous JavaScript and XML) 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지 일부분만을 갱신할 수 있게 해준다. 즉, 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. Ajax의 한계 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식(사용자가 직접 원하는 정보를 서버에 요청하여 얻는 방식)을 사용하므로, 서버 푸시 방식(사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것, 앱 푸시 알림)의 실시간 서비스는 만들 수 없음. Ajax로는 바이너리 데이터를 보내거나 받을 수 없음. Ajax 스크립트가 포함된 서버가 아닌 다른 서버.. 2019. 12. 21. [JavaScript] 자바스크립트와 웹 프론트엔드 파트4. Networking 01. AJAX - Request 보내기 AJAX 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음 사용자에게 더 나은 사용 경험 제공, 대부분의 웹사이트에서 사용되고 있는 기술 1. AJAX를 위한 객체 생성 var req = new XMLHttpRequest(); // HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령 2. 요청의 방식과 URL 설정 req.open("GET", "./data.txt"); // http request method와 URL 설정 3. 요청 전송 req.send(); 4. 응답 확인 req.response에 저장됨 비동기 방식으로 요청하기 때문에 send 메소드 호출 후, 바로 코드에서 접근하면 .. 2019. 12. 18. [JavaScript] 자바스크립트와 웹 프론트엔드 파트3. Event 01. 시간을 기반으로 콜백함수를 호출 setTimeout( function, time ) time 시간이 지난 경우 function 함수를 콜백하는 함수 time 은 millisecond (1/1000초) 단위 timerId를 반환함 clearTimeout( timerId ) setTimeout 함수 호출의 결과로 반환된 timerId를 인자로 받아 예약되어 있던 function호출을 취소 이미 function이 호출된 경우(시간이 지나 이벤트가 발생한 경우)에는 효과 없음 setInterval( function, time ) time 시간이 경과할 때마다 function 함수를 콜백하는 함수 timerId를 반환함 clearInterval( intervalId ) setInterval 함수 호출의 결.. 2019. 12. 18. [JavaScript] 자바스크립트와 웹 프론트엔드 파트2. DOM 01. DOM 소개 및 탐색 JS로 HTML문서에 접근이 가능한 것은 HTML문서가 DOM(Document Object Model)에 따라 기술되고, 이 돔 인터페이스를 통해 기술된 HTML엘리먼트가 객체로서 자바스크립트와 연결되기 때문입니다. tree 형태로, 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것. 이해하기: document.children[0] 최상위 엘리먼트 html document.children[0].children[0] 다음 엘리먼트 head document.children[0].children[1] body document.children[0].children[1].parentNode 는 html Element API 자식, 부모 엘리먼트에 접근하는 방법 .child.. 2019. 12. 18. [JavaScript] 자바스크립트와 웹 프론트엔드 파트1. Javascript와 web 01. HTML, CSS, JS HTML: 웹 페이지의 구조를 나타냄 CSS: 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄 JS: JS 로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음 브라우저는 자바스크립트 코드를 실행시키면서 HTML, CSS의 구조와 스타일에 변화가 생기면, 다시 브라우저에 해당 내용을 반영해서 렌더링하여 사용자가 그 변화를 확인할 수 있도록 한다. 02. window 객체 Javascript 실행 시 가장 상위에 존재하는 객체, 변수/함수 선언 시 window 객체 안에 선언됨 표시된 웹 페이지 정보에 접근, 변경 가능 window.location: 현재 브라우저 창의 주소를 나타내는 객체 window.location.href: 브라우저 창에 입력된 주소, 변경 가능 w.. 2019. 12. 17. 이전 1 2 다음
