BelieveCom

오늘은 리액트 네이티브(React Native)에서 Image Component 사용법을 알아보겠습니다. 앱에서 이미지는 정말 많이 사용되는 기능으로 다양한 방법으로 접근이 가능합니다.

먼저 App.js 파일을 클릭해서 파일을 오픈합니다.  리액트 네이티브(React Native)에서 Image Component를 사용할 수 있게 소스 상단에 있는 import를 사용해서 "Image"를 추가해주세요.

Image Component는 Network Image 리소스를 사용하는 방식과 직접 Image 리소스를 접근하는 방식으로 구분할 수 있습니다. 먼저 Network Image 리소스를 사용하기 위해서 Image Component를 설정하고 source에 주소를 입력합니다. 여기서 중요한 내용은 Network Image 리소스를 사용할 경우 반드시 style를 사용해서 크기를 지정해야 합니다. 크기를 지정하지 않으면 이미지가 화면에 출력되지 않습니다.

<Image
      source ={{uri:"https://reactnative.dev/img/tiny_logo.png"}}
      style={{width:300, height:300}} />

Android 디바이스를 갱신하면 React 로고 이미지를 확인할 수 있습니다. Image Component는 resizeMode 옵션에서  cover, contain, center, stretch, center, repeat 속성을 추가하면 다양한 이미지 크기 변경이 가능합니다.

두 번째 방법은 직접 Image 리소스를 사용하는 방법입니다. 먼저 Project 아래에 img 폴더를 생성합니다. 리액트 네이티브(React Native)는 다양한 디바이스에 앱을 구성하므로, 항상 공통 폴더를 사용해서 접근하는 게 편리합니다. 리소스에 사용할 이미지를 img 폴더에 복사합니다.

이제 require 함수를 사용해서 직접 리소스를 접근할 수 있습니다. Network Image 리소스와 다르게 크기를 지정하지 않아도 원본 크기로 이미지를 출력합니다. 소스 접근은 "./img" 상위폴더 경로를 사용해서 접근하면 됩니다. 폴더 생성이 불편하면 Project 폴더 아래 이미지를 저장해도 상관없습니다.

<Image source={require('./img/rnimg.png')}
                 style={{width:200, height:200}}/>

저장된 Image가 Android에 출력되는 것을 확인할 수 있습니다.

마지막으로 이미지를 가운데 출력하기 위한 방법을 알아보겠습니다. 이미지를 중앙에 위치하기 위해서 다양한 위치 조정 옵션을 사용하지만, 가장 쉽게 중앙에 위치하기 위해서는 View를 사용해서 이미지를 구성하면 됩니다. justifyContent, alignItems 옵션을 사용해서 중앙에 Component가 위치하게 적용하면 이미지가 중앙으로 이동합니다.

<View style={{
              justifyContent:'center',
              alignItems: 'center',
          }}>
              <Image
                  source ={{uri:"https://reactjs.org/logo-og.png"}}
                  style={{width:300, height:300}}
              />
          </View>

오늘은 리액트 네이티브(React Native)에서 많이 사용하는 Image Component 사용법을 공부했습니다. 중요한 내용은 Network 참조 시 크기 조정 부분만 기억하면 리액트 네이티브(React Native)에서 Image Component를 쉽게 사용할 수 있습니다. 감사합니다.

오늘은 React Native에서 Button 생성 및 이벤트 연동 방법을 알아보겠습니다. 매우 간단하게 등록할 수 있어 누구나 쉽게 개발이 가능합니다. 먼저 react-native int 명령어를 사용해서 Project를 만들어주세요.

생성된 Project를 Code 수정 프로그램을 사용해서 오픈해주세요. 메인 폴더 아래에 App.js 파일을 확인할 수 있습니다. App.js는 기본적인 React Native 구성 파일입니다.

먼저 Button, Alert를 사용하기 위해서 import를 설정합니다. App.js 파일 상단에 import 항목을 확인할 수 있습니다. 'react-native' import 항목에 Button, Alert를 추가합니다.

이제 간단하게 버튼을 생성하겠습니다. Header 아래쪽에 "<Button>"을 사용해서 버튼을 생성하고, title, color을 사용해서 버튼 스타일을 구성합니다. 이제 onPress 이벤트를 사용해서 Alert를 호출하게 구성해주세요.

<Button
       title="버튼"
       color="#f29477"
       onPress={() => Alert.alert('버튼 클릭 이벤트 발생')}
/>

onPress 이벤트는 버튼을 클릭하면 연결된 소스를 실행합니다. 버튼을 클릭하면 Alert 메시지가 출력됩니다.

react-native run-android 명령어를 사용해서 Android를 실행합니다. 기본 구조에서 아래쪽에 버튼을 확인할 수 있습니다. React-native는 수정 후 저장하면 바로 적용되므로, 매우 편리하게 개발할 수 있습니다.

버튼을 클릭하면 이벤트가 동작하면서 "버튼 클릭 이벤트 발생" 메시지가 출력됩니다. React Native를 사용해서 간단하게 버튼을 생성하고, 이벤트를 연동하는 방법을 공부했습니다. 감사합니다.

react native는 android, iOS를 동시게 개발할 수 있는 장점이 있습니다. 동시에 두 가지 디바이스를 적용할 수 있어 생산성이 정말 최고입니다. 오늘은 Windows 환경에서 react native 설치 및 실행 방법을 알아보겠습니다.

Chocolatey 설치

가장 먼저 Windows 환경에서 패키지를 설치할 수 있는 Chocolatey를 설치해주세요. 간단하게 다양한 패키지를 설치할 수 있는 좋은 프로그램입니다.

cmd 환경에서 아래 명령어를 입력해서 설치하면 됩니다.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

명령어를 입력하면 자동으로 다운로드 후 설치가 진행됩니다.

choco -v를 사용해서 chocolatey 버전을 확인할 수 있습니다.

choco search 패키지를 입력하면 내용을 확인할 수 있습니다.

Nodejs 설치

react-native는 javascript를 사용하므로, javascript의 런타임 Nodejs를 설치해야 합니다. 기본적으로 개발환경이 구성되어 있다면 간단하게 버전 확인 후 설치 안되어 있다면 choco 명령어를 사용해서 설치합니다.

choco install -y nodejs.install

정상적으로 nodejs가 설치되어 있다면 node -v 명령어를 사용해서 버전을 확인할 수 있습니다.

react-native CLI 설치

이제 react-native를 실행할 수 있는 react-native CLI를 설치해야 합니다.

npm install -g react-native-cli 명령어를 사용해서 react-native-cli를 설치합니다.

정상적으로 설치되었다면 npx react-native -v 명령어를 사용해서 버전을 확인할 수 있습니다.

react-native project 생성

react-native-cli이 정상적으로 설치되어 있다면 이제 react-native project를 생성해서 android 버전을 확인해야 합니다.

npx react-native init app2

react-native init 명령어를 사용해서 프로젝트를 생성합니다.

혹 실행 시 react 심벌이 아닌 텍스트 warning이 화면에서 보일 경우는 비정상적으로 react-native가 설치된 상태입니다.

https://believecom.tistory.com/781

위 내용을 참고해서 react-native를 재 설치하면 정상적으로 프로젝트를 생성할 수 있습니다.

정상적으로 프로젝트가 설치되면 react-native 심벌 이미지를 확인할 수 있습니다.

Visual Studio Code 설치

이제 생성된 소스를 확인하기 위해서 가장 간편하고 쉽게 사용할 수 있는 Visual Studio Code를 설치합니다.

https://visualstudio.microsoft.com/ko/downloads

하단에서 Visual Studio Code를 다운받아서 설치해주세요.

Visual Studio Code 설치 후 실행하면 파일 메뉴에서 "작업 영역에 폴더 추가"를 사용해서 생성된 react-native 프로젝트 폴더를 선택합니다.

android 폴더 하단에 있는 build.gradle 파일을 오픈해서 android 실행 버전을 확인합니다. buildToolsVersion 버전이 31 버전으로 실행되는 것을 확인할 수 있습니다. Visual Studio Code를 사용하면 쉽게 코드를 수정할 수 있어 매우 편리합니다. 가장 좋은 점은 iOS에서도 사용이 가능하고 다양한 plug in을 사용할 수 있습니다. 이제 버전을 확인했으니, android SDK를 설치해야 합니다.

Android SDK 설치

Android SDK를 설치하기 위해서 android Studio를 다운로드 후 설치해주세요.

https://developer.android.com/studio?hl=ko 

android Studio 설치 후 File -> Setting 메뉴를 선택해서 android SDK를 확인합니다.

Android API 31버전을 체크해서 SDK를 설치합니다.

정상적으로 설치되면 SDK 폴더에서 android 31 버전을 확인할 수 있습니다. 이제 AVD Manager를 사용해서 android 31 버전 Devices를 생성합니다.

정상적으로 Devices가 설치되면 android 화면을 확인할 수 있습니다. 이제 마지막으로 SDK 경로를 환경 변수에 저장합니다. 기본적으로 SDK 경로를 SDK 설치 시 상단에서 확인이 가능합니다.

새 사용자 변수를 클릭해서 ANDROID_HOME 변수 이름을 입력하고 변수 값에 SDK 경로를 등록해줍니다.

react-native androd 실행

이제 run-android 명령어를 사용해서 android 버전 react-native를 실행하겠습니다.

생성된 프로젝트 폴더로 이동해서 cmd를 실행합니다.

npx react-native run-android 명령어를 사용하면 실행 화면이 활성화되면서 Android를 구성합니다. 모든 구성이 완료되기까지는 매우 긴 시간이 필요합니다. 상위 버전에서는 Android를 별도 실행하지 않아도 자동으로 android Devices를 실행합니다.

모든 준비가 완료되면 실행된 android 화면에서 "Welcome to React Native" 앱 실행 화면을 확인할 수 있습니다. react native는 많은 설정이 필요하지만, 한번 설치하면 간단하게 업그레이드가 가능합니다. 생산성 높은 앱 개발 언어를 찾고 있다면 react-native Windows에 한번 설치해보세요. 감사합니다.

react native를 설치 후 프로젝트를 생성할 경우 정상적으로 react 화면이 출력되어야 합니다. 하지만 비정상적으로 react native가 설치되면 "cli.init is not a function" 오류가 발생합니다.

다양한 방법을 사용해도 react native 오류가 해결되지 않습니다. 해결 방법을 검색해보니 글로벌 환경 react native를 재 설치하라고 합니다. 그래서 먼저 기존 설치된 react native를 삭제합니다.

npm uninstall -g react-native-cli 명령어를 실행해서 기존 설치 환경을 모두 삭제합니다.

npm install -g react-native-cli 명령어를 실행해서 react native cli를 설치합니다.

npm install -g react-native 명령어를 사용해서 마지막 패키지를 설치하고 프로젝트를 다시 생성합니다.

npx react-native init app 프로젝트를 생성하면 정상적으로 react native 프로젝트가 생성됩니다. 간단하게 해결이 가능하므로 "cli.init is not a function" 오류가 발생하면 무조건 재 설치해주세요. 감사합니다.

리액트(React)는 다양한 UI를 사용해서 스크립트를 작성할 수 있습니다. 오늘은 가장 많이 사용하는 리액트(React) UI 라이브러리인 Material-UI 설치 방법을 알아보겠습니다.

Material-UI는 구글 메테리얼 디자인을 기반으로 제작된 UI라이브러리입니다. 다양한 레퍼런스가 있어 참고하기 좋고 커스터마이징도 잘되어 있어 쉽게 사용할 수 있습니다. 테마 기반으로 제작도 가능하기 때문에 UI 전체를 빠르게 변경할 수 있습니다.

https://mui.com/

리액트(React) UI라이브러리 material-ui 설치는 홈페이지에서 바로 확인할 수 있습니다.

설치 하고 싶은 프로젝트에서 "npm install @material-ui/core" 명령어를 사용해서 UI 라이브러리를 설치합니다.

material-ui 아이콘도 사용하고 싶다면 "npm install @material-ui/icons" 명령어를 사용해서 아이콘을 설치합니다.

설치된 UI 라이브러리는 node_modules 폴더에서 확인이 가능합니다.

간단하게  material-ui를 호출해보겠습니다. 먼저 라이브러리를 import해야 합니다.

"import { Button } from "@material-ui/core""를 코드를 사용해서 소스에 라이브러리를 import 해주세요.

3가지 타입 버튼을 구성하겠습니다.

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

간단하게 버튼 스크립트를 작성하면 3개의 버튼을 확인할 수 있습니다.

리액트(React) 기본 타입 아래쪽에 타입에 따른 material-ui button이 구성됩니다.

간단한 버튼 오브젝트이지만, 일반 버튼과 큰 차이가 있습니다. 간단하게 UI를 이쁘게 구성할 수 있어 material-ui 사용은 좋은 방법이라고 생각됩니다. 지금 바로 설치해서 사용해보세요.

감사합니다.

React를 사용해서 오래간만에 프로젝트를 생성하려고 하니까 오류가 발생하면서 프로젝트가 생성 안됩니다.

"You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1)" 내용으로 create-react-app을 삭제 후 다시 인스톨하라고 합니다.

"npm uninstall -g create-react-app" 명령어를 사용해서 careate-react-app을 삭제합니다.

정상적으로 삭제되면 아래 내용처럼 패키지를 삭제합니다.

두 번째 yarn을 사용해서 global create-react-app을 삭제해야 합니다. 그런데 yarn이 설치가 안되어 있습니다.

yarn은 자바스크립트 패키지 매니저로 npm을 사용해서 설치해줍니다.

"npm install --global yarn" 명령어를 사용해서 설치합니다.

yarn을 설치하고 "yarn global remove create-react-app" 명령어를 실행해서 create-react-app을 삭제합니다.

정상적으로 삭제 후 "npm add create-react-app" 명령어를 사용해서 create-react-app을 다시 설치합니다.

npx create-react-app 명령어를 사용해서 프로젝트를 생성하면 정상적으로 패키지가 설치됩니다.

1. npm uninstall -g create-react-app
2. yarn global remove create-react-app
3. npm add create-react-app
4. npx create-react-app createreact

4가지 명령어를 순차적으로 진행하면 react 버전 오류를 해결할 수 있습니다.

생성된 프로젝트는 정상적으로 컴파일되어 Learn React를 확인할 수 있습니다.

감사합니다.

리액트(React)를 사용하면 클라이언트에서 다양한 기능을 실행할 수 있어 서버에 부하를 최소화할 수 있습니다. 오늘은 증감, 감소 버튼을 사용해서 서버 연결 없이 클라이언트에서 카운트를 실행할 수 있는 리액트(React) Component를 만들어 보겠습니다.

먼저 리액트(React)를 사용해서 기본적으로 접근할 수 있는 함수를 만들어 보겠습니다.

function formatName(user : any){
    return user.firstName + ' ' + user.lastName;
}
const user = {
    firstName: '365',
    lastName: ' talk'
};

formatName 함수는 user 메서드 firstName, lastName를 사용해서 이름을 생성하는 함수입니다.

<h1>
    Hello,{formatName(user)}!
</h1>

'{' 기호를 사용해서 formatName 함수를 호출하면 user 이름을 확인할 수 있습니다.

리액트(React)는 간단하게 함수를 만들 수 있고, 태그를 사용해서 함수에 접근 가능합니다. 출력 결과 user 이름을 확인할 수 있습니다. 기본적으로 함수 및 Component를 만들어서 다양한 기능을 개발할 수 있습니다.

증감, 감소 기능을 구현하기 위해서 useState를 사용해서 counter를 진행하겠습니다.

const [counter, setCounter] = useState(0)

useState는 리액트(React)에 사용되는 Hook 입니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해 줍니다. 간단하게 말하면 내장 Hook 기능으로 선언된 변수를 클라이언트에서 지속적으로 접근 변경이 가능한 컴포넌트(Component)입니다.

이젠 선언된 counter을 사용해서 버튼에 연동하겠습니다.

<h4> You clicked { counter } times</h4>
<div>
    <button onClick={()=> setCounter(counter + 1)}> Increase</button>
    <button onClick={()=> setCounter(counter - 1)}> Decrease</button>
</div>

counter state를 사용해서 증감 연산에 따른 변수를 출력하고 두개의 버튼을 사용해서 setCounter 함수를 호출합니다. state로 선언된 counter에 증감, 감소를 적용해서 counter 내용을 변경합니다.

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const [counter, setCounter] = useState(0)
    function formatName(user : any){
        return user.firstName + ' ' + user.lastName;
    }
    const user = {
        firstName: '365',
        lastName: ' talk'
    };

  return (
    <div className="App">
      <header className="App-header">
          <h1>
              Hello,{formatName(user)}!
          </h1>
          <div>
              <h4> You clicked { counter } times</h4>
              <div>
                  <button onClick={()=> setCounter(counter + 1)}> Increase</button>
                  <button onClick={()=> setCounter(counter - 1)}> Decrease</button>
              </div>
          </div>

      </header>
    </div>
  );
}

export default App;

컴파일을 실행 후 Increase, Decrease 버튼을 클릭하면 변수가 증감, 감소하는 것을 확인할 수 있습니다. 클라이언트 재 실행 없이 state에 접근할 수 있어 Ajax보다 편리하게 사용할 수 있습니다.

이번에는 증감, 감소 버튼을 출력하는 컴포넌트(Component)를 만들어 보겠습니다.

먼저 TypeScript File 메뉴를 선택해서 jsx 파일을 생성합니다.

두 개의 타입을 선택할 수 있는데 아래쪽에 있는 jsx 파일을 선택하고 이름을 입력하면 .jsx 파일을 확인할 수 있습니다.

import React, {Component} from 'react';

class Count extends Component {
    constructor(props : Count) {
        super(props);
        this.Increase = this.Increase.bind(this);
        this.Decrease = this.Decrease.bind(this);
    }
    state=
        {
            counter : 0
        }
    Increase = ()=>{
        this.setState({
            counter:this.state.counter+1
        })
    }
    Decrease = () =>{
        this.setState({
            counter:this.state.counter-1
        })
    }
    render() {
        return (
            <div>
                <div>number {this.state.counter}</div>
                <button onClick={this.Increase}>Increase</button>
                <button onClick={this.Decrease}>Decrease</button>
            </div>
        );
    }
}

export default Count;

Component를 상속 받고 constructor을 사용해서 컴포넌트(Component) 실행 시점에 초기화를 진행합니다.

state에 counter을 0으로 초기화하고 Increase, Decrease 함수를 선언합니다. 각 함수는 counter을 사용해서 내부 state에 접근 후 증감, 감소를 실행합니다.

2개의 버튼을 사용해서 onClick 이벤트에 Increase, Decrease 함수를 연동합니다. 이제 Count 컴포넌트(Component)가 완성되었습니다. 이제 완성된 Count 컴포넌트(Component)를 App.tsx에 호출해보겠습니다.

import Count from './Count'

상단에 import를 사용해서 Count.tsx 위치를 설정합니다.

컴포넌트(Component)는 태그를 사용해서 호출이 가능합니다.

<div>
    <h4>
        Count Component
    </h4>
    <Count> </Count>
</div>

하단에 <Count> </Count> 태그를 선언하고 컴파일을 진행합니다.

App.tsx 메인에 저장된 버튼 아래쪽에 Count 컴포넌트(Component)가 위치하는 것을 확인할 수 있습니다. 기존과 동일하게 동작하는 것을 확인할 수 있습니다. 리액트(React)는 컴포넌트(Component)를 사용해서 다양한 UI를 빠르게 전환할 수 있습니다. 내장 HOOK은 브라우저 새로고침 없이 state에 접근이 가능해서 서버 통신을 최소화할 수 있습니다. UI를 컴포넌트(Component) 기반으로 댜앙하게 개발하면 재 사용을 높일 수 있어 빠른 개발에 도움을 줍니다. 

감사합니다.

리액트(React)를 사용하면 클라이언트에서 다양한 코드를 사용할 수 있어 Web 화면 변화에 따라서 다양한 구성이 가능합니다. 오늘은 리액트(React)를 사용해서 이미지 업로드 전에 이미지를 미리 보는 방법을 알아보겠습니다. 

URL.createObjectURL() 객체를 사용해서 이미지를 확인하겠습니다. createObjectURL() 메서드는 URL을 DOMString으로 반환합니다. 반환된 정보를 사용해서 이미지 정보를 저장하고 이미지를 출력하겠습니다.

기본 구조는 매우 간단하게 "파일 선택", "미리 보기 이미지", "삭제"로 구성하겠습니다.

먼저 리액트(React) 컴포넌트 useState를 사용해서 값 변화를 관리하겠습니다.

import React, {useState} from 'react';

상단에 useState 컴포넌트를 import 합니다.

useState를 사용하기 위해서 이미지 변수를 선언합니다.

const [fileImage, setFileImage] = useState("");

리액트(React) useState 컴포넌트를 호출하면 배열을 반환합니다. 첫 번째 파라미터는 현재 상태이고, 두 번째 파라미터는 Setter 함수입니다.

  const saveFileImage = (event: React.ChangeEvent<HTMLInputElement>) =>{
    // @ts-ignore
    setFileImage(URL.createObjectURL(event.target.files[0]));
  };

이미지 정보를 저장하기 위해서 HTMLinputElement 이벤트가 발생하면 URL.createObjectURL을 사용해서 DOMString을 setFileImage Setter 함수를 사용해서 저장합니다.

  const deleteFileImage = () =>{
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };

마지막으로 저장된 이미지를 삭제할 수 있는 deleteFileImage를 정의합니다. URL.revokeObjectURL 메소드를 사용해서 객체를 초기화하고, setFileImage Setter 함수를 사용해서 useState 컴포넌트를 초기화합니다.

이제 선언한 메서드를 사용해서 HTML를 구성해보겠습니다.

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  const [fileImage, setFileImage] = useState("");
  const saveFileImage = (event: React.ChangeEvent<HTMLInputElement>) =>{
    // @ts-ignore
    setFileImage(URL.createObjectURL(event.target.files[0]));
  };
  const deleteFileImage = () =>{
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };
  return (
      <>
        <h1>이미지 업로드 </h1>
          <div style={{
              alignItems: "center",
              justifyContent: "center", }} >
              <input
                  name="imggeUpload"
                  type="file"
                  accept="image/*"
                  onChange={saveFileImage} />
            </div>
              <div>
                <h1>미리보기 이미지</h1>
              </div>
                <div>{fileImage && ( <img alt="sample" src={fileImage}
                                           style={{ margin: "auto" }} /> )}
                <button style={{
                  width: "50px",
                  height: "30px",
                  cursor: "pointer", }}
                        onClick={() => deleteFileImage()} > 삭제 </button>
              </div>
      </>
  );
}
export default App;

input 태그를 이용해서 파일을 선택하고 saveFileImage 메서드를 호출해서 useState를 저장합니다.

저장된 useState는 img 태그 src에 연결해서 이미지를 화면에 출력할 수 있습니다.

업로드하기 위한 이미지를 선택하면 미리 보기 이미지 아래쪽에 선택한 이미지를 확인할 수 있습니다. 이미지를 먼저 확인이 가능해서 업로드 시 매우 편리하게 사용할 수 있는 기능입니다.

삭제 버튼을 클릭하면 deleteFileImage를 호출해서 메모리를 초기화하고 저장된 이미지를 삭제합니다.

리액트(React) useState를 사용해서 화면 전환에 따른 값을 저장할 수 있어 다양한 기능을 사용할 수 있는 정말 편리한  기능입니다. 리액트(React) 공부 지금 바로 시작하세요.

감사합니다.

리액트(React)를 사용하면서 기존 JS 프로젝트를 TS로 변경해서 사용할 경우 특정 오류가 발생합니다.

Parameter 'user' implicitly has an 'any' type.

user를 선언하고 사용할 경우 접근에 따른 타입 오류가 발생합니다.

error 내용을 확인하면 암묵적으로 'any' 타입으로 지정되어 있다는 경고입니다. 이를 해결하기 위해서는 props에 맞춰 interface를 선언하거나, props의 타입을 지정하면 됩니다. 

또 다른 방법은 절대적(implicit)으로 설정된 any 타입을 명백하게(explicit) any라고 선언하면 됩니다.

function formatName(user : any){
    return user.firstName + ' ' + user.lastName;
}

대부분 동일한 문제에서 any를 사용하면 되지만, 미지정 타입 오류 이기 때문에 너무 많이 사용할 경우 코드 가독성이 떨어지고, 오류를 확인하기 힘들 수 있습니다. any 사용은 정말 타입을 모르겠거나, 명시하기 어려울 경우만 사용해주세요.

감사합니다.

리액트(React)는 다양한 프로그램을 사용해서 컴파일이 가능합니다. 오늘은 인텔리제이(IntelliJ)를 사용해서 프로젝트를 생성하는 방법을 알아보겠습니다. 인텔리제이(IntelliJ)는 다양한 기능을 사용할 수 있어 정말 편리하게 사용할 수 있습니다.

리액트(React) 프로젝트를 생성하기 위해서는 기본적으로 리액트(React)가 설치되어 있어야 합니다. 인텔리제이(IntelliJ)를 설치하고 File -> New -> Project 메뉴를 선택해주세요.

하단에 있는 javaScript 메뉴에서 React를 선택하고 Next 버튼을 클릭합니다.

리액트(React) 프로젝트 만들기 창이 출력되면 프로젝트를 생성하기 위한 폴더를 선택합니다. 가장 중요한 선택은 "Create TypeScript Project"를 체크해야 모든 프로젝트 파일을 생성합니다. 체크를 안 하면 빈 프로젝트를 생성합니다.

create-react-app을 사용해서 프로젝트를 생성합니다. 생성 시간은 전체 패키지를 설치하기 때문에 시간이 조금 걸립니다.

생성한 폴더로 이동하면 리액트(React) 프로젝트 파일을 확인할 수 있습니다.

인텔리제이(IntelliJ) 프로젝트 창에서 리액트(React) 소스를 모두 확인할 수 있습니다. src 폴더에 있는 소스 파일을 수정하면 기본적인 리액트(React) 스크립트를 변경할 수 있습니다.

리액트(React)를 컴파일 하기 위해서 위쪽에 있는 npm start 우측에 있는 컴파일 버튼을 클릭해주세요.

별 문제가 없다면 위 내용 처럼 컴파일이 진행되면서 리액트(React) 뷰를 확인할 수 있습니다.

Terminal 창에서 npm start를 사용해서 컴파일도 가능하기 때문에 Command를 좋아하면 Terminal을 사용해주세요.

컴파일 결과 기본 브라우저로 리액트(React) 로그를 확인할 수 있습니다. 인텔리제이(IntelliJ)는 리액트(React) 및 스크립트를 사용할 수 있어 코딩하기 매우 편리합니다. 인텔리제이(IntelliJ)는 유료 제품으로 사용 가능하지만, 학생일 경우 무료로 이용 할 수 있습니다. 학생으로 사용하면 1년 단위로 업데이트가 가능하기 때문에 학생이라면 지금 바로 인텔리제이(IntelliJ)를 설치해서 리액트(React)를 공부해보세요.

감사합니다.