세상 버그 다 겪는 월야

문제점 : Local 에서 (yarn start) 로 가동시켰을때의 css 와 , build 하여 서버에 올렸을때 css가 다르게 보임 예 : div, p , span 등의 element 들이 선언한 css 들은 잘 먹히는데 height 가 달라서 안맞게 보임. 원인 : reset.css 를 import 한게 주 원인이었음 해결방법 : reset.css 제거 및 react 는 css 를 reset 하는 방법이 따로 있어서 그대로 진행 style reset 세팅 방법, ( 아래 둘중 사용하는걸로 진행) npm i styled-reset yarn add styled-reset # App.js import React, { useState, useEffect } from 'react'; ... //styled-..

양 옆에 화살표가 있고 기본값으로 오늘 날짜의 데이터를 출력해주는 게시판이 있었는데 양옆의 화살표는 당연히 이전날, 다음날 데이터를 조회할수있다 해당 기능 리액트로 구현해보았다. React-icons react-icons 을 사용하여 화살표를 사용했고 , react-icons 는 아래 링크에서 자세한 설치 방법 및 사용방법을 알수있다. https://react-icons.github.io/react-icons/ 검색해서 사용하고 싶은 아이콘 뭐든지 import 하고 from "react-icons/아이콘명 앞두글자"; 하면되는데 간혹 안되는 아이콘들이 있는점 참고 useState 변수선언하는 부분, 첫번째가 사용할 변수 이름, 두번째는 set(대문자)~~ 예시 ) test 라 정했다면 setTest 기존..

리액트 프로젝트가 이미 생성되어있다는 가정하에 진행 concat 기존 배열 토대로 변경한 새 배열이 반환된다. 기존 배열은 바뀌지않음. map 약간 forEach 같은 느낌, 배열의 각각 요소에 대해서 조건에 따라 맞춰서 새로운 배열을 반환함 예 ) [1,2,3,4] 라는 배열 하나 있다치면, map( a => a * 10) ; 를 해줬을때 [10,20,30,40] 됨 filter 말그대로 필터링, 조건을 통과한 요소만 모아서 새로운 배열을 반환 IterationSample.js import React, { useState } from 'react'; const IterationSample = () => { //데이터 설정 const [names, setNames] = useState([ { id: 1,..

통상 리액트 자체서버 포트는 3000 이라 다른 포트 (ex. 백엔드) 에서 값 전달하려고하면 CORS 이슈가 발생한다. 그때 해결할수있는 방안으로는 package.json 추가 "proxy": "http://localhost:8080", createProxyMiddleware 이용 yarn add http-proxy-middleware 리액트 프로젝트 src 폴더 내에 setupProxy.js 생성 후 아래처럼 기재 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = (app) => { app.use(createProxyMiddleware('/api', { target: 'https://APIURL.co..

Prettier 코드 스타일 자동정리 (최상위 디렉토리 위치 파일생성 .prettierrc) { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } vscode 자동 불러오기 기능 최상위 디렉토리 위치 파일생성 jsconfig.json { "compilerOptions": { "target": "es6" } } # axios 사용시 yarn add axios # styled-components 사용시 yarn add styled-components