분류 전체보기
-
[next.js] 메뉴얼 - 설치, 세팅, 라우팅React/next.js 2023. 3. 22. 16:15
next.js 메뉴얼은 다음과 같다. Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 설치 및 세팅 npx create-next-app@latest 프로젝트_이름 create-next-app내부적으로는 Next.js 앱을 부트스트랩하는 이라는 도구를 사용합니다 . 플래그를 통해 이 템플릿을 사용합니다 --example. Next.js의 페이지 pages 폴더 안에 파일을 저장하면 자동으로 페이지가 작동된다. expor..
-
[next.js] 적용 방식 - 컴파일, 축소, 번들링, 빌드, 코드분할, 런타임, 렌더링React/next.js 2023. 3. 22. 15:30
Next.js에 적용되는 방식 Next.js는 애플리케이션의 개발 및 생산 단계 모두에 대한 기능을 제공합니다. 예를 들어: 개발 단계에서 Next.js는 개발자와 애플리케이션 구축 경험을 최적화합니다. TypeScript 및 ESLint 통합 , 빠른 새로 고침 등과 같은 개발자 경험을 개선하기 위한 기능이 함께 제공됩니다 . 프로덕션 단계에서 Next.js는 최종 사용자와 애플리케이션 사용 경험을 최적화합니다. 성능과 접근성을 높이기 위해 코드를 변환하는 것을 목표로 합니다. 환경마다 고려 사항과 목표가 다르기 때문에 응용 프로그램을 개발에서 프로덕션으로 이동하려면 수행해야 할 작업이 많습니다. 예를 들어 애플리케이션 코드는 컴파일 , 번들 , 축소 및 코드 분할이 필요합니다 . 컴파일이란 ? 개발자..
-
[next.js] next.js 정의,명령형 프로그래밍과 선언형 프로그래밍React/next.js 2023. 3. 22. 14:54
Next.js Next.js의 정의 Next.js는 빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 유연한 React 프레임워크 입니다 . 웹 애플리케이션의 빌딩 블록 최신 애플리케이션을 구축할 때 고려해야 할 몇 가지 사항이 있습니다. 와 같은: 사용자 인터페이스 - 사용자가 애플리케이션을 소비하고 상호 작용하는 방법. 라우팅 - 사용자가 애플리케이션의 여러 부분 사이를 탐색하는 방법입니다. 데이터 가져오기 - 데이터가 있는 위치와 데이터를 가져오는 방법. 렌더링 - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치. 통합 - 귀하가 사용하는 제3자 서비스(CMS, 인증, 결제 등) 및 연결 방법. 인프라 - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행하는 곳입니다..
-
[TypeScript] useStrict을 사용해야 하나요? + readonly, 추론 가능한 타입, as const 단언문웹/TypeScript 2023. 3. 22. 12:34
TypeScript useStrict을 사용해야 하나요? 결론을 먼저 말씀드리면 "아니요" 입니다. 그 이유는 Ts의 안전성 검사가 usestrict 보다 훨씬 엄격한 체크를 하기 때문입니다. useStrict "엄격한 사용" 또는 "엄격한 모드"는 ECMAScript 5(ES5)의 JavaScript에 도입된 기능으로 개발자가 더 엄격하고 안전한 언어 버전을 선택할 수 있습니다. JavaScript 파일 또는 함수의 맨 위에 "use strict"가 추가되면 이전 버전의 JavaScript에서 허용되었던 특정 작업을 제한하는 일련의 규칙이 활성화됩니다. 이러한 제한 사항은 다음과 같습니다. 철자 오류를 포착하고 글로벌 네임스페이스 오염을 방지하는 데 도움이 되는 선언되지 않은 변수의 사용을 허용하지 않..
-
[TypeScript] type과 interface 차이,타입 집합웹/TypeScript 2023. 3. 22. 12:21
TypeScript type과 interface 차이 하나의 프로젝트에서 type과 interface 중 한가지 일관된 스타일을 확립하는 것이 좋다. interface type 재선언 O (선언적 확장) 재선언 X 객체만 가능 모든 타입 가능 computedValue 가능 ex) [ k in list ] : string interface의 경우 extends를 이용해서 타입을 확장한다. type의 경우 & 연산자를 이용해서 타입을 확장한다. type 집합 - & interface Person { name : string } interface Lifespan { birth : Date, death : Date, } type personSpan = Person & Lifespan // type의 경우 & 연..
-
[TypeScript] Js와의 관계, 타입 구문, 타입 작성 방법웹/TypeScript 2023. 3. 22. 12:04
What is TypeScript? JavaScript and More TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript는 JavaScript에 추가 구문을 추가하여 편집기와의 긴밀한 통합을 지원합니다 . 편집기에서 초기에 오류를 포착하십시오. A Result You Can Trust TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your..
-
[TypeScript] 타입스크립트 책 추천웹/TypeScript 2023. 3. 22. 11:45
What is TypeScript? JavaScript and More TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript는 JavaScript에 추가 구문을 추가하여 편집기와의 긴밀한 통합을 지원합니다 . 편집기에서 초기에 오류를 포착하십시오. A Result You Can Trust TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your..
-
[redux] 리덕스 라이브러리 - 스토어 간편하게 사용하기React/redux 2023. 3. 17. 15:15
리덕스 라이브러리란? 1. 상태를 체계적으로 관리할 수 있다. >> 프로젝트 규모가 클 때 적합하다. 2. 개발자 도구 지원해준다. 3. 미들웨어를 지원해준다. >> 비동기 작업이 용이하다. react-redux 사용하기 방법 1. 임시함수를 생성한다. import React from 'react'; import Counter from '../components/Counter'; import { connect } from 'react-redux'; import { increase, decrease } from '../modules/counter'; const CounterContainer = ({number,increase,decrease}) => { return ( ); }; const mapState..