본문 바로가기
[react] react로 api 이용하여 뉴스 사이트 만들기 newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러와 블로그 형태의 뉴스 사이트를 만들겠습니다. 예제는 길벗의 리액트를 다루는 기술을 보면서 공부한 예제입니다. 화면 결과 axios로 뉴스 api 호출 준비(ft. promise) 아래의 사이트에 회원 가입 후에 받은 각자의 API 키를 이용하여 데이터에 접근할 수 있습니다. https://newsapi.org/ News API – Search News and Blog Articles on the Web Get JSON search results for global news articles in real-time with our free News API. newsapi.org 발급받은 API 키를 가지고 나중에 API를 요청할 때 API 주소의..
[react] react로 axios로 API 호출 (ft. promise, hooks) API에 대한 간단한 설명과 axios로 API를 호출한 예제를 살펴보겠습니다. axios axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트로서 HTTP 요청을 promise 기반으로 처리합니다. axios 설치 npm install axios //또는 yarn add axios API 구글링을 할때 나오는 API에 대한 정의는 사실 개발자인 저도 무슨 말인지 이해하기 어렵습니다. 그래서 좀더 쉬운 풀이를 찾아보았습니다. 예제 free fake API인 jsonplaceholder.typicode.com 를 이용한 예제입니다. 아래의 주소를 입력하면 JSON 형식의 data가 나옵니다. 이 data를 axios를 통해 웹에서 출력해보겠습니다. promise 방식 app.js im..
[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] react로 지뢰찾기 게임 만들기 ver.1(ft. context API, useReducer) 리액트로 구현한 지뢰찾기 게임(ver.1) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/107 [js] 자바스크립트로 지뢰찾기 게임 구현하기 자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰 goddino.tistory.com 구현내용 · useReduer, context API 이용하여 지뢰칸 세팅 · 마우스 오른쪽 클릭하여 로직 작성하기 컴포넌트 구조 MineSearch.jsx >Form...
[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의 useReducer 사용법 useReducer state가 많을 경우, state를 하나로 묶어주는 역할을 합니다. useReducer 사용 방법 state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을 발생시키는 함수입니다. dispatch(action) 함수 안에 파라미터로 액션 값을 넣으면 리듀서 함수가 호출되는 구조입니다. state를 바꾸기 위해 action을 만들고, 이벤트를 통해 action을 dispatch하여 reducer 함수의 action을 불러와 state 값을 변경합니다. useReducer 문법 //state 초기값 세팅 const initialState = { winner: ' ', } //export로 모듈화, 변수로 지정, ..
[react] react로 틱택토 게임 만들기(ft. useReducer) 리액트 hooks로 구현한 틱택토 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/102 [js] 자바스크립트로 틱택토 구현하기 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 goddino.tistory.com https://goddino.tistory.com/113 [js] 자바스크립트로 틱택토(심화버전) 구현하기 이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인..
[js] react로 로또 게임 만들기 리액트 class/hooks로 구현한 로또 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/103 [js] 자바스크립트로 로또추첨기 구현하기 자바스크립트를 이용하여, 로또 추첨기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 번호 순서 사용 메서드 1 45개의 후보 goddino.tistory.com client.jsx import React from 'react'; import ReactDom from 'react-dom'; import Lotto from './Lotto'; React..
[react] react로 가위바위보 게임 만들기 리액트 class/hooks로 구현한 가위바위보 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom from 'react-dom'; import RSP from './RSP'; ReactDom.render(, document.querySelector('#root')); index.html RSP.jsx - class 방식(before 리팩토링) import React, { Component } from 'react'; //클래스 경우 -> constructor -> render -> ref -> componentDidMount // -> (setState/props 바뀔때..
[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..
반응형

티스토리툴바