안녕하세요. 엔지엠소프트웨어입니다. 이전 시간에 웹프로젝트를 만들기 위한 준비를 마쳤습니다. 개발 환경은 코딩에 필요한 Visual Studio Code가 있어야 하고, 데이타를 관리하기 위한 오라클 데이타베이스도 필요합니다. 아직 개발 환경을 갖추지 않으신분들은 [ 여기 ]를 참고하세요~ 자~!!! Visual Studio Code를 실행 하세요.

 

 

제 경우에는 MYWORKSPACE라는 작업 영역이 있습니다. 이곳에는 여러가지 테스트용 코드들이 있어서 새로운 작업 영역을 만들도록 할께요. Visual Studio Code의 메뉴에서 "파일 > 폴더 열기..."를 클릭하세요. 이미 작업 영역 폴더(윈도우의 폴더)가 만들어져 있다면 선택하면 됩니다.

 

 

작업 영역 폴더가 없다면 하나 만드세요. 저는 D드라이브에 "NewWebSite" 폴더를 생성했습니다. 여러분들도 새로 만든 폴더를 선택하세요.

 

 

"이 폴더에 있는 파일의 작성자를 신뢰합니까?" 경고창이 나타날 수 있습니다. 아래 그림처럼 체크박스에 체크하고, 좌측의 신뢰 버튼을 클릭하세요.

 

 

"Ctrl+`" 콘트롤 그레이브 키를 눌러서 터미널을 실행하세요. 그레이브 키는 틸드(~, 물결표) 키 아래에 있는 문자입니다. 여러분들도 아래 그림처럼 터미널 창이 표시 되었을겁니다. 터미널은 리눅스에서 쓰는 이름인데요. 윈도우즈의 커멘드(CMD)와 비슷하다고 생각하시면 될거 같습니다. Visual Studio Code는 멀티 플랫폼을 대응 하려다보니 윈도우즈 커멘드와 터미널 모두 포함되어 있습니다.

 

 

nodejs는 이미 설치가 되어 있을겁니다. 아래 명령어로 타입스크립트를 설치하세요. 아마 이것도 설치되어 있을겁니다^^; 이전 글에서 타입스크립트 설치시 옵션을 "-g"로 설정했기 때문인데요. 이 옵션은 글로벌(Global)로 설치하겠다는 뜻입니다. 그렇다보니 한번 설치하면 프로젝트마다 공유할 수 있습니다. 프로젝트별로 개별적으로 설정하려면 이 옵션을 사용하지 마세요~ 혼자서 여러가지 프로젝트를 진행하는게 아니라면 굳이 로컬 설치할 필요는 없습니다.

npm install -g typescript

 

 

저의 개발 환경은 타입스크립트가 이미 설치되어 있어서 업데이트가 되었습니다. 이제 타입스크립트를 만들어볼까요? ①New File을 클릭하고 이름은 "helloTypeScript.ts"로 입력합니다. 타입스크립트는 정적 형식 자바스크립트 언어입니다. 오리지날 자바스크립트는 동적 형식(Dynamic Typing)인데요. 이 부분도 알아보면 좋을듯한데~ 내용이 방대해서 대략 그렇다는 정도만 알고 넘어갑시다. 정적 형식과 동적 형식이 궁금하신 분들은 구글에서 "정적 형식 동적 형식 언어"로 검색 해보세요. 파이썬은 정적 형식 언어일까요? 아니면 동적 형식 언어일까요?

 

 

아래와 같이 함수를 하나 만듭니다.

function hello(name: string) {
    alert(name + "님 안녕하세요.");
}

hello("NGM");

 

①tsc helloTypeScript.ts를 입력하고 엔터를 치면 ②helloTypeScript.js 파일이 만들어집니다. tsc는 type script compiler입니다.

 

 

테스트를 위해 index.html 파일도 하나 추가 해줍니다. 파일 추가는 위에서 타입스크립트를 추가한 것과 동일합니다.

<meta charset="utf-8">
<script src="helloTypeScript.js"></script>

 

 

Alt+B를 눌러서 브라우저 보기를 해보세요. 만약, 브라우저가 실행되지 않는다면~ Open in browser 확장을 추가로 설치 하세요.

 

 

테스트를 위해 생성한 모든 파일을 삭제하세요. 삭제는 파일을 선택하고 delete키를 누르면 됩니다. 터미널에서 아래 명령으로 리액트를 설치하세요~ 참고로, 프론트앤드를 개발하기 위한 프레임워크로 리액트, 앵귤라, 뷰를 많이 사용하고 있습니다. 리액트는 페이스북에서 만들었고, 가장 인기있는 프레임워크입니다. 앵귤라는 구글에서 만들었습니다. 이 둘은 처음 기획부터 다르기 때문에 우리가 만들고 싶은 서비스에 따라 선택이 달라질 수 있습니다. 리액트는 사용자와 상호 대화형 서비스에 유리합니다. 반면에 앵귤라는 SPA(Single Page Application)를 개발하는데 편리합니다. 간단하게 개념만 잡고 가시면 될거 같아요^^; 어차피 취업하면 둘다 사용하게 되어 있습니다-_-; 제가 자바, C#, 웹을 다 하는것 처럼요 ㅠㅠ;

npm install -g create-react-app

 

 

리액트 패키지 설치가 완료되었으면 리액트용 앱을 만듭니다. 이 작업은 몇분정도 시간이 걸립니다. 참고로, "first-app"은 프로젝트 이름입니다. 워크 스페이스(작업 공간)에 리액트 앱을 만드는 작업이고 이름은 자유롭게 설정할 수 있습니다. 가능하면 저와 같은 이름으로 하시는게 좋을거 같아요^^; 이런 작업에 익숙한 개발자라면 문제 발생시 해결을 빠르게 할 수 있지만, 초보인 경우에는 이름이 달라서 발생하는 사소한 문제도 많은 시간을 낭비할 수 있기 때문입니다.

create-react-app first-app

 

 

앱 설치가 완료 되었습니다. 여러분들도 아래와 같은 메시지가 출력 되었을겁니다.

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd first-app
  npm start

Happy hacking!
PS D:\NewWebSite>

 

리액트 앱으로 이동합니다. "cd" 명령은 Change Directory의 약자로 뒤에 입력한 폴더로 이동 시켜줍니다.

cd first-app

 

아래 명령으로 웹서버를 실행할 수 있습니다. 앵귤라와 동일하게 리액트도 서버가 기본 포함되어 있어요~

npm start

 

 

자동으로 서버가 실행되고, 웹페이지가 열립니다. 여러분들도 위와 같은 화면이 보이면 일단 성공입니다~! 여기까지는 리액트 기본 환경입니다. src 폴더의 내용을 보면 App.js로 되어 있는걸 알 수 있을겁니다. 우리는 타입 스크립트를 사용할거라서~ 타입 스크립트용 리액트를 만들어야 합니다. 실행중인 서버를 중지하려면 터미널에서 Ctrl+C를 누르세요. 그리고, Y를 눌러서 서버를 중지합니다. 아래 명령으로 작업 폴더로 이동하세요.

cd ..

 

타입스크립트용 리액트를 설치하세요. 주로 npm 또는 yarn을 사용해서 패키지를 설치하고 관리하는데요. 리액트는 npx를 사용해서 패키지를 설치해줍니다. 노드의 새로운 패키지 관리자는 아닙니다. npm 5.2.0이상 설치되어 있으면 npx를 사용할 수 있습니다. npx는 npm 레지스트리에 올라가 있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI도구입니다. npm은 전역 또는 로컬로 설치되는 다양한 패키지들을 업데이트하고 관리하는데 이용합니다. 하지만, 이미 설치된 전역 패키지를 로컬로 업데이트하거나 각자 관리되던 로컬 프로젝트를 전역에서 업데이트하면서 생기는 문제를 해소하기 위해 등장했습니다.

npx create-react-app second-app --template typescript

 

타입 스크립트용 리액트가 만들어졌습니다. first-app과 동일하게 이번에는 second-app 폴더로 이동한 후 실행 해보세요.

cd second-app
npm start

 

동일한 화면을 볼 수 있을텐데요. 프로젝트의 파일은 타입 스크립트로 만들어진걸 알 수 있습니다. 파일 확장자가 tsx죠? 여기서 불필요한 파일들은 삭제해도 되지만, 그대로 놔두고 진행 할께요. 디자인을 고려해서 만들건 아니기 때문입니다^^; 그리고, 나중에 앵귤라에서 했던 것처럼 앤트 디자인을 적용하기 때문에 지금 디자인을 변경하거나 CSS를 수정하지 않습니다. 일단 그냥~ 진행하세요!

※ 저도 UI나 UX는 잘 모릅니다. 기본적인것만 알고 있는데요. 일반적으로 웹 관련 회사에 가면 UI/UX팀이 있어서 CSS나 JS를 볼일은 그리 많지 않을거에요^^

 

 

이제 로그인 페이지를 만들어볼께요. 아래와 같이 컴포넌트 폴더를 추가하세요. 그리고 폴더 이름을 "components"로 설정하세요. ①src 폴더 선택 후 ②새 폴더를 클릭 하세요.

 

 

이번에는 ①components 폴더를 선택하고, ②새 파일을 클릭하세요. 그리고, 파일명은 "login.tsx" 로 설정하세요. 아래 코드를 보면 속성(Property, 프로퍼티)에 JSX가 보입니다. JSX는 페이스북에서 만든 리액트의 자바스크립트 확장입니다. React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. React는 JSX 사용이 필수는 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 코딩이 복잡해지고 유지보수에 어려움이 많다는걸 알고 있습니다. 컴포넌트에서 기본으로 제공하는 렌더 함수에서 문자열 연결없이 쉽게 사용할 수 있습니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

 

 

벌써 4시간째 글을 작성하고 있네요-_-; 캠 켜놓고 말로 떠드는것보다 글로 작성하면서 스샷 뜨고, 동영상 인코딩도 gif로 바꿔가면서 작성하다보니 너무 시간이 오래 걸리네요. 그래도, 글을 많이 적어봐서 처음보다는 많이 빨라진 편입니다. 그래도, 글 하나 작성하는데 보통 2~4시간 정도 소요되는군요. 이제 코딩에 들어가야 하는데요. 리엑트의 핵심 기능인 props, state, bind등등... 알아야 할것들이 많습니다. 잠깐 쉬었다가~ 다음 시간에 이어서 코딩해보도록 할께요^^;

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0