둥글게 둥글게

📝 요즘 해야 할 일이 많아, 어딘가 적고 체크하지 않으면 까먹기 일쑤라 Todo-List 작성이 필수가 되어버렸다. 파워 J인 나(사실 MBTI를 믿지 않지만..!)는 항상 기록해야하기 때문에 Todo-List를 만들어보고자 한다 💜 ✨ 결과물 ✅ 해야할 일을 기록하면 아래 list로 표시 & 위에 완료 전 list 개수 표시 ✅ list 마무리 후, todo 완료 체크하면 todo 내용이 완료되었다고 표시 ✅ 각 todo-list 삭제 기능 ✅ 전체 완료 기능 & 전체 삭제 기능 ✏️ useState()로 todo-list 상태값 관리하기 const [text, setText] = useState(''); const [todos, setTodos] = useState([]); // TodoType e..

📑 무한 스크롤(Infinite sroll)을 지원하는 News Viewer를 구현해 보자! 뉴스 API를 가져와 5개씩 보여주고, 스크롤이 화면의 가장 아래쪽에 닿을 때, 또 다른 기사 5개를 띄워주는 무한스크롤 news를 만들어보고자 한다. ✨ 결과물 ✅ 이미지와 내용의 경우, API의 문제로 인해 제대로 띄워지지 않아 회색 배경의 이미지와 빈문자열로 대체하였다. open news API에서 가져올 수 있는 정보는 title 정도여서 제목만 띄워놓은 결과물이다. 화면을 보면 전체 보기를 눌렀을 경우, 비즈니스, 엔터테인먼트, 건강, 과학 등 여러 개의 카테고리에서 랜덤으로 하나씩 나열하여 보여주고 있고, 나머지 카테고리에서는 해당하는 카테고리에 맞는 기사를 5개씩 보여주고 있다. 화면 아래에 스크롤..

💚 Calendar & Date Picker를 만들어보자 시간이 흘러 벌써 2023년이 되었다.. 심지어 23년의 1분기가 지나가 버렸다.. 시간 너무 빠른 것 😂 날짜 개념을 잃지 않도록(?) 캘린더 & Date Picker를 구현해 보자! ✨ 결과물 👉🏻 input 창을 누르면 캘린더가 뜨고, 현재 해당 날짜인 2023-04-23을 표시하고 있다. 2023년 외에 이전 연도, 이후 년도 모두 날짜에 맞게 달력으로 표시하도록 구현하였다. 캘린더 외에 Date Picker도 구현해야 하기 때문에 캘린더를 만들고, 이후에 Date Picker를 구현하였다. 캘린더에 추가한 다른 기능들은 아래에서 소개할 계획이다 🙌🏻 📌 캘린더 레이아웃 👉🏻 calendar-nav는 flexbox로 구현 (1차원 선형 레이..