꾸숑의 IT 월드

일반 컴퓨터에서 리액트를 시작하기 위해서는 여러가지 인스톨하고 환경설정하고 등등 해야 할 것 들이 많다. 그러나 replit을 사용하면 인터넷 상에서 바로 리액트를 이용할 수 있어 아주 좋다. 인터넷에서 리액트를 사용하는 방법을 알아보자. 먼저 https://replit.com/~에 접속해서 회원가입 하고 로그인한다. 초기 화면에서 '+'가 보이는 아이콘중 아무것이나 클릭하면 시작한다. 3개의 '+ '아이콘중 아무것이나 눌러도 똑 같다. Create a Repl 창이 뜨면 검색창에 react를 입력하자. replit에서 제공하는 template이 50개가 넘으므로 스크롤을 내려서 찾기가 쉽지않다. React Javascript를 클릭한다. Title에 적당한 이름을 주고 엔터를 누르거나 아래 '+ Cre..

이번 시간에는 JS에서 리액트로 더 나아가기 위한 JS 문법을 몇가지 알아보기로 하자. 리액트에서 많이 쓰이는 4가지 문법을 위주로 설명한다. 1.object shorthand assignment 우리말로 하면 '단축 할당'정도로 번역되는 말인데 반복되는 변수에 대해서 하나를 생략해서 간단히 표기하는 방법이다. 자바에서나 파이썬에서는 this를 사용하는데 JS에서는 아예 반복되는 변수 하나를 생략해 버린다. name 변수와 age 변수에 값을 입력하고 그 값들을 객체로 만든 후 변수를 하나씩 출력해 보는 코드를 작성해 보자. person 객체를 생성하고 name과 age에 변수를 대입한다. 이때 자신의 객체 name과 age에 위에서 선언된 이름과 나이를 대입하는 것인데 자바나 파이썬에서는 자신의 객체라..

리액트는 JS의 프레임 워크(FW) 중 가장 많이 쓰이는 FW인데 이번 시간에는 리액트로 웹페이지에 글자를 넣고 박스를 그리는 것을 연습해 보자. IDE로는 거의 대부분의 언어를 에디팅할 수 할 수 있는 리플릿(Replit) 이라는 것을 사용할 것이다. 리플릿(Replit)은 사용자들이 브라우저를 사용하여 코드를 작성하고 앱과 웹사이트를 만들 수 있게 해 주는 웹 IDE이다. https://replit.com/~ 에 접속해서 회원 가입을 한 후 사용 할 수 있다. 처음 replit을 실행 시키면 나타나는 화면이다. '+Create'을 버튼을 눌러보자. Create a Repl 이란 창이 뜨는데 Templates에는 50가지가 넘는 Template의 목록이 나타난다. 검색창에 react를 입력해 보자. 가..