리액트
-
[Testing] react + webpack + typescript 프로젝트 간단한 테스트 환경 구성 및 실습(feat. Jest , Testing-library, without CRA)frontend/react&next 2022. 10. 6. 12:48
오늘은 리액트 + 타입스크립트 + 웹팩 조합에서 테스트 환경을 구성하는 방법에 대해서 알아보도록 하겠습니다. 사실 CRA안에 이미 다 준비가 되어 있지만, CRA를 즐겨 사용하지 않는 저는 직접 구성을 하여야 되었습니다. 오늘은 간단하게 프로젝트에 테스트 환경을 부어보도록 하겠습니다. 선수 지식이 필요 합니다. 우측 링크를 확인해주세요. (https://ryuhojin.tistory.com/19) 1. 패키지 설치 //npm npm i -D jest jest-environment-jsdom ts-jest @testing-library/react @types/jest //yarn yarn add -D jest jest-environment-jsdom ts-jest @testing-library/react ..
-
[ReactJS] React + TypeScript + Webpack5 초기 설정 (리액트 18 공식 대응 완료)frontend/react&next 2022. 3. 22. 17:45
[2022-10-06 : 2차 업데이트] 보일러 플레이트의 프로젝트 구조변경 및 약간의 설정 변경이 있었습니다. 참고해주세요. 좀 더 나은 스타터킷을 배포하도록 노력하겠습니다. 오늘은 CRA를 사용하지 않고 직접 프로젝트 초기 설정 하는 방법에 대해서 알아보겠습니다. 정말 간단한 사이드 프로젝트를 진행할 때에는 REACT CRA나 VUE CLI 등을 사용해서 진행할 수도 있지만, 내가 원하는 방향으로 정확히 설정하여 진행하기 위해서는 이러한 초기 설정을 보다 정확하게 알 필요가 있다고 생각합니다. 글 마지막에 boilerplate가 첨부되어있습니다. 1. 모듈 설치 가장 먼저 필요한 모듈을 설치해보겠습니다. 저는 주로 사용하는 yarn으로 설치를 진행해보겠습니다. npm install을 이용해 동일 작업..
-
[ReactJS] VUE개발자 REACT(함수형)에 빠르게 적응하기 ( 비교 개발 ) - 스크롤 압박 내용 매우 많음, 매우 유용frontend/react&next 2022. 3. 4. 13:26
오늘은 Vue 개발만 하던 저가 React를 배울 때 어떻게 최대한 빠르게 적응했는지에 대해서 동작에 대해서 비교하면서 설명드리려고 합니다. 이 방식은 저가 겪었던 방식으로 여타 프레임워크를 사용하지 않았던 분들에겐 부적합 할 수 있으니 그냥 이사람은 이렇게 넘어갔구나하고 생각해주시면 감사하겠습니다. 물론 저는 vue( 이젠 3 CompositionAPI )와 react 두개를 병행 하고 있습니다. cli와 cra를 기반으로 설명드리겠습니다. 1. 앱 기동시 첫 진입 - vue-cli ( main.js ) import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') - create-react-app ( in..
-
[ReactJS] Styled Components (CSS IN JS) 적용 및 사용법 ( 부록 : NextJS + TypesScript 환경 적용 및 사용법 )frontend/react&next 2022. 3. 3. 16:30
웹 프론트엔드 개발 시에 CSS를 적용하는 방식으로는 CSS IN CSS , CSS MODULE, CSS IN JS 등 다양한 방식이 있습니다. 프로젝트의 성격에 따라 구현하는 방식은 다르겠지만, 오늘은 Styled Components ( CSS IN JS )에 대해서 알아보겠습니다. 우선 Styled Components 를 사용하기 위해서는 가장먼저 스타일 컴포넌트 모듈부터 설치해야 됩니다. 0. Code Snippet 설치 필수는 아니지만 스타일 컴포넌트가 문자열 처럼 그냥 쭉쭉 나오면 매우 불쾌지수가 올라갑니다. 익스텐션 제가 쓰는 걸 알려드리자면 vscode-styled-components 입니다. 해당 스니펫이 아니더라도 꼭 깔고 작업하시는걸 추천..또 추천드립니다. 1. styled-compo..
-
[ReactJS] React Query + IntersectionObserver = Infinite Scroll Paging(리액트 쿼리 + 옵저버 = 무한 스크롤 페이징)frontend/react&next 2022. 2. 24. 14:53
최근 Client State와 Server State관리에 대하여 많은 Redux에 Redux Saga등 덕지덕지 붙으며 본연의 클라이언트 상태관리의 의미가 퇴색되고 서버측 상태(API데이터 등)이 주가 되고 있어서 이런 구조적 문제를 타파하고자 Client Side(Mobx , Recoil) 등과 React Query를 이용해서 작업하는 경우가 참 많은거 같습니다. 저 또한 하나의 기능을 만들기 위하여 과하게 작업되는 경우가 많은거 같아서 Redux + Redux Saga로 작업되는 개인 프로젝트에서 이 구조를 버리고 Recoil + React Query(리코일 + 리액트쿼리)로 작업하였는데 작업 중에 Infinite Scroll(무한스크롤)을 구현한 케이스가 있어서 이를 공유하고자 글을 써봅니다. 잡..