후니후니

✏️ Closure에 대해서 조금 더 알아보자 예전에 자바스크립트 클로저에 대해 간단하게 글을 올린적이 있다. 오늘은 클로저에 대한 예시 코드를 조금 보며 정리를 하려고 한다. 사람마다 다르겠지만 클로저의 정의를 내린다면 나는 이렇게 말할 것 같다. "선언될 때의 환경을 기억하고, 실행의 종료된 함수 안에 변수에 접근할 수 있는 것" const getIncrementCountFunc = () => { let count = 0; return () => { return ++count } } const incrementCount = getIncrementCountFunc() incrementCount() // 1 incrementCount() // 2 incrementCount() // 3 getIncreme..

JS에서 꼭 알아야 하는 메서드고, 면접 질문에서도 많이 나올 수 있는 bind, call, apply에 대해서 알아보자. 처음부터 정리를 하고 들어가자면, bind, call, apply 모두 this를 재 지정한다. bind, call, apply 모두 메서드이기 때문에 this가 참고되는데, 이를 변경해서 사용한다면 유용하게 사용할 수 있기 때문에 사용되는 메소드라 생각된다. - bind const arrayLike = { 0:1, 1:2, 2:3, length: 3 }; arrayLike.slice(1); // 에러 발생, 유사 배열이므로 slice를 가지고 있지 않음. // 그렇지만 유사 배열에서 slice 메서드를 사용하고 싶음. const slice = Array.prototype.slice..

최신 문법인 Optional chaining과 Nullish coalescing을 알아보자! 사실 잘 사용하진 않는데, 알아두면 유용한 문법인 것 같다. Optional chaining부터 알아보자. const test = { a: { b: 'Optional chaining' } } 위와 같은 객체가 있다고 하자. 해당 객체가 지금은 값이 있지만, 기본 값이 빈 객체이고, 서버에서 응답이 내려와 객체의 값을 채우기 전에 아래와 같이 test.a.b로 접근한다면 에러가 발생할 것이다. test는 빈 객체고, 빈 객체에서 a를 호출하는 건 undefined가 나오겠지만, undefined에서 없는 b를 호출해버리니 'Cannot read property 'c' of undefined' 에러가 발생하는 것이다..

✏️ Closure란 무엇일까? 많이 헷갈리는 개념이다. 클로저.. 글로만 보면 정확히 어떤 개념인지 이해가 되지 않는다. 역시 코딩은 직접 해봐야해... 그래서 여러 글들을 보며, 직접 테스트 해보면서 겪은 점을 글로 써보려고 한다. 이해를 쉽게 하기 위해서 생성자 함수를 먼저 만들어보자. function MyName(name) { this._name = name; } 코보자 (코딩초보자) 였을 때는 위 함수가 뭐하는 함수인지도 몰랐다. 사실 몰라도 될 줄 알았다. 근데 공부하다 보니까 이런 개념이 궁금해지기 시작하면서...찾아보게 되었다. MyName.prototype.me = function () { console.log("my name is", this._name); }; 정의한 함수의 프로토타입..

✏️ Hoisting이란 무엇일까? 흘러흘러, 코딩의 코자도 모르던 시절, 국비지원 학원을 통해 취업을 했지만, 속성으로 배우고 취업해서 그런지 자바스크립트의 기본 원리에 대해서 잘 몰랐었다. 물론 시간이 지나면서 어느정도 알게 되었지만, 쓴이처럼 잘 모르시는 분들이 계실 수도 있을까봐 포스팅해본다. (이미 많은 포스팅이 있는 건 안 비밀) ✏️변수의 호이스팅에 대해 알아보자. 우선 코드를 하나 보자. var a = 1; console.log(a); 위의 콘솔은 어떤 결과를 리턴해줄까? 답은 당연히 1이다. 그렇다면 이번엔 어떨까. console.log(a); var a = 1; 변수를 선언하기 전에 변수를 호출해버렸다. 결과는 undefined... undefined 다른 코드도 보자. console...

✏️SVG를 이용한 애니메이션 효과를 알아보자 보통, 로딩바 같은 경우 동그라미가 계속 돌아가는 형태를 많이 쓰기 때문에 쉽게 볼 수 있다. HTML,CSS로만 저걸 구현할 수 있나? 생각을 하다, SVG로 구현을 할 수 있다는 것을 알게 되었다. 우선 HTML을 보자. svg 태그 안에 circle 태그를 생성하고, cx 50%, cy 50%, r 25로 설정해준다. cx, cy는 중심점이고, r은 반지름으로 25일 경우 50 크기인 circle이 생긴다. 위의 html이라면, 위처럼 동그란 검은 공이 하나 생긴다. 로딩 애니메이션이라면, 가운데는 비어야 하고, 테두리만 있어야 하는데, 이는 CSS로 설정해줄 수 있다. fill: transparent; stroke: blue; stroke-width:..

✏️브라우저가 렌더링되는 과정을 알아보자. 브라우저는 어떻게 동작할까? 주소창에 주소를 치면 주소에 따른 웹사이트가 표시된다. 관심갖고 보지 않았던 부분이라 그 동안은 그냥 어떻게 잘 되나보다~ 라고 생각했는데, 요즘 그 과정이 궁금해져서 한번 정보를 검색해보았다. 우선 사용자가 주소를 입력하면, 해당 URI를 가진 서버에 자원을 요청하고, 받아온 자원 (HTML,CSS등) 을 해석하여 윈도우에 렌더링해주게된다. HTML 문서를 받아서 Document Object Model, DOM Tree를 만들고, CSS는 CSS Object Model로 만들어진다. 그렇게 만들어진 두 개의 Object Model은 결합되어 Render Tree를 생성한다. Render Tree의 노드들이 화면에 어디에 위치할지 계..

✏️Gulp.js를 통해 이미지를 압축해보자. 평소에는 S3 서버에서 이미지 url을 가져와 노출해줬는데, Front assets에 이미지를 저장하고 사용해야 할 프로젝트가 생겨서 관련 기술을 조사해보다 Gulp.js를 찾게됐다. 여러모로 정보를 찾아보니, imagemin이라는 플러그인을 통해서 이미지를 압축할 수 있는 방법이 있다는 걸 알았다. 우선, Gulp.js 를 설치해야 한다. npm install gulp -g npm install gulp --save-dev npm i gulp-imagemin --save-dev -g를 통해 전역으로 설정해야 gulp 라는 명령어를 사용할 수 있다. 설치 후 root 디렉토리에 gulpfile.js 라는 파일을 만들고 아래와 같이 작성한다. const gul..