큰 꿈은 파편이 크다!!⚡️

⚠️ 이 글의 모든 예시는 '웹에서 로그인된 상태를 관리'하는 것에 초점을 맞추고 있다. 실제로 쿠키와 세션은 각자의 기능을 살려 로그인 외에도 다양한 상황에 응용될 수 있다. 간단한 탄생 비화 ...태초에 Http가 있었다. Http는 HTML과 같은 리소스를 교환할 수 있도록 설계된 프로토콜(규약)이며, 다양한 이점들 덕분에 지금까지도 주소창에 http://... 로 남아 활발하게 사용되고 있다. 쿠키와 세션은 그중에서도, http의 Stateless한 특성 때문에 만들어졌다. Stateless란, "상태"가 없음을 의미한다. 상태가 있고 없음이란 무엇일까? 아래 대화를 읽어보자! 🟢 Stateful 대화 A: 난 김xx 이야. B: 넌 김xx이구나. A: 난 10살이야. B: 오호 넌 10살인 김..

Building your own Hooks lets you extract component logic into reusable functions. useState, useEffect, useMemo 등의 훅Hook은 리액트 16.8버전부터 추가되어 클래스를 작성하지 않고도 상태State관리를 편하게 할 수 있는 혁신적인 기능이었다. 그리고 재미있게도 나만의 커스텀 훅을 만드는 기능도 제공된다. 리액트 팀에서 훅을 만드는 원리대로 내 것을 만들 수 있다. 훅 또한 컴포넌트 등과 마찬가지로 함수이기 때문에 자바스크립트에서 함수를 분리할 때와 같이 분리하고, 컴포넌트에서 사용하고 싶은 값을 반환한다. 많이 사용되는 커스텀 예제들을 통해 어떤 식으로 사용할 수 있는지 알아보고, 익숙해져 보자! 🧐 고려할 것 ·..

Intro 🍠🍞🥕 애니메이션이 서비스를 더 재미있게 만들어주고, 더 사용하고 싶어지게 만들어준다고 생각되는 요즘, 스터디를 통해 framer-motion을 학습해보게 되었다. Framer는 interactive 디자인을 도와주는 툴인데, 그중에서 Motion은 리액트를 위한 production-ready(실제 제품 단계의) motion library를 표방하며, 오픈 소스로 공개되어 있다. 특징으로 내세우는 것 중 하나는 effortless layout transitions and gestures, 즉 transition과 gesture를 고려할 때 노력이 필요없다..!는 점이다. 사실 나는 여기까지 정리하고서도 이해가 어려웠기에 공식문서의 예제를 사용해 사용 전/후 비교용 switch 컴포넌트를 만들어..

React를 사용한다면 아주 익숙할 React Router가 2020년 12월에 v6을 릴리스했다. 메이저 버전넘버가 바뀐 만큼 breaking-changes가 있었고, 그동안 무지성으로 이 패키지를 사용했고 공식문서에 소홀했던 것을 반성하며 v5에서 v6으로 넘어가면서 알게 된 몇가지 내용을 정리해보려 한다. 🐓 react-router-dom을 뭣모르고 사용했더니 일어난 일 react-router-dom vs react-router-native $ npm install react-router-dom # or, for a React Native app $ npm install react-router-native 웹 개발을 위해 react를 사용한다면 react-router-dom을 설치한다. 위 코드에서..

setState했는데 값이 안바뀐다? export default function App() { const [count, setCount] = useState(0); const onAdd = () => { setCount(count + 1); console.log(count); }; return ( {count} +1 ); } 위 코드를 실행해보면, 화면에 나타나는 count는 정상적으로 1이지만, 콘솔 창에는 0이 출력된다. 단순히 화면을 리렌더링 하는데에는 문제가 없지만 아래와 같이 setState 이후 상태값을 바로 다른 로직에 사용하면 원하지 않는 결과를 맛보게 된다. export default function App() { const [count, setCount] = useState(0); co..