react14 Swiper Navigator(화살표) 바깥으로 빼기 프로젝트 KKu-Woon을 진행하며 유저 리스트를 carousel 형식으로 구현해야 상황이 있었습니다. 프로젝트 기간이 여유롭지 않고, 캐러셀은 라이브러리로 잘 만들어져 있기 때문에 오픈 소스를 사용하여 구현하기로 결정하였습니다. 고려한 라이브러리는 "react-slick" 과 "swiper" 두가지 라이브러리를 고려하였습니다. 그 중 swipe를 사용하여 해당 ui를 구현하였고 구현하면서 발생한 에러와 해결방법을 공유합니다. ✔ Swiper를 사용한 이유? 예전에 강좌를 들으면서 react-slick을 한번 사용해 보았고 새로운 라이브러리 사용 방법을 공부하고 싶었음 react-slick 경우 @types 파일이 있었지만 js 기반으로 구현되어 있고 swiper는 typescript로 구현 되어있음 s.. 2022. 7. 21. Numble 챌린지 회고록 넘블에서 진행한 연계 챌린지에 참여하였습니다! ✔ 프로젝트 소개 저희 팀에서는 동물에 관한 짧은 영상을 올리는 숏폼을 주제로 자신의 반려동물을 자랑하고 싶은사람! 혹은 반려동물을 키우고 싶지만 여건이 되지않은 사람들을 위해 영상을 직접 올리거나 모아 둘 수 있는 서비스를 기획하였습니다. ✔ 역할 담당 저는 이번 프로젝트에서 로그인 / 회원 가입 / 마이 페이지 / 관심 영상 조회 등 회원 계정과 관련된 부분을 담당하여 개발 하였습니다. 제가 구현한 api 명세는 다음과 같습니다. ✔ 사용한 라이브러리 와 이유 프레임워크 : React, Next.js style : postCSS 상태관리(server) : react-query 상태관리(client) : redux-toolkit SSR까지 구현이 목표였기에.. 2022. 5. 16. [React 상태관리] react-query 입문 하기 https://www.youtube.com/watch?v=MArE6Hy371c&t=2195s react-query를 공부하기 위해 해당 영상을 보고 정리, 요약한 게시글 입니다. ✏️ FE 상태관리에 대해 redux, mobx, recoil 같은 라이브러리를 떠올릴 수 있음 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음 즉, 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터 => 개발자 입장에서는 관리해야하는 데이터들 모던 웹프론트엔드 개발에서 UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 FE에서 수행하는 역할이 늘어남 -> 관리하는 상태가 많아짐 상태관리는? 시간의 흐름에 따라 변화하는 상태를 관리하는 것, React에선 단방향 바인딩이므로 Pr.. 2022. 4. 13. react 무한스크롤 구현하기(react-intersection-observer, createAsyncThunk 사용) 리액트를 사용해 infinite scroll을 구현해 보았습니다. 그냥 구현하면 재미없으니까 얼마전에 공부한 Redux-toolkit을 활용해 비동기 요청을 보내 tmdb(https://www.themoviedb.org/?language=ko)에서 제공하는 openAPI를 사용해 영화 정보를 20개씩 불러오는 프로젝트를 만들어 보았습니다! ✔ 전체코드 https://github.com/HomieKim/React_PlayGround/tree/main/simple-infinite-scroll GitHub - HomieKim/React_PlayGround: 리액트 Toy Project 리액트 Toy Project. Contribute to HomieKim/React_PlayGround development b.. 2022. 4. 7. [React 상태 관리] useReducer 사용해 리팩토링 하기 (+ custom hook) 상태 관리 라이브러리 없이 다른 색깔 찾기 게임을 구현 한적 있습니다! numble에서 간단한 피드백을 주셨고 리액트 상태 관리에 대해 공부하던 중 당시 읽고 넘어 가기만 했던 프로젝트를 개선해 보았습니다. 기존 코드는 다음 글에서 확인할 수 있습니다. https://hoime.tistory.com/38?category=534509 [Numble] 다른 색깔 찾기 게임 넘블에서 진행한 다른 색깔 찾기 게임 챌린지 참여! https://www.numble.it/45cee9d3-49ad-4f67-9d2a-14607c2eeba7 [React] 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임 제작 시간은 금! 챌린지를.. hoime.tistory.com ✔ 개선 사항 1. 불필요한 상태가 정의 되어있습.. 2022. 3. 30. [React 상태관리]리덕스 이해하기 + todoList 만들기 ✔ 리덕스란? 리액트를 사용하다 보면 상태 관리에 대한 고민을 하게 됩니다. 기본적인 react-app의 경우 컴포넌트 내부에서 상태를 정의 하고 setState() 함수를 사용하여 불변성을 유지하며 상태를 업데이트 합니다. 이때, 다른 컴포넌트에서 특정 state를 사용하거나 update하고 싶다면 어떻게 해야할까요. 저는 보통 하위 컴포넌트로 props를 전달하여 사용하거나 상위 컴포넌트에서 필요한 경우? 는 상위 컴포넌트에서 상태를 정의하여 props로 전달해 줍니다. (기존 react-app은 단방향의 데이터 흐름을 가지고 있기 때문) 이러한 방식의 경우 규모가 커지면 커질 수록 상태 관리가 복잡해 지며 상태를 전달하는 과정에서 불필요한 props를 전달하게 되는 경우도 발생하게 됩니다. 즉, 자.. 2022. 3. 27. 이전 1 2 3 다음
