코딩배우는고양이

개요 페이지네이션의 구현을 도와주는 좋은 라이브러리도 많지만 next.js와 친숙해질겸 페이지네이션의 동작 방식도 익힐겸 간단하게 next.js 환경에서 구현해보았습니다. 요구 사항 모든 데이터를 한 번에 가져오는 것이 아니라 매 페이지를 누를 때마다 해당 페이지에 해당하는 API 요청만 합니다. 페이지의 총 개수는 전체 데이터 개수에 따릅니다. 예를 들어 한 페이지에 10개의 데이터를 표시하고 총 데이터의 개수가 38개라면 페이지의 개수는 4개가 되어야 합니다. 기호를 누르면 페이지를 한 칸씩 이동합니다. 주요 로직 우선 화면에 보여줄 데이터를 불러와보겠습니다. pagination/page.tsx export interface ItemsProps { Id: number; Name: string; Gra..

결과 화면 개요 매우 간단한 댓글 컴포넌트를 만들어보았습니다. 백엔드 데이터로 작성일자를 받으면 위와 같은 ISO 형식으로 받게됩니다. 처음 피그마로 작업할 때는 2023-07-06 12:23 의 형식으로 편집하여 출력하려고 하였으나 핀터레스트, 트위터, 인스타그램 등 유명 SNS의 댓글 UI를 보면 좀 더 직관적으로 날짜를 표시해주는 것을 알게 되었습니다. dayjs나 moment와 같은 날짜를 다루기 쉽게 도와주는 라이브러리도 있지만 최대한 직접 기능을 구현해보고 싶어서 라이브러리는 이용하지 않았습니다. 구현 const elapsedTime = (date: Date) => { const start = new Date(date); const end = new Date(); const diff = (en..

개요 페이지 곳곳에서 사용되는 정렬 기능을 select box를 이용해 구현하고자 하였습니다. 피그마에서 보면 대충 위와 같은 select box입니다. 페이지마다 사용되는 정렬 내용이 다르기 때문에 재사용이 가능한 컴포넌트로 만들기 위해서는 정렬 옵션을 props로 받아야 할 것 같습니다. 그리고 옵션에 대한 value를 저장해야하므로 setValue 또한 받아야 할 것 같습니다. 요구사항 select box를 누르면 선택 옵션이 아래로 펼쳐지고 선택을 하면 해당 옵션으로 value가 바뀌어야 합니다. 선택 옵션이 펼쳐졌을 때 외부를 클릭하면 현재 옵션 그대로 저장하면서 박스가 닫혀야 합니다. 구현 먼저 select box 외부를 클릭했을 때 옵션 리스트가 닫히도록 구현을 하려면 useRef를 이용해서..

개요 스택오버플로우를 클론 코딩하는 Pre-project 팀 과제를 진행하던 중, 질문 상세 페이지와 수정 페이지, 답변 수정 페이지에서 중복되는 코드가 많이 발생하였다. 질문 등록 페이지 AskQuestion function AskQuestion() { const [titleValue, setTitleValue] = useState(""); const [bodyValue, setBodyValue] = useState(""); const submitHandler = (e: React.FormEvent) => { e.preventDefault(); setBodyValue(""); }; return ( Ask a public question submitHandler(e)}> Post your question..

타입스크립트의 Interface 자바의 인터페이스가 추상 메소드를 가지면서 설계와 구현을 분리하기 위한 기능이라면, 타입스크립트의 인터페이스는 객체를 위주로 다루면서 그 객체의 타입을 정의해놓은 설계도라고 할 수 있다. interface Fruit { name: string; price: number; } interface명은 첫 글자를 대문자로 한다. // 객체의 타입을 인터페이스로 지정 const fruit: Fruit = { name: mango; price: 1000; } // 매개변수의 타입과 반환타입 또한 인터페이스로 지정할 수 있다. function selling(item: Fruit): Fruit { // ... } 인터페이스 & 타입 별칭 인터페이스와 type alias는 객체 구조 타입..