Reactjs 썸네일형 리스트형 React recoil-persist 사용하기 리액트를 사용하면서 전역 상태 관리 라이브러리 중 하나인 recoil에도 사이트를 새로고침해도 전역 값을 유지시킬 수 있는 방법이 있다. recoil-persist 라는 패키지인데 사용법 또한 매우 간단하다. 이 recoil-persist 가 값을 유지하는 원리는 간단한데 로컬 스토리지 혹은 세션스토리지에 담아서 저장하는 것이다. npmjs 링크 https://www.npmjs.com/package/recoil-persist npm i recoil-persist 설치 해 준 뒤 import { atom } from "recoil"; export const isHeaderShow = atom({ key: 'isHeaderShow', default: true, }); 위의 코드가 일반 기본적으로 사용하던 r.. 더보기 Tailwind 반응형 디자인 커스터 마이징의 필요성 Tailwind 쓰면서 느낀것 중 하나가 문법이 익숙해지면 너무 깔끔하고 쉽게 스타일링이 가능다는 점과 사용자의 viewport 넓이에 따라 세세하게 경우의 수를 나눠서 디자인이 가능하다는 점이다. 즉 같은 기종(모바일, 태블릿, 데탑)이더라도 모니터 크기에 따라 보여지는 화면의 느낌이 다르다. 즉 내 m1 화면(innerwidth 1600px? 1700px?) 과 듀얼모니터로 사용하고 있는 2200px? 정도 되는 모니터에서 보는 디자인은 다를 수 있다. 이렇게 본인 작업 환경이나 범용적인 태블릿과 모니터 사이의 크기 컨트롤, 혹은 모바일과 태블릿 사이의 세밀한 길이 컨트롤을 하려면 기본적으로 제공해주는 ls md sm xs 등으로 부족할 수도 있다. 나는 ls와 md 사이의 값이 필요해서 lm이라는 .. 더보기 React Typescript Redux (Reducer 세팅하기) 리덕스를 리액트 환경에서 타입스크립트를 곁들여서 세팅하는 걸 처음부터 한번 해보자 우선 필요한 패키지들을 설치한다. npm install --save @types/react-redux axios react-redux redux redux-thunk 기존에 react-redux, redux, redux-thunk, axios 까지 같다면 @types/react-redux 가 새로 추가되었다고 보면 된다. npm 패키지 api를 이용해서 데이터를 가져와볼 건데 https://registry.npmjs.org/-/v1/search?text=react 위의 주소로 text 파라미터 뒤에 우리가 입력한 값이 들어간 패키지가 있으면 배열로서 그 데이터를 가져올 것이고 그 패키지 데이터들을 repository라고 프.. 더보기 React TypeScript 2가지 Component Type Annotation 리액트와 타입스크립트를 합쳐서 같이 개발할 때 컴포넌트들을 수도 없이 많이 만들 테니 컴포넌트를 정의할 때의 Annotation 방법 2가지에 대해 간단히 알아보자. interface ChildProps { color?: string; onClick: () => void; } // 1. export const Child = ({color, onClick}: ChildProps) => { return {color} Click Me } // 2. export const ChildAsFC : React.FC = ({color, onClick} ) => { return {color} Click Me } 보게 되면 ChildProps 가 붙는 방식이나 props에서 비구조화로 꺼내와 줄 때 차이들이 보인다. 단순.. 더보기 Redux-Saga 이해하기 큰 형 Redux의 다른 작은형제인 Redux-Saga의 사용법을 알아보자. Redux-Saga는 Redux-thunk와도 비교가 많이 되는 라이브러리인데 그 둘의 차이점을 비교해놓은 글이 많으니 한번 찾아보길 권한다. 비교글 https://velog.io/@dongwon2/Redux-Thunk-vs-Redux-Saga%EB%A5%BC-%EB%B9%84%EA%B5%90%ED%95%B4-%EB%B4%85%EC%8B%9C%EB%8B%A4- 오늘은 실직적인 사용법과 흐름을 한 번 직접 살펴보겠다. npm install redux-saga Saga의 가장 큰 특징은 Generator 함수를 쓰는 것인데 이 부분은 이런 글들을 찾아보면서 보충해야 될 부분이다. https://meetup.toast.com/post.. 더보기 redux-thunk 이해하기 Redux는 따지고 보면 큰 울타리를 Redux 라 부르고 큰 울타리 내에서 잘지내게 만들어진 여러 작은 울타리들이 있다. Redux-thunk, Redux-Toolkit, Redux-Saga 등이 그런 것들이고 이번엔 Redux-thunk를 사용해보면서 사용법을 익혀보자 npm install redux-thunk redux-thunk 는 비동기 작업을 처리할 때 쓰이는 미들웨어다. 이 미들웨어를 단순히 객체만 디스패치 하는 게 아닌 함수를 디스패치 할 수 있게 된다. 주로 api 콜을 하면서 데이터를 가져올 때 사용하는데 사용법은 간단하다. * dispatch 를 파라미터로 받는다. 이게 가장 중요한 거 같다. 이런 식으로 async/await 문법을 사용할 수 있으며 Action 함수 내에서 요청을 .. 더보기 Redux 이해하기 Redux 는 React에서 제공하는 context api 와는 다른 써드파티 라이브러리로서 상태관리 툴이다. 이미 context api 라는 상태관리 툴이 있는데 redux가 왜 필요하고 왜 써야 하는지는 규모가 큰 어플리케이션일수록 redux가 더 좋은 가독성과 관리성을 보여주기 때문이다. context api 와 redux 를 비교하는 글들을 찾아보면 무슨 차이가 있는지 알게 될 것이다. 리액트에서 Redux를 사용하려면 우선 Action, Reducer, store 세가지가 기본적으로 필요하다. 우선 npm install redux react-redux redux-devtools-extension 이미지 출처 https://www.zerocho.com/category/React/post/57b60.. 더보기 json-server 활용법 리액트 프로젝트를 진행하면서 백엔드 쪽 API 작업이 진행되고 있지 않거나 http 리퀘스트를 활용하여 테스트 할 때 좋은 패키지로서 fake backend 역할을 한다고 보면 된다. crud 까지 가능하니 테스트용으로는 충분한 라이브러리다. npm install -D json-server 설치해준 뒤에 json파일을 하나 만들고 (데이터베이스 역할) db.json { "logs": [ { "message": "Changed network card in server 007", "attention": false, "tech": "Sam Smith", "date": "2019-05-31T15:46:10.179Z", "id": 1 }, { "id": 2, "message": "Workstation 007 no.. 더보기 이전 1 2 3 4 ··· 6 다음
