React5 [FE] React Context API와 LocalStorage로 간단 상태관리 모듈 만들기 1. 개요지금까지 리액트로 여러 프로젝트를 했던 경험을 돌아봤을 때, Context API만으로도 충분히 해결할 수 있는 상황에서도 종종 Zustand나 Redux를 사용해야겠다는 생각에 치우쳤던 적이 많았습니다. 이러한 접근은 종종 '배보다 배꼽이 더 커지는' 상황을 초래했습니다. 즉, 핵심 기능 구현보다 상태 관리 라이브러리 사용법 익히는 데 더 많은 시간을 투자하게 되는 경우가 발생했습니다.이러한 경험을 바탕으로, 부스트캠프 후반기 미션에서는 React가 제공하는 기본 도구를 최대한 활용하고자 했습니다. 특히 Context API를 이용한 전역 상태 관리와 함께, LocalStorage를 활용하여 데이터 지속성까지 확보하고자 했습니다. 이 아이디어는 이전에 다른 개발자분이 localStorage를 .. 2024. 10. 9. [React] useRef 이해하기 useRef가 뭘까? 자바스크립트를 사용하게 되면, 특정 DOM을 선택해줘야 되는 경우가 있습니다. 그래서 자바스크립트에서는 getElementById나 querySelector를 사용해서 DOM을 직접 선택해줍니다. 리액트에서도 이와 같이 DOM을 선택하야 되는 경우가 있습니다. 외부 라이브러리를 사용하거나, 특정 엘리먼트의 크기를 가져오거나, 스크롤바의 위치를 가져와야 되는 경우가 있습니다. 이럴 때 리액트에서는 ref 라는 친구를 사용해주게 됩니다. ref 라는 친구는 referece의 줄임말이고 이름만 참고해서 보면 DOM 요소에 이름표를 붙여서 참고하겠다라는 의미인 것 같습니다. Ref는 일반객체이고 console.log로 찍어보게 되면 {current:null}이라는 객체가 나오고 이 객체를 .. 2024. 2. 2. [우아콘] 프론트엔드 상태관리 실전편을 보고 나서 상태관리 → 상태와 관리가 합쳐진 말 State: A Component’s Memory → 컴포넌트의 메모리가 상태이다 최근 리액트 개발에서 컴포넌트가 중심에 있음. → 어떤 팝업을 화면에 띄울지 말지, 주문/배달의 진행은 어떠한지 상태는 공통으로 그리고 단일로도 사용되어질 수 있는 개념임. 상태관리가 등장한지도 얼마 안됐는데 한계점도 있음 상태관리 방법의 변화 Redux로 상태관리를 풀고 있었고 → mobX등으로 해결을 해나가려고 했음 여전히 코드가 너무 많다는 문제가 있었지만 해결할 만한 방법 X → Post 상태관리, 원격 상태관리가 나옴 리덕스, mobx에는 스토어가 큰 것도 있지만 상태관리보다 API 호출 코드가 더 많다는 문제가 있음. Mobx + React-query 를 쓰니 스토어는 단순해.. 2024. 1. 30. [React] GDSC 2차 프로젝트 CI/CD 1차 프로젝트 때 같은 팀 프론트 분이 하셨던 github 레포지토리 배포(?)를 이번 프로젝트 하면서 적용해보고 싶어져서 새벽에 프로젝트 시작하면서 하는 김에 같이 해보았다. 헛짓을 좀 많이 해서 오래 걸리긴 했지만 정상적으로 일단 돌아가는 걸 확인해서 했는 걸 정리해보려 한다. 지난 글에서 했던 프로젝트 세팅에 이어서 작업을 해주었는데, github 레포지토리에 아직 연결을 안해둬서 연결 작업 부터 해주었다. echo "# test" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin https://github.com/krokerdile/xxx.git git.. 2023. 7. 21. [React] GDSC 2차 프로젝트 - 개발환경 세팅 활동 중에 있는 GDSC 2차 프로젝트를 진행 하면서 React + TypeScript + Vite로 진행 하는 과정을 대충이나마 정리해보려고 한다. vite를 통해서 리액트 프로젝트를 시작하는 방법이 여러 개가 있겠지만 이번에는 "yarn create vite"로 시작을 해보았다. 이전에는 아마 typescript를 지정해서 만들어주는 식으로 해주는 걸 주로 사용했었던 거 같은데, 보통은 이렇게 생성을 하는 것 같다. 기본 package.json을 바탕으로 라이브러리를 설치할 수 있도록 "yarn install"을 해주면 일단 프로젝트 생성은 끝이다. 짤막하게 하면서 계속 글을 올려볼까 하는데 언제 올릴지는.. 😅 2023. 7. 21. 이전 1 다음
