TIL - [20.08.17]

어제 알바하고 노느라 개발개발에 손을 못댔으니 오늘은 더 열심히!!

 

이번주의 개발목표
1.30일 레이아웃 만들기. 되도록 자바스크립트 반복문, 함수 사용해서!
2.임시 input영역 만들기. (날짜, 시간)
3.app.py 서버파일 만들고 api만들어 클라이언트-서버-DB 구현하기

 

오늘의 코딩

1. 30일 레이아웃 만들기

-튜터님이 경고하긴 했지만 30일 레이아웃 (달력 형태) 를 자바스크립트로 표현하는 게 상당히 힘들다.. 
'자바스크립트로 달력 만들기'로 구글링하면 다양한 예시가 나온다.
혼자 힘으로는 좀 힘드니 내가 만든 함수에 튜터의 피드백을 받거나, 그냥 구글링해서 처음부터 따라해야겠다.
(html틀까지는 만들었다)

-30일 레이아웃의 표 셀 너비 고정 성공!
<col width="%">로 바꾸고 css에서 table{table-layout: fixed; word-break: break-all;} 적용하니 성공했다.
https://jowook.tistory.com/entry/table%ED%85%8C%EC%9D%B4%EB%B8%94%EC%97%90-tablelayout-%EC%86%8D%EC%84%B1%EC%9C%BC%EB%A1%9C-%EB%84%88%EB%B9%84-%EA%B3%A0%EC%A0%95%ED%95%98%EA%B8%B0 를 참고했다.

-메인 상단에 요일 안내 추가(조건문 사용)

-메인 '멍이와 나' - 구글웹폰트 적용(감자꽃)

 

2. 임시 input영역 만들기.

-콤보박스 선택 전 보여지는 값을 지정하기 위해 구글링한 결과 <option selected disabled hidden></option> 방식으로 구현한다고 한다. 바로 적용가능했다. https://euntori7.tistory.com/329를 참고했다.

-할 일 이름, 시작일, 종료일, (옵션:종일) / 1차 알림(일/시간), 2차 알림(일/시간), 메모 / 제출 버튼까지 만들었다.
-내일은 input영역 접고 펴는 기능을 추가해야겠다!

3. 서버, API 구현 : 오늘 하기에는 무리한 계획이었다..!

input박스들을 만들어야 서버, DB와 연결이 가능한데, 실제 구글캘린더를 보니 생각보다 input박스에 필요한 옵션들이 많았다. 이 부분은 오늘 저녁 수업 듣고, 내일 할 일이랑 같이 정리한 뒤에 내일 이어서 작업해야겠다.

 

 

---

 

오늘까지 구현한 프론트엔드의 모습!

1/7/30 레이아웃에 공통으로 들어가는 input영역의 모습.

1일 레이아웃 할일 목록은 변한 게 없어서 사진을 생략했다.

7일 레이아웃의 모습(input영역 아래)

30일 레이아웃의 모습. 표 형태만 만든 상태. 안의 날짜도 html로 직접 넣은 것이고, 데이터도 물론 더미데이터이다. 달력 구현이 정말 힘든 일임을 함수 만들면서 느꼈다 ㅠㅠ

 

 

수업 듣고 나서 -> 앞으로 할 일
-API문서(API설계)
-서버, DB 설계
-카카오톡 채널아이디 사용법 알아보기!