코드스테이츠31 [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. [DOM] Document Object Model 문서 객체 모델 DOM(Document Object Model) 1. DOM의 개념 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model HTML의 구조와 관계를 객체로 표현한 모델로 document라는 전역변수를 통해 HTML에 접근 가능 자바스크립트를 이용해 DOM에 접근하여 엘리먼트의 속성값을 얻거나 변경할 수 있음 2. DOM의 구조 자바스크립트의 객체와 같이 트리 구조이기 때문에 자바스크립트의 DOM이 브라우저에 접근하기 가장 용이 *다른 언어도 DOM을 가지고 있지만 자바스크립트가 가장 안정적 3. console.dir()로 콘솔에서 엘리먼트 조회하기 console.log(document): html문서 형식으로 보여줌 conso.. CodeStates/React 2022. 2. 14. [JavaScript] 원시 자료형과 참조 자료형 역사 과거엔 데이터 저장소(메모리)의 용량이 제한되어 변수 하나에 하나의 원시 자료형 밖에 담을 수 밖에 없었다 띄어쓰기, 탭, 쉼표 등으로 데이터를 구분하여 배열과 비슷한 형태로 자료 구조를 구현(comma-separated values)했으나 보통 사이즈가 제한되어 번거로움 데이터의 크기가 동적으로 변하는 특별한 데이터 보관함의 필요성 대두 원시 타입(primitive type) 고정된 저장 공간을 차지하는 데이터로 하나의 정보를 가지고 있음 객체가 아니면서 method를 가지지 않는 6가지의 타입 number, string, boolean, undefined, symbol, (null) 변수에는 데이터의 크기와는 관계 없이 하나의 데이터만 담을 수 있으며 값 자체에 대한 변경이 불가능(immutab.. CodeStates/JavaScript 2022. 2. 9. [JavaScript] 호이스팅 Scope (유효범위) 호이스팅에 대해 알기 위해선 먼저 전역과 지역 스코프가 무엇인지 알아야 된다. 함수와 변수는 전역 또는 코드 블록, 함수 내에 선언되며, 선언된 위치에 따라 유효범위를 갖는다 어디에 선언되었는지에 따라 다른 코드가 자신을 참조할 수 있는지 결정됨 스코프의 범위 자바스크립트에서 스코프는 전역 스코프(Global)와 지역 스코프(Local Scope)로 나뉜다. 1. 전역 스코프 가장 바깥쪽 스코프 전역 스코프에 선언된 변수는 전역 변수 var 키워드로 선언된 전역 변수는 전역 스코프에 저장되어 console.log(window.변수명)으로 접근 가능 let, const 키워드로 선언된 전역 변수는 전역 스코프에 저장되지 않고 스크립트 스코프에 저장된다 var a = 1 let b =.. CodeStates/JavaScript 2022. 1. 21. [JavaScript] 배열과 객체 배열 Array 배열은 순서(index)가 있는 값이며, index는 0부터 번호를 매김 [ 대괄호 ] 를 이용해 배열을 만들고 각각의 element는 쉼표 , 로 구분 index를 이용해 값(요소(element))에 접근 가능 없는 인덱스 조회시 undefined 배열 안에 배열 중첩 가능 : 이차원 배열 등등 console.table(arr) : 인덱스와 값을 테이블로 보여줌 [ ] === [ ] → false 구조상으론 같은 배열로 보여도 주소가 다른 두 개의 빈배열 let myNumber = [1, 2, 3, 4, 5, 6]; //각각의 엘리먼트는 쉼표로 구분 myNumber[3]; //4 myNumber[2] = 8 //2번 인덱스의 값인 3이 8로 바뀜 [1, 2, 8, 4, 5, 6] myN.. CodeStates/JavaScript 2022. 1. 4. 이전 1 2 3 다음 반응형