본문 바로가기
[react] next.js 사이트 만들기 (ft. 동적 라우팅) ver.2 react 라이브러리, next.js로 만튼 사이트 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 화면 http:.../photos/1 와 같이 상세 페이지로 접근합니다. 폴더 구조 pages > photos.js import HeadInfo from "../components/HeadInfo" import Image from 'next/image' import styles from "../styles/Photos.module.css" import Link from 'next/link' const photos = ({ photos }) => { return ( Gallery {photos.map(photo => //여기서 id를 path로 보내면서 링크 ..
[react] next.js 사이트 만들기 (ft. getStaticProps, getServerSideProps) ver.1 react의 라이브러리, next.js로 만든 사이트 예제입니다. 예제는 유튜버, code Scalper님의 강의를 들으면서 공부한 내용입니다. 구현 영상 구현 화면 Home 페이지 Photes 페이지 photo 이미지별 세부 페이지 폴더 구조 getServerSideProps, getStaticProps getServerSideProps 페이지에 들어올때마다 즉시 데이터 전송 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옴 export const getServerSideProps = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/posts?_start=0&_end=10') const posts = awai..
[react] Object is possibly 'null' (ft. typescript, style) 오류 해결 react hooks에서 자바스크립트를 이용해 html element에 접근하여 Object is possibly 'null' 이라는 타입스크립트 오류가 났습니다. 이유는 객체가 비어 있을 수도 있는데 해당 객체의 내부 프로퍼티나 메소드를 사용할 때 입니다. before const handleClick = () => { let scrollBlock = document.querySelector('.scrollBlock'); scrollBlock.style.backgroundColor = "#F6CB44"; }; 해결 방법 타입 단언 사용 (type assertion) const handleClick = () => { let scrollBlock = document.querySelector('.scrollB..
[react] 체크 박스 토글 기능 구현 (ft. new Set(), checked) react, set 객체를 이용한 체크박스 토글 기능 구현입니다. 구현 화면 구현 영상 구현 내용 - react, hooks 방식 - 체크 박스 토글 기능(한번 클릭 선택, 두번 클릭 취소) - es6 최신 문법, set 객체를 이용하여 체크된 요소들 넣어주기 react 체크박스 토글 기능 (new Set()) import React, { useState } from "react"; const Check = () => { const formData = [ { id: 1, name: "딸기" }, { id: 2, name: "바나나" }, { id: 3, name: "피자" }, { id: 4, name: "불고기" }, { id: 5, name: "김치" }, { id: 6, name: "볶음밥" }, ..
[react] vs code rsc 입력 후 자동 코드 설치 플로그인 react 기본 자동 완성 코드 기능 플러그인 입니다. react 사용자의 필수인 react 문법 코드 자동완성 플러그인입니다. rsc 또는 rcc를 입력하면 react 기본 코드가 emmet 기능처럼 자동 생성됩니다. rsc: hooks에서 사용하는 함수형 컴포넌트 rcc: class 타입의 컴포넌트 Reactjs code snippets rsc 입력 후 import React from 'react'; const Table = () => { return ( ); }; export default Table; rcc 입력 후 import React, { Component } from 'react'; class Table extends Component { render() { return ( ); } } e..
[react] pie 차트 (ft. 도넛 차트 라이브러리) react 도넛 차트 라이브러리입니다. react에서 간단하게 사용하는 파이 차트(도넛 차트) 라이브러리, react-minimal-pie-chart를 추천합니다. 구현 화면 react-minimal-pie-chart 사이트 https://www.npmjs.com/package/react-minimal-pie-chart react-minimal-pie-chart Lightweight but versatile SVG pie/donut charts for React www.npmjs.com piechart 기본 import { PieChart } from "react-minimal-pie-chart"; const Chart = () => { const data = [ { title: "One", value:..
[react] react-datepicker 커스텀 react-datepicker를 커스텀하는 방법 입니다. react에서 사용하는 datepicker 중 가장 인기있는 캘린더 데이트피커 라이브러리, react-datepicker 입니다. react-datepicker는 기본적으로 제공하는 기능이 많아 여러가지 옵션으로 출력이 가능하고, 여기서 css를 이용하여 이쁘게 UI를 만들 수 있습니다. 구현 내용 - react, hooks 방식, style은 tailwind, css 사용 - 예약일 버튼 클릭시 datepicker 토글(출력/사라짐) 기능 - datepicker 출현시 현재 날짜 기본 설정 - datepicker에서 날짜 클릭 후 확인 선택시 예약일 저장, 취소시 datepicker 닫기 - datepicker 한국어 설정 - 화면에 날짜 출력시..
[react] pagination 구현 (ft. react-js-pagination) react hooks에서 pagination을 구현하고, 라이브러리 react-js-pagination을 사용하여 구현해봅니다. 구현 내용: 1. react hooks 2. 최소한의 css만을 사용합니다. 3. axios로 jsonplaceholder에서 더미데이터를 가져옵니다. 구현 화면 폴더 구조 npm, axios 설치 cra로 프로젝트를 생성하고, 서버통신을 위해 axios를 설치합니다. npm create react-app react-pagination //react-pagination 프로젝트 생성 npm i axios //axios 설치 App.js import React, {useState, useEffect} from 'react'; import axios from 'axios'; imp..
[react] Redux 예제 (ft. 미들웨어, Redux-thunk, Redux-devtools) react에서 Redux 사용 예제입니다. 예제는 유투버, code Scalper님의 강의를 들으면서 공부한 내용입니다. Redux의 기본 원리 화면 결과 폴더 구조 폴더 안 파일 구조 react Redux 예제 구현 순서 컴포넌트 파일 구성 CRA로 프로젝트 생성, components 폴더 구성 components 폴더 내에 Subscribers.js, Display.js, Views.js 세 개의 파일 생성 App.js에서 위의 하위 components 삽입 리덕스 redux 폴더 안에, 하위 폴더 생성(comments, subscribers, views) 각 하위 폴더 마다, types.js, actions.js, reducer.js 순서로 파일 생성 types.js : action type을 변수..
[react] Refusing to install package with name "react-redux" under a package 오류 해결 react에서 npm install redux react-redux로 리덕스를 설치하는 도중 아래의 오류가 발생했습니다. 오류 메시지 npm ERR! code ENOSELF npm ERR! Refusing to install package with name "react-redux" under a package npm ERR! also called "react-redux". Did you name your project the same npm ERR! as the dependency you're installing? npm ERR! npm ERR! For more information, see: npm ERR! 오류 해결 문제는 프로젝트 이름을 제가 react-redux 라고 설정해서, package.js..
[react] POST url/[object%20Object] 404 (Not Found) 오류 해결 리액트에서 Axis post 로 API 호출을 하던 중 다음과 같은 오류가 났습니다. const userFn = () => { const searchData = { userId, count: 1, } axios.post(url + "/report/" + searchData) .then(res => console.log(res.data)) .catch(err => console.log(err)) } 오류 메시지 POST url/[object%20Object] 404 (Not Found) 해결 방법 post()안의 + 파라미터에서 ,(콤마) 파라미터로 변경합니다. axios.post(url + "/report/", searchData) .then(res => console.log(res.data)) .cat..
[react] Property 'x' does not exist on type '{}'.ts 오류 해결 리액트 hooks, typescript 프로젝트에서 아래와 같은 오류가 났습니다. 오류 메시지 Property 'x' does not exist on type '{}'.ts 해결 방법 useState() 에서 useState()를 추가해줍니다. 배열 const [arr, setArr] = useState([]) 객체1 const [userInfo, setUserInfo] = useState({}) 객체2 const [searchDate, setSearchDate] = useState({ start: '', end: '' });
[react] Cannot assign to 'i' because it is a constant 오류 해결 리액트로 hooks로 숫자를 증가 시키는 메소드 코드를 삽입하다가 나온 오류 메시지 입니다. const [i, setI] = useState(0); const onIncrement = () => { //클릭시 숫자 증가 if (i < 10) { i = i+1 } return SetI(i); } 오류 메시지 Cannot assign to 'i' because it is a constant. 해결 방법 변수 const 를 let으로 바꿔 줍니다. const는 한번 값을 할당하면 값이 절대 바뀌지 않습니다. (immutable data type) 값을 선언함과 동시에 할당한 뒤로는 값 변경이 불가능하기 때문에 let으로 바꿔줘야 합니다.
[react] react-datepicker 사용법 react datepicker 라이브러리 사용법입니다. 구현 내용 - react, hooks 방식, style은 모두 제외, 상태관리로 useContext 사용 - 버튼 클릭시 datepicker 출현 - datepicker는 마지막일 클릭시 사라짐 - datepicker에서 시작일, 마지막일 클릭시, 화면에 출력 - 화면에 날짜 출력시 연,월,일 문자열로 반환하여 출력 react-datepicker 실무에서 캘린더, datepicker 를 사용할 일이 있어서, 구글로 리액트 datepicker 라이브러리 서칭 후, 가장 유명한 react-datepicker을 설치 후 사용하였습니다. react-datepicker 홈페이지 https://www.npmjs.com/package/react-datepicke..
[react] 리액트 탭 구현하기(ft. tailwind) react에서 탭화면을 구현합니다 . 구현 내용 탭 버튼 클릭 시 해당 탭 화면을 바로 보여줍니다. react hooks 방식을 이용합니다. 스타일을 tailwind 를 적용합니다. 구현 화면 리액트로 탭 구현 방법 코드 import React, { useState } from 'react'; const MainContent = () => { const [openTab, setOpenTab] = useState(1); return ( { e.preventDefault(); setOpenTab(1); }} data-toggle="tab" href="#link1" role="tablist" > 1번 탭 { e.preventDefault(); setOpenTab(2); }} data-toggle="tab" h..
[react] Object is possibly 'null' (ft. typescript, useRef) 오류 해결 react hooks에서 간단한 input 을 사용하는 구조에서, focus()를 사용하기 위하여 해당 input 태그에 useRef 를 삽입하고, const inputRef = useRef(null)로 선언을 하였는데, focus 처리시, Object is possibly 'null' 이라는 타입스크립트 오류가 났습니다. 오류 메시지 before import React, { useRef } from "react"; const Login = () => { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); //오류 발생 }, []); return ( ... ); }; export default Login; 해결 방법 con..
[react] 리액트로 css, js로 도넛차트 구현 react 로 css, js 를 이용하여 도넛차트를 구현합니다. 아래의 포스트에서, 라이브러리 없이, css와 js 만으로 도넛차트를 구현 하였는데, 이것을 react 버전으로 만들어 보았습니다. https://goddino.tistory.com/191 [js] css, js 이용하여 도넛차트 만들기 (ft. 원형차트, conic-gradient) css와 자바스크립트로 도넛 차트를 구현합니다. 구현 내용 - 도넛 차트(도넛처럼 같은데가 파진 원형 차트)를 구현 - 라이브러리가 아닌, 자바스크립트와 css로 적용 - css: conic-gradient() - js: setInterva goddino.tistory.com import React, { useEffect, useRef } from 'react..
[react] 리액트 tailwind 다이얼로그(모달, 팝업) 구현 style 라이브러리, tailwind를 적용하여 모달창 띄우기를 구현합니다. 구현 화면 구현 내용 react, hooks 방식 스타일 라이브러리, tailwind로 스타일 적용 확인 클릭시 다이얼로그 출현 X 버튼, 확인 버튼 클릭시 다이얼로그 화면 사라짐 tailwind로 다이얼로그 구현 부모 컴포넌트 import React, { useState, useContext } from "react"; import ModalAlert from "./ModalAlert"; const Parent = () => { const [openAlert, setOpenAlert] = useState(false); const onModalAlert = () => { setOpenAlert(!openAlert); } ret..
[react] react 모달창(팝업창) 구현 리액트 hooks로 간단한 모달창을 구현합니다. 구현내용 cdn 설치, 스타일은 기본만 사용 리액트 hooks 방식 버튼 클릭 후, 모달창 팝업 기능 구현 화면 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 구글에서 react cdn, bable cdn을 검색하여 페이지에서 cdn 코드 복사후, 태그 사이에 삽입합니다. 리액트 hooks 모달창, 팝업창 띄우기 html css body { padding: 50px; } .openBtn { background-color: #F9B514; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .modal { position: fixed; top: 0; lef..
[react] 리액트 챗봇 스타일의 대화형 설문 조사 화면 구현 최근에 회사 프로젝트에서 리액트를 이용한 간단한 설문조사 앱을 만드는 중입니다. 여러 가지 시안 중에서 앱에서 많이 볼 수 있는 대화형의 설문 조사 형식이 있어, 마크업의 일부를 간단하게 공유합니다. 여기서는 앱 화면에 차례대로 설문 문제와 대답을 보여주는 일부만 공개를 하였고, 모든 문제를 마치면 결과지를 보여주는 화면은 없습니다. 구현 화면 react 대화형 설문조사 앱 구현 설정 npm: npm 패키지 설정(create react 폴더 설정) style css: tailwind 설치 중앙 상태 관리: context api 화면 구현 순서: 테스트 문제, 보기 5문항 -> 나의 대답 선택 -> 나의 대답 결과 -> 다음 문제 폴더 구조 리액트 대화형 설문 테스트 화면 formData.js - 설문 조..
[react] 리액트 삼항 연산자 조건부 스타일링(ft. tailwind, className) react에서 조건에 따른 스타일링하는 방법입니다. 스타일링은 tailwind라는 리액트 CSS 프레임 워크를 사용하여 디자인 합니다. 조건에 따라 className의 내용에 변화를 주어 다른 스타일을 주는 방법입니다. onClick 이벤트에서 클릭할때마다 state 값을 true, false를 적용시켜, className 내에 삼항 연산자를 사용합니다. 이로 toggle 기능과 같이 on/off switch의 개념으로 스위치를 켰다, 껐다 하는 효과를 나타낼 수 있습니다. 화면구현 모바일, 태블릿 또는 어플리케이션에서 자주 쓰이는 네비게이션(햄버거 메뉴바) 메뉴를 조건부 style 로 구현합니다. 조건부 스타일 예제 import React, { useState } from "react"; const I..
[react] react 상태관리 context API, useContext 사용법 react에서 context API가 필요한 이유와 사용하는 방법에 대하여 알아보겠습니다. Context API가 필요한 이유 기존에 최상위 컴포넌트에서 여러 레벨을 거쳐 props로 원하는 상태와 함수를 전달 하였지만, context API를 이용하면 단 한번에 원하는 값을 전달하여 사용할 수 있습니다. 복잡한 redux 또는 MobX와 같은 상태 관리 라이브러리를 사용할 필요 없이 context API를 통하여 전역 상태를 손쉽게 관리 할 수 있습니다. Context API가 사용법 createContext() 함수를 사용하여 Context 만들기 src 디렉터리에 contexts 디렉터리를 만든뒤 그 안에 새로 Store 파일을 만들거나, 최상위 컴포넌트에 바로 입력하여도 됩니다. context의 ..
[react] react-router-dom 설치, 라우팅하기 react-router-dom 설치하는 방법을 알아보겠습니다. routing ・ 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다. ・ 리액트 자체에 이 기능이 내장되어 있지 않기 때문에 라이브러리를 사용하여 이 작업을 진행합니다. ・ 리액트 라우팅 라이브러리는 react-router, reach-router, Next.js 등이 있고, 가장 많이 사용하는 것은 react-router입니다. react-router-dom ・ react의 내비게이션 라이브러리입니다. ・ React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동이 됩니다. react-router-dom 설치 React Router는 웹과 앱용이 있습니다..
[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 컴포..
반응형

티스토리툴바