이번엔 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..
브라우저에서 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이라는 변수에 넣어..
이번시간은 게시판을 조회 하도록 한다 이전에 등록 ( Create ) 을 한 뒤 메인페이지로 돌아왔지만 아무것도 없었으니 등록했는지 안했는지 검증 방법이 없었으니 한번 해보도록 한다 일단 등록후, main으로 redirect를 해버리니까 main함수를 실행시켰던 것이니 main함수를 건들여보자 일단 import 하는 부분에는 반드시 Board도 import를 해주자 ( 다른것도 마찬가지 ) Board 객체에 있는 데이터를 모두 불러 변수 boardList에 저장한다 boardList = Board.objects.all() return 할 경우 boardList도 담아서 return 시켜주도록 한다 return render(request, 'main.html', {'boardList': boardList}..
이번에는 대망의 CRUD의 C ( Create ) 를 시작할 것이다 그러므로 Board 객체가 필요하기 때문에 models.py를 건드려보자 위의 코드는 이전에 적은적이 있었다 아래의 링크에서 설명하므로 가볍게 설명을 생략하겠다 initstory.tistory.com/7 2강) Django Object 만들기! 이번에는 Django의 Object를 만들 것 사람이 있다면 ( People ) 사람의 정보들이 있다 이름, 나이, 성별 등 ( name, age, gender ) 그런 정보들을 담을 수 있는 클래스를 만들어 보자 Django에서 제공해주는 mode. initstory.tistory.com main 페이지에서 글을 등록하기 버튼을 만들고 글을 등록하는 페이지로 이동하기 위해 아래의 코드를 추가하였..
