개발자의 개발 블로그

prop-types을 통해 props의 타입을 체크하려고 했는데 에러가 발생했다.

클래스를 함수로 부를 수 없다? 뭔말인지 한참 찾다가 발견했다.

이렇게 작성했다. 

자동생성이 아니라 하드코딩으로...

그런데, prototype으로 잘못 작성했다.

es6 이전 클래스 대신 사용하던 keyword이기 때문에 에러가 발생했다.

이와같이 propTypes로 작성해야한다.

또 주의할 점! 대문자가 아니라, 소문자  propTypes 이다.

static으로 선언된 무엇인가보다.

그리고, 타입 체크시에는 설치했던 prop-types를 사용한다.

이렇게 props의 타입을 체크하게 되면,

잘못된 형식의 props가 들어오게 되면, 

즉, 위에는 array인데 string이나 number 형태의 값이 넘겨지면,

(prop에 유효하지 않은 값이 전달되면)

자바스크립트 콘솔에 경고(Error)가 발생된다. 

화살표 함수는 

const func = () => console.log("리턴 생략"); (O) --> 정상

const func = () => return console.log("리턴 생략해야함"); (X) --> 에러

이렇게 중괄호 { }를 사용하지 않으면,

return을 포함한다는 암묵적인 규칙이 적용되므로 return을 작성하지 않는다.

만약, 함수의 코드가 길어져서 뒤에서 return을 해야한다면, 중괄호와 함께 return을 반드시 적어주어야한다.

const func = () => {

....

....

return number;

} (O) --> 정상

기억하자.

배열(array)에 있는 child는 반드시 고유한 key props를 갖어야한다.

리액트에서는 엘리먼트가 많을 경우 key를 설정해주어야한다. 

Link를 Router 밖에서 사용할 수 없다.

Link는 react-router-dom에서 가져와 쓸 수 있기 떄문에, Router에 의존적이다.

따라서, Link가 포함된 컴포넌트를 Router 안에 들어가 있어야 사용이 가능하다.

date를 받아서, 그 날짜를 기준으로 특정 날짜로부터 며칠 지났는지 확인하는 방법은 다음과 같다.

moment(date).add(-30,"days").format("YYYY-MM-DD")

만약, 오늘 날짜를 기준으로 50일 후를 구하고 싶다면?

moment().add(50,"days").format("YYYY-MM-DD") 으로 하면 된다.

format()에서 () 안에 아무것도 작성하지 않다도 된다.

하지만, 

이렇게 쓸데없이 긴 날짜+시간이 나오게 된다.

따라서, 원하는대로 변환할 수 있다.

YYYY-MM-DD도 되고

YY-M-D도 되고

YYYY년MM월DD일 도 된다.

원하는대로 format()안에 넣어 만들면 된다.

텍스트필드에, 잘못된 값을 집어넣거나 빈 값을 입력했다면 경고를 띄우고 싶다.

어떻게 하면 될까?

errorText라는 속성이 있었으나, 요즘은 error와 helperText를 사용하면 된다.

텍스트필드를 빨간색으로 변화시켜 에러처럼 보이게 만드는 것이 error 속성이다.

error는 true/false 즉, Boolean형으로 값을 지정할 수 있다.

조건을 걸면 된다.

요런식으로 사용하게 되면 ,조건에 따라 체크된다.

helperText의 경우, error 밑에 출력되는 문자열로 에러가 났을 때

어떤 이유로 에러가 발생했는지 알려주기 위한 용도로 사용된다.

DatePicker를 사용할 수도 있지만,

npm을 설치해서 리액트 캘린더를 사용하려고 한다.

먼저, 

https://www.npmjs.com/package/react-calendar

이 사이트에 들어가면 확인할 수 있다.

1. 설치

$ npm install react-calendar 또는

$ yarn add react-calendar으로 설치하면된다.

<Calendar /> 호출하게 되면, 달력이 나온다.

새로운 date 값을 얻기 위해서는 onChange 이벤트를 사용하면 된다.

또한, 오늘 날짜를 강조하고 싶다면, value값으로 Date() 를 주면 된다.

              <Calendar

                className={classes.calendar}

                onChange={this.onDateChange} 

                value={this.state.date}

              />

state에서는 

state= {

    date: new Date(),

}

이런식으로 있을 것이다. 

  onDateChange = date => { 

    this.setState({

      date: moment(date).format("YYYY-MM-DD")

    })

  };

이렇게 하게 되면, 선택한 날짜가 dete값으로 들어가 원하는대로 날짜를 찾을 수 있다.

그렇게 많이 사용되는 속성은 아닌 듯 하다.

여기

블로그에 가면, 자세하게 설명하고 있다.

솔직히, 읽어도 모르겠다.

뭔말인지..

소개

text-rendering CSS 속성은 렌더링 엔진에 텍스트 렌더링시 최적화 할 정보를 제공합니다.

속성값

auto

브라우저는 텍스트를 그리는 동안 속도, 판독성 및 기하학적 정밀도를 언제 최적화 할 것인지에 대해 숙련 된 추측을합니다. 이 값을 브라우저에서 해석하는 방법의 차이점에 대해서는 호환성 표를 참조하십시오.

optimizeSpeed

브라우저는 텍스트를 그릴 때 가독성 및 기하학적 정밀도보다 렌더링 속도를 강조합니다. 그것은 커닝과 합자를 사용할 수 없습니다.

optimizeLegibility

브라우저는 렌더링 속도와 기하학적 정밀도에 대한 가독성을 강조합니다. 이렇게하면 커닝과 선택적 합자가 가능합니다.

geometricPrecision

브라우저는 렌더링 속도와 가독성보다 기하학적 인 정밀도를 강조합니다. 커닝과 같은 글꼴의 특정 측면은 선형으로 확장되지 않습니다. 따라서이 값을 사용하면 해당 글꼴을 사용하는 텍스트가 잘 보입니다.

텍스트가 렌더링될때 최적화를 통해서 더욱 선명하게 나오게 하기 위해서 사용되는 속성인 것 같다.

아니면 말고..

굳이 사용할 필요... 사용해야 할 경우가 있을까? 

많이 없을 듯 하다..

일 / 월 / 년을 구하고 싶다면, Date() 를 커스텀하여 사용해야한다.

const date = new Date();

const curr_date = date.getDate();

const curr_month = date.getMonth() + 1; //Months are zero based

const curr_year = date.getFullYear();

이렇게하면

일

월

년

을 각각 구할 수 있다.

참고로 월은 +1을 해줘야한다. 1월은 0부터 시작하기 때문이다.

그 다음,  

const changeFormat = `${curr_year}-${curr_month}-${curr_date}`;

이런식으로

YYYY-MM-DD로 할 수 있다.

하지만, moment 를 사용하여 더욱 쉽게 구할 수 있다.

먼저, npm install moment로 설치해준 뒤,

이런식으로 format을 설정해주면,

동일한 결과가 나온다.

div는 블록 엘리먼트이다.

div안에 있는, div를 움직이려고 한다.

<div id="big"> 

<div id="small">HI</div> 

</div>

#big { width:500px; height:500px; background-color:#ffff00; }

#small { width:50px; height:50px; background-color:#ff0000; }

이렇게 하면, 다음과 같이 나온다.

이렇게 나온다.

여기서, 빨간색 박스를 정중앙으로 이동하고 싶다면?

일단, 가로 중앙으로 이동하는 방법은

1. margin: 0 auto

이렇게 해서, 

상 우 하 좌   순서를 0 auto 0 auto 로, 즉, 상하의 마진을 0으로, 그리고 우좌의 마진을 auto로 하게 되면,

양 쪽에 자동(auto)으로 알맞게 margin이 적용되면서 가운데 정렬이 된다. 

2. text-align:center; 

참고로, text-align 속성은 텍스트의 정렬 방향을 의미한다.

속성값으로

left: 왼쪽 정렬

right: 오른쪽 정렬

center: 중앙 정렬

justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

이렇게 하면... 안 된다. 왜냐하면 ,text-align은 블록 엘리먼트 안에 들어있는 inline 요소들을 정렬하는 명령어이다.

하지만, 위 같은 경우 HI 박스도 같은 블록 엘리먼트인 div이므로 이동하지 않는다.

그래서, 블록을  inline 엘리먼트와 같이 보이도록 변경을 해줘야하는데, 이것이 바로 

display: inline-block이다.

이것을 small에 집어넣으면, inline으로 표현되기 때문에, 

big에 들어있는 text-align에 의해 가로 기준 중앙으로 이동한다.

주의할 점은  display: inline으로 하면 안된다는 것이다.

이렇게 하게 되면, small이 가진 블록만의 너비와 높이뿐만 아니라 마진 적용을 할 수 없으며, 내용물만 블록이 된다.

사진을 보면 다음과 같다.

위 두 가지 방법 중 하나를 사용하면, 가로 정렬이 완성된다. 

그렇다면 세로 정렬은 어떻게 해야할까?

1. 노란색 big div에서 display: table-cell; 으로 표의 셀처럼 설정한 뒤, vertical-align: middle; 으로 작성하면 된다.

이렇게 하면, 세로 정렬이 된다.