JavaScript @font-face속성에서 url()로 폰트 리소스 호출 시 만난 CORS에러 문제상황 기존 소스파일에 포함되어있었던 폰트, 이미지, 아이콘 파일 등등을 CDN으로 받아오려고 작업하다가 만난 에러이다. AWS S3에 올리고 CloudnFront로 받아오도록 작업했는데, 다른 파일들은 괜찮은데 폰트를 받아오는 경우에만 CORS error 가 발생했다. 검색해보니 CSS 내에서 @font-face 속성으로 Cross-Origin의 폰트 리소스를 호출하는 경우에 해당되기 때문에 발생하는 에러였다. 사파리에서는 이상없이 잘 되는데 크롬에서 CORS에러가 발생함... 브라우저마다 CORS 정책이 달라서 그런것 같다. 아래의 W3C 권장사항을 참고해보면 나는 세번째 경우에 해당하므로 Access-Control-Allow-Origin 리스폰스 헤더 값을 와일드카드(*)로 지정해주어야한다. 해결.. 더보기 자바스크립트의 가비지컬렉션(Garbage Collection) 메모리 관리는 왜 필요한가? 대부분의 언어에서 메모리 라이프 사이클은 메모리 할당 → 메모리 사용 → 메모리 해제의 단계를 거친다. C같은 low-level 언어의 경우 이 라이프 사이클을 개발자가 malloc()이나 free()를 사용하여 직접 관리를 해주어야 하지만 자바스크립트와 같은 high-level 언어는 대부분 Garbage Collection이라는 자동 메모리 관리를 사용하기 때문에 개발자가 별도의 신경을 쓰지 않는다. 가비지컬렉션(Garbage Collection)이란? 가비지컬렉션은 더이상 사용하지 않는 메모리를 발견하고 이를 해제해주는 역할을 한다. 가비지컬렉션이 자동으로 메모리 관리를 해준다고해서 개발자가 완전히 신경을 쓰지 않는다면 메모리 누수(memory-leak)가 발생할 수도 .. 더보기 moment.js 최적화 - 불필요한 locale파일 빌드 시 제외시키기(with webpack) 현재 회사 프로젝트에서 moment.js를 사용중인데, 실제로 사용하고 있는 local 파일은 ko뿐인데 어마어마하게 많은 모든 local파일을 포함해서 빌드하는것을 발견하였다. 웹팩 번들 애널라이즈로 보면 moment가 차지하는 사이즈가 꽤 크다. 파일의 크기가 크면 클수록 페이지를 로드하는 시간이 길어지기 때문에 되도록이면 사용하지않는 라이브러리는 빌드에 포함시키지 않고 번들링 사이즈를 작게 관리하는 것이 중요하다. 따라서 webpack을 사용하여 번들링 할 때 ko locale만을 번들링파일에 포함시켜 파일 사이즈를 줄여보도록 하겠다. 불필요한 locale 파일들 왜 모두 번들되나요? function loadLocale(name) { var oldLocale = null; // TODO: Find .. 더보기 자바스크립트에서 불변성(Immutability)이란 사실 나는 불변성이라는 개념을 자바스크립트 언어 자체를 공부할 때 말고 리액트를 공부하면서 state를 변경할 때 처음 접했었다. 그냥 단순하게 '새로운 값을 할당하지 않으면 리렌더링이 안되니까 항상 새로운 값으로 줘야지!'의 개념에서 그쳤기 때문에 불변성을 지키지 않은 코드로 버그를 발생시키기도 했고, 디버깅할 때도 애를 먹었다. 불변성 개념은 특별히 자바스크립트 언어에 한정되는 것이 아니고, 다른 언어에서도 존재하는 개념이다. 얕은 복사(shallow copy)와 깊은복사(deep copy)의 개념까지 어느정도 이어지기 때문에 꼭 숙지하는 것이 좋다. 불변성이란 무엇인지와 왜 불변성을 지키는 것이 중요한지에 대해 알아보자. 변수에 값 할당하기 다들 알고 있겠지만 변수에 값을 할당한다는 것은 값의 메모.. 더보기 ECMAScript 와 JavaScript의 차이점 👀 들어가기 전에 알아보기 컴파일러 고급언어로 쓰인 프로그램이 컴퓨터에서 수행되기 위해서 컴퓨터가 이해할 수 있는 언어로 바꿔주어야 한다. 이러한 일을 하는 프로그램을 컴파일러라고 한다. 컴파일러는 소스를 한꺼번에 한 번만 읽고 분석한다. 인터프리터 컴파일러는 소스를 한 번에 기계어로 변환시키지만, 인터프리터는 코드 한 구문씩 기계어로 해석해나가면서 실행하는 프로그램이다. 스크립트 언어 스크립트 언어는 컴파일 과정을 요구하지 않는 언어이다. 예를 들면 C나 JAVA 같은 경우 작동하기 전에 컴파일이 필요하지만, 스크립트 언어인 JavaScript나 PHP는 컴파일이 필요하지 않다. 일반적으로 컴파일된 프로그램은 한 번에 기계어로 번역된 후 실행되기 때문에 인터프리터 언어보다 빠르다. 👉 JavaScrip.. 더보기 자바스크립트 문자열, single or double quotes?... and backtick 내 경우에는 보통 문자열에 shift누르기 귀찮기도 하고 보기에도 깔끔해보여서 single quotes을 쓰는 편인데, 다른사람들은 어떻게 쓰는지 궁금해서 검색해보았다. 자바에서는 char타입은 ''로 감싸고 String타입은 ""로 감싸지만, 자바스크립트는 char타입이 없기 때문에 문자열을 표현할때 'ABC'와 "ABC"는 완전히 같다. 내가 single quotes를 쓰는 이유는 단순히 매번 shift랑 같이 누르는것이 귀찮기 때문이다. html 요소 코드에서 escape가 필요할 때는 아래처럼 single qoutes안에 double quotes을 써주는 편이다. const element = '...' postman에서 ajax요청할 때 json파일도 같이 보낼 때가 있는데, json은 doubl.. 더보기 [번역] 반복문안에서의 자바스크립트 async/await 이 글은 원 글 작성자의 번역 허락을 받고 진행되었습니다. 의역, 오역 있을 수 있으니 댓글로 알려주신다면 감사드리겠습니다! 원글 보기 👉 https://zellwk.com/blog/async-await-in-loops/ 시작하기 전에 이 글은 독자가 이미 async/await에 대해 기본적인 개념을 숙지하고 있다는 가정하에 진행되므로, async/await의 개념에 대해 숙지하고 글을 보는 것이 이해하는데 있어 도움이 될 것입니다. 예제 준비하기 먼저, 여러분이 과일바구니 안에 있는 과일의 수를 알고싶어한다고 가정해봅시다. const fruitBasket = { apple: 27, grape: 0, pear: 14 } 그리고 과일 바구니 안에 있는 각 과일의 수를 알고싶다면, getNumFruit이라는.. 더보기 자바스크립트 reduce 안에서 async/await 쓰기 프로젝트를 진행하며 배열에 대한 loop을 돌리면서 async/await문을 써야 할 상황이 있었는데, 일반 기본적인 함수를 async 선언해서 코딩을 해봤어도 reduce문 안에서 async/await을 쓰려고 하니 영 어색했다. 그래서 찾아보니 아주 정리가 잘 된 블로그 글이 있었다. reduce 이외도 자바스크립트 loop안에서 async/await을 쓰는 경우가 아주 잘 정리되어있어 이해하기가 쉬웠다. 굉장히 좋은 글이라 한글로 번역해보고 싶어 이메일로 문의해봤는데 답장은 아직 안왔다. 번역해도 괜찮다고 답장이 오면 제대로 번역한 글을 올리도록 해야겠다. 혹시 원래 포스트가 궁금한 사람은 아래 링크로 가서 읽어보면 된다. Zell Liew Zell is a designer, developer an.. 더보기 배열의 reduce() 파헤치기 배열의 reduce() 함수에 대해 정리해보려고 한다. 내용은 MDN 웹 문서 사이트를 참고하여 정리된 내용이며, 더 많은 예제와 자세한 내용은 아래 링크에서 볼 수 있다. 링크로 가기 👉 Array.prototype.reduce() reduce() reduce() 메서드는 배열에 대하여 주어진 리듀서(reducer)함수를 실행하고 결과 값을 반환한다. reduce()는 reduce(콜백함수, 초기값)와 같은 형태를 가지고 있으며, 배열의 각 요소가 주어진 콜백함수를 거치게 된다. 이 콜백함수를 리듀서(reducer) 라고 한다. 리듀서는 네가지 인자를 가진다. accumulator(누산기): 누산기는 콜백(리듀서)의 반환 값을 누적한다. 만약 초기값이 제공된다면, 리듀서의 첫번째 호출 시 accumul.. 더보기 이전 1 다음