React 시작하기

 이제 React에 대한 기본적인 설명 및 데모를 하도록 하겠습니다.



public폴더 안에 index.html 파일이 있습니다.



31번째 줄에 id가 root인 div가 있는데 실제적으로 코딩을 하면 위 div에 React내용이 들어가게 됩니다.


7번째 줄에 ReactDOM.render가 실제적으로 root가 id인 부분에 랜더링을 해서 React로 화면을 만드는 것입니다. 9번째줄에 <App />은 실제적으로 React로 코딩한 부분이 들어가게 됩니다.

 물론 id가 root일 필요는 없습니다. 만약 다른id로 React를 랜더링 하고 싶다면 11번째 줄에 getElementById의 대상을 바꾸면 됩니다.



이제 App.js에 가서 코드를 수정하겠습니다. 7~20번째 줄까지 모두 지워줍니다.






이제 위 사진처럼 7번째 줄에 <h1>Hello World</h1>을 작성하고 저장합니다.


npm start을 하면 Hello World가 가운데 브라우저 창에 생성된 것을 알수 있습니다.


다음은 읽지 않아도 되지만 다음 글을 빨리 따라가기 위해서 참고해 주셨으면 합니다.


삭제 파일 목록

- App.test.js, logo.svg, setupTests.js


그리고 App.js파일에 가서 'import logo from './logo.svg'; 지우기


이전 글 : React 설치법

이후 글 : React(Class) - 다른 compoment로 전달

댓글

댓글 쓰기

이 블로그의 인기 게시물

DAQ로 전압 측정하기-2

이미지
안녕하세요. 알렉스 입니다. 이번에는 LabVIEW를 이용해서 PC로 전압값을 측정하도록 하겠습니다. 이전글에 USB-6121을 이용해서 측정한다고 하였습니다. 자세한 스펙은 나중에 설명하고 이번에는 전압값을 측정해서 PC에 나타내도록 하겠습니다. 사진1) MAX로 연결상태 확인 일단 USB-6121을 PC와 연결하고 MAX에서 연결상태를 확인합니다. 사진1에서는 USB-6121은 "Dev3"으로 지정이 되어 있습니다. 사진2) 코딩시 필요한 함수 이제 MAX에서 제대로 연결된 것을 확인하면 이제 블록다이어그램에서 필요한 함수들을 나열합니다. 사진3) AI 채널생성 사진4) AI 채널지정 사진5) AI셋팅 사진3,4에서 AI채널 설정을 하여줍니다. 사진5를 보면 AI의 최대,최소 전압을 각각 +10, -10V로 하여주시기 바랍니다. 그리고 입력터미널 설정을 RSE로 설정합니다. (셋팅에 대한 설명은 다음글에) 사진6) 샘플타이밍 설정 사진7) 측정주파수(Hz)설정 이제 DAQ가 어떻게 샘플을 수집할 것인지와(사진6) 1초에 몇회 데이터를 측정할 것인지(사진8)를 결정해 주셔야 합니다. 측정 주파수는 Hz단위를 사용하며 예제에서는 1000을 넣었기 때문에 1초개 1000번 데이터를 수집합니다. 사진7) 전압을 읽을 인디게이터 생성 이제 전압을 읽을 인디게이터를 생성합니다. 현재 아날로그는 1채널의 1샘플을 측정하게 되어있기 때문에 1초에 1000번씩 인디게이터에 전압값을 출력합니다. 이상태에서 Run을 하게 되면 전압은 1번만 측정하고 프로그램이 종료됩니다. 사진8) While루프 생성후 나머지 연결 계속 측정하기 위해서는 While루프를 생성해서 지속적으로 전압값을 측정해야 합니다. 사진8과 같이 코딩을 하신후 마무리 하면 됩니다. 사진9) USB-6121연결 회로도 사진10) 실
자세한 내용 보기

Nest JS URL에 있는 쿼리(Query) 읽기

이미지
 이번에는 url에 있는 쿼리값을 읽도록 하겠습니다.  @ Get () // @Query()는 url에 있는 쿼리값을 갖고옵니다. findAll (@ Query () paginationQuery ){ // 클라이언트에서 항상 받는 값 2개를 변수로 지정 const { color , cost } = paginationQuery ; return ( `Color : ${ color } , Cost : ${ cost } ` ) }  위와같이 쿼리문을 받을 해당 컨트롤러에 작성을 합니다. '@Query()'에서 해당 쿼리문을 받아 'paginationQuery'에 저장을 합니다. 이후 'color' , 'cost'에 클라이언트로 부터 받은 데이터를 집어넣습니다. 그리고 그대로 해당 'color', 'cost'를 클라이언트 쪽으로 response합니다.    그리고 쿼리문에 무엇이 올지 알면 미리 NestJS에서 객체가 아닌 변수로 받을수가 있습니다. @ Get () // @Query()는 url에 있는 쿼리값을 갖고옵니다. findAll ( // 쿼리문에서 color와 cost가 항상 들어오는 것을 약속 @ Query ( 'color' ) color : string , @ Query ( 'cost' ) cost : string ){ // 클라이언트에서 항상 받는 값 2개를 변수로 지정 return ( `Color : ${ color } , Cost : ${ cost } ` ) }
자세한 내용 보기

appendChild를 이용하여
  • 늘리기_JavaScript_2번

    이미지
     안녕하세요. 이번에는 저번시간때 만들었던 html에다가 JavaScript코드를 추가할 것입니다.  위의 2개의 const는 선언을 하는것인데 아래에서 다시 설명드리도록 하겠습니다.  일단 JavaScript에 위와 같이 작성을 합니다. 버튼을 누를시 실제 동작하는 함수는 'test()'함수 입니다.   사용자가 실제로 버튼을 누를시 'btn00.onclick = test'부분이 동작합니다. 이때 'test()'함수를 찾게 됩니다. 만약 'btn00.onclick = test()'를 하게 되면 함수의 리턴값을 넣게 되기 때문에 에러가 발생합니다.    일단 함수를 만들것입니다. 위 순서도는 함수의 진행 순서도를 표현한 것이며 버튼을 클릭하기 전에 이미 'inputText'와 'btn00'이 선언 되어 있는것을 알수 있습니다. 'inputText'와 'btn00'는 'document.querySelector'를 통해서 해당(여기서 텍스트와 버튼) 아이콘에 대한 정보를 갖고 올수 있습니다. 이때 '#'은 아이디를 의미하며 HTML에서 선언한 id를 찾아갑니다. - listID는 'document'에서 Id가 'List'인 'element'를 넣는다.  먼저 초기값을 설정할때 기존에 존재하는 <ul id = "List">의 'element'를 listID의 변수로 저장을 합니다. (추후 listID에 <li>를 추가함).  getElementById 대신 querySelector를 사용할수 있다. - liElement는 'document'에 Tag 'li'가 있는 'element'를 생성한다.  이제 새로운 element를 생성(liElement)하여 'li'(<li
    자세한 내용 보기