728x90 개발일지64 React 함수형 컴포넌트와 Class형 컴포넌트 생명주기 React state와 LifeCycle 함수형 컴포넌트와 class형 컴포넌트의 LifeCycle이 어떻게 되는지 간단하게 비교해 보는 글이다. 클래스형 컴포넌트와 생명주기 메서드 1. Mount(컴포넌트가 처음 실행될 때) - state, context, defalutProps 저장 - componentWillMount - 안전하지 않은 접근 - render - componentDidMount - DOM 접근 가능 2. Props Update(프롭스가 업데이트될때) - componentWillReceiveProps - 사용 종료 - shouldComponentUpdate - componentWillUpdate - 사용 종료 - render - componentDidUpdate - DOM 접근 가능 3.. 2023. 3. 23. TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_7__.default) is not a function TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_7__.default) is not a function 에러 해결 방법 나의 경우 SSR 데이터를 contextAPI를 통해 패치하려 했으나, 정상적으로 받아올 지 못할때 발생한 오류였다. 로컬 실행 종료 후 재실행하니 정상적으로 데이터를 받아올 수 있었다. 다소 허탈한 해결방안이었지만, SSR을 다루는 페이지의 데이터가 정상적으로 받아와지지 않는 경우, 코드 작성 후 프로그램을 재실행 해보자. 참조 : https://github.com/vercel/next.js/issues/18090 context value is undefined on server with Webpack 5 · Issue #18090 · vercel.. 2023. 3. 18. Nextjs Link와 useRouter의 차이 Link / useRouter 사용법 // Link import Link from "next/link"; export const compo1 = () => { return ( some element ) } // useRouter import { useRouter } from "next/router"; export const compo2 = () => { const router = useRouter() const routeHandler = () => { router.push(url) } return ( some element ) } Nextjs에서 페이지를 전환하기 위해 사용하는 방법으로, Link를 이용하거나 useRouter를 이용해 router.push()와 같이 사용하여 전환해줄 수 있는데, 비슷해.. 2023. 3. 18. jest를 통한 테스트코드 사용 jest란? 단순성에 중점을 둔 javascript 테스트 프레임워크이며, babel, Typescript, node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동한다. 본 포스팅은 React 환경을 기준으로 작성되었다. 1. jest 설치 npm install --save-dev jest @babel/preset-env # or yarn add --dev jest @babel/preset-env node.js 환경에서 import 등의 ES6 문법을 사용하기 위해 @babel/preset-env도 함께 설치해준다. 2. 루트 경로에 babel.config.js 파일 생성 module.exports = { presets: [ "@babel/preset-env", // typescr.. 2023. 3. 18. 이전 1 2 3 4 5 6 7 ··· 16 다음 728x90
