BelieveCom

리액트(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)를 공부해보세요.

감사합니다.

요즘 많은 사람들이 Web에 사용하는 라이브러리 리액트(React) 설치 방법을 알아보겠습니다. 리액트는(React) 빠른 응답 속도로 프론트엔드(Front-End)에 많이 사용됩니다.

리액트(React)를 사용하기 위해서는 먼저 가장 기본이되는 Node.js를 설치해야 합니다.

http://www.nodejs.org 로 이동해서 최신 LTS 버전을 다운로드해주세요.

다운로드된 Node.js 설치 파일을 실행하면 Node.js 및 npm Package를 설치할 수 있습니다.

npm 버전을 확인하기 위해서 cmd 상에서 npm -v를 입력합니다. 버전은 8.1.2입니다.

이제 리액트(React)를 편집하기 위해서 Visual Studio Code를 설치합니다. 

https://code.visualstudio.com 로 이동해서 실행 파일을 다운로드해주세요.

다운로드 버튼을 클릭하면 페이지가 이동되면서 셋업 파일을 다운로드할 수 있습니다.

Visual Studio Code 설치 파일을 더블 클릭해서 설치를 실행합니다.

설치가 완료되면 Visual Studio Code가 실행됩니다. 소스 파일만 수정이 필요하기 때문에 별도 Add-in 설치는 필요 없습니다. 이제 리액트(React)를 사용하기 위한 기본 준비가 완료되었습니다.

npm 명령어를 사용해서 리액트(React) create-react-app을 설치해줍니다.

create-react-app 명령어를 사용해서 리액트(React) 프로젝트 파일을 자동으로 생성할 수 있습니다.

이제 리액트(React)를 실행하기 위한 폴더를 만들어 줍니다. 하위 폴더로 프로젝트가 생성되기 때문에 공통 이름으로 폴더를 만들면 좋습니다.

만들어진 폴더로 이동해서 명령어 창에서 cmd를 입력합니다. cmd 기본 경로가 만들어진 폴더로 이동합니다.

create-react-app react-start를 입력해서 프로젝트를 생성합니다. 명령어 뒤에 프로젝트 이름을 입력하는데 소문자만 프로젝트 생성이 가능합니다.

create-react-app을 실행하면 천 개 넘는 파일을 다운로드하면서 프로젝트 파일이 생성됩니다. 생각보다 많이 오래걸립니다.

폴더로 이동하면 node_modules, public, src 폴더를 확인할 수 있습니다. 소스 수정은 src폴더에서만 수정하면 됩니다.

소스를 확인하기 위해서 cmd 창에서 code . 를 입력하면 Visual Studio code가 실행되면서 프로젝트 파일을 로드합니다. EXPLORER에서 리액트(React) 프로젝트 파일을 확인할 수 있습니다.

이제 생성된 프로젝트 파일을 실행해보겠습니다. cmd로 생성된 프로젝트 경로로 이동 후 npm start를 입력하면 리액트(React) 코드가 컴파일되면서 설정된 기본 브라우저로 실행됩니다.

리액트(React)는 javaScript 기반이기 때문에 보안 액세스 허용을 실행해야 합니다.

브라우저(Browser)가 실행되면서 기본 리액트(React) 실행 화면을 확인할 수 있습니다.

실행을 종료하기 위해서는 cmd 창에서 Ctrl+C를 두 번 눌러주면 작업 끝내기 메시지를 확인할 수 있습니다. 여기서 'Y'를 입력하면 리액트(React)가 종료됩니다.

리액트(React) 설치는 조금 복잡하지만 프래임워크 처럼 사용하는 게 아니기 때문에 쉽게 설치할 수 있습니다. 프론트엔드(Front-end)에 관심 있다면 지금 바로 설치해보세요.

감사합니다.

오늘은 간단하게 코틀린(Kotlin)에서 시계 만드는 방법을 알아보겠습니다. 대부분 개발 언어에서 시계를 만들기 위해서는 Thread를 사용해서 시간을 확인하는 로직을 많이 사용합니다. 하지만, Android에서는 Thread를 사용하지 않고 Widget만을 사용해서 시계를 구현할 수 있습니다.

특별한 코드 없이 Activity_main.xml에 TextClock를 선언하면 바로 시계가 동작합니다.

    <TextClock
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:format12Hour="hh:mm:ss a"
        android:format24Hour="hh:mm:ss"
        android:textSize="100sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

다양한 옵션이 있지만 기본적으로 시간을 표시하는 format12hour, format24hour 함수만 확인하면 됩니다.

실행 결과 아무 작업 없시도 시계가 완성되었습니다. 초단위로 움직이지만 App에 리소스를 많이 사용하지 않습니다. 초보자가 사용하기 정말 좋은 Widget라고 생각됩니다.

TextClock에 ID를 설정하고 main함수에서 포맷을 변경 할 수 있습니다.

setFormat12Hour(CharSequence) 함수를 사용해서 출력 포맷 변경이 가능합니다.

시간만 표시할 경우는 "hh:mm:ss a"를 사용하고 연월일을 표시할 경우 "yyyy-MM-dd hh:mm:ss a"를 사용합니다.

        val clock:TextClock = findViewById<TextClock>(R.id.mainclock)

        clock.setFormat12Hour("yyyy-MM-dd hh:mm:ss a")

setFormat12Hour에 CharSequence를 입력합니다.

출력 결과 연월일 시간을 모두 한 번에 확인할 수 있습니다.

TextClock는 다른 Widget과 동일하게 text 정보를 size, color 모두 변경 가능합니다.

TextClock 속성에서 textColor을 사용해서 텍스트 색상을 변경할 수 있습니다.

출력 결과 TextClock 정보 text 색상이 변경되었습니다.

TextClock Widget은 복잡한 시간 정보를 Thread 사용 없이 쉽게 사용할 수 있는 좋은 객체입니다.

Android에서 시계가 필요하다면 힘들게 만들지 마시고 TextClock를 사용해주세요.

감사합니다.