목록 웹 개발 (48)
이롭게 현명하게
[Node.js 설치하기] ※ 본 포스팅은 윈도우 11의 환경에서 진행되었습니다. Node.js 공식 홈페이지 접속 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS와 Current 버전 중 원하는 버전을 선택하여 설치한다. LTS : 기업을 위해 3년간 지원하는 버전이다. 짝수 버전만 LTS 버전이 될 수 있다. 서버를 안정적으로 운영해야 할 경우 선택한다. 하지만 최신 기능을 사용하지 못할 수 있다. Current : 최신 기능을 담고 있는 버전이다. 실험적인 기능이 들어 있어 예기치 못한 에러가 발생할 수 있다. 서버에 신기능이 필요하거나 학습용으로 사용할 때 적합하다. 단, 짝..
node.js는 크롬 v8자바스크립트 엔진으로 빌드된 자바스크립트 런타임입니다. [Node.js란?] HTML : 웹페이지에 글을 쓰고 그림을 넣는 마크업 언어이다. HTML은 정적인 페이지를 만든다. 자바스크립트는 HTML 페이지의 종속된 언어로 HTML을 조작하기 위해 만들어진 언어이다. 버튼을 클릭하려고 버튼 위에 커서를 올리면 색이 변한다. 이런 것들을 자바스크립트로 조작한다. 자바스크립트로 HTML을 조작할 수 있기 때문에 웹페이지를 보다 더 다이나믹하게 바꿀 수 있다. 그렇다면 자바스크립트는 어떻게 작동이 될까? 자바스크립트 코드 실행은 브라우저가 담당한다. ex) 크롬브라우저, 파이어폭스 등 이러한 브라우저들이 자바스크립트 해석을 담당한다. 자바스크립트는 정적이었던 웹페이지를 조금이나마 동적..
목차 리액트란장단점 [리액트란?]자바스크립트를 사용해서 HTML로 구성한 UI에 DOM을 변형시키거나 기능을 추가해 보았다면 어떻게 코딩했는지 알 것이다.* DOM : HTML 각 Element에 대한 정보를 지닌 자바스크립트 객체DOM을 변형하려면 브라우저의 DOMSelector API( getElementById ,querySelector 등 )를 사용하여 특정 DOM을 선택한 뒤에 특정 이벤트가 발생하면 변화를 주는 작업을 해야 한다.HTML에서 태그를 사용하여 id를 부여하고 자바스크립트(.js)에서 getElementById를 사용해 DOM을 선택하는 DOMSelector API 사용한다. 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 및 프레임워크이다.리액트는 특히 싱글 페..
목차 동기와 비동기 싱글 스레드 언어 자바스크립트 엔진이란? 비동기 실행과정 https://devyihyun.tistory.com/148 [동기와 비동기] 쿠팡의 과일 구매 목록이다. 웹페이지에 과일 목록이 보이기까지 1분이 걸린다고 하자 동기적으로 실행했다면 목록이 보이기까지 1분 동안 화면 스크롤, 버튼 클릭 등 아무것도 할 수 없다. 현재 실행하고 있는 함수가 있기 때문에 다른 일을 할 수 없어 다른 일들이 블록 된다. 즉, 브라우저에서 오래 걸리는 작업이 실행될 경우, 웹페이지의 UI는 멈춰버리고 사용자는 어떤 작업도 할 수 없다. 그렇기 때문에 비동기식으로 과일 목록을 불러와야 한다. 동기와 비동기, 동기는 하나씩 실행되고 비동기는 동시에 실행된다고 흔히들 알고 있다. 하지만 그렇지 않다. 비동..
목차 1. 동기 비동기 개념 이해 동기와 비동기란? 동기와 비동기 차이 언제 쓰이는가? 비동기를 사용하는 이유 2. 동기 비동기 원리 동기, 비동기의 개념 정확히 이해해야 프로그램 개발 시 적절히 활용할 수 있다. 자바스크립트로 프로그램 개발 시 한 번쯤은 들어봤거나 사용해 본 경험이 있을 것이다. 동기 : 답변을 기다린다. 비동기 : 답변을 기다리지 않는다. 동시에 실행된다. 동기는 답변을 기다리는 것이고 비동기는 동시에 실행한다거나 답변을 기다리지 않는다고 알고 있을 것이다. 하지만 그렇지 않다. 택배 기사님이 물건을 배송한다. 기사님이 배송해야 할 물품은 3개이다. 3개의 집에 택배를 배송해야 한다. 이때 동식과 비동기식의 방식이 나타난다. [ 동기식 ] 택배를 1호에 가져다주기 위해 1호에서 벨을..
목차 함수의 기초 변수와 함수의 유효 범위 매개변수와 인수 미리 정의된 전역 함수 [함수의 기초] 함수(function) : 하나의 특별한 목적이 작업을 수행하도록 설계된 독립적인 블록 필요할때 마다 호출하여 해당 작업을 반복해서 수행할 수 있다. function addNum(x, y) { return x + y; } console.log(addNum(2, 3)); 자바스크립트에서는 함수도 하나의 타입(datatype)이다. 함수를 변수에 대입하거나 함수에 프로퍼티를 지정하는 것도 가능하다. 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수 있다. function 함수이름(매개변수1, 매개변수 2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } 함수 이름 (function name) ..