스택큐힙리스트

GoF 구조 패턴(Structural Patterns) 중 Adapter와 Facade는 ‘낡은 인터페이스’와 ‘복잡한 서브시스템’을 한 번에 다루는 만능 열쇠다. 1️⃣ 왜 구조 패턴이 필요한가?Adapter 패턴은 ‘호환되지 않는 인터페이스’를 일치시켜 기존 코드를 재사용하게 해 준다. 특히 프론트엔드에서 백엔드 응답 형태가 제각각일 때 효과가 크다.Facade 패턴은 복잡한 하위 시스템을 단일 진입점으로 숨겨, 클라이언트 코드(컨트롤러·서비스·컴포넌트)의 결합도를 낮춘다.2️⃣ React에서 Adapter로 API 데이터 ‘갈아입히기’// src/adapters/userAdapter.tsexport interface UserDTO { id: string; name: string; avatarU..

제 React 컴포넌트가 두 번 렌더링됩니다. 따라서, 한 줄씩 디버그를 하기로 결정했고, 문제는 여기에 있습니다: if ( workInProgress.mode & StrictMode) { instance.render(); } React-dom.development.js 엄격 모드 때문인가요? 비활성화할 수 있을까요? 엄격 모드란 무엇인가요? 필요한가요?답변 1StrictMode는 컴포넌트를 두 번 렌더링하여 코드의 문제를 감지하고 경고하는 것을 목적으로 합니다 (개발 중에만 발생하며 프로덕션에는 발생하지 않음) (이는 매우 유용 할 수 있습니다). 앱에서 StrictMode를 활성화했지만 활성화하는 방법을 기억하지 못하는 경우, 초기에 앱을 만들 때 create-react-app 또는 유사한 도구를 사..

나는 새로운 React Hooks의 useEffect API를 시도하고있는데, 무한 루프에서 계속 실행되는 것 같아요! useEffect 안의 콜백이 한 번만 실행되도록 하고 싶습니다. 참고로 아래는 내 코드입니다: Run code snippet을 클릭하여 콘솔에 무한히 Run useEffect 문자열이 출력되는 것을 확인하세요. function Counter() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log('Run useEffect'); setCount(100); }); return ( Count: {count} ); } ReactDOM.render(, document.querySelector('#a..

경고: 컴포넌트가 텍스트 형식의 제어되지 않는 입력을 제어되는 입력으로 변경하고 있습니다. 입력 요소는 제어되지 않는 상태에서 제어된 상태로 전환하거나 그 반대로 전환해서는 안됩니다. 컴포넌트의 생명주기 동안 제어되는 입력 요소 또는 제어되지 않는 입력 요소를 사용하기로 결정하십시오.* 다음은 나의 코드입니다:constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); } .... onChange(field, e){ let fields = this.state.fields; fields[field] = e.target.value; this.setState({f..