flex vs inline-flex

• flex로 지정된 flex container는 block 요소 성향
• inline-flex로 지정된 inline-flex container는 inline 요소 성향

댓글 공유

정의

hr 태그는 콘텐츠 내용에서 주제가 바뀔 때, 사용하는 수평 가로선이다.

HTML 문서에서 주로 내용을 구분하거나 주제의 변화를 정의한다

HTML5에서 변경된 사항

• HTML5 이전에서는 단순히 가로선을 나타냈지만, HTML5에서는 주제의 흐름 변경을 나타내도록 변경되었다.
• 시각적인 의미보다는 의미적 용어(semantic term)로 사용된다.

또한, HTML5에서는 hr 요소의 layout을 더 이상 지원하지 않으며 CSS를 대신 사용하도록 변경되었다.

CSS

1
2
3
4
5
6
7
8
9

.news::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 80%;
  height: 1px;
  background: #aaa linear-gradient(to right, #aaa, #fff)
}

• news라는 클래스의 가상 선택자로 css 스타일링 해줄 수 있다.

댓글 공유

한줄이 길어서 말줄임표 (…) 처리 해주고 싶을 경우

1
2
3

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

멀티라인인 경우

1
2
3
4
5
6
7

.element {
  height: 3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

• Webkit 기반 브라우저 (Chrome, Safari 등)에서 적용 가능하다.

댓글 공유

1. @import 방식으 CSS 최상단에 복붙

1

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.4/dist/web/static/pretendard.css");

2. font-family 설정

1
2
3
4
5
6

body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 400;
}

• font-family는 하나로 정해두고 굵기는 원하는 부분에서 font-weight로 조절한다.

댓글 공유

HTML5 역사

• W3C가 XHTML 2.0을 만들고 있었는데 하위 호환상 문제가 있어서 개발을 접었다

• 이후 2004년 브라우저 3대장(애플,모질라,오페라 sw)이 공동으로 설립한 WHATWG(Web Hypertext Application Technology Working Group)가 W3C와 별개로 Web Application 1.0과 Web Forms 2.0 만들어 냈다.

• 그리하여 WHATWG의 표준안을 대부분 수용하여 HTML5가 탄생하게 되었다.

• 초기의 웹은 단순히 하이퍼텍스트 문서(HTML)를 웹 브라우저에 나타내는 수준으로, 웹표준 기술이 지원하지 못하는 부분을 비표준적인 태그들과 Active X, Flash, Flex, SilverLight 등의 써드파티(Third Party) 플러그인이 대신하였다.

• 이로 인해 여러 웹브라우저별로 화면이 다르게 보이거나 특정 웹브라우저에서만 동작하는 웹 애플리케이션이 만들어지는 등 각종 호환성 문제가 발생하였습니다. 그 결과 개발자에게는 개발의 어려움을, 사용자에게는 웹 브라우저 선택 제한과 각종 플러그인의 설치라는 불편함을 안겨주었다.

• 이러한 문제점과 기능적인 한계를 안고 있던 기존 HTML은 HTML5에서 새롭게 추가된 요소와 다양한 API들을 통해 한 단계 발전된 웹 구현과 접근성 및 호환성 극대화를 목표로 삼게 되었다.

XHTML과 HTML 차이점

둘다 표준이지만 문법이 다르다. XHTML이 조금 더 엄격한 특징을 가진다.

XHTML은 XML로 재구성된 문법이다.

댓글 공유

흔히 웹을 사용하면서 select 태그를 클릭해서 options 들이 나타났을 때, select 태그 내부의 option을 클릭하면 해당 option이 선택되고, option 외부를 클릭했을 때, 나타났던 option들이 사라지도록 구현된 웹을 많이 경험했을 것이다.

나도 그래프를 CustomLegend의 요소를 클릭했을 때, 클릭한 Legend의 Line 그래프를 highlight 시켜주고, CustomLegend 내부의 요소 이외의 영역을 클릭했을 때, 클릭한 요소를 해제하도록 구현해보았다.

1. 선택된 그래프의 x축 값을 상태로 관리한다.

1

const [clickedGraph, setClickedGraph] = useState("");

2. CustomLegend에 이벤트 위임을 해준다.

1
2
3
4
5
6
7
8
9

const CustomLegend = () => {
  return (
    <ul id="CUSTOM_LEGEND">
      {payload.map((elem) => (
        <li key={elem.name}>{elem.value}</li>
      ))}
    </ul>
  );
};

• CustomLegend의 ul 태그에 id를 부여한다.
• li 요소를 클릭 이벤트를 이벤트 위임을 통해 이벤트 발생을 캐치할 수 있다.

3. 이벤트 핸들러 생성

1
2
3
4
5
6
7
8
9
10
11
12

const handleClickGraph = (e: any) => {
  const value = e.target.innerHTML;
  setClickedGraph(value);
};

const handleClickOutside = (e: any) => {
  const parentElem = e.target as HTMLElement;

  if (!targetElem.closest("#CUSTOM_LEGEND")) {
    setClickedGraph("");
  }
};

• 클릭이벤트가 발생한 요소의 가장 가까운 요소 중 id가 CUSTOM_LEGEND인 요소가 없으면 clickedGraph의 값을 빈 값으로 초기화 시킨다.

4. 브라우저에 이벤트 등록

1
2
3
4
5
6
7

useEffect(() => {
  document.addEventListener("click", handleClickOutside);

  return () => {
    document.removeEventListener("click", handleClickOutside);
  };
});

• 내가 지정한 영역은 ul 태그 안이고 내가 지정하지 않은 외부의 영역을 모두 다루기 위해서는 브라우저에 이벤트를 등록해줘야한다.
• useEffect는 함수형 컴포넌트에서 리액트 컴포넌트의 라이프사이클에 원하는 함수를 실행할 수 있도록 도와주는 훅이다.
  • return으로 함수를 반환하면 해당 함수는 컴포넌트가 소멸할 때, 실행된다.

렌더링 되기 이전에 브라우저에 이벤트를 등록해주고 해당 컴포넌트가 소멸할 때, 이벤트를 제거해줘야 컴포넌트가 렌더링 될 때마다 이벤트가 중복으로 등록되지 않아 성능상 문제를 해결할 수 있다.

댓글 공유

자바스크립트에서 날짜는 Date 객체로 다루곤 한다.

1
2
3

const date = new Date();

console.log(date); // Tue Aug 01 2023 22:32:45 GMT+0900 (Korean Standard Time)

• 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타낸다.

Date 객체도 다양한 메서드를 제공하는데, 개발자가 이를 다루기에 직관적이지 못하여 다루기가 까다롭다.

매번 chatGPT한테 물어볼 수도 없고 ..ㅎㅎ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const date = today.getDate();
const day = today.getDay();
const month = today.getMonth();
const hours = today.getHours();
const minutes = today.getMinutes();
const ms = today.getMilliseconds();
const sec = today.getSeconds();

console.log(today); // Tue Aug 01 2023 22:32:45 GMT+0900 (Korean Standard Time)
console.log(date); // 1
console.log(day); // 2 (0~6) 일 ~ 토
console.log(month); // 7 (0~11)
console.log(hours); // 22
console.log(minutes); // 32
console.log(ms); // 122
console.log(sec); // 45

• day를 숫자로 표현해주고 있으니 직관적이지 못하다. 우리나라는 월요일부터 시작으로 세는 사람이 많은데 일요일부터 시작하니…
• month도 왜 0부터 시작하는 것인지.. ㅋㅋ

그래서 날짜를 좀 더 쉽게 다루기 위해 다양한 날짜 라이브러리가 나왔다.

오늘은 그 중 date-fns 라이브러리를 알아볼 것이다.

date-fns

1

npm install date-fns --save

설치는 다음 명령어로 설치하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { format, compareAsc } from "date-fns";

format(new Date(2014, 1, 11), "MM/dd/yyyy");
//=> '02/11/2014'

const dates = [
  new Date(1995, 6, 2),
  new Date(1987, 1, 11),
  new Date(1989, 6, 10),
];
dates.sort(compareAsc);
//=> [
//   Wed Feb 11 1987 00:00:00,
//   Mon Jul 10 1989 00:00:00,
//   Sun Jul 02 1995 00:00:00
// ]

• format 메서드를 사용하여 날짜를 원하는 형식으로 바꿀 수 있다.

그 외에도 날짜를 서로 비교하여 우선순위를 매기거나 날짜를 더하고 뺄 수 있는 등 다양한 메서드를 사용하여 자유자재로 날짜를 다룰 수 있다.

예시로 날짜를 빼주는 메서드인 sub메서드만 알아보자.

1
2
3
4
5
6
7
8
9
10
11

// Subtract the following duration from 15 June 2017 15:29:20
const result = sub(new Date(2017, 5, 15, 15, 29, 20), {
  years: 2,
  months: 9,
  weeks: 1,
  days: 7,
  hours: 5,
  minutes: 9,
  seconds: 30,
});
//=> Mon Sep 1 2014 10:19:50

• 2017년에서 2년을 뺀다.
• 6월에서 9개월을 뺀다.
• 15일에서 1주일(7일)을 뺀다
• 나머지 8일에서 7일을 뺀다.
• 15시간에서 5시간을 뺀다.
• 29분에서 9분을 뺀다.
• 20초에서 30초를 뺀다.

결과값은 2014년 9월 1일 월요일 10시 19분 50초가 나온다.

댓글 공유