'따실'에 해당되는 글 3건

따라하기 실습, 리액트편

04 리액트 컨포넌트 파일 알아보기 

먼저 사전적 의미에 대해 알아보자

프로그램이나 구조물에서 식별 가능한 '일부분'이다. 대체로 특정 기능이나 이와 관련된 기능들의 조합을 제공한다. 
프로그래밍 설계에서 시스템은 모듈로 구성된 컴포넌트로 나뉜다. 특히 객체지향 프로그래밍과 분산객체기술에서의 컴포넌트는 재사용이 가능한 프로그램 빌딩 블록을 말한다. 예를들어 GUI 중 버튼 하나, 소형 이자 계산기, 특정한 DBMS 인터페이스와 같은 단위를 말한다. 
컴포넌트는 컨테이너라 불리는 환경 내에서 동작하는데 이때 컨테이너란 웹페이지, 브라우저 또는 워드프로세서 등을 들 수 있다. 컴포넌트는 상호 동작을 위해 자신을 공시할 수 있는 속성과, 이벤트 처리, 영속성 등을 가지고 있다. 

앞서 실습한 리액트 번들 코드에서 보면 동그라미 친 부분이 컴포넌트에 해당하고 

이 부분은 HTML과 비슷한 JSX로 작성되어 있다. JSX는 자바스크립트를 확장한 문법으로 HTML 과 비슷한 XML 형태의 코드로 작성을 하면 이를 React.createElement 를 사용하는 자바스크립트 형태로 변환시켜준다.

코드는 return( 여기에 ); 작성하면 된다.

이때 몇가지 규칙이 있는데,

1. 마크업 부분 

1) XML에서 처럼 <a>로 시작했으면 </a>와 같이 태그(엘리먼트)를 꼭 닫아줘야 한다.

2) 두 개 이상의 태그(엘리먼트)는 무조건 하나의 태그(엘리먼트)로 감싸져있어야 한다. 

혹시 만약에 <div></div>로 단순히 덮어쓰기 애매한 경우, 

(* style 및 table작성 시 꼬일 수 있다고 한다)

<Fragment></fragment> 나  <></>와 같이 짧은 구문으로 감쌀 수도 있다. 

위 링크에 가보면 관련 예시를 상세하게 확인해 볼 수 있다. 

2. 자바스크립트 부분

1) 변수 선언 

render(){여기 안에 }   , return() 위에 변수를 선언한 후 사용하면 된다.

선언 방식은 자바스크립트 var와 scope 단위만 다르고 (var는 함수단위, jsx의 변수는 블록단위)

거의 동일한 기능을 하는 const(상수인 경우), let(변수인 경우)를 사용한다. 

2) 조건식 

삼항연산자, AND 연산자는 사용할 수 있지만 if문은 사용할 수 없다.  

if문 대신 switch문이나 람다식(화살표 함수)을 사용할 수 있다.

3. 스타일 

1) html에서 header에 css 선언하듯 

className은 const로 선언하고 return(여기 안에 )에서

<div style = {선언한 변수이름}  > 형태로 호출할 수 있다.

2) html에서 css파일을 연동시키듯

import './참조스타일.css' 방식으로 참조할 수 있다.

오늘의 예제는 아래 블로그에 있는 내용을 기반으로 따실(따라 실습)을 해보았다. 

https://velopert.com/3626

따라하기 실습, 리액트편 

03 리액트 번들 톺아보기

그럼, 간단히 에디터 툴 사용법 부터..

먼저 VScode 프로그램을 실행한다.

아이콘을 실행하면 에디터 이렇게 생신 첫화면을 볼 수 있다. 

거의 비슷하다.  

여기에 프로젝트 폴더를 만들거나 이미 있는 폴더를 추가하면 된다.

아래 화살표 순서를 따라가면 된다.

폴더에 있는 녹색은 컴퓨터 또는 사용자 이름이다.

위 캡쳐 이미지는 지난 시간에 생성했던 리액트 번들 프로젝트 'hello-react'를 등록하는 과정이다.

참고로 어제는 리액트에서 제공하는 번들 프로젝트를 실행시키고

그 결과를 브라우져에서 샘플 페이지로 최종 확인하는 과정을 담았다. (링크) 

폴더 선택을 클릭하면 

리액트 번들 프로젝트 hello-react 폴더 구조를 확인할 수 있다.

'/public' 폴더에는 우리가 코딩할때 가장 먼저 배우는 index.html 파일이 보통 이 폴더엔 static(정적인)한 코드들이 있다.

'/src' 폴더에는 동적인 코드과 참조할 다양한 스크립트(js) 들을 담아둔다.

이번엔 이번에 생성한 프로젝트 내에서 사용될 패키지를이 담겨 있는 곳을 찾아가서

상세 코드들이 어떻게 구성되었는지 알아보자.

App.js

이렇게 컴포넌트를 운영하는 코드를 담는 파일은 App.js이다.

App.js 을 열어보면 아래와 같이 생겼다. 

일단 크게
1번 구간은 외부의 파일 또는 패키지를 가져오는 영역이다. 

    k부분의 코드는 리액트패키지를 가져와서 React라는 변수에 담겠다는 코드이고 

    왼쪽 src폴더에서 가저온 css는 a코드로 가져오고,

    b코드를 통해 css를 가져와서 logo라는 변수에 담고 있다.  

    그런데 여기서, k코드의 react는 어디서 온거야? 하는 경우가 있는데.. 마우스를 올려보면 

2번 구간은 app.js의 메인 코드 영역이다.

    흰색 라운드 박스영역은 html 코드랑 비슷하게 생긴 JSX 코드다.

    이 안에서 logo라는 변수와 app.css에 선언한 ClassName들이 사용되고 있다.     

    함께 참고할만한 점은 이 코드는 함수형태 'faunction 함수이름()' 로 만들어 졌다는 것이다.

    코딩하는 사람의 취향에 따라 아래와 같이 함수가 아닌 class 형태로 구성하기도 한다.  

3번 구간은 지금까지 작성한 코드를 내보내는, 반환하는 구간이다. 

index.js

이번엔 index.js 코드다.

맞다.

느낌적인 느낌으로, index.html과 유사한 역할을 해준다고 이해하면 된다.

먼저 1번 구간(외부에서 패키지를 참조하고 있는 구간을 보면

     코드 내용을 보면 짐작할 수 있듯이 import를 통해 다수의 패키지들을 재사용하고 있음을 알 수 있다.

     모르는 패키지는 마우스를 올리면 vscode 에디터가 친절하게 해당 패키지가 참조하고 있는 위치를 알려준다.

     그렇게 살펴보다보면 모르겠는 부분이 나온다. 

     여기서 App은 App.js를 말한다. 확장자가 생략되었다고 이해하면 된다.

     정말인지 아닌지는 바로 아래에 있는 

     그리고 파란색, ReactDOM으로 시작하는 본문? 코드를 보면 

     빨간색을 따라가면 ReactDOM 변수를 이용해 render() 함수를 실행시키고 있다.

     이 함수는 이름 그대로 브라우저 상에 ReactDOM.render( '안에 있는' ) 리액트 컴포넌트를

     랜더(보여주기)하기 위한 함수이다. render 함수는 아래와 같이( a, b ) 구조로 되어 있다. 

<App />, document.getElementById('root')

     여기서 파라미터a 는 랜더의 결과물이고

     파라미터 b는 랜더된 결과물을 그리는(노출시키는) 장소(DOM)를 지정한다. 

     코드를 풀어쓰면 라는 <App />* 결과물을

     브라우저에 노출되는 문서(코드)* 중, ID가 'root'인 엘리먼트에 있는 내용을

        (*여기서 말하는 문서는 index.html안에서 찾을 수 있다. )

        (*<App />는 처음 보는 코드일 것이다. 리액트는 XML과 같이 태그를 커스텀할 수 있는 JSX를 사용하고있기 때문이다)

     위 캡쳐 이미지에서 마우스로 쓴 숫자를 기준으로

        1번 구간에서는 사용자, 코더 또는 개발자가 정의하는 jsx코드이고

        2번 구간은 사용자가 정의한 코드를 랜더링 하고 위치를 지정하는 javascript코드이고

        3번 구간은 우리가 알고 있는 html 코드이다. 

그렇게 해서 브라우저에 있는 화면에 최종으로 아래와 같은 이미지를 볼 수 있는 것이다. 

     참고로

     움직이는 react 로고는

     앞에서 설명한, App.js에서 import한 svg 파일이다.

     모션은 src폴더에 있는 App.css 안에 담겨있다. 

그럼, 오늘을 20000 ~

따라하기 실습, 리액트편 

02 환경설정과 헬로월드

프로그래밍을 하려면 프로그램을 몇개 설치하고 환경설정을 해야한다.

사실.. 시작하는 입장에서는..아니 경력자에게도,

프로그래밍 보다 어려운게 환경설정이다. 

정말 시작인 반인 셈이다. 

컴퓨터마다, 버전마다 설정이 조금씩 다르기 때문인데..

어떤 언어를 공부하든,

처음부터 끝까지, 튜토리얼과 발맞추기 어렵기 때문이다.

다만, 자바로 개발할 때 세팅하는 것과 달리

프로트앤드 라이브러리(또는 프레임워크) 리액트를 사용하면 

설정은 거의? 안하고? 설치만 하는 것으로

상대적으로 쉽게 

준비를 마칠 수 있다.

환경설정

01. 설치목록

자 이제, 아래 툴들만 설치하면 바로 시작할 수 있습니다. 

vscode 코드를 작성하는 에디터 툴입니다. 

node.js 후려쳐서 설명하면.. 작성한 코드를 실행하는 역할을 수행합니다. 

yarn 패키지 도구로서.. 후려쳐서 설명하면..

다른 분이 만드신 코드를 가져오고 보관, 응용할 수 있도록 돕는 역할을 합니다. 

02. 설치시작

OS가 윈도우10 기준 설치 방법입니다.

03. 시동걸기

리액트는

npm과 yarn을 사용해서

터미널 cmd(command의 약자)로 Hello World를 찍을 수 있습니다.

yarn은 아까 설치했고,, npm은 뭘까요? ;D

사실, npm은 아까 설치한 node.js에 포함되어 있어 자동으로 설치된 상태입니다. 

1) 그럼, 먼저 cmd(command의 약자)를 실행하고

2) 명령어를 작성합니다.

yarn global add create-react-app

create-react-app hello-react

그러면 똬~ 

최종 확인은

브라우저 주소 창에서

http://localhost:3000

그리고

...

여기서부터,

TMI ... 주의. 불필요하면 여기서 끝.

;D 만약,

cmd 창를 습관적으로 

'닫기' 한 경우엔?

사실.. 이런 질문 

또는 이런 상황에 봉착한 많은 이들이

비전공자 특히 문과생일 수 있다. 

조금 더 적극적으로

조금 더 창의적?으로 응용하다가 길을 잃는 경우가 있다. 

이런 경우는, 전문가의 튜토리얼에서도 찾을 수 없다.

><a

그래서 대부분 시작 단계에서 한참을 방황하다가

코딩을 접곤 합니다.

그래서 ,,, 갑짜기 ><

이런 무서운 화면이 나오면?

아까 성공한데로 따라가볼까? 하고

아까 명령어를 다시 입력하면....

create-react-app hello-react

아래와 같은 처음보는.. 메시지를 뱉는다 >< 

사실.. 이런 질문 
또는 이런 상황에 봉착한 많은 이들이

비전공자 특히 문과생일 수 있다. 

조금 더 적극적으로

조금 더 창의적?으로 응용하다가 길을 잃는 경우가 있다. 

이런 경우는, 전문가의 튜토리얼에서도 찾을 수 없다.

><a

그래서 대부분 시작 단계에서 한참을 방황하다가

코딩을 접곤 합니다. 

암튼, 이런 경우엔

디렉토리 구조나 프로젝트 생성 구조를 모르는 

시작하는 사람들이 종종 마주하는 이슈이다.

구체적으로 에러? 메시지를 살펴보면,

이미 hello-react 라는 이름의 폴더가 있고

The directory hello-react contains files that could conflict:

그 아래 node_modules/ 폴더, package.json 파일, public/ 폴더, src/폴더와 yarn.lock 파일이 있다고 한다.

Either try using a new directory name, or remove the files listed above.

다른 이름의 폴더를 다시 만들어서 하거나 이전에 폴더를 지우라고 하는 메시지이다. 

돌이켜보면 create-react-app 문장은

리액트 프로젝트를 만들라는 명령어이고

뒤에 hello-react는 프로젝트가 설치될 장소의 이름으로 이해할 수 있을 것이다.

이런 경우 다시 만들면 불필요한 폴더만 생기는 것이기 때문에 아까 만들어놓은 폴더로 이동하는 편이 더 효율적이다.

cmd 창에서 아래 내용을 입력한다.

cd hello-react

cd는 과거 도스 명령어로 뒤에 있는 이름의 디렉토리로 이동한다는 뜻이다. 실행결과는 아래와 같다.

이렇게 아까 자동으로 생성된 프로젝트 폴더 안으로 들어올 수 있었다.

여기서 dir(디렉토리에 있는 모든 폴더를 알려주는 dos 명령어)을 입력하면, 

아, 참고로

C 드라이브의 볼륨에는 이름이 없습니다. 볼륨 일련 번호: 56A1-D474

는 내 컴퓨터에서만? 있는 이슈다

드라이브의 이름에 없어서 

일련번호라도 추가로 알려주고 있는 것이다.

일종의 컴퓨터 TMI

자, 원하는 위치에 왔으니

이곳에서 리액트를 실행해보면 된다.

리액트를 실행하는 방법은,

이번에 들어온 hello-react 안에서 아래 명령어를 실행하면 된다.

yarn start

그러면 아래 메시지가 나오면서

아까와 다르게,

실행결과를 브라우저 창을 알아서 띄워준다. 

참고로 잊지 말아야할 것은

cmd창을 끄면 프로그램이 동작하지 않는다는 것이다.

아.. 이런-