codestates20 [Node.js] 비동기 흐름 동기와 비동기 synchronous & asynchronous 동기적(synchronous) : 시작 시점과 완료 시점이 같은 상황으로 자바스크립트는 synchronous *코드가 나타나는 순서에 따라 시행되며 요청에 대한 결과가 나올 때 까지 기다림 비동기적(asynchronous) : 요청에 대한 결과가 나올 때까지 기다리지 않음(continue working) *콜백 함수를 많이 활용 blocking & non-blocking blocking : 요청에 대한 결과가 동시에 일어남 (하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"을 blocking이라고 함) *전화처럼 하던 일을 멈춰야 함 non-blocking : 요청에 대한 결과가 동시에 일어나지 않음 *문자처럼 나중에 확인할 수 있음 .. CodeStates/JavaScript 2022. 3. 26. [자료구조] Stack, Queue, Graph, Tree 자료구조 여러 데이터들의 묶음을 저장하고 효율적으로 사용하는 방법을 정의한 것 *특정한 상황에 놓인 문제를 해결하는 데에 특화 데이터 : 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값 *데이터는 분석하고 정리하여 활용해야만 의미를 가질 수 있으며, 사용 목적에 따라 형태를 구분하고 분류하여 사용 Stack 데이터를 순서대로 "쌓는" 구조 입력과 출력이 하나의 방향으로 이루어지는 제한적 접근 (일방통행) *이러한 Stack 자료구조의 정책을 LIFO(Last In First Out) 혹은 FILO(First In Last Out)이라고 부르기도 함 재귀 함수와 활용도가 높음 const stack = [] stack.push(1) // [1] stack.push(2) // [1, 2].. CodeStates/JavaScript 2022. 3. 14. [JSON] JavaScript Object Notation JSON 서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷 JSON포멧 : 자바스크립트를 포함한 많은 언어에서 범용적으로 사용하는 포멧 수신자(reciever)와 발신자(sender)가 다른 프로그램을 사용하더라도 객체를 범용적으로 읽을 수 있는 문자열 형태로 만들어 줌 객체는 타입 변환(message.toString())을 통해 String으로 변환할 경우 객체 내용을 포함하지 않기 때문에 JSON의 형태로 변환 필요 JSON.stringify let myMessage = { sender : 'Despair', receiver : 'Monkey', date : '22.03.14', num : 1, } console.log(JSON.stringify(myMessage)) // '.. CodeStates/JavaScript 2022. 3. 14. [JavaScript] 재귀함수 재귀는 언제 사용하는게 좋을까? 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우 function recursive(인자) { // 조건이 충족될 때 까지 자기 자신을 호출 if(조건 충족) { return 결과 } else { return recursive(작업된 인자) } } 재귀 : 문제를 해결할 때 동일한 구조의 더 작은 문제를 해결함으로써 주어진 문제를 해결하는 방법 *모든 재귀는 반복문으로 표현 가능 재귀 함수 : 스스로를 호출하는 함수 재귀 호출 : 재귀 함수는 실행 과정 중에 자기 자신을 호출하게 됨 *모든 재귀 함수는 함수의 호출 없이 while / for loop로 표현 가능 .. CodeStates/JavaScript 2022. 3. 14. [JavaScript] 객체 지향 프로그래밍 Object-Oriented Programming 하나의 모델이 되는 청사진(blueprint)을 만들고 (Class),그 청사진을 바탕으로 한 객체를(object) 만드는 (instance) 프로그래밍 패턴 속성과 메소드가 하나의 "객체"라는 개념에 포함 *자바스크립트 내장 타입인 object(이하, obj literal)와는 다르게 Class라는 이름 사용 instance : 청사진을 바탕으로 만들어진 인스턴트 객체 (instance object) 절차 지향 프로그래밍과 달리 데이터와 기능을 한곳에 묶어서 처리 *절차적 언어 : 순차적인 명령의 조합 자바스크립트 : 객체 지향 언어는 아니지만 객체 지향 패턴으로 작성 가능 OOP의 특징 1. 캡슐화(Encapsulation) 데이터(속성)와 기능(메소.. CodeStates/JavaScript 2022. 2. 28. [JavaScript] 고차함수 고차함수의 개념 1. 일급 객체(first-class citizen) 자바스크립트에서 일급객체는 함수가 대표적 변수에 할당 가능 //함수 표현식 let 변수1 = function() { return '함수를 변수1에 할당가능' //함수 선언식 function 변수2() { return '이렇게도 할당 가능' } //console.log를 찍어보면? console.log(변수1) ƒ () { return '함수를 변수1에 할당가능' } console.log(변수1) function 변수2() { return '이렇게도 할당 가능' } //함수 실행 값(함수를 실행시킨 형태)과 구분해서 헷갈리지 말자 변수1() '함수를 변수1에 할당가능' 변수2() '이렇게도 할당 가능' 다른 함수의 인자로 전달 가능 (.. CodeStates/JavaScript 2022. 2. 27. [React] Single-Page Application SPA 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통 전통적 웹사이트는 페이지 이동 시 html 파일로 된 페이지 전체를 렌더링 *서버와의 불필요한 트래픽 발생, 느린 속도로 사용자 경험 저하 SPA는 필요한 부분만 새로 렌더링, 중복되는 부분은 불러오지 않음 *업데이트에 필요한 데이터만 전달받아 자바스크립트가 동적으로 html 요소를 생성해서 화면에 보여줌 장점 사용자와의 interaction에 빠르게 반응 가능 서버에서 요청받은 데이터만 넘겨주면 되기에 서버 과부하 문제 해결 전체 페이지를 렌더링할 필요가 없어 높은 사용자경험 제공 단점 html 파일을 읽는 과정에서 자바스크립트 태그를 만나면 ht.. CodeStates/React 2022. 2. 21. [React] React 기초와 프로젝트 시작방법 React란? 프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리 오픈소스 소스가 공개되어 있어서 누구나 자유롭게 사용, 복제, 배포, 수정이 가능한 소프트웨어 라이브러리 다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합 React의 특징 1. 선언형(Dexlarative) 무엇(What)에 집중하여 프로그래밍 하는 것으로 선언형 프로그래밍은 JSX 표현식으로 작성함 *삼항연산자, map, 태그(JSX만 가능, JS는 불가) 등 선언형의 반대는 명령형 프로그래밍으로 어떻게(How)에 집중하여 프로그래밍 반복문, 조건문 등은 명령형에 해당 *변수에 할당되지 않는 것들이 명령형, 변수에 할당되는 것들은 선언형 JSX를 활용한 선언형 프로그래밍 : 한 페이지를 보여주기 위해 html,.. CodeStates/React 2022. 2. 16. 이전 1 2 다음 반응형