Dog foot print

React로 Calendar App 만들기 – 2. 헤더 만들기 헤더에 나타나는 표시사항으로는 현재 표시하고 있는 달, 오늘 날짜, 월 이동 입니다. 위의 모든 내용들은 App component에서 관리되고 Header component로 props로 전달할 겁니다. 앞서 말했듯이 이 프로젝트는 Date객체가 아닌 외부 라이브러리인 moment.js를 사용해서 더욱 빠르게 project를 향상 시키는 방법을 사용하도록 할겁니다. Moment.js의 설명은 git의 moment.js 페이지를 참조 해주시기 바랍니다. Yarn add moment 명령어를 통하여 해당 프로젝트 폴더에 moment 라이브러리를 설치하도록 합니다. 이후 app.js에서 moment를 import하고 header component..

React로 Calendar app만들기 기본 세팅 Yarn create react-app calendar로 적당한 위치에 react-project를 만든다. 기본 세팅을 위해서 필요 없는 것들을 src폴더에서 삭제하고 App.js를 Calendar.js 로 변경 한다. Calendar는 Class형 컴포넌트로 변경하고 테스트를 위해 Hello Calendar를 입력한다. import React, { Component } from 'react' export default class Calendar extends Component { render() { return ( Hello Calendar ) } } export default Calendar; index.js도 아직 붙어 있는 service work..

전 포스팅에서 prevMonth , nextMonth 버튼을 구현하지 않았는데 해당 버튼과 토,일의 스타일을 구현 하도록 해보겠다. buildCalendar 수정하기 prevMonth와 nextMonth에서 today만 변경해서 buildCalendar에서 알아서 변경하게 하고 싶어 전역변수 몇 개를 buildCalendar내부로 옮겼다.. 그리고 기존의 buildCalendar에서 일부 달의 경우 setDays가 아직 lastDate에 도달하지 못했음에도 row를 못 만들었기 때문에 함수끝에 제어문을 두도록 변경했다. function buildCalendar(){ let firstDate = new Date(todayYear, todayMonth-1,1); let lastDate = new Date(t..

작년에 자바스크립트를 만지면서 dom을 가지고 뭘 만들어 볼 수 있으려나 싶어서 만들어 본 것이 달력만들기였다. Date객체만을 이용해서 달력을 만들었는데 이런 생 노가다가 없었다. 지금이야 React moment 라이브러리를 이용해서 쉽게 만들지만 그때는 꽤나 힘들었다... 그래서 삽질의 과정을 포스팅 해보려 한다. 틀 만들기 틀은 div가 아닌 table로 만들 것이다. 1 일 월 화 수 목 금 토 style 추가하기 html의 결과가 조금 구리니 callender td에 style 을 추가하자 td{ width: 50px; height: 50px; text-align: center; font-size: 20px; font-family: 굴림; border:2px; border-color:black;..