둥글게 둥글게

📝 요즘 해야 할 일이 많아, 어딘가 적고 체크하지 않으면 까먹기 일쑤라 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..

⚾️ 어렸을 적 정말 많이 했던 야구게임을 만들어보자 🐮 랜덤으로 4자리의 숫자와 위치를 정확하게 맞춰야 하는 게임으로 만약 4자리 중 숫자는 맞지만, 위치가 틀릴 경우 ball 🥹 숫자와 위치 모두 맞을 경우 strike 😆 ✨ 결과물 ⚾️ 콘솔창을 잘 보자! 💚 새로고침 시, 랜덤의 4자리 숫자를 제공 💚 숫자 4개를 입력하면 정답에 맞게 ball & strike를 화면에 반환 💚 입력 값이 정답일 경우 👉🏻 alert창을 띄운 후, 정답 공개 & '다시 하기' 버튼으로 변경 ❗️숫자 중복 값을 입력할 경우, alert창으로 경고 ❗️ 4자리의 숫자를 입력하지 않은 경우, alert창으로 경고 ❗️ 숫자 외에 다른 문자를 입력할 경우, alert창으로 경고 ⚾️ 숫자 4자리 랜덤으로 받아오기 expo..

📑 무한 스크롤(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차원 선형 레이..

⭐️⭐️⭐️ 별점 star-rating을 구현해 보자 요즘 배달, 쇼핑몰, 어플, 장소 등 어느 곳에서나 별점을 볼 수 있을 것이다. 해당 상품의 별점을 통해 만족도를 확인하기 때문에! 정말 기본이 되는 기능 중 하나인 별점을 구현해보고자 한다. ✨ 결과물 👉🏻 star-rating은 재사용이 가능하도록 코드를 구현하였으며, 마우스 반응에 따라 효과를 다르게 주었다. 💛 star를 클릭했을 때는 노랑색 🖤 star에 마우스를 호버 했을 때는 회색 만들기 전에는 간단해 보여서 오래 걸리지 않겠다! 했지만, 역시나 이번에도 큰 오산이었다 🫠 📌 사용자가 정의한 start-rating 컨테이너 요소의 참조를 StarRating 함수에 전달해 star 요소들로 구성된 star-rating 요소를 동적으로 생성 ..

⏱ Analog시계를 구현해 보자! 노트북 화면 바탕에 동그란 시계를 띄워놓을 수 있는 기본적인 테마를 많이 봤을 것이다. javascript로 1초 간격으로 시침, 분침, 초침이 모두 일정 각도로 회전하는 시계를 구현해 보자 🤜🏻 ✨ 결과물 👉🏻 현재 시각에 맞게 시침, 분침, 초침이 지정한 각도로 움직이도록 코드를 작성하였고, 시계를 n개 생성할 수 있도록 코드 재사용이 가능하도록 구현하였다. 📌 시침, 분침, 초침의 각도를 javascript로 --deg(CSS) 값 조절 📌 시계는 재사용이 가능하도록 구현 ✅ 현재 시간을 가져오기 위해 new Data()을 사용 const now = new Date(); const hour = now.getHours(); const minute = now.get..

😆 javascript를 사용하여 해당 버튼을 누르면 side navigation이 화면에 open close 되도록 구현하였다. 정말 간단한 기능이지만, 처음에는 애를 먹었다 😂 버튼을 누르면 side navigation이 나타나도록 구현하는 기능뿐 아니라, 또 다른 조건도 만족해야 했기 때문이다. ✨ 결과물 👉🏻 왼쪽 위에 있는 버튼을 선택하면 side navigation이 화면에 나타났다가 사라지도록 구현한 것을 볼 수 있다. 여기까지는 쉽게 구현할 수 있었지만, 아래 조건에서부터 슬슬 막히기 시작했다; 📌 새로고침 또는 페이지 이동, 브라우저 재시작 등의 행위를 한 후에도 해당 side navigation을 open 해 놓은 상태로 유지할 수 있도록 코드 구현 전역이라는 단어를 강의를 들으면서 정..