react
-
[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..
-
[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..
-
NextJS : document is not defined 오류frontend/오답노트 2022. 2. 15. 17:30
문제 : document is not defined Text content did not match. Server: Client: 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 NextJS는 모든 페이지를 서버에서 프리 렌더링 하여 보여주게 된다. 해당 시점에 document에 접근하려고 하면 접근할 수 없어서 에러를 뱉어내게 된다. 해결방안으로는 다음과 같다. 해결방법 : function getCookie = (user:string) => { if(typeof window !== 'object') return; let value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)"); return value ? value[2] :..