소소하냐

Modal Popup(Layer Popup)을 제어할 수 있도록 하고 싶습니다. 결과물 - 여러 개 모달 팝업이 중첩될 수 있도록 한다. - Dimmed 처리도 함께 돼야 한다. 주어진 Html 조건 * root 영역 바깥에 dimmed 영역이 있다. * modal popup 영역은 Layout 컴포넌트에 위치한다. 소스 파일 간략 설명 * common.css : - 모달 팝업 관련 css 추가 * index.html : - 하위에 영역 추가됨 (dimmed 처리 위함) * Layout.js : - 모달 팝업 제어용 openModalPopup, closeModalPopup 이벤트 추가 - {modalPopup} 추가하여 모달 팝업이 해당 위치에 표시되도록 함 - 로 이벤트 전달 * Modal.js : -..

Lnb, Top 영역은 컴포넌트로 빼더라도, 모든 페이지마다 전체 화면을 감싸는 영역과 Lnb, Top 영역을 반복해서 작성하는 건 불편합니다. 페이지에서는 해당페이지의 내용(Contents)만 작성하고 싶습니다. [ 원하는 결과물 ] - Layout (공통으로 감싸는 영역) : 바깥의 빨간색 테두리 영역 - Top(GNB) : 상단 메뉴 영역 (파란색 테두리) - LNB : 좌측 메뉴 영역 (파란색 테두리) - Contents 부분은 Route로 매핑하여 Contents 부분만 변경되도록 (검은색 영역) ==> 각 페이지 컴포넌트는 Contents 영역만 작성하면 되도록 [ 폴더 구조 추가 ] - /commons 폴더 : 컴포넌트가 아닌 순수 자바스크립트 공통 함수들 모음 - /components 폴더..

이전 기록에서 프로젝트 생성까지 진행하였습니다. 이번 기록에서는 Layout 화면을 컴포넌트로 분리 전, 샘플 페이지로 표현하고 싶은 부분을 대략 작성하는 것까지 입니다. (다음 기록에서 Lnb, Top, Contents로 분리하는 부분을 작업하려고 합니다.) css는 따로 컴포넌트화 하지 않고, 전체적으로 참조하도록 진행할 예정입니다. 1. Prettier 설치 및 설정 1-1. 사용이유 * 정해진 코딩스타일에 맞추어 저장되도록 * 본인 작성시에도 편하고, 여러 명이 함께 개발할 때 코딩 스타일을 자동으로 맞추어주니 편함 1-2. 설치 npm i prettier --save-dev 1-3. 코딩 스타일 지정 .prettierrc.js : 해당 파일 없을 경우 default 값으로 지정, 별도 지정하려면..

React로 관리자 사이트를 만들게 되어, 기록할 겸 남겨보기로 합니다. 실제 프로젝트를 공유할 순 없으니, 실 프로젝트를 하면서 겪은 내용들을 테스트 프로젝트에 풀어내 볼 계획입니다. (계획대로 될지는.... 모르겠습니다. ) [ 작업자 환경 ] * Window 사용 * Git : 2.37.1 버전 * Node.js : 18.11.0 * 에디터 : WebStorm 1. 프로젝트 생성 : sosohanya-react-admin 1-1. 프로젝트가 생성되길 원하는 디렉토리로 이동 ( 예: c:\project\react ) 1-2. 우클릭 > Git Bash 열기 (또는 명령 프롬프트열고 해당 폴더로 이동) 1-3. 프로젝트 생성 명령어 실행(CRA) : `npx create-react-app sosohan..