728x90 728x90 전체 글153 리액트에 typescript 설치 하기 리액트 앱에서 typescript 설치하기 Create React App Docs에 ‘Adding TypeScript 문서를 볼 수 있다. https://create-react-app.dev/docs/adding-typescript/ 여기에서 리액트 프로젝트를 만들 때 타입스크립트 기반 프로젝트로 생성하는 방법과 기존 프로젝트에 타입스크립트를 추가하는 방법이 설명되어 있다. 타입스크립트 기반 프로젝트로 생성하는 방법 npx create-react-app my-app --template typescript or yarn create react-app my-app --template typescript 기존 프로젝트에 타입스크립트를 추가하는 방법 npm install --save typescript @typ.. 2023. 3. 2. 타입스크립트의 타입 종류 타입스크립트의 타입 종류 Primitives 자바스크립트에서 사용하는 기본형(Primitives) 타입으로는 숫자형, 문자열, 부울(Boolean)형이 있다. 만약 ‘age’라는 변수를 만들어 사용자의 나이를 저장한다면, 여기에는 명확히 숫자만 저장해야 한다고 표시하고 싶을 것이다. let age : number; age = 20; 변수 이름 뒤에 콜론을 붙이고 그 뒤에 타입을 표시해 해당 변수에 저장할 자료형 지정하면 된다. 마찬가지로 ‘userName’이라는 변수에 문자열 타입을 지정할 수 있다. let userName: string = "Myname"; 타입스크립트에서는 ‘number’와 ‘string’ 표기가 소문자로 시작되는데 ‘Number’ 나 ‘String’으로 쓰게 되면 자바스크립트의 Nu.. 2023. 3. 1. 타입스크립트를 사용하는 이유와 설치 방법 타입스크립트를 사용하는 이유와 설치 방법 타입스크립트란 타입스크립트는 자바스크립트를 기반으로 하되 보다 더 확장된 프로그래밍 언어인 superset 언어이다. 자바스크립트의 기본적인 문법들과 if 문, for 반복문, 객체 사용법 등을 그대로 사용한다. 타입스크립트는 자바스크립트 문법에 몇 가지 기능을 추가한 것이고 자바스크립트 라이브러리가 아니기 때문에 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하지 않는다. 가장 중요한 건 정적 타입(statically Typed)의 특징을 갖는다는 것이고 ‘타입스크립트’라는 이름도 여기에서 유래했다. 정적 타입 기능이 추가된 이유는 자바스크립트가 원래 동적 타입(dynamically typed) 언어이기 때문이다. function add(.. 2023. 2. 28. React 테스팅의 개념과 종류 React 테스팅의 개념과 종류 테스팅이란 우리는 개발자로서 코드를 작성해서 특정 속성을 구현하거나 특정 문제를 해결하고 이 애플리케이션을 브라우저에서 먼저 보고 시험적으로 테스트한다. 이것들은 수동적인 테스팅이고 항상하고 있는 것인데 이런 수동적인 앱 테스팅은 오류 발생이 쉽다. 수동으로는 가능한 모든 조합과 시나리오를 테스트하기 어렵기 때문이다. 복잡한 리액트 앱에서 새로운 속성을 추가한다거나 기존의 속성을 변경한다면 이 변경에 대한 테스트 또는 새로운 속성에 대한 테스트는 하겠지만 애플리케이션의 다른 모든 부분을 항상 테스트 하지는 않을 것이다. 어떤 것을 변경한 것이 앱에서 다른 속성을 손상시킬 수 있고 우리가 모든 것을 항상 테스팅 하는 것이 아니기 때문에 손상을 유발한 변경사항과 버그를 그냥 .. 2023. 2. 25. React 배포하기 React 배포하기 배포 과정 1. 테스트 당연한 얘기지만 배포전에 애플리케이션을 철저하게 테스트한다. 애플리케이션으로 여러 가지를 테스트해보고 에러를 제대로 처리할 수 있는지 등을 철저하게 확인한다. 2. 최적화 코드에서 최적화할 수 있는 부분은 최적화 한다. 그 중에서도 lazy loading은 중요하다. 3. 빌드 코드를 더 써야하는 과정은 아니고 이미 작성되어 있는 스크립트를 실행한다. 그러면 스크립트가 코드들은 최대한 작게 축소하고 자동으로 최적화한다. 웹사이트가 완전히 로딩되어야 사용자가 웹사이트와 인터랙트할 수 있기 때문에 코드를 적게 보내면 앱이 더 빨리 로딩될 것이다. 그렇게 결과 값을 얻어서 서버로 올릴 수 있는 상태로 만든다. 4. 서버에 업로드 배포 준비가 된 최적화된 코드가 생성되.. 2023. 2. 24. React lazy loading 개념과 사용 방법 React lazy loading 개념과 사용 방법 레이지 로딩은 해당 코드가 필요할 때만 그 특정 코드를 로딩하는 것이다. React 애플리케이션을 사용하면 결국 큰 자바스크립트 코드 번들을 빌드하게 되고 해당 사이트를 사용하려면 웹 사이트의 모든 방문자가 이 전체 번들을 다운로드해야 한다. React가 이 모든 유저 인터페이스를 화면에 띄우고 애플케이션이 반응하게 하기 위해 모든 코드가 다운로드된 후에만 작동한다. 즉 사용자가 화면이 보이고 애플리케이션을 사용할 수 있을 때까지 기다려야 한다. 따라서 우리는 이 초기 코드 번들을 가능한 한 작게 만들어야 하고 특정한 코드는 진짜로 해당 페이지에 들어올 때만 다운로드되도록 해야 한다. 이것이 바로 레이지 로딩의 개념이다. 코드를 여러 덩어리와 여러 번들.. 2023. 2. 23. 이전 1 ··· 16 17 18 19 20 21 22 ··· 26 다음 728x90 728x90
