본문 바로가기

전체 글209

Node.js 설치하기 및 VScode에서 사용하기 Node.js는 Chrome V8 JavaScript로 빌드된 자바스크립트 런타임(프로그래밍 언어가 구동되는 환경)이다. 내장HTTP 서버 라이브러리를 포함하고 있어 자바스크립트를 웹 브라우저로부터 독립시켜 서버 구현을 가능하게 한다. 다양한 패키지 매니저(npm)을 기반으로 다양한 모듈(패키지)를 제공한다.  1. Node.js 설치하기Node.js는 Node.js 홈페이지에서 설치가 가능하다. Download Node.js(LTS)를 눌러 다운로드 받는다. 여기서 LTS란 Long Term Support로 해당 버전의 안정성과 신뢰도를 보장할 수 있는 버전을 의미한다. 다운로드를 받은 파일을 눌러 시행한 다음에 설치를 진행해주면 된다. 특별히 변경할 항목이 없어 그대로 설치하면 된다. 2. Node... 2024. 8. 16.
JavaScript: location 객체란? LocationLocation객체는 웹 브라우저의 url과 관련된 정보를 처리하는데 사용한다. 객체가 연결된 인터넷 상에서의 위치(url)에 대한 정보 제공 및 속성을 가져올 수 있다.속성설명location.href주소영역에 참조주소를 설정하거나 URL을 반환location.hashURL에 해시값(#에명시된값)을 반환location.hostnameURL에 호스트이름을 설정하거나 반환location.hostURL에 호스트이름과 포트번호를 가져옴location.portURL에 포트번호를 반환location.protocol URL에 프로토콜을 반환location.searchURL에 쿼리(요청값)을 반환location.reload()새로고침이일어난다 2024. 8. 15.
JavaScript: Screen 객체 Screen 객체는 사용자의 모니터 정보를 제공하는 객체로, 사용자 화면의 너비 및 높이 등에 대한 정보를 얻을 수 있다. 현재는 media query가 나오면서 사용 빈도가 줄었다.  종류설명screen.width화면의 너비screen.height화면의 높이screen.availWidth작업표시줄을 제외한 화면의 너비screen.avail.Height작업표시줄을 제외한 화면의 높이screen.colorDepth화면의 표현 가능한 컬러 색상 수 반환screen.pixelDepth화면의 픽셀당 비트 수 반환  See the Pen Untitled by coding-ji (@coding-ji) on CodePen. 2024. 8. 15.
JavaScript : 모듈(module)에 대해서 초창기의 JavaScript의 경우 스크립트의 크기도 작고 기능도 단순했기 때문에 모듈이 필요 없었다. 이후 Node.js의 등장하면서 자바스크립트의 사용법이 확장되면서 코드가 전체적으로 비대해지면서 모듈의 필요성이 증가하게 된다. 이에 ECMAScript6에서 모듈 시스템을 표준화 하여 import와 export 문을 통해 모듈화된 코드를 지원하게 된다.  모듈(module)모듈이란 기본적으로 JavaScript 코드를 담고 있는 파일을 의미한다. 이 파일은 관련된 함수, 객체, 클래스, 변수 등을 포함하고 있다. 모듈 시스템을 통해서 코드의 재사용성 및 유지보수를 용이하게 할 수 있다. 모듈은 모듈마다 자신의 스코프를 갖는다. 따라서 변수나 함수를 내보내거나(export) 가져오지(import)않는다.. 2024. 8. 14.
JavaScript : 비동기 통신에 대해서 (Fetch & Axios) 통신 종류동기 통신동기 통신은 클라이언트가 요청(request)을 전송하면, 해당 요청에 대한 응답(response)을 받을 때까지 기다리는 방식이다.  따라서 응답이 도착하기 전에는 다른 요청을 할 수 없다. 이 방식은 요청에 대한 처리 결과를 보장받을 수 있지만, 응답이 지연되면 클라이언트는 계속해서 기다려야 한다는 단점이 있다. 비동기 통신비동기 통신의 경우 request를 보내더라도 response을 기다리지 않고 다른 작업을 계속 수행할 수 있다. 따라서 response가 지연되더라도 계속해서 다른 요청을 보낼 수 있다. 그러나 비동기 통신은 요청에 대한 처리 결과나 응답의 순서를 보장받기 어렵다는 단점이 있다.   JavaScript의 비동기 처리 필요성 JavaScript의 경우 싱글 스레드.. 2024. 8. 14.
JavaScript : 비동기를 처리하는 방법 (Async / Await) ES8에 정의된 문법으로 기존의 콜백함수와 Promise로 비동기를 처리하는데 있어서 가독성이 떨어지는 단점을 보완하기 위해 나왔다. Promise를 좀 더 편하게 사용할 수 있도록 한다. 콜백의 깊이가 깊지 않을 경우에는 콜백함수나 Promise를 사용하는 것이 나을 수 있다. async function 변수명(매개변수1, 매개변수2,..){      변수명 = await 표현식;}async는 비동기 기능이 존재하는 function 앞에 선언한다. async를 붙이면 해당 함수는 암묵적으로 Promise를 사용하여 결과를 반환한다. await는 async 함수 내에서만 동작하며, async함수의 실행을 일시 중지하고 전달된 promise가 완료된 후에 async 함수를 다시 시행한다. await로 선언.. 2024. 8. 13.

티스토리툴바