자바스크립트 프로토타입 배경부터 실제 사용까지
자바스크립트는 프로토타입 기반의 객체지향 언어다. 자바와는 다르게 클래스 기반이 아니다. 그런데 es6에서 클래스가 나오고 프로토타입의 동작원리를 잘 모르는 사람이 많아진 것 같다.(내 얘긴가??) 자바스크립트를 조금 깊게 물어보면 프로토타입과 실행 컨텍스트는 꼭 나오는 면접 질문중에 하나이기도 하다. 이 글을 보고 어디가서 '저 프로토타입 설명할 수 있어요' 라고 말하면 정말 좋겠다. 프로토타입이 뭔데?? 프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. - 위키백과 이게 무슨말이지?? 어려운 말은 아니지만 프로토타입을 대강 알고있는 사람들도 위의 설명을 보고 프로토타입을 떠올리기는 쉽지 않다. 코딩에 대한 얘기는 아니지만 어느정도는 배경지식을 알 필요가 있다. 정말..
일단 가장 간단한 방법은 a태그에 해시태그를 사용하는 방법이다. 이 방법의 단점은 같은 태그를 선택했을 때 화면이 이동하지 않는다. 그럴때에는 scrollIntoView를 사용하자. 사용법은 어렵지 않다. 문서를 한번만 보면된다. https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. developer.mozilla.org 간단한 예시를 보겠다. behavior smooth를 하면 부드럽게 움직인다..
배경 사실 예전부터 무한 스크롤에 관심이 있었다. 프로젝트를 만들다보면 몇가지 갈림길에 놓이는 경우가 많다. 내가 경험한 바로는 인증에 세션, 토큰(둘다 사용하기도 한다), 스타일링에 styled-components, scss, css module, 게시판 구현방식에 무한 스크롤, 페이징 등이 있다. 나머지는 다 해봤는데 무한 스크롤은 한번도 해본적이 없어서 꼭 해보고 싶었다. 무작정 생각해보기 서버 일단 어떻게 할까 생각을 해봤다. 서버부터 생각을 해보자. 정렬방법에는 여러가지가 있지만 일단은 가장 기본적인 pk desc로 생각을 해보자. 처음에 위에서부터 데이터를 가져오고 그다음에는 id를 받아서 where문에 id보다 작은값을 적용하면 끝날것같다. 그런데 이 방법으로하면 인기순같은 정렬을 해결할 수..
옵저버패턴이란 컴포넌트와 라우터까지 완성을 했다. 이제 바닐라 자바스크립트로 프로젝트를 시작할 수 있을까?? 가능은 하다. 그런데 유저 닉네임 값을 여러곳에서 이용한다면 계속해서 서버와 통신을 해야할까?? 너무 비효율적이다. 그렇지 않다면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줘야 한다. depth가 작으면 문제가 없지만 재사용성을 고려하면서 만든 컴포넌트는 단위가 작고 몇단계씩 데이터를 넘겨야한다. 그렇게되면 의존성도 높아진다. 모듈간에 의존성이 높은 것은 좋은 현상이 아니다. 그래서 웹 프론트엔드에서는 옵저버패턴을 사용한다. 리덕스도 이 패턴을 사용한다. 옵저버패턴에는 구독(subscribe)과 발행(publish) 개념이 존재한다. 어떤일이 발생했을 때 그 일을 알려달라고 하는 것이 구독이..
컴포넌트 글을 보지 않았다면 먼저 봐주세요~~ https://ms3864.tistory.com/380 개요 저번에 만든 컴포넌트와 연동할 라우터를 만들어야 한다. 참고로 리액트 라우터와 유사하게(애초에 리액트 라우터는 context를 사용하기 때문에 다르게 만들 수 밖에 없다.) 만들 것이다. 구현할 것 무엇을 구현해야 할 지 생각해보자. 컴포넌트의 html을 string으로 구현했기 때문에 일단 리액트처럼 Link를 사용할 수는 없다. 그러면 그냥 a태그에 이벤트를 거는 방법도 있을것이고 새로운 태그에 이벤트를 걸어도 괜찮다. 그리고 /로 경로를 나눠서 상태로 가지고 있으면 좋겠다. 왜냐하면 params가 있는경우가 있기 때문이다. 그리고 리액트의 훅같은 함수가 있으면 더 편할것같다. 대충 pushst..
바닐라 자바스크립트로 프로젝트 만들기(컴포넌트)
새롭게 글을 썼습니다. diff알고리즘을 적용해서 https://ms3864.tistory.com/409 바닐라자바스크립트(ts)에서 컴포넌트 만들기1(diff 알고리즘) 배경 사실 이전에도 글을 올렸었다. 그런데 많이 부족한 내용이였고 버그도 많이 있었다. 이번에 기회가 있어서 새롭게 간단한 프로젝트를 만들었는데 저번보다 훨씬 괜찮게 만들었다고 생각해 ms3864.tistory.com 배경 우아한테크캠프에서 바닐라 자바스크립트로 프로젝트를 했었다. 그때 아쉬웠던 부분들을 생각하며 조금 더 보완해보려고 한다. 그리고 황준일님의 블로그를 참고했다. 개요 나는 리액트, 리덕스를 사용한 경험이 있다. 이를 바탕으로 생각해보자. 리액트부터 생각을 해보면 리액트는 컴포넌트를 기반으로 동작하며 jsx를 바벨을 통해..