후니후니

✏️ 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..

✏️ 1.HTTP란 무엇일까? 페이지 URL을 보면, http, 혹은 https로 시작하는 것을 볼 수 있다. 무슨 차이가 있을까? 프론트엔드 개발자라면 알아야 할 지식이라 생각이 돼서, 한번 알아보게 되었다! HTTP가 어떤 용어인지부터 살펴보자면, HTTP는 하이퍼 텍스트 전송 프로토콜의(Hypertext Transfer Protocol)이다. 장황하다. 가슴에 비수가 날아와 꽂힌다.(죄송합니다) Hypertext부터 어떤 뜻인지 알아보자. Hyper는 뛰어넘다, 초월하다 등의 뜻을 가지고 있다. text는 문서라는 뜻으로 생각할 수 있을 것 같다. 초월한, 뛰어넘는 문서? 유연하게 생각해보면 문서를 뛰어넘다. 다른 문서로 간다! 다른 문서로 순식간에 접근을 한다! 라는 뜻으로 생각해볼 수 있지 않을..

항상 인강으로만 공부하다가, 회사 동료가 자바스크립트 이론 책을 하나 빌려주어 책을 보게됐다. 책 제목은 '코어 자바스크립트' 로, 이론적인 부분에서 많이 도움이 된다고 하여 시작했다. 첫 시작은 자바스크립트의 데이터 타입에 관련한 내용이었다. 자바스크립트의 데이터 타입은 기본형, 참조형이 있는데 둘의 차이가 무엇인지의 내용이었다. 기본형은 불변형인데, 불변이라는 것은 변하지 않는다는 것인데 a라는 변수에는 여러 값들을 넣을 수 있다. var a = 'abc' 를 선언했다가, a = 'abcdef' 를 다시 선언하여 값을 바꿀 수 있는데 왜 불변이라고 할까? 먼저, a라는 값을 선언하면 메모리에서 공간을 확보한다. 그리고 해당 공간의 이름을 a라고 저장한다. var a = 'abc' 로 값을 넣을 경우 ..