반응형 모달 다이얼로그2 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 85 (포털(차원 이동), 참조 객체 전달) 목차포털(차원 이동)참조 객체 전달오늘 하루를 돌아보며 포털(차원 이동)포털(Portal)을 사용하면 애플리케이션 영역을 벗어나 특정 위치에 컴포넌트를 렌더링할 수 있다. 포털을 통해 컴포넌트가 어느 위치에든 렌더링될 수 있으면서 다른 리액트 컴포넌트와 동일하게 작동한다. 렌도링된 컴포넌트가 DOM의 어느 위치에 있더라도 리액트 컴포넌트 트리에 포함되기 때문이다. 즉, 원하는 DOM 위치에 컴포넌트를 자유롭게 렌더링할 수 있다는 뜻이다. 포털을 사용하려면 우선 포털 전용으로 사용할 DOM 요소를 만들어야 한다. 에 직접 추가하는 것보다는 별도로 요소를 만들어서 그 안에 렌더링하는 것이 좋다. 그렇게 하면 코드 디버깅도 쉬워지고, 하위에 여러 요소가 뒤섞여 혼란스러워지는 것도 막을 수 있기 때문이다.Re.. 2025. 9. 9. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 37 (UI 컴포넌트(구성 요소), 디버깅) 목차UI 컴포넌트(구성 요소)오프 캔버스(Off Canvas)모달 다이얼로그(Modal Dialog)디버깅(Debugging)오늘 하루를 돌아보며 UI 컴포넌트(구성 요소)JavaScript 초보 개발자에게 가장 중요한 단계는 아이디어를 실제 작동하는 프로토타입으로 구현하는 것이다. 빌트인 컴포넌트(Native Component)가 없을 때는 직접 컴포넌트를 만들어야 한다.수업 시간에는 오프 캔버스(Off Canvas) 메뉴와 모달 다이얼로그(Modal Dialog)를 만들어 봤다. 오프 캔버스(Off Canvas)오프 캔버스 메뉴는 화면(캔버스) 밖에 숨어 있다가 버튼을 누르면 화면 안으로 밀려 들어오는 메뉴다. 브라우저 창 바깥에 위치해 있다가 버튼을 누르면 화면을 오른쪽으로 밀고, 다시 버튼을 누르.. 2025. 6. 17. 이전 1 다음 반응형
