항해 플러스 프론트엔드 4기에 참여하며, 많은 고민 끝에 항해 플러스 프론트엔드 4기에 참여하게 되었다. 이 프로그램은 약 10주간 진행되며, 주니어 개발자에게 실질적인 성장을 도와주는 교육 과정이다. 사실 몇 달 동안 신청 여부를 두고 많은 망설임이 있었다. 이제 신입을 벗어난 연차로서 다시 교육을 받는 것이 맞을까? 오히려 더 부족해 보이지 않...

이번 토이 프로젝트를 진행하며 zustand를 처음 사용해보고 있는 중이다. zustand를 컴포넌트에서 사용하기 위해서는 action과 state를 불러와야하는데, state를 전체로 반환하면 사용하지 않는 상태에 의해서도 렌더링이 발생된다. //bad case const state = useCountStore(); 따라서 일반적으로 권장되는...

git hook이란 git hook은 git에서 특정 이벤트가 발생했을 때 자동으로 특정 스크립트를 실행할 수 있도록 해주는 기능이다. git hook은 git init 을 진행하면 생성되는 .git디렉토리 하위의 hooks디렉토리에 저장된다. 실제로 확인해보면 이미 .git/hooks 디렉토리에는 샘플훅들이 등록되어있다. git hook의 종류...

커뮤니티를 구경하다 “자바스크립트에서 다중 상속이 가능한가?”라는 질문에 대한 글을 보게 되었다. 사실 “예”, “아니요”로도 답할 수 있는 간단한 질문이지만 자바스크립트를 사용하면서도 클래스를 자주 사용하지 않았기 때문에 해당 질문이 낯설게 느껴졌다. 프로토타입을 비롯해 자바스크립트의 기본 개념을 많이 잊어버렸다는 반성의 시간을 가지며 다시 하나...

# webpack에 대해 정리를 해보려고한다. 웹팩이 빌드 툴로서 파일들을 합쳐주고 최적화 해준다는것 정도만 알고 있었고 webpack의 원리에 대해 알아볼 기회가 없었다. 이번에 vanilajs로 만든 프로젝트를 번들링해볼 겸 webpack을 정리하고 공부해보려고 한다. 정리는 여기를 참고하여서 진행하였다. 웹팩을 왜 배워야할까? 웹팩에 대해 ...

성능 측정하기 React에서 성능 최적화는 가장 중요한 요소 중 하나이다. 토이프로젝트를 위해 최적화를 하는 방법을 찾아보다 React Developer Tools에 있는 Profiler라는 기능을 알게되었다, React Developer Tools with Profiler React Developer Tools은 오픈소스 React JavaScr...

redux를 도입하자.. 여태까지 개발을 하며 사실 redux를 반드시 써야한다! 라는 경험은 사실 드물었다. 전역으로 상태 관리를 해야하는 경우 대부분 contextAPI로 해결되었기때문이다. 사실 사용하면서도 빈번한 렌더링때문에 걱정이 된 적도 있었으나ㅎㅎ.. 전역 상태 관리 로직을 모두 바꿀만큼의 크리티컬한 케이스를 만난적이 없기때문에 잘 버텨...

웹 개발을 하다보면 인증에 관한 이야기를 많이 들을 수 있다. 세션, 토큰 등등… 그 종류도 매우 다양하다. 그러나 사실 인증이 없어도 개발은 가능하고 모두 동작한다. 그렇다면 왜 그렇게 인증에 신경을 쓰고 보안을 위한 수 많은 기술들이 등장하는 것일까? 인증이 필요한 이유? 인증이 필요한 이유는 바로 보호해야할 정보가 있기 때문이다. 예를들어 사이...

브라우저에 데이터를 저장하는 방법은 여러가지가 있다. 쿠키, 세션, 캐쉬들이 웹에 데이터를 저장하는 방법 중 하나라는 것은 알고 있으나 정확한 차이점, 언제 어떤 때에 무엇을 써야하는지 명확하지가 않았다. 이번기회에 각 기술들의 차이를 명확하게 정리해보려고 한다! 우선 가장 먼저 쿠키와 세션을 알아보자. 쿠키 쿠키는 서버에 의해 응답받은 정보가...