본문 바로가기

react11

[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 .. 2021. 9. 24.
[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로 지뢰찾기 게임 .. 2021. 4. 16.
[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 컴포.. 2021. 4. 13.
[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를 적용하겠습니다. .. 2021. 4. 13.
[react] react로 틱택토 게임 만들기(ft. useReducer) 리액트 hooks로 구현한 틱택토 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/102 [js] 자바스크립트로 틱택토 구현하기 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 goddino.tistory.com https://goddino.tistory.com/113 [js] 자바스크립트로 틱택토(심화버전) 구현하기 이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인.. 2021. 4. 6.
[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.. 2021. 3. 24.
반응형