이전 글에서 달력을 만들기 위한 데이터를 만들었습니다. 이번에는 데이터를 활용하여 두 가지 종류의 달력을 만들어 봅니다. 하나는 Schedule입니다. Schedule은 달력에서 특정 데이터를 확인할 수 있습니다. 예를 들면 다음과 같은 달력에 해당합니다. 1. 구글 캘린더(일정을 확인할 수 있다.) 2. 가계부(지출한 금액을 확인할 수 있다.) 위 달력은 모두 특정 데이터를 담은 달력입니다. 또 다른 달력은 Date Picker입니다. 이름 그대로 날짜를 선택할 수 있는 달력입니다. 이는 html의 input 태그를 사용하여 구현할 수도 있는데, 커스튬은 불가능하기 때문에 원하는 UI를 만들기 위해선 처음부터 스스로 만드는 것을 추천합니다. 이번 챕터에는 코드량이 많아 세세한 코드에 대한 설명은 하지 ..
라이브러리 없이 자바스크립트로 달력 만들기는 우테코 '하루스터디' 프로젝트를 진행하면서 직접 만든 달력을 바닐라 자바스크립트로 다시 구현하면서 정리한 내용입니다. '하루스터디' 프로젝트에서는 리액트로 달력을 구현했지만 이번에는 바닐라 자바스크립트에서 구현을 합니다. 리액트도 자바스크립트 라이브러리이므로 리액트에서 사용하고자 한다면 환경에 맞게 변형하여 사용할 수 있습니다. 다음은 '하루스터디' 프로젝트에서 달력 구현과 관련된 PR입니다. [FE] member record Calendar 기능 추가 by nlom0218 · Pull Request #613 · woowacourse-teams/2023-haru-study 관련 이슈 closed #602 구현 기능 및 변경 사항 사용자 기록 페이지에 달력 기능..
😵💫 복잡해질 수도 있는 경로 프로젝트를 진행하다 보면 폴더의 구조가 복잡해질 가능성이 충분히 존재한다. 규모가 큰 프로젝트일수록 더욱 원하는 파일에 접근하기 위해 이리저리 움직여야 한다. 특히, 하위 폴더에 접근하는 것이 아니라 형제 폴더, 부모의 형제 폴더에 접근하는 것은 더욱 까다롭다. 다행히 vscode는 이런 복잡한 문제를 자동 import를 할 수 있는 기능을 제공해 주기 때문에 쉽게 해결 가능하다. import 하고 싶은 모듈을 타이핑을 하다 보면 자동으로 import 하는 기능을 모두 다 사용해 봤을 것이다. 이를 활용하면 다음과 같이 vscode가 알아서 모듈의 위치를 찾아 import를 해준다. import CreditCard from '../../components/CreditCar..
이전 챕터에서 shift Month Button를 통해 이전과 다음 달로 이동할 수 있게 되었습니다. 그렇다면 다음과 같은 경우엔 어떻게 해야 할까요? 오늘이 2023년 10월 31일인데 2020년 10월의 달력을 보고 싶다. 버튼을 36번 클릭하여 3년 전으로 이동해야 합니다. 너무나 많은 버튼 클릭입니다. 사용성도 많이 떨어집니다. 사용자는 간단하게 자신이 원하는 년(year), 월(month)로 이동하는 것을 바라고 있습니다. 이를 이번 챕터에서 Navigation 기능을 추가하면서 해결합니다. 1. Calendar class에 기능 추가하기 이전 챕터에서는 shiftMonth 메서드를 추가하여 월(month)을 이동할 수 있게 했습니다. 하지만 매개변수로 next, prev, today를 받기 때..
들어가기 전 21년 말, react-router-dom을 사용할 땐 v6.3이었다. 현재는 메이저 버전은 동일하지만 v6.4를 기점으로 기존에 없던 새로운 기능이 추가되어 이를 소개하고자 한다. 아래의 사진에서 보는 것과 같이 React Router 공식 문서에서도 v6.4에 대해 무엇이 새로운지 소개하고 있다. React Router 공홈 바로가기 현재 react-router-dom의 최신 버전은 v6.11.1이다. 얼마나 자주 업데이트 되는지 궁금해서 Version History를 찾아봤는데, v6.11.1은 현재기준(23년 5월 16일) 12일 전에 공개가 되었다. 그리고 v6.4.0은 8개월 전인 22년 9월에 공개되었다. 꾸준히 기능이 업데이트되고 있다고 생각한다. 더 재밌는 점은 이전의 v5의..
개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-04-18 - 23-04-23 Repo PR & Review 💳 페이먼츠 📚스토리북 미션 회고 리액트 온보딩 미션이 끝나고 두 번째 미션인 페이먼츠 미션이 시작되었다. 페이먼츠 미션은 총 3단계로 이루어져 있다. 지금까지는 2단계가 마지막이었는데, 3단계까지 있는 것을 보니 하나의 서비스에 대해서 더 많은 고민을 할 수 있게 될 것 같다. 페이먼츠 미션의 필수 요구 사항은 다음과 같다. 1. Storybook으로 UI 컴포넌트 렌더링 2. REQUIREMENTS.md에 요구 사항 도출 3. 재사용 가능한 Component 작성 📚 Storybook 새로운 키워드가 등장했다. 바로 S..
개요 미션 기간 Repository PR & Review 행운의 로또 1단계 23-02-14 - 23-02-16 Repo PR & Review 🚀 미션 진행 과정 레벨 1의 두 번째 미션은 콘솔 기반의 행운의 로또 게임을 구현하는 것이다. 로또 게임은 이전 프리코스에서 진행이 되었던 미션 중 하나여서 큰 부담감 없이 시작할 수 있었다. 하지만 새롭게 추가된 프로그래밍 요구 사항 중 TDD로 구현하는 것이 있었기 때문에, 한 번도 이를 이용한 적이 없었던 나에겐 어려움으로 다가왔다. 뿐만 아니라 함수(메서드)의 들여 쓰기 depth를 1단계로 해야 했기에 고민할 부분이 많이 생겼다. TDD로 구현하기 위해 우선 페어와 함께 기능 목록을 작성한 후 어떤 기능을 TDD로 구현할 수 있일까 고민을 하였다. 첫 ..
1. 개요 22년 11월 16일 15시에 4주 차 미션 안내 이메일이 도착했다. 일주일 동안 이루어진 우아한테크코스 프리코스 4주 차 다리 건너기 미션에 대한 간단한 소개와 소감을 작성한다. 2. 미션 소개 프리코스 4주 차의 미션은 다리 건너기 게임을 만드는 것이었다. 오징어 게임의 징검다리 건너기 게임과 같은 규칙의 게임을 직접 만드는 것이다. 오징어 게임과 다른 점은 목숨이 무한개여서 실패를 해도 다시 시도할 수 있는 점이 게임을 진행하는데 부담감을 줄여주었다. 오징어 게임에서의 징검다리 건너기 게임과 다른 점은 실패를 해도 다시 시도할 수 있다는 것이다. 오징어 게임에서는 바로 추락하여 사망을 하지만 다행히 프리코스의 다리 건너기 미션은 그러지 않았다. 그래서 게임에 실패하더라도 무한히 도전을 하..
1. 개요 22년 10월 26일 15시에 1주 차 미션 안내 이메일이 도착했다. 일주일 동안 이루어진 우아한테크코스 프리코스 1주 차 온보딩 미션에 대한 간단한 소개와 소감을 작성한다. 우아한 테크코스 1주 차 온보딩 미션 저장소 GitHub - woowacourse-precourse/javascript-onboarding: 온보딩 미션을 진행하는 저장소 온보딩 미션을 진행하는 저장소. Contribute to woowacourse-precourse/javascript-onboarding development by creating an account on GitHub. github.com 2. 미션 소개 프리코스 1주 차의 미션은 온보딩 미션이었다. 우테코에서는 어떻게 학습하고 있는지, 어떤 학습을 하고..
