프론트엔드 복습노트 프론트엔드 복습노트

frontend/react&next

• [Mocking] MSWjs를 이용한 API 모킹 쉽고 빠르게 활용하는 법(with React + Webpack)

  frontend/react&next 2022. 10. 27. 16:17

  오늘은 많이들 사용하는 Mocking 라이브러리인 MSW에 대해서 빠르게 파악해볼까 합니다. 아직 모킹을 활용한 개발을 해보신 적이 없으신 분들은 이런 경험이 있을 겁니다. "요청 드린 API언제 나와요?" 이처럼 협업을 하는데 있어서 시간낭비가 발생하게 되는 경우가 많으실 겁니다. 이럴때 사용하는게 API목업 입니다. 개발 시작 전 서버개발자와의 협의를 통하여 통신에 대한 인터페이스를 정의하고, 이에 맞춰 미리 API목업을 하여 서버의 진척상황과 상관없이 프로젝트를 진행할 수 있습니다. 이런 API목업 라이브러리 중 MSW에 대해서 알아보도록 하겠습니다. MSW는 말 그대로 Mock Service Worker입니다. 그래서 아주 자연스럽게 기존의 API호출과 연동하여 개발환경에 따라 셋팅할 수 있습니다..

  Read More
• [Testing] React + Testing Library + Styled Components 환경에서 ThemeProvider 적용 방법

  frontend/react&next 2022. 10. 11. 10:11

  오늘은 Styled Components + React 기반에서 testing-library/@react를 이용한 테스트 환경 구축 시 공통 theme 등의 사용으로 인한 에러 등을 피하기 위해서는 어떤 방식으로 셋팅 하여야 되는지 알아보도록 하겠습니다. 1. TestTemplate 작성 import { ThemeProvider } from "styled-components"; import useTheme from "@/libs/hooks/useTheme"; interface Props { children: JSX.Element | JSX.Element[]; } const TestTemplate = ({ children }: Props) => { const [theme] = useTheme(); retur..

  Read More
• [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 ..

  Read More
• [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을 이용해 동일 작업..

  Read More
• [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..

  Read More
• [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..

  Read More
• [NextJS] Tiptap(WSIWYG Editor) - NextJS 문서 편집기(Rich Editor) 구축기

  frontend/react&next 2022. 3. 2. 16:32

  매일 개인 개발을 할 때 글 쓰기를 만들 때 내 입맛대로 만들고 싶을 때 어떤 에디터를 사용할까라는 고민을 정말 많이 해왔던 것 같습니다. 저 또한 Quill, CK, TUI, Editor, TinyMCE 등 많은 에디터 들이 있지만 그 중에서 가장 제가 원하는대로 깔끔하게 커스텀 가능했던 에디터를 소개해드릴려고 합니다. Vue이용자들은 Tiptap에디터를 꽤 많이들 사용하는 것으로 알고 있습니다. Tiptap의 가장 큰 장점은 다양한 프레임워크 지원이 아닐까 싶습니다. Vue, React 뿐만 아니라 Nuxt, Next 등의 SSR에서의 환경을 제공한다는 것은 매우 만족 스러웠습니다. quill을 이용했을 때는 매번 dynamic을 써서 어거지로 넣었던 기억이 있습니다. 이 에디터는 매우 강력하고 스타..

  Read More
• [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(무한스크롤)을 구현한 케이스가 있어서 이를 공유하고자 글을 써봅니다. 잡..

  Read More