개발 생산성을 높이는 git hooks와 husky
git hook은 git에서 특정 이벤트가 발생했을 때 자동으로 특정 스크립트를 실행할 수 있도록 해주는 기능이다. git hook은 git init 을 진행하면 생성되는 .git디렉토리 하위의 hooks디렉토리에 저장된다. 실제로 확인해보면 이미 .git/hooks
자바스크립트에서 다중 상속이 가능할까?
커뮤니티를 구경하다 "자바스크립트에서 다중 상속이 가능한가요?" 라는 질문에 대한 글을 보게 되었다.다중 상속이란 어떤 클래스가 두개 이상의 클래스로를 상속받는 것을 말한다.다중상속(Multiple inheritance)이란 객체 지향 프로그래밍의 특징 중 하나이며,
제너레이터 함수
redux-saga를 사용방법을 보다보면 제너레이터 문법이 등장한다.현재는 redux thunk만을 사용하고 있지만 saga로 전환을 고민하고 있기에 제너레이터 문법에 대해 우선 학습하고자 한다.그렇다면 제너레이터 문법이란 제너레이터 함수 라는 특별한 문법으로 생성되는
Webpack
webpack에 대해 정리를 해보려고한다.웹팩이 빌드 툴로서 파일들을 합쳐주고 최적화 해준다는것 정도만 알고 있었고 webpack의 원리에 대해 알아볼 기회가 없었다.이번에 vanilajs로 만든 프로젝트를 번들링해볼 겸 webpack을 정리하고 공부해보려고 한다.정리
Atomic design
react를 공부하면서 자주 보이는 용어중 하나는 바로 Atomic design Parttern이다.Atomic design일종의디자인 시스템을 만드는 하나의 방법론으로 가장 작은 컴포넌트를 원자 단위로 설정하고이를 바탕으로 상위 컴포넌트를 만들어 재사용을 최대화하는
React 성능 최적화하기
React에서 성능 최적화는 가장 중요한 요소 중 하나이다.토이프로젝트를 위해 최적화를 하는 방법을 찾아보다 React Developer Tools에 있는 Profiler라는 기능을 알게되었다, React Developer Tools은 오픈소스 React JavaScr
React Infinite scroll 구현하기 wtih IntersectionObserve
현재 토이프로젝트로 가드너를 위한 사이트를 만들고 있는데, 식물 검색결과를 가져오는 부분에서 무한 스크롤 구현 파트가 필요했다.사실, 처음에는 일반스크롤도 구현된 상황이었다. 식물 검색결과, 여러 기관에서 데이터를 가져오는데, 사진-설명만 다르고 품종이 같은 식물정보가
shouldComponentUpdate 와 React.memo
프로젝트를 최적화하기 위해 여러가지 방법을 찾아보다가 shouldComponentUpdate 라는 메서드를 처음 알게되었다.shouldComponentUpdate란?컴포넌트의 prop이나 state가 변경될때, 변화가 있는지를 확인하고 렌더링 여부를 결정할 수 있다.
React와 Redux (2)
상태를 읽어오기 이제 컴포넌트에서 저장소를 구독하고 데이터를 가져올 차례이다. 사실 redux만 사용한다면 구독을 위해서는 subscribe라는 함수를 사용한다. 예시로 구독자 함수를 만들고 해당 구독자를 연결해보자. 위와 같이 코드를 작성하면 redux는 subs
React와 Redux (1)
react와 redux redux를 도입하자.. 여태까지 개발을 하며 사실 redux를 반드시 써야한다! 라는 경험은 사실 드물었다. 전역으로 상태 관리를 해야하는 경우 대부분 contextAPI로 해결되었기때문이다. 사실 사용하면서도 빈번한 렌더링때문에 걱정이 된 적도 있었으나ㅎㅎ.. 전역 상태 관리 로직을 모두 바꿀만큼의 크리티컬한 케이스를 만난적이 없...
웹과 인증
웹 개발을 하다보면 인증에 관한 이야기를 많이 들을 수 있다. 세션, 토큰 등등...그 종류도 매우 다양하다. 그러나 사실 인증이 없어도 개발은 가능하고 모두 동작한다. 그렇다면 왜 그렇게 인증에 신경을 쓰고 보안을 위한 수 많은 기술들이 등장하는 것일까?인증이 필요한
[알고리즘] 런너기법
런너기법이란 연결리스트를 순회하며 두개의 포인터를 사용하는 기법이다. "부가 포인터"라고도 한다. 연결리스트에서 주로 사용되며 연결리스틑 순회할때 두개의 포인터를 사용하는 방법이다. 하나의 포인터는 빠르게 증가하고 하나의 포인터는 느리게 증가하여 병합지점, 중간지점 ,
call과 apply
메소드를 사용하다보면 가끔 ReferenceError가 뜨며 참조할 수 없다고 나올때가 있다.경험상 90%가 인수를 제대로 넘기지 않았거나 this를 잃어버린 상황이다.객체 내 메소드를 사용할때 this를 제대로 바인딩시키는게 매우 중요하다.메소드 내 this가 제대로
데이터저장-2. localStorage
클라이언트에서 데이터를 저장하는 방법 중 하나로 localStorage와 sessionStorage가 있다.두 객체는 브라우저 내에 데이터(키-값)을 저장할 수 있게 해준다.쿠키와 가장 큰 차이점은 서버가 아닌 브라우저내에만 저장된다는 것이다.localStorage는
데이터 저장 -1. 쿠키,세션
브라우저에 데이터를 저장하는 방법은 여러가지가 있다. 쿠키, 세션, 캐쉬들이 웹에 데이터를 저장하는 방법 중 하나라는 것은 알고 있으나 정확한 차이점, 언제 어떤 때에 무엇을 써야하는지 명확하지가 않았다. 이번기회에 각 기술들의 차이를 명확하게 정리해보려고 한다! 우선 가장 먼저 쿠키와 세션을 알아보자. 쿠키 쿠키는 서버에 의해 응답받은 정보가 브라...
async와 defer 그리고 use strict
html에 javscript를 포함하는 방법은 여러가지가 있다. 사용자가 html 파일 즉, 웹페이지를 로딩하면 브라우저가 코드의 가장 상단부터 한줄씩 코드를 읽고 실행한다. 위와같이 코드를 작성할 경우 html 코드를 파싱하다가 script태그를 만나면 html을