여씨의 개발이야기

사이드프로젝트에서 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는 위의 링크를 타고 들어가서 설치하는 방법을 볼 수 있다. 필자..

드디어 jsp의 지옥에서 벗어난 나. 그동안 jsp로 짜여진 스파게티 코드를 질릴대로 본 나는 jsp와 권태기를 갖게 되었고... (다른 언어라고 다를 줄 알겠냐는 질문이 들어오겠지만 한 언어로 개떡같이 작성된 코드를 n년간 봐온다면 정말정말 그 언어가 싫어집니다! 아시궜어요!😭) 이번 프로젝트에서는 Vue 기반의 웹앱을 확장 개발한다는 얘기를 듣고 프론트 개발을 해보고 싶다고 스리슬쩍 부장님께 부탁을 드린게 바로 컨펌이 떨어졌다. 기쁨도 잠시, 사아실 나는 Vue 공식문서조차도 제대로 읽지 않았던 거시였다... 원래 다 이렇게 개발이랑 공부랑 동시에 하잖아요?^^... Vue js랑 많이 비교되고 비슷한 놈이 무엇이더냐 한다믄 React를 대표적으로 많이들 뽑을 것이고 (Angular도 있다.) 필자는..