Pay it forward

캐시의 cs적인 부분으로 들어가면 시간적 지역성, 공간적 지역성, 파레토 법칙 등의 개념이 나오는데 오늘은 프론트엔드 개발자가 캐시를 어떻게 하면 조금 더 섬세하게 다룰 수 있는지 알아보고 그 와중에 클라우드프론트(CDN)의 역할은 무엇인지 알아보자. 캐시는 웹의 성능을 높이기 위해 사용된다. 단, 잘못 관리하면 원하는 시점에 캐시가 사라지지 않아서 업데이트된 파일을 보여주지 못할 수도 있고 필요 이상의 http요청이 발생하기도 한다. 그래서 캐시와 관련된 여러 기능을 알아두고 섬세하게 조절하는 것이 필요하다. 일단 각 개념과 기능을 알아보고 토스에서는 이를 어떻게 활용하는지 배움으로써 맛보기를 해보자 캐시가 없을 때 브라우저에서 http요청을 보내고 오리진 서버는 html, css, js, 이미지 등 ..

화살표함수는 단순히 함수를 간결하게 쓰기 위해 사용되지 않는다. 지금까지 화살표함수에 대해 자세히 모르고 사용했었는데 이번 기회에 조금 더 알아보자. 화살표 함수와 함수의 가장 큰 차이는 this바인딩의 차이 일반 함수의 경우 함수의 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다. 이 말을 이해하려면 this에 대해 먼저 배우고 돌아와야 한다. this 클로저에 대해 공부할때 실행컨텍스트 내부를 보면서 실행컨텍스트가 생성되면 this를 바인딩하는 것도 배웠었다. this바인딩이란 this가 어떤 특정 객체에 연결되는 것을 말한다. 근데 이 this가 일반함수, 메소드, 생성자 함수, call, apply 등을 통한 호출 방식에 따라 동적으로 결정된다.(매번 다르다) this는 기본적으로 ..

제가 공부하면서 이해한 내용을 정리했습니다. 잘못된 내용이 있으면 바로 수정하겠습니다. 언제나 가르침 주시면 감사하겠습니다! 이 글의 예제는 Younho Choo님의 블로그를 참고했습니다. 링크는 아래에 있고 좋은 글이 많습니다. 감사합니다. 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다 예?????????????????? 이 글이 끝나면 위 말을 이해하는 것을 목표로 작성해보겠습니다! 1. 실행 컨텍스트 이해 저와 비슷한 비전공 주니어 개발자 분들은 실행컨텍스트부터 이해를 해야 합니다. 실행 컨텍스트를 설명하는 글을 엄청 많이 봤는데요,..

리덕스란 자바스크립트로 만들어진 애플리케이션들의 state를 관리하기 위한 라이브러리입니다. 리액트와 같이 쓸 수 있는 것뿐이지 리액트에 종속된 라이브러리는 아닙니다. 리덕스는 단방향 데이터 흐름을 가지고 있습니다. 그래서? 그걸 왜 알아야 하는지 알아보면서 불변성과 리덕스의 동작원리에 대해 조금 더 알게 된 기록을 남기는 글입니다. 1. MVC, Flux 단방향이 있으면 양방향도 있겠지요. 둘의 차이를 알아보던 중 리액트를 개발한 페이스북의 사례가 나왔습니다. 처음에 페이스북에서 사용하던 MVC패턴입니다. 보시다시피 데이터가 양방향으로 이동할 수 있습니다. 컨트롤러에 의해 모델에 반영된 state를 view에 전달해서 랜더링 합니다. 혹은 사용자와 상호작용으로 view의 데이터에 변화가 생기면 mode..

웹팩이 등장한 이유는 모듈화 라는 키워드와 관련이 있습니다. 모듈화가 왜 필요했는지 이해해보기 위해 잠깐 역사공부를 해보자면 과거에는 자바스크립트의 역할이 단순했습니다. html에 script태그를 넣는 것만으로 충분했습니다. 현대의 웹 애플리케이션에서 자바스크립트의 비중이 커지면서 기능이 복잡해지고 코드도 커졌습니다. 이렇게 커진 자바스크립트 파일을 하나의 파일로 작성하면 가독성 및 유지관리에 문제가 있습니다. 그래서 기능별로 파일을 나누고자 했습니다. 아래 코드처럼 자바스크립트 파일을 기능별로 나눠서 html파일에 script태그로 불러서 사용했다고 생각해볼게요. script태그를 사용해서 외부의 스크립트 파일을 가져와서 사용할 수는 있지만 파일마다 독립적인 스코프를 가지고 있지 않고 모든 스크립트가..

var , let , const의 차이를 알기 전에 변수가 어떻게 선언되고 할당되는지 조금 더 자세히 알아야 할 필요가 있습니다. var myNumber = 23 myNumber란 변수는 23 이다. 라고 이해하기엔 조금 부족합니다. 더 깊이 들어가면 heap, stack과 같은 개념이 등장하는 것 같지만 아직 거기까지 이해하긴 어렵습니다. 이제 조금만 업그레이드 해서 변수란, 값을 저장하기 위해 확보한 메모리 공간이라고 이해하면 더 좋을 것 같습니다. var myNumber = 23을 작성하게 되면 변수명은 사실 23이라는 값이 아니라 메모리의 주소를 기억하고 있습니다. 그리고 변수명을 참조하려고 할 때 매핑된 메모리 주소를 찾고 거기에 저장된 23이란 값을 보여주는 거죠. var myNumber = ..