뉴히의 개발 로그

웹서비스를 만들때 종종 gif와 같은 움직이는 애니메이션을 넣고싶을때가 많다! 이때 간단한 애니메이션인데 전부 gif로 넣게되면 용량도 크고 퍼포먼스도 저하시키는 문제들이 생긴다. lottie는 이러한문제를 해결하면서 웹서비스를 예쁘게 꾸며줄수 있는 애니메이션을 사용할수있게 해준다!! Lottie란?Lottie는 After Effects 애니메이션을 JSON 파일로 변환해 웹/앱에서 가볍게 사용할 수 있도록 해주는 라이브러리이다.React에서도 쉽게 사용할 수 있다!! Lottie의 장점🎥 고퀄리티 애니메이션을 가벼운 JSON 파일로 제공해서 퍼포먼스에 부담이 적음🛠️ 코드로 세밀한 제어가 가능 (루프, 속도 조절, 특정 타이밍 이벤트 등)📱 반응형, 모바일 최적화도 편리하게 적용 가능🎨 Afte..

1. CRAnpx create-reat-app [프로젝트명]npx create-react-app [프로젝트명] --template typescript2. Vitenpm create vite@latest [프로젝트 명] npm create vite@latest [프로젝트 명] --template react-ts프로젝트 주요 파일과 폴더 구조public/: 정적 파일(HTML, 이미지 등)을 저장하는 폴더.src/: React 컴포넌트와 JavaScript 파일을 저장하는 폴더.package.json: 프로젝트의 메타데이터와 의존성을 관리하는 파일.├── public├── src│ ├── @types # 전역타입 정의│ ├── assets # 정적 자..

React-router-dom -> React Router v7React 프로젝트에서 라우팅을 쓸 때, react-router-dom을 당연하게 깔고 시작했었다., , 등 DOM 전용 라우팅 컴포넌트가 이미 준비되어 있다.뒤로가기 버튼이나 페이지 전환 시 전체 리프레시가 없으니 SPA스럽게 딱 좋다.위 두개의 이유만으로도 리액트로 SPA 웹사이트를 만드려면 React-Router-Dom 을 냅다 설치해왔던 것이다.💪 강해진 코어 의존성기존에는 아래와 같이 Link 태그를 불러와서 SPA 라우팅을 시켜주려면 당연히 너무나도 당연히 react-router-dom 에서 불러왔을 것이다.하지만 이제는 세상이 바뀌었다. 이제는 Link 태그를 포함 그동안 react-router-dom 에서 제공해주던 태그 및..

Jest란?Jest는 페이스북에서 만든 JavaScript testing framework이다. config를 따로 설정하지 않아도 빠르게 테스팅 환경을 만들 수 있다는 것이 큰 장점이다. 2 장에서의 기본 개념과 코드는 코딩앙마님의 Jest 강의와 유데미의 JS 강의중 테스팅 모듈 파트를 참고하여 작성하였다.  1. Install Jestnpm install --save-dev jest개발자 도구이므로 개발환경에서만 사용할거기 때문에 --save-dev를 붙여 설치한다. 2. Test 실행package.json "scripts": { "test": "jest" },스크립트 test 부분을 'jest'로 변경해준다 3. 테스트 코드 작성 (파일 생성)파일명.test.js또는 __tests__ t..

Page.tsx 가 메인페이지 그를 감싸는 Layout.tsx 페이지생성은 src 아래 폴더생성(subpage)>page.tsx 파일생성하면 페이지 생성완료 ex) http://www.ddd.com/subpage subpage에 page.tsx는 같은 레벨에 layout파일이 있다면 layout으로 감싸지며 그상위 폴더에 layout파일이 또있으면 또 감싸지고 그상위 폴더에 layout파일로 또감싸진다 page router의 경우는 pages > index.tsx -> main pages폴더 아래 파일을 생성하면 페이지생성이 완료 된다. ex) pages>about.tsx --> www.ddd.com/about 다이나믹 라우팅의 경우 app 폴더아래 첫번빼 경로 폴더를 만들고 다이나믹하게 바뀌는 segm..

프로젝트 생성 node 먼저 설치가 되어있어야한다. // 최신 버전 설치 npx create-next-app@latest 프로젝트명 // start with typescript (tailwind, eslint도 한번에 설치) npx create-next-app@latest 프로젝트명 --typescript --tailwind --eslint // yarn yarn create next-app yarn create next-app --typescript 프로젝트 실행 cd 해당 프로젝트 npm run dev​ http://localhost:3000/에서 초기 화면 확인가능

Create react app - CRA로 프로젝트 생성개요간단하게 React에 대해 알아봤고, 이제 하나하나씩 적용해보면서 어떻게 웹페이지를 만들어야 하는지에 대해 알아볼 것이다.리액트를 사용해 프로젝트를 시작하는 방법은 다양한데, 오늘은 create-react-app을 통해 만드는 것을 정리해보겠다. 앞으로의 학습은현장에서 바로 써먹는 리액트 with 타입스크립트이 도서를 중점으로 해서 할 계획이다. 1. create-react-appReact 애플리케이션을 쉽고 빠르게 설정할 수 있도록 도와주는 페이스북에서 만든 CLI 툴이다.Webpack이나 Babel 등의 설정 없이 즉시 React 프로젝트를 생성할 수 있고, 개발 서버, 빌드 시스템, ESLint, Jest 등의 도구가 기본적으로 포함되어 있..