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

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

그래프와 탐색 자료구조를 학습하면서 트리를 탐색할 때에는 비교적으로, 계층적 구조를 가지기 때문에(부모가 있음) 재귀를 통해 탐색이 쉬웠다. 그러나, 그래프는 서로의 관계를 나타내는 간선만 있을 뿐더러, 계층구조 또한 존재하지 않는다. 그러나 의외로 방문한 곳을 표시 하는것만 빼면, 탐색하는 로직은 트리와 크게 다르지않다. 우선 예쁘고 실용적인 그래프를 만들어 보자. 예쁜그래프란? 나는 그래프의 제일 적절한 활용예를 sns친구목록이라 생각한다. 숫자놀이로 구현하는것은 예쁜그래프가 아니다! 부트캠프에서 좋은 뼈대를 내줬지만, 사람이름으로 관계도를 형성하는 그래프를 그리고 싶다. 내가 만들 그래프에는 constructor는 필요하지않다. 우선 constructor는 해당 class의 기본값을 설정한다. 하지..

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 Part1 github 솔로위크를 더 알차게 보내기 위해 코드스테이츠 최강 듀오 지상, 상권 합쳐서 지상권이 자체 스프린트를 진행한다! 깃헙 레포지토리 : https://github.com/sleepybird96/solo-week-sprint-vanillaJS 코공(이상권)블로그 : https://velog.io/@rnrel11 github으로 협업하기 코드스테이츠는 코플릿도 활용하지만, 깃과 깃헙을 활용해 과제를 제출한다. 깃과 관련해 놀라운 기능을 발견했으니 바로 브랜치라는 개념이다. 상권햄과 함께 알아보자. 로컬 레포지토리 만들기 우선 gittest라는 폴더에 git init 을 해서 git이 관리해줄 디렉토리를 만든다. git init 커밋할 파일 생성 첫 레포 국룰..

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 솔로위크중 이틀..