뉴히의 개발 로그

React에서 Lottie 사용하기

뉴히 — Fri, 12 Dec 2025 14:37:55 +0900

웹서비스를 만들때 종종 gif와 같은 움직이는 애니메이션을 넣고싶을때가 많다! 이때 간단한 애니메이션인데 전부 gif로 넣게되면 용량도 크고 퍼포먼스도 저하시키는 문제들이 생긴다.

lottie는 이러한문제를 해결하면서 웹서비스를 예쁘게 꾸며줄수 있는 애니메이션을 사용할수있게 해준다!!

Lottie란?

Lottie는 After Effects 애니메이션을 JSON 파일로 변환해 웹/앱에서 가볍게 사용할 수 있도록 해주는 라이브러리이다.
React에서도 쉽게 사용할 수 있다!!

Lottie의 장점

고퀄리티 애니메이션을 가벼운 JSON 파일로 제공해서 퍼포먼스에 부담이 적음

️ 코드로 세밀한 제어가 가능 (루프, 속도 조절, 특정 타이밍 이벤트 등)

반응형, 모바일 최적화도 편리하게 적용 가능

After Effects로 제작한 애니메이션을 개발자가 쉽게 사용할 수 있음

파일 하나로 다양한 플랫폼(Web, iOS, Android 등)에서 재사용 가능

설치

npm install lottie-react

위 명령어를 통해 간단히 설치가능하다.

사용 방법

(1) 애니메이션 파일 준비

애니메이션 파일(JSON)은 LottieFiles 사이트에서 무료로 다운로드할 수 있다.
다운받은 파일을 프로젝트 폴더에 저장해주자. (예: src/assets/lottie/animation.json)

(2) 기본 예제

// src/components/LottieAnimation.tsx
import Lottie from "lottie-react";
import animationData from "../assets/lottie/animation.json";

const LottieAnimation = () => {
  return (
    <div style={{ width: 300, height: 300 }}>
      <Lottie
        animationData={animationData}
        loop
        autoplay
        style={{ width: "100%", height: "100%" }}
      />
    </div>
  );
};

export default LottieAnimation;

✅ 설정:

animationData: 사용할 애니메이션 JSON 파일

autoplay: 컴포넌트 렌더링 시 자동 재생

loop: 애니메이션 반복 재생 여부

추가로 lottie-react에서는

speed (속도 조절)

onComplete (애니메이션 완료 이벤트)

onLoopComplete (루프 완료 이벤트)

onEnterFrame (프레임마다 이벤트)
같은 옵션도 쉽게 제어할 수 있다!

(3) App.tsx에서 사용하기

// src/App.tsx

import LottieAnimation from "./components/LottieAnimation";



function App() {

  return (

    <div>

      <h1>Hello Lottie!</h1>

      <LottieAnimation />

    </div>

  );

}


export default App;

사용예시

아래는 이번 MT용 보물찾기 사이트를 제작하면서 직접 사용해본 예시화면과 코드이다. 간단한 효과여서 별다른 애니메이션 설정은 하지않고 json그대로 적용하였다!

import styled from "styled-components";
import twingkle from "@assets/lottie/Twingkle.json";
import Lottie from "lottie-react";

const Logo = () => {
  return (
    <Wrapper>
      {/* 왼쪽 반짝이 */}
      <Twingkle top={-20} left={-75} />
      {/* 오른쪽 위 반짝이 */}
      <Twingkle top={-65} right={-65} />
      {/* 오른쪽 반짝이 */}
      <Twingkle bottom={-55} right={-75} />
      MT사이트
    </Wrapper>
  );
};

export default Logo;

// Wrapper 스타일
const Wrapper = styled.div`
  display: flex;
  position: relative; /* 자식 absolute 기준 */
  ${({ theme }) => theme.fonts.logo50}
  color: ${({ theme }) => theme.colors.font.white};
`;

// Twingkle Props 타입 정의
interface TwingkleProps {
  top?: number;
  left?: number;
  right?: number;
  bottom?: number;
}

// Twingkle 컴포넌트
const Twingkle = ({ top, left, right, bottom }: TwingkleProps) => {
  const style: React.CSSProperties = {
    position: "absolute",
    width: 130,
    height: 130,
    pointerEvents: "none", // 클릭 방지
  };

  // 위치 props 적용
  if (top !== undefined) style.top = `${top}px`;
  if (left !== undefined) style.left = `${left}px`;
  if (right !== undefined) style.right = `${right}px`;
  if (bottom !== undefined) style.bottom = `${bottom}px`;

  return <Lottie animationData={twingkle} loop autoplay style={style} />;

https://velog.io/@movingun/React%EC%97%90%EC%84%9C-Lottie-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

React 프로젝트 생성 및 초기 세팅 - 폴더 구조, 패키지 설치, 초기값

뉴히 — Tue, 2 Dec 2025 11:15:02 +0900

1. CRA

npx create-reat-app [프로젝트명]
npx create-react-app [프로젝트명] --template typescript

2. Vite

npm create vite@latest [프로젝트 명] 
npm create vite@latest [프로젝트 명] --template react-ts

프로젝트 주요 파일과 폴더 구조

public/: 정적 파일(HTML, 이미지 등)을 저장하는 폴더.
src/: React 컴포넌트와 JavaScript 파일을 저장하는 폴더.
package.json: 프로젝트의 메타데이터와 의존성을 관리하는 파일.


├── public
├── src
│   ├── @types	      			 # 전역타입 정의
│   ├── assets                   # 정적 자원
│   ├── components               # 재사용 가능한 컴포넌트
│   ├── constants                # 상수         
│   ├── hooks                    # 커스텀 훅
│   ├── pages                    # 페이지 컴포넌트
│   ├── routes                   # 라우팅         
│   ├── services				 # 비즈니스 로직, API 호출
│   ├── stores                   # 전역 상태 스토어
│   ├── utils                    # 유틸리티 함수
│   ├── styles                   # 스타일
│   ├── App.css 
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── .gitignore
├── .eslintrc.cjs                # ESLint 설정 파일
├── .prettierrc                  # Prettier 설정 파일
├── index.html                   # 애플리케이션의 진입점 HTML 파일 (Vite 설정 관련)
├── pnpm-lock.yaml(또는 package-lock.json, yarn.lock) # 의존성 트리 고정 파일
├── package.json                 # 프로젝트 메타데이터 및 의존성 정의
├── README.md
└── vite.config.js               # Vite 설정 파일

public/: 정적 파일들을 보관하는 폴더

src/: 소스 코드가 위치하는 폴더

assets/: 이미지 파일과 같은 정적 자원들을 보관합니다.
constant/: 상수를 모아둡니다.
components/: 재사용 가능한 React 컴포넌트들이 위치하며, 공통 컴포넌트와 페이지별(도메인별) 컴포넌트로 구분됩니다.
pages/: 각각의 페이지 컴포넌트들이 위치하며, 홈, 클래스, 게시판 등 여러 페이지로 나뉩니다.
routes/: 애플리케이션의 라우팅 설정 파일들이 위치합니다.
app/: 리덕스 스토어 설정 파일이 위치합니다.
utils/: 유틸리티 함수들이 위치합니다. 프로젝트 전역에서 사용되는 특정 기능 및 작업을 수행하는데 도움을 주는 함수들이 위치합니다.
hooks/: 커스텀 훅들이 위치합니다.
styles/: 스타일 파일들이 위치합니다.
App.tsx: 주요 React 컴포넌트로, 애플리케이션의 구조를 정의합니다.
main.tsx: ReactDOM을 사용해 React 애플리케이션을 HTML DOM에 렌더링하는 파일입니다.

router, 전역상태 store, queryclient provider 등 패키지 설치

npm add react-router-dom @tanstack/react-query axios zustand

1. 깃 협업 배포 순서

1. fetch 및 pull : 코드 수정 전 최신 코드를 로컬로 받기

2. commit : 작업 완료 후 코드를 수정하고 commit

3. fetch 및 pull : 다시 원격 저장소에서 최신 변경 사항을 가져온다.

4. 충돌 해결 : git pull 중에 충돌이 발생하면, 충돌을 해결하고 commit 한다.

5. Push : 로컬 변경 사항을 원격 저장소(git)에 푸시한다.

6. Pull Request : 팀장에게 merge 요청

이 순서를 권장하는 이유
1. 충돌 최소화 : 작업 후 먼저 'pull'을 하여 최신 변경 사항을 가져오면, git에 있는 변경사항과 로컬 변경사항을 병합할 수 있다. 이때 충돌이 발생하면 로컬 환경에서 해결할 수 있어 푸시할 때 다른 팀원의 작업에 영향을 주지 않는다.
2. 코드 일관성 유지 : 최신 코드를 로컬에 반영한 후 푸시하면, git과의 일관성을 유지할 수 있다. 이는 다른 팀원이 'pull'할 때 예상치 못한 충돌을 피하는데 도움이 된다.

2. .gitignore 파일

깃이나 외부에 배포할 때 보안상의 이유로 배포에서 제외시킬 파일 기재

협업할 때 필요한 파일이 공유가 안될 수 있어 절대 파일 수정 금지

또 node_module같은 폴더는 각자 다운받는게 다를 수 있어서 각자의 node를 사용한다.

3. 파일 절대 경로

프로젝트 루트가 아닌 URL에서도 유연하게 절대경로를 사용할 수 있도록 한다.

html에서는 → %PUBLIC_URL%

<link rel="stylesheet" href="%PUBLIC_URL%/css/main.css">
<img src="%PUBLIC_URL%/images/logo.png" alt="Logo">

javascript → process.env.PUBLIC_URL

<Link to={`/${it.menu}/${it.id}`} props={props}>        
     <div style={{backgroundImage:`url(` + process.env.PUBLIC_URL + `/contentsboard/assets/img_${it.id}.jpg)`  }}></div>
     <h3>{it.title} </h3>
     <p>{it.subTitle}</p>
</Link>

4. 협업 툴

GitHub Desktop을 이용해서 각자 레포지토리를 복사한 후 작업을 진행한다.

fork 대신 간편하게 GitHub Desktop을 사용할건데, 간편한 대신에 관리 기능이 몇가지 없다

작업한 후에는 Pull Request를 하고 리뷰어에 마스터를 기본으로 추가한다.

5. 코드 컨벤션 설정하기

코드를 일관되고 효율적으로 작성하기 위한

네이밍 컨벤션

변수, 함수는 카멜 케이스 ex) fetchData, setData
클래스명은 스네이크 케이스 ex) login_wrap
컴포넌트명은 파스칼 케이스 ex)ItemList
스타일 파일은 컴포넌트명과 동일하게 ex) Home.js / Home.css
컴포넌트가 아닌 파일은 카멜 케이스 ex) useFetch

6. Reset CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	min-height: 100vh;
	font-family: '';
	line-height: 1;

}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: 	none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
    color: inherit;
}  
input, button, textarea{
    border: none;
    background: inherit;
    font-family: '', sans-serif;
	outline: none;
}

7. 커밋 규칙

Commit message 7가지 규칙

제목과 본문을 한 줄 띄어 구분
제목은 50자 이내
제목 첫 글자는 대문자
제목 끝에 마침표 X
제목은 명령문으로, 과거형 X
본문의 각 행은 72자 이내 (줄바꿈 사용)
본문은 어떻게 보다 무엇을, 왜에 대하여 설명

//헤더는 필수이며 범위와 Footer는 생략 가능하다.

타입(범위) : 주제 // Header(헤더)

본문 // Body(바디)

바닥글 // Footer

타입	설명
feat	새로운 기능에 대한 커밋
fix	버그 수정에 대한 커밋
build	빌드 관련 파일 수정 / 모듈 설치 또는 삭제에 대한 커밋
chore	그 외 자잘한 수정에 대한 커밋
ci	ci 관련 설정 수정에 대한 커밋
docs	문서 수정에 대한 커밋
style	코드 스타일 혹은 포맷 등에 관한 커밋
refactor	코드 리팩토링에 대한 커밋
test	테스트 코드 수정에 대한 커밋
perf	성능 개선에 대한 커밋

Footer와 Body는 생략 가능하다.
Footer는 바닥글로 어떤 이슈에서 왔는지 같은 참조 정보들을 추가하는 용도로 사용한다.

예를 들어 특정 이슈를 참조하려면 Issues #1234 와 같이 작성하면 된다.

예시)

feat(router): React Router 연결

초기 컴포넌트 세팅 및 페이지 라우팅

https://velog.io/@yongyong_21/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B4%88%EA%B8%B0%EC%84%B8%ED%8C%85-%EA%B0%9C%EC%9D%B8%EC%A0%81-%EC%A0%80%EC%9E%A5%EC%9A%A9

https://gamza1013.tistory.com/114

React Router v7

뉴히 — Mon, 1 Dec 2025 11:21:15 +0900

React-router-dom -> React Router v7

React 프로젝트에서 라우팅을 쓸 때, react-router-dom을 당연하게 깔고 시작했었다.

<BrowserRouter>, <Link>, <NavLink> 등 DOM 전용 라우팅 컴포넌트가 이미 준비되어 있다.
뒤로가기 버튼이나 페이지 전환 시 전체 리프레시가 없으니 SPA스럽게 딱 좋다.

위 두개의 이유만으로도 리액트로 SPA 웹사이트를 만드려면 React-Router-Dom 을 냅다 설치해왔던 것이다.

강해진 코어 의존성

기존에는 아래와 같이 Link 태그를 불러와서 SPA 라우팅을 시켜주려면 당연히 너무나도 당연히 react-router-dom 에서 불러왔을 것이다.
하지만 이제는 세상이 바뀌었다. 이제는 Link 태그를 포함 그동안 react-router-dom 에서 제공해주던 태그 및 기능들을 react-router에서 불러오면 되는 것이다.

import { Link } from "react-router-dom"; // 기존의 v6 방식
import { Link } from "react-router"; // 최근 v7 방식

이제는 react-router만 사용해서 SPA를 구현할 수 있게 되었단 것이다.

⁉️ SSR까지 제공하는 프레임워크라고 ??

이번 v7 업데이트 이후로 React-Router는 리액트 라우팅 라이브러리를 넘어서 앞으로 프레임워크로도 가능성을 열었다.

요즘 CRA는 더 이상 React 애플리케이션을 만드는 추천 방법이 아니며, 한동안 추천되지도 않았습니다. 마지막 커밋이 이루어진 지 거의 1년이 되었고, 그 이전에도 커밋 속도가 상당히 느려졌습니다. 현재 CRA는 유지보수되지 않는 것으로 간주되며, React 공식 문서에서도 사용을 추천하지 않습니다.

es모듈 기반으로 훨씬 빠른 번들링을 제공해주는 vite를 기반으로 사용가능한 프레임워크로 이루어졌기 때문에 사용성을 더욱 높일 수 있을 것 같다

앞으로 React-Router v7을 프레임워크로 사용한다면 우리가 경험 할 수 있는 기능을 리스트업 해보자면 다음과 같다.

Vite 번들러 및 개발 서버와 통합

핫 모듈 교체(HMR) 지원

파일 기반 또는 설정 기반 라우팅

타입 안전한 데이터 로딩(loaders) 및 액션(actions) 지원

자동 페이지 데이터 리로드

서버 사이드 렌더링(SSR), SPA, 정적 렌더링 지원

SEO, 에러 경계, 자산(asset) 로딩 관리 가능

개인적으로 느꼈을때 최근 프론트는 React vs NEXT 의 구도가 되었다고 생각했었는데, 위에서 설명한 여러가지 이유만으로도 정말 앞으로가 기대가 되는 버전업이었다.

도움받은 자료들

Windows용 패키지 매니저 chocolatey 설치 하기 / chocolatey로 윈도우 패키지 한번에 설치

뉴히 — Thu, 19 Jun 2025 09:09:28 +0900

공식 문서 : https://chocolatey.org/install

Installing Chocolatey

Chocolatey is software management automation for Windows that wraps installers, executables, zips, and scripts into compiled packages. Chocolatey integrates w/SCCM, Puppet, Chef, etc. Chocolatey is trusted by businesses to manage software deployments.

chocolatey.org

0. Chocolatey란?

Chocolatey (약칭 Choco) : 윈도우에서 사용할 수 있는 커맨드 라인 패키지 매니저
- Linux의 apt(apt-get), yum, Mac의 Homebrew 처럼 패키지 설치 / 업데이트 / 삭제 등 에 사용하는 Windows용 패키지 매니저
MS 에서 공식으로 제공하는 도구는 아님

1. Chocolatey 설치 방법

0. 설치 기본 요구사항 체크

Windows 7+ / Windows Server 2003+
PowerShell v2+ (TLS 1.2 요구 사항 으로 인해 이 웹 사이트의 최소 지원 버전은 v3 이상이다.)
.NET Framework 4+ (설치하지 않은 경우 .NET 4.0 설치를 시도함)( TLS 1.2 요구 사항 으로 인해 이 웹 사이트의 최소 지원 버전은 최소 4.5)

1. Window Powershell 관리자 권환으로 실행
2. Get-ExecutionPolicy 실행

Restricted가 아닐 경우 Set-ExecutionPolicy AllSigned 실행 후 Y 입력

3. 다음 코드 입력

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

4. 설치 확인

choco를 입력해 버전이 나온다면 설치 완료!

2. 활용

choco로 설치 가능한 패키지 목록

설치한 패키지 검색 및 목록 조회
#목록 choco search -l choco list -l #패키지 원격 검색 choco list 패키지명 #패키지 모든 버전 원격 검색 choco list -a 패키지명
패키지 설치, 업그레이드, 삭제하기
choco install 패키지이름 #무조건 수락 choco install -y #특정 버전 선택 설치 choco install firefox --version 90.0.2 #패키지 삭제하기 choco uninstall 패키지명 #패키지 업그레이드

출처https://velog.io/@shinyejin0212/chocolatey-Windows%EC%9A%A9-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80-chocolatey-%EC%84%A4%EC%B9%98-%ED%95%98%EA%B8%B0

command

패키지 검색 choco search 패키지명

패키지 설치 choco install 패키지명

패키지 설치 (프롬프트/버전 포함) choco install -y 패키지명 --version 버전

설치된 패키지 버전 업그레이드 choco upgrade 패키지명

패키지 상세 정보 choco info 패키지명

설치된 패키지 확인 choco list -l

설치된 패키지 삭제 choco uninstall 패키지명

chocolatey 버전 업그레이드 choco upgrade chocolatey

chocolatey로 윈도우 패키지 여러개 한번에 설치

powershell관리자 권한 실행

# 파일 경로 설정 // 설치할 프로그램 목록 작성 후 저장
$packageFile = "C:\install\packages.txt"

# 각 줄을 읽고 설치
Get-Content $packageFile | ForEach-Object {
    if ($_ -match "--params") {
        # 따옴표 문제 방지: 직접 전달
        choco install $_ -y
    } else {
        choco install $_ -y
    }
}

[Windows] 파일 경로 길이 제한 풀기, 260자 이상 경로 만들기

뉴히 — Wed, 11 Jun 2025 10:16:27 +0900

https://wednesday1304.tistory.com/entry/Windows-%ED%8C%8C%EC%9D%BC-%EA%B2%BD%EB%A1%9C-%EA%B8%B8%EC%9D%B4-%EC%A0%9C%ED%95%9C-%ED%92%80%EA%B8%B0-260%EC%9E%90-%EC%9D%B4%EC%83%81-%EA%B2%BD%EB%A1%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0

[Windows] 파일 경로 길이 제한 풀기, 260자 이상 경로 만들기

1. 경로 길이 제한을 푸는 이유 2. 경로 길이 제한 푸는 방법 2-1. 그룹 정책으로 경로 길이 제한 푸는 방법 2-2. 레지스트리 변경으로 경로 길이 제한 푸는 방법 2-3. PowerShell로 경로 길이 제한 푸는

wednesday1304.tistory.com

출처: https://wednesday1304.tistory.com/entry/Windows-파일-경로-길이-제한-풀기-260자-이상-경로-만들기 [만들어가는 아스가르드:티스토리]

완료후 재부팅해도 안됨

git config --global core.longpaths true

명령어 실행 후 다시 clone하니 잘됨!

[Git] 이미 푸시된 커밋 메시지 수정하는 방법 (amend, rebase)

뉴히 — Thu, 14 Nov 2024 09:29:08 +0900

amend

git commit --amend
최근의 커밋메세지가 뜨면 수정 후
esc > :wq 하고 종료 하면 수정완료

또는

git commit --amend -m "바꿀 커밋 메시지 내용"

rebase

git rebase -i HEAD~1
최근 한개의 커밋볼땐 HEAD~1
두개는 HEAD~2
이런식

한개의 커밋 수정시

1. i 를 눌러 입력모드로 전환
2. 수정할 커밋에 있는 pick -> reword 로 변경
3. esc 눌러 입력모드에 빠져나옴
4. :wq 입력하여 엔터를 눌러 저장하고 종료

수정해야 할 커밋 내용이 나오며 똑같이 i -> 커밋메시지 수정 -> esc -> :wq -> enter 순으로 진행하면 정상적으로 커밋 메시지가 수정된다.

git push --force origin [브랜치 이름]

하면 끝

두개이전의 커밋 수정시

git rebase -i HEAD~2

하면 

pick | 커밋 번호 | 커밋 메시지
pick | 커밋 번호 | 커밋 메시지

이렇게 뜸


=>

reword | 커밋 번호 | 커밋 메시지 수정
pick | 커밋 번호 | 커밋 메시지

i를 눌러서 편집모드로 들어간다음

수정 후 esc > :wq해서 종료

그런다음 원격에 push

git push --force 브랜치 이름

이렇게 하면 완료라고 했는데

현재 브랜치 확인하니

(no branch, rebasing [브랜치명]) 뜸

아직 rebase가 제대로 종료가 안된것

git rebase --continue
git rebase --abort
git rebase -i <커밋 해시>

하면 종료된당

참고
https://jjang-j.tistory.com/104

[Git] 이미 푸시된 커밋 메시지 수정하는 방법 (amend, rebase)

시작하기 앞서...아무 생각 없이 이전 커밋 메시지를 복붙하고 조금 수정한 뒤, 푸시를 했는데 커밋 메시지를 잘 못 쓴 것을 발견했다. 사실 이런 경우가 생기면 외면했었는데(ㅋㅋㅋㅋㅋㅋㅋ

jjang-j.tistory.com

https://so-kyte.tistory.com/161

[Jest] 자바스크립트 테스트 프레임워크 : test 코드로 JS 의 기능 및 로직 점검하기 - React 테스트 코드

뉴히 — Sun, 9 Jun 2024 17:59:00 +0900

Jest란?

Jest는 페이스북에서 만든 JavaScript testing framework이다. config를 따로 설정하지 않아도 빠르게 테스팅 환경을 만들 수 있다는 것이 큰 장점이다. 2 장에서의 기본 개념과 코드는 코딩앙마님의 Jest 강의와 유데미의 JS 강의중 테스팅 모듈 파트를 참고하여 작성하였다.

1. Install Jest

npm install --save-dev jest

개발자 도구이므로 개발환경에서만 사용할거기 때문에 --save-dev를 붙여 설치한다.

2. Test 실행

package.json
  "scripts": {
    "test": "jest"
  },

스크립트 test 부분을 'jest'로 변경해준다

3. 테스트 코드 작성 (파일 생성)

파일명.test.js

또는 __tests__

test 파일을 생성하면

npm test시에 모든 .test.js 파일들을 다 불러와 실행한다.
직접 원하는 파일만 테스트 하고싶을 경우 파일명이나 경로 입력

//fn.test.js 파일 작성

const 함수명 = require('./파일명')

test('함수 설명 적어줌', ()=>{
	expect(검증할 대상 작성).toBe(원하는 결과값)
})

// fn.js
const fn = () => {
	add: (num1, num2) => num1 + num2,
    makeUser: (name, age) => ({name, age, gender: undefined}),
    throwErr: () => {
    	throw new Error('xx');
    },    
}

module.exports = fn;

npm test 실행시

Tests:에 test 결과값이 나옴, 1failed, 2passed, 3 total 이런식으로

-> toBe 함수를 Matcher라고 한다:문자나 숫자등 기본 타입값을 비교할때 사용한다

-> 객체나 배열은 toEqual 을 사용해 줘야한다.

2.1 유용한 matchers

Matcher는 테스트 대상 함수에서 반환된 값을 예측하기 위해 사용한다.

2.1.1 Primitive value

예측하는 값이 원시값(number, string, boolean 등)일 때는 다음의 macher를 자주 사용한다.

toBe() : 해당 값과 일치하면 통과
toBeNull() toBeUndefined() toBeDefined() : Null, Undefined, Defined인 경우 통과
toBeTruthy() toBeFasly() : boolean 값 판별
toBeGreaterThan()크다, toBeGreaterThanOrEqual() 크거나 같다, toBeLessTan() 작다, toBeLessThanOrEqual()작거나 같다 : 이상, 이하, 초과, 미만
toBeCloseTo() : 소수점 계산 시 사용
toMatch(/H/) : 정규 표현식으로 문자열 판단(포함되어 있는지 - 대소문자 구별 | 구별 없애려면 toMatch(/H/i)

2.1.2 Reference value

toEqual() : 참조값(객체, 배열)을 비교할 때. 해당 값 포함하면 true
toStrictEqual() : 더 엄격한 비교. 완전히 똑같아야 true
toContain() : 배열에서 아이템 포함되어 있는지
- ex) expect(["a", "b", "c"]).toContain("a")

2.1.3 Error 발생 여부

테스트에서 throw new Error("Error msg") 등의 에러 발생 여부를 체크하기 위해서는 아래와 같은 코드를 작성한다. 에러 메시지를 특정하여 잡아내는 것도 가능하다.

// fn.test.js // 테스트 코드
const fn = require("./fn");

test("에러가 발생하나요?", () => {
  expect(()=> fn.throwErr()).toThrow() // 어떤 내용이던 상관없이 예외가 발생하면 passed가 된다: 결과 true
});
// 특정 error인지 확인하기 위해서는 .toThrow(원하는error)
test("에러가 발생하나요?", () => {
  expect(()=> fn.throwErr()).toThrow("oo") // 결과는 false, 같은 에러메시지어야 true
});


// fn.js
const fn = () => {
	add: (num1, num2) => num1 + num2,
    makeUser: (name, age) => ({name, age, gender: undefined}),
    throwErr: () => {
    	throw new Error('xx');
    },    
}

module.exports = fn;

하나의 Repository에 여러 프로젝트 올리기

뉴히 — Sat, 25 May 2024 01:56:13 +0900

1. Github에 리포지토리를 만들고 레포지토리에 넣을 여러 프로젝트중 하나의 프로젝트를 하나 올린다.

부모 리포지토리에 들어갈 자식 리포지토리이다.

git init
git add .
git commit -m "커밋 메시지"
git remote add origin "리포지토리 주소"
git branch -M main
git push origin main

2. 깃허브 새로운 레포지토리 생성<부모 레포지토리>

여러 프로젝트를 담을 부모 리포지토리의 역할을 함.
처음 한 번만 해주면 됨.

3. 부모 레포지토리 clone

git clone [부모 리포지토리 주소]

이때 빈 리포지토리 를 clone 했기때문에

빈 저장소를 복제한 것 처럼 보입니다 라고 경고가 뜰 수 있습니다.

무시 또는

git commit --allow-empty -n -m "커밋메시지"

나중에 자식 리포지토리 생성시에도 경고가 뜨기때문에 미리 커밋한번 해주기를 추천

4. 부모 리포지토리의 디렉토리로 이동한다.

cd [clone한 부모 리포지토리 이름]

5. subtree를 이용해 부모 리포지토리에 자식 리포지토리를 더해준다.

git subtree add --prefix=[폴더 이름] [1번에서 만든 자식 리포지토리 주소] [branch 이름]

여기서 폴더 이름은 깃허브에서 보여질 여러개 프로젝트중 한개의 폴더의 이름을 설정하는 것이다.
클론한 로컬 폴더 안에 처음만든 자식 프로젝트가 들어와 있다.
빈 리포지토리 클론했다는 경고를 무시했다면 여기서 또 경고가 뜬다(그럼 git commit --allow-empty -n -m "커밋메시지")

6.마지막으로 깃허브에 push하기

git push origin main

그럼 부모 리포지토리에 프로젝트가 폴더로 잘 들어가있다.

잘 올라갔으면 1번에서 만들었던 자식 레포지토리는 지워도 된다.

이후에 프로젝트를 올릴 때

git clone 부모 리포지토리 주소
cd 부모 리포지토리 이름
git subtree add --prefix-폴더 이름 자식 리포지토리 주소 branch 이름
git commit -m "커밋 메시지"
git push origin main

프로그래머스 - 약수의 개수와 덧셈 javascript

뉴히 — Fri, 10 May 2024 14:24:26 +0900

문제설명

두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.

풀이

function solution(left, right) {
    var answer = 0;
    for(let i=left; i<=right; i++ ){
        let count = 0;
        for(let j=1; j<=i; j++ ){
            if(i%j === 0) count+=1;
        }
        if(count % 2 === 0) answer+=i
        else answer-=i
    } 
    return answer;
}

다른 사람 풀이

function solution(left, right) {
    var answer = 0;
    for (let i = left; i <= right; i++){
        if(Number.isInteger(Math.sqrt(i)) === true){
            answer -= i
        }else{
            answer += i
        }
    }
    return answer;
}

제곱근이 정수면, 약수의 갯수가 홀수니 빼주고 이외의 상황은 모두 약수가 짝수니까 더해주는 방법

실행 속도도 훨씬 빠르다

프로그래머스 - 리스트 자르기 javascript

뉴히 — Thu, 9 May 2024 22:25:28 +0900

문제

정수 n과 정수 3개가 담긴 리스트 slicer 그리고 정수 여러 개가 담긴 리스트 num_list가 주어집니다. slicer에 담긴 정수를 차례대로 a, b, c라고 할 때, n에 따라 다음과 같이 num_list를 슬라이싱 하려고 합니다.

n = 1 : num_list의 0번 인덱스부터 b번 인덱스까지
n = 2 : num_list의 a번 인덱스부터 마지막 인덱스까지
n = 3 : num_list의 a번 인덱스부터 b번 인덱스까지
n = 4 : num_list의 a번 인덱스부터 b번 인덱스까지 c 간격으로

올바르게 슬라이싱한 리스트를 return하도록 solution 함수를 완성해주세요.

내 풀이

function solution(n, slicer, num_list) {
   if(n===1) {
        return num_list.slice(0,slicer[1]+1)
    }
    if(n===2) {
        return num_list.slice(slicer[0])
    }
    if(n===3) {
        return num_list.slice(slicer[0],slicer[1]+1)
    }
    if(n===4) {
        return num_list.slice(slicer[0],slicer[1]+1).filter((_,i)=>i%slicer[2]===0)
    }
}

참고할 다른 사람 풀이

function solution(n, slicer, num_list) {
    let [a, b, c] = [...slicer];

    switch(n) {
        case 1:
            return num_list.slice(0, b + 1);
        case 2:
            return num_list.slice(a);
        case 3:
            return num_list.slice(a, b + 1);
        case 4:
            return num_list.slice(a, b + 1).filter((_, idx) => !(idx % c));
    }
}