728x90 반응형 전체 글136 [Jest] 자바스크립트 테스트 - 비동기코드 보호되어 있는 글 입니다. 2024. 3. 30. [Jest] 자바스크립트 테스트 - Matcher 알아보기 Matcher함수는 테스트 케이스의 예상 결과를 검증하는 함수 Jest에서 제공하는 다양한 Matcher 함수를 사용하면, 값이나 객체의 동등성, 타입, 포함 관계 등을 다양한 방식으로 검사할 수 있음 다양한 Matcher 메서드를 참고할 사이트 https://jestjs.io/docs/expect Expect · Jest When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things. jestjs.io 실습해본 함수들 toBe 숫자나 문자 등 기본 타입.. 2024. 3. 30. [Jest] 자바스크립트 테스트 - 초기셋팅 Jest 는 React 를 만든 페이스북에서 선보인 테스팅 프레임워크 별도 설정없이 빠르게 테스트 케이스를 작성할 수 있다 Jest는 자동화된 단위 테스트를 수행하기 위해 널리 사용되며 리액트(React)와 같은 자바스크립트 라이브러리와 프레임워크와 함께 사용될 때 특히 강력하다 리액트에서는 기본적으로 제공되어있다 폴더를 하나 만든다 vscode를 열고 터미널 실행 초기 셋팅 npm init //초기화 npm install jest --save-dev //개발모드에 jest 설치 package.json 파일 수정 "scripts": { "test": "jest" }, 잘 셋팅 됐는지 테스트해보기 fn.js 파일 생성 const fn = { add: (num1, num2) => num1 + num2, };.. 2024. 3. 30. [react]react-query 보호되어 있는 글 입니다. 2024. 1. 10. 구글 로그인 연동 보호되어 있는 글 입니다. 2023. 12. 15. 유저기능 보호되어 있는 글 입니다. 2023. 12. 11. mongoDB 보호되어 있는 글 입니다. 2023. 12. 5. [next.js]프리렌더링(정적생성, 서버사이드렌더링(SSR)) 프리렌더링(Pre-randering) 웹페이지 로딩 이전에 하는 렌더링 렌더링 과정 서버에서 HTML과 JavaScript 불러오기: 이 단계에서 Next.js는 페이지의 초기 버전을 빌드합니다. 이 초기 버전은 서버에서 생성된 정적 HTML로 구성되며, 클라이언트 측 JavaScript 번들도 포함합니다. 이 과정은 페이지가 빠르게 로드되도록 하며, 검색 엔진 최적화(SEO)에도 유리합니다. 리액트 실행: 사용자의 브라우저가 초기 HTML을 받은 후, 클라이언트 측 JavaScript가 실행되어 리액트를 시작합니다. 이 단계에서 리액트는 서버에서 받은 HTML과 동기화를 시도하며, 필요한 경우 추가적인 데이터를 가져오거나 사용자 인터랙션에 대응합니다. 클라이언트 사이드 렌더링에서 리액트가 화면 조정 (.. 2023. 12. 5. [next.js] Head 컴포넌트와 구글폰트 적용하기 각 페이지 별로 Head 컴포넌트 적용하고 title 변경해주면 페이지 변경할 때 페이지 이름이 변경된다 메타데이터와 외부 리소스 설정 & 연결 import Head from 'next/head'; function HomePage() { return ( {/* 페이지 내용 */} ); } 폰트 적용 기존에 자바스크립트나 리액트, css에서 적용한 방법대로도 가능 나 @import 구글폰트 적용방법 Next.js는 구글 폰트 기능을 제공함 _app.js 에 적용하기 import { Noto_Sans_KR } from '@next/font/google'; const notoSansKR = Noto_Sans_KR({ weight: ['400', '700'], //문자열로 넣기 subsets: [], // 한글.. 2023. 12. 4. [next.js] Image컴포넌트 이미지 컴퍼넌트를 사용하게 되면 주소가 바뀌고 이미지 원본을 바로쓰는게아니라 next.js 서버를 한번 거쳐서 최적화된 크기의 이미지를 가져옴 1. 이미지 크기를 알아서 최적화 해줌 2. lazy 로딩을 지원해서 페이지 로딩 속도도 최적화 해줌 (next.js에는 loading 속성이 적용되어있음, ) ex) 1. Image 컴포넌트를 사용하면 width와 height 속성을 적용해줘야한다 (이미지가 public폴더에 있으면 절대 경로로 지정해준다) import topImage from '@/public/image.jpg'; //import 한 이미지는 width,height 속성 없으면 이미지 크기로 적용됨(에러안뜸) //직접 절대경로로 이미지 넣으면 width,height 없으면 에러 뜸 2. fil.. 2023. 12. 4. [next.js] useContext(다크모드) 다크모드 적용 context 파일 만들기 context/ThemeContext.js import { createContext, useEffect, useState } from "react"; export const ThemeContext = createContext(); export default function ThemeProvider({ children }) { const [theme, setTheme] = useState("dark"); useEffect(() => { document.body.classList.add(theme); return () => { document.body.classList.remove(theme); }; }, [theme]); return ( {children} ); }.. 2023. 12. 4. [next.js] 리다이렉트(redirects), 커스텀 404 페이지 요청 경로를 다른 대상 경로로 리다이렉트 (url을 변경해준다?)를 지정할 수있다 ex) /next/3 => /prev/3 폴더명을 next 에서 prev로 변경하고 참고자료 확인 참고자료 next.js 공식 문서 https://nextjs.org/docs/app/api-reference/next-config-js/redirects 공식문서들어가서 코드 복사해서 next.config.js에 수정하면된다 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async redirects() { return [ { source: '/about', //변경되기 전 경로(param 값이 같이 따라올경우 같이 적어준다.. 2023. 12. 4. 이전 1 2 3 4 ··· 12 다음 728x90 반응형
