slice(-4).toUpperCase ==> 뒤에서부터 4자리만 잘라 대문자로 변환.
new Date() ==>오늘 날짜 한국표준시각등으로 출력됨.
변수에담기 ==> const day = new Date()
day.getFullYear() ==> 해당년도만 출력
day.getMonth() ==> 해당월만출력 -->한자리
day.getDate() ==>해당일만 출력 -->한자리.
new Date(특정한 날짜) ==> 지정한 날짜만 담게됨.
날짜부분은 게시판의 목록과 상세보기에서 사용되니 함수에 따로 넣어 컴포넌트를 만든 후,export, import 로 받아오기.
==> 이런식으로 공통된 것 빼놓고 사용하면 편하게 쓸수 있는데, 이게 적용이 되는 부분이 있고 안되는 경우가 있으니 유의할것.
오늘은 수정하는 페이지를 만들었다.
기존에는 props를 사용하여 자식한테 데이터를 전달하는 형태였는데 props사용을 한다면 너무 겹치는 내용들이 생기게된다. 게다가 솔직히 귀찮은 작업이 된다.
그런데, 이 문제를 해결할 수 있는 방법이 있다. 하나의 컴포넌트로 이용하는 방법이다.
일단, 등록페이지와 수정페이지는 겹치는 부분이 있다. 아예 그 presenter가 겹친다고 볼 수 있다. UI부분은 그대로쓰고 공통된것을 컴포넌트로 하여 router.push로 페이지를 이동해 주는 방법을 사용한다면 훨씬편리하다.
사실 복사해서 붙여넣기 하면 간단해 보일지 모르지만, 코드가 길어지게 되고, 유지보수등을 하려면 아무래도 하나의 컴포넌트를 쓰는 것이 훨낫다고 한다.
일일이 복사붙이기가 번거로울것 같긴하나, 아직까지는 잘 모르겠다.페이지의 props가 뚫고 뚫고 들어오는 것을 페이지 드릴링이라고 한다. 어제 페어분이 말씀하셔서 찾아본 기억이 있어 익숙한단어를 들으니 반가웠다. 하지만 이 방법은 권장되지 않는다.
그렇다면 props사용은 안하는게 좋나?
음.. 일단은 아직은 props에 익숙혀지는 것이 필요하여 많이 해보는게 좋으나, 실무에서는 하나의 컴포넌트로 묶는것이 좋다고 맨토님께서 말씀하셨다.
그러나 물론 두 화면에서 사용하는 UI가 다르면 하나 더 만드는 것이 효율적임을 명심.
각 자식 컴포넌트로 내보내는 쪽에 변수를 하나 넣어주고 값은 boolean형으로 넣어주면 텍스트를 넣는 것 보다 유지보수가 쉽다. 내보내는 변수가 키값으로 자식한테 들어오고 props로 사용이 가능해져 만약 edit = {false}로 등록하기 페이지의 자식에게 보내고 삭제하기 페이지에는 false를 보내, 공통되는 컨테이너의 등록하기, 삭제하기 페이지 버튼이나 제목을 자유롭게 바꿀 수 있게 연결이 가능하다.
이때는 삼항연산자를 사용하면 한줄로 끝낼수 있다.
수정하기
폴더구조 나누기.. boards/[_id]/edit ==> 이렇게 폴더 구조를 나눠 해당 아이디를 가지고 수정하기로 가는 구조로 만드셨다. 아직도 폴더를 나누고 하는것이 너무 어려운것같아 일단 따라해보았다.
edit = {false}를 적을때.. 만약 반대의 경우를 적지 않고 삼항연산자를 사용한 경우에는 false값으로 나오게된다.
이유? 반대 true일때를 넣어주지 않아 가져와지는것은 undifined인데 이것은 거짓같은 값으로 취급되는 값이기에 false가 리턴되기때문이다.
router.query.number ==> 컴포넌트가 하나로 합쳐진 경우에는 어디서 호출해도 불러와진다. 다만, 그 컴포넌트가 어디서 import되는지에 따라 주소가 달라지고, 그 주소의 번호나 id값이 있어야 호출된다는 것을 명심할 것.
알고리즘:
isNaN() ==> true를 리턴하는 경우는 숫자가 아닐때!
Number.isNaN(Number())=> 좀더 업격하게 검증!따라서 isNaN과 같은 값 true을 도출하기위해서는숫자로 비꿔 넣기!
