FrontEngineer JungBam

순수 함수란 결국 외부에서 참조되는 값이 결과에 영향을 미치지 않는 함수를 말한다. const a = 1 const add = (b,c) => a + b + c 위의 코드에서 add함수는 a라는 값을 참조하여 연산한 값을 리턴하는데 이렇다면 다른 곳에 불려갔을 때에는 a값이 없기 때문에 에러가 날 것이다. 즉, 이 함수의 컨텍스트로만 동작했을 때에 함수가 제대로 동작하지 않는 것이다. const add = (a, b, c) => a + b + c 위의 코드에서 함수는 어디에서 불러오더라도 인자가 제대로 들어오는한 문제없이 동작한다. 위 함수는 순수함수이다. 한가지 경우를 더 보자. const add = (a, b) => { const c = 3 return a + b + c } 이 함수 또한 어디에서 불..

max-age와 expires는 쿠키나 cache-control에서 설정하는 것을 본 경험이 있다. 이것이 무엇인지 한번 짚고 넘어가는 시간이 필요할 것 같아서 정리해보겠다. Cache-control 응답헤더에 실려와 HTTP 캐시에 대한 설정을 해주는 옵션 쿠키 HTTP통신의 stateless, connectless 단점을 극복하기 위해 응답이 보내졌을때 연결이 만료되더라도 상태를 저장하고 유지하기 위한 방법 max-age expires 유효 기간 (ms 기준으로의 시간이 들어감.) 유효 일자 (그 값으로 날짜가 들어감.) 두개 모두 설정되어 있다면 max-age가 우선순위를 가져 expires는 무시하게 됨. 해당 기간 / 일자가 되면 데이터는 자동으로 쿠키/캐시에서 삭제되게 됨. 참조 : Expir..

세가지 방법 모두 request에 따른 response 이후에 연결이 끊어지는 HTTP의 단점을 보완해 줄 수 있는 방법으로 제시할 수 있으나, 각각의 차이가 있다. 아래의 표로 간단하게 살펴보자. 구 분 웹 스토리지 쿠 키 로컬 스토리지 세션 스토리지 특 징 - HTTP 요청이 끝나더라도 서버 상태를 유지할 수 있는 저장소 역할을 함. - 한 사이트당 4kb, 20개의 문자열 정보만 담을 수 있음. - 서버에 요청될때 무조건적으로 실려서 보내짐. - 영속성을 가져 브라우저를 닫더라도 유지가 됨. - 기본적으로 쿠키 세션과 동일하게 브라우저를 닫으면 데이터가 지워짐.

preload 타이밍 1. 마우스가 그 이벤트를 하러 갈때 2. 초기화 렌더링이 끝나고 componentDidMount 타이밍 preload 기능이 포함된 lazyload 시키기(feat.유동균) const lazyWithPreload = import =>{ const Component = React.lazy(import) Component.preload = import return Component } 이미지 prelaod 시키기 const preImg = new Image() preImg.src = 파일 주소 위의 코드를 통해 preload 타이밍에서 이미지 소스를 불러오고 앞서 블로그에 글을 남겼던 HTTP의 캐시를 통해 이 이미지를 먼저 로드해놓았다가 사용할 수 있게 된다.

턴제 게임의 특성상 타이머를 구현해야 했고 처음에는 쟁크현상이 발생하였었다. 이것을 부드럽게하기 위해 작업했을 때 너무 많은 Reflow가 발생하였는데 이런 점을 최적화 할 수 있는 방법에 대해서 알게 되었다. ※ 쟁크 현상 : 초당 60프레임을 그리는 브라우저의 특성과 달리 초당 60프레임이 주어지지 않았을 때, 살짝 끊기는 듯한 화면이 그려지는 현상 Reflow => 렌더링 과정이 모두 재실행되는 것 Repaint => color, background-color 변경의 경우 layout을 생략하고 paint 작업으로 넘어가는 것 GPU의 도움을 받아 Reflow와 Repaint 피하기 => tranform, opacity를 변경하게 될 경우 layout과 paint 과정을 모두 생략하고 Composi..

웹팩을 가이드라인을 따라 기본적인 동작원리가 이해가 되었다 싶어서 프로젝트의 번들링 결과를 확인해보았다. webpack을 eject를 통해 뜯어보는 것은 지양하라고 하여 방법을 찾던 중 강의에서 들었던 분석 라이브러리를 사용해서 보았다. 애니메이션 라이브러리와 page를 네임스페이스 패턴으로 작성한 스크립트가 비율이 엄청 크다는 것을 알 수 있었다. 이 부분에 대해서 코드 스플리팅을 해야겠다라는 생각이 들었다. 두번째 사진이 코드 스플리팅 이후 번들링에서 index.js에 포함된 게임에 필요했던 모듈들이 제외되면서 번들 자체가 확실히 줄어든 것을 확인할 수 있었다. 두번째 이후 ICON.js에도 코드 스플리팅을 적용했을때 번들 자체가 확실히 줄어든 것이 눈에 띄었다. 초보 수준의 번들링 최적화지만 결과가..

Light house? 웹 성능을 분석하는 도구로 별도의 라이브러리였으나 구글 개발자도구에 audit으로 포함되었고 최근에는 확장팩을 통해 추가하여 사용가능 하다. 성능을 분석했을 때 위의 화면처럼 각각의 문제점들이 나오게 된다. Opportunity는 로딩에 대한 개선점들이 나오고 DIAGNOSTICS에는 렌더링에 관련된 항목들이 나온다. Light house에서는 이런 점들에 대해 개선시킬 수 있는 기본적인 가이드 라인을 제공하는데 이 가이드 라인을 참고해서 성능 최적화의 첫 발을 딛게 되었다.

this는 함수가 실행될 때 실행 컨텍스트에 바인딩 된다. 실행 컨택스트 객체에는 변수객체, 스코프 체인, this가 담겨지는데 이때 this는 호출하는 방법에 따라서 다르게 바인딩된다. 1. 화살표 함수에서 this : 화살표 함수는 this가 바인딩되지 않기 때문에 실행 컨텍스트의 스코프 체인의 상위 스코프의 this를 가리킨다. 2. 일반 함수 호출 : 일반 함수로 호출된 경우 this는 전역 객체를 가리킨다. 3. 메소드로 호출 : 메소드로 호출되었을 때에는 자신을 부른 객체를 가리킨다. 4. 전역에서의 호출 : window 객체를 가리킨다. const a = { name: "객체", arrow: function () { const any = () => console.log(this); any()..