React는 Component기반이기 때문에 Component단위로 만들지 않으면 의미가 없다고 한다. 그러기 때문에 이번엔 Component를 배워본다 컴포넌트를 만들기 위해서, 기존에 있는 코드 중에 를 추가 하였다. 근데 피가 흘리게 된다. 왜냐하면 함수를 작성하지 않았기 때문이다 * React에서 컴포넌트를 만들 땐 무조건 반드시 맨 앞에 문자는 대문자를 하도록 하자 ex ) Createcomponent, TestComponent, Rrrrrr etc.. const TestComponent = () => { return ( 안녕 난 Component야 반가워 ) } 이런 식으로 추가하면, 아까 피가 흐르던걸 지혈할 수가 있다 그러면 이렇게 컴포넌트를 분리시켰고, 화면에 나타나게 해 보았다! 다음엔..
이번엔 useState를 사용해 보겠다 useState라는 것은 react에 있어서 스무스하게 하도록 하는 저장 기능이라고 한다 그래서 앱처럼 움직이게 할려면 변수에 저장하는 게 아니라, useState에 넣어서 사용해야 하고, 자주 변경될만한 것을 대상으로 한다 일단 useState 라는 것을 import 시키고 나서, [] = userState( 값 ); 를 적는다 useState()를 쓰다면, 반환되는 값이 [값 1, 값 2]가 반환된다고 한다 값1 이 userState( 값 ) 이 되고, 값 2가 변경될 값이라고 한다 그다음은 바인딩을 변수와 똑같이 { } 를 사용하면 된다! 이렇게 하면 useState를 사용하는 방법이 되겠다 그리고 useState() 의 값은 어떤 값이 들어가도 된다 ex )..
데이터 바인딩이란 나도 쥿밥코더라서 잘 모르겠지만 대충, 서버에서 데이터를 받아왔다면 그 데이터를 HTML에 보여주도록 한다는 느낌인 거 같다 암튼 그걸 리엑트에서 해볼 것이다! 일단 App.js에서 변수 하나 만들어서 한번 꽂아 보자 기본 데이터 바인딩 데이터를 변수를 하나 만들어 줘 봤다 let data = 'Do you want to build a Snowman?'; 신세계를 경험하였다.. { data } 이거만 살짝 끼얹었을 뿐인데 바로 간지 줄줄 흐르더라 기본 JavaScript는, 를 document.querySelector()로 찾아서 . innerHTML = data 이런 식이여야 하는데 { data } 하나만으로 보여준다면, 앞으로 React행님이라 칭하도록 한다 함수 바인딩 그리고 또 ..
저번 시간에는 React 프로젝트를 생성을 했고, 실행을 하여 간지 나는 React 로고가 뜨는 것 까지 성공했다. 이번 시간은 메인 페이지를 한번 만들어 볼 생각인데 그러려면 그 간지 나는 React 로고와 빠이빠잉 할 시간이 된 것이다 ㅠㅠ App.js에서 태그를 다 날려주고 아무거나 넣어보자 그리고 브라우저를 보면 간지 없는 화면으로 바뀌게 된다 Nav 만들기 Blog 여기서 중요! 보통 HTML에서 class이름을 설정할 때, class=""이지만, 여기서는 className을 사용한다 그 이유는 App.js는 결국 JavaScript 문법만 사용할 수 있는 파일이다 그러므로 저거슨 HTML라고 구라 치는 JavaScript라고 보면 된다. (JSX)라고 카더라 그러니 class 이름을 줄 때는 ..
오늘부터 React.js를 공부해보겠다 내가 React.js 한 번도 안 한 쥿밥이니까 여러분들도 다 할 수 있다고 본다 일단 초기 셋팅부터 해보자 공부방법은 유튜브 꽁짜강좌를 보면서 한다 일단 Node.js를 설치하도록 하라 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 최신버전을 다운로드하고 인스톨해라 그다음은 에디터가 있으면 좋은데 자신 있으면 메모장으로 하고 자신 없으면 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code i..
이번에는 POST방식으로 전송했을 때 받는 법을 하겠다! 아래의 코드의 html 파일이 필요하다 여기서 action 을 정해준다. 여기에는 전송하고 싶은 URL를 적어주면 된다! 그다음 server.js에서 아래의 코드를 추가한다 else if (pathname === '/create') { dataAll = ''; request.on('data', function (data) { dataAll = dataAll + data; }); request.on('end', function () { var result = querystring.parse(dataAll); console.log(parsedQuery); response.writeHead(200); response.end(result.id + ' An..
원래 POST를 하기 전에 해야 할 것 이 있다 URL로 요청하는 것은 GET 방식이기 때문에, POST방식으로 요청하려면 HTML의 form 태그를 이용해 POST방식을 쏘거나, 아니면 PostMan이라는 툴을 이용해 전송을 해야 한다 브라우저에서 form 태그를 만들고, 하는 방식으로 선택하였지만, HTML 파일을 만들지 않았기 때문에 만들어보도록 한다 그다음은 URL로 요청했을 때 이 HTML를 불러서 브라우저에 띄어 주게끔 해보자 일단 HTML을 읽을 수 있는 File Sysyem이라는 모듈이 있다 그것이 fs이다 이것을 선언해준다 그다음 볼만한 게 있는데 아래의 코드를 추가해서 요청을 해보자 console.log(url.parse(myUrl, true)); 브라우저의 URL에서 이런 식으로 요청..
브라우저에서 URL를 보면 【?id=helloworld&name=initstory】 이런 식의 주소를 본 적이 있을 것이다 이것을 queryString이라고 말하며 key value라고 보면 된다 id의 값은 hellworld name의 값은 initstory 그래서 이것을 GET (받는다) 하는 것을 해볼 것이다 id를 GET하면 helloworld가 값이 될 것이고 name을 GET하면 initstory가 값이 되게끔.. 그전에 앞서 Node.js의 URL모듈을 또 변수에 넣어보자 var url = require('url'); 그다음은 아래의 코드를 입력하라 이전에 내가 말한 request에는 사용자가 요청한 것이 담겨 있다고 했다 URL주소도 안에 담겨있고, 그것을 불러 myUrl이라는 변수에 넣어..
