현재 사용하고 있는 웹 프론트 기술에 대해서 정리가 필요할 듯하여 포스팅해본다. 개발자로 취업하고 제일 먼저 React를 개발했지만 사실 누군가 React가 뭐냐고 물어본다면 설명하기가 어렵다. 내가 쓰는 기술을 제대로 설명도 못한다니....😥 기술 하나하나에 대해 심도깊은 이해보다는 전반적으로 살펴보기 위한 것이다. 부족한 내용이 있다면 앞으로 계속 채워나갈 예정이다. 1. SPA(Single Page Application) 전통적인 웹 전통적인 웹에서 페이지 이동을 하면 서버에 요청을 하면 서버가 HTML 파일을 만들어서 클라이언트에 보내주고, 브라우저가 HTML을 반영해서 보여주기 전 새로고침이 일어난다. 이를 정적 웹 페이지라고 하는데 이는 '클라이언트에게 제공하기 위해 미리 작성되어 서비스되는 ..

오늘은 컬럼이 바뀌는 동적 테이블을 만들어야한다. 서버에서 받아오는 JSON의 형태는 다음과 같다. 여기서 바뀌는 것은 cols의 개수와 cols의 안에 있는 요소들의 개수이다. 즉 column의 개수와 명칭이 유동적으로 바뀌게 되는 것이다. name이 column의 명칭이 되고 value값이 해당 column의 값으로 들어가야 한다. [ { "cols": [ { "name": "name1", "value": "value1" }, { "name": "name2", "value": "value2" }, { "name": "name3", "value": "value3" } ] }, { "cols": [ { "name": "name1", "value": "value4" }, { "name": "name2", ..

간단한 그래프를 만들 것이다. 1. 터미널에 다음을 입력해 라이브러리를 받는다. npm install @ant-design/charts 2. column기준으로 만들기 위해 을 사용했다. 컴포넌트는 다음과 같이 작성하면 된다. import React, {Component} from "react"; import {Column} from '@ant-design/charts'; class Graph extends Component { constructor(props) { super(props); this.data = [ { type: 'test1', value: 38, }, { type: 'test2', value: 52, }, { type: 'test3', value: 61, }, { type: 'test4..

리액트 프로젝트를 내려받고 이제 yarn 을 설치하려는데 에러가 뜬다. info There appears to be trouble with your network connection. Retrying... 처음도 아니고 거의 매번 일어나는 문제라 아예 정리해두고자 한다. 발생 원인은 1. yarn config proxy 문제 2. 네트워크가 느리거나 해당 패키지 파일이 너무 큰 경우 3. yarn 캐시 문제(+버전문제) 이 정도로 정리 한다는거 같다. 1. yarn config proxy 문제 이 경우에는 아래의 코드를 터미널에 입력해주면 된다. yarn config delete proxy yarn config delete https-proxy 2. 네트워크가 느리거나 해당 패키지 파일이 너무 큰 경우 ..

yarn add module 후 Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation. 에러가 떴다. 당황했지만 당황하지 않은 척하고 해결해보기... [해결과정] 1. package.json에 있는 @babel/plugin-transform-react-jsx 을 지움 2. node_modules파일을 삭제 3. yarn재설치 rootReducer에 reducer추가는 되었으나, rootSagas에 sagas를 추가하자 동일한 오류가 나왔다ㅠㅠ 범인은 너였구나😑 알고봤더니 내가 만든 module 자체의 문제였다.💦 어쨌든 저 ..