태호의 개발 블로그 태호의 개발 블로그

스터디노트/Front-end

• HTML Tag (progress, meter, summary, picture, datalist)

  스터디노트/Front-end 2022. 1. 16. 21:16

  progress, meter JS없이 태그만 가지고 prgress bar를 구현할 수 있다. meter 태그는 값이 높고 낮음에 따라 색상이 변함 (progress 태그보다 더 많은 옵션을 갖는다) summary 토글목록을 만드는 태그 오늘 점심메뉴는? 김치찌개

  Read More
• React - componentWillReceiveProps(newProps)

  스터디노트/Front-end 2021. 12. 4. 17:01

  componentWillReceiveProps(newProps) 새로운 속성에 따라 상태를 변경할 때. 기존 속성값은 this.props setState를 호출해도 재렌더링 되지 않는다. 속성값의 변경과 상관 없이 제렌더링이 될때마다 호출된다.

  Read More
• React Life Cycle

  스터디노트/Front-end 2021. 11. 25. 20:15

  class 컴포넌트의 life cycle Mount 컴포넌트가 처음 실행될 때 componentWillMount 호출 -> render로 DOM에 컴포넌트 부착 후 Mount가 완료되면 componentDidMount 호출 componentWillMount에서는 props나 state를 변경하면 안된다. componentDidMount에서 DOM에 접근 가능(setTimeout 등) 함수 컴포넌트의 life cycle useEffect 데이터의 개수에 따라 여러번 사용 // state가 변경 될 때마다 실행 useEffect(() => { // something }, [// state]); // 마운트 될 때 처음 한번만 실행 useEffect(() => { // something }, []); // 컴..

  Read More
• 웹 문서화면 이미지 다운로드 (dom-to-image)

  스터디노트/Front-end 2021. 11. 23. 15:32

  dom-to-image 웹에서 일부 내용을 이미지 파일로 내보낼 수 있게 해주는 라이브러리 DOM요소를 벡터나 레스터 이미지로 변환하는데 사용 사용법 domtoimage.toBlob(document.getElementById('태그 Id')) .then((blob) => { window.saveAs(blob, 'xxx.png'); }) 참고자료 https://www.npmjs.com/package/dom-to-image https://github.com/tsayen/dom-to-image

  Read More
• Redux

  스터디노트/Front-end 2021. 11. 18. 11:00

  Redux란?? 컴포넌트들이 state를 쉽게 공유할 수 있게 해주는 방식 A -> B -> C -> D -> E -> F로 접근 후 F -> E -> D -> C -> B -> A로 돌아오는 패턴을 A -> Store -> F 처럼 효율적인 접근을 가능하게 해준다. 2021-11-11 기준 Weekly Downloads 500백만건으로 인기 많다 Action 하나의 객체 State에 변화가 필요할 때 Action을 발생시킨다. type이라는 필드를 가지고 있어야한다. type : 어떤 동작인지 명시 (ex) "NUMBER_COUNT", "CHANGE_INPUT"...) Action Creator Action을 객체로 만들어주는 함수 export const changeType = (type) => { r..

  Read More