Grace's Tech Blog

1. Why We Use Fetch 저번에는"Client는 요청하는 주체 - API가 이 요청/응답을 정리해서 상호작용 매개, 이때 상호작용은 HTTP라는 규약에 맞게! - Server는 응답하는 주체, Client가 Server로부터 요청에 대한 응답(데이터같은..)을 받아서 이를 보여줄때 JavaScript를 사용한 비동기 통신으로 데이터를 주고받는 기술인 AJAX" 까지 알아보았습니다. 1) AJAX AJAX를 통해서 서버의 자원을 요청하고 chaining방식으로 요청을 처리할 수 있지만 조금은 복잡한감이 있다고 합니다.(저는.. AJAX나 fetch나 다 어려워보이는건 마찬가지..) 간단 예시) $.ajax({ url: 'http://example.com', method: 'GET', dataTy..

본격적인 웹개발에 들어갔습니다. (서버 구축에 대해서는 뒤에서 배우게 될 것이고,) 지금은 서버와 잘 통신하는 Client 페이지를 만들것이고, 이에 필요한 것을 배워보는 단계로, 이해한 것을 정리하도록 하겠습니다. 1. 개념 웹 서비스 아키텍쳐는 크게 다음과 같이 구성되어 있습니다. Client는 User가 보는 부분이며, 이들과 상호작용을 담당하고 Server는 리소스 요청과 응답에 대한 처리를 담당, Database는 리소스를 저장합니다. 그리고 이번 주제의 핵심인 '서버와 잘 통신하는 Client 페이지'를 만들기 위해서 중점을 두어야 할 개념들은 browser server API HTTP Ajak 입니다. 이에 대해서 정리해보겠습니다. 1) Client Client는 Server에게 데이터를 요..

+ Promise& Async/Awai t에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 이전 포스트에서 '비동기 처리 로직을 위해 콜백함수를 연속해서 사용할 때 발생하는 콜백지옥'을 마지막으로 정리해보았다. 콜백 지옥을 해결하기 위해서는 Promise & Async/Await 방식을 사용할 수 있다. 1. Promise 1) Promise란 비동기 처리에 사용할 수 있는 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체이다. 2) Promise의 필요성 1. callback을 이용한 비동기 함수의 전달 방법 3초 후에 실행되는 어떤 코드를 작성해야한다고 할 때, promise를 사용하지 않았을 때와 사용했을 때의 코드를 비..

+ Asynchronous JS & Callback 에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 1. Asynchronous(비동기) Javascript 1) Asynchronous(비동기)란 무언인가 joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ 이 글에서 에서 너무 설명을 잘 해주셨다. 식당을 예약한다고 할때, ① 동기적 방식으로 한다면 이런 식으로 진행된다. 원하는 동작(여기선 자리에 앉는다.에 해당)을 하기 위해서 손님은 '근처 가게에서 잠깐 쇼핑을 하지도, 다른 식당을 알아보지도 못하고' 예약한 식당에서 한없이 기다리..

문제1. 다음의 코드를 실행시킨 후에 result값은 무엇인가? 답1. 10 line 1의 var x= 10과 line 3의 var x = 20의 x는 서로 다른 x로, line 3의 x는 outer 함수의 scope내에서만 유효한 x이기때문이다. 그래서 line 13의 x는 line 1의 x이다. 문제2. 다음의 코드를 실행시킨 후에 result값은 무엇인가? 답2. 30 get함수 내의 x는 새로 선언된 것이 아니므로 global value이다. 따라서 get(20)의 20은 아무 영향도 미치지 못하며 global x의 값인 30이 반환된다. 문제3. 다음 코드를 실행시키면 콘솔에 찍히는 것은? 답3. Window or the global object fn은 obj의 메소드가 아닌 독립적인 함수 fu..

Brute-Force Algorithms이란, 완전 탐색 알고리즘으로 모든 경우를 시도해봄으로써 답을 구한는 알고리즘이다. 완전 탐색을 하기에 간단한 경우는 모든 경우를 얼마나 돌아야 하는지 알고 있을 때이다. 1. 예를 들어, N개의 숫자 중에서 최소값을 구하라 는 문제가 있고, N가 N개의 숫자가 입력으로 주어진다면 mini = arr[0] for(let i=0; i arr[i]){ mini = arr[i]; } } 로 단순히 하나하나 모든 숫자를 비교할 수 있을 것이다. 그러나 이런 경우가 아닌 문제가 까다로운 것이다. 2. 예를 들어, N개의 알파벳 중에서 r개를 나열할 수 있는 경우를 모두 출력하시오 와 같은 문제라면, r이 달라짐에 따라서 반복문을 써야 하는 횟수도 r 번으로 달라진다. 이처럼..

재귀함수(Recursive Function)란 자기 자신을 부르는 함수이다. 재귀함수의 의미는 무엇인가 재귀함수는 귀납적 계산 방법(귀납적 문제해결 방법)이라고 할 수 있다. 계산 방법에는 순차적 계산 방법과 귀납적 계산 방법 이라는 두 가지 방식이 있다. 먼저 순차적 계산 방법은 1. A를 계산한다. 2. A를 이용해서 B를 계산한다. 3. B를 이용해서 C를 계산한다 4. C를 이용해서 D를 계산함으로써 원하는 결과를 얻는다. 와 같이 순차적으로 진행하는 계산 방식이다. 예를 들어 n! = n x (n-1) x(n-2) ... x 2x1 과 같이 Factorial을 계산 하는 방법을 일컫는다. 두번째는 귀납적 계산 방식이다. 이는 1. 구하려고 하는 값을 f(x)라고 한다. 2. 그러면 f(x)를 구..

상속이란 상속(Inheritance)는 부모(Basic class)의 속성을 물려받는 것을 말합니다. 상속의 필요성 상속을 통해서 중복되는 코드를 부모코드가 제공하고 자식코드는 제공받습니다. 이를 통해 코드의 양도 줄이면서 부모 코드에 해당하는 부분이 수정되어야 하는 경우, 자식 코든는 하나씩 변경할 필요없이 동시에 변경이 되므로 유지, 보수에 편리합니다. 상속 방법 1) class를 통해서 상속하는 방법 주요 객체지향언어는 subclass가 superclass의 자식이 되고, 그렇게 자식이 된 subclass에서 객체(object)를 만들어낸다. 그림으로 나타내면, 이런 방식을 통해서 생성된 객체의 성질은 class로부터 이미 정해져 있습니다. 2) 객체를 통해서 상속하는 방식 JavaScript는 객..

JavaScript는 객체가 직접 다른 객체를 상속받을 수 있고 얼마든지 prototype link를 통해서 상속 받을 부모 객체를 다른 객체로 바꿀 수 있습니다. 이처럼 JavaScript는 Prototype기능을 활용해서 OOP기능을 지원하려했으며, ES6에서 Class문법을 볼 수 있지만 이는 Class개념을 흉내낸 것 JavaScript가 Class 기반 언어처럼 작동하게 바뀌었다는 것은 아닙니다. Prototype Link와 Prototype Object 앞에서 JavaScript는 Prototype을 기반으로 OOP을 흉내 내도록 구현해서 사용한다고 하였고, 그림을 통해서 잠깐 Prototype Object와 Prototype link에 대한 언급을 하였습니다. Prototype Object와..

1. Instantiation이란 Instantiation은 인스턴스를 만드는 과정을 말한다. ES6의 class 개념이 나오기 전에 JavaScript를 객체지향적으로 사용하려는 많은 노력이 있었다. 이 여러 방법들에 대해 알아보고자 한다. 2. Functional Instantiation 방식의 Instantiation 이 방식은 말 그대로 function(함수)를 이용해서 class에서 instance를 찍어내는 방식이다. ex) var Car = function(){ 1st. Car라는 함수를 만들어준다. var someInstance = {}; 2nd. 이 함수를 실행했을 때, 만들 instance 객체를 선언하다. someInstance.position = 0; 3rd. Car함수가 실행되었을..