Just Do IT!

캠프에서 프로젝트 할 때 블로그에 정리해두려고 적어두었던 것들 중 하나를 드디어...쓰게 되었다...ㅋㅋㅋ 최종 프로젝트 닐리리 할 때 적어둔 라이브러리인데, 개인프로젝트나 다른 프로젝트에서도 사용할 것 같아서 이번 기회에 정리하려고 한다! react-beautiful-dnd란? 드래그 앤 드롭 기능을 보다 더 편리하게 구현할 수 있도록 만든 라이브러리이다. https://www.npmjs.com/package/react-beautiful-dnd react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.1, last published: a year ago. Start using r..

내배캠 프로젝트에서 redux를 주로 사용했는데, 최종 프로젝트가 끝난 뒤 튜터님이 flux 패턴에 대해 아냐고 물어봐주셨고 당연히(?) 대답을 못했다. 그래서 그 이후에 찾아보고 리액트와 동일한 패턴이라고 알게 되었는데 적어두질 않으니 계속 까먹고 다시 찾는 불상사가 생겨서...이 기회에 한번 정리해보려고 한다. Flux 패턴이 나온 배경 Flux 패턴은 2008년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 이를 설명하면서 MVC 패턴의 한계를 이야기 했다고 하는데, 우선은 MVC 패턴부터 모르므로 아래에 설명을 남겨본다 MVC 패턴이란? MVC는 Model, View, Controller의 약자이다. Model에 데이터..

state 현재 컴포넌트에서 생성, 변할 수 있는 데이터 state가 생성된 컴포넌트 내에서만 변경이 가능하다 반드시 객체 형태로 생성되거나 null 타입이어야 한다 state 업데이터를 하려면 무조건 setState라는 메소드를 사용해야 한다 특정한 작업이 이루어졌을 때에만 HTML이 업데이트 되도록 만든 규칙 (예제) import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {..

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: '', // 이 모..

react-toastify란? react 프로젝트에서 알람을 만들 수 있도록 해주는 Node.js 패키지 https://github.com/fkhadra/react-toastify GitHub - fkhadra/react-toastify: React notification made easy 🚀 ! React notification made easy 🚀 ! Contribute to fkhadra/react-toastify development by creating an account on GitHub. github.com ↑ 위의 깃허브 리드미를 통해 설치 방법을 알 수 있다. 설치하기 npm i react-toastify 사용 방법 깃허브 리드미에 나와있는 예시 import React from 'reac..