Next.js-Hoogle_Calender
1.[개발 일지] Hoogle Calendar(달력)
Google Calender를 보게 되면 달력이 있고 월을 선택할 수 있으며 선택한 월에 대한 달력이 표시된다. 이것을 구현해 보기로 하였다.첫째 주에서 1일이 무슨 요일인지 알아야 한다. 위에 이미지에서는 1일이 금요일이다. 즉 1일 => 금요일 (5)를 얻는 함수를
2.[개발 일지] Hoogle Calendar(달력 리펙토링과 CSS)
리액트에서 return 구문에 삼항연산자를 쓰면 쉽게 동적인 코드를 만들 수 있다는 것은 알았다. 하지만 삼항연산자가 중첩될 경우 알아보기 힘들었고 이것을 좀 더 직관적으로 보일 필요가 있었다. 이것에 대해 리팩토링을 하기로 하였다.필요한 조건식으로는 1\. 빈 공백일
3.[개발 일지] Hoogle Calendar(일정 생성하기)
구글 캘린더에 기능 중 일정 만들기를 구현하였다. 기능은 다음과 같다.구글 캘린더 일정만들기 특징1\. 마우스 클릭 이벤트가 발생하면 일정(1시간) 영역이 생성되고 모달창이 뜬다.2\. 일정(1시간) 영역은 30분 아니면 정각이다.=> 만약 2시간 20분 쯤 위치를 클
4.[개발 일지] Hoogle Calendar(일정 옮기기)
구글 캘린더에 기능 중 일정 만들기를 구현하였다. 기능은 다음과 같다.1\. 일정을 움직일 수 있다. 단위는 15분이다.=> 2시 0분, 2시 15분, 2시 30분, 2시 45분 등등 15분 단위만 가능!!!2\. 일정을 움직이면 시간도 알맞게 변경이 된다.3\. 일정
5.[개발 일지] Hoogle Calendar(일정 크기 변경)
구글 캘린더에 기능 중 일정 만들기를 구현하였다. 기능은 다음과 같다.1\. 일정의 크기를 조절할 수 있다. 15분 단위로 크기가 변경된다. 2\. 변경된 크기에 맞게 end시간이 바뀐다.3\. 최소로 줄일 수 있는 크기는 15분이고 최대로 늘릴 수 있는 크기는 맨 끝
6.[개발 일지] Hoogle Calendar(일정 보기 및 수정)
구글 캘린더에 기능 중 일정 보기 및 수정을 구현하였다. 기능은 다음과 같다.1\. 일정을 추가할 수 있다.2\. 일정을 변경할 수 있다.3\. 일정을 자세히 볼 수 있다.본 프로젝트에선 일정을 자세히 보는 폼, 일정을 추가, 변경할 수 있는 폼을 모달창으로 구현하였다
7.[개발 일지] Hoogle Calendar(일정 삭제 및 CSS지식)
구글 캘린더에 기능 중 일정 만들기를 구현하였다. 기능은 다음과 같다.1\. 일정 삭제일정 컴포넌트에 코드를 살펴보자isDeleted라는 변수가 있다. 즉 isDeleted가 true라면 아무것도 안보일 것이고 false라면 정상적으로 보일 것이다.DetailTodoL
8.[개발 일지] Hoogle Calendar(무한 새로고침)
개발중에 특정시점에서 새로고침도 안되고 다른 이벤트들도 정상적으로 작동하지 않았던 적이 있었다.네트워크 부분에 pending이 생기고 여기서 바뀌지 않았다.새로고침도 기달려도 되지 않았다.http:/localhost:3000/api/postit/select부분
9.[개발 일지] Hoogle Calendar(타임바)
구글 캘린더에 기능 중 타임바를 구현하였다. 기능은 다음과 같다.빨간색 타임바이다. 실제로 어떻게 작동하는지 개발자도구에서 확인해봤다.top이 정확히 0초에 바뀐다. (매분 마다 1px 바뀜) 이것을 구현해 보자설명하기 전에 알아야 할 내용이 있다.1\. 본 프로젝트에
10.[개발 일지] Hoogle Calendar(알람)
구글 캘린더에 기능 중 알람을 구현하였다. 기능은 다음과 같다.1\. 일정을 알리는 알람 모달창2\. 자명종 소리3\. 일정 시작 시간이 겹쳐지더라도 한 모달창에 할 내용들 알림지금 6가지의 일정이 있는데 6가지 일정의 top부분을 계산하는 로직을 만들어야한다.물론 6
11.[개발 일지] Hoogle Calendar(일정 만들기 업그레이드)
어느 정도 개발을 완료했다고 생각했고 아는 분께 테스트를 맡겼다. 피드백으로 다음과 같았다.(before)(예시 구글)차이점은 전에 기능은 클릭하는 순간 먼저 만들고 그 이후로 수정하거나 삭제해야한다.하지만 구글에서는 클릭하는 순간 일정 수정폼이 바로 나온다.사용자가
12.[개발 일지] Hoogle Calendar(로그인_passport)
로그인을 처리하는 방법은 크게 세션, jwt방식 등이 있다. 전 프로젝트에서 jwt를 사용하여 로그인을 구현한 적이 있어서 학습겸 세션방식을 채택하였다.참고한 블로그는 다음과 같다.\[NODE] 📚 Passport 모듈 사용법 (그림으로 처리 과정 💯 이해하기)영상
13.[개발 일지] Hoogle Calendar(비밀번호 변경_임시 비밀번호)
많은 사이트들이 비밀번호 변경으로 회원가입한 이메일로 임시 비밀번호를 발급한다.본 프로젝트에서도 이러한 방법으로 비밀번호 변경 로직을 구현하였다.구현은 간단하다.googleapis, nodemailer라는 모듈을 통해 이메일 전송하는 코드를 작성한다.그리고 crypto
14.[개발 일지] Hoogle Calender(후기)
2주간 생활 코딩, 코딩 애플님의 강의를 보면서 next.js를 학습했다. 처음에는 게시판을 만들까 생각하였는데 게시판만 만들다 보면 개발스킬이 넓어지지 않을 것 같았다. 그래서 쉽지만 나한텐 어려운? ToDoList를 만들기로 하였다.ToDoList를 구상하기 위해