코딩배우는고양이

결과 화면 개요 매우 간단한 댓글 컴포넌트를 만들어보았습니다. 백엔드 데이터로 작성일자를 받으면 위와 같은 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를 이용해서..

📝 문제 1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다. 1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다. 마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다. 앞사람이 말한 단어의 마지막 문자로 시작하는 단어를 말해야 합니다. 이전에 등장했던 단어는 사용할 수 없습니다. 한 글자인 단어는 인정되지 않습니다. 다음은 3명이 끝말잇기를 하는 상황을 나타냅니다. tank → kick → know → wheel → land → dream → mother → robot → tank 위 끝말잇기는 다음과 같이 진행됩니다. 1번 사람이 자신의 첫 번째 차례에 tank를 말합니다. 2번 사람이 자신의 첫 번째 차례에 k..

개요 스택오버플로우를 클론 코딩하는 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..

CSS 개발 방식 CSS-in-CSS 렌더링할 때 모든 CSS 요소를 로딩하기 때문에 인터렉티브한 웹 페이지를 구성할 때 사용자 편의를 반영하기 좋다. CSS-in-JS 해당 컴포넌트가 렌더링 될 때만 스타일 태그를 생성하기 때문에 컴포넌트 기반 프로젝트에 유용하다. 각 컴포넌트의 라이프 스타일에 맞게 스타일을 적용할 수 있고 자바스크립트 코드를 활용할 수 있기 때문에 동적 스타일 적용이 자유롭다. 자바스크립트 해석 과정이 필요하기 때문에 CSS 모듈 방식에 비해 성능이 느리다. CSS 라이브러리 CSS-in-CSS 종류 CSS-module CSS를 모듈화하여 사용하는 방법 기본적으로 CSS 클래스의 범위가 정해져있다는 점에 대한 이점은 CSS-in-JS와 동일하지만 순수 CSS 파일을 유지하기 때문에 ..