render와 mount에 대한 개념의 차이점을 모호하게 알고 있었다. state 값이 변하면서 다시 렌더가 될때 마운트도 함께 실행이 되는것으로 생각을 하였다. 그래서 마운트가 되지않아 한박자씩 느린 반응이 나타났었다. 제일 처음 컴포넌트가 render되는 경우는 component가 mount 되지만 props 또는 state가 변경되어 render될 때는 mount가 되지 않는다. 이를 해결하기 위해서 state나 props의 변화가 있을경우 이 변화를 감지하는 작업을 해주어야 한다. ex) shouldComponentUpdate(nextProps, nextState) 나, componentWillRecieveProps(nextProps)

main 페이지 렌더링을 할 때 read more 버튼을 만들어 한번에 렌더가 아니라 나눠서 렌더를 해주는 방식으로 변경하려고 시도 하였다. const [articleArr, setarticleArr] = useState(articleComponent) articleArr에 잘려진 목록들을 넣고 setarticleArr를 통해서 추가해주는 형식으로 만들려고 하였다. 하지만 articleArr가 유사배열 처럼 나타나게 되었고 메소드들이 하나도 먹히지 않았다. Array.protptype.slice() 위의 메소드를 사용하여 복사를 시도해 보았지만 결과는 똑같았다.

const [tagArr, settagArr ] = useState([]) const filteredOptions = TagName["TagName"].filter( (o) => !tagArr.includes(o)) 훅스 값을 사용하여 필터를 만드는데 처음엔 never type error가 발생하였다. never type 이란 절대로 발생하지 않는 값의 타입을 나타냅니다. 예를 들어, never는 함수 표현식의 리턴 타입이거나, 항상 예외를 던지는 화살표 함수 표현식이거나, 리턴하지 않는 표현식입니다. 변수는 결코 true가 될 수없는 어떤 타입의 가드에 의해 좁혀 질 때 타입 never를 획득합니다. type 설정을 해주지 않아서 발생한 에러 였다. 아래와 같이 useState에 type을 설정해주니 ..

Sass 를 사용하여 3rd 라이브러리들의 필요한 부분만을 import하는 글을 번역해 보았다. React 앱 생성에서 Sass를 사용하는 단계는 다음과 같다: 1. [node-sass](https://www.npmjs.com/package/node-sass)를 설치: npm install node-sass 2. .css을 .scss 파일로 변경 3. .scss 를 사용하기 위해 import 변경 React에서 Sass로 우리는 우리가 필요한 파일만 가져올 수 있다. 1. npm install bulma -S 필요한 파일들을 import 한다. // import using~ @import "~bulma/sass/utilities/_all.sass"; @import "~bulma/sass/_all.sass..

노션으로 포트폴리오 만드는 작업을 진행하였다. 이전에 했던 프로젝트들의 코드를 되돌아 보는 시간을 가질 수 있었다. https://www.notion.so/ockkk/Hwang-Jongock-76bfdf5edada4da683b962e76892685f

main page의 전체적인 css를 수정하였다. 왼쪽에 위치하던 tag 박스를 타이틀 옆으로 이동 시켰다. 헤더 boder 라인을 삭제하고 bodt 부분과 구분이 가도록 body backhground에 색을 적용하였다.