여씨의 개발이야기

요즘 weave scope 퍼블리싱을 하면서 jshint 오류를 계속 맞딱드리고 있다. (Weave Scope는 Docker 및 Kubernetes의 시각화 및 모니터링 도구이다.) 정리를 해두면 좋을 거 같아서 한 번에 정리해보겠다. 1. Script URL is a form of eval no-script-url Examples of incorrect code for this rule: /*eslint no-script-url: "error"*/ location.href = "javascript:void(0)"; location.href = `javascript:void(0)`; 2. Style prop value must be an object react/style-prop-object The is..

🤔 제작동기 토이프로젝트에서 상세 페이지 첫 진입시에 progress를 넣어야 할 부분이 생겼다. 원형 모양의 Progress bar를 제작하려고 한다. 📚 사용할 라이브러리들 1. mui - CircularProgress https://mui.com/api/circular-progress/ CircularProgress API - MUI API documentation for the React CircularProgress component. Learn about the available props and the CSS API. mui.com 👽 소스를 보자 import React from 'react' import {Box, Fade, CircularProgress} from '@mui/materia..

사이드프로젝트에서 mui의 dialog component를 사용하고 있는데 background를 image로 적용해야하는 상황이 왔다. 일반적인 방법으로 적용이 안 되어서 꽤나 애먹었던 부분이다. 적용 방법은 정말 간단하다. Dialog의 속성값 중 PaperProps 속에 style을 아래와 같이 적용해주면 된다. 📇 소스보기 {selectedValue.grt_title} {selectedValue.grt_contents} handleItemClick()}>닫기

react 컴포넌트를 선언할 때 두 가지 방법이 있다. 바로 class방법과 function방법이다. 19년부터 function형 컴포넌트에 hook을 지원하면서 지금은 공식 문서에서 공개적으로 function형 컴포넌트와 hook을 같이 사용할 것을 권장하고 있다. 그렇지만, class를 자주 사용하지 않더라도 아직까지 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. 1. function형 컴포넌트 import React from 'react'; function App() { const contents = 'hi'; return {contents}; } export default App; function형 컴포넌트는 class형 컴포넌트에 비..

1. CommonFunction.js에 공통 함수들을 선언해준다. (export 사용) export function timestamp(date) { // 날짜 포맷 변경(YYYY-MM-DD HH:mm:ss) date.setHours(date.getHours() + 9); return date.toISOString().replace('T', ' ').substring(0, 19); } ... 2. CommonFunction.js를 사용할 컴포넌트에 CommonFunction을 import한다. import * as common from '../../CommonFunction'; 3. CommonFunction의 timestamp 함수를 본문에 사용한다. ... {c.grt_date !== null ? co..

🤔 제작동기 토이프로젝트 제작 중, 3*3 바둑판 형태를 띈 슬라이드식 리스트 UI를 만들어야하는 상황이 생겼다. 📚 사용할 라이브러리들 1. Slick 검색해본 결과 multiple row가 가능한 carousel list library는 대표적으로 slick이라는 라이브러리가 있는 것으로 파악이 되었다. 원래는 JQuery로 제공해왔는데, 최근에(아마도) react도 제공하는 것 같다. https://react-slick.neostack.com/docs/get-started Neostack The last react carousel you will ever need react-slick.neostack.com slick for react는 위의 링크를 타고 들어가서 설치하는 방법을 볼 수 있다. 필자..