티스토리

떽떽대는 개발공부

검색하기

블로그 홈

떽떽대는 개발공부

ddeck.tistory.com/m

떽이 님의 블로그입니다.

구독자: 10

방명록 방문하기

주요 글 목록

[React] date-fns 를 이용하여 날짜 형식 변경하기 - 떽떽대는 개발공부 오늘은 date-fns 라이브러리를 이용하여 날짜 형식을 변경을 해보자. 먼저 필요한 라이브러리 설치를 한다. // 버전에 따라 string 사용이 안되는 경우도 있으니 버전 확인 후 install npm i date-fns@1.30.1 npm i -D babel-plugin-date-fns@0.2.1 craco 에서 date-fns 를 설정 해준다. craco.config.js module.exports = function() { return { babel: { plugins: ['date-fns'], } } } dateUtils 라는 파일을 하나 생성하고 작성한다. src/utils/dateUtils.ts import { format } from 'date-fns' export const getFor.. 공감수 0 댓글수 0 2021. 4. 21.
[React] redux 를 이용하여 popup 창 구현하기 - 떽떽대는 개발공부 2021.01.11 - [React] - [React] ReactDOM 을 사용하여 팝업창 띄우기 - 떽떽대는 개발공부 [React] ReactDOM 을 사용하여 팝업창 띄우기 - 떽떽대는 개발공부 오늘은 react-dom 을 사용하여 팝업창 생성을 해보도록 하자. react 프로젝트가 생성될 때 하나의 돔이 생성되고 그 위에 view 가 그려진다. 따라서 팝업창을 생성하기 위해선 이미 펼져쳐 있는 dom 위 ddeck.tistory.com redux 를 이용하여 react 에서 popup 창 구현하는 포스팅이다. (typescript 사용) redux 를 이용하기 때문에 action, reducer 를 구현해야 한다. src/modules/common/layer.ts import { Action, cr.. 공감수 1 댓글수 0 2021. 4. 15.
[React] react-router-dom, loadable, history 를 이용한 페이지 이동 - 떽떽대는 개발공부 오늘은 react-typescript 에서 react-router-dom, loadable, history 를 이용하여 페이지 이동을 구현해보자. 먼저 필요한 모듈을 설치한다. npm i -D @types/loadable__component @types/react-router-dom history npm i @loadable/component react-router-dom 페이지 관리를 위하여 historyUtils.ts 파일을 작성한다. src/utils/historyUtils.ts import { createBrowserHistory } from 'history' export enum HISTORY_ACTION_TYPE { POP = 'POP', PUSH = 'PUSH', REPLACE = 'REPL.. 공감수 0 댓글수 0 2021. 4. 2.
[React] react 에서 다국어 처리 적용하기(4) - 떽떽대는 개발공부 2021.03.04 - [React] - [React] react 에서 다국어 처리 적용하기(3) - 떽떽대는 개발공부 [React] react 에서 다국어 처리 적용하기(3) - 떽떽대는 개발공부 2021/03/02 - [React] - [React] react 에서 다국어 처리 적용하기(2) - 떽떽대는 개발공부 [React] react 에서 다국어 처리 적용하기(2) - 떽떽대는 개발공부 2021/02/19 - [React] - [React] react 에서 다국어.. ddeck.tistory.com 위와 같이 react 에서 다국어 처리 적용하는 법을 포스팅 했었다. 오늘은 typescript 에서 다국어처리를 해보도록 하자. typescript 를 공부하며 많은 부분이 모듈화 되어 폴더 및 디렉.. 공감수 0 댓글수 0 2021. 3. 31.
[React] html 파일에서 css 파일 연결하기 - 떽떽대는 개발공부 react 에서 css 파일을 추가하는 것은 아래의 글에서 다룬 적이 있다. 2021.01.15 - [React] - [React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부 [React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부 2021/01/14 - [React] - [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React.. ddeck.tistory.com 이번 글에서는 index.html 파일에서 css 를 적용하도록 하겠다. 간단하게 html 에서 css 를 연결해준 방식과 동일하다. .. 공감수 0 댓글수 0 2021. 3. 24.
[React / typescript] typescript 예제 - 떽떽대는 개발공부 2021.03.15 - [React] - [React] typescript 시작하기 - 떽떽대는 개발공부 [React] typescript 시작하기 - 떽떽대는 개발공부 지금까지 포스팅은 javascript 로 react 프로젝트를 구성하는 것이었다. 오늘은 typescrypt 를 이용하여 react 프로젝트를 시작하는 법을 포스팅 해보겠다. 먼저 디렉토리를 하나 생성한다. mkdir study_typesc ddeck.tistory.com 이전 글에서 typescript 로 react 프로젝트를 만들어 보았다. 이번 글에선 typescript 를 이용하여 예제를 한번 만들어 보았다. 아래의 블로그에서 예제를 참조하였다. bkjeon1614.tistory.com/422 먼저 App.tsx 컴포넌트를 아래와.. 공감수 1 댓글수 0 2021. 3. 17.
[React] typescript 시작하기 - 떽떽대는 개발공부 지금까지 포스팅은 javascript 로 react 프로젝트를 구성하는 것이었다. 오늘은 typescrypt 를 이용하여 react 프로젝트를 시작하는 법을 포스팅 해보겠다. 먼저 디렉토리를 하나 생성한다. mkdir study_typescript cd study_typescript npm init -y npm install --save-dev webpack webpack-dev-server webpack-cli@3 npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react babel-preset-es2015 @babel/preset-typescript npm install --save react react-d.. 공감수 0 댓글수 0 2021. 3. 15.
[React] redux-saga 이용하기 - 떽떽대는 개발공부 오늘은 redux-saga 를 포스팅 해보도록 하겠다. 먼저, 폴더 구조, 사용한 dependencies 와 webpack 설정은 아래와 같다. configs/webpack.config.js const path = require("path"); const HtmlWebPackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const webpack = require('webpack'); const PROJECT_ROOT = path.resolve(__dirname, '../'); const APP_ENTRY = path.join(PROJECT_ROOT, 'src');.. 공감수 0 댓글수 0 2021. 3. 12.
[React] cross-env 를 이용하여 환경변수 관리하기(2) - 떽떽대는 개발공부 2021.03.10 - [React] - [React] cross-env 를 이용하여 환경변수 관리하기(1) - 떽떽대는 개발공부 [React] cross-env 를 이용하여 환경변수 관리하기(1) - 떽떽대는 개발공부 오늘은 cross-env 를 이용하여 환경변수를 용이하게 관리할 수 있도록 해보자. npm install cross-env cross-env 를 install 하고 package.json 의 scripts 아래와 같이 start, debug 부분 수정 해주었다. package.. ddeck.tistory.com 이전 글에서 cross-env 를 이용하여 환경변수 관리하는 법을 포스팅 하였다. 개발 시 debug 하는 방법이 매우 중요한 사항인데, 이번 프로젝트에서는 환경에 따른 제약이 매.. 공감수 0 댓글수 0 2021. 3. 11.
[React] cross-env 를 이용하여 환경변수 관리하기(1) - 떽떽대는 개발공부 오늘은 cross-env 를 이용하여 환경변수를 용이하게 관리할 수 있도록 해보자. npm install cross-env cross-env 를 install 하고 package.json 의 scripts 아래와 같이 start, debug 부분 수정 해주었다. package.json ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "cross-env PHASE=local webpack-dev-server --config ./configs/webpack.config.js --mode development", "debug": "cross-env PHASE=debug webpa.. 공감수 0 댓글수 0 2021. 3. 10.
[React] linebreak-style 오류 해결 - 떽떽대는 개발공부 프로젝트를 하던 중 아래와 같은 오류가 발생하였다. Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style 구글링 해보니 개행문자 관련 경고로 .eslintrc.js 파일에서 설정을 추가하면 해결 된다고 하였다. .eslintrc.js module.exports = { .... rules: { 'linebreak-style': 0, .... } } 그런데 이미 프로젝트 막바지 였어서 설정을 건들기가 조심스러운 부분이 있었다. 더 찾아보니 vscode 의 아랫부분에 CRLF 로 되어있는 부분을 LF 로 바꾸면 된다고 하였다. CRLF 부분을 클릭하면 LF 로 변경할 수 있는 창이 뜨고, LF 클릭하면 설정이 변경된다. 문제는 이미 말했든 프로젝트 .. 공감수 3 댓글수 0 2021. 3. 5.
[React] react 에서 다국어 처리 적용하기(3) - 떽떽대는 개발공부 2021/03/02 - [React] - [React] react 에서 다국어 처리 적용하기(2) - 떽떽대는 개발공부 [React] react 에서 다국어 처리 적용하기(2) - 떽떽대는 개발공부 2021/02/19 - [React] - [React] react 에서 다국어 처리 적용하기 - 떽떽대는 개발공부 [React] react 에서 다국어 처리 적용하기 - 떽떽대는 개발공부 react 에서 같은 페이지에서 다국어를 적용하기 위해 사용 ddeck.tistory.com 이전 글에서 현재 OS 에 적용된 언어로 다국어 처리를 적용했다. 이번 글에서는 다국어 처리 중 문장 안에 추가해야 할 사항을 편리하게 관리할 수 있도록 해보도록 할 것이다. 먼저 I18n.js 파일을 작성한다. src/i18n/I1.. 공감수 0 댓글수 0 2021. 3. 4.
[React] react 에서 vConsole 사용하기(console) - 떽떽대는 개발공부 만약 react 로 모바일 환경을 코딩한다면 console. 창을 볼 수 없어 개발에 어려움이 생길 것이다. 모바일환경 개발 시 console 창을 구현할 수 있도록 vConsole 이라는 라이브러리가 있으니 활용 해보도록 하겠다. // 라이브러리 설치 npm install vconsole 그리고 리액트의 가장 첫 부분인 index.js 에서 render 하기 전에 불러준다. src/index.js import React from "react"; import ReactDOM from "react-dom"; import App from "@components/App"; window.onload = async () => { const { default: VConsole } = await import('vco.. 공감수 0 댓글수 0 2021. 3. 3.
[React] react 에서 다국어 처리 적용하기(2) - 떽떽대는 개발공부 2021/02/19 - [React] - [React] react 에서 다국어 처리 적용하기 - 떽떽대는 개발공부 [React] react 에서 다국어 처리 적용하기 - 떽떽대는 개발공부 react 에서 같은 페이지에서 다국어를 적용하기 위해 사용하는 라이브러리가 있다. react-i18next 를 사용하여 다국어 처리를 해보자. 먼저 i18next 와 react-i18next 를 설치한다. // install npm install i18nex.. ddeck.tistory.com 이전 글에서 i18next 를 이용한 다국어처리를 포스팅 하였다. 이번엔 사용하는 os 의 language 에 따라 다국어처리를 자동으로 적용 해보자. 폴더 구조는 위와 같다. 먼저 src 디렉토리 아래에 i18n 폴더를 생성하.. 공감수 0 댓글수 0 2021. 3. 2.
[React] 통화 화폐 단위 표시하기 - 떽떽대는 개발공부 페이지를 구현하다 보면 원화, 달러 표기 등을 할 때 단위 별 쉼표 표기가 필요할 때가 있다. 간단하게 아래의 코드를 사용하면 된다. Number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") 이를 이용한 예제를 간단히 만들어 보았다. import React from 'react'; const Test = () => { const number = 123456789 return( {number} 원 ) } export default Test; 위와 같은 코드를 브라우저에 나타내 보면 아래와 같다. 이 코드를 천 단위로 쉼표를 찍어 표시하면 아래와 같다. import React from 'react'; const Test = () => { const number = .. 공감수 1 댓글수 0 2021. 2. 25.
[React] crypto 를 이용하여 암호화 하기 - 떽떽대는 개발공부 웹페이지 구현 중 회원가입 부분을 코딩하던 중 암호화 하는 부분이 있어 포스팅 한다. 암호화는 crypto 를 이용하여 단방향 암호화를 해줄 것이다. 클라이언트에서 암호화 해서 서버로 전달하는 방법을 찾았지만 아직까지 소득이 없어.. 서버 쪽에서 암호화 해서 db 에 저장하는 방식으로 진행할 것이다. 아래와 같이 서버단에서 전달받은 parameter 에 암호화를 해주고 그 안에서 db 전달 쿼리를 작성하였다. const express = require('express'); const router = express(); const db = require('../config/db'); const crypto = require('crypto'); const util = require('util'); route.. 공감수 0 댓글수 0 2021. 2. 24.
[React] react 에서 핸드폰번호, 비밀번호, 이메일 유효성 검사하기 - 떽떽대는 개발공부 웹페이지를 구현할 때 핸드폰번호, 비밀번호, 이메일 양식에 따라 유효성 검사를 해야할 때가 있다. react 에서 유효성 검사하기는 아래와 같다. import React from 'react'; const Test = () => { // 핸드폰번호 유효성 검사 const checkPhonenumber = (e) => { // '-' 입력 시 var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/ // 숫자만 입력시 var regExp2 = /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/ // 형식에 맞는 경우 true 리턴 console.log('핸드폰번호 유효성 검사 :: ', regExp.test(e.target.value)) } //.. 공감수 9 댓글수 0 2021. 2. 23.
[React] react 에서 우편번호 찾기 api 사용하기 - 떽떽대는 개발공부 오늘은 react 에서 오픈 api 를 사용하여 우편번호 찾기 기능을 구현 해볼 것이다. 다음에서 제공하는 api 를 사용할 것이다. react-daum-postcode 우편번호 검색이라고 되어있는 버튼을 클릭하면 우편번호 검색 창이 팝업 형식으로 나타나게 구현할 계획이다. 아래와 같이 버튼과 팝업창의 기준이 될 공간을 하나 만들어 준다. src/Test.js import React, { useState } from 'react'; import PopupDom from './PopupDom'; import PopupPostCode from './PopupPostCode'; const Test = () => { // 팝업창 상태 관리 const [isPopupOpen, setIsPopupOpen] = us.. 공감수 1 댓글수 1 2021. 2. 22.
[React] react 에서 다국어 처리 적용하기(1) - 떽떽대는 개발공부 react 에서 같은 페이지에서 다국어를 적용하기 위해 사용하는 라이브러리가 있다. react-i18next 를 사용하여 다국어 처리를 해보자. 먼저 i18next 와 react-i18next 를 설치한다. // install npm install i18next react-i18next src 폴더 아래에 lang 디렉토리를 하나 생성하고 i18njs 파일을 작성한다. src/lang/i18n.js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import langEn from '@lang/lang.en'; import langKo from '@lang/lang.ko'; const resource = { en: .. 공감수 4 댓글수 0 2021. 2. 19.
[ionic] ionic 을 사용하여 프로젝트 시작하기 - 떽떽대는 개발공부 요즘 뭘하면 좋을 지 이것 저것 깨작대다가 어플을 한번 만들어 볼까 한다. 모바일 쪽은 해본 적 없지만 도전 해보자. 같이 일하는 고마우신 분께서 ionic framework 라는 프레임워크를 알려 주셨다. 일반적으로 어플을 개발할 때에는 안드로이드 어플과 ios 어플이 달라서 보통은 안드로이드 어플을 개발한다고 하는데 이 프레임워크는 하나의 소스만 있어도 안드로이드, ios 모두 배포가 가능하다고 하였다. angular 와 react 를 사용할 수 있으며, 나는 현재 react 를 공부 중이니 node js 를 설치하고 vs code 를 오픈한다. (vs code 에서 사용 가능하다) 아이오닉은 npm 으로 설치할 수 있다. npm install -g ionic 그 다음은 아이오닉 앱을 생성하는 것이다.. 공감수 0 댓글수 0 2021. 2. 18.
[html/css] 반응형 웹 적용하기 - 떽떽대는 개발공부 혼자 웹페이지를 만들다가 반응형 웹에 대해 알게 되어 포스팅한다. 반응형 웹은 모바일 호나경이 시작되면서 장치(device)가 다양해지며 해상도의 크기 및 비율이 제각각 다른 경우가 생기며 발생했는데, 이전에는 동일한 비율(1024x768, 1280x960)에만 대응하면 됐지만, 지금은 비율이 매우 다양해지고 해상도가 높아져서 페이지 설계 시 고려할 사항이 많아졌다. 먼저, 모바일 브라우저에서 시도해야 할 부분은 viewport 이다. 이 부분은 html 에서 meta 태그를 활용하여 viewport 의 크기와 초기 줌 레벨 등을 기기에 맞게 적용되도록 선언하는 것이다. /* header 태그 안에서 사용 */ 위의 부분은 vs code 를 이용하여 html 을 생성하면 자동으로 적용된다. 만약 이 부분.. 공감수 0 댓글수 0 2021. 2. 17.
[github] .gitignore 를 이용하여 백업파일 무시하기 - 떽떽대는 개발공부 프로젝트를 github 에 업로드 하던 도중 용량이 많은 파일은(ex. react 에서의 node_modules 폴더) 빼고 푸쉬 하게 된다. 그런데 푸쉬 할때마다 이 많은 용량을 차지하는 폴더를 삭제 했다가 푸쉬 후 다시 install 하기엔 비효율적이다. 그래서 git에서 프로젝트를 생성할 때 .gitignore 를 생성하여 백업하지 않을 파일을 지정 해줄 수 있다. 나는 이미 repository 프로젝트가 추가 되어 있었기 때문에 이미 생성된 프로젝트의 최상위 디렉토리에 .gitignore 파일을 생성하고 아래와 같이 작성 해준다. // .gitignore node_modules 위와 같이 작성하고 동일하게 push 해주게 되면 많은 용량을 차지하던 node_modules 폴더는 백업되지 않고 나머.. 공감수 0 댓글수 0 2021. 2. 16.
[React] react 에서 이미지 적용하기 - 떽떽대는 개발공부 오늘은 react 사용 시 이미지를 적용하는 법에 대해 공부 했다. webpack 공부할 때 왜 공부를 안하고 넘어갔는지.. 후회 했다ㅠ 먼저, file-loader 와 url-loader 를 install 해준다. npm i -D file-loader url-loader 그리고 webpack 에서 output 부분에 publicPath 를 넣어 주어야 한다. output: { filename: "bundle.js", path: path.resolve(__dirname + "/build"), publicPath: '/' }, 이후 webpack : module - roules 부분에 아래와 같이 추가한다. { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-load.. 공감수 0 댓글수 0 2021. 2. 15.
[React] react 에서 로그인 페이지 구현하기(3) - 떽떽대는 개발공부 2021/02/10 - [React] - [React] react 에서 로그인 페이지 구현하기(2) - 떽떽대는 개발공부 [React] react 에서 로그인 페이지 구현하기(2) - 떽떽대는 개발공부 2021/02/09 - [React] - [React] react 에서 로그인 페이지 구현하기 (1) - 떽떽대는 개발공부 [React] react 에서 로그인 페이지 구현하기 (1) - 떽떽대는 개발공부 오늘은 리액트를 이용하여 로그인 페이지를 ddeck.tistory.com 이전 글에서 input 란에 입력한 id 와 pw 를 MySQL 에 저장되어 있는 데이터와 비교하여 id 가 존재하는 지, 존재하다면 비밀번호는 일치하는 지 확인하여 결과값을 클라이언트로 전달받아 콘솔에 나타내는 것까지 해 보았다... 공감수 4 댓글수 0 2021. 2. 11.
[React] react 에서 로그인 페이지 구현하기(2) - 떽떽대는 개발공부 2021/02/09 - [React] - [React] react 에서 로그인 페이지 구현하기 (1) - 떽떽대는 개발공부 [React] react 에서 로그인 페이지 구현하기 (1) - 떽떽대는 개발공부 오늘은 리액트를 이용하여 로그인 페이지를 구현 해보도록 하겠다. 먼저, 이전 글에서 공부했던 대로 webpack 을 이용하여 react app 을 생성 해주었다. React webpack 을 이용하여 개발 환경 구성하기 - d ddeck.tistory.com 이전 글에서 react 에서 로그인 페이지 구현하기1 을 포스팅 하였다. 이어서 구현 해보자. 먼저 MySQL 에서의 db 는 아래와 같다. 이제 Login.js 에서 onClickLogin 함수에서 axios 를 이용해 입력된 id 와 pw 를 .. 공감수 3 댓글수 3 2021. 2. 10.
[React] react 에서 로그인 페이지 구현하기 (1) - 떽떽대는 개발공부 오늘은 리액트를 이용하여 로그인 페이지를 구현 해보도록 하겠다. 먼저, 이전 글에서 공부했던 대로 webpack 을 이용하여 react app 을 생성 해주었다. React webpack 을 이용하여 개발 환경 구성하기 - ddeck.tistory.com/16 [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 리액트 프로젝트 생성 및 실행 방법 프로젝트 생성 프로젝트 생성 ddeck.tistory.com 파일 구조는 아래와 같다. 아래의 모듈 3개를 install 하였다. npm install axios .. 공감수 5 댓글수 2 2021. 2. 9.
[github] github 와 프로젝트 연동하기 - 떽떽대는 개발공부 오늘부턴 react 로 공부하는 프로젝트를 github 에 연동하여 관리 해보려고 한다. 먼저, github 에 로그인 하여 Repositories 페이지로 이동한다. 초록색 New 버튼을 눌러 새로운 프로젝트를 생성한다. Repository name 에 프로젝트 명을 넣어준다. 이것은 연습용 프로젝트 이기 때문에 나는 Private 로 체크했다. 프로젝트명은 study1_reactBoard 로 지정 해주었다. 그리고 프로젝트를 관리할 branch 를 나누어 줄 것이다. 프로젝트 페이지에 들어가서 main 이라고 기본 설정된 branch 를 클릭하고 Find or create a branch 란에 지정할 branch 명을 입력하여 branch 를 생성해준다. 나는 study 라고 기재 할것이다. stud.. 공감수 0 댓글수 0 2021. 2. 8.
[React] MySQL, redux 를 이용하여 게시판 만들기 - 떽떽대는 개발공부 오늘은 지금까지 react 에서 공부했던 redux, mysql 를 이용하여 이전 게시물에서 구현할 것이다. 이전에 redux 를 이용하여 구현했던 예제 그대로 사용할 것이다. 2021/01/31 - [React] - [React] DB에서 특정 데이터 받아오기 - 떽떽대는 개발공부 [React] DB에서 특정 데이터 받아오기 - 떽떽대는 개발공부 2021/01/30 - [React] - [React] DB에서 받아온 데이터 리스트 만들기 - 떽떽대는 개발공부 [React] DB에서 받아온 데이터 리스트 만들기 - 떽떽대는 개발공부 2021/01/29 - [React] - [React/MySQL] react 에서 M.. ddeck.tistory.com 이전 글에서 MySQL 을 이용하여 글 목록 가져오는.. 공감수 0 댓글수 3 2021. 2. 1.
[React] DB에서 특정 데이터 받아오기 - 떽떽대는 개발공부 2021/01/30 - [React] - [React] DB에서 받아온 데이터 리스트 만들기 - 떽떽대는 개발공부 [React] DB에서 받아온 데이터 리스트 만들기 - 떽떽대는 개발공부 2021/01/29 - [React] - [React/MySQL] react 에서 MySQL 사용하기 - 떽떽대는 개발공부 [React/MySQL] react 에서 MySQL 사용하기 - 떽떽대는 개발공부 react 에서 db 연결을 하기 위해 mysql 을 다운 받았다. np.. ddeck.tistory.com 이전 글에서 DB에서 board 테이블에서 데이터를 받아오고, 해당 글 클릭 시 페이지 이동하고, idx 번호까지 받아오는 것을 포스팅했다. 이번 글에서는 전달받은 idx 번호로 특정 글만 DB에서 받아올 수 .. 공감수 0 댓글수 0 2021. 1. 31.
[React] DB에서 받아온 데이터 리스트 만들기 - 떽떽대는 개발공부 2021/01/29 - [React] - [React/MySQL] react 에서 MySQL 사용하기 - 떽떽대는 개발공부 [React/MySQL] react 에서 MySQL 사용하기 - 떽떽대는 개발공부 react 에서 db 연결을 하기 위해 mysql 을 다운 받았다. npm i mysql 그리고 server 디렉토리에 config 디렉토리를 추가하고 db.js를 생성해준다. server/config/db.js const mysql = require('mysql'); const db.. ddeck.tistory.com 이전 글에서는 react 에서 MySQL 에서 데이터를 받아와서 콘솔에 나타내는 것까지 구현 해보았다. 오늘은 이 데이터를 리액트 render 에 뿌리기 위해 배열로 선언하고 그것을 게.. 공감수 0 댓글수 0 2021. 1. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.