본문 바로가기

웹 프로그래밍

 (22)
크로스 브라우징(Cross browsing) 크로스 브라우징 이란? 웹 표준에 따라 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다. 브라우저별 렌더링 엔진이 다른 상황 등 어떠한 상황속에서도 문제 없이 동작하게 하는 것을 목표로한다. ●크로스 브라우징이 발생하는 이유 - 웹 브라우저의 종류를 살펴보더라도 크롬, 사파리, 인터넷 익스플로러 웨일, 파이어폭스 등등 매우 많은 브라우저들이 존재한다. 이 브라우저들은 W3C라는 국제 웹 표준화 기구에서 제공하는 가이드라인을 따라서 동작하게 되나, W3C에서 제공하지 않은 가이드라인에 대한 디테일한 내용들은 각각의 상황에 맞게 구현되어있기 때문에 각각의 렌더링 엔진이 다르기 때문에 발생을 한다. ● 해결법 - 기능탐지를 이용하여 해당 기능이 해당 브라우저에 존재하는지를 확인하는 방법을 사용하거나 전체적..
[JavaScript] - var, let, const ● var, let, const 자바스크립트의 변수 선언은 var로만 가능했었으나, ES2015(ES6) 부터 let과 const가 추가되었다. let은 변수의 개념, const는 상수의 개념으로 생각하면 된다. 우선 var, let, const의 차이점은 5가지가 있다. ○ 중복선언 가능 여부, 재할당 가능 여부 중복 선언 재할당 var O O let X O const X X ○ 변수 스코프 유효 범위 - var: 함수 레벨 스코프로 함수 내부에 선언된 변수만 지역변수로 한정하며 나머지는 모두 전역변수로 간주한다. - let, const: 블록 레벨 스코프로 함수 내부뿐만 아니라 if, for문 등의 코드 블럭에서 선언된 변수도 지역변수로 취급한다. ○ 변수 호이스팅 방식 var 에는 변수 호이스팅이 ..
CORS(Cross-Origin Resource Sharing) CORS란? 교차 출처 리소스 공유(CORS)는 추가적인 HTTP header를 이용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘을 뜻한다. 하지만 다른 Origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용된다. ●출처(Origin) - Origin이란 url 구조에서 프로토콜과 호스트, 포트를 합친 것을 말한다. ● 동일 출처 정책 - 보통 포스트맨으로 API를 테스트하면 정상 동작을 하는데, 브라우저에서 API를 호출하면 CORS policy 오류가 나는 경우가 있다. 그 이유는 브라우저가 동일 출처 정책(Same-Origin Policy: SOP)를 지켜서 다른 출처의 리소스 접근을 금지하기 때문이다. - 동일 출처 정책을 사용함으로써 얻는 장점은 X..
[JavaScript] - 클로저(Closure) ● 클로저 클로저란 내부함수가 외부함수의 컨텐스트에 접근할 수 있는 것을 가르킨다. - 쉽게 설명하면 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. - 클로저는 외부함수의 지역변수, 인자 등을 외부함수가 종료된 이후에도 사용이 가능한다. 이러한 변수를 자유변수라고 한다. 소스코드로 살펴보면 다음과 같다. 클로저 위 코드를 살펴보면 closure() 는 함수를 반환하고, 반환된 함수는 closure() 내부에서 선언된 변수를 참조하고 있다. 이렇게 참조된 변수는 함수 실행이 끝나도 사라지지 않고 여전히 옳바른 값을 반환하는 것을 알 수 있다. ● 클로저를 통한 은닉화 클로저를 사용하면 외부에서 변수에 직접 접근하는 것을 제한할 수 있다. 즉 변수를 객체지향의 private 처럼 사용할 수 있다. ..
[JavaScript] - 호이스팅(Hoisting) 호이스팅(Hoisting)이란? - 함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최 상단에 선언하는 것을 말한다. - 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. js에서 다음과 같은 코드를 실행하면 결과가 다음과 같이 나온다. undefined test 결과를 보면 알 수 있듯이, test 변수를 정의 하기 전에 console.log(test)를 하였는데도 오류가 나지 않고 undefind 값이 출력되는 것을 볼 수 있다. 왜 그렇게 출력이 되냐면 자바스크립트엔진에서 var test = 'test'를 var test와 test='test'로 분리하여 변수 선언부를 함수 상단부로 끌어올려서 선언해버리므로 오류가 나지않고 출력..
typescript - 람다 라이브러리 ●배열에 담긴 수 보통 함수형 프로그래밍은 선언형 프로그래밍 방식으로 코드를 작성함 import * as R from 'ramda' const numbers: number[] = R.range(1, 9+1) const incNumbers = R.pipe( R.tap(a => console.log('before inc: ', a)), R.map(R.inc), R.tap(a => console.log('after inc: ', a)) ) const newNumbers = incNumbers(numbers) before inc: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ] after inc: [ 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 사칙 연산 함수 R.add(x: number)(y: n..

티스토리툴바