컴퓨터를 공부하고자 마음먹은지 N일차

Reference 🗂공식문서 타입스크립트 데코레이터 네스트나 앵귤러같은 프레임워크를 마주하다보면 심심치않게 볼수있는녀석이 있다. 바로 이 골뱅이가 붙어진 '데코레이터' 라고 불리는 녀석이다. 타입스크립트에만 있는건 아니고, 자바스크립트에도 있는 기능이지만 정식기능이아닌, 표준화 절차를 진행중인 기능이다. 그러나 타입스크립트에선 이 기능을 제공을 하고, 타입스크립트를 기반으로하는 프레임워크에서도 이 기능을 사용하고 있다. 이미 주력 프레임워크를 nest나 앵귤러로 정했다면, 의존성 주입이고 뭐고 이 데코레이터라는 친구의 역할부터 알아야겠다. 우선 데코레이터는 클래스, 속성, 메소드, 매개변수 앞에 붙일 수 있는 함수이다. java의 어노테이션과 생김새가 비슷하다는데 기능은 다르다고 한다. 자..

closure함수? closure를 MDN에서 설명하기를 함수와 함수가 선언된 어휘적 환경의 조합이라고 설명한다. 클로져 함수는 쉽게 말해서 외부환경을 기억하고 참조하는 내부함수라고 대답할수 있겠다. 어떻게 함수는 외부환경을 참조할까? 함수가 실행될때 일어나는일 실행컨텍스트가 만들어진다. 함수가 실행이 된다면 즉시 자기 몸속(?)에 있는 코드들을 실행시킬 환경을 생성한다. 활성객체와 스코프체인 이 만들어진다. 실행 컨텍스트가 생겨 난 후 자신이 받은 인자와 , 지역변수등을 담아놓는 활성객체를 생성한다. 그와 동시에 스코프체인을 만든다. 스코프 체인은 유효범위의 정보들을 연결리스트로 담아놓는다. (외부컨텍스트를 참조할 때 활용함) 그 안에 내부 함수가 실행되면서 내부 함수 또한 스코프체인에 현재 실행컨텍스..

쉽고 편한 class가 있는데 굳이 prototype? javascript는 prototype기반 언어다. 객체지향의 4가지 특성인 캡슐화, 상속, 추상화, 다형성 등을 고려한게 아니다. 하지만 필요성이 생긴 이후 prototype체인이라는 기술로 네가지를 구현하려고 노력하게 됐다. 그러다 es6에서 띠용하고 class가 생겼는데, 그렇다고 javascript가 class기반의 언어가 된것은아니다. class라는 문법은 결국 prototype기반으로 구현된 문법적 편의기능이다. (영어로 syntax sugar라고한다.) 결국 class로 인스턴스의 메소드를 만드는것 또한 함수를 생성자로 활용하는것과 같다. prototype 객체에 대해 더 자세히 알아보자. 함수는 태어날 때 prototype객체를 가지게..

javascript bind call apply 10분만에 이해하기 필자는 call 과 apply 그리고 bind를 이해하는데 꽤나 애먹었다. 왜냐면 세개를 각기 달리 하고 따로따로 이해하려고 했기때문이다. 하지만 셋의 개념을 동시에 비교하며 사용해본다면 무척이나 쉬울것이다. 이 지구에서 셋을 가장 쉽게 설명했다고 자신할 수 있다. bind는 함수를 리턴하고 call과 apply는 함수를 실행한다. 세 친구의 첫번째 인자인 this는 일단 무시하고 얘네가 뭘하는 친구인지 정도는 알자 bind는 함수를 실행못하게 묶는다. 그저 함수를 퉤뱉는다 call과 apply는 함수를 실행한다 왜 반복해서 말하냐면, 사실 이게 절반이기 때문이다. 나머지 절반은 안에들어가는 this에대해 이해하면 끝 사용해보자! 123..

this 소속 5분만에 알아보기 this에 대해 공부를 하던 중, 잘 이해가 가지않아 콘솔창에 여러번 찍어보며 노력해봣는데, 그 결과 this는 아주 미꾸라지같은 녀석이라고 생각했다. 그래서 이 글은 this미꾸라지설(필자가 만듦)에 입각한 글이니, 비유의 함정 에 빠지기 싫은 사람들은 뒤로가기를 누르면 된다..! 비유를 통해 정확한 개념은 못집겠지만, 이 글을 보게된다면 확실하게 써먹을 수 있을것이다. this의 소속을 알아보자 this의 소속은 자기가 속해있는 객체(배열도 됨)이다. this는 잡히면 자신의 현재 소속을 밝힌다. 하지만 쉽게 잡히지않는다. 몇겹을 겹치더라도 똑같다. ㄹㅇ 내가그렸지만 열받는다. this를 잡을 유일한 수단 function 배열에 this를 넣어도 마찬가지고 객체에 th..

Solo week sprint Part2-2 slide and Part2-3 sliding menu 솔로위크를 더 알차게 보내기 위해 코드스테이츠 최강 듀오 지상, 상권 합쳐서 지상권이 자체 스프린트를 진행한다! 깃헙 레포지토리 : https://github.com/sleepybird96/solo-week-sprint-vanillaJS 코공(이상권)블로그 : https://velog.io/@rnrel11 바닐라JS로 슬라이드창 만들기 슬라이드 효과는 자바스크립트로 웹사이트를 역동적으로 표현하기 위해서라면, 필수적으로 알아야 할 효과이다. 다소 역동적인 부분이 있기에 배우기 이전에 겁을 먹었으나, 생각보다 원리는 간단했다. 천천히, 그리고 재밌게 알아보자. 슬라이드창의 구조 위와 같은데, 포인트는 각각의 ..

Solo week sprint Part2-1 modal 솔로위크를 더 알차게 보내기 위해 코드스테이츠 최강 듀오 지상, 상권 합쳐서 지상권이 자체 스프린트를 진행한다! 깃헙 레포지토리 : https://github.com/sleepybird96/solo-week-sprint-vanillaJS 코공(이상권)블로그 : https://velog.io/@rnrel11 모달창이란? 내가 자주 쓰는 사이트인 imgur 사이트를 예로 들어보자. 요런식으로 같은 형제 엘리먼트들보다 앞서 튀어나와, 자기역할을 하는 창이다. 비슷한 역할을 하는 친구가 있다. 바로 팝업창이다. 모달창과 팝업창의 차이 팝업창은 새로운 브라우저창 을 열어서 정보를 제공한다. 반면 모달창은 새로운 창이 아닌 숨어있던 엘리먼트를 보이게하는 방식 ..

solo-week-sprint-vanillaJS Become friends with Javascript and Github for solo-week 코드스테이츠 최강듀오 지상권이 드디어 다시 뭉쳤다! 코공(이상권)블로그주소: https://velog.io/@rnrel11 졸린새(박지상)블로그주소: https://sleepybird.tistory.com rnrel11 (이상권) - velog TIL 26일차 - 침착한 나그네 내 코드에는 세 가지 변화가 있다. 멀리서 바라보면 지저분하고, 가까이서 대해 보면 조잡하며, 코딩을 실행시켜보면 그름과 그름이 분명하다.API 적용날씨 API와 재귀 velog.io 컴퓨터를 공부하고자 마음먹은지 N일차 🧑‍💻 sleepybird.tistory.com 솔로위크중 이틀..