본문 바로가기

FE/JavaScript

FE/JavaScript [JS] 꼬리재귀 * 레퍼런스 재귀와 스택 (JAVASCRIPT.INFO) 재귀 함수와 메모리 사용량 간의 관계 (javascript recursion memory leak) 재귀함수는 함수 내에서 자기 자신을 호출하는 것을 말한다. ([JS]재귀 포스팅) 이를 통해 코드를 간결하고 이해하기 쉽게 만들 수 있다. 그러나 재귀함수는 메모리 사용량을 증가시키는 경향이 있다. 그 전에 알아야 하는 용어 실행 컨텍스트(execution context) : 자바스크립트 엔진은 함수가 호출될 때마다 호출된 함수를 위한 실행 컨텍스트를 생성한다. 호출 스택(call stack) : 코드가 실행되면서 생성되는 실행 컨텍스트를 저장하는 자료 구조이다. 엔진이 함수를 호출할 때마다 함수를 위한 실행 컨텍스트를 생성하고 이를 콜 스택에 pu..
FE/JavaScript [JS] 하노이의 탑 * 레퍼런스 Khan Academy - 하노이의 탑 하노이의 탑이란? 하노이의 탑(Tower of Hanoi) 문제는 세 개의 기둥과 이 기둥에 꽂을 수 있는 크기가 다양한 원반들이 주어지는데, 다음의 조건을 만족시키면서, 한 기둥에 꽂힌 원반들을 그대로 다른 기둥으로 옮겨서 쌓는 것이 목적이다. 한 번에 한개의 원반만 옮길 수 있다. 이동하는 원반은 세 개의 기둥 중 하나에 반드시 꽂혀야 한다. 가장 위에 있는 원반만 이동할 수 있다. 큰 원반이 작은 원반 위에 있어서는 안 된다. (A) 기둥에 있는 N개의 원반을 (C) 기둥에 옮기기 위하여, 실행되어야 할 최소 원반 이동 과정을 프로그래밍한다면? 원판이 n개 일 때, 최소 이동 횟수 공식은 (2**n) - 1(번)이다. 예를 들어 한 번의 실수 없이..
FE/JavaScript [JS] 재귀를 이용하여 Tree UI 구현하기 Tree UI Tree UI는 화면을 구성할 때 재귀를 사용하는 가장 대표적인 예시이다. 만들고자 하는 간단한 HTML DOM 구조 (예: 음료 -> 콜드브루 -> 나이트로 콜드브루) 음료 콜드브루 나이트로 콜드 브루 돌체 콜드 브루 제주 비자림 콜드 브루 콜드 브루 메뉴 데이터 (길어서 생략) 더보기 const menu = [ { type: 'group', name: '음료', children: [ { type: 'group', name: '콜드 브루', children: [ { type: 'item', name: '나이트로 콜드 브루' }, { type: 'item', name: '돌체 콜드 브루' }, { type: 'item', name: '제주 비자림 콜드 브루' }, { type: 'item'..
FE/JavaScript [JS] JSON.stringify 재귀를 이용하여 직접 구현하기 * 재귀를 이용해 메서드 JSON.stringify를 함수의 형태로 직접 구현하기 JSON.stringify는 객체를 JSON으로 변환하는 메서드이다. 이 메서드를 재귀를 사용하여 함수의 형태로 직접 구현해본다. 자바스크립트 객체와 JSON은 대표적인 트리 구조로 되어 있다. 즉, 전형적인 재귀 탐색이 가능한 구조(객체의 값으로 객체를 포함하는 구조)이기 때문에 재귀 사용을 적극 권장한다. JSON.stringify 아래의 JSON.stringify와 같은 결과를 구현하는 함수를 만들어본다. JSON.stringify 규칙 [Browser에 존재하는 JSON.stringfy 함수 === 구현할 stringifyJSON] JSON.stringfy 함수는 input 값을 JSON 형식으로 변환한다. 1. ..
FE/JavaScript [JS] JSON 개요 (JavaScript Object Notation) JSON의 탄생 배경 JSON은 JavaScript Object Notation의 줄임말이다. (자바스크립트 객체 표기법) 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에 전송한다고 가정해보자. 이 객체 내용을 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메시지라 한다면, 다음 객체를 어떻게 전송할 수 있을까? const message = { sender: "김코딩", receiver: "박해커", message: "해커야 오늘 저녁 같이 먹을래?", createdAt: "2023-01-12 10:10:10" } 메시지 객체가 전송할 수 있게 하려면, 메시지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나, 문자열처럼 범용적..
FE/JavaScript [JS] 재귀 * 자기 자신을 호출하는 함수인 재귀(recursion) 함수를 활용하는 방법 재귀의 개념 재귀 : 원래의 자리로 되돌아가거나 되돌아옴. 표준국어대사전에서는 위와 같이 재귀의 뜻을 정의하고 있다. 재귀의 시각적 예시를 든다면 계속해서 원래의 상태로 돌아오는 아래 이미지와 같을 것이다. 위 정의와 예시를 참고하여 재귀를 코드로 표현하면 다음과 같이 작성할 수 있다. function recursion () { console.log("This is") console.log("recursion!") recursion() } recursion 함수를 호출하면 자기 자신을 끝없이 호출하면서 같은 코드가 계속해서 실행되는 것을 볼 수 있다. 이 recursion 함수처럼 자기 자신을 호출하는 함수를 재귀 함수라고 한..
FE/JavaScript [JS] fetch를 이용한 네트워크 요청 - 2/2 (활용) Fetch API is an asynchronous web API that comes with native JavaScript, and it returns the data in the form of promises. 자바스크립트에서는 fetch 로 리소스에 대한 비동기 요청을 할 수 있다. (주로 API를 호출하고 응답 데이터를 받아오는 데에 사용) 서버를 실행한 상태에서는 다음 URL을 통해 정보를 얻어올 수 있다. 최신 뉴스: http://localhost:4999/data/latestNews 날씨 정보: http://localhost:4999/data/weather fetch를 이용해서 http://localhost:4999/data/latestNews 요청과 http://localhost:4999..
FE/JavaScript [JS] Node.js 내장 모듈인 fs 모듈로 비동기 실습 - 2/2 (활용) fs.readFile 사용하기 이전 포스팅 참고 브라우저 환경과는 다르게 Node.js 환경은 로컬 컴퓨터에서 직접 실행되므로, 파일을 불러오거나 저장하는 등의 액션이 가능하다. fs(File System) module 사용법을 잘 익힌다면 "파일 열기", "파일 저장하기" 등을 직접 구현할 수 있다. Node.js에서는 파일을 읽는 비동기 함수를 제공한다. 이를 통해 callback과 Promise를 구현해보자. * 참고 : 파일을 불러오는 메서드인 fs.readFile의 공식 API 문서 // [커맨드] part-2/01_callBack.js 파일을 실행한다. node part-2/01_callback.js ㄴ 결과 화면은 다음과 같이 나와야 한다. 1. callback 으로 구현하기 // fs.re..
FE/JavaScript [JS] 비동기 흐름 : 배열 메서드 구현해보기 (Underbar) - 중 rest parameter를 자유자재로 사용하고, _.shffule에서 immutable 개념을 복습해본다. 구현해볼 배열 메서드 함수 커스텀 메서드 : once, delay 배열 내장 메서드 : includes, every, some 객체 커스텀 메서드 : extends, defaults 배열 커스텀 메서드 : zip, zipStrict, intersection, difference, shuffle 함수 커스텀 메서드 'use strict'; /** * FUNCTIONS * ========= * 클로저의 특징을 활용해 다양한 형태의 함수를 구현할 수 있다. * 이를 활용하여 기존 함수가 여러 번 실행되면 결과가 변동되는 함수를, * 한 번 리턴된 값만 리턴하게 하는 함수(_.once)와 * 기존 함수가..
FE/JavaScript [JS] fetch를 이용한 네트워크 요청 - 1/2 (개념) 비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청이다. 네트워크를 통해 이루어지는 요청은 그 형태가 다양하다. 그중에서 URL로 요청하는 경우가 가장 흔하다. URL로 요청하는 것을 가능하게 해 주는 API가 바로 fetch API이다. fetch API 생활코딩 요약 서버가 데이터를 꺼내서 응답을 해주는 데 시간이 많이 걸릴 수 있다. response라는 객체의 속성 값 (Status: 200) not Found : 웹 서버가 응답을 하면서 파일을 찾았다는 뜻. + fetch API 개요 fetch API는 특정 URL로 부터 데이터를 받아오는 역할을 한다. 다음은 흔히 볼 수 있는 포털 사이트이다. 이 사이트는 시시각각 변하는 정보와, 늘 고정적인 정보가 따로 분리되어 있다. 이 중에서 최신 뉴..
FE/JavaScript [JS] Node.js 내장 모듈인 fs 모듈로 비동기 실습 - 1/2 (개념) 브라우저에서 사용할 수 있는 비동기 흐름은 타이머 혹은 DOM 이벤트와 관련된 상황으로 다소 한정적이지만, Node.js의 경우 많은 API가 비동기로 작성되어 있다. Node.js 소개 문서의 첫 단락은 Node.js의 정의부터 시작한다. Node.js는 "비동기 이벤트 기반 JavaScript 런타임"이다. About Node.js® As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications. Many connections can be handled concurrently. Upon each connection, the callback is fired, but i..
FE/JavaScript [JS] 동기, 비동기를 구현한 간단한 예제 미리 알고 있어야 하는 것 Date.now() Date.now() 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환한다. 시간날짜를 얻는 함수 Date()와 while문 조건으로 3초가 지난걸 확인한다. function wait(sec) { let start = Date.now(), now = start; while (now - start let start = 현재시점, n..
FE/JavaScript [JS] 비동기 실습하기 자바스크립트는 비동기를 왜 고민하게 되었나? 1. 컴퓨터의 유휴 자원을 활용하기 위함 2. 비동기가 필요한 것은 맞다. 하지만 아래 예제에서 영상 재생 & 멈춤, 제목 표시 & 강조 & 초기화 등이 동시다발적으로 일어나게 되면 순식간에 지나가기 때문에 (작업은 시작부터 완료되었지만 우리 눈에는 마치 멈춘 것과도 같다.) 즉, 의도적 지연시간이 필요하다. 비동기 구현하기 가장 간단한 비동기 구현은 타이머 API를 이용하는 방법이다. 타이머 API는 setTimeout()이라는 메서드를 이용해 구현할 수 있다. callback과 promise, 그리고 async/await 키워드를 이용한 비동기 흐름을 제어하는 방법을 코드를 통해 비교해보자. 1. callback delay 함수 const delay = (..
FE/JavaScript [JS] fetch polyfill https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 어떤 브라우저에서 지원되는 지를 알려줌. fetch polyfill 지원하지 않은 브라우저에 대해서 지원할 수 있게 해 주는 라이브러리 지원하는 브라우저에 대해서는 기본 기능을 쓸 수 있도록 함
FE/JavaScript [JS] Axios Axios 란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있다. Fetch API vs Axios Axios Fetch API 써드파티 라이브러리로 설치가 필요 빌트인 API라 별도의 설치 필요X 자동으로 JSON데이터 형식으로 변환 .json() 메서드를 사용해야 함 Axios 사용법 Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치해야 한다. Axios는 fetch API와 기본 원리는 같다. npm install axios GET 요청 GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드이다. 첫번째 인자 : url주소 (필..
FE/JavaScript [JS] 비동기 다시 정리 : callback / promise / async, await callback -> 문제 : 가독성이 떨어진다. (실행순서가 바로 눈에 들어오지 않는다.) promise 기본형태 (11라인부터) then이라는 메소드 가지고 있는 애가 promise의 인스턴스이다. 즉, delayP에서 만드는게 promise의 인스턴스. resolve 에 결과값에 넘겨지게 되면 then에게 넘겨주게 된다. 프로미스에서는 콜백을 순차적으로 지정해준다. 아무 것도 리턴하지 않으면 result 값에는 undefined가 들어간다. then의 리턴값은 resolve한 프로미스를 리턴한다. 비동기 연산인 promise를 리턴하지 않기 때문에 지연 없이 마지막 로그가 찍힌 것 async/ await async 도 promise 를 리턴한다. 즉 then을 쓸 수 있다. 여기서의 result 는..
FE/JavaScript [JS] 비동기 코드 제어하기 : callback / promise / async, await 커피숍에서 커피를 주문하려고 줄을 서는 모습을 상상해 보자. 커피숍 사정상, 커피를 주문한 먼저 온 김코딩이 주문한 커피를 받을 때까지, 줄 서 있는 박해커가 주문조차 할 수 없다고 한다면 이를 우리는 블로킹(blocking)이라고 부른다. 하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"이다. 박해커는 김코딩이 주문한 커피가 나오고 나서야 커피를 주문할 수 있습니다. 김코딩의 커피 주문 완료 시점과 박해커의 커피 주문 시작 시점이 같다. 이렇게 시작 시점과 완료 시점이 같은 상황을 "동기적(synchronous)이다." 라고 한다. 효율적인 커피숍 운영을 위해서 아래와 같이 커피숍 주문 과정을 변경해 보자. 커피 주문이 블로킹(blocking) 되지 않고, 언제든지 주문을 받을 수 있다. 커피가..
FE/JavaScript [JS] 비동기 흐름 : 배열 메서드 구현해보기 (Underbar) - 하 이해 강박증이 있기 때문에 코드를 한 줄 한 줄 우걱우걱 씹어보는 포스팅!!!!!!! 비동기 흐름은 JavaScript의 가장 큰 장점 중 하나이다. 비동기 흐름은 callback, promise, async/await 중 하나의 문법을 이용하여 구현할 수 있다.   예전에는 배열 메서드가 브라우저에서 자체적으로 지원되지 않던 시절이 있었다. 이때 개발자들은 보다 나은 방법으로 배열이나 객체를 다루기 위한 도구 모음집을 만들었는데, 이것을 후에 라이브러리(Library)라고 부르기 시작했다. 배열, 객체를 다루는 Underbar라는 라이브러리를 직접 구현하면서 자바스크립트 내장 메서드가 어떻게 콜백(Callback) 함수를 활용하는지에 대한 원리를 알아보자. Underbar의 모티브가 되는 라이브러리는,..
FE/JavaScript [JS] 프로토타입 체인 JavaScript는 프로토타입 기반 언어로 프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현한다. 예시를 들기 위해 학생(Student)과 사람(Human)이라는 클래스가 각각 존재한다고 가정하고, 클래스 Human의 메서드와 속성을 객체로 구현한다면, 다음과 같다. let kimcoding = new Human('김코딩', 30); // 속성 kimcoding.age; kimcoding.gender; // 메서드 kimcoding.eat(); kimcoding.sleep(); 학생은 학생이기 이전에, 사람이다. 따라서 클래스 Student는 Human의 기본적인 메서드를 상속받을 수 있다. 다만, 학생은 일반적인 사람의 특징에 추가적인 특징이 필요하다. 예를 들면 다음과 같다. ..
FE/JavaScript [JS] 객체 지향 프로그래밍(OOP)의 4가지 주요 개념 객체 지향 프로그래밍(OOP)의 등장 객체 지향 프로그래밍이라는 패러다임이 등장하기 전에는 절차 지향 프로그래밍이 있었다. 모든 것을 절차적으로 생각했으며 절차적 언어는 순차적인 명령의 조합이기에 기껏해야 함수로 이동하는 것이 전부였다. 초기의 C, 포트란 같은 언어들은 객체 지향의 개념이 없는 절차적 언어였다. 그러나, 객체 지향 프로그래밍이라는 패러다임이 등장하면서, 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 고안해냈다. 따라서, 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶여서 처리할 수 있게 되었다. 객체 지향 언어 "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성하는 것이다. 이러한 객체..
⬆︎

728x90