벨로퍼트 리액트 - 26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 componentDidCatch 로 에러 잡아내기 새 프로젝트 생성 $ npx create-react-app error-catch 에러가 발생하게 되면 아무것도 렌더링되지 않고 흰 페이지만 나타나게 됨. 실제 사용시에 흰 화면을 나타내는 대신, 에러가 발생했다는 것을 알려주도록 해야함. if (!user) { return null; } // user 값이 존재하지 않을 시 null 을 렌더링 // => 아무것도 나타나지 않음 = null checking // 아무것도 나타나지 않지만 에러는 발생하지 않음. 데이터를 네트워크 요청을 통해 나중에 받아오게 되는 상황이 발생하는 경우 null을 보여주거나 로딩중 ..
study/TIL
벨로퍼트 리액트 - 24. 클래스형 컴포넌트 클래스형 컴포넌트 : 지금은 잘 상용하지 않으나 유지보수와 지원이 되지 않는 경우를 대비해 알아둘 필요 있음 클래스형 컴포넌트 사용방법 import React, { Component } from 'react'; class Hello extends Component { render() { const { color, name, isSpecial } = this.props; return ( {isSpecial && *} 안녕하세요 { name } ); } } Hello.defaultProps = { name: '이름없음' } export default Hello; render() : 필수! 이 메서드에서 렌더링하고싶은 JSX를 반환하면 된다. this.props :..
벨로퍼트 리액트 - 23. Immer를 사용한 더 쉬운 불변성 관리 불변성 관리 리액트에서 배열, 객체를 업데이트 할때는 직접 수정하는것이 아니라 불변성을 지켜주면서 업데이트를 해야한다. push, splice등의 함수를 사용하거나 n번째 항목을 직접 수정하는 것이 아니라 concat, filter , map 등 동작 후 새로운 배열을 만들어주는 함수를 사용해야 한다. // 잘못된 예 const object = { a: 1, b: 2 }; object.b = 3; // 바른 예 const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; 대부분의 경우 …(스프레드 연산자)또는 배열 내장함수를 사용하면 되지만 데이터의 구조가 복잡해질경우 불..
벨로퍼트 리액트 - 21. 커스텀 Hooks 만들기 커스텀 Hooks - 반복되는 로직을 쉽게 재사용하기 위해 사용. 보통 use라는 키워드로 시작하는 파일을 만들고 안에 함수를 작성해서 사용함. 커스텀 Hooks를 만드는 방법 : useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능을 구현한 후 컴포넌트에서 사용하고싶은 값들을 반환해주면 됨. 벨로퍼트 리액트 - 22. Context API를 사용한 전역 값 관리 Context API : 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수 있음. 이 값은 꼭 상태를 가리키지 않아도 됨! 사용법 - React.createContext() 함수 사용 const UserDispatch =..
벨로퍼트 리액트 - 19. React.memo를 사용한 컴포넌트 리렌더링 방지 React.memo : 컴포넌트의 props가 바뀌지 않았다면 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 함수. 컴포넌트에서 리렌더링이 필요한 상황에서만 하도록 설정할 수 있다. 사용법 export default React.memo(CreateUser); 적용후, input을 수정할때는 하단의 UserList는 리렌더링이 되지 않는다. 그러나 User 중 하나라도 수정하면 모든 User들이 리렌더링이 되고 CreateUser도 리렌더링이 된다. ⇒ users 배열이 바뀔때마다 onCreate도 새로 만들어지고 onToggle, onRemove도 새로 만들어지기 때문. ⇒ onCreate, onToggl..
7월 11일 오늘의 스터디로그 오늘은 프로그래머스 코딩테스트 한문제 풀었음! 문제는 없는 숫자 더하기. 링크 이건 내가 작성한 코드인데.. 아직 공부가 부족해서 지금은 이렇게가 최선이다! 좀 더 공부하면 더 간단하게 잘 쓸수 있겠지 다음번에는 좀더 공부해서 똑같은 문제를 다시 풀어보고싶다 그러면 좀 더 나은코드가 됐는지 볼 수 있을거같다 실행결과는 모두 성공! 그래도 직접 만든 코드로 문제가 잘 풀리니까 좋더라 그리고 패캠 프론트 국비강의 듣고 오버워치 캐릭터 선택창 만들었음! 이제 css 끝났다 내일부터는 js들어감 생각한걸 잘 정리해서 말하거나 적고싶은데 아무래도 노력이 많이 필요할거같다. 그래서 사실 쉽지는 않지만 벨로그도 다시 적어보려고..ㅋㅋㅋㅋㅋ 아무것도 안하는거보단 뭐라도 하는게 낫다 화이팅..
태그 : 삽화, 다이어그램, 사진 등 문서의 주요 흐름과는 독립적인 콘텐트를 정의. 문서의 내용과는 연관성을 가지나 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이어서 제거해도 문서의 흐름에 영향을 주어서는 안됨. 그림 등의 콘텐츠를 표현하는 태그이지만 태그처럼 src, alt 등은 사용할 수 없고 이미지를 렌더링 하지도 않는다. 사용법은 태그로 이미지를 감싸고 설명이 필요할 경우 태그로 설명을 달면 됨. ex) 이미지에 대한 설명 태그 : figure 요소를 위한 캡션을 정의할때 사용. figure 태그의 첫번째 또는 마지막 자식으로 하나만 사용할 수 있음.
보호되어 있는 글입니다.
보호되어 있는 글입니다.
