React js 사용해서 웹앱 만드는 방법

 HTML과 JavaScript의 조합인 JSX를 통해 개발자는 자연스럽게 뷰를 생성할 수 있어서 React.js는 취업시장에서 수요가 많은 프런트 엔드 JavaScript 프레임워크입니다. 


1) React는 Model-View-Controller MVC SW 모델에서 'VIEW'에 초점을 맞춥니다. 따라서 React는 라우팅, 상태 관리, API 액세스에 다른 라이브러리를 사용할 수 있습니다. 

                                              MVC sw design pattern


선행 공부 요소: 

Node.js 및 npm의 패키지 관리

Git.


2)JSX란?

React에는 JSX(JavaScript XML)라는 특수 구문이 사용됩니다. JSX를 사용하면 HTML과 JavaScript를 단일 파일 또는 코드에 통합할 수 있습니다.  Visual Studio Code는 JSX 파일용 IntelliSense를 제공하므로 React를 사용하여 작업하는 경우 JSX는 유용한 도구입니다

브라우저는 JSX를 기본적으로 지원하지 않습니다. 따라서 브라우저가 렌더링하려면 JSX 파일에서 JavaScript 및 HTML을 생성해야 합니다. 이때 생성하는 작업에는 webpack, parcel, snowpack이 사용 가능합니다 


3)Component 란?

React 개발은 컴포넌트를 기반으로 합니다. 컴포넌트는 표시 및 작업 모두의 독립형 단위로, 애플리케이션에서 다시 사용할 수 있습니다. 컴포넌트를 사용하여 애플리케이션을 더 작은 청크로 논리적으로 분할합니다.


4)시작하기

i) Snowpack을 사용하여 React app개발 위해서 필요한 최소구조 : 2개의 file, 2개의 약 


                                                필요한 패키지 설치 

                                

package.json 의 패키지 및 스크립트 목록

    package:

        React용 React

        브라우저 안에 애플리케이션을 탑재하기 위한 ReactDOM 

(*Document Object Model 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스) 

    Scripts:

        Snowpack 개발 서버 실행하기 위한 dev:

            -모든 JavaScript 및 HTML 파일을 가상으로 빌드함.

            -서버를 호스트하고 파일이 변경되면 자동으로 서버를 다시 시작.

        배포용 프로덕션 파일을 생성하기 위한 build

snowpack.config.json 에는 Snowpack의 핵심 구성이 들어 있습니다.

    mount 는 Snowpack 서버용 가상 디렉터리를 두 개 만듭니다.

        public 에는 모든 정적 파일(HTML, CSS, 이미지)이 들어 있습니다. /로 호스트됩니다.

        src 에는 모든 JSX 파일 및 연결된 React 파일이 들어 있습니다. dist로 호스트됩니다.

public 에는 모든 정적 파일이 들어 있습니다.

src 에는 모든 React 파일이 들어 있습니다.


ii) App host 만들기 

  • index.html 파일은 React 애플리케이션을 호스트합니다.
  • index.jsx 파일은 애플리케이션을 탑재합니다.

                                public 폴더의 기본적인 index.html

    <div id="app"></div>

    •     React 애플리케이션을 호스트하는 HTML 요소를 만듭니다.
    •     Component를 해당 ID로 호출하여 애플리케이션을 렌더링합니다.

    <script type="module" src="/dist/index.js"></script>

    •     JavaScript를 로드합니다.


    iii)React app에 대한 진입점 만들기 

    HTML 내의 React app을 랜더링하는 코드가 필요합니다 (일반적으로 index.jsx)

                                                    Src 폴더의 index.jsx

    import

    index.jsx : 모든 component 또는 jsx 파일에서 React library를 가져옴 --> ReactDOM 라이브러리는 HTML내에서 APP을 렌더링 합니다.

    ReactDOM.render

    두개의 매개변수가 사용됨 (h1_제목, app_ ID가 app인 component)


    iv)Component 만들기 

    컴포넌트: React 프레임워크에서 재사용 및 모듈화를 고려해서 설계된 함수 / 클래스

                                        src dir의 App.jsx, 보통 app에는 있음

    컴포넌트를 사용하여 app update

    iii) 에서 작성한 index.jsx를 염

    import ReactDOM from 'react-dom'; 아래에 import App from './App';를 추가

    <h1>Hello, world!</h1>를 지우고 <App /> 로 바꿈



    v)동적 데이터 

    컴포넌트 내에 dynamic data 표시하려면 {} 핸들바 구문을 사용합니다 


                                    핸들바를 이용한 현재시각 나타내기 코드 예시


        

        
                                    핸들바{}를 사용해 <h2> component안에 title 값 표시 


    vi) 개발한 서버 확인 

                                                            http://localhost:8080

    React.js 의 구조 

    public

    • HTML, CSS, 이미지 또는 기타 정적 파일이 들어 있습니다.
    • index.html 및 index.css 파일이 저장됩니다.

    src

    • 렌더링해야 하는 모든 파일이 들어 있습니다.
    • 모든 .jsx 파일이 저장됩니다.
    애플리케이션 구성 파일 

    • package.json: 애플리케이션의 패키지 및 스크립트 목록이 들어 있습니다.
    • snowpack.config.js: Snowpack에 대한 구성 옵션이 들어 있습니다.

    애플리케이션 세가지 기본 패키지 

    • Snowpack: JSX를 HTML 및 JavaScript로 렌더링하는 데 사용됩니다.
    • React: 구성 요소를 만드는 데 사용됩니다.
    • React-DOM: 애플리케이션을 탑재하는 데 사용됩니다.
    •            
    •                           

    댓글

    댓글 쓰기

    이 블로그의 인기 게시물

    시험에 나오는 전기공사 산업기사정리 전기기기-직류기의 구조

    이미지
    시험에 나오는 전기공사 산업기사정리 (1)직류기, 직류기의 구조 -정류자,brush로 이루어진 직류전력을 만드는 발전기이다. 전기자 -전자장치의 고정부분에 회전,이동운동에 의해 전기-기계에너지 변환하는 부분이다. -0.35mm~0.5mm의 규소강판을 성층사용, 규소함유량은 1~3.5%이다. 계자 -권선에 전류를 흘려서 나오는 기자력에 의해 갭 부분에 적절한 계자를 생성한다. -0.8mm~1.6mm의 연강판을 성층사용, 공극은 3~8mm이다. 공극부분의 자기저항이 제일 크다 정류자 -직류,전동기에서 일정한 방향으로 회전하게 전류방향을 주기적으로 바꿔 전기자에 공급하는 장치이다. -정류자 지름은 전기자지름의 70~75%이며 경동의 정류자편은 운모로 절연한다. -정류자 편간의 최고전압은 20V이다. Brush의 종류, 특성 -brush는 돌아가는 발전,전동기의 정류자에 접촉해 외부로 전류를 끌어내거나 외부로부터 전류를 가지고오는 장치다. -탄소브러시는 고전압, 저 전류용, 제일많이 사용한다. -금속흑연 브러시는 저전압, 대전류용이다. -브러시는 접속저항이 크고, 전기저항이 작고, 기계적 강도가 큰 성질을 가지고 있다. Brush의 기울기 -일정방향의 기계에서 회전방향으로 30~35도, 역방향으로 10~15도를 이룬다. -회전방향이 바꾸어지는 기계는 수직이다, Brush의 압력은 보통 0.15kg/cm^2, 전철용은 0.35~0.4kg/cm^2 이다. (2) 전기자 권선법 1.환상권 -실제로 사용되지 않는 직류전기자 권선중 하나이다. 환상 철심에 코일을  환상철심 안쪽을 통해 바깥쪽에 나선형으로  원주에 감은 리액턴스 전압이 큰 권선이다. 2. 고상권 -환상권과 다르게 코일변을 유효코일로 만들기 위해 양 코일변을 1 자극만큼 밖의 점에 감은 것이다. 개로권,폐로권(단층...
    Read more »

    익리덤 없는사람은 불쌍해,,후기, 단점, 도색 (MGEX 스트라이크 프리덤)

    이미지
              그 익리덤 조립기 리뷰 시작! 세줄요약: 1. 조립재미 , 만족감 최상 2. 심지어 정크없는 가심비 뚝딱 3. 가조립만해도 충만함  STEP 1: 내부 프레임 조립 다양한 골드 컬러 런너를 통해 겹겹으로 최상의 금속 재질을 표현! (하지만 함정 재질이 하나 있긴함) ABCDG 런너가 골드(내부) 프레임을 만들게 함  위 런너는 B (정확한 색상이름은 까먹, 화이트 골드였나)이고 따로 도색이 필요없는 옙쁜 금색 (데칼은 반다이 기본데칼말고 델피 홀로 데칼을 구매를 해놓았다) 위 런너는 G이고 도색이 개필요한 인도카레색, G 런너 2장과  A런너의 카레색 부분을 뜯어 타미야 골드 스프레이 도색을 해준다 요거 뿌려주셈 위와 같은 애기똥색 카레색은 반드시 탈출시킨다 마인드로 도색을 샥샥하면 아주 괜찮은 골드프레임으로 나오게 된다 내부 프레임 가조립 모습, 만원 투자로 이질감없는 톤앤톤 금색이 표현됨 이건 금속 표현을 극대화 어쩐다 하는 겹겹 레이어중 똥을 담당하고 있는 스티커임 메탈릭( 삼색) 스티커는 별다른 이슈없지만 왼쪽의 에칭 스티커는 익리덤의 유일한 똥을 담당 이렇게 스러스터 스러운 부분에 붙여주는 건데 왜 똥이라고 하냐면 . . . , , , , , , , 스티커가 왜 후두둑? 내가 잘못한게 있거나 뽑기운이겠거니 함,, 저거 본드칠하면 흰자국 남고 참사날까봐 망실된거 그냥 잊고 내부프레임 마무리함 ㅅㄱ STEP 2: 등짝 조립 반다이에서 내부프레임 구경 많이해두라고 외장을 바로입히는 순서로 설명서를 구성하지 않고, 바로 등짝을 만들도록 시킨다. 순조만 해도 꽤 예쁨, 심지어 아구가 딱딱 맞아서 조립감도 깔끔하고 재밌음 (본인은 알뉴, 뉴버카, 사자비버카 판넬 만들때 굉장히 지루함을 느낌) 예쁘다 예뻐 다 만들면 뒤로 볼륨감이 꽤 생겨서 자립은 힘들어진다 암튼 등짝까지 다 만들면 RG 후쿠뉴랑 비교했을때 높이가 위와 같다 STEP 3: 마무리 성형 on  먹선안넣...
    Read more »

    주식의 기술적 분석- 이큐볼륨차트(EQui volume chart)

    이미지
    이번에는 거래량과 주가 중심의 주식 기술적 분석방법중 하나인 이큐볼륭차트에 대해 포스팅 해보겠습니다. <EquiVolume 차트툴 예> 키움증권HTS기준으로 주식종합차트에서 차트툴 설정할 수 있습니다. 이 방법은 저번에 포스팅했던 방법인 OBV방법과는 달리 단기적인 시장세력의  판단에 용이한 방법입니다.  무슨 말이냐면 저번에 포스팅한 OBV는 장기적으로 매집, 세력유무의 판단 여부면 주가-거래량의 관계를 통해 이번 이큐볼륨방법은 매수타이밍 각 재고 들어갈 때 쓰는 방법입니다. 세로축은 주식의 가격(고가~저가), 가로는 거래량평균입니다. 주절주절 복잡히 쓰는것보다 당장 실 매매에 활용할 수 있게 응용법만 포스팅하겠습니다. 이큐볼륭차트를 누르면 박스모양들로 차트가 나오는데  각각 세로형 직사각형,가로형 직사각형, 정사각형 에 따라 나타나는 바가 다릅니다. #가로형 직사각형 은 oversquare day 라고 하는데 보통 종토방 아재들이 도지도지거릴때나  거래량은 터졋는데도, 별로 안움직일때 이런 오버스퀘어 캔들이 나옵니다 보통 가격이 높을때 나타나면 하락하고, 바닥이거나 하락중나타나면 상승 여력으로 봅니다. #세로형 직사각형 은 narrow day라고 불르는데 거래량은 없는데 통상'떡상' '폭포수' 같이  가격폭이 크게 움직였을 때 나타납니다.   이것은 상승추세시 '위에 저항이 없다'라고 해석하면 됩니다. #정사각형 square 은 위 두가지 모양을 이해하시면 무슨말인지 이해가 쉬우실 텐데 바닥이나 하락에서 스퉤어가 뜰 경우 상승흐름,  상승중에 나타나면 저항이 발생 으로 이해하시면 됩니다. 대체로  상승추세는 가로형- 세로형 -정사각형, 하락추세면 정사각형-세로형-가로형  의 순서로 나타날 겁니다. 주식의 주가와 거래량으로 같이 ...
    Read more »