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/React
Redux-persist
지난 포스트에서 Redux 예제를 사용하며 localStorage에 state를 저장해 사용하는 방법을 다뤘다. Redux persist 라이브러리를 통해 Web Storage에 state를 저장할 수 있다는 것을 알게 되어 직접 적용해보고 간단하게 정리한 내용을 작성하려고 한다. Redux-persist https://github.com/rt2zz/redux-persist#quickstart GitHub - rt2zz/redux-persist: persist and rehydrate a redux store persist and rehydrate a redux store. Contribute to rt2zz/redux-persist development by creating an account on G..
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 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수 없다. 비동기 처리 결과나 후속 처리 과정은 비동기 함수 내부에서 처리해야..
