EJ의 DEVLOG 💻

[ 버그 발생 ] firefox 브라우저에서 빈화면으로 보인다는 연락을 받았다. [ 현황 파악 ] 상황을 판단해보니 다음과 같았다. chrome, safari에서는 정상적으로 표시되고 있음. firefox에서는 빈화면으로 표시되고 있었으며, 콘솔에 "This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “”. 메세지가 표시됨. index.html이 403으로 반환됨. 웹 브라우저에서 웹 페이지를 렌더링 할 때, DOCTYPE을 해석해서 표준 모드인지, 쿼드 모드인지를 결정하는데 index.html이 정상적으로 반환되고 있지 않은 상태여서 DOCTYPE이 선언되지 않은 쿼크 모드로 판단하고 있었다. (참고로 우리쪽 ..

공통점 1. 초기화 단계 두 프레임워크 모두 컴포넌트 초기화 단계에서 특정 메서드를 실행한다. Angular : ngOnInit React : constructor, componentDidMount 2. 소멸 단계 두 프레임워크 모두 컴포넌트 소멸 단계에서 특정 메서드를 실행한다. Angular : ngOnDestroy React : componentWillUnmount 차이점 1. 변경 감지 (Change Detection) Angular 변경 감지 메커니즘을 내부적으로 처리한다. 컴포넌트의 상태나 데이터가 변경될 때마다 Angular는 컴포넌트의 뷰를 업데이트한다. ex) ngOnChanges, ngDoCheck React Virtual DOM을 사용하여 변경 감지를 수행한다. 컴포넌트의 상태나 속성..

에러 경계 (Error Boundary) React 애플리케이션에서 컴포넌트 트리 하위에서 발생한 에러를 처리 방법을 제공하는 컴포넌트이다. 애플리케이션의 특정 부분에서 발생한 에러를 부모 컴포넌트에서 처리할 수 있도록 한다. 애플리케이션 최상위에서 사용된다. 필요에 따라 여러 개의 에러 경계를 중첩해서 사용할 수 있으며, 여러 에러를 독립적으로 처리 할 수 있다. 애플리케이션 일부에서 발생한 에러로 전체 애플리케이션의 렌더링이 중단되는 것을 방지 할 수 있다. static getDerivedStateFromError() 자식 컴포넌트에서 에러가 발생했을 때 호출 되는 정적 메서드이다. 에러 상태를 컴포넌트에 반영할 수 있다. componentDidCatch() 생명주기 메서드 중 하나 자식 컴포넌트에서..

componentWillUnmount() 생명주기 메서드 중 하나 컴포넌트가 DOM에서 언마운트(제거) 되기 전에 호출된다. 리소스 해제, 타이머 제거, 이벤트 리스너 해제 등 컴포넌트 정리 작업을 수행 할 수 있다. import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); this.state = { timerId: null, }; } componentDidMount() { // 컴포넌트가 마운트된 후에 타이머를 설정 const timerId = setInterval(() => { console.log('Timer is ticking...'); }, 1000..

static getDerivedStateFromProps() props로부터 상태를 동기화 하고자 할 때 호출하는 메서드 마운트 이후에도 props로부터 상태를 업데이트 할 필요가 있을 때 호출한다. shouldComponentUpdate() 생명주기 메서드 중 하나 컴포넌트 업데이트(렌더링) 여부를 결정한다. render() 컴포넌트 UI 렌더링을 수행한다. getSnapshotBeforeUpdate() 생명주기 메서드 중 하나 최근에 렌더링 된 결과가 DOM에 반영되기 직전에 호출되는 메서드 이다. componentDidUpdate() 생명주기 메서드 중 하나 업데이트가 완료된 이후에 호출되는 메서드 이다. import React, { Component } from 'React' class MyCom..

counstructor() 컴포넌트 생성 시 가장 먼저 호출되는 첫번째 메서드 초기 상태 설정 및 데이터 바인딩을 수행한다. state getDerivedStateFromProps() props로부터 상태를 동기화 하고자 할 때 호출하는 메서드 render() 컴포넌트 UI 렌더링을 수행한다. componentDidMount() 생명주기 메서드 중 하나. 컴포넌트가 렌더링이 완료 되고 DOM에 마운트 되고난 이후에 실행되는 메서드 초기 데이터 로딩 혹은 외부 데이터 요청 등의 비동기 작업을 실행한다. import React, { Component } from 'React' class MyComponent extends Component { constructor(props) { super(props); /..

React에서 컴포넌트가 렌더링 되는 케이스는 다양하다. 초기 렌더링 : 컴포넌트가 초기 생성되고 DOM에 마운트 될 때 props가 변경될 때 state가 변경될 때 부모 컴포넌트가 렌더링 될 때 컴포넌트 update 관련 생명주기 메서드가 실행되었을 때 : shouldComponentUpdate, componentDidUpdate 등등.. React 렌더링 주기는 컴포넌트가 언제 렌더링 되고, 업데이트 되는지에 대해 설명한다. (생명주기 메서드는 컴포넌트의 생성, 업데이트, 소멸에 관한 메서드에 대한 내용이므로 개념이 다름!) 1. 생성 단계 (Mounting) counstructor() state getDerivedStateFromProps() render() componentDidMount() R..

생명 주기 메서드는 컴포넌트가 특정 상태에 도달했을 때 자동으로 호출된다. ex) 컴포넌트 생성, 업데이트, 제거 등등... React의 주요 생명 주기 메서드는 다음과 같다. 1. componentDidMount() 컴포넌트가 렌더린 된 직후에 호출되는 메서드이다. 주로 초기 데이터 로딩, 외부 라이브러리 초기화 등에 사용된다. import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); } componentDidMount() { // 초기 데이터 로딩 } render() { return (MyComponent); } } export default MyComp..

전개 연산자(`...`) 사용 이전 객체의 속성을 그대로 가져오면서 새로운 데이터를 추가하거나 덮어쓰는 방식으로 객체를 복사한다. (불변성 유지) const [myObject, setMyObject] = useState({ name: 'John', age: 25 }); const updateObject = (newData) => { setMyObject((prevObject) => ({ ...prevObject, ...newData, })); }; console.log(updateObject({ age: 26 })); // { name: 'John', age: 26 } Object.assign() Object.assign(target, source1, source2, ...); 원본 객체에서 속성을 다른..

State에는 JavaScript에서 지원하는 모든 타입의 값이 할당될 수 있다. ex) string, number, boolean, array, object 등등... 그 중 핵심은 State 값이 불변을 유지하면서 업데이트 되어야 한다는 점이다. 배열 타입 State 업데이트 방법은 많지만 이하 세 가지 방법에 대해 살펴보려고 한다. concat() 사용 배열에 새로운 요소를 추가하여 새로운 배열을 만드는 JavaScript 배열 메서드 중 하나이다. 기존 배열을 변경하지 않고 새로운 배열을 반환한다. (불변성 유지) const [myArray, setMyArray] = useState([1, 2, 3]); const addElementConcat = (newElement) => { setMyArra..