react11 React 프로젝트 copy해서 옮기기 React 프로젝트를 복사해서 다른 PC로 옮기려고 합니다. 가장 간단한 방법은 전체 파일을 복사해서 옮기면 됩니다. 하지만 node_modules 폴더의 크기가 프로젝트 생성 초기에도 800MB 를 넘는군요. node_modules 폴더내의 내용은 프로젝트에 모듈 의존성 정보가 있어서 나중에 다시 받을 수가 있으므로 프로젝트를 복사해서 옮길때 빼도 되겠습니다. Linux에서 node_modules 폴더를 빼고 프로젝트 폴더를 복사하는 가장 간단한 방법이 rsync 명령을 사용하는 것 같습니다. 현재 폴더 아래에 my-app 이라는 프로젝트 폴더가 있을때 이것을 홈디렉토리 아래의 share 폴더에 같은 이름의 폴더로 복사하는 방법은 다음과 같습니다. $ rsync -av my-app ~/share/my-.. 2023. 6. 20. [React] 테스트 프레임웍 jest (1/4) - 샘플 프로젝트 만들기 자바스크립트 테스트 프레임웍인 jest를 사용해 봅니다. React와 함께 많이 쓰입니다. 사용된 운영체체는 fedora linux 입니다. 테스트 프로젝트 만들기 jest를 연습해볼 테스용 프로젝트를 만듭니다. 1. 프로젝트 폴더를 만듭니다. $ mkdir jest-app 2. 프로젝트 폴더로 들어가서 프로젝트를 초기화합니다. 모든 질문에는 엔터키를 입력하여 기본값을 선택합니다. typescript를 사용할 거라면 index.js 대신에 index.ts 를 입력합니다. 완료되면 package.json 파일이 만들어 집니다. $ cd jest-app # npm 사용시 $ npm init # yarn 사용시 $ yarn init 3. git repository를 만듭니다. git이 없으면 "jest --w.. 2023. 6. 5. [React] 생명주기(Lifecycle)과 Error Boundary React의 컴포넌트가 화면에 보여지고, 수정되고, 제거되는 생명주기(Lifecycle)될 때 내부적으로 다양한 함수들이 순차적으로 실행되어 처리됩니다. 이런 생명주기와 관계된 함수들을 알아봅니다. 참고로 테스트시에 각 함수에서 콘솔로 출력을 내는데 생명주기 함수가 두 번씩 호출됩니다. 이는 개발 환경에서 "index.tsx" 파일에서 를 호출하는데 를 사용하고 있기 때문이라고 합니다. build해서 나오는 배포판에는 이 부분이 빠지므로 문제가 없겠습니다. root.render( ); 생명주기 테스트용 소스 생명주기 테스트용 소스입니다. Hello.tsx파일로 App.tsx에서 부릅니다. import { Component } from "react"; interface HelloProps { name: s.. 2023. 6. 5. [React] 컴포넌트(Component)와 컴포넌트의 상태(State) React에서 페이지를 구성하는 것은 컴포넌트(Component)들 입니다. 컴포넌트를 만들기 위해서 함수(function)을 사용할 수도 있고 클래스(class)를 사용할 수도 있습니다. 두 가지를 섞어서 사용할 수도 있다고 합니다. 여기서는 기본적인 컴포넌트 사용법을 알아 봅니다. 함수형 컴포넌트 함수를 사용하여 컴포넌트를 만듭니다. 또한 컴포넌트에서 사용되는 데이터를 다루는 방법을 알아봅니다. 1. 컨포넌트 선언하기 function App() { const name = "React"; return Hello {nameame}!; } export default App; 컴포넌트가 되는 함수 App() 를 정의했습니다. 컴포넌트는 화면에 보여질 요소인 JSX를 반환합니다. 보통은 컴포넌트 하나를 하나의.. 2023. 6. 5. [자바스크립트] React 모듈 (Module) React 모듈은(module)은 주로 컴포넌트들을 다른 파일에 분리하는데 사용됩니다. 모듈은 자체 변수범위(Scope)을 가지기 때문에 외부에서 사용할 것은 export로 내보내야 하고, 모듈을 사용하는 쪽에서는 export된 것 중에서 사용하고자 하는 것은 import로 지정해야 합니다. React 모듈은 HTTP와 HTTPS를 통해서만 불러들일 수 있습니다. 로컬 파일시스템에서 file://로는 실행시킬 수 없습니다. 내보내기(export) 내보내기(export)는 변수, 상수, 심볼, 객체, 클래스를 모듈 밖에서 사용할 수 있도록 해줍니다. 모듈은 자체 scope을 가지므로 export 하지 않은 것은 외부에서 사용할 수 없습니다. 내보내기(export)는 명명된 내보내기(named export).. 2023. 6. 5. [React] JSX (JavaScript Xml) 사용하기 JSX(JavaScript Xml)는 자바스크립트의 확장으로 템플릿처럼 보입니다. React는 웹페이지 전체를 갱신하는 것이 아니라 필요한 부분만을 갱신해서 빠른 속도로 동작합니다. 이처럼 React에서는 전체 페이지 내용이나 교체될 html 조각들을 만들게 됩니다. 이런 html 조각을 편리하게 만들 수 있도록 해주는 것이 JSX입니다. JSX의 형태 JSX의 형태를 보겠습니다. 자바스크립트 문자열은 큰따옴표나 작은 따옴표로 둘러싸야 하지만 JSX는 그것이 없습니다. const element = Hello React!; JSX 는 하나의 엘리먼트만을 반환해야 합니다. 그래서 보통 엘리먼트로 감싸서 만들게 됩니다. 이렇게 하므로써 태그가 중첩되게됩니다. 리액트 v16부터는 Fragment 태그를 사용해서.. 2023. 6. 5. [React] Error: Type 'string' has no properties in common with type 'Properties<string | number, string & {}>'. TypeScript를 사용하는 React에서 JSX 표현식 오류가 발생했습니다. * 에러가 발생한 코드 const color = "blue"; const greeting = "Hello, React!"; return ( {greeting} ); * 발생한 에러 ERROR in src/App.tsx:10:10 TS2559: Type 'string' has no properties in common with type 'Properties'. 8 | return ( 9 | > 10 | {name} | ^^^^^ TypeScript는 익숙하지 않아서 에러 메세지를 보고서도 원인을 찾는데 좀 버벅였네요. TypeScript에서 style 속성은 객체를 받는데, 문자열(string)을 넣었기 때문에 발생한 에러였습.. 2023. 6. 5. [React] React 프로젝트 만들기(yarn, npx) fedora 리눅스에서 React 프로젝트를 만듭니다. 프로젝트를 만들기 위해서 npx 또는 yarn을 사용할 수 있습니다. TypeScript를 사용하도록 지정하는 방법도 알아봅니다. yarn을 사용하여 생성 yarn을 사용해서 프로젝트를 생성합니다. typescript를 사용하도록 지정합니다. $ yarn create react-app first-app --template typescript 프로젝트들을 한 곳에 모으기 위해 홈 디렉토리 아래에 workspace 폴더를 만들고 그 폴더에서 명령을 실행했습니다. 프로젝트의 이름은 first-app 입니다. workspace폴더 아래에 first-app 폴더가 만들어지고, TypeScript를 사용하는 템플릿이 생성됩니다. 프로젝트 생성 명령 실행시 다음.. 2023. 6. 5. Boot와 React를 사용한 Simple Homepage 템플릿 설치 (2/2) 전자정부 표준프레임워크 v4, Boot와 React를 사용하는 Simple Homepage 템플릿 두 번째 프론트엔드 부분을 설치해보겠습니다. 1. 필요사항 * git : 설치참조 - https://offbyone.tistory.com/440 * Node.js : 설치참조 - https://offbyone.tistory.com/441 * Visual Studio Code : 설치참조 - https://offbyone.tistory.com/435 2. 설치하기 - 명령창을 이용해서 프로젝트를 생성할 폴더(D:\workspace\vscode)로 이동합니다. 이 폴더 아래에 프로젝트 폴더가 생성됩니다. - git을 사용해서 프로젝트를 받습니다. egovframe-template-simple-react 폴더가 .. 2022. 4. 10. Boot와 React를 사용한 Simple Homepage 템플릿 설치 (1/2) 전자정부 표준프레임워크 v4에서 React를 사용한 템플릿이 추가되었네요. 어떤 모습인지 설치를 해보겠습니다. 테스트에 사용된 운영체제는 Windows 10입니다. React는 SPA(Single Page Application)을 만드는 프레임워크입니다. SPA는 일반적인 홈페이지와 다르게 페이지 전환이 없고, 하나의 페이지에서 모든 화면 구성요소를 자바스크립트로 만들어서 교체하는 방식으로 동작합니다. 페이지 전환이 일어나지 않으므로 화면에 표시할 데이터는 Ajax를 이용해 백엔드 서버와 주로 JSON 형식의 데이터를 주고 받습니다. SPA의 또하나의 특징으로는 사용자에게 보여지는 자바스크립트 프로그램을 사용자에게 보내주는 프론트엔드 서버와 사용자로부터 받은 데이터를 처리하는 백엔드 서버를 별도로 구성하.. 2022. 4. 9. TypeScript를 사용하는 React App 만들기(feat. yarn berry) React와 TypeScript를 공부하는 첫 단계로 패키지 관리자 yarn을 사용해 프로젝트를 생성해 보았습니다(yarn 이외에 npm, npx를 이용한 프로젝트 생성 방법도 있습니다). 처음의 목표는 yarn berry(yarn v2)를 global로 설치를 해서 yarn classic(yarn v1)없이 바로 yarn berry + react + typescript 프로젝트를 생성하는 것이었습니다. 하지만 생성된 프로젝트는 실행시 오류가 너무 많이 떠서 포기 하였습니다. 다음으로 선택한 방법이 yarn classic으로 프로젝트를 생성한 다음에 yarn berry로 마이그레이션하고, PnP(플러그앤플레이)설정과 Zeor-Install 설정까지 하는 것이었습니다. 결론부터 말하자면 yarn berry.. 2022. 3. 20. 이전 1 다음
