배꼽파지 않도록 잘 개발해요

◆ Node.js 이해 ◆ Node.js 특징 ◆ Node.js 시작하기 ◆ ES6 ◆ 비동기 코딩 ◆ 이벤트 루프 Node.js 이해 Node.js 등장 배경 단방향 통신 위주였던 WEB 1.0에서 사용자와 상호작용하는 WEB 2.0으로 발전하게 되면서 웹페이지의 자바스크립트 동작이 복잡해졌고, 이를 실행하기 위해 고성능의 JavaScript 실행기가 필요하게 됨. 구글에서는 크롬웹브라우저를 위한 v8이라는 자바스크립트 엔진을 만들게 됨. Node.js의 탄생 V8엔진으로 자바스크립트 실행 속도가 굉장히 빨라졌음. Node.js는 자바스크립트를 어느 환경에서나 실행할 수 있게 해주는 실행기 Node.js vs Browser Browser의 JavaScript node.js 브라우저에서 실행 크로스 플랫..

HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 • 리액트 개발을 위한 환경 : Node.js, VScode, Chrome • Node.js 설치 : LTS 버전이 더 안전함 • React 개발자도구 https://react.dev/ React React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, an..

◆ async/await ◆ HTTP, REST API ◆ Fetch API async/await · Promise를 활용한 비동기 코드를 간결하게 작성하는 문법(syntax sugar) · async/await 문법으로 비동기 코드를 동기 코드처럼 간결하게 작성할 수 있다. · async 함수와 await 키워드를 이용한다. async : 함수를 비동기 함수로 만들어 준다. async로 선언된 함수는 반드시 Promise를 리턴한다. await : 반드시 async 함수 안에서만 사용해야 한다. 해당 줄에서 비동기 작업이 완료될 때까지 코드 실행을 일시 중단한다. · await는 프로미스를 리턴하지 않는 함수라도 사용할 수 있음. · 단, 이 경우 리턴한 데이터는 Promise.resolve()로 감싸..

◆ 자바스크립트 제어 흐름 ◆ 이벤트 루프 ◆ Promise 자바스크립트 제어 흐름 자바스크립트 비동기 이해하기 · 자바스크립트는 다른 멀티스레드 프로그래밍 언어(JAVA, C++)와 다른 방식으로 비동기 동작을 처리한다. · 처음 자바스크립트를 접하는 경우, 동작에 대한 정확한 이해가 없으면 코드의 흐름을 따라잡기 어렵다. · 자바스크립트 내부의 비동기 동작을 이해하기 위해서는 이벤트 루프 등의 개념을 알아야만 한다. 자바스크립트 엔진 · 자바스크립트 엔진은 하나의 메인 스레드로 구성된다. · 메인 스레드는 코드를 읽어 한 줄씩 실행한다. · 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다. 자바스크립트(비동기)와 자바(멀티스레드) 자바스크립트 비동기 API가 호출되면(ex. setTimeou..

가까운 수 문제 설명 정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ array의 길이 ≤ 100 1 ≤ array의 원소 ≤ 100 1 ≤ n ≤ 100 가장 가까운 수가 여러 개일 경우 더 작은 수를 return 합니다. 입출력 예 array n result [3, 10, 28] 20 28 [10, 11, 12] 13 12 풀이 1 Math 객체를 활용하여 array의 값을 필터링 function solution(array, n) { // n과의 차이를 넣고, 가장 작은거 선택 const difference = array.map(a => Math.abs(n - a))..

컨트롤 제트 문제 설명 숫자와 "Z"가 공백으로 구분되어 담긴 문자열이 주어집니다. 문자열에 있는 숫자를 차례대로 더하려고 합니다. 이 때 "Z"가 나오면 바로 전에 더했던 숫자를 뺀다는 뜻입니다. 숫자와 "Z"로 이루어진 문자열 s가 주어질 때, 머쓱이가 구한 값을 return 하도록 solution 함수를 완성해보세요. 제한사항 1 ≤ s의 길이 ≤ 200 -1,000 < s의 원소 중 숫자 < 1,000 s는 숫자, "Z", 공백으로 이루어져 있습니다. s에 있는 숫자와 "Z"는 서로 공백으로 구분됩니다. 연속된 공백은 주어지지 않습니다. 0을 제외하고는 0으로 시작하는 숫자는 없습니다. s는 "Z"로 시작하지 않습니다. s의 시작과 끝에는 공백이 없습니다. "Z"가 연속해서 나오는 경우는 없습니다..

모음 제거 문제 설명 영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 my_string이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 my_string은 소문자와 공백으로 이루어져 있습니다. 1 ≤ my_string의 길이 ≤ 1,000 입출력 예 my_string result "bus" "bs" "nice to meet you" "nc t mt y" 풀이 1 배열로 만들어서 filter와 includes 사용 function solution(my_string) { const vowels = ["a", "e", "i", "o", "u"] var answer = ''; // 문자열 split('')으로 배열로..

◆ 자바스크립트 변수 정의 과정 ◆ 자바스크립트 Hoisting ◆ 자바스크립트 내장 객체 1 ◆ 자바스크립트 내장 객체 2 ◆ 자바스크립트 내장 객체 3 자바스크립트 변수 정의 과정 자바스크립트 엔진 · 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다. · 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다. · Chrome 브라우저의 경우 V8 엔진(구글에서 만든 자바스크립트 엔진)을 사용한다. 파싱(Parsing) : 자바스크립트 엔진은 먼저 소스 코드를 읽어 들이고 이를 추상 구문 트리(AST)로 변환한다. AST는 코드의 구조를 트리 형태로 표현하여 각 요소의 관계와 의미를 파악하도록 돕는다. 컴파일(Compilation) : AST로 변환된 코드는 컴파일러에..