본문 바로가기
[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] react로 반응속도 테스트 게임 만들기(ft. useRef, 조건문, spread 연산자) 리액트 class/hooks로 구현한 반응속도 테스트 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom from 'react-dom'; import ResponseCheck from './ResponseCheck'; ReactDom.render(, document.querySelector('#root')); index.html ResponseCheck.jsx - class 방식 import React, { Component } from 'react'; class ResponseCheck extends Component { state = { screenState: 'wai..
[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] 리액트 컴포넌트 props로 데이터 전달 리액트에서 컴포넌트간 데이터 전달 방법, props에 대하여 알아보겠습니다. props 부모컴포넌트에서 자식 컴포넌트로 데이터 전달 방식입니다. props 사용방법 //컴포넌트 태그내 예제1. 반복문을 컴포넌트 분리 class 방식 태그의 반복되는 부분을 컴포넌트로 만듭니다. props를 이용하여 데이터를 전달합니다. 부모 컴포넌트 import React, { Component } from 'react'; import Fruit from './Fruit'; class Map extends Component { state = { fruits: [ {fruit: '🍉', color: 'green' }, {fruit: '🍓', color: 'red' }, {fruit: '🍊', color: 'orange' }..
[react] react의 반복문 map, 컴포넌트 사용법(ft. props) 리액트 반복문 map()의 사용법에 대하여 알아보겠습니다. · 리액트에서는 반복문을 map으로 사용합니다. · 자바스크립트에서 배열의 반복문에 사용하는 map() 입니다. · vue는 v-for를 통한 반복문을 사용하는데 반해, 리액트는 map()을 사용하여 제 생각에는 가독성이 떨어집니다. 예제1: 배열의 반복 import React, { Component } from 'react'; class Map extends Component { state = { fruits: ['🍉', '🍓', '🍊', '🍋', '🍌', '🍍', '🥭'], } render() { return ( {this.state.fruits.map((fruit) => { return ({fruit}) })} ) } } export def..
[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..
[vue] vue.js props / emit 사용방법 일반적인 컴포넌트에서의 데이터 전달 방식인 props, emit의 사용방법을 알아보겠습니다. 구현 화면 코드 예제 폴더 구조 AppHeader.vue(하위 컴포넌트1) 상위 컴포넌트에서 제목을 props로 받아와 출력합니다. AppContent.vue(하위 컴포넌트2) 상위 컴포넌트에서 데이터를 받아와 리스트를 출력하고, 클릭하면 emit으로 상위 컴포넌트로 올라와서, 상위 컴포넌트에서 다시 메소드를 이용하여 변경된 데이터를 뿌려줍니다. //emit 방법 1 - method 통해 emit 처리 @click="method 이름()" //methods에서 this.$emit('emit 이름') 처리 //emit 방법 2 - 바로 emit 처리 @click="$emit('emit 이름')" App.vue(상위..
[vue] vue.js 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.7) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.7)입니다. - 리팩토링, 공통 컴포넌트화 - 예제는 인프런의 캡틴 판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 리팩토링 컴포넌트 공통화 페이지에서 사용되는 컴포넌트들의 패턴이 중복되어 사용되었을 때 이를 공통 컴포넌트화 시킴으로써 코드를 간편화, 구조화시킵니다. 구현 내용 각각의 페이지에서 사용되는 user information을 하나의 컴포넌트화 시키기 위한 작업을 합니다. 리팩터링 작업 · components > UserProfile.vue 파일 생성 · 기존의 ItemView.vue의 내용(위 오른쪽 UI)을 copy //기존 ItemView.v..
[vue] vue 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.6) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.6)입니다. - 리팩토링 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 리팩토링 컴포넌트 공통화 페이지에서 사용되는 컴포넌트들의 패턴이 중복되어 사용되었을때 이를 공통 컴포넌트화 시킴으로써 코드를 간편화, 구조화 시킵니다. 구현 내용 News/Ask/Jobs 각 페이지를 ListItem.vue에서 컴포넌트를 시킨 후 각각의 페이지에서 ListItem.vue를 import 시킵니다. 리팩토링 before vue > NewsView.vue {{ item.points }} {{ item.title }} {{ item.time_ago }}..
[vue] vue getters, v-html, transition(api 통해 뉴스 사이트 구현 ver.5) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.5)입니다. - getters/v-html - getters 적용 코드 정리를 위하여 getters를 이용하여 긴 코드를 줄이고, 가독성을 높일 수 있습니다. getters 적용 before views > ItemView.vue {{ this.$store.state.item.title }} {{ this.$store.state.item.content }} getters 적용 after views > ItemView.vue {{ fetchedItem.title }} {{ fetchedItem.content }} store > index.js export const store = new Vuex.Store({ getters..
[vue] vue.js vue 동적 라우트(api 통해 뉴스 사이트 구현 ver.4) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.4)입니다. - 동적 라우트 매칭 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 동적 라우트 매칭(dynamic route matching) dynamic route matching 공식문서: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes Dynamic Route Matching | Vue Router Dynamic Route Matching Very often we will need to map routes w..
[vue] vue vuex , store적용(api 통해 뉴스 사이트 구현 ver.3) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.3)입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. vuex 적용 모듈화 process No. 순서 remark 1 기본 설정 2 state data 속성 3 actions api 호출, dispatch api 호출 4 mutation state 값 변경, commit api 호출 5 화면 출력 6 getters 리팩토링 컴포넌트 데이터 호출 방법 BEFORE: component에서 직접 api를 호출하여 사용 AFTER: vuex(상태관리도구)를 이용하여 vuex의 state에 api를 담아서 화면에 표시 vuex 설치 ..
[vue] vue axios 이용한 api 서버 통신(api 통해 뉴스 사이트 구현 ver.2) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제(ver.2)입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. axios 이용한 api 호출 해당 API 문서 주소: http://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md tastejs/hacker-news-pwas HNPWA - Hacker News readers as Progressive Web Apps 📱 - tastejs/hacker-news-pwas github.com axios 설치 npm i axios --s axios에 대한 자세한 설명은 아래 포스트로 ..
[vue] vue.js 라우터 연결, nav 출력(api 통해 뉴스 사이트 구현 ver.1) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue.js로 구현하는 예제입니다. 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 구현할 사이트(해커뉴스): https://news.ycombinator.com/ 해당 API 문서 주소: github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md tastejs/hacker-news-pwas HNPWA - Hacker News readers as Progressive Web Apps 📱 - tastejs/hacker-news-pwas github.com 프로젝트 생성 · 폴더 만들기 · 터미널에서 해당 프로젝트 생성 v..
[vue] vue.js computed 속성 vue.js에서 사용되는 computed속성에 대하여 알아보겠습니다. computed 속성 실시간으로 계산, 로직을 화면에 출력할 때 사용합니다. 실습 예제 {{ header.toLocaleUpperCase() }} add item cancel add {{ item.subject }} 예제 1) 실시간 계산 input에 텍스트 입력할 때마다 실시간으로 text가 몇 글자인지 계산 {{ charaterLength }}/50 add 화면 결과(Result 클릭)
[vue] v-if, v-else, v-show (ft. v-if와 v-show 차이점) vue.js에서 v-if를 이용한 조건부 렌더링을 알아보겠습니다. v-if v-if와 v-else는 자바스크립트의 조건문 if, else if와 같은 의미입니다. 조건이 성립하지 않으면 렌더링 자체를 하지 않아 태그 자체가 비어있습니다. True False //결과: True v-else v-else는 v-if 와 함께 이용할 수 있습니다. 앞의 조건이 성립하지 않는다면 else 조건이 동작합니다. 예제) button을 이용하여 form을 조건부 렌더링 · add item 버튼 클릭 시 form 출력 · cancel 버튼 클릭시 form 사라짐 {{ header.toLocaleUpperCase() }} add item cancel add {{ item.subject }} var app..
[vue] vue 클래스 바인딩(다이너믹 클래스, 객체, 배열, 토글, 스타일 바로 적용) vue.js에서 속성 바인딩으로 클래스를 적용하는 방법을 알아보겠습니다. 다이너믹 클래스(Dynamic class) 미리 클래스 이름에 스타일을 지정해 놓고, 조건에 맞추어 해당 클래스 적용시킬 때 사용합니다. 다이너믹 클래스를 적용하는 방법은 2가지입니다. 사용할 예제 {{ item.subject }} 화면 결과 v-for로 items에서 subject만 추출하였고, style 태그 안에, 클래스 done/important/ready의 이름과 스타일을 지정해 주었습니다. 다이너믹 클래스를 적용하는 방법은 객체와 배열의 방식이 있습니다. 하나씩 알아보겠습니다. 1. 객체(object) 객체 속성에는 클래스 이름, 값은 조건을 넣어 줍니다. v-bind:class="{ 클래스 이름: 조건 }" 예제 1) ..
[vue] vue로 게시판 구현하기(ft. 검색, 게시물 추가, 편집, 삭제 기능) vue.js로 게시판을 만들고, 검색, 게시물 추가, 편집, 삭제하는 기능 구현입니다. 게시판 구현 화면 구현 내용: · vue, vue material CDN 방식으로 html 문서에 설치 · api 서버 통신 대체용 임시 테스트 데이터 script 내 설정 · 게시판에 게시물 추가 - 추가 기능 · 해당 게시물 편집 - 편집 기능 · 해당 게시물 삭제 - 삭제 기능 · 게시물 제목 이용한 검색 기능 html 간단한 마크업을 위해 vue, vue material을 cdn 방식으로 설치하고, 임의의 더미데이터를 삽입하여 데이터 추가, 검색, 편집, 삭제 기능을 구현한 코드입니다. Todo List Search for SUBJECT DESCRIPTION {{ listItem.subject }} {{ lis..
[vue] vue 모달창, 다이얼로그 기능 구현하기(ft. slot) vue.js 가이드를 활용하여 모달창을 구현하겠습니다. 참고문서 vuejs.org/v2/examples/modal.html Modal Component — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 위의 링크로 이동하여, html과 css의 코드를 그대로 나의 문서에 적용시키면 됩니다. 모달창 적용 방법 1. Modal.vue 의 파일(모달용 하위 컴포넌트)을 하나 생성합니다. 2. 상위 컴포넌트에 Modal 컴포넌트를 부릅니다.(import) 3. 가이드의 코드를 위의 컴포넌트들에게 적용합니다. 구현 화면 Modal.vue(모달용 하위 컴포넌트) default header default body default footer close ..
[vue] vue.js Post 폼 데이터 api 전송하기(axios, 유효성 검사) vue.js의 폼데이터를 axios를 이용하여 서버통신하는 방법을 알아보겠습니다. form 화면 구현 내용: · vue, axios, vue material CDN 방식으로 html 문서에 설치 · axios, post방식으로 form data api로 전송 · 가상의 post url : http://jsonplaceholder.typicode.com/posts · 디자인 vue material 사용 · 유효성 검사 - 이름, 이메일, 성별, 동의 체크박스 필수 입력 · 전송후 form 데이터 입력값 다 지우기 · 특정 값 선택시 textarea disabled 속성 처리 html 문서 내 코드 Sign up Name Email address Gender Male Femail Your job Develo..
[vue] vue.js로 todolist 투두리스트 앱 만들기(리팩토링 후) vue.js와 vue material을 이용한 todolist 앱 리팩토링 리팩토링 전의 앱의 구현 내용은 아래의 포스트로 이동해주세요. https://goddino.tistory.com/90 [js] vue.js로 todolist 투두리스트앱 만들기(refactoring전) vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header,.. goddino.tistory.com 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. TodoList 앱화면 리팩토링 작업 과정: 하위 컴포넌트..
[vue] vue.js로 todolist 투두리스트앱 만들기(리팩토링 전) vue.js와 vue material을 이용한 간단한 todolist 앱을 만들겠습니다. (before refactoring) 예제는 인프론의 Vue.js 끝장내기 강의를 듣고 참조하여 공부한 내용입니다. Todolist 앱화면 구현 내용: · header, input, list, footer component로 분리 · Things To Do라는 input 박스에 해야할일을 기입 · 해야할일 기입 후 enter 또는 오른쪽 plus버튼 클릭시, 아래 리스트에 추가 · CLEAR ALL 버튼 클릭시 전체 삭제 · refactoring 전 구현이 미완성된 상태 · vue material을 이용한 css · localstorage를 이용한 데이터 저장/불러오기/삭제하기 기능 App.vue TodoHeader..
반응형

티스토리툴바