6월 5일 월

알게된 것

Mysql

• 컬럼으로 DateTime을 가지는 테이블에서 기간별 데이터를 가져오는 방법

특정 기간 사이

SELECT * FROM 테이블명 WHERE 날짜컬럼 BETWEEN DATE_ADD(NOW(), INTERVAL -1 DAY) AND NOW();

특정 시간 (현재를 기반으로 상대적) 이후

SELECT * from 테이블명 where 날짜컬럼 > DATE_ADD(now(), INTERVAL -1 minute);
// 

블로그 개발

---

6월 6일 화 - 현충일

스타벅스에와서 커피한잔 하면서 디자인 수정하던 것을 이어서 하려고 했으나 데스크탑에서 개발하던 git branch를 커밋만 하고 push하지 않아서 새로 브랜치를 파서 새 포스트 작성 페이지에 MarkDown 입력을 도와주는 Toolkit을 제작했다

블로그 개발

추가 사항

포스트 작성

• EditorTookBox
  
  • 외형, 버튼 기능 일부 구현 (헤딩 태그)

---

6월 7일 수

벌써 6월 7일...? 너무 빠릅니다.

오늘은 점심먹고 카페 가서 노트북으로 3시간 정도 개발 하다가 운동 후 귀가해서 2시간 정도 개발 했다.

알게된 사실

Safari에서 justify-contents

보통 flex 요소의 justify-contents 속성을 사용할 때

display : flex;
justify-contents : end;

이렇게 end 값을 주고 사용했었는데 이게 사파리 환경에서 적용이 되지 않았다.
end 속성은 flex 요소 뿐만 아니라 block,grid,table 등에서도 사용되는 속성이고,
flex-end 속성은 flex 레이아웃에만 적용되는 방식이다.

safari에서 flex-end를 사용해주니 css가 정상적으로 적용되었다.

블로그 개발

블로그 메인 - 슬라이드

• 인기 포스트 보여주는 슬라이드 컴포넌트 추가.
  
  • 유저 프로필 추가
  • 슬라이드 인디케이터 추가
  • 슬라이드 버튼 추가
  • 자동 슬라이드 기능 추가

포스트 작성 - ToolBox

• 디자인 수정 브랜치에 ToolBox 개발내용 merge
  
• Bold 버튼 기능 추가
  • 드래그 없이 클릭
    
  • 드래그 후 클릭
    

오류 관련

수정

• Hide Menu 컴포넌트의 메뉴가 사파리에서 우측 정렬 되지 않는 문제 수정
  • justify-contents : flex-end 로 변경

발견

• 포스트 작성 시 새 시리즈 작성하고 바로 글쓰기 하면 서버 다운
  • 원인 파악 실패 (버그 재현 불가능)

---

6월 8일 목요일

오늘은 아르바이트랑 병문안 때문에 시간이 부족해서 많이 개발은 못했다.

블로그 개발

포스트 작성

• ToolBox 기능 추가

  • italic, strikethrough (취소선) 기능 추가
    

• 이미지 드래그앤 드롭, 이미지 붙여넣기 기능 추가

  • 이미지 파일 끌어서 에디터에 놓으면 markdown 이미지 문법으로 변경

// dataTransferItemList : e.clipboardData.items(복붙) or e.dataTransfer.items(드래그앤 드롭);
  const dataTransferItemListToFile = (dataTransferItemList) => {
    // file type !== image 인 경우 return
    const items = [].slice.call(dataTransferItemList).filter((item) => {
      return item.type.indexOf("image") !== -1;
    });
    if (items.length === 0) return;
    // dataTransferItem.getAsFile : dataTransferItem to File 메서드
    return items[0].getAsFile();
  };


  const onImage = (file) => {
    // taRef : textArea ref
    const { value, selectionStart, selectionEnd } = taRef.current;
    uploadImg(file).then((res) => {
      // onChange : redux dispatch
      onChange(
        value.substring(0, selectionStart) +
          `![](${res})` +
          value.substring(selectionEnd)
      );
    });
  };

• 이미지 삽입 버튼 추가
  

---

6월 9일 금요일

블로그 개발

포스트 작성

• ToolBox 기능 추가
  • Code, blockQuote, link 문법 버튼 추가
    
  • 코드, 이미지, 링크, 인용(blockQuote) 버튼 추가
• 컴포넌트 기능 분리

---

6월 10 ~ 11 주말

병문안 및 개인 일정으로 개발 진행 x

예정 사항

블로그 서비스 개발

예정 사항

개선 사항

- 모바일 글 작성 시 편리성 개선

- 코드 태그 혹은 헤딩 태그 입력 버튼 추가

• 시리즈명 중복 유효성 검사
• 구독한 블로거의 포스트가 없을 때 MORE 버튼 제거
• 시리즈 추가하고 선택시 오류 발생

기능 추가

• 소셜 로그인 기능 추가
  - 전체적인 CSS 디자인 수정
• 공유 기능 추가
• 블로거의 주 기술 명시하는 아이콘
  - 포스트 작성 시 사진 드래그해서 추가하는 기능