본문 바로가기
[react] 챗봇 구현하기 (ft. react-simple-chatbot) react-simple-chatbot 을 이용하여 챗봇을 구현합니다 . react에서 가장 많이 쓰이는 simple 챗봇입니다. documentation 이 잘 되어있고, api를 이용하여 여러가지의 custom이 가능합니다. 구현화면 구현 영상 react 챗봇 https://lucasbassetti.com.br/react-simple-chatbot/ React Simple Chatbot A simple chatbot/conversational-ui react component lucasbassetti.com.br react simple chatbot 설치 npm install react-simple-chatbot --save react simple chatbot import import ChatBot ..
[react] react로 지뢰찾기 게임 만들기 ver.2 리액트로 구현한 지뢰찾기 게임(ver.2) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/107 [js] 자바스크립트로 지뢰찾기 게임 구현하기 자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰 goddino.tistory.com react로 구현한 지뢰찾기 게임 ver.1은 아래 포스트로 이동해주세요. https://goddino.tistory.com/156 [js] react로 지뢰찾기 게임 ..
[react] 리액트 테이블 게시판 만들기 ver.2 (데이터 추가, 수정, 저장, hooks, form) 구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈 구현 화면 이전 시간에 이어서 폼을 삽입하여 새로운 데이터를 추가하고, 수정 버튼을 클릭하면 모달창을 띄워서 해당 데이트를 바로 수정하고, 저장하는 기능을 알아보겠습니다. 데이터 추가하기 onChange, onSubmit, spead 연산자/concat Form, input 태그를 사용하여 만들었고, input에 name, value, onChange 속성을 만들어 onChange 이벤트로 입력할때 마다 각각의 name 속성에 value 값을 넣어줍니다. Post.js (하위1 컴포..
[react] 리액트 테이블 게시판 만들기 ver.1 (axios, useEffect, 글삭제) 구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈 구현 화면 프로젝트 폴더 설치 npm 패키지 설정 npm create react-app 폴더이름 //폴더 생성 cd 폴더이름 //해당 폴더로 접근 npm start //local 서버 띄우기 처음에 어설픈 기억력으로 npm install create-react-app으로 계속 입력하다가 시간을 버린 기억이 있습니다. ㅠㅜ 구글링하면 될 것을…. 아무튼 npm start 로 local 서버를 띄웁니다. tailwind 설치 tailwind를 설치하여 간편하게 css를 적용하겠습니다. ..
[react] react로 틱택토 게임 만들기(ft. useReducer) 리액트 hooks로 구현한 틱택토 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/102 [js] 자바스크립트로 틱택토 구현하기 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 goddino.tistory.com https://goddino.tistory.com/113 [js] 자바스크립트로 틱택토(심화버전) 구현하기 이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인..
[react] 리액트 끝말잇기 게임 만들기(ft. 컴포넌트 구조) 리액트 class/hooks로 구현한 숫자야구 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4385, 조건)겹치지 않는 4개 사용자가 답을 입력 입력한 답의 결과 발표 결과 발표: 홈런/스트라이크/볼 홈런) 숫자가 모두 일치할 경우 스트라이크) 자리수가 맞을 경우 볼) 자리수는 맞이 않으나, 숫자가 맞을 경우 답이 맞을때까지 10회 제한을 둠 파일 구조 client.jsx >NumberBaseball.jsx >Try.jsx client.jsx import React from 'react'; import ReactDom from 'react-dom'; import NumberBaseball f..
[react] 리액트로 끝말잇기 게임 만들기 리액트 class/hooks로 구현한 끝말잇기 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx const React = require('react'); const ReactDom = require('react-dom'); const WordRelay = require('./WordRelay') ReactDom.render(, document.querySelector('#root')); WordRelay.jsx - class 방식 클래스 메소드를 무조건 화살표 함수의 문법을 사용합니다. const React = require('react'); class WordRelay extends React.Component { state = { word: ..
[react] 리액트 webpack 설정(ft. npm, babel, webpack.config.js) 리액트를 위한 webpack 설정 하는 법입니다. webpack을 사용하는 이유 수많은 자바스크립트 파일(컴포넌트)을 합쳐서 한개의 자바스크립트 파일로 만들어 관리하기 위함입니다. node 설치 자바스크립트 실행 도구 webpack을 사용하기 위해서는 사전에 node가 설치 되어있어야 합니다.(npm 자동 설치) webpack 설정 1. package.json 파일 생성 package.json 파일에 개발에 필요한 모든 패키지들이 dependencies, devDependencies(-D, 개발환경에서만 사용되는 라이브러리)에 포함됩니다. npm init 2. react, react-dom 설치 · react: 리액트 라이브러리 · react-dom: brower, dom 관리 · node_modules..
[react] 리액트로 구구단 게임 만들기(ft. hooks 방식, cdn 설치) 리액트 hooks로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. Class 방식과 Hooks 방식의 비교 Class 방식과 Hooks 방식의 비교 · Class보다는 Hooks를 리액트에서 권장하고 있는 방식입니다. · Class보다 Hooks가 코드가 훨씬 간결합니다. · 모든 state를 쪼개서 선언합니다. · this.state, this.setState을 사용 안합니다. · ref를 React.useRef으로 문법을 사용합니다. · render() 함수 부분은 같습니다. · Class에서는 state가 변경될 때마다 render함수 내에서만 재실행되지만, Hooks에서 함수 전체가 재실행되기 때문에 속도가 더 느릴 수 있습니다. state..
[js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) 리액트 클래스로 구현한 구구단 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. class 방식 사용 방법 · state: 변하는 데이터는 state(변경 전 데이터)로 넣습니다.. · input의 입력될 value는 반드시 onChange 이벤트로 바꿔줍니다. · this.setState 사용방법: this.setState ({ 변경 후의 데이터 }) · html에서 class 속성 대신 className을 사용합니다. · html에서 label 태그의 for 속성 대신 htmlFor을 사용합니다. · setState는 비동기입니다. 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 리액트 구구단 게임 구현 html..
[react] 리액트 window용 개발환경 설치하기(ft. cra, node.js npm yarn) 리액트 개발 환경 설치 방법입니다. 1. Node.js 설치 Node.js는 크롬 v8 자바스크립트 엔진을 기반으로 한 서버사이드 자바스크립트 런타임입니다. 아래 Node.js 공식 홈페이지로 이동해주세요. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 첫 화면에서 오른쪽의 최신 버전으로 다운로드합니다. 설치 화면 위의 추가적인 설치 화면이 나오면서 설치가 완료됩니다. 최신 node.js는 설치와 동시에 npm이라는 패키지 관리 도구까지 설치가 됩니다. 이제 npm을 이용하여 create react app을 설치하여 리액트 프로젝트를 시작할 수 있..
반응형

티스토리툴바