효효 개발공부로그

모노레포를 프로젝트에 적용해보기

Tue, 24 Jun 2025 01:42:17 GMT

📱모노레포란?

여러 프로젝트의 코드와 자산을 1개의 레포지토리에서 저장하는 구조이다

모노레포 구조 예시

/root
├── apps/
│   ├── user-app/       # 사용자용 웹앱 (www.xxx.com)
│   └── admin-app/      # 어드민용 웹앱 (admin.xxx.com)
├── packages/
│   ├── ui/             # 공통 UI 컴포넌트 (shadcn 확장)
│   ├── hooks/          # 공통 hooks
│   ├── types/          # API/도메인 공통 타입
│   └── utils/          # 공통 유틸리티 함수
├── turbo.json          # Turborepo 설정
├── package.json
└── tsconfig.base.json

✔️ 멀티레포와의 차이점

멀티레포는 모노레포와 상반된 개념으로 프로젝트를 레포지토리 별로 저장하는 구조이다
도메인별로 독립성을 보장할 수 있고 책임 경계를 분명하게 할 수 있다
서비스별 릴리즈가 유연하고 구조가 단순해서 빠르게 시작할 수 있다
작업물이나 이슈 처리 결과 등의 공유와 찾는 과정이 비교적 협업이 오래 걸린다
새 프로젝트 생성의 비용이 크다

멀티레포 구조 예시

/user-app-repo
/user-admin-repo
/backend-api-repo

✔️ 장점

코드 공유, 변경 추적을 1개의 레포지토리에서 할 수 있기 때문에 협업에 용이하다
공통 로직을 여러 프로젝트에서 사용하기 때문에 한 번의 커밋으로 여러 프로젝트에 반영할 수 있어 코드의 유지보수에 용이하다
여러 프로젝트들이 동일한 도구와 프로세스를 사용하여 빌드하고 테스트할 수 있기 때문에 프로젝트 환경 세팅이 쉬워진다

✔️ 단점

규모가 커질수록 코드 관리가 어려워질 수 있다
멀티레포보다 비교적 코드 베이스가 커지기 때문에 빌드 최적화 툴을 사용하지 않으면 빌도 속도가 느려진다
어려 프로젝트를 사용하기 때문에 코드 간의 충돌이 발생할 가능성이 있다

✔️ 프론트엔드와 백엔드도 같은 레포지토리에 넣는 게 좋은가

언어가 같거나 협업이 긴밀할 때만 레포지토리를 분리하지 않는 것을 추천!
서로 다른 언어라면 일관되고 재사용 가능한 체계로 통일하기 어려움 (빌드 도구, 환경 설정 따로 관리, 타입 변환 도구 필요)
분리하지 않은 만큼 코드베이스가 커져 불필요한 부분까지 매번 다 빌드되기 때문에 빌드 속도가 느려져 이점보다 단점이 커짐

✔️ 어떤 프로젝트에서 사용하는 게 좋은가?

협업의 효율이 좋아하는 프로젝트일 때 (스타트업/소규모팀)
(프론트엔드 기준) 다른 도메인이지만 일관된 UI를 사용하고 싶을 때
여러 프로젝트의 변화를 한 눈에 파악해야 할 때
공통 코드가 많고 빠르게 코드를 수정하고 프로덕트에 반영해야 되는 프로젝트

🔧 모노레포 툴 정리

모노레포를 실무에 도입할 때 많이 사용하는 주요 툴은 아래와 같다

Turborepo

항목	설명
개발사	Vercel
언어 지원	JS, TS 기반 (React/Next.js에 최적화)
의존성 관리	Yarn/NPM/PNPM Workspaces와 함께 사용
캐시 지원	로컬 + 원격 캐시 모두 가능
빌드 전략	Task 기반 DAG 빌드, 병렬 실행, 변경 감지
CI/CD 통합	GitHub Actions 등과 원활하게 연동됨

Nx

항목	설명
개발사	Nrwl (ex-Google Angular core dev)
언어 지원	JS/TS 기반이지만, plugins 통해 다양한 언어 확장
의존성 관리	자체 CLI + Yarn/PNPM Workspaces
캐시 지원	로컬 + 원격 캐시 + 분산 빌드
빌드 전략	고급 DAG 분석, affected기반 작업만 수행
시각화 도구	nx graph로 의존성 시각화 가능

Lerna

항목	설명
개발사	Community (현재 유지 중단 상태였다가 Turborepo에 흡수된 느낌)
언어 지원	JS/TS
의존성 관리	Yarn/NPM Workspaces 필요
빌드 전략	기본은 단순한 `run` 순차 실행, 복잡한 빌드 최적화는 없음
캐시 지원	없음 (따로 설정 필요)

Yarn / npm Workspacesv

항목	설명
개발사	Meta (Yarn), npm (OpenJS Foundation)
기능	의존성 연결, 중복 제거 (`hoisting`)
빌드 전략	자체 없음 (Turborepo/Nx와 함께 사용)
캐시 지원	의존성 캐시 (`node_modules`)만 제공

Bazel

항목	설명
개발사	Google
언어 지원	거의 모든 언어 (Java, Go, Rust, JS 등)
특징	빌드 시스템 자체를 구성하는 툴
캐시 지원	고급 분산 캐시 시스템
CI/CD 통합	복잡하지만, 강력한 확장성

전체 비교 요약표

항목	Turborepo	Nx	Lerna	Yarn Workspaces	Bazel
언어 지원	JS/TS	JS/TS (+ 확장)	JS/TS	JS/TS	대부분
변경 추적	✅	✅ (nx affected)	❌	❌	✅
원격 캐시	✅	✅	❌	❌	✅
의존성 관리	Workspaces	자체 + Workspaces	Workspaces	Workspaces	자체
시각화/분석	❌	✅	❌	❌	✅
러닝 커브	낮음	중~높음	낮음	낮음	매우 높음
추천 대상	React/Next.js	대규모/기업	소규모/단기	최소 구성	초대형 멀티언어 시스템

💻 프로젝트에 적용하기

✔️ 서비스 요약

서비스 종류 : 커뮤니티
도메인 종류 : 어드민, 사용자로 분리
페이지 수 : 10개 내외

✔️ 기술스택

프론트엔드

언어 : JavaScript
프레임워크 : TypeScript
라이브러리 : React
스타일링(CSS) : Tailwind css, shadcn/ui
배포 : vercel

백엔드

언어 : java
프레임워크 : spring boot 3.5
라이브러리: jpa
서비스 환경: docker, kafka
db: postgreSQL, redis
CI/CD: git / Jenkins
AI 개발 환경 : MCP [cursor, claude etc...]
api 문서화 : 스웨거

✔️ 왜 모노레포를 사용하는가?

짧은 기간과 작은 규모의 프로젝트로 빠른 협업과 생산성이 필요함
2개의 도메인(사용자, 어드민)에 공통 로직이 많고 일관된 UI를 구현하기 위함
많은 기업에서 사용하는 모노레포에 대한 경험을 쌓기 위해서

⚙️ 설정 계획

Turborepo와 pnpm을 사용

Turborepo 모노레포 툴 사용 이유

낮은 러닝 커브로 빠른 세팅 가능
vercel 배포에 최적화
JS, TS 기반으로 기술스택에 최적화
Github Actions에 원활하게 연동됨
변경된 사항만 빌드되기 때문에 빌드 최적화 가능

pnpm 패키지 매니저 사용 이유

중복된 패키지를 제거해 줌
성능이 좋아 속도가 빠름
모노레포에 최적화됨

배포 계획

vercel의 무료 사용을 위해 조직 소유의 모노 레포지토지를 만든 후에 개인 레포지토리로 fork함
어드민, 사용자 도메인별로 vercel 프로젝트도 2개로 나눠서 fork 해야 함

📑참고 자료

[리액트] 모던 리액트 딥다이브 15장

Sat, 28 Dec 2024 10:20:37 GMT

15장 마치며

15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항

15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자

리액트 16.8 이후로 훅이 소개되면서 함수 컴포넌트의 개념이 정립되어 중요한 업데이트가 이뤄졌다.
리액트 17 버전은 새루온 기능 출시 및 호환성이 깨지는 변경 사항을 최소한으로 맞춘 업데이트이므로 가능하다면 17버전으로 가는 것도 좋다.

클래스 컴포넌트를 함수 컴포넌트로 리팩토링 해야할까?

굳이 그럴 필요 없다
리액트 팀에서 클래스 컴포넌트를 제거할 계획이 없다고 했다.

15.1.2 인터넷 익스플로러 11지원을 목표한다면 각별히 더 주의를 기한다

IE11을 지원하는 애플리케이션은 각별히 라이브러리 설치에 주의해야 한다.

인터넷 익스플로러 11을 지원하지 않는 대표적인 라이브러리

리액트 : 18버전부터 IE11을 지원하지 않기로 했다
Next.js : 13버전부터 공식적으로 IE11을 지원하지 않기로 했다
query-string : 주소의 쿠리 문자열을 다루는 대표적인 라이브러리로, 6.x 버전부터 IE를 지원하지 않는다

15.1.3 서버 사이드 렌더링 애플리케이션을 우선적으로 고려한다

기본 HTML에 온전히 자바스크립트로 렌더링과 라우팅을 수행하는 싱글 페이지 애플리케이션은 대부분의 경우 라이트하우스와 WebPageTest, 구글 개발자 도구에서 좋은 결과를 얻기 어렵다.
많은 사용자를 감당해야 된다면 서버 사이드 렌더링을 고려하는 것이 좋다.
싱글 페이지 애플리케이션을 추천하는 경우
- 제한적인 사용자에게 빠르게 웹페이지를 제공해야 하는 경우
- 콘텐츠와 인터렉션이 매우 제한적인 소규모 웹페이지를 만드는 경우
- 서버를 준비해야 할 상황이 여의치 않은 경우

15.1.4 상태 관리 라이브러리는 꼭 필요한 때만 사용한다

과거에는 리액트에서 리덕스를 무조건 설치해서 사용했었다
하지만 현재는 리액트 Context API와 훅의 등장으로 prop drilling 문제를 겪지 않고도 하위 컴포넌트에 원하는 상태값을 전달할 수 있게 됐다
문서 편집기 같이 관리해야 할 상태가 많고, 여러 상태를 합성해서 또 새로운 상태를 파생하는 등 상태에 대한 여러 가지 필요성이 많은 애플리케이션이라면 상태 관리를 사용하는 것이 좋다
비교적 정적인 애플리케이션에서는 상태 관리 라이브러리가 굳이 필요하지 않다

15.1.5 리액트 의존성 라이브러리 설치를 조심한다

리액트에 의존적인 라이브러리는 대부분 react-** 같은 이름을 가지고 있으며, 아래와 같은 의존성을 가지고 있다

{
    "peerDependencies": {
        "react": "^16.8.6 || ^17.0.0",
        "react-dom": "^16.8.6 || ^17.0.0"
    }
}

이때 반드시 이 peerDenpendencies가 설치하고자 하는 프로젝트의 리액트 버전과 맞는지 확인해야 한다
이 버전이 맞지 않다면 정상적인 방법으로 설치가 불가능하고, 설령 억지로 설치한다 하더라도 향후 문제를 일으킬 가능성이 크다
특히 리액트 18에서는 외부 상태를 관리하는 방법이 변경됐기 때문에 잘못 설치했다면 버그를 야기할 가능성이 크다

15.2 언젠가 사라질 수도 있는 리액트

15.2.1 리액트는 그래서 정말 완벽한 라이브러리인가?

리액트는 가장 널리 쓰이는 프론트엔드 라이브러리는 맞지만 여전히 리액트를 반대하는 사람들은 많다.
리액트를 반대하는 사람들의 의견을 아래와 같다

클래스 컴포넌트에서 함수 컴포넌트로 넘어오면서 느껴지는 혼란

리액트 공식 홈페이지에는 클래스 컴포넌트에 대한 설명도 작성되어 있어서 입문자를 혼란스럽게 한다
이에 반해 Svelte와 Vue는 문서가 깔끔하고 잘 정리돼 있는 편이다. 무엇보다 함수 컴포넌트와 클래스 컴포넌트와 같은 큰 패러다임의 차이도 없기 때문에 초보자가 훨씬 이해하기 편하다

너무 방대한 자유가 주는 혼란

리액트에서 스타일을 입힐 수 있는 방법은 다양하다
- 외부 스타일시트 임포트
- 인라인 스타일
- CSS Module 기법 적용
- styled-components
- emotion
상태 관리 또한 다양한 옵션이 있다
- Redux
- MobX
- Jotai
- Zustand
- React Tracked
- Valtio
자칫 파편화된 리액트 기술 스택은 새로운 리액트 개발자에게 장애물이 될 수 있다

15.2.2 오픈소스 생태계의 명과 암

페이스북 라이선스 이슈

리액트는 BSD+Parents 라이선스를 사용하고 있었다.
이 라이선스는 '이 라이선스를 적용한 소프트웨어에 대해서 특정한 사건이 발생한다면 라이선스가 통지 없이 종료될 수 있다'라는 조항이 있다
2017년 7월, 아파치 재단에서 BSD+Parents 라이선스를 사용하는 것을 금지한다고 밝히면서 격론이 일어났고 결국 MIT 라이선스로 변경되었다
이 라이선스 사건은 한바탕 소동으로 끝났지만 개발자들에게는 자신이 오픈소스로 만든 소프트웨어에 대한 권리를 한순가에 잃어버릴 수 있다는 경각심을 갖게 하는 계기가 됐다

오픈소스는 무료로 계속 제공될 수 있는가? color.js, faker.js, 그리고 바벨

오픈소스인 바벨은 풀타임 개발자들을 고용해 급여를 주고 있지만 재정난이 있어 모금을 계속하고 있다고 밝혔다
color.js는 고의로 무한 루프를 삽입한 코드를 커밋해 1.4.1을 배포해 버렸다
faker.js은 5.5.3 버전에서 갑자기 6.6.6으로 넘어갔는데, 이 6.6.6 버전에는 아무런 코드가 남아있지 않았다.
우리는 npm 오픈소스 생태계 덕분에 700여 개의 라이브러리를 모두 무료로 사용하고 있지만 위와 같은 사례가 발생할 수 있다

15.2.3 제이쿼리, Angular JS, 리액트, 그리고 다음은 무엇인가?

과거에는 서버와 웹페이지가 함께 있는 프레임워크가 주를 이뤘다면 현재로 오면서 점차 프론트엔드 단독 프레임워크가 증가하는 것을 볼 수 있다
계속해서 새로운 프레임워크가 등장하고 있지만 그중에서도 리액트는 꾸준히 사랑받고 있다.
하지만 상태 관리 라이브러리를 중심으로 한 다양한 옵션에 대한 피로감, 훅에 대한 거부감과 어려움 등으로 인해 점차 부정적인 의견이 조금씩 나타나고 있다

15.2.4 웹 개발자로서 가져야 할 유연한 자세

어떤 프레임워크가 라이브러리를 사용하든 변하지 않은 사실은 HTML과 CSS, 자바스크립트가 웹 페이지를 구성하는 기초 기술이라는 사실이다
하지만 이 생태계가 계속 이 수준에서 머물러 있을 것이라는 뜻은 아니다. 최근에는 느린 자바스크립트를 대신할 하나의 방안으로 웹어셈블리가 떠오르고 있다
웹어셈블리는 C, C++, 러스트와 같은 시스템 프로그래밍 언어로 작성된 프로그램을 웹에서 사용할 수 있게 해준다
자바 스크립트보다 훨씬 더 빠른 언어로 작성돼 있기 때문에 일반적으로 웹에서 자바스크립트 기반으로 처리하기 어려운 작업을 웹어셈블리를 활용해 처리할 수 있다
하지만 웹 어셈블리는 자바스크립트에 대체하는 것이 아닌 함께 상호 보완적으로 실행되는 도구라고 보는 것이 적절하다
이 밖에도 Next.js에서 살펴본 SWC, 터보팩 모두 러스트로 작성되어 자바스크립트로 실행되는 바벨과 웹팩을 속도 측면에서 개선하려는 시도도 이뤄지고 있다
그렇다고 당장 리액트를 버리고 다른 프레임워크나 라이브러리를 배워야 하는 것은 아니다
중요한 것은 웹 개발이 HTML, CSS, 자바스크립트라는 토대 위에 세워졌음을 깨닫고 자바스크립트에 대해 깊게 공부하는 것을 추천한다
또한 11억 개가 넘는 웹사이트가 존재하는 인터넷에는, 리액트가 아닌 것들이 많다. 그렇기 때문에 리액트를 넘어 다양한 자바스크립트를 세계를 맛본다면 더욱 유연한 개발자가 될 수 있다

[리액트] 모던 리액트 딥다이브 12장

Sat, 21 Dec 2024 16:16:36 GMT

12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

12.1 웹사이트와 성능

사용자가 웹사이트에 접속했을 때 기대하는 사항

방문한 목적을 쉽게 달성할 수 있어야 함
방문한 목적을 달성하는데 시간이 짧아야 함
웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안에 철저해야 함

12.2 핵심 웹 지표란?

구글에서 만든 지표로, 웹사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어이다

핵심 웹 지표 3가지

최대 콘텐츠 풀 페인트(LCP)
최초 입력 지연(FID)
누적 레이아웃 이동(CLS)

특정 문제를 진단하는 데 사용할 수 있는 2가지 지표

최초 바이트까지의 시간(TTFB)
최초 콘텐츠풀 시간(FCP)

12.3 최대 콘텐츠 풀 페인트(LCP)

12.3.1 정의

페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간을 말한다

뷰포트 내부에서 '큰 이미지와 텍스트'

내부의
poster 속성을 사용하는
url()을 통해 불러온 배경 이미지가 있는 요소
텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소
- 이 블록 레벨 요소에는
  ,
  등이 포함된다

이미지와 텍스트가 각각 사용자의 시점에 언제 노출됐는지를 확인하는 정확한 시점은 W3C 문서에 나와 있다.

12.3.2 의미

웹페이지가 로딩이 완료되어 사용자에게 노출되기까지 걸리는 시간의 기준을 DOMCotentLoaded 이벤트가 호출되는 시간으로 잡으면 안 된다
DOMCotentLoaded는 HTML 문서를 완전히 불러오고 파싱했을 때 발생하는 이벤트로, 페이지의 document를 대상으로 일어나며 단 한 번만 호출된다. 이 이벤트는 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다.
사용자는 화면에 노출되는 부분만 로딩돼 있다면 사용자는 페이지 로딩이 완료되었다고 느끼기 때문에 뷰포트에 메인 콘텐츠가 화면에 완전히 전달되는 속도를 기준으로 한다.
따라서 사용자에게 페이지의 정보를 화면에 전달하는 속도를 객관적으로 판단하기 위한 지표로 만들어진 것이 바로 최대 콘텐츠풀 페인트이다.

12.3.3 예제

생략
LCP는 페이지 로딩에 따라 변화하는 지표이다. 사용자가 이용하는 디바이스의 크기에 따라 그리고 그것이 이미지와 같이 크기가 큰 리소스라면 실제로 로딩에 필요한 시간에 따라 LCP의 값이 달라질 수 있다

12.3.4 기준 점수

기준 점수를 측정하는 방법은 자바스크립트 API를 호출하는 방법과 다른 도구를 활용하는 방법(더 많이 사용)이 있다
해당 지표가 2.5초 내로 응답이 오는 것이 좋은 점수이다. 4초 이내로 응답이 온다면 보통, 그 이상이 걸리면 나쁨으로 판단한다

12.3.5 개선 방안

텍스트는 언제나 옳다

가장 확실한 방법이다.
이미지를 최적화해도 텍스트 노출이 훨씬 더 빠르다.

이미지는 어떻게 불러올 것인가?

이미지 노출하는 방법으론 아래와 같이 여러 가지가 있다
- 브라우저의 프리로드 스캐너에 의해서 먼저 발견되어 빠르게 요청이 일어난다.
- 프리로드 스캐너란 HTML을 파싱하는 단계를 차단하지 않고 이미지와 같이 빠르게 미리 로딩하면 좋은 리소스를 먼저 찾아 로딩하는 브라우저의 기능이다
- HTML 파싱이 미처 완료되지 않더라도 프리로드 스캐너가 병렬적으로 리소스를 다운로드하므로 LCP 요소를 불러오기에 적절한 방법이다
- 모든 리소스를 다 불러온 이후에 이미지를 불러온다
- 따라서 프리로드 스캐너에 의해 발견되지 않아 병렬적으로 다운로드가 일어나지 않는다. 이는 결국 최대 LCP 점수에도 악영향을 미쳐 권장하지 않는다
의 poster
- poster는 사용자가 video 요소를 재생하거나 탐색하기 전까지 노출되는 요소다
- 프리로드 스캐너에 의해 조기에 발견되어 적절한 방법이다
- 향후 poster가 없는 video의 경우 video를 실제로 로딩해 첫 번째 프레임을 해당 poster 리소스로 대체할 예정이기 때문에 poster를 반드시 넣어주는 것이 좋다
background-image
```
...
```
- CSS에 있는 리소스는 항상 느리다. 이러한 리소스는 브라우저가 해당 리소스를 필요로 하는 DOM을 그릴 준비가 될 때까지 리소스 요청을 뒤로 미루기 때문에 사용하지 않는 것이 좋다.

그 밖에 조심해야 할 사항

이미지 무손실 압축 : 이미지는 가능한 한 무손실 형식으로 압축해 최소한의 용량으로 서비스하는 것이 좋다
loading=lazy 주의 : loading=lazy는 리소스를 중요하지 않음으로 표시하고 필요할 때만 로드하는 전략이기 때문에 LCP의 이미지에 사용하면 로딩 속도를 늦춰서 사용하지 않는 것이 좋다
fadein과 같은 각종 애니메이션 : 이미지가 그냥 뜨는 것보다 fadein을 쓰면 LCP도 늦어진다
클라이언트에서 빌드하지 말 것 : 서버에서 빌드해온 HTML을 프리로드 스캐너가 바로 읽어서 최대 콘텐츠풀 페인트로 빠르게 가져가는 것이 최덕의 시나리오이다
최대 콘텐츠풀 리소스는 직접 호스팅 : 이미 연결이 맺어진 현재 출처가 아니라 완전 새로운 출처의 경우에는 네트워크 커넥션부터 다시 수행하기 때문에 권장하지 않는다

12.4 최초 입력 지연(FID)

12.4.1 정의

사용자가 페이지와 처음 상호 작용할 때(예: 링크를 클릭하거나 버튼을 탭하거나 사용자 지정 JavaScript 기반 컨트롤을 사용할 때)부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정한다
쉽게 말해 사용자가 최초의 입력을 할 때 얼마나 빠르게 웹페이지와의 상호작용에 대한 응답을 받을 수 있는지를 측정하는 지표이다

12.4.2 의미

대부분 웹사이트 내부의 이벤트가 반응이 늦어지는 이유는 해당 입력을 처리해야 하는 브라우저의 메인 스레드가 바쁘기 때문이다.
메인 스레드가 바쁜 이유는 대규모 렌더링이 일어나고 있거나 다른 작업을 처리하는 데 리소스를 할애하고 있기 때문이다.
즉, 이벤트가 발생하는 시점에 최대한 메인 스레드가 다른 작업을 처리할 수 있도록 여유를 만들어 둬야 사용자에게 빠른 반응성을 보장할 수 있다.

구글에서 정의한 사용자 경험 4가지(RAIL)

Response: 사용자의 입력에 대한 반응 속도를 50ms 미만으로 이벤트를 처리할 것 (FID에 해당당)
Animation: 애니메이션의 각 프레임을 10ms 이하로 생성할 것
Idle: 유휴 시간을 극대화해 페이지가 50ms 이내에 사용자 입력에 응답하도록 할 것
Load: 5초 이내에 콘텐츠를 전달하고 인터렉션을 준비할 것

정리

화면이 최초에 그려지고 난 뒤, 사용자가 웹페이지에서 클릭 등 상호작용을 수행했을 때 메인 스레드가 이 이벤트에 대한 반응을 할 수 있을 때까지 걸리는 시간을 의미한다.
이 사간은 메인 스레드가 처리해야 하는 다른 작업이 많을수록 느리다

12.4.3 예제

크롬으로 디버깅하는 것은 이벤트가 처리되는 것이 얼마나 지연되는지만 알 수 있다
즉, 최초 이벤트 발생으로부터 해당 이벤트의 핸들러가 실행되는 순간까지 사이의 기간만 측정한다
만약 이벤트 핸들러의 실행 시간을 측정하고 싶다면 Event Timing API를 사용하는 것이 좋다

12.4.4 기준 점수

좋은 점수의 기준은 100ms 이내로 응답이 와야 하며, 300ms 이내인 경우 보통, 그 이후에는 나쁨으로 처리된다

12.4.5 개선 방안

실행에 오래 걸리는 긴 작업을 분리

만약 실행에 오래 걸리는 작업이 있다면 몇 가지 대안을 연구해야 한다
꼭 웹페이지에서 해야 하는 작업인가?
꼭 웹페이지에서 해야 되는 작업이 아니라면 서버로 옮겨서 처리하는 것이 좋다. 서버에서 처리하면 상대적으로 빠르고 쾌적한 환경에서 처리해 브라우저의 메인 스레드를 오래 점유하지 않게 할 수 있다.
긴 작업을 여러 개로 분리하기
하나의 긴 작업이 메인 스레드를 계속 점유할수록 사용자는 페이지에서 응답을 받지 못하고 있을 가능성이 크다. 웹페이지 최초 로딩에 필요하지 않은 내용을 나중에 불러오는 것도 포함해서 분리하는 것이 좋다

자바스크립트 코드 최소화

현재 사용하지 않는 코드 중에서는 특정 이벤트에 따라 실행되는 코드, 예기치 못한 상황에서 실행될 코드 등 다양한 것들이 존재할 수 있다
이러한 코드들은 당장에 급하지 않은 코드로 간주해서 앞서 언급한 지연 로딩 기법, 사용자가 필요로 하는 순간에 불러오거나 우선순위를 낮춰서 불러오는 것이 좋다
폴리필 확인하기
폴리필이란 브라우저에서 지원하지 않는 기능을 사용하기 위해 웹페이지에서 직접 구현하고 집어넣는 코드를 의미한다
한 메서드에 들어가는 폴리필의 크기가 제법 크기 때문에 폴리필을 넣기 전에 반드시 2가지를 확인해 봐야 한다
1. 폴리필이 필요한 환경인가? : 만약 구현 브라우저 환경을 지원하지 않기로 결심했다면 폴리필을 집어 넣을 필요가 없다
2. 꼭 필요한 폴리필인가? : 애플리케이션의 여러 군데에서 자주 사용하는 코드인지 반드시 확인해 봐야 한다. 만약 사용하는 곳이 몇 군데 되지 않는다면 직접 저수준 자바스크립트 코드를 작성해 구현하는 편이 도움이 될 수 있다

타사 자바스크립트 코드 실행의 지연

Google Analytics나 Firebase와 같이 웹페이지의 통계 집계를 위해 제3자가 만든 타사 스크립트를 넣는 경우도 있다. 이러한 코드의 실행으로 메인 스레드가 점유될 수 있다.
이러한 타사 스크립트는 대부분 웹 페이지 로드에 중요한 자원이 아니므로 Apple ...
- document.getElementById('apple')은 DOM에서 id가 apple인 HTML 요소를 취득한다. 하지만 id가 apple인 HTML 요소를 파싱하지 않았기 때문에 정상적으로 동작하지 않는다
- 이러한 문제를 피하기 위해서 body 요소 가장 아래에 script 태그를 위치하는 것이 좋다
script 태그의 async/defer 어트리뷰트

자바스크립트 파싱에 의한 HTML 파싱 중단 문제를 해결하기 위해 HTML5부터 script 태그에 async와 defer 어트리뷰트가 추가되었다. async와 defer 어트리뷰트는 src 어트리뷰트를 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있다. 즉, src 어트리뷰트가 없는 인라인 자바스크립트에는 사용할 수 없다.
async와 defer 어트리뷰트를 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 하지만 자바스크립트의 실행 시점에 차이가 있다.

async 어트리뷰트
- 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며, 이때 HTML 파싱이 중단된다.
- 여러 개의 script 태그에 async 어트리뷰트를 지정하면 script 태그의 순서와는 상관없이 로드가 완료된 자바스크립트부터 먼저 실행되므로 순서가 보장되지 않는다. 따라서 순서 보장이 필요한 script 태그에는 async 어트리뷰트를 지정하지 않아야 한다. async 어트리뷰트는 IE 10 이상에서 지원된다.
defer 어트리뷰트
- 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후 진행된다. 따라서 DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용하다. defer 어트리뷰트는 IE 10 이상에서 지원한다.
참고

모던 자바스크립트 딥다이브 책

[자바스크립트] Babel과 Webpack

Fri, 11 Oct 2024 06:32:14 GMT

Babel

Babel이란?

추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러이다
바벨을 통해 ES6+의 자바스크립트 코드는 하위 버전으로 변환되고, 그로 인해 IE나 다른 브라우저에서 동작할 수 있게 만든다

설치 방법

# 프로젝트 폴더 생성
$ mkdir esnext-project && cd esnext-project
# package.json 생성
$ npm init -y
# bable-core, babel-cli 설치
$ npm install --save-dev @babel/core @babel/cli

프리셋 설치와 babel.config.json 설정 파일 작성

Babel을 사용하려면 @babel/preset-env를 설치해야 한다
프리셋은 @babel/preset-env과 함께 사용되어야 하는 Babel 플러그인을 모아둔 것이다
@babel/preset-env는 필요한 플러그인들을 프로젝트 지원 환경에 맞춰 동적으로 결정해 준다. 프로젝트 지원 환경은 Browserslist 형식으로 .browerslistrc 파일에 상세히 설정할 수 있다.
```
# @babel/preset-env 설치
$ npm install --save-dev @babel/preset-env
```
설치가 완료되면 프로젝트 루트 폴더에 babel.config.json 설정 파일을 생성하고 아래와 같이 작성한다
```
{
"presets":["@babel/preset-env"]
}
```

트랜스파일링

Babel CLI 명령어도 있지만 npm scripts에 Babel CLI 명령어를 등록해서 사용할 수 있다

package.json 파일에 scripts를 추가한다. 완성된 package.json파일은 다음과 같다

{
"name":"esnext-project",
"version":"1.0.0",
"scripts":{
  "build": "babel src/js -w -d dist/js"
},
"devDependencies":{
  "@babel/cli": "^7.10.3",
  "@babel/core": "^7.10.3",
  "@babel/preset-env": "^7.10.3",
}
}

-w는 타깃 폴더에 있는 모든 자바스크립트 파일들의 변경을 감지하여 자동으로 트랜스파일한다
-d는 트랜스파일링된 결과물이 저장될 폴더를 지정한다. 만약 지정된 폴더가 존재하지 않으면 자동 생성한다
이제 트랜스파일링을 테스트하기 위해 ES6+/ES.NEXT 사양의 자바스크립트 파일을 작성해보자. 프로젝트 루프 폴더에 src/js 폴더를 생성한 후 lib.js와 main.js를 추가한다
```
// src/js/lib.js
export const pi = Math.PI; // ES6 모듈
```

export function power(x,y) { return x ** y; }

// ES6 클래스 export class Foo { #private = 10;

foo() { const {a,b, ...x} = {...{a:1,b:2},c:3,d:4}; return {a,b,x}; }

bar() { return this.#private; } }


```js
// src/js/main.js
import * from './lib';

console.log(pi);
console.log(power(pi,pi));

const f = new Foo();
console.log(f.foo());
console.log(f.bar());

터미널에서 아래와 같이 명령어를 입력하여 트랜스파일링을 실행한다
```
npm run build
```
명령어를 실행하면 에러가 발생한다. @babel/preset-env가 현재 제안 단계에 있는 사양에 대한 플러그인을 지원하지 않기 때문에 별도의 플러그인을 설치해야 한다

플러그인 설치

Babel 공식사이트에서 원하는 플러그인을 검색할 수 있다
검색된 플러그인 중에서 public/private 클래스 필드를 지원하는 @babel/plugin-proposal-class-properties를 설치하자
```
$ npm install --save-dev @babel/plugin-proposal-class-properties
```
설치한 플러그인은 babel.config.json 설정 파일에 추가해야 한다. babel.config.json 설정 파일을 아래와 같이 수정한다
```
{
"presets":["@babel/preset-env"],
"plugins":["@babel/plugin-proposal-class-properties"]
}
```
다시 npm run build를 입력하여 트랜스파일링을 실행하면 성공할 수 있다.

브라우저에서 모듈 로딩 테스트

지금까지 예제의 모듈 기능은 Node.js 환경에서 동작한 것이고 Babel이 모듈을 트랜스파일링한 것도 Node.js가 기본 지원하는 CommonJS 방식의 모듈 로딩 시스템에 따른 것이다.
브라우저는 CommonJS 방식의 require 함수를 지원하지 않으므로 위 예제로 트랜스파일링된 파일을 브라우저에서 실행하면 에러가 발생한다.
브라우저의 ESM을 사용하도록 Babel을 설정할 수도 있으나 앞서 설명한 바와 같이 ESM을 사용하는 것은 문제가 있고, 이러한 문제를 Webpack에서 해결할 수 있다

Webpack

Webpack이란?

의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러다.
의존 모듈이 파일로 번들링되므로 별도의 모듈 로더가 필요 없다.
여러 개의 자바스크립트 파일을 하나로 번들링하므로 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다

설치 방법

$ npm insatll --save-dev webpack webpack-cli

babel-loader 설치

Webpack이 모듈을 번들링할 때 Babel을 사용하여 ES6+/ES.NEXT 사양의 소스코드를 ES5 사양의 소스코드로 트랜스파일링하도록 babel-loader를 설치한다
```
$ npm install --save-dev babel-loader
```

npm scripts를 변경하여 Babel 대신 Webpack을 실행하도록 수정한다

{
"name":"esnext-project",
"version":"1.0.0",
"scripts":{
  "build": "webpack -w"
},
"devDependencies":{
  "@babel/cli": "^7.10.3",
  "@babel/core": "^7.10.3",
  "@babel/preset-env": "^7.10.3",
  "webpack":"^4.43.0",
  "webpack-cli":"^3.3.12"
}
}

webpack.config.js 설정 파일 작성

webpack.config.js는 Webpack이 실행될 때까지 참조하는 설정파일이다. 프로젝트 루트 폴더에 webpack.config.js 파일을 생성하고 다음과 같이 작성한다
```
//webpack.config.js
```

const path = require("path");

module.exports = { entry: "./src/js/main.js", output: { path: path.resolve(dirname, "dist"), filename: "js/bundle.js", }, module: { rule: [ { test: /.js$/, include: [path.resolve(dirname, "src/js")], exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], plugins: ["@babel/plugin-proposal-class-properties"], }, }, }, ], }, devtool: "source-map", mode: "development", };

- `npm run build` 명령어를 통해 Webpack을 실행하면 dist/js 폴더에 bundle.js가 생성되었다. 이 파일을 main.js, lib.js 모듈이 하나로 번들링된 결과물이다. index.html을 다음과 같이 수정하고 브라우저에서 실행해보자
```js

main.js, lib.js 모듈이 하나로 번들링된 bundle.js가 브라우저에서 문제없이 실행된 것을 확인할 수 있다

babel-polyfill 설치

Babel을 사용하여 ES9+ES.NEXT의 사양의 소스코드를 ES5 사양의 소스코드로 트랜스파일링해도 브라우저가 지원하지 않는 코드가 남아 있을 수 있다.
src/js/main.js를 다음과 같이 수정하여 Promise, Object.assign, Array.from 등이 어떻게 트랜스파일링 되는지 확인해보자.
```
//src/js/main.js
import { pi, power, Foo } from "./lib";
```

console.log(pi); console.log(power(pi, pi));

const f = new Foo(); console.log(f.foo()); console.log(f.bar());

// polyfill이 필요한 코드 console.log( new Promise((resolve, resject) => { setTimeout(() => resolve(1), 100); }) );

// polyfill이 필요한 코드 console.log(Object.assign({}, { x: 1 }, { y: 2 }));

// polyfill이 필요한 코드 console.log(Array.from([1, 2, 3], (v) => v + v));

다시 트랜스파일링과 번들링을 실행한 다음, dist/js/bundle.js를 확인해보자.
```js
console.log(new Promise(function (resolve, reject) {
    setTimeout(function ()
        return resolve(1);
    }, 100);
})); // polyfill이 필요한 코드

// polyfill이 필요한 코드
console.log(Object.assign({}, {
 x: 1
}, {
 y: 2
}));

// polyfill이 필요한 코드
console.log(Array.from([1, 2, 3], function (v) {
    return v + v;
}));

이처럼 Promise, Object.assign, Array.from 등과 같이 ES5 사양으로 대체할 수 없는 기능은 트랜스파일링 되지 않는다. 따라서 구형 브라우저에서도 Promise, Object.assign, Array.from 같은 객체나 메서드를 사용하기 위해서는 @babel/polyfill을 설치해야 한다.
```
$npm install @babel/polyfill
```
@babel/polyfill은 개발 환경에서만 사용해야하는 것이 아니라 실제 운영 환경에서도 사용해야한다. 따라서 —save-dev 옵션을 지정하지 않는다.
ES6의 import를 사용하는 경우에는 진입점의 선두에서 먼저 폴리필을 로드하도록 한다.
```
import "@babel/polyfill";
import { pi, power, Foo } from "./lib";
...
```
Webpack을 사용하는 경우에는 위 방법 대신 webpack.config.js 파일의 entry 배열에 폴리필을 추가한다.
```
const path = require('path');
```

module.exports = { ... entry: ['@babel/polyfill', './src/js/main.js'], ... }

```

위와 같이 폴리필을 반영한 뒤 Webpack을 실행한 후, dist/js/bundle.js를 확인해보면 폴리필이 추가된 것을 확인할 수 있다.

- 출처 : 모던 자바스크립트 딥다이브 책

자바스크립트 모듈

Fri, 11 Oct 2024 03:40:08 GMT

모듈이란?

애플리케이션을 구성하는 개별적인 요소로서 재사용 가능한 코드 조각

모듈의 특징

모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 함

자신만의 파일 스코프를 갖는 모듈의 자산은 기본적으로 비공개 상태다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다

모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 한다

모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다
공개된 모듈의 자산은 다른 모듈에서 재사용할 수 있다. 이때 공개된 모듈의 자산을 사용하는 모듈을 모듈 사용자라 한다. 모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들어 재사용할 수 있다. 이를 import라 한다.

일반적으로 기능별로 분리되어 파일 단위로 분리한다

코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있고, 재사용성이 좋아 개발 효율성과 유지보수성을 높일 수 있다

자바스크립트에서의 모듈

자바스크립트는 모듈 시스템(파일 스코프, import, export)을 지원하지 않는다

자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도를 목적으로 생겼기 때문에 C언어, 자바와 같이 모듈 기능을 가지고 있지 않다
script 태그를 사용해서 외부의 자바스크립트 파일을 로드할 수 있지만 파일마다 독립적인 파일 스코프를 갖지 않는다
즉, 모든 자바스크립트 파일은 하나의 전역을 공유해서 전역 변수가 중복되는 등의 문제가 발생할 수 있다
자바스크립트에서 모듈 시스템을 사용하기 위해 CommonJS와 AMD 라는 모듈 로더 라이브러리가 나왔다

ES6 모듈(ESM)

이러한 상황에서 ES6에서 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가했다 (IE를 제외한 대부분의 브라우저 사용 가능)

EMS 모듈 사용법

script 태그에 type="module" 어트리뷰트를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작한다.
일반적인 자바스크립트 파일이 아닌 ESM임을 명확하기 위해서 mjs 파일 확장자를 사용하는 것을 권장한다

EMS 모듈 스코프

EMS은 파일 자체의 독자적인 모듈 스코프를 제공한다. 따라서 모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다

모듈 내에서 선언한 식별자는 모듈 외부에서 참조할 수 없다. 모듈 스코프가 다르기 때문이다

// foo.mjs
var x = 'foo';
var y = 'foo2';
console.log(x); // foo
console.log(window.x); // undefined

// bar.mjs
var x = 'bar';
console.log(x); // bar
console.log(window.x); // undefined

console.log(y); // ReferenceError

```html

EMS export 키워드

export 키워드는 선언문 앞에 사용한다.
변수, 함수, 클래스 등 모든 식별자를 export할 수 있다.
```
// lib.mjs
export const pi = Math.PI;
```

export function square(x) { return x * x; }

export class Person { constructor(name) { this.name = name; } }

- export할 대상을 하나의 객체로 구성하여 한 번에 export할 수도 있다
```js
const pi = Math.PI;

function square(x) {
  return x * x;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };

EMS import 키워드

EMS는 import할 때 파일 확장자를 생략할 수 없다
```
// app.mjs
import { pi, square, Person } from "./lib.mjs";
```

console.log(pi); console.log(square(10)); console.log(new Person('Lee'));

```html

모듈이 export한 식별자 이름을 일일이 지정하지 않고 한 번에 import할 수 있다. 이때 import되는 식별자는 as 뒤에 지정한 이름의 객체에 프로퍼티로 할당된다.
```
// app.mjs
import * as lib from './lib.mjs';
```
모듈이 export한 식별자 이름을 변경하여 import할 수도 있다
```
import { pi as PI, square as sq, Person as P } from './lib.mjs';
```
모듈에서 하나의 값만 export한다면 defalut 키워드를 사용할 수 있다. default 키워드를 사용하는 경우 기본적으로 이름 없이 하나의 값을 export한다
```
// lib.mjs
export default x => x * x;
```
default 키워드를 사용하는 경우 var, let, const 키워드는 사용할 수 없다.
```
export default const foo = () => {}; // SyntaxError
```
defalut 키워드와 함께 export한 모듈을 {} 없이 임의의 이름으로 import한다
```
import square from './lib.mjs';
```

- 출처 : 모던 자바스크립트 딥다이브 책

[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 프로젝트 3주차

Sun, 22 Sep 2024 05:16:51 GMT

프로젝트를 진행하면서 UI에 대해 자료조사한 내용을 작성해본다 프론트엔드 개발자는 UI의 트렌드에 대한 지식도 필요하다고 생각한다

참고할만한 사이트

1. Behance

다양한 디자이너들의 포트폴리오가 모여 있는 플랫폼
URL: behance.net

2. Dribbble

디자이너들이 자신의 작업을 공유하는 사이트
URL: dribbble.com

3. Awwwards

독창적이고 창의적인 웹사이트를 소개하는 플랫폼으로, 여러 테마의 웹사이트 디자인을 참고할 수 있습니다.
URL: awwwards.comT

4. hemeForest

다양한 웹사이트 템플릿을 판매하는 사이트.
URL: themeforest.net

사진과 애니메이션이 많으면 좋은 장점

1. 브랜드 이미지 강화

사진은 기업의 역사와 문화를 시각적으로 보여주며, 브랜드 아이덴티티를 강화하는 데 기여합니다. 오래된 기업일수록 각 시대를 대표하는 사진이 기업의 변천사를 효과적으로 전달할 수 있습니다.
애니메이션을 사용하면, 기업의 혁신적이고 현대적인 이미지를 강화할 수 있습니다. 애니메이션은 브랜드가 기술적이고 창의적이라는 인상을 줄 수 있습니다.

2. 사용자의 몰입도 향상

사진과 애니메이션은 단순한 텍스트보다 훨씬 더 많은 관심을 끌고, 사용자가 웹페이지에 더 오래 머무르게 만듭니다. 이를 통해 연혁 페이지에서 기업의 중요한 이정표나 성과를 효과적으로 전달할 수 있습니다.
애니메이션을 통해 페이지 전환이나 콘텐츠 등장 시 부드러운 효과를 제공하면, 사용자는 더 몰입감 있는 경험을 하게 됩니다.

3. 정보 전달의 효율성 증가

사진을 통해 기업의 중요한 순간을 한눈에 보여줄 수 있으며, 긴 텍스트를 읽는 대신 이미지를 통해 빠르게 정보를 파악할 수 있습니다.
애니메이션은 복잡한 연혁을 단계별로 나타내거나 주요 이정표가 부각되도록 시각적 강조를 할 수 있습니다. 예를 들어, 타임라인이 스크롤에 따라 동적으로 변화하면서 주요 사건이 자연스럽게 강조되는 효과를 제공할 수 있습니다.

4. 역동적이고 기억에 남는 사용자 경험

시각적 자료는 사용자의 기억에 오래 남습니다. 기업 연혁을 사진과 애니메이션으로 표현하면 단순히 연도와 사건을 나열하는 것보다 훨씬 더 흥미롭고 기억에 남는 경험을 제공합니다.
인터랙티브 애니메이션을 통해 사용자가 특정 연도나 사건에 대해 더 알아보는 방식으로 웹 페이지와 상호작용할 수 있습니다. 예를 들어, 사용자가 특정 연혁 항목을 클릭하면 그와 관련된 사진이나 동영상이 나타나는 방식이 있을 수 있습니다.

5. 더 나은 모바일 및 다양한 디바이스 경험

사진과 애니메이션은 특히 모바일 사용자들에게 시각적으로 더 큰 임팩트를 줍니다. 작은 화면에서 긴 텍스트를 읽는 것은 어려울 수 있지만, 이미지를 통해 더 효과적으로 정보를 전달할 수 있습니다.
애니메이션은 모바일 기기에서도 부드럽고 자연스러운 사용자 경험을 제공할 수 있습니다. 적절한 애니메이션과 이미지 최적화를 통해 성능 문제를 최소화할 수 있습니다.

6. 복잡한 정보를 쉽게 해석 가능

기업의 연혁은 보통 많은 정보를 포함합니다. 여러 사건이나 성과를 나열하는 방식은 사용자에게 혼란을 줄 수 있지만, 사진과 애니메이션을 적절히 배치하면 연혁을 보다 간결하고 명확하게 정리할 수 있습니다.
예를 들어, 중요한 사건들을 사진과 함께 시간 순서대로 배치하고, 애니메이션으로 흐름을 연결하면 복잡한 정보도 직관적으로 이해하기 쉬워집니다.

7. SEO 및 웹 트래픽 증가

시각적 요소와 애니메이션이 포함된 페이지는 사용자의 참여도를 높이며, 이는 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칠 수 있습니다. 사람들이 페이지에서 오래 머물고 더 많은 페이지를 탐색하게 되면, 검색 엔진은 해당 페이지를 더 긍정적으로 평가할 수 있습니다.

8. 스토리텔링 강화

사진과 애니메이션은 기업 연혁을 단순한 연도별 사건의 나열이 아닌, 하나의 스토리로 만들 수 있습니다. 시각적 자료와 움직임을 통해 기업의 성장을 드라마틱하게 표현하여 사용자가 더 큰 감정적 공감을 느낄 수 있습니다.
예를 들어, 특정 시점에서의 어려움이나 도전, 성과 등을 애니메이션으로 표현하면 더욱 생생하게 기업의 이야기를 전달할 수 있습니다.

[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 프로젝트 1주차

Sun, 08 Sep 2024 02:58:13 GMT

이번 주는 프로젝트를 진행하면서 사용했던 라이브러리인 Framer Motion에서 사용했던 useInView에 대해 정리해본다

Framer Motion이란?

Framer가 제공하는 리액트용 애니메이션 라이브러리이다.

장점

타입 스크립트를 지원한다
최적화된 성능 및 풍부한 API가 있다
애니메이션을 직관적인 코드를 통해 손쉽게 제작해준다
프로토타이핑 툴인 Framer 간에 적용이 용이하다

useInView

요소가 뷰포트에 있는지 확인하는 훅이다.

사용 방법 (공식 홈페이지)

import

import { useInView } from "framer-motion"

모든 HTML 요소의 가시성을 추적할 수 있습니다. ref를 사용하면 객체를 전달할 수 있습니다
```
function Component() {
const ref = useRef(null)
const isInView = useInView(ref)

return 
}
```
요소가 뷰포트 밖에 있는 동안 false를 반환하고 뷰 내부로 이동하면 구성 요소를 다시 렌더링하고 true를 반환합니다.

useEffect

변경 사항이 있을 때마다 함수를 실행 하려면 useEffect에 전달하기만 하면 됩니다.
```
useEffect(() => {
console.log("Element is in view: ", isInView)
}, [isInView])
```
옵션
루트 : RefObject 기본적으로, useInView요소가 창 뷰포트에 들어오거나 나갈 때 요소의 가시성을 추적합니다. root스크롤 가능한 부모의 참조로 설정하면 대신 해당 요소를 뷰포트로 사용합니다.

function Carousel() {
  const container = useRef(null)
  const ref = useRef(null)
  const isInView = useInView({ root: container })

  return (
    
      
    
  )
}

margin : string 요소 또는 창 뷰포트 root에 적용할 하나 이상의 여백입니다. 이는 요소가 뷰포트 내부로 간주되는 지점을 확장하거나 축소할 수 있습니다. 여백은 %또는 px로 정의되어야 합니다
```
const isInView = useInView({
margin: "0px 100px -50px 0px"
})
```
참고: 브라우저 보안상의 이유로, root가 명시적으로 정의되지 않은 한 margin 교차 출처 iframe에는 적용되지 않습니다 .
once : boolean 요소가 뷰포트에 들어오면 useInView가 요소를 관찰하는 것을 멈추고 항상 true를 반환합니다.
```
// 애니메이션이 한 번만 실행됩니다.
const isInView = useInView(ref, { once: true })
```
amount : "some" | "all" | number true를 반환하기 위해 뷰포트에 들어가야 하는 요소의 양입니다. 0과 1사이의 숫자로 정의되며, 여기서 0는 원소의 일부 또는 전부이고, 1는 원소의 전부입니다.

내가 짠 코드

내가 필요한 애니메이션은 스크롤을 내리다가 이미지 요소가 화면 안에 들어왔을 때를 감지하여 이미지의 opacity가 0에서 1로 천천히 올라가는 것으로 구현했다

import { useEffect, useRef } from 'react';

import { motion, useAnimation, useInView } from 'framer-motion';

import img from '이미지 경로';

const Components = () => {
  const controls = useAnimation();
  const ref = useRef(null);
  // 애니메이션이 한 번만 실행된다
  const isInView = useInView(ref, { once: false });

  useEffect(() => {
    if (isInView === false) {
        // 지정된 요소가 뷰포트에 없다면 opacity가 0이 된다
      controls.set({ opacity: 0 });
    } else {
      // 지정된 요소가 뷰포트에 있다면 opacity가 1이 된다
      controls.start({ opacity: 1 });
    }
  }, [isInView, controls]);

  return (
    
      
    
  );
};
export default Components;

참고

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정

[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 2주차 후기

Sun, 01 Sep 2024 12:03:09 GMT

배운 내용

리액트 훅

useEffect
useLayoutEffect
useID
useTransition
useDeferredValue
useTransition vs useDeferredValue

리액트 메모이제이션

useCallback
useMemo
React.memo
useReducer

리액트 컨텍스트

Context API
useContext
zustand

리액트 라우터

react-router-dom
Outlet

데이터 통신

fetch API
Suspense와 ErrorBoundary
Tanstack Query

그외 실무에서 많이 사용하는 기법

이미지를 미리 로딩하는 기법
디바운스 기법

Outlet

이번주에 배운 개념 중 React Router의 Outlet에 대해 정리해보고자 한다.

공식 홈페이지 : https://reactrouter.com/en/main/components/outlet
외부 레이아웃을 쉽게 구성해주는 리액트 라우터 돔의 기능이다.
Outlet은 아래처럼 레이아웃 컴포넌트를 선언해준 후
으로 작성하면 children으로 선언한 컴포넌트가 자동으로 들어간다.
```
// DefaultLayout.tsx (레이아웃으로 사용할 컴포넌트)
import { Link, Outlet } from "react-router-dom";
```

const DefaultLayout = () => { return ( <>

header area

Home

main area

{/* 중간에 컨텐츠를 Outlet로 선언하면 child처럼 들어간다 */}

); }; export default DefaultLayout;

```ts
// router.tsx (라우터만 모아놓은 파일)

import { createBrowserRouter } from "react-router-dom";
import HomeView from "../views/HomeView";
import AboutView from "../views/AboutView";
import BlogView from "../views/BlogView";
import DefaultLayout from "../layout/DefaultLayout";
import BlogLayout from "../layout/BlogLayout";

export const router = createBrowserRouter([
  {
    element: ,
    // 아래와 같이 children으로 선언한 컴포넌트가 Outlet 위치에 들어간다.
    children: [{ path: "/", element:  }],
  },
  {
    element: ,
    children: [
      {
        path: "/blog/:blogId",
        element: ,
      },
    ],
  },
  {
    path: "/",
    element: ,
  },
  {
    path: "/about",
    element: ,
  },
  {
    path: "/blog/:blogId",
    element: ,
  },
]);

// main.tsx (최상위 컴포넌트)

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import { RouterProvider } from "react-router-dom";
import { router } from "./router/index.tsx";

createRoot(document.getElementById("root")!).render(
  
    
  
);

이전까지는 Outlet에 대한 내용을 몰라서 컴포넌트마다 레이아웃 컴포넌트를 불러왔다. 다음주부터 들어가는 프로젝트에서는 Outlet 기능을 사용해서 더 가독성이 좋은 코드를 작성해야겠다.

회고 및 교육 후기

리액트 실무역량이 확실히 발전된 것 같다

리액트, 타입스크립트로 프로젝트를 해보았지만 교육을 들으면서 새로 알게 된 내용도 있어서 아직 많이 부족하다는 것을 느꼈다.
여러 리액트 훅에 대해 공부했지만 프로젝트에서는 어떻게 사용해야 되는지 감이 안 잡혔는데 다양한 실습을 해보면서 어떻게 프로젝트에 적용해야 할지 알 수 있어서 좋았다
책으로 공부하는 편이 내용을 다시 찾아볼 수 있고 메모하기에도 효율적이고 더 좋다고 생각했는데 강의도 강사님이 좋은 분이면 더 이해하기 쉽고 효율적으로 공부할 수 있겠다는 생각이 들었다

교육시설과 운영진분들이 좋았다

넓고 쾌적한 강의시설에서 무료로 강의를 듣고 있다는 것에 감사함을 느꼈다
운영진분들께 질문을 하면 바로 답변해주시고, 친절하게 상세히 설명해주셔서 가끔 감동받았다

교육내용이 알차고 좋았다

부트캠프 강의나 MDN, 다양한 블로그에서 리액트 훅에 대한 설명을 들어도 잘 이해가 가지 않는 경우가 많았는데 강사님께서 쉽게 설명해주시는 편이라 이해가 잘 되었다.
강사님께서 실무적인 내용을 위주로 알려주셔서 참여하길 잘했다는 생각이 들었다.
취업에 대한 내용도 많이 해주셔서 좋았다.

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

자바스크립트의 배열

Sat, 31 Aug 2024 08:21:56 GMT

배열이란?

배열은 여러 개의 값을 순차적으로 나열한 자료구조다. 배열은 사용 빈도가 매우 높은 가장 기본적인 자료구조다.

const arr = ["apple", "banana", "orange"];

배열이 가지고 있는 값을 요소라고 부른다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다.
배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용한다.
요소에 접근할 때는 대괄호 표기법을 사용한다 대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다.
```
arr[0] // apple
arr[1] // banana
arr[2] // orange
```
배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다.
```
arr.length // 3
```
배열은 인덱스와 length 프로퍼티를 갖기 때문에 for문을 통해 순차적으로 요소에 접근할 수 있다.
```
for (let i = 0; i < arr.length; i++){
  console.log(arr[i]);
}
```

자바스크립트의 배열 특징

1. 자바스크립트에 배열이라는 타입은 존재하지 않는다.

자바스크립트의 배열은 일반적인 배열의 동작은 흉내 낸 특수한 Array 객체다.
객체 타입이긴 하지만 일반 객체와 달리 자바스크립트의 배열은 "값의 순서"와 "length 프로퍼티"가 있다. 그래서 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조다.

구분	객체	배열
구조	프로퍼티 키와 프로퍼티 값	인덱스와 요소
값의 참조	프로퍼티 키	인덱스
값의 순서	✕	○
Length 프로퍼티	✕	○

위의 예제처럼 자바스크립트 배열은 인덱스를 나타내는 문자열을 프로퍼티 키로 가지며, length 프로퍼티를 갖는 특수한 객체다. 자바스크립트 배열의 요소는 사실 프로퍼티 값이다.

console.log(Object.getOwnPropertyDesciptors([1, 2, 3]));
/*
{
 '0': {value: 1, writable: true, enumerable: true, configurable: true}
 '1': {value: 2, writable: true, enumerable: true, configurable: true}
 '2': {value: 3, writable: true, enumerable: true, configurable: true}
 length: {value: 13 writable: true, enumerable: false, configurable: false}
}
*/

2. 밀집 배열이 아닌 희소 배열이다.

자바스크립트에서 사용할 수 있는 모든 값은 객체의 프로퍼티 값이 될 수 있으므로 어떤 타입의 값이라도 배열의 요소가 될 수 있다.

const arr = [
  "string",
  10,
  true,
  null,
  undefined,
  NaN,
  Infinity,
  [],
  {},
  function () {},
];

length 프로퍼티 값은 요소의 개수, 즉 배열의 길이를 바탕으로 결정되지만 임의의 숫자 값을 명시적으로 할당할 수도 있다.
현재 length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다.
```
const arr = [1, 2, 3, 4, 5];
```

// 현재 length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이가 줄어든다. arr.length = 3;

// 배열의 길이가 5에서 3으로 줄어든다. console.log(arr); // [1, 2, 3]

- 주의할 것은 현재 length 프로퍼티 값보다 큰 숫자 값을 할당하는 경우다. 이때 length 프로퍼티 값은 변경되지만 배열의 길이가 늘어나지는 않는다.
```js
const arr = [1];

// 현재 length 프로퍼티 값인 1보다 큰 숫자 값 3을 length 프로퍼티에 할당
arr.length = 3;

// length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다.
console.log(arr.length); // 3
console.log(arr); // [1, empty * 2]

위 예제의 출력 결과에서 empty * 2는 실제로 추가된 배열의 요소가 아니다. 즉, arr[1]과 arr[2]에는 값이 존재하지 않는다.
이처럼 현재 length 프로퍼티 값보다 큰 숫자 값을 length 프로퍼티에 할당하는 경우 length 프로퍼티 값은 성공적으로 변경되지만 실제 배열에는 아무런 변함이 없다. 값 없이 비어 있는 요소를 위해 메모리 공간을 확보하지 않으며 빈 요소를 생성하지도 않는다. ```js console.log(Object.getOwnPropertyDesciptors(arr)); /* { '0': {value: 1, writable: true, enumerable: true, configurable: true} length: {value: 3 writable: true, enumerable: false, configurable: false} }
/ ```
자바스크립트의 배열은 지금까지 살펴본 자료구조에서 말하는 일반적인 의미의 배열과 다르다. 즉, 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있다. 배열의 요소가 연속적으로 이어져 있지 않은 배열을 희소 배열이라 한다.
자바스크립트는 문법적으로 희소 배열을 허용하지만 희소 배열은 사용하지 않는 것이 좋다. 의도적으로 희소 배열을 만들어야 하는 상황은 발생하지 않는다. 희소 배열은 연속적으로 값의 집합이라는 배열의 기본적인 개념과 맞지 않으며, 성능에도 좋지 않은 영향을 준다. 최적화가 잘 되어 있는 모던 자바스크립트 엔진은 요소의 타입이 일치하는 배열을 생성할 때 일반적인 의미의 배열처럼 연속된 메모리 공간을 확보하는 것으로 알려져 있다.

3. 배열 요소에 접근은 느리지만 삽입/삭제는 빠르다.

일반적인 배열은 인덱스로 요소에 빠르게 접근할 수 있다. 하지만 요소를 삽입 또는 삭제하는 경우에는 효율적이지 않다.
자바스크립트 배열을 해시 테이블로 구현된 객체이므로 인덱스로 요소에 접근하는 경우 일반적인 배열보다 성능적인 면에서 느릴 수 밖에 없는 구조적인 단점이 있다. 하지만 요소를 삽입 또는 삭제하는 경우에은 일반적인 배열보다 빠른 성능을 기대할 수 있다.
인덱스로 배열 요소에 접근할 때 일반적인 배열보다 느릴 수 밖에 없는 구조적인 단점을 보완하기 위해 대부분의 모던 자바스크립트 엔진은 배열을 일반 객체와 구별하여 좀 더 배열처럼 동작하도록 최적화하여 구현했다. 다음과 같이 일반 객체의 성능을 테스트해 보면 배열이 일반 객체보다 약 2배 정도 빠르다는 것을 알 수 있다.

const arr = [];

console.time("Array Performance Test");

for (let i = 0; i < 10000000; i++) {
  arr[i] = i;
}
console.timeEnd("Array Performance Test");
// 약 340ms

const obj = {};

console.time("Object Performance Test");

for (let i = 0; i < 10000000; i++) {
  obj[i] = i;
}

console.timeEnd("Object Performance Test");
// 약 600ms

배열 생성

배열 리터럴로 생성

가장 일반적이고 간편한 배열 생성 방식은 배열 리터럴을 사용하는 것이다.
배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호([])로 묶는다. 배열 리터럴은 객체 리터럴과 달리 프로퍼티 키가 없고 값만 존재한다.
```
const arr = [1,2,3];
console.log(arr.length); // 3
```
배열 리터럴에 요소를 하나도 추가하지 않으면 배열의 길이, 즉 length 프로퍼티 값이 0인 빈 배열이 된다.
```
const arr = [];
console.log(arr.length); // 0
```
Array 생성자 함수로 생성
Object 생성자 함수를 통해 객체를 생성할 수 있듯이 Array 생성자 함수를 통해 배열을 생성할 수도 있다. Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작하므로 주의가 필요하다.
전달된 인수가 1개이고 숫자인 경우 length 프로퍼티 값이 인수인 배열을 생성한다.
```
const arr = new Array(10);
```

console.log(arr); // [empty * 10] console.log(arr.length) // 10

- 이때 생성된 배열은 희소 배열이다. length 프로퍼티 값은 0이 아니지만 실제로 배열의 요소는 존재하지 않는다.  
- 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다.
```js
// 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열을 생성한다.
new Array(1, 2, 3); // [1, 2, 3]

// 전달된 인수가 1개지만 숫자가 아니면 인수를 요소로 갖는 배열을 생성한다.
new Array({}); // [{}]

Array 생성자 함수는 new 연산자와 함께 호출하지 않더라도, 즉 일반 함수로서 호출해도 배열을 생성하는 생성자 함수로 동작한다. 이는 Array 생성자 함수 내부에서 new.target을 확인하기 때문이다.
```
Array(1, 2, 3); // [1, 2, 3]
```

Array.of 로 생성

ES6에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다. Array.of는 Array 생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

// 인수가 없을 때는 빈배열을 생성한다.
Array.of(); // []

// 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.
Array.of(1); // [1]

Array.of(1, 2, 3); // [1, 2, 3]

Array.of("string"); // ['string']

Array.from로 생성

ES6에서 도입된 Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

// 유사 배열 객체를 변환하여 배열을 생성한다.
Array.from({ length: 2, 0: "a", 1: "b" }); // ['a', 'b']

// 이터러블을 변환하여 배열을 생성한다. 문자열은 이터러블이다.
Arrray.from("Hello"); // ['H', 'e', 'l', 'l', 'o']

Array.from을 사용하면 두 번째 인수로 전달한 콜백 함수를 통해 값을 만들면서 요소를 채울 수 있다. Array.from 메서드는 두 번째 인수로 전달한 콜백 함수에 첫 번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 콜백 함수의 반환값으로 구성된 배열을 반환한다.

// Array.from에 length만 존재하는 유사 배열 객체를 전달하며 undefined를 요소로 채운다.
Array.from({ length: 3 }); // [undefined, undefined, undefined]

// Array.from은 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다.
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

유사 배열 객체와 이터러블 객체

유사배열 객체는 마치 배열처럼 프로퍼티 값에 접근할 수 잇고 length 프로퍼티를 갖는 객체를 말한다. 유사 배열 개체는 마치 배열처럼 for문으로 순회할 수 있다

const arrayLike = {
  '0': "apple",
  '1': "banana",
  '2': "orange",
  length: 3,
};

이터러블 객체는 Symbol.iterator 메서드를 구현하여 for...of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있는 객체를 말한다. ES6에서 제공하는 빌트인 이터러블은 Array, String, Map, Set, DOM 컬렉션, arguments 등이 있다.

배열 요소의 참조/추가/갱신/삭제

참조

배열의 요소를 참조할 때는 대괄호([]) 표기법을 사용한다. 대괄호 안에는 인덱스가 와야 한다. 정수로 평가되는 표현식이라면 인덱스 대신 사용할 수 있다. 인덱스는 값을 참조할 수 있다는 의미에서 객체의 프로퍼티 키와 같은 역할을 한다.

const arr = [1, 2];

// 인덱스가 0인 요소를 참조
console.log(arr[0]); // 1
// 인덱스가 1인 요소를 참조
console.log(arr[1]); // 2

존재하지 않는 요소에 접근하면 undefined가 반환된다.

const arr = [1, 2];

// 인덱스가 2인 요소를 참조, 배열 arr에는 인덱스가 2인 요소가 존재하지 않는다.
console.log(arr[2]); // undefined

배열은 사실 인덱스를 나타내는 문자열을 프로퍼티 키로 갖는 객체다. 따라서 존재하지 않는 프로퍼티 키로 객체의 프로퍼티에 접근했을 때 undefined를 반환하는 것처럼 배열도 존재하지 않는 요소를 참조하면 undefined를 반환한다.
같은 이유로 희소 배열의 존재하지 않는 요소를 참조해도 undefined가 반환된다.

// 희소 배열
const arr = [1, , 3];

// 배열 arr에는 인덱스가 1인 요소가 존재하지 않는다.
console.log(Object.getOwnPropertyDesciptors(arr));
/*
{
 '0': {value: 1, writable: true, enumerable: true, configurable: true}
 '2': {value: 3, writable: true, enumerable: true, configurable: true}
 length: {value: 3 writable: true, enumerable: false, configurable: false}
}
*/

// 존재하지 않는 요소를 참조하면 undefined가 반환된다.

추가 및 갱신

객체에 프로퍼티를 동적으로 추가할 수 있는 것처럼 배열에도 요소를 동적으로 추가할 수 있다. 존재하지 않는 인덱스를 사용해 값을 할당하면 새로운 요소가 추가된다. 이때 length 프로퍼티 값은 자동 갱신된다.

const arr = [0];

// 배열 요소의 추가
arr[1] = 1;

console.log(arr); // [0, 1]
console.log(arr.length); // 2

만약 현재 배열의 length 프로퍼티 값보다 큰 인덱스로 새로운 요소를 추가하면 희소 배열이 된다.

arr[100] = 100;

console.log(arr); // [0, 1, empty * 98, 100]
console.log(arr.length); // [101]

이때 인덱스로 요소에 접근하여 명시적으로 값을 할당하지 않은 요소는 생성되지 않는다는 것에 주의하자

console.log(Object.getOwnPropertyDesciptors(arr));
/*
{
 '0': {value: 0, writable: true, enumerable: true, configurable: true}
 '1': {value: 1, writable: true, enumerable: true, configurable: true}
 '100': {value: 100, writable: true, enumerable: true, configurable: true}
 length: {value: 3 writable: true, enumerable: false, configurable: false}
}
*/

이미 요소가 존재하는 요소에 값을 재할당하면 요소값이 갱신된다.

// 요소값의 갱신
arr[1] = 10;

console.log(arr); // [0, 10 empty * 98, 100]

인덱스는 요소의 위치를 나타내므로 반드시 0 이상의 정수(또는 정수 형태의 문자열)를 사용해야 한다. 만약 정수 이외의 값을 인덱스처럼 사용하면 요소가 생성되는 것이 아니라 프로퍼티가 생성된다. 이때 추가된 프로퍼티는 length 프로퍼티 값에 영향을 주지 않는다.

const arr = [];

// 배열 요소 추가
arr[0] = 1;
arr["1"] = 2;

// 프로퍼티 추가
arr["foo"] = 3;
arr.bar = 4;
arr[1.1] = 5;
arr[-1] = 6;

console.log(arr); // [1, 2, foo:3, bar:4, '1.1': 5, '-1':6]

// 프로퍼티는 length에 영향을 주지 않는다.
console.log(arr.length); // 2

삭제

배열은 사실 객체이기 때문에 특정 요소를 삭제하기 위해 delete 연산자를 사요할 수 있다.

const arr = [1,2,3];

// 배열 요소의 삭제
delete.arr[1];
console.log(arr); // [1, empty, 3]

// length 프로퍼티에 영향을 주지 않는다. 즉, 희소 배열이 된다.
console.log(arr.length); // 3

delete 연산자는 객체의 프로퍼티를 삭제한다. 따라서 위 예제의 delete arr[1]은 arr에서 프로퍼티 키가 '1'인 프로퍼티를 삭제한다. 이때 배열은 희소 배열이 되며 length 프로퍼티 값은 변하지 않는다. 따라서 희소 배열을 만드는 delete 연산자는 사용하지 않는 것이 좋다.
희소 배열을 만들지 않으면서 배열의 특정 요소를 완전히 삭제하려면 splice 메서드를 사용한다.

const arr = [1, 2, 3];

// splice(삭제를 시작할 인덱스, 삭제할 요소 수)
arr.splice(1, 1);
console.log(arr); // [1,3]

// length가 자동 갱신된다.
console.log(arr.length); // 2

많이 쓰는 배열 메서드

push()

배열의 끝에 하나 이상의 요소를 추가한다.

예시

let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']

pop()

배열의 마지막 요소를 제거하고 그 요소를 반환한다.

예시

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 'orange'
console.log(fruits);    // ['apple', 'banana']

shift()

배열의 첫 번째 요소를 제거하고 그 요소를 반환한다.

예시

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(firstFruit); // 'apple'
console.log(fruits);     // ['banana', 'orange']

unshift()

배열의 앞에 하나 이상의 요소를 추가하고 변경되 length 프로퍼티 값을 반환한다.

예시

let fruits = ['banana', 'orange'];
const result = fruits.unshift('apple');
console.log(result); // 3
console.log(fruits); // ['apple', 'banana', 'orange']

splice()

배열의 요소를 추가하거나 제거한다.

예시

let fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'grape');
console.log(fruits); // ['apple', 'grape', 'orange']

이 예시에서 splice(1, 1, 'grape')는 인덱스 1에서 1개의 요소('banana')를 제거하고, 그 자리에 'grape'를 추가한다.

slice()

배열의 일부를 추출하여 새로운 배열을 반환한다.

예시

let fruits = ['apple', 'banana', 'orange', 'grape'];
let citrus = fruits.slice(1, 3);
console.log(citrus); // ['banana', 'orange']

0 이 예시에서 slice(1, 3)는 인덱스 1에서 시작해서 인덱스 3 이전까지의 요소를 반환한다.

concat()

두 개 이상의 배열을 결합하여 새로운 배열을 만듭니다.

예시

let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'grape'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['apple', 'banana', 'orange', 'grape']

forEach()

배열의 각 요소에 대해 한 번씩 제공된 함수를 실행한다.

예시

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => console.log(fruit));

// apple // banana // orange

## map()
- 배열의 각 요소에 대해 제공된 함수를 호출한 결과를 모아 새로운 배열을 만든다.
- 예시
```js
let numbers = [1, 2, 3];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // [2, 4, 6]

filter()

제공된 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열을 만든다.

예시

let numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4]

## reduce()
- 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다.
- 예시
```js
let numbers = [1, 2, 3, 4];

numbers.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => {
  return 다음누산값;
}, 초기누산값);

const sum = numbers.reduce((acc, number) => acc + number, 0);

console.log(sum); // 10

참고

모던 자바스크립트 딥다이브 책
MDN - Array

[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 1주차 내용

Sun, 25 Aug 2024 01:55:30 GMT

배운내용

자바스크립트

필수 자바스크립트 문법 : 템플릿 문자열, 화살표 함수, 비구조화 할당
타입스크립트
타입 : 기본 타입, 함수 타입
타입 오퍼레이터
인터페이스
타입별칭
이넘
제너릭
리액트
NPM, NPX, YARN의 차이
바벨과 웹팩
js, jsx, tsx 차이
클래스 컴포넌트, 함수형 컴포넌트
컴포넌트 CSS 스타일링
Tailwind CSS
폰트 적용 방법
컴포넌트 : 컴포넌트 이벤트, Props, Children, 조건부 렌더링, 반복 렌더링, 이미지 렌더링
리액트 훅 : useState, useRef

수행한 과제

8/19 (월)

타입스크립트로 문장에서 가장 긴 단어를 반환하는 함수 만들기
타입스크립트로 암스토롱 수 구하는 함수 만들기
8/21 (수)

프로필 카드 컴포넌트 만들기
8/22 (목)
로그인 컴포넌트 만들기
8/23 (금)

여행 사이트 만들기
이미지 삭제/복구 버튼 만들기

과제 상세

8/23 (금)에 수행했던 여행 사이트 만들기 과제 내용을 풀어보고자 한다.

과제 내용

리액트와 타입스크립트를 이용하여 아래와 같이 버튼 클릭 시 하단 이미지가 변하는 사이트 만들기

수행 과정

정적 언어인 타입스크립트를 최대한 활용하고 재사용성을 높이고자 id와 navTitle을 enum으로 정의한 후 타입 정의하였다.
```
enum CityId {
SEOUL = "서울",
LONDON = "런던",
PARIS = "파리",
NEWYORK = "뉴욕",
}
```

enum NavTitle { SEOUL = "Seoul", LONDON = "London", PARIS = "Paris", NEWYORK = "NewYork", }

interface TImgState { id: CityId; src: string; navTitle: NavTitle; }

- 재사용성과 코드의 가독성을 위해 JSX 코드에 일일히 수동으로 이미지를 넣지 않도록 이미지와 이미지 제목을 객체 배열로 만들었다.
```ts
  const ImgInfo: TImgState[] = [
    {
      id: CityId.SEOUL,
      src: seoul,
      navTitle: NavTitle.SEOUL,
    },
    {
      id: CityId.LONDON,
      src: london,
      navTitle: NavTitle.LONDON,
    },
    {
      id: CityId.PARIS,
      src: paris,
      navTitle: NavTitle.PARIS,
    },
    {
      id: CityId.NEWYORK,
      src: newyork,
      navTitle: NavTitle.NEWYORK,
    },
  ];

클릭할 때마다 이미지 사진이 변함으로 이미지를 useState로 정의하였다.

const [viewImg, setViewImg] = useState({
  id: CityId.SEOUL,
  src: seoul,
  navTitle: NavTitle.SEOUL,
});

상단 nav를 이미지 객체 배열을 map 메서드를 이용해 보여주도록 하였고, 이미지의 id와 nav의 id가 일치하면 굵게 표시될 수 있도록 하였다.

{ImgInfo.map((item) => (
             onChangeViewImg(item.id)}>
              {item.id === viewImg.id ? (
                
                  {item.navTitle}
                
              ) : (
                {item.navTitle}
)}

상단 nav 클릭 시 이미지가 변경되는 함수는 아래와 같다.
1. 클릭한 nav의 id가 이미지 객체 배열 중 id가 일치하는 이미지 값을 찾아 반환해준다.
2. 그럴 일은 없지만 객체 배열에서 id가 일치하는 값을 못찾았을 경우를 대비하여, if문으로 분기처리를 해준다.
```
const onChangeViewImg = (id: CityId) => {
const selectedImg = ImgInfo.find((item) => item.id === id);
if (selectedImg) {
 setViewImg(selectedImg);
}
};
```

전체 코드

import travel from "../../assets/images/travel.png";
import seoul from "../../assets/images/seoul.jpg";
import london from "../../assets/images/london.jpg";
import paris from "../../assets/images/paris.jpg";
import newyork from "../../assets/images/newyork.jpg";
import { useState } from "react";

enum CityId {
  SEOUL = "서울",
  LONDON = "런던",
  PARIS = "파리",
  NEWYORK = "뉴욕",
}

enum NavTitle {
  SEOUL = "Seoul",
  LONDON = "London",
  PARIS = "Paris",
  NEWYORK = "NewYork",
}

interface TImgState {
  id: CityId;
  src: string;
  navTitle: NavTitle;
}

export default function Travel() {
  const [viewImg, setViewImg] = useState({
    id: CityId.SEOUL,
    src: seoul,
    navTitle: NavTitle.SEOUL,
  });

  const ImgInfo: TImgState[] = [
    {
      id: CityId.SEOUL,
      src: seoul,
      navTitle: NavTitle.SEOUL,
    },
    {
      id: CityId.LONDON,
      src: london,
      navTitle: NavTitle.LONDON,
    },
    {
      id: CityId.PARIS,
      src: paris,
      navTitle: NavTitle.PARIS,
    },
    {
      id: CityId.NEWYORK,
      src: newyork,
      navTitle: NavTitle.NEWYORK,
    },
  ];

  const onChangeViewImg = (id: CityId) => {
    const selectedImg = ImgInfo.find((item) => item.id === id);
    if (selectedImg) {
      setViewImg(selectedImg);
    }
  };

  return (
    <>
      // ...생략...
          
            {ImgInfo.map((item) => (
               onChangeViewImg(item.id)}>
                {item.id === viewImg.id ? (
                  
                    {item.navTitle}
                  
                ) : (
                  {item.navTitle}
                )}
              
            ))}
          
          
            
          
    // ...생략...
    
  );
}

수행하면서 어려웠거나 궁금한 점

아래 클릭 이벤트 함수의 매개변수인 id를 CityId로 타입 정의를 했기 때문에 selectedImg가 undefined가 될 일이 없는데 vsCode에서는 계속 selectedImg가 undefind가 될 수 있다며 if문 없이는 setViewImg(selectedImg)를 못하게 했다
- 배열은 코드의 다른 부분에서 변형될 수 있다. 예를 들어, ImgInfo 배열이 동적으로 변경되거나 비워질 가능성이 존재한다면, find 메서드는 undefined를 반환할 수 있기 때문이다. TypeScript는 이런 동적인 상황을 미리 예측할 수 없기 때문에, undefined 처리를 요구한다.
```
const onChangeViewImg = (id: CityId) => {
const selectedImg = ImgInfo.find((item) => item.id === id);
if (selectedImg) {
 setViewImg(selectedImg);
}
};
```

이미지 src도 enum 으로 만들어서 쓸수는 없을까?

import seoul from "../../assets/images/seoul.jpg";
import london from "../../assets/images/london.jpg";
import paris from "../../assets/images/paris.jpg";
import newyork from "../../assets/images/newyork.jpg";

// 아래와 같이 정의하면 오류남 enum ImgSrc { SEOUL = seoul, LONDON = london, PARIS = paris, NEWYORK = newyork, }

- enum 대신 객체 리터럴 사용하면 된다. 하지만 코드가 길어지고 복잡해지는 단점이 있는 것 같다.
- 별도의 파일로 관리하거나 수정이 많이 필요한 로직일 때 사용해야겠다.
```ts
import seoul from "../../assets/images/seoul.jpg";
import london from "../../assets/images/london.jpg";
import paris from "../../assets/images/paris.jpg";
import newyork from "../../assets/images/newyork.jpg";

// 객체 리터럴로 이미지 소스를 정의
const ImgSrc = {
  SEOUL: seoul,
  LONDON: london,
  PARIS: paris,
  NEWYORK: newyork,
} as const;

type ImgSrcType = keyof typeof ImgSrc;

// 사용 예시
function getImageSrc(city: ImgSrcType): string {
  return ImgSrc[city];
}

// 사용
const seoulImgSrc = getImageSrc("SEOUL");

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

자바스크립트 this 개념 정리

Wed, 14 Aug 2024 05:21:31 GMT

this란 무엇인가?

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
this는 "지금 내가 가리키고 있는 것"이다. 어떤 객체인지에 따라 다르게 가리킨다. (this 바인딩)

객체에서의 this 사용 예시

const dog = {
name: "코코",
sayName: function() {
  console.log(this.name);
}
};

dog.sayName(); // 코코

- 생성자 함수에서의 this 사용 예시
```js
function Dog(name) {
  this.name = name;
}

const myDog = new Dog("초코");
console.log(myDog.name); // 초코

예를 들어, 집에 두 마리의 강아지가 있을 때 한 마리의 이름은 "코코"이고, 다른 한 마리는 "초코"이다. 각 강아지에게 "이름을 말해봐!"라고 말하면, 코코는 "내 이름은 코코야!"라고 말할 것이고, 초코는 "내 이름은 초코야!"라고 말한다. 이때, "내"라는 말은 this와 비슷하다. 코코가 "내 이름"이라고 말할 때 this는 코코를 가리키고, 초코가 "내 이름"이라고 말할 때 this는 초코를 가리킨다.

왜 this를 사용하는가?

this가 필요한 이유는 자바스크립트에서 객체 내부의 메서드가 그 객체의 프로퍼티이나 다른 메서드에 쉽게 접근할 수 있도록 하기 위해서다. 만약 this가 없다면, 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조하고 매번 객체의 이름을 명시적으로 사용해야 한다.

this를 사용하지 않고 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.

const circle = {
// 프로퍼티: 객체 고유의 상태 데이터
radius: 5,
// 메서드: 상태 데이터를 참조하고 조작하는 동작
getDiameter() {
  // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면
  // 자신이 속한 객체인 circle을 참조할 수 있어야 한다.
  return 2 * circle.radius;
},
};

console.log(circle.getDiameter()); // 10

- 하지만 이러한 방법은 **객체가 변경되거나, 이름이 바뀌거나, 메서드가 다른 객체에 복사될 때 문제가 생길 수 있기 때문에 코드의 유지보수성과 재사용성을 저하**시킨다.
- 만약 this를 사용하지 않고 객체를 가리키는 식별자를 재귀적으로 참조했을 때 메서드가 다른 객체에 복사될 경우, 아래와 같은 문제가 발생할 수 있다.
```js
const circle = {
  radius: 5,
  getDiameter() {
    return 2 * circle.radius;
  },
};

const sphere = {
  radius: 10,
};

// 메서드를 다른 객체에 복사함
sphere.getDiameter = circle.getDiameter;

// getDiameter 메서드는 circle.radius를 참조하고 있으므로,
// 20(sphere.radius*2)이 아닌 10(circle.radius*2)이 출력된다.
console.log(sphere.getDiameter()); // 10

또한, 객체 리터럴에서는객체 리터럴 방식에서는 객체가 정의되자마자 메모리에 생성되고, 그 객체를 가리키는 식별자가 바로 사용 가능하기 때문에 재귀적으로 참조가 가능하지만 생성자 함수에서는 생성자 함수는 새로운 객체(인스턴스)를 생성하기 위한 함수이기 때문에 생성자 함수가 호출되기 전까지는 그 함수가 생성할 인스턴스는 존재하지 않아 재귀적으로 참조할 수 없어 this가 필요하다.
결론 : this는 메서드가 속한 객체를 동적으로 참조할 수 있게 해준다. 즉, 객체가 변경되거나, 메서드가 다른 객체에 복사되더라도, this를 사용하면 항상 현재 메서드가 속한 객체를 참조할 수 있기 때문에, 위에서 언급한 문제들을 자연스럽게 해결할 수 있다.

this는 어떻게 사용하는가?

함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있다.
클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리킨다. 하지만 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩될 값, 즉 this 바인딩이 동적으로 결정된다. 또한 strict mode(엄격 모드) 역시 this 바인딩에 영향을 준다. 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
this는 코드 어디에서든 참조 가능하다.

일반 함수의 this
일반 함수에서 this는 전역 객체가 바인딩된다.
this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체를 생성하지 않는 일반 함수에서 this는 의미가 없다.
```
function foo() {
console.log("foo's this: ", this); // window
function bar() {
  console.log("bar's this: ", this); // window
}
bar();
}
foo();
```

strict mode가 적용된 일반 함수 내부의 this는 undefind가 바인딩된다.

function foo() {
"use strict";

console.log("foo's this: ", this); // undefined
function bar() {
  console.log("bar's this: ", this); // undefined
}
bar();
}
foo();

전역 함수, 중첩 함수(함수 안에 함수), 콜백함수라도 일반 함수로 호출하면 함수 내부의 this에는 모두 전역 객체가 바인딩된다.
하지만 중첩 함수, 콜백 함수는 외부 함수를 돕는 헬퍼 함수의 역할을 하므로 외부 함수의 일부 로직을 대신하는 경우가 대부분이다. 그렇기 때문에 메서드의 this 바인딩과 일치시키기 위한 방법이 존재한다.
```
var value = 1;
```

const obj = { value: 100, foo() { // this 바인딩(obj)을 변수 that에 할당한다. const that = this;

// 콜백 함수 내부에서 this 대신 that을 참조한다.
setTimeout(function () {
  console.log(that.value); // 100
}, 100);

} };

obj.foo();

- 위 방법 말고도 자바스크립트는 this를 명시적으로 할당할 수 있는 apply, call, bind 메소드를 제공한다.
## Function.prototype.apply/call/bind 메서드

- apply, call, bind 메서드는 Function.prototype의 메서드다. 즉, 모든 함수가 상속받아 사용할 수 있다.
- apply, call 메서드는 this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다.

```js
function getThisBinding() {
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

console.log(getThisBinding()); // window

// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
console.log(getThisBinding.apply(thisArg)); // {a:1}
console.log(getThisBinding.call(thisArg)); // {a:1}

apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다. call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다. 2개의 메서드는 호출할 함수에 인수를 전달하는 방식만 다를 뿐 this로 사용할 객체를 전달하면서 함수를 호출하는 것은 동일하다.
2개의 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우다.

function converArgsToArray() {
  console.log(arguments);

  // arguments 객체를 배열로 반환
  // Array.prototype.slice를 인수 없이 호출하면 배열의 복사본을 생성한다.
  const arr = Array.prototype.slice.call(arguments);
  // const arr = Array.prototype.slice.apply(arguments);
  console.log(arr);

  return arr;
}

convertArgsToArray(1, 2, 3); // [1, 2, 3];

bind 메서드는 apply와 call 메서드와 달리 함수를 호출하지 않는다. 다만 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환한다.

function getThisBinding() {
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

// bind 메서드는 첫 번째 인수로 전달한 thisArg로 this 바인딩이 교체된
// getThisBinding 함수를 새롭게 생성해 반환한다.
console.log(getThisBinding.bind(thisArg)); // getThisBinding
// bind 메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 한다.
console.log(getThisBinding.bind(thisArg)); // {a:1}

bind 메서드는 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용된다.

const person = {
    name: 'Lee';
    foo(callback) {
        // bind 메서드로 callback 함수 내부의 this 바인딩을 전달
        setTimeout(callback.bind(this), 100);
        // 아래와 같이 호출하면 아래 person.foo의 console.log는 window.name이 출력된다.
        // setTimeout(callback, 100);
    }
};

person.foo(funciton () {
    console.log(`Hi my name is ${this.name}`); // Hi my name is Lee
})

메서드의 this

메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다.

const person = {
  name: "Lee",
  getName() {
    // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩된다.
    return this.name;
  },
};

// 메서드 getName을 호출한 객체는 person이다.
console.log(person.getName()); // Lee

person 객체의 getName 프로퍼티가 가리키는 함수 객체는 person 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체다. getName 프로퍼티가 함수 객체를 가리키고 있을 뿐이다.
따라서 getName 프로퍼티가 가리키는 함수 객체, 즉 getName 메서드는 다른 객체의 프로퍼티에 할당하는 것으로 다른 객체의 메서드가 될 수도 있고 일반 변수에 할당하여 일반 함수로 호출될 수도 있다.

const anotherPerson = {
  name: "Kim",
};

// getName 메서드를 anotherPerson 객체의 메서드로 할당
anotherPerson.getName = person.getName;

// getName 메서드를 호출한 객체는 anotherPerson이다.
console.log(anotherPerson.getName()); // Kim

// getName 메서드를 변수에 할당
const getName = person.getName;

// getName 메서드를 일반 함수로 호출
console.log(getName()); // ''
// 일반 함수로 호출된 getName 함수 내부의 this.name은 브라우저 환경에서 window.name과 같다.
// 브라우저 환경에서 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티이며 기본값은 ''이다.
// Node.js 환경에서 this.name은 undefined이다.

프로토타입 메서드 내부에서 사용된 this도 일반 메서드와 마찬가지로 해당 메서드를 호출한 객체에 바인딩된다.

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name;
};

const me = new Person("Lee");

// getName 메서드를 호출한 객체는 me다.
console.log(me.getName()); // Lee

Person.prototype.name = "Kim";

// getName 메서드를 호출한 객체를 Person.prototype이다.
console.log(Person.prototype.getName()); // Kim

생성자 함수의 this

생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다.

// 생성자 함수
function Circle(radius) {
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
  this.radius = raduis;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

// 반지름이 5인 Circle 객체를 생성
const circle1 = new Circle(5);
// 반지름이 10인 Circle 객체를 생성
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

출처 : (책)모던자바스크립트 딥다이브

자바스크립트 프로토타입 개념 정리/퀴즈

Sat, 10 Aug 2024 09:14:47 GMT

프로토타입의 이해

(What) 프로토타입은 무엇인가?

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어있고 이 부모 객체를 프로토타입이라고 한다.
객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 다른 객체에 공유 프로퍼티를 제공한다.
프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.

(Who) 누가 프로토타입을 사용하는가?

개발자: 객체 지향 프로그래밍(OOP) 개념을 자바스크립트에서 활용하는 개발자들이 프로토타입을 자주 사용한다.
(When) 언제 프로토타입을 사용하는가?
반복되는 기능이 필요할 때: 프로토타입을 사용하는 가장 흔한 상황은 여러 객체에 동일한 메서드나 속성이 필요할 때이다. 예를 들어, 게임에서 여러 캐릭터가 서로 다른 특성을 가지고 있지만, 모두 "이동"이라는 공통된 동작을 해야 할 때, 이 "이동" 동작을 프로토타입에 정의할 수 있다.
메모리 효율성을 고려할 때: 다수의 객체가 동일한 메서드를 가지게 될 때 메모리 사용을 최적화하고자 할 때도 프로토타입을 사용한다.
(Where) 어디서 프로토타입을 사용하는가?
객체를 생성하는 모든 곳에서: 프로토타입은 객체를 생성하는 모든 곳에서 사용된다. 특히 라이브러리나 프레임워크, 또는 복잡한 애플리케이션에서 자주 사용된다.
(Why) 왜 프로토타입을 사용하는가?

메모리 효율성
- 생성자 함수를 이용해 객체를 만들면, 그 함수 안에 있는 모든 메서드(기능)가 새롭게 만들어지는 객체마다 복사된다. 즉, 같은 기능을 가진 메서드가 여러 객체에 반복적으로 만들어지게 된다. 이것은 메모리를 비효율적으로 사용하게 된다.
- 프로토타입을 사용하면 같은 기능을 여러 객체에서 공유할 수 있기 때문에, 메모리를 절약할 수 있다. 하나의 메서드를 여러 객체가 공통으로 사용하게 되어 메모리 낭비가 줄어든다.
일관성
- 프로토타입에 정의된 메서드를 수정하면, 그 메서드를 사용하는 모든 객체에 즉시 반영된다. 이것은 코드의 일관성을 유지하는 데 도움이 된다.
유지보수의 용이성
- 프로토타입을 사용하면, 하나의 메서드만 수정하거나 확장하면 되기 때문에, 코드 유지보수가 훨씬 간편하다. 여러 곳에 똑같은 메서드를 수정할 필요가 없다.
  (How) 어떻게 프로토타입을 사용하는가?

프로토타입에 메서드 추가하는 방법 : 프로토타입에 메서드를 추가하여 모든 인스턴스에서 공통적으로 사용할 수 있게 한다. 예를 들어, Array.prototype에 사용자 정의 메서드를 추가하면, 모든 배열에서 해당 메서드를 사용할 수 있다.
```
function Animal(name, sound) {
  this.name = name;
  this.sound = sound;
}
```

// 프로토타입에 메서드 추가 Animal.prototype.makeSound = function() { console.log(this.name + " says " + this.sound); };

var dog = new Animal("Dog", "Woof"); var cat = new Animal("Cat", "Meow");

dog.makeSound(); // "Dog says Woof" cat.makeSound(); // "Cat says Meow"

- 프로토타입 취급 및 할당 : Object.getPrototypeOf와 Object.setPrototypeOf 메서드를 사용한다. \_\_proto\_\_로 객체가 상속받는 프로토타입 객체를 참조할 수 있지만, 모든 객체가 \_\_proto\_\_ 접근자 프로퍼티를 사용할 수 있는 것은 아니기 때문에 사용하지 않는 게 좋다.
```js
// obj는 프로토타입 체인의 종점이다. 따라서 Object.__proto__를 상속받을 수 없다.
const obj = Object.create(null);

// obj는 Object.__proto__를 상속받을 수 없다.
console.log(obj.__protp__); // undefined

// 따라서 __proto__보다 Object.getPrototypeOf 메서드를 사용하는 편이 좋다.
console.log(Object.getPrototypeOf(obj)); // null

프로토타입 체인: 자바스크립트의 프로토타입 체인을 이용하여 상속을 구현한다. 객체가 특정 속성이나 메서드를 찾지 못하면, 그 객체의 프로토타입 체인을 따라가면서 최상위 부모 객체까지 속성이나 메서드를 검색한다.

프로토타입 퀴즈

아래 코드의 obj2의 프로토타입은 무엇인가요?

var obj = {
  x: 10,
  y: 20,
};
var obj2 = Object.create(obj);

정답

SPA 프레임워크/라이브러리 비교 분석

Sat, 20 Jul 2024 07:28:35 GMT

SPA 프레임워크 또는 라이브러리에 대해서 알아보고 차이점을 분석하여, 이후 프로젝트를 진행할 때 참고하고자 정리해본다.

요즘 어떤 게 제일 인기가 많은가?

리액트가 가장 압도적으로 사용률이 많음
왜 리액트가 가장 인기가 많은걸까?

Angular

구글에서 지원하는 TypeScript 기반의 프레임워크 (2010년 출시)

특징 (공식 문서)

확장 가능한 컴포넌트 구조로 웹 애플리케이션을 만드는 프레임워크입니다
라우팅, 폼 관리, 클라이언트-서버 통신 등 웹 개발에 필요한 라이브러리를 조화롭게 통합한 모음집입니다
애플리케이션 개발, 빌드, 테스트, 수정에 필요한 개발자 도구를 제공합니다

장점

타입스크립트 기반이기 때문에 정적 타이핑으로 컴파일 단계에서 에러를 예방할 수 있음
구글이 지원하기 때문에 공식 문서와 커뮤니티가 잘되어 있음
웹과 모바일 프로젝트의 생성부터 테스팅, 빌드, 배포까지 다양한 기능을 제공함

단점

다양한 기능 제공과 프레임워크의 특성 상 러닝커브가 높음
다른 프레임워크보다 초기로딩 속도가 느림
검색 엔진이 웹 페이지를 크롤링 할 때 JavaScript를 실행하지 않고 있는 그대로 긁어가는 문제가 발생해서 검색엔진 최적화 (SEO)가 어려움

어떤 프로젝트에 사용하면 좋은가?

장기적으로 운영될 프로젝트
규모가 크고 다양한 기능을 제공하는 프로젝트
웹 뿐만 아니라 앱을 동시에 개발해야 되는 프로젝트

Svelte

2016년 출시한 자바스크립트 프레임워크

특징(공식문서)

적은 양의 코드를 사용함
가상 돔이 아닌 실제 돔에 반영함 (앱을 실행 시점에서 해석하지 않고 빌드 시점에서 Vanilla JavaScript Bundle로 컴파일)
별도의 상태 관리 라이브러리 없이 변수나 표현식이 변경될 때마다 자동으로 업데이트되는 코드를 작성할 수 있음

장점

적은 양의 코드를 사용하기 때문에 가독성이 좋고 용량이 간소화됨
상태 변경 시 컴파일 시점에서 반응형 업데이트를 처리하기 때문에 상태 관리가 편함
Vanilla JavaScript Bundle로 컴파일하기 때문에 성능이 좋음 (빠름)

단점

빌드 속도가 느림
비교적 커뮤니티가 작고 공식문서는 한글화가 되어 있지 않음
비교적 라이브러리와 같은 도구가 적음
프레임워크에 대한 변화가 잦아 최신 정보를 따라가기 어려울 수 있음

어떤 프로젝트에 사용하면 좋은가?

성능이 중요한 작은 프로젝트에 적합

Vue.js

앵귤러와 React의 장점을 살리고 단점을 보완하여 만든 자바스크립트 프레임워크 (2014년 출시)

특징 (공식 문서)

HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다.
제대로된 반응성, 컴파일러 수준에서 최적화된 렌더링 시스템은 대부분의 경우 개발자가 직접 최적화를 수행할 필요가 없습니다.
라이브러리에서 부터 모든 기능을 갖춘 프레임워크 까지 확장되는 풍부하고 점진적으로 채택 가능한 에코시스템을 제공합니다.
장점
공식 문서가 잘되어 있고 직관적인 API로 러닝커브가 낮음
가상 DOM을 사용하여 DOM 조작을 최소화하여 성능을 향상
자체 라이브러리가 지속적으로 개발되고 있어 별도로 설치하지 않아도 되어 편리함(라우터, 상태관리 등)

단점

앵귤러와 리액트에 비해서는 작은 생태계
자바스크립트 번들 크기가 커서 기능이 많을수록 초기 로딩 속도가 느려짐

어떤 프로젝트에 사용하면 좋은가?

중소규모 프로젝트
빠른 개발이 필요한 프로젝트

React

2013년 페이스북에 의해 출시된 자바스크립트 라이브러리

특징(공식 문서)

손쉬운 컴포넌트 기반의 개발이 가능함
풍부한 라이브러리가 있음
JSX를 사용하여 HTML과 JavaScript를 결합
단방향 데이터 흐름
장점
손쉽게 컴포넌트를 만들 수 있기 때문에 프로젝트의 일관성과 확장성이 좋음
공식 문서가 잘 되어 있고, 커뮤니티가 거대함
많은 라이브러리가 있고 기능을 선택적으로 추가할 수 있음
가상 DOM을 사용하여 DOM 조작을 최소화하여 성능을 향상
단방향 데이터 흐름으로 데이터의 흐름을 예측 가능하게 하고, 디버깅에 용이함

단점

프레임워크가 아니기 때문에 라우팅, 상태 관리 등은 별도의 라이브러리를 사용해야 함
JSX 문법을 공부해야 되기 때문에 러닝커브가 조금 높음

어떤 프로젝트에 사용하면 좋은가?

고성능 SPA (Single Page Application)
재사용 가능한 UI 컴포넌트가 많은 애플리케이션

왜 리액트가 인기가 많은가?

비교적 다른 프레임워크보다는 유연성과 재사용성이 높기 때문인 것 같다
프론트엔드 개발의 역사가 길어지면서 유지보수성의 중요성을 깨달았고, 재사용성이 높은 리액트를 많이 사용하는 것 같다
러닝커브도 앵귤러만큼 어렵지 않고, 뷰보다 생태계가 넓고, 페이스북이라는 대기업의 망하지 않을 것 같은 안정감이 있어서 가장 인기가 많은 것 같다

참고

[React+TypeScript] 이미지 경로를 찾지 못할 때 오류 해결 방법

Wed, 24 Apr 2024 06:05:15 GMT

React+TypeScript 환경에서 개발 중 반복되는 svg 이미지가 있어 컴포넌트화하여 사용하고 싶다.

컴포넌트화하여 사용하고자 하는데 올바른 이미지 경로로 작성했지만 아래와 같이 오류가 발생한다.

원인

확장자를 타입스크립트가 받아드리지 못했음

해결방법

프로젝트 최상위 경로에 @types/global/index.d.ts 파일 생성
파일 내용

declare module '*.svg';

tsconfig.json 의 compilerOptions 안에 내용 추가

{
  "compilerOptions": {
  ...
      "typeRoots": ["./node_modules/@types", "@types"],
  }
}

[github] 내 작업 브랜치 가져와서 작업 후 공동브랜치(main)에 병합하기

Tue, 16 Apr 2024 07:51:49 GMT

github로 협업 시 내 작업 브랜치에 작업 후 공동브랜치(main)에 병합 후 업로드하는 과정을 정리하였다. 꼭 처음에 --single-branch로 가져 오지 않아도 되지만 난 잘 몰라서 내 작업 브랜치만 가져와서 main 브랜치를 별도로 추가하였다.

꼭 중간중간에 git status로 현재 브랜치의 상태를 확인하면서 명령을 실행해야 오류가 나지 않는다.

내 작업 브랜치 가져오기

git clone -b [브랜치명] --single-branch [깃허브 주소]

작업 후 내 브랜치와 변경된 내용 확인
```
git status 
```


3. 특정 파일만 현재 브랜치에 올리기
  (git status로 중간중간에 상태 확인하면서 진행하기!)

git add [경로/파일명] [경로/파일명] git commit -m [커밋 메세지] git push [리모트 저장소] [브랜치명]


4. main 브랜치 내 로컬에 가져오기

git remote set-branches --add ['리모트 저장소'] ['main'] git fetch ['리모트 저장소'] git checkout --track ['리모트 저장소/main']


5. 내 브랜치에 있던 작업 내용 main 브랜치에 병합하기

git status => (main 브랜치인지 확인) git merge [내 브랜치]


6. main 브랜치 내용 원격저장소에 올리기

git status => (main 브랜치에 작업 내용 commit 되었는지 확인) git push [리모트저장소] main


[참고 자료]
  * https://velog.io/@burningjeong/fatal-originmain-is-not-a-commit-and-a-branch-main-cannot-be-created-from-it

효효 개발공부로그

모노레포를 프로젝트에 적용해보기

📱모노레포란?

✔️ 멀티레포와의 차이점

✔️ 장점

✔️ 단점

✔️ 프론트엔드와 백엔드도 같은 레포지토리에 넣는 게 좋은가

✔️ 어떤 프로젝트에서 사용하는 게 좋은가?

🔧 모노레포 툴 정리

Turborepo

Nx

Lerna

Yarn / npm Workspacesv

Bazel

전체 비교 요약표

💻 프로젝트에 적용하기

✔️ 서비스 요약

✔️ 기술스택

프론트엔드

백엔드

✔️ 왜 모노레포를 사용하는가?

⚙️ 설정 계획

Turborepo 모노레포 툴 사용 이유

pnpm 패키지 매니저 사용 이유

배포 계획

📑참고 자료

[리액트] 모던 리액트 딥다이브 15장

15장 마치며

15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항

15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자

클래스 컴포넌트를 함수 컴포넌트로 리팩토링 해야할까?

15.1.2 인터넷 익스플로러 11지원을 목표한다면 각별히 더 주의를 기한다

인터넷 익스플로러 11을 지원하지 않는 대표적인 라이브러리

15.1.3 서버 사이드 렌더링 애플리케이션을 우선적으로 고려한다

15.1.4 상태 관리 라이브러리는 꼭 필요한 때만 사용한다

15.1.5 리액트 의존성 라이브러리 설치를 조심한다

15.2 언젠가 사라질 수도 있는 리액트

15.2.1 리액트는 그래서 정말 완벽한 라이브러리인가?

클래스 컴포넌트에서 함수 컴포넌트로 넘어오면서 느껴지는 혼란

너무 방대한 자유가 주는 혼란

15.2.2 오픈소스 생태계의 명과 암

페이스북 라이선스 이슈

오픈소스는 무료로 계속 제공될 수 있는가? color.js, faker.js, 그리고 바벨

15.2.3 제이쿼리, Angular JS, 리액트, 그리고 다음은 무엇인가?

15.2.4 웹 개발자로서 가져야 할 유연한 자세

[리액트] 모던 리액트 딥다이브 12장

12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

12.1 웹사이트와 성능

사용자가 웹사이트에 접속했을 때 기대하는 사항

12.2 핵심 웹 지표란?

핵심 웹 지표 3가지

특정 문제를 진단하는 데 사용할 수 있는 2가지 지표

12.3 최대 콘텐츠 풀 페인트(LCP)

12.3.1 정의

뷰포트 내부에서 '큰 이미지와 텍스트'

12.3.2 의미

12.3.3 예제

12.3.4 기준 점수

12.3.5 개선 방안

텍스트는 언제나 옳다

이미지는 어떻게 불러올 것인가?

그 밖에 조심해야 할 사항

12.4 최초 입력 지연(FID)

12.4.1 정의

12.4.2 의미

구글에서 정의한 사용자 경험 4가지(RAIL)

정리

12.4.3 예제

12.4.4 기준 점수

12.4.5 개선 방안

실행에 오래 걸리는 긴 작업을 분리

자바스크립트 코드 최소화

타사 자바스크립트 코드 실행의 지연

script 태그의 async/defer 어트리뷰트

async 어트리뷰트

defer 어트리뷰트

참고

[자바스크립트] Babel과 Webpack

Babel

Babel이란?