농's 개발 공부 이야기

게시판을 만들다 보니 등록일을 출력할 형식이 필요했다. 물론 일반적으로는 yyyy-mm-dd로 사용하겠지만 주 이용자가 한국인이기 때문에 시간의 형식을 '-년 -월 -일 -시 -분'의 형식으로 출력하고 싶었다. 이를 위해서 여러 자료들을 찾아보니 Moment.js를 사용하면 간편하게 될 것 같았다. Moment.js는 시간이 포함된 데이터를 받아서 조작할 경우 사용 가능한 라이브러리 중 하나이다. SETUP //Moment 라이브러리 설치 npm i moment HOW-TO import Moment from 'moment'; const changeTime = (record) => { const createdTime = Moment(record.createdAt).format('YYYY년 MM월 DD일 H..

[게시판에서 게시글의 제목을 클릭하면 게시물 내용이 등록일, 수정일과 함께 팝업창으로 띄우기] * 현재 작업은 React로 진행 중이며, 특히 ant-design의 Protable 컴포넌트를 이용하고 있다. 팝업창으로 띄우는 방법에 대해 현재 상황에 맞는 여러 방법을 모색 해 보았다. 1) ant-design의 Popoverˇ 사용하기: 아래 같은 작은 팝업이 아닌 팝업 창으로 띄우고 싶었기 때문에 pass. 2) javascript 를 이용해서 render할 때 바로 창 띄우기: render 할 때 사용할 새로운 함수를 만들어야 해서 pass. 3) ProTable을 사용 중이니 form을 그대로 활용 해서 게시글 내용 보이게 하기: 하지만 disabled는 동작하지 않았고 또 비슷한 종류의 옵션을 살..

Columns dataindex: DB의 필드와 매핑해 주는 역할. Pagination 'pagination={}'에 대해 따로 정의하지 않으면 기본적으로 pagination 아래와 같이 제공한다. 그러나 보다시피 기본 세팅이 중국어이기 때문에 바꿔주기 위해서는 다음과 같이 사용하는 것을 추천한다. pagination={{ showTotal: (total, range) => ( {`총 ${total} 중 ${range[0]}-${range[1]} `} ), }} *참고) stackoverflow.com/questions/62229953/change-ant-design-pro-table-pagination-language 이런 방식으로 작성하면 아래와 같이 사용 가능하게 된다. 이 때, backend에서 ..

Hook - class 컴포넌트를 작성하지 않아도 state 같은 기능들을 사용할 수 있게 해 준다. - 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해 주는 함수이다. - 함수 컴포넌트는 기본적으로 state가 없는 컴포넌트이지만 hook은 react state를 함수 안에서 사용할 수 있게 해 준다. - class 안에서는 동작하지 않지만 class 없이 React를 사용할 수 있게 해 준다. - 관련 있는 코드들을 한군데에 모아서 작성 가능하게 해 준다. class에서는 lifecycle method 각각에 코드들을 쪼개서 넣어야 한다. => 즉, Hook이란 state가 없는 함수 컴포넌트에서 class의 작성 없이도 state를 사용 할 수 있게 해 주는, 그래서 코..