React 설치법(installation)







일단 생성할 프로젝트를 위한 폴더를 생성합니다.


 
npm create-react-app [React Folder Name] 를 해당 콘솔에 쳐서 진행합니다.

(기본적으로 npm, nvm이 설치 되 있어야 합니다.)


참고로 React 폴더이름은 규칙이 있습니다. 대문자가 포함이 되면 위처럼 생성이 안됩니다. 



마지막에 Happy hacking!문자가 나오면 정상적으로 React가 설치 된 것입니다.



이제 콘솔창에 실제로 React를 실행하겠습니다. 콘솔창에 'npm start'를 치고 실행합니다.


위 두 화면이 나왔으면 모두 정상적으로 설치도 되고 실행도 제대로 된다는 것입니다. 이제 실제적으로 코딩을 할수 있습니다.


댓글

댓글 쓰기

이 블로그의 인기 게시물

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
    자세한 내용 보기