Make Be BackEnd

React Storybook:목적: UI 컴포넌트를 독립적으로 개발하고 테스트하는 도구입니다.기능: 컴포넌트를 격리된 환경에서 렌더링하여 각각의 상태와 변형을 쉽게 확인할 수 있습니다. 이는 컴포넌트를 문서화하고, 개발자 간의 협업을 원활하게 해줍니다.사용 예시: 다양한 버튼 스타일, 상태(활성/비활성, 클릭됨/안 클릭됨 등)를 독립적으로 테스트하고, 이를 스토리로 문서화합니다.Tailwind CSS:목적: 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 빠르고 효율적인 스타일링을 도와줍니다.기능: 미리 정의된 클래스들을 사용하여 빠르게 스타일링할 수 있습니다. CSS를 직접 작성하는 대신, 필요한 유틸리티 클래스를 HTML 요소에 추가하여 스타일을 적용합니다.사용 예시: 와 같이 클래스..

> 클래스형 컴포넌트두 종류의 클래스 (Component, PureComponent)를 사용Component 클래스프로퍼티, state와 생명주기 함수가 들어있는 구조의 컴포넌트를 만들 때 사용PureComponent 클래스Component 클래스를 상속받은 클래스shouldComponentUpdate() 함수를 ‘얕은 비교’ 하도록 재정의‘얕은 비교를 통해 데이터가 변경된 경우’에만 render() 함수 호출 (반면 Component 클래스로 만들어진 컴포넌트는 항상 render() 함수를 호출)> 함수형 컴포넌트state가 없는 함수형 컴포넌트(SFC; Stateless Functional Component)state를 포함하지 않으며 데이터를 받아 출력할 컴포넌트를 반환함수형 컴포넌트에는 클래스 선..

React의 생명주기는 총 8종의 함수가 있다. 생명주기 함수는 개발자가 마음대로 호출할수 없고 리액트 엔진에서 자동으로 호출한다. constructor(props) 함수맨 처음에 생성될때 한번만 호출, 상태를 선언할 때 사용생성자 함수를 정의할 때는 항상 super()함수를 가장 위에 호출constructor(props){ super(props); // 이후에 추가적인 state 데이터 혹은 변수 선언 }render() 함수데이터가 변경되어 새 화면을 그려 할 때 자동으로 호출하는 함수static getDerivedStateFromProps(props, state) 함수정적 함수this.props, this.state 같은 방법으로 프로퍼티나 state값에 접근 할 수 없다, 만약 접근해야하는 경우 반..

useRef특정 DOM요소에 직접적으로 접근을 할 수 있다. 일반적으로 리액트는 직접적인 접근을 허용하지 않는다. (리액트는 상태(state)와 속성(props)을 통해 UI를 업데이트하고 관리한다.)DOM요소에 접근 하는 이유 ?특정 DOM요소에 접근직접적인 DOM조작이 필요한 경우비제어 컴포넌트(Uncontrolled Components)const 변수 = useRef(null);/* DOM 객체주소가 필요한 상황이 생기는 경우 , useRef를 사용한다.HTMLInputElement, 표준 HTML 입력 요소를 나타내고, TypeScript의 타입 시스템을 통해 타입 검사를 제공title 의 값을 null로 초기화 하는 이유는 초기화 시점의 DOM요소가 없기(처음 랜더링 될 때는 해당 요소가 없다)..

자바스크립트에서 특정 이벤트가 빈번하게 발생할 때, 이벤트 핸들러가 과도하게 호출되지 않도록 제어하는 두 가지 중요한 기술, 성능을 최적화하고, 불필요한 연산을 줄일 수 있다.디바운스(debounce)마지막으로 발생한 이벤트 이후 일정 시간 동안 추가 이벤트가 발생하지 않을 때만 이벤트 핸들러가 실행되도록 한다. 만약 디바운스 시간이 지나기 전에 새로운 이벤트가 발생하면 타이머를 리셋한다.예 : 사용자가 입력 필드에 타이핑할 때, 마지막 입력 후 일정 시간 동안 사용자가 입력을 멈추면 서버에 요청을 보내는 경우흔히 검색창에서 입력하다보면 하단에 연관 검색어 목록function debounce(func, delay) { let timer; return function(...args) { clearTime..

마운팅 (Mounting)컴포넌트가 DOM에 삽입되는 단계입니다.constructor(props):컴포넌트가 처음 생성될 때 호출됩니다. 상태를 초기화하거나 메서드를 바인딩하는 데 주로 사용됩니다.javascript코드 복사constructor(props) { super(props); this.state = { ... };}static getDerivedStateFromProps(props, state):컴포넌트가 마운트되기 전에 호출되며, props로부터 상태를 갱신해야 할 필요가 있을 때 사용됩니다. 이 메서드는 정적 메서드여서 this에 접근할 수 없습니다.javascript코드 복사static getDerivedStateFromProps(nextProps, prevState) { if (ne..