본문 바로가기

분류 전체보기370

[VSCode] Delete `␍` eslint 알림 사라지게 설정

문제: 코드 줄 끝에 eslint 알림이 표시됨. eslint라 정상 실행은 됨. 에러 메시지: Delete `␍`eslint(prettier/prettier) 원인 : End Line Sequence가 CRLF여서 그럼. 해결 방법 ./.eslintrc.js 설정파일을 생성 .eslintrc.js 설정파일에 다음을 작성 module.exports = { // ... rules: { // ... 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], }, }; 2021. 12. 1.

[React-Redux] typescript로 세팅하는 법

개요 React로 컴포넌트를 분리해서 사용하게 되면서 상태 관리의 필요성을 느꼈습니다. React-Redux 중앙 상태 관리 라이브러리이다. React-Redux-Tookit? state와 reducer를 파일 단위로 분리하고, 이름을 줘서, store에서 사용할 state와 reducer를 기능별 또는 정의별로 분리해서 관리할 수 있게 해준다. 자동으로 store에 분리된 store들을 하나로 세팅해 준다. 튜토리얼 1. redux tookit와 react redux 설치 npm i @reduxjs/toolkit react-redux 2. Redux Store 만들기 configureStore를 사용해서 Redux store를 만듭니다. configureStore는 reducer 함수를 받습니다. co.. 2021. 11. 28.

깃허브 페이지 creat-react-app 배포하기

create-react-app을 깃허브 페이지에 배포하기 패키지 설치 npm i gh-pages package.json { "homepage": '깃허브 페이지 주소', // ... "script": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } } npm run deploy 깃허브 세팅 페이지 설정 2021. 11. 28.

깃허브 페이지 creat-react-app 배포하기

create-react-app을 깃허브 페이지에 배포하기 패키지 설치 npm i gh-pages package.json { "homepage": '깃허브 페이지 주소', // ... "script": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } } npm run deploy 2021. 11. 27.

[Redux] Redux란?

자바스크립트 어플리케이션을 위한 상태관리 라이브러리 - 어플리케이션의 상태를 저장, 관리를 위해서 사용함. - components에서 dispatch를 사용해서 action을 정의한다. action에서 store 상태 값을 변경하기 위해서 reducer를 호출해서 상태를 변경한다. - subscribe를 통해서 store의 값이 갱신될 때마다의 로직을 작성할 수 있다. - react-redux를 통해서 리액트에 사용한다. Redux를 사용하는 이유 - 최상위 루트 컴포넌트에서 모든 상태를 가지고 있고, props로 계속 컴포넌트간에 데이터 전달이 빈번하게 일어난다. - 계속해서 변경되는 상당한 양의 데이터가 있다. - 상태를 위한 단 하나의 근원만 필요하다. Redux 함수의 API 특징 - action.. 2021. 11. 26.

[chart.js in vue.js] data label 없애는 설정 방법

개요 chart.js + vue.js로 개발하고 있습니다. chart를 생성했을 때, 아래 그림처럼 차트 포인터 위에 데이터 라벨이 표시되고 있었습니다. 제품의 요구사항이 아니였어서 없애야 했습니다. chart.js line chart 어노테이션이 표시되는 설정 없애는 방법 plugins.datalabels.display: false 👇 사용 코드 makeChartDataForm: (aData, aIndex) => { const ctx = document.getElementById(`chart-${aIndex}`).getContext('2d'); gChart = new Chart(ctx, { type: 'line', data: aData, options: { responsive: true, maintai.. 2021. 11. 11.

[chartjs] tooltip 설정 방법

개요 안녕하세요. 일단, 제품 쪽 차트 작업하면서 문제가 있었습니다. 저희 제품은 vue.js 2.x + javascript + chartjs 라이브러리를 사용하고 있습니다. 아래의 그림이 문제 현상입니다. 문제 문제는 차트에 마우스를 올려대면, tooltip이 등장하는데, x축 선상에 있는 point가 아니라, 각 차트의 첫 번째 인덱스를 point하고 있습니다. 저희 제품 요구사항은 x축 선상에 있는 차트의 데이터만 tooltip에 표시하는 것이었습니다. 원인 파악 코드에서 chartjs tooltip 설정을 확인했습니다. 다음과 같았습니다. options: { type: 'line', data: //... // ... plugins: { tootip: { enabled: true, // true |.. 2021. 11. 8.

tailwindcss 사용법 알아보기

css framework입니다. html 요소에 간단한 word로 요소에 스타일을 줄 수 있게해 줍니다. 깡 css로만 프로젝트 하나를 완성시켜 봐서 알지만 추천할 만한 방법이 아닙니다. UI-component나 tailwindcss같은 css framework를 사용하는 것을 추천합니다. 생산성과 유지보수를 위해서! tailwindcss의 사용법입니다. 설치 tailwindcss 설치 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 CRACO(Create React App Configuration Override) babel, postcss, lint 커스텀 설정을 craco.config.js파일.. 2021. 11. 6.

node 버전 업그레이드 하는 방법

로컬 환경에서 npm run build 할 때는 잘 되었는데, 테스트를 위한 서버에서 npm run build를 했을 때 npm i를 하는 과정에서 설치 에러가 계속 발생함. node -v로 두 환경의 node 버전을 확인한 결과. 로컬 환경 14.15.4 테스트 서버 환경 8.10.0 테스트 서버 환경에 node 버전을 14.15.4로 변경해 보기로 했습니다. 1. npm 캐시 삭제 npm cache clean -f 2. node 버전 관리 'n' 모듈 설치 npm install -g n 3. n을 사용해서 버전 업데이트 n stable : 안정 버전 n latest : 최신 버전 n lts : lts 버전 n x.x.x : 특정 x.x.x 버전 n 14.15.4 버전 안 바뀌는 문제 업그레이드한 no.. 2021. 10. 21.

[dayjs]빼기 더하기 하는 방법

dayjs 빼기 참고 : https://day.js.org/docs/en/manipulate/subtract Day.js · 2kB JavaScript date utility library 2kB JavaScript date utility library day.js.org const day = '2021-08-01T00:00:00' console.log(day); const sStartTime = dayjs(day).subtract(1, 'day'); dayjs 더하기 참고 👉 https://day.js.org/docs/en/durations/add const a = dayjs(); a.add(2, 'days'); dayjs format 설정 실 사용 코드 function __() { // this.ch.. 2021. 10. 13.

티스토리툴바