멈추지 않는 프론트엔드 개발자

✍️들어가기 전... 오늘은 react router dom에 대해서 알아보기로 했다. spa에서 가장 중요한 역할을 한다는 생각이 들었고 프로젝트 때도 잘 사용해보고 싶어 정리해 보기로 한다. 그럼 꼬! 💡Routing이란? 사용자가 요청한 url에 따라 해당 url을 보여주는 것이다. 보통 SPA로 어플리케이션을 만들 때 사용한다. 그런데 굳이 왜 router를 사용해야 할까? anchor태그를 사용해도 되는데 굳이 라고 생각할 수도 있을 것 같다. React는 기본적으로 SPA이기 때문에 모든 컴포넌트 변화가 하나의 페이지 안에서 일어난다. 때문에 다른 url로 이동하면 페이지 전체가 바뀌는게 아니라 한 페이지 내부에서 컴포넌트의 변화만 일어날 뿐이다. 그러면 사용자는 원하는 페이지에 북마크를 할 수..

✍️들어가기 전... 전에 MVC패턴에 대해 알아봤는데 이번엔 반대 개념인 flux 패턴에 대해 알아보려고 한다. 이후에 프로젝트를 하면서 상태 관리 라이브러리를 사용하게 될 예정인데 상태관리 라이브러리를 사용하기 전에 flux 패턴에 대한 개념을 알고 시작한다면 좀 더 양질의 코드를 작성할 수 있을 것이라 생각한다! 💡Flux 패턴이 등장한 이유 flux패턴이 등장한 이유는 MVC 패턴의 한계 때문이다.facebook에서도 처음엔 MVC패턴을 사용했다고 한다. 소규모일 땐 나쁘지 않지만 점점 프로젝트의 규모가 커지면 커질 수록 Controller의 역할이 비대해지고 아래의 사진과 같이 하나의 컨드롤러가 수 많은 모델과 뷰를 관리해야 했다. MVC패턴은 데이터의 변경 사항을 신속하게 전파하기 어렵다. 그..

💡React-query는 어떤 라이브러리일까? React Query는 React 애플리케이션에서 데이터를 관리하고 비동기 작업을 처리하기 위한 라이브러리이다. 주로 웹 애플리케이션에서 서버로부터 데이터를 가져오거나 서버에 데이터를 전송하는 등의 비동기 작업을 다룰 때 사용된다. react-query를 사용함으로써 얻을 수 있는 이점은 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 할 수 있다는 점이다. 그에 더해 성능 최적화하고 중복된 코드를 최소화 할 수도 있다. 💡React-query를 사용하는 이유는 무엇일까? 1. Client 데이터와 Server 데이터 간의 분리 프로젝트가 커지고 관리할 데이터가 많이지게되면 client state와 server state 분리의 필요성이 높아진다. c..

✍️들어가기 전... 이번엔 react가 페이지를 구성하는 방식과 어떻게 페이지 이동을 가능하게 하는지에 대해 알아보려 한다. SPA react-router-dom 💡SPA(single page application) SPA는 말 그대로 한개의 page로 구성된 application을 말한다. 이와 상반된 것은 MPA(multi page application)으로 여러 개의 페이지로 이루어진 application을 말한다. SPA를 사용하기 전에는 MPA 방식을 사용하였지만 단점들이 발생하였다. MPA의 단점 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, Javascript)가 매번 로드된다. 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 로드한다. 여러개의 HTM..

✍️시작하기 전... react에서 많이 사용되고 필수적으로 알아야하는 react hooks에 대해 알아보려한다. react hooks란? useState useEffect useRef useMemo 그럼 시작!! 💡react hooks란? 등장 배경 리액트의 컴포넌트는 클래스형과 함수형으로 나뉜다. hooks가 등장하기 전엔 상태값, 생명주기 기능을 사용하기 위해 클래스형 컴포넌트를 사용해야만 했고 그로인한 문제점들이 발생했다. 컴포넌트간 재사용 어려 코드가 복잡함 react hooks가 추가되고 난 후엔 함수형 컴포넌트에서 상태값과 생명주기 기능을 사용할 수 있게 되었다. 그리고 직관적인 API를 제공해주며 컴포넌트간 로직 재사용을 위한 custom hooks기능도 지원한다. 이러한 hooks는 아래..

✍️들어가기 전... 리액트를 공부하면서 state와 props를 가장 많이 사용하는데 정작 사용하면서 활용 할 줄만 알지 정확히 어떤 뜻과 원리로 사용되는지 잘 모르고 사용했다. 당장 나에게 state와 props에 대해 말해보라고 한다면 나는 망설임 없이 말 할 수 있을까? No. 그럼 적어도 사용할거라면 말로 설명 정도는 할 수 있어야 하지 않을까? 하는 생각으로 정리해보려고 한다. 💡프론트엔드에서의 상태 관리 state는 상태다. 여기서 나는 상태란 값이 변화되는 데이터라고 이해했다. 그럼 프론트엔드에서의 상태 관리란 무엇을 말할는 걸까? 프런트엔드 상태 관리는 웹, 모바일 또는 기타 사용자 인터페이스(UI) 애플리케이션의 프런트엔드 계층 내에서 데이터의 저장, 구성, 검색 및 조작을 처리하는 방..

오늘은 1차로 진행한 프로젝트와 간단한 todolist를 vanilla JS로 만들면서 느꼈던 점이나 불편했던 점, 궁극적으로 왜 많은 사람들이 react를 사용하는지에 대한 내용을 정리해 볼까한다. 💡vanilla JS의 한계 vanilla JS로 프로젝트를 진행하면서 불편하다고 생각이 들었던 점을 정리해 보자면 이렇다. 프로젝트 규모가 커질수록 불러올 선택자들이 많다보니 코드가 지저분해진다. 실제로 프로젝트를 진행하면서 규모가 커질 수록 불러올 선택자들이 많았는데 기능을 추가할 때마다 선택자들이 늘어나서 알아보는데 쉽지 않았다. li 같이 반복되는 선택자 같은 경우는 querySelectorAll로 불러와 반복하여 사용했음에도 도 사용할 선택자가 끝이 없고 변수명을 뭘로 해야할지 고민도 많이 했던 것..