React로 post modal 만들기

React로 post modal 만들기

• emotion 스타일 적용안됨.

• lint 규칙 컴파일 오류

• js, tsx, jsx, ts 구분이 어려움

• 파일구조 파악하기

• 브랜치 파서 pr 날리기까지

• 어디에서 테스트하지? 내 길은 어딘가..?

• 개념을 배웠는데 적용을 못해..

• api 테스트 토큰이 필요할 때 로컬 스토리지를 사용한다면 브라우저에서 토근 받고 로컬에서 테스트해도 된다.

• useRef로 돔객체를 선택할 수 있음. 그리고 current.value 사용. 이때 전역에 const로 해당 ref가 선언되어있어야 함.

• api의 _는 슬래쉬를 의미함.

• token의 형태를 조절할 땐 JSON.parse와 replace 등으로 원하는 형태로 만들어주어야 함.

• 실전경험이 부족함을 많이 느낌.

• emtion/styled와 styled-component의 차이

• 깃모지 커밋의 경우는 git add 다 하시고 gitmoji -c 하면 커밋 메시지입력하는 창이 나올텐데 거기서 하시면됩니다.

• textarea 안에 div contenteditable true로 넣어 배경색 만듦!

• 새로운 미션! 헬퍼 함수 만들기
• createdAt, updatedAt 등 string으로 전달되는데 이를 한글로 parsing할 수 있는 함수
• 회원가입 시에 익명 뒤에 붙을 랜덤한 숫자 혹은 문자열 생성 함수

# git add *.txt

헬퍼함수 만들기

function getCurrentDateTime(value) {
  const today = new Date();
  const timeValue = new Date(value);
  const betweenTime = Math.floor(
    (today.getTime() - timeValue.getTime()) / 1000 / 60
  );
  const hour = today.getHours();

  if (betweenTime < 1) return "방금전";
  if (betweenTime < 60) {
    return `${betweenTime}분전`;
  }

  const betweenTimeHour = Math.floor(betweenTime / 60);
  if (betweenTimeHour < 24) {
    return `${betweenTimeHour}시간전`;
  }

  //   필요시 추가
  //   const betweenTimeDay = Math.floor(betweenTime / 60 / 24);
  //   if (betweenTimeDay < 365) {
  //     return `${betweenTimeDay}일전`;
  //   }

  const currentDateTime = {
    year: today.getFullYear(),
    month: today.getMonth() + 1 + "월",
    date: today.getDate() + "일",
    time:
      (hour >= 12 ? "오후 " : "오전 ") + (hour % 12) + ":" + today.getMinutes(),
  };

  return currentDateTime;
}

const adjective = [
  "성질 고약한",
  "친절한",
  "용감한",
  "어마어마한",
  "출세한",
  "엉뚱한",
  "험악한",
  "피곤한",
  "미끈미끈한",
  "불쌍한",
  "분한",
  "똑똑한",
  "부유한",
  "관대한",
  "행복한",
  "편안한",
  "서운한",
  "쓸쓸한",
  "답답한",
  "순진한",
];

const verbs = [
  "운동하는",
  "건드리다",
  "괴롭히다",
  "깨지다",
  "끌리다",
  "노려보다",
  "따지다",
  "미루다",
  "반짝이다",
  "부러워하다",
  "부수다",
  "밥먹다",
  "조르다",
  "해내다",
  "혼나다",
  "혼내다",
  "취하다",
  "주저앉다",
  "잊히다",
  "앓다",
];

function editAdj(str) {
  return str.replace(str.slice(str.length - 1), "해서");
}
function editVerb(str) {
  return str.replace(str.slice(str.length - 1), "는");
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

// return 예시 : 답답해서 노려보는 개발자
function generateName() {
  const name =
    editAdj(adjective[getRandomInt(0, adjective.length)]) +
    " " +
    editVerb(verbs[getRandomInt(0, verbs.length)]) +
    " 개발자";
  return name;
}

[HTML] Open graph (오픈 그래피, og 태그)

1. og:description - 사이트의 설명.

2. og:title - 사이트의 제목 태그.

3. og:type - 사이트의 종류 스타일. 예) video.movie

4. og:locale - 사이트의 언어. 기본값은 en_US, 한글의 경우는 ko_KR.

5. og:image - 사이트를 나타낼 대표 이미지

<Helmet defaultTitle="DevBook">
  <link
    href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
    rel="stylesheet"
    type="text/css"
  />
  <meta property="og:description" content="개발자들의 감정 공유를 위한 공간" />
  <meta property="og:title" content="DevBook:떼북" />
  <meta property="og:type" content="website" />
  <meta property="og:locale" content="ko_KR" />
  <meta property="og:image" content="@/app/image/black_white.svg" />
  <meta property="og:url" content="https://moominil-devbook.netlify.app/" />
</Helmet>