자바스크립트로 달력 만들기

라이브러리 없이 자바스크립트로 달력 만들기 2 - Schedule, Date Picker 만들기

이전 글에서 달력을 만들기 위한 데이터를 만들었습니다. 이번에는 데이터를 활용하여 두 가지 종류의 달력을 만들어 봅니다. 하나는 Schedule입니다. Schedule은 달력에서 특정 데이터를 확인할 수 있습니다. 예를 들면 다음과 같은 달력에 해당합니다. 1. 구글 캘린더(일정을 확인할 수 있다.) 2. 가계부(지출한 금액을 확인할 수 있다.) 위 달력은 모두 특정 데이터를 담은 달력입니다. 또 다른 달력은 Date Picker입니다. 이름 그대로 날짜를 선택할 수 있는 달력입니다. 이는 html의 input 태그를 사용하여 구현할 수도 있는데, 커스튬은 불가능하기 때문에 원하는 UI를 만들기 위해선 처음부터 스스로 만드는 것을 추천합니다. 이번 챕터에는 코드량이 많아 세세한 코드에 대한 설명은 하지 ..

Level3

레벨3 5~6주차 회고

배포 준비 완료 2차 데모데이를 기준으로 하루스터디의 핵심 기능은 모두 완성되었다. 스터디를 개설하고 참여하고 진행하고 기록을 보는 것까지 모두 가능했다. 하지만 아쉬웠던 점은 배포를 하지 않았기 때문에 2차 데모데이에서 실제로 동작하는 서비스를 보여주지 못했던 것이다. 심지어 클라이언트와 서버의 연동도 확인하지 않아 어떤 에러가 있는지 파악도 못한 상태였다. 때문에 2차 데모데이가 끝난 이후 우선적으로 해야할 일이 바로 배포를 완료하여 실제 사용자들이 하루스터디 서비스를 이용할 수 있게 만드는 것이었다. 스터디 개설, 진행에 대한 추가 작업을 마무리 한 뒤, 클라이언트와 서버를 배포 완료하였고, 실제 배포가 잘 되었는지 확인을 해보았지만 역시나... 예상대로 정상 동작을 하지 않았다. 내가 맡았던 부분..

⚛️ 리액트

State를 구조화하는 다섯 가지 원칙

리액트에는 상태라는 개념이 존재합니다. 시도 때도 없이 바뀌는 이런 상태를 어떻게 다루어야 버그 없는 컴포넌트를 만들 수 있을까요? 물론 상태를 대~~충 다루어도 컴포넌트를 만들고 상태를 다루는 데는 큰 무리가 없을 겁니다. 하지만 서비스의 규모가 점점 커지다 보면 어느 순간 내가 만들었던 상태들이 제멋대로 변하면서 원치 않는 상황을 마주하는 경험을 하게 될 것입니다. 그제야 상태의 구조를 바꾸기 위해 뜯어고치기 시작한다면 그땐, 이미 상태가 꼬일 대로 꼬이지 않았을까요? 그래서 저희는 상태를 잘 구조화하여 리팩터링을 쉽게 할 수 있게 해야 하며, 오류 없이 상태를 업데이트를 할 수 있어야 합니다. 그러면 어떻게 상태를 만들어야 할까요? 가이드라인은 가까운 곳에 있습니다. 바로 리액트 공식문서입니다. 리..

⚛️ 리액트

React Router v6.4 이상에서 Router 다루기(RouterProvider, createBrowserRouter, Route)

들어가기 전 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의..

Effective Typescript

아이템 15 - 동적 데이터에 인덱스 시그니처 사용하기

1. 인덱스 시그니처란? 공식문서에는 아래와 같이 인덱스 시그니처의 사용 시점에 대해 설명하고 있다. Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. In those cases you can use an index signature to describe the types of possible values. 타입의 속성을 모르지만 값의 형태를 알고 있을 때, 인덱스 시그니처를 사용하여 타입을 설명할 수 있다. 2. 인덱스 시그니처의 기본 문법 type Props = { [property: string]: string }; Props 타입이 있다...

지원 과정

우테코 최종 합격 후기

1. 12월 28일의 학교 정말 매우 매우 바빴다. 당장 모레가 졸업식이기 때문에 예행연습을 해야 했고 학생부 정리와 짐 정리도 끝내야 했다. 또한 공로상과 장학금 수여도 오후 2시에 있었기 때문에 이것도 신경을 써야 했다. 사실 이날은 2시에 조퇴를 한 후 경건한 마음으로 우테코 메일을 기다리려고 했다. 하지만 바쁜 학교의 업무 덕에 그럴 여유가 없었다. 오히려 다행인 건가? 너무 바쁘다 보니 시간 가는 줄 몰랐다. 공로상과 장학금 수여가 끝나니 2시 반이 되었고 일찍 조퇴하는 것은 힘들다 생각하여 학교에서 남은 업무를 처리하면서 기다리기로 했다. 시간은 어느덧 2시 55분, 곧 우테코에서 최종 합격에 대한 메일이 발송된다. 일부로 신경을 쓰지 않은 채 업무에 집중을 하고 있었다. 하지만 내 눈은 컴퓨..

noah-dev
초부득삼