Developer/TI
CORS
면접을 보면서 CORS에 대한 질문을 받았었다. CORS에 대해 아는 대로 답변드리고 꼬리 질문이 이어졌는데, CORS를 제대로 답변드리지 못한 것 같기도 하고 프론트엔드에선 어떻게 설정하는지에 대한 질문에 답변을 하지 못해 다시 간단하게 정리하고자 한다. CORS CORS는 cross origin resource share의 약자로 origin간origin 간 리소스를 공유할 수 있도록 하는 정책이다. 브라우저는 보통 다른 origin에서 요청을 보내는 것을 금지하고, 같은 origin 간 공유를 허용하는 정책을 사용한다. 여기서 말하는 같은 origin이 SOP(same-origin-policy)이다. Open API 등 다른 출처(origin)에 자원을 요청하는 경우가 많아졌다. 다른 origin의..
Developer/TI
Web Storage(localStorage, sessionStorage, cookie)
2주 전, K사 코딩 테스트를 응시하며 React Redux를 사용해야 했다. Redux를 공부했을 때 간단한 예제 정도만 구현해보고, 프로젝트를 할 때도 직접적으로 Redux를 사용하지 않아서 사용 방법을 까먹고 문제를 제대로 풀지 못했다. 다시 대략적인 사용법을 익히고자 간단한 예제를 만들었고, 해당 예제를 만들면서 state가 새로고침 혹은 브라우저 종료 후에도 유지될 수 있도록 Web Storage에 저장하는 방법을 적용해봤던 것을 기록하고자 한다. Web Storage에 저장하는 예제를 작성하면서 Web Storage에 대한 내용이 가물가물해서 다시 정리했다. Redux 예제 Reducer action 객체를 받아 state를 변경할 reducer들이다. const initialState = {..
Developer/TI
Babel, Webpack(바벨, 웹팩)
Chrome, Safari, Firefox, Edge 등 에버그린 브라우저의 ES6 지원율은 약 98%로 대부분의 ES6를 지원한다. 그러나 IE의 경우 약 11%의 지원율을 보이고 있다. 새롭게 도입되는 ES6+와 ES.NEXT는 브라우저에 따라 지원율에 차이를 보인다. 최신 ECMAScript 사양을 사용하며 프로젝트를 구형 브라우저에서도 동작하게 하기 위한 환경 구축이 필요하다. 다양한 브라우저 환경에서 동일한 프로젝트가 동작할 수 있도록 도와주는 것이 Babel과 Webpack이다. Babel Babel은 트랜스파일러로 높은 버전의 소스 코드를 다운시켜주는 역할을 한다. [1, 2, 3,].map(n => n ** n); // ES6 : Arrow function, ES7 : 지수 연산자 위 코드..
Developer/TI
프로미스, 콜백 함수
콜백 함수 비동기 처리를 위한 하나의 패턴으로 사용된다. 콜백 헬로 가독성이 저해되고 에러 핸들링이 곤란하고 여러 개의 비동기를 처리하는데 한계가 있다. 콜백 헬 함수를 익명 함수로 전달하는 과정이 반복되어 indent가 깊어지는 현상을 의미한다. 서버 통신과 같은 비동기 작업을 수행하기 위한 코드에서 자주 발생한다. 프로미스 ES6에 비동기 처리를 위해 도입된 패턴으로 비동기 처리 상태와 처리 결과를 관리하는 객체이다. 프로미스 등장 배경 비동기 처리를 위한 패턴 ES6 : Promise, Generator ES7 : async/await 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수 없다. 비동기 처리 결과나 후속 처리 과정은 비동기 함수 내부에서 처리해야..
Developer/TI
이벤트 버블링/캡쳐링, 이벤트 위임
이벤트 등록 DOM API를 통해 DOM에 접근할 수 있다. 접근한 DOM 요소에 이벤트를 등록할 수 있는데 addEventListener를 활용해 이벤트를 등록할 수 있다. 이벤트 객체 addEventListener로 이벤트가 등록된 후, 이벤트가 발생하면 브라우저는 이벤트 객체를 생성한다. 해당 객체에는 이벤트가 발생한 요소와 대상에 대한 정보가 담겨 있다. Event - Web API | MDN Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다. developer.mozilla.org 이벤트 객체 속성 event.target : 이벤트가 처음 발생한 대상 event.currentTarget : 이벤트의 현재 대상 event.type : 이벤트 타입 etc Event - Web API |..
Developer/TI
자바스크립트 script async/defer 어트리뷰트
async/defer 어트리뷰트 브라우저 렌더링 동작에 대해 공부하다 async/defer 어트리뷰트를 처음 접하게 되었고, 생소한 부분이라 다시 따로 공부한 것을 정리했다. 브라우저 렌더링 과정 정리 브라우저 렌더링 자바스크립트가 가장 많이 사용되는 곳은 웹 페이지/애플리케이션 클라이언트 사이드이다. 웹 페이지/애플리케이션의 클라이언트 사이드 상의 자바스크립트는 브라우저에서 mieumje.tistory.com async/defer 어트리뷰트의 등장 배경 Cats 위와 같은 html이 있다고 가정해보자. 브라우저 렌더링 동작 방식에 의해 위에서부터 아래로 차례로 내려오며 DOM과 CSSOM을 그린다. head tag 내부에서 script tag를 만나면, DOM 생성 과정을 중단하고 자바스크립트 엔진이 ..
