목록개발 공부/React (18)
Just Do IT!
Fullpage(One Page) Scroll 이란? fullpage, fullscreen 등등 다양한 이름이 많은데 fullpage.js 가 가장 유명하다. (이건 라이센스 사용하려면 돈내야함) 스크롤을 하면 페이지 단위로 화면이 스크롤 된다. 대표적으로 배달의 민족 사이트가 있다. https://www.baemin.com/ 대한민국 1등 배달앱, 배달의민족 배고픈데 뭘 먹을지 모르겠고, 하필 냉장고는 텅텅 비어 있고, 그렇다고 대충 먹고 싶지는 않은데, 뻔한 음식 말고 잘 먹고 싶다면? 배달의민족! www.baemin.com 스크롤을 내릴때마다 화면이 바뀌면서 다른 페이지가 나와서 직관적이고 깔끔해보여서 유료가 아닌 무료로 쓰는 방법을 찾다 보니 npm에서 react-fullpage 라는 라이브러리가..
React Icons란? 리액트로 웹페이지를 구현할 때 빠르게 아이콘을 사용하고 싶을 때 이 라이브러리를 사용하면 편하다. 사용방법 역시 간단하다. 공식 사이트 ↓ https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save..
React-slick 란? react에서 carousel를 구현하는 라이브러리로 우리가 자주 보는 슬라이드를 구현할 수 있다. 공식 홈페이지에 보다 많은 정보를 볼 수 있다. https://react-slick.neostack.com/ Neostack The last react carousel you will ever need react-slick.neostack.com 설치하기 라이브러리 역시 터미널에서 npm 혹은 yarn을 통해 설치해줘야 한다. 만약 기본 라이브러리에서 css를 수정하고 싶으면 style 역시 설치해야 한다. // npm $ npm install --save react-slick // yarn $ yarn add react-slick // style $ npm install sli..
React Query를 사용하는 이유? 원래 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-Saga 등 미들웨어를 사용했었다. 클라이언트 쪽의 데이터들을 관리하기에 적합해도 서버 쪽의 데이터들을 관리하기에는 적합하지 않아서 불편한 점이 있엇다. (Redux는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다) 서버 데이터와 클라이언트 데이터 분리에 용이하다. React Query 라이브러리를 사용하면 편리하다. 서버 데이터와 클라이언트 데이터 서버 데이터 여러 사람들이 동시에 공유할 수 있는 데이터 서버라는 공간에서 계속 쓰이는 데이터를 뜻한다. 특정 시점에 클라이언트의 요청에 대해 데이터 베이스에서 유저 정보를 가져와 서버의 상태 값을 만들어낸다 데이터 베이..
프로젝트 배포하기 지난 번 react 프로젝트할 때 배포에 끝내 실패했던 게 자꾸 생각나서 다경님과 어제 배포에 도전했고 성공했다! 도움을 주신 정익님...압도적 감사....진짜 많이 배웠습니다...ㅎㅎ 덕분에 왜 배포에 실패했었는지도 알게 되고, 어떤 식으로 배포해야 했는지 깨달았다. 성공적으로 배포하고 글도 잘 써지는 것까지 확인하고 리드미에도 업데이트했다. 이제서야 프로젝트가 끝인 기분...!! Glitch 에서 json-server 배포하기 1. json-server repository 생성 https://github.com/jesperorb/json-server-heroku#deploy-to-glitch GitHub - jesperorb/json-server-heroku: Deploy json-..
Redux-Toolkit Redux Toolkit 리덕스의 단점 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다 리덕스 툴킷 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것 리덕스의 구조와 패러다임이 모두 똑같다 컴포넌트에서 useSelector를 통해서 사용하는 것은 동일 바뀐 부분 ⇒ 모듈 파일 리덕스 툴킷 설치하기 yarn add react-redux @reduxjs/toolkit Slice API createSlice 라는 API를 통해 만들 수 있다 필수로 name, initialState, reducers 를 작성해야 한다. //createSlice API 뼈대 const counterSlice = createSlice({ name: '', // 이 모..