SPA/React

[React] 게임으로 배우는 리액트 - 바벨(babel)

위의 코드는 앞선 포스팅에서의 코드입니다. 근데 한눈에 봐도 보기가 상당히 좋지 않습니다. ​ ​ return e('button', null, 'Like'); 이와 같은 형식이 아닌 Like 이처럼 태그 형식을 사용할수 있도록 개선이 되었습니다. 바로 바벨을 사용하는 방법인데요. ​ 바벨을 사용하여 이렇게 코드를 변경했습니다. 변경된 부분을 자세히 볼까요?? ​ 우선 바벨을 사용하기 위해서는 해당 스크립트를 넣어주어야합니다. ​ 이처럼 ReactDOM안에 만들어두었던 LikeButton을 어려개 사용하면 됩니다! 버튼은 또 개별 동작합니다! 이 버튼들을 로 감싸지 않으면 에러가 발생해서 태그로 감싸주어야합니다.

[React] 게임으로 배우는 리액트 - 기본 문법(class, state, render())

리액트는 기본적으로 자바스크립트입니다. 그렇기 때문에 js파일로 구성이 되고 web이기 때문에 html파일이 필요합니다. html에서는 가장 기본적으로 , 위와 같은 형태가 될것입니다. 여기에서 자바스크립트를 불러오기 위해서는 가 필요합니다. 리액트는 기본적으로 위의 스크립트에 들어갈 src안의 자바스크립트 파일입니다. 또한 src를 쓰지 않고 사이에 자바스크립트 코드를 작성할수도 있습니다. ​ ko.reactjs.org React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 또한 리액트를 사용하기 위해서는 해당 스크립트 구문을 가져와서 사용하여야합니다. 지금은 개발을..

[React] 리액트를 왜 사용할까?

https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트는 JavaScript의 프레임 워크이며 리액트 공식홈페이지에 보면 설명이 잘 나와있습니다. 하지만 한국어 번역이 완전히 되어있지 않고 조금 이전에 쓰이던 문법이라고 합니다. React.createClass -> class -> Hooks 로 많이 사용되고 있고 현재 리액트를 만든 페이스북에서는 Hooks를 밀고 있지만 만들어져있는 라이브러리 대부분이 class라고합니다. ​ 그렇다면 리액트를 왜 사용할까요?? ​ 1. 사용자 인터페이스 우선 사용자 인터페이스를 편리..

[React] Hello, React! 리엑트 서버 띄우기

SSH(server side rendering)은 HTML이나 data를 다 만들어야하지만 React는 Client 단에서 그때그때 필요한 데이터를 서버에 호출하여 앞단이 바뀝니다. (Cliend side rendering) 또한 일반적으로 back서버와 front서버를 따로 둔다고합니다! ​ 우선 VSCODE를 통해 간단한 리엑트를 해보도록 하겠습니다. NodeJS가 설치되어있어야합니다!! ​ 혹시 git bash가 있다면 열고자 하는 폴더에서 git bash를 실행시키고 code . 명령어를 치면 해당경로로 VSCODE가 열립니다. ​ VSCODE는 텍스트에디터 자체에서 터미널창을 사용할수 있어서 매우 유용합니다. code . 으로 VSCODE가 켜졌다면 위와같은 화면이 나옵니다. 터미널이 안켜져있다..