성연커밋 : )

Babel이란? JAVASCRIPT(자바스크립트)의 컴파일러 => javascript로 결과물을 만들어주는 컴파일러 노드 환경 구축 yarn init -y 바벨관련 패키지 설치 yarn add @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react @babel/core은 바벨을 이용하기 위한 필수 패키지입니다. @babel/cli는 명령줄에서 바벨을 사용하기위해 설치합니다. @babel/plugin 관련해서 arrow-functions, template-literals 플러그인을 설치했습니다. plugin들을 간편하게 묶음으로 제공하는 p..

SWR이란? SWR 은 stale-while-revalidate 을 의미하며, 캐시에서 먼저 데이터를 반환한 다음에 요청을 보내고 마지막으로 최신 데이터를 가져온다. 즉, 리액트 훅을 사용할 때 데이터를 가져오기 위한 라이브러리 설치 yarn add swr 시작 JSON 데이터를 사용하는 일반적인 RESTful API라면 먼저 네이티브 fetch의 단순한 래퍼인 fetcher 함수를 생성해주어야한다. import axios from 'axios'; const fetcher = (url: string) => axios.get(url).then((response) => response.data); export default fetcher; json데이터는 아래와 같다 const fetcher = (...ar..

JSX 문법 및 HTML 과의 차이 JSX는 JavaScript를 확장한 문법으로, 코드 내에서 UI관련 작업을 할 수 있다. 일반 HTMl태그 사용을 할 수 있으므로 가독성이 뛰어나다. HTML과의 차이는 - 형제노드를 사용할 수 없다. - 꼭 하나의 태그 사이에 태그들이 묶여있어야한다. - 카멜표기법을 작성한다. - Javascript표현식을 사용하기 위해서 {} 내부에서 사용해야한다. - 주석 방법이 조금 다르다 클래스 vs 함수 컴포넌트 클래스 컴포넌트 클래스 컴포넌트에서는 render()메서드가 꼭 있어야한다. render() 메서드에서 렌더링하고싶은 JSX를 반환시키면 된다. props나 state를 조회시 this.props나 this.state인 오브젝트 형태로 조회해야한다. 데이터가 변경..

### - react를 한단어로 정리하면? > 컴포넌트들로 이루어진, 뷰만 신경쓰는 라이브러리 ### - React의 특성 2가지? > 독립적이다 > 구현한 함수는 재사용이 가능하다. ### - DOM? Virtual DOM? DOM > 문서 객체 모델(Document Object Model)은 HTML, XML문서의 프로그래밍 interface DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도와주는 것. Virtual DOM > 가상 돔으로, 업데이트 되어야 하는 부분을 계산하여, 정말 필요한 부분만 업데이트가 된다. 실질적으로 보여지는 데이터만 변경될 뿐, 돔 트리에 영향을 주지 않는다. ..

React Router 버전이 v5에서 v6으로 바뀌면서 몇가지 바뀐 점들이 있다. import React from 'react'; import { Route, Routes } from 'react-router-dom'; import PostListPage from './pages/PostListPage'; import LoginPage from './pages/LoginPage'; import RegistePage from './pages/RegistePage'; import WritePage from './pages/WritePage'; import PostPage from './pages/PostPage'; const App = () => { return ( ); }; export default A..

category is not a registered scale 관련 오류가 떴다. 구글링을 하면서 찾아보았지만, 해결이 되지 않았다. javascript에서 사용하는 방법과 다르게, chart에 사용할 모듈들을 import해주어야한다. chart.js문서를 보면 무엇을 import해야하는지 다 나온다고한다. 하지만 여러 블로그에서는 import해주지 않았다. 이 문제를 한번, 해결해주기 위해 모든것들을 Improt 해주어야 했으나, 한번에 import하는 방법이 있어 아래 코드를 넣어주고 실행해보니 chart가 제대로 나오는 것을 확인할 수 있었다. import {Chart, registerables} from 'chart.js'; Chart.register(...registerables); 참고 자료 ..

KOE006에러가 뜰 경우, Redirect URI 문제이다. kakao developer내에 입력해준 redirect uri와 코드 상의 redirect uri가 맞지 않아 뜨는 에러. redirect uri를 모를때? Chrome extension for Kakao login check 확장 프로그램을 설치해주면 redirect uri가 무엇인지 나온다. 이 때, kakaojs가 나왔는데 index.html에 Kakao.init ("~~")안에 써준 javascript키가 제대로 입력이 되지 않아 발생했던 문제이다.

- Tabsize 리액트는 탭사이즈가 4가 아닌 2이다. (노트북 바꾸면서 탭 사이즈 기본이 4로 되어있던것을 수정안함, 수정을 하기 싫으면 .prettier을 설정해준다) - img 이미지 경로파일을 컴포넌트 내부에 작성하였지만, 이런 경로로 하는것은 아님. public내에 있는 이미지로 해결 현재 이미지갯수가 작기때문에! - css App.js에서 모든 컴포넌트를 가져오기 때문에, 컴포넌트 각각에 css를 import하지 않고, app.js에서 한번만 import해주어도 된다.

리액트 index.js를 보면, import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVit..

버튼을 클릭하여, 주소가 전환되면서 컴포넌트가 바뀌는 모습을 나타내고 싶었다. https://react.vlpt.us/basic/07-useState.html →setState 값전환 https://velog.io/@chloeelog/React-버튼을-이용해-컴포넌트-전환하기 →onClick 컴포넌트전환 (이게 더 맞을듯?) —> 해보니까.. 컴포넌트 전환이라 링크가 변하지 않음.. 아닌듯,,,!? 😂 https://ddeck.tistory.com/23 → 이게 더 맞는듯!!! 라우터로 전환해야함..! →링크가 변해야하니까•••!!!! → 이것은 리덕스를 사용하는데...??? 위는 버튼을 클릭시 컴포넌트가 전환되는 모습을 개발하면서, 참고했던 자료들이다. 위와 같이 해결했을 때, 주소가 바뀌지 않았던 문..