상황최근 회사 프로젝트(react + python)에서 프론트엔드 작업 중 사이드바를 열고 닫을 때 간헐적으로 대시보드 상의 차트 오른쪽에 여백이 생기는 현상을 발견했다.해당 증상은 간헐적으로 발생하였고, 사이드바의 너비(width)만큼 생긴다는 것을 확인하였다.증상 분석사이드바를 열면 메인 화면(차트 포함)이 오른쪽으로 밀림사이드바를 닫으면 다시 원위치 되어야 함하지만 간헐적으로 차트의 오른쪽에 여백이 남는 현상 발생아래 이미지처럼 차트 오른쪽이 padding된 것처럼 비어 있는 증상이 발생함보안을 위해 이미지의 내용은 masking 처리하였음을 참고원인 분석프로젝트의 레이아웃 구조는 대략적으로 다음과 같다. // 이 안에서 CustomECharts 컴포넌트 사용상위 컴포넌트인 layout...

react 데이터 흐름 react에서의 데이터 흐름 컴포넌트로 생각하기 react의 개발 방식의 가장 큰 특징인 컴포넌트 단위(페이지 단위x)로 시작한다는 점을 다시 떠올려 보자 → 페이지를 만들기 이전에, 컴포넌트를 먼저 만들고 조립(상향식으로 앱을 만듬) → 테스트가 쉽고, 확장성이 좋음 단일 책임 원칙: 하나의 컴포넌트는 한가지 일을 처리하는 게 이상적이다 데이터는 위에서 아래로 흐른다(데이터 흐름은 하향식) 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달 받을 수 있다 → 데이터를 전달하는 주체: 부모 컴포넌트 → 부모 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다 부모가 자식에게 데이터를..

노마드코더 사이트: ReactJS로 영화 웹 서비스 만들기 강의를 통한 보충 학습 2 function 컴포넌트 -> class 컴포넌트로 바꿔서 작성 why? 편한 function 컴포넌트 나두고 class 컴포넌트라는 걸 씀? -> class 컴포넌트가 가진 state를 활용하기 위함이다 state는 객체(Object) : 컴포넌트의 데이터(가변적)를 넣는 공간이라 보면 된다 class 컴포넌트는 return 을 바로 갖지 못한다 대신 render 함수를 사용해서 활용 리액트는 자동적으로 모든 class 컴포넌트의 render 함수를 실행한다 //기존의 function 컴포넌트 -> class 컴포넌트로 전환해서 작성 class App extends React.Component{ // React cla..

노마드코더 사이트: ReactJS로 영화 웹 서비스 만들기 강의를 통한 보충 학습 * 부모/자식 컴포넌트 * map 메소드를 활용한 동적인 컴포넌트 처리 * props 가 동작하는 과정 * props 에 대한 검증 방법 * 전체 코드 내용 정리(현재까지의 App 컴포넌트) 부모/자식 컴포넌트 부모 컴포넌트인 App 에서 자식 컴포넌트인 Food 에 props를 전달 부모 컴포넌트에서 자식 컴포넌트를 호출?하면서 전달할 props를 설정해 준다 function App() { return ( {foodILike.map(eachFood => { //부모 컴포넌트인 App 에서 자식 컴포넌트인 Food에 props를 전달 return //동적으로 작동하도록 map 메서드를 사용 // Food에 name, pic..

React State & Props 학습 목표 * state, props의 개념 * React 함수 컴포넌트(React Function Component)에서 state hook을 이용한 state 정의 및 변경 * React 컴포넌트에 props 전달 * 이벤트 핸들러 함수 생성 및 사용 * 실제 웹 애플리케이션의 컴포넌트 분석하기 * 개발시 state와 props의 위치 정하기 * React의 단방향 데이터 흐름(One-way data flow)에 대한 이해 State & Props Intro Props vs. State(상태) props는 외부로부터 전달 받은 값 state는 내부에서 변화하는 값(컴포넌트 안에서만 지지고 볶고) Props & State 구분하기 예제 Props // 불변 하는 값 ..

React SPA 학습 목표 * SPA(Single-Page Application)의 개념 * SPA의 장, 단점 * 와이어프레임을 보고 컴포넌트 구분하기SPA(Single-Page Application) SPA의 등장 배경, 개념, 장단점 SPA의 등장 배경과 개념 전통적인 웹사이트에서는 사용자가 웹사이트 내 다른 페이지 이동시 브라우저가 매번 “페이지 전체”를 불러옴 → 페이지 전체를 불러오는 행위: 깜빡인다 → 중복되는 요소들도 매번 로딩해서 불필요한 트래픽 발생시키고 느리게 함 → 웹사이트가 복잡해지고 애플리케이션 형태로 되며 사용자와 서비스 사이의 상호작용이 증가하며 이 방식의 한계점 SPA의 경우 Menu, Footer와 같이 페이지 전환 후 중복되는 부분은 새로 로딩하지 않는다 → 업데이트가..

React – 기초 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 → 웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용 가능 → 컴포넌트 단위로 나눠서 개발함 React의 3가지 특징 선언형 컴포넌트 기반 범용성 선언형(Declarative)(명시적) 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 하는 것(직관적) → 리액트는 한 페이지를 보여주기 위해 html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 jsx를 활용한 선언형 프로그래밍을 지향! 컴포넌트 기반(Component-Based) 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 함 → 컴포넌트로 분리하면 상호 독립적/재사용 가능 → 기능 자체에 집중..