본문 바로가기

Programming181

[Programming] CORS란? (preflight, OPTIONS 메소드?) CORS가 도입된 배경 CORS가 도입되기 전 클라이언트들은 서버에서 제공하는 리소스를 가지고만 서버와 통신을 진행했다. 이 경우 서버와 클라이언트의 origin은 동일했기 때문에 굳이 CORS를 도입하지 않아도 웹 서비스를 운영하는데 문제가 없었다. 하지만 SPA가 등장하고 한개의 웹 애플리케이션에서 다른 서버로 요청을 보내는 경우가 많아지면서 클라이언트의 origin과 서버의 origin이 달라지는 문제가 생겼다. 즉, 다른 origin에서 리소스를 받아오는 과정에 대한 정책이 필요하게 되면서 CORS가 도입되게 된다. CORS란? CORS(Cross-Origin Resource Sharing)이란 현재 실행 중인 웹 애플리케이션이 다른 origin의 자원에 접근할 수 있도록 권한을 부여하는 체제를 .. 2022. 5. 25.
[React] Effect HOOK API useEffect 사용하는 방법 React 데이터 흐름? React 데이터 흐름 React의 개발 방식의 가장 큰 특징은 컴포넌트 단위로 페이지를 구성하는 것이다. 한개의 웹 페이지를 여러 컴포넌트로 잘라서 구성한 뒤 조립하는 형식으로 웹 애플리케이션을 구성할 수 있다. 이 방식은 가장 기초 단위인 컴포넌트에서 시작해서 전체 페이지를 구성하는 상향식(Bottom-up) 방식이다. 상향식 방식으로 웹 애플리케이션을 구성할 때 장점은 단위 테스트가 용이하고 확장성이 높다는 것이다. 따라서 웹 애플리케이션의 프론트를 설계 할 때 가장 먼저 해야 할 일이 컴포넌트 단위로 구조를 쪼개는 작업이다. 모든 컴포넌트는 단일 책임 원칙을 따른다. 즉 컴포넌트는 한가지 일만 수행해야 한다는 것이다. props? 컴포넌트에 전달되는 데이터는 props로 .. 2022. 5. 25.
[Javascript] setTimeout vs setInterval 차이 (debounce, throttle ?) Javascript에서 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 함수 호출 시점을 임의적으로 조정하기 위해서는 타이머 함수를 사용해야 한다. 이를 호출 스케줄링(schedule a call)이라 한다. Javascrip에서 사용할 수 있는 타이머 함수는 setTimeout과 setInterval이 있다. 이 타이머를 제거할 수 있는 clearTimeout와 clearInterval을 제공한다. 사실 타이머 함수들은 ECMAScript에 정의된 빌트인 함수가 아니다. Node.js와 브라우저 환경에서 제공하는 함수다. setTimeout과 setInterval 모두 타이머 함수로 일정 시간이 경과된 후 콜백함수를 호출한다. 가장 큰 차이점은 setTimeout이 매개변수로 주어진 시간 후 딱 한번.. 2022. 5. 22.
[Javascript] apply() vs call() vs bind() 차이 Javascript Function Method appy, call, bind 메소드는 Function.prototype의 메소드다. 모든 함수는 prototype의 이 메소드들을 상속받는다. apply와 call 메소드는 기본적으로 this로 활용되는 객체와 인수 리스트를 전달받아 함수를 호출하는 본질적인 기능을 가지고 있다. 함수를 생성하고 [[Prototype]] 내부 슬롯을 확인해보면 이미 call, appy, bind 함수가 상속되어 있다. 첫번째 인자로는 해당 함수에 전달할 this 객체를 받는다. 두번째 인자로는 인수 리스트를 받는데, apply는 1개의 인수리스트를 받아 배열로 처리하고, call은 2개 이상의 인수리스트를 받아 쉼표로 구분된 배열을 처리한다. function getThis.. 2022. 5. 21.
[Javascript] AJAX란? (feat. Fetch, XHR, 장점 단점) 웹 브라우저를 사용하면 특정 부분만 업데이트가 되는 경우가 많다. 유튜브에서 동영상을 재생하고 버퍼링이 되는 동안 다른 기능을 조작할 수 있는 것도 동일한 기능이다. 페이지가 리로딩 되지 않으면서 특정 컴포넌트의 상태만 변경시키는게 어떻게 가능할까? 구글에서 검색을 할 때 추천 검색어가 쿼리창 바로 아래에 출력된다. 페이지가 리로딩 되지도 않았는데, 검색창 컴포넌트만 변경되는 것이다. 검색어가 변경될 때 마다 추천 검색어가 실시간으로 변경된다. AJAX(Asynchronous Javascript And XMLHttpRequest) 웹 브라우저에서 비동기로 작동하면서 특정 컴포넌트의 상태를 변경시키는 기술이다. AJAX는 Javascript, DOM, Fetch, XMLHttpRequest , HTML 등.. 2022. 5. 20.
[Network] HTTP Message Request Response 동작 이해하기 HTTP(HyperText Tranfer Protocol) HTTP는 HTML문서를 전송하기 위해 OSI 7계층의 가장 상위에 이는 애플리케이션 계층에서 동작하는 프로토콜이다. 전통적인 Client-Server 패턴에서 Client가 HTTP Message 양식에 맞춰 요청을 보내면 Server는 이에 맞는 자원을 반환하게 된다. HTTP 프로토콜은 특정 상태를 유지하지 않는다. HTTP Message 구조 Clent와 Server 사이의 데이터를 교환하는 방식이다. HTTP Message는 Request 유형과 Response 유형으로 구분된다. request나 response 모두 동일한 구조를 가지고 있다. HTTP Message는 크게 헤더(Header)와 payload인 body로 구분된다. ①.. 2022. 5. 20.
[Network] URI vs URL ? 흔히 웹 브라우저를 사용할 때 주소창에 자원의 위치를 나타내는 URL을 입력하여 특정 웹 페이지로 이동하는 경우가 많다. 웹 상의 모든 페이지들은 각자의 URL을 가지고 있고, 손쉽게 자원을 찾을 수 있다. URL URL은 서버가 제공하고 있는 환경에 존재하는 자원의 위치를 표현한다. 슬래시(/)를 사용해서 디렉토리를 이동할 수 있고, 파일을 요청하게 된다. "https://"로 시작하는 URL이 아닌 file:// 스키마를 사용할 수도 있다. 웹 브라우저에서 아래 URL을 주소창에 입력하면 내 PC의 자원을 찾을 수도 있다. 웹 브라우저가 인터넷이 아닌 로컬 탐색기로 사용가능하게 된다. file://localshot/home/[username]/Desktop URL(Unifome Resource Loc.. 2022. 5. 20.
[Network] API란 무엇인가? (feat OSI 7계층, Protocol) 클라이언트 ~ 서버 네트워크 패턴 웹 애플리케이션은 클라이언트-서버 패턴을 가진다. 클라이언트는 자원을 서버에 요청하게 되고, 서버는 요청에 적합한 자원을 반환하면서 클라이언트와 서버의 통신은 유지된다. 웹 애플리케이션의 상황은 추상적이기 때문에 실생활에서 예제를 찾아볼 수 있다. 예를 들어 커피숍에서 아메리카노를 주문한다고 하자. 주문을 하기 위해서는 "아메리카노 한잔 주세요!"라고 말해야 커피를 얻을 수 있다. 만약 "asdkASDF@#SD%%&!--111f"라고 말한다면 커피를 마실 수가 없다. 클라이언트와 서버간 통신을 위해서는 알아들을 수 있는 주문이 필요한데, 적절한 주문을 전문용어로 프로토콜(Protocol)이라 한다. 외교 협정에서의 문서 같은 개념이다. 서로 약속하고 이렇게 이행하자고 미.. 2022. 5. 20.
[Javascript] 클로저(Closure) 사용하는 이유(feat 스코프 개념) 클로저(Closure)란? Javascript 의 클로저는 함수(Function)을 일급객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. Javascript 뿐만 아니라 리스프, 얼랭, 스칼라, 스켈 등 함수형 프로그래밍 언어에서 사용된다. MDN에서 정의하는 클로저의 개념은 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 풀어서 이해하면 어떤 외부 함수 내부에 선언된 내부 함수가 외부(outer) 함수의 지역변수를 참조하는 상태가 함수가 종료된 후에도 유지되는 현상을 말한다. 코드로 다시 한번 이해해보자. function outer(){ // 외부 함수 let outerVariable = 'This is OUTER'; // 외부 함수의 지역변수 const innerFunction.. 2022. 5. 19.
[Javascript] fetch 사용법 비동기식 프로그래밍 이해하기 Javascript 비동기 프로그래밍 Javascript의 대표적인 비동기 요청은 네트워크(서버)에 자원을 요청하는 작업이다. 네트워크에 자원을 요청하는 방식은 여러가지가 있지만 대표적인 방법이 URL를 사용하는 경우다. URL을 사용해서 서버에 자원을 요청하는 경우 Javascript의 fetch 메소드를 사용한다. 특정 정보만 동적으로 변경하기 위해 서버에 요청하게 되고, 전달받은 값을 웹 브라우저에 표현해 줄 수 있다. 이 과정이 비동기적으로 돌아간다. fetch 결과값 합치기 서버에 여러개의 fetch() 메소드를 사용해서 자원을 받아온 값을 합쳐야 하는 경우가 있다. fetch() 메소드를 어떻게 중첩으로 호출한 후 결과값을 합치게 될까? 중첩 fetch() 메소드 사용 return 값으로 fe.. 2022. 5. 18.
[Javascript] 자바스크립트 fs 모듈 사용하기 (Promise, async/await 사용) Node.js API fs모듈 Node.js는 비동기 이벤트 기반 Javascript 런타임 환경이다. 웹 브라우저에서 지원하지 않는 다양한 비동기 API들을 지원하고 있다. Node.js는 웹 브라우저를 벗어나서 로컬 환경에서 Javascript를 실행할 수 있다. Node.js 내장 모듈 모음 Javascript를 로컬 환경에서 작동시킬 때 가장 흔한 IO가 파일이다. 파일을 읽기 위해서는 파일 시스템 모듈(fs)를 사용할 수 있다. const fs = require('fs'); fs 모듈 파일 읽어오기 웹 브라우저를 벗어난 Node.js 환경은 로컬 컴퓨터에서 실행되면서 파일을 읽어올 수 있다. fs 모듈 공식 문서 reaFile 메소드는 비동기적으로 파일 내용 전체를 읽어온다. fs.readFil.. 2022. 5. 18.
[Javascript] async await 사용방법 ES8 비동기 처리 방법 ES8(ECMAScript 2017)에서 비동기 처리 방식으로 async / await가 도입되었다. Promise를 기반으로 작동하고, then/catch/finally 후속 처리 메소드에 콜백함수를 전달해서 비동기 처리 결과를 후속처리할 필요가 없다. 마치 동기화 프로그래밍 처럼 비동기 프로그래밍을 구현할 수 있다. async async 함수는 async 키워드를 사용해 함수를 선언한다. async 함수는 항상 Promise를 반환한다. 만약 async 함수가 Promise를 명시적으로 반환하지 않더라도 resolve하는 Promise를 반환하게 된다. Promise를 반환하기 때문에 async 함수 뒤로 then 후속 처리 메소드를 사용할 수 있다. await await는 .. 2022. 5. 18.
[Javascript] Promise란 무엇인가? ( async await 사용 방법) How to deal with callback chain(Callback Hell)? Promise, Callback Hell을 벗어나기 위한 도구 Javascript 비동기 프로그래밍을 위해 콜백 함수를 사용하지만, 전통적인 콜백 함수 방식은 콜백 헬(Callback Hell)이 발생할 가능성이 높고 가독성이 떨어지기 때문에 여러개의 비동기 함수를 처리하는데 한계를 가질 수 밖에 없다. ES6에서는 비동기 프로그래밍을 위한 Promise 패턴을 지원한다. Promise 패턴을 사용하면 전통적인 콜백 헬을 피할 수 있고 명확하게 비동기 로직을 표현할 수 있다. const printString = function(string){ return new Promise((resolve, reject)=>{ set.. 2022. 5. 18.
[Javascript] 이벤트 루프 Event Loop VS Task Queue란? Javascript Event Loop 그리고 Task Queue Javascript의 특징 중 하나는 싱글 스레드로 동작한다는 것이다. 한번에 하나의 Task만 동작시킬 수 있기 때문에 웹 브라우저에서 동시에 여러개의 Task를 작동시키기 위해서는 이벤트 루프(Event Loop)를 사용한다. 이벤트 루프(Event Loop)는 웹 브라우저에 내장된 기능이다. Javascript 엔진은 크게 Stack과 Heap 두 부분으로 나누어 볼 수 있다. 콜 스택(Call Stack) 생성된 실행 컨텍스트가 올라가는 곳이다. 함수를 실행(호출)하면 실행 컨텍스트가 차례대로 콜 스택에 푸쉬되어 실행된다. Javascript에서는 하나의 콜 스택만 운영하기 때문에 최상단의 함수가 종료되어 콜 스택에서 제거되어야 다.. 2022. 5. 18.
[Javascript] 비동기 프로그래밍이란? Asynchronous Call Callback 함수 비동기 호출 Callback 함수는 다른 함수의 파라미터로 전달하는 함수를 말한다. 인자로 전달된 함수는 동기적으로 실행하거나 비동기적으로 실행할 수 있다. callback 함수를 비동기적으로 처리하기위해서는 특정 액션이 취해질 때 callback 함수를 호출하게 된다. callback in Action : 반복 실행함수는 callback in action에 속한다. ['a','b','c'].map((item)=>item+item); 이벤트 핸들러 또한 callback in action에 속한다. 특정 이벤트가 터졌을 때 callback 함수를 호출하게 되면서 실행시간을 임의로 조정할 수 있다. const btn = document.querySelector('button') btn... 2022. 5. 18.

티스토리툴바