전체 글
jest와 vitest의 구문은 완전히 똑같으나, setup만 약간 다를 뿐이라고 한다.Vitest 기반 강의를 들으며 내용을 정리해보려 한다. 기본 구조- 브라우저에서 프로젝트를 실행시키지 않아도, 가상DOM 상에서 테스트를 진행할 수 있다.- Jest 또는 Vitest에서 matcher를 사용하려면 테스트 전에 가져와야 한다.- test code 구문은 expect 구문과 matcher 구문으로 구성되어 있다. - linkElement는 이전 줄에서 정의한 어떤 요소다.- matcher 구문에 올 수 있는 또 다른 예시로는 toBe("hello"), toHaveLength(7) 등이 있다. 1. Unit test- 코드의 한 유닛 혹은 단위를 테스트- 격리되어 있는 유닛을 독립적으로 테스트 (다..
ssh 파일을 생성하고, github의 setting 탭에서 해당 파일을 추가했는데도 아래 에러가 떴다.git@github.com: Permission denied (publickey).fatal: Could not read from remote repository. 아래 명령어를 입력해서, 현재 내가 쓰고있는 맥북의 config 파일을 확인해봤는데, 아래와 같이 잘 설정되어있었다.code ~/.ssh/config # PersonalHost github.com-어쩌구 HostName github.com User git IdentityFile ~/.ssh/id_rsa_어쩌구# CompanyHost github.com-저쩌구 HostName github.com User git IdentityFi..
인강이나 다른 포스팅들에서 설정하라는대로 했는데zsh: command not found: flutter메시지가 뜨며 플러터를 찾지 못하는 현상 발생.. 나의 설치 환경맥 M1 칩 / Sonoma 14.4.1 터미널에서 아래 명령어 입력해서 zshrc 파일 열기(블로그 포스팅 시기에 따라 zshenv를 열라는 글도 있었고.. 헷갈림)open ~/.zshrc 참고로 programs는 내가 만든 커스텀 폴더임export PATH="$PATH:/Users/dayoung/Desktop/programs/flutter/bin" 아래 명령어를 입력해서, 위에서 수정한 새로운 내용을 터미널에 반영하기source ~/.zshrc 아래 명령어를 입력해서 버전이 제대로 뜨는지 확인flutter --version
서비스 내에서 회원만 이용 가능한 기능이 있다면, 아래와 같이 로그인 페이지로 이동할 수 있는 모달을 띄워준다. 사용자가 저 버튼을 클릭해서 로그인을 하고 난 뒤, 원래 보고 있던 페이지로 돌아올 수 있도록 해야 한다. import { usePathname, useRouter } from 'next/navigation';const router = useRouter();const pathname = usePathname();...router.replace('/login?redirect=' + pathname); 간단하게는 위와 같이 구현할 수 있다. 하지만 만약 검색 페이지라서, 복잡한 필터기능이 있고 searchParams가 주소 뒤에 줄줄 많이 달려있는 상황일 수도 있다. UX 관점에서1. 사용자가..
'공유하기' 동작을 하는 버튼이 여기저기서 쓰여 공통 컴포넌트로 만들었는데,이게 때에 따라 [버튼]이기도, [아이콘]이기도 해야했다. 아래와 같이 컴포넌트, 자체를 넘겨받아 렌더링해줄 수 있도록 했다. import { usePathname, useSearchParams } from 'next/navigation';import Button, { ButtonProps } from '@/components/commons/Button';import { toast } from 'react-toastify';import { ComponentProps, ElementType, ReactNode } from 'react';type Props = { as?: T; // 동적으로 렌더링할 컴포넌트 children?..
쓸 때마다 까먹네... 'use client';import React, { createContext, useContext, useState } from 'react';const SellContext = createContext void; } | undefined>(undefined);export const SellContextProvider: React.FC = ({ children,}) => { const [name, setName] = useState(''); return ( {children} );};export const useSellContext = () => { const context = useContext(SellContext); if (!conte..
// useLocalStorage.tsimport { useState, useEffect, useCallback } from 'react';function useLocalStorage(key: string, initialValue?: T) { const [storedValue, setStoredValue] = useState(() => { if (typeof window === 'undefined') { return initialValue; } try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { ..
npm library를 만들어서 배포했는데, 빌드 결과물인 index.es.js 파일에 숨기고 싶은 URL이 포함되어 있었다.빌드 난독화를 해도, env파일에 변수를 넣어도 드러나는 건 당연히 그대로다. (이게 노출된다고 해서 엄청 크리티컬 하진 않지만, 너무 적나라하게 드러나는 것이 불편한 상황) // .envVITE_SOCKET_URL=https://숨기고싶다.com// socketInstance.tsconst url = import.meta.env.VITE_SOCKET_URL;...class SocketInstance { private static instance: SocketInstance; public socket: Socket; private constructor() { // env..
