데이터 바인딩이란 나도 쥿밥코더라서 잘 모르겠지만 대충, 서버에서 데이터를 받아왔다면 그 데이터를 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이라는 변수에 넣어..
Node.js를 깔았으니 이번엔 서버 구축을 해보겠다 일단 js 파일 하나를 만들어 본다 Node.js에는 여러 가지 모듈을 들고 있다 그중 http라는 모듈을 사용해서 서버를 구축해보자 일단 http 모듈을 변수에 담아서 사용해야 한다 var http = require('http'); 그다음 아래의 코드를 추가한다 이게 가장 기본적인 서버 구축하는 법이다 http모듈 안에는 createServer가 있음 var server = http.createServer(function(request,response){ response.writeHead(200); response.end('Hello World'); }); 웹은 요청 ( request ), 응답 ( response ) 가있는데 request는 사용자..
Node.js 설치하기 위해서는 아래의 사이트로 간다 nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이화면에서 빨강이로 쳐져있는 것을 클릭한다 오른쪽은 현재버전이지만, 이건 실험대상이라는 것이다 ( 아직 안정화 되지 않은 ) 이렇게 다운로드한 msl 설치가 있다 이걸 실행 시키고 next 광클하자 ( 난 광클했다 어차피 영어를 모르기때문에 ) 그 다음 cmd를 켜서 【node -v】를 입력 지금 내가 들고 있는 버젼은 12.16.2이다 ( 옛날에 다운받았쯤 ) 이렇게 버젼이 나온다면 설치 성공이다
