중복되는 컴포넌트 컴포넌트 중복이 가장 많은 곳은 프론트영역이다. 달력, 입력박스, 안내창 등은 대부분의 화면에서 공통적인 기능으로 사용된다. 스타일은 물론 로직(이벤트처리)이 같은 컴포넌트도 많을 것이다. 프론트에서 공통 컴포넌트를 개발하고 관리하는 것이 중요하지만, 현재 진행 중인 프로젝트에서는 그러지 못했다. 서버에서 관리하는 컴포넌트의 경우 jsp tag 라이브러리를 이용해 어느정도 관리가 됐지만, 화면에서 관리해야 하는 컴포넌트(Clinent Side Rendering)의 경우 전혀 관리되지 못했다. 똑같은 기능을 하는 컴포넌트들이 각자 개발되다보니, 작은 변경 하나도 모든 화면을 수정해야 했다. 유지보수 지옥이나 다름없었다.😭 사실 이렇게까지 된 이유는 별다른 방법이 없다고 생각했기 때문이다...
JS Module Export named export export const App = () => { ... } //import { App } from './App' default export const App = () => { ... }; export default App; // import App from './App' 둘 중 하나만 사용하는 것이 일반적이지만, 두 개 다 사용가능하다. 특히 Redux 테스트를 한다면 두 개 전부 사용하는 것이 유용하다. 둘 중 하나만 사용한다면 번거로운 점이 많아진다. export const App = (props) => { ... }; default export App; Redux 테스트 에러 Provider에 store를 생성해서 props로 줬는데 왜? con..
방법 1: position: absolute; + transform: rotate(); .parent { display: relative; } .child { position: absolute; transform: rotate(-90deg); top: 50; left: 50px; } rotate하면 parent범위를 넘어서 위치가 많이 바뀜 조정하기 어려움 방법 2: position:absolute; + writing-mode: vertical-rl; 더보기 CSS syntax: writing-mode: horizontal-tb | vertical-rl | vertical-lr ; .parent { position: relative; } .child { position: absolute; writing-..
repeat(, ) 반복할 횟수(n)와 사이즈를 받음 size에 단위(fr)을 쓰면 알아서 빈공간 채워줌 minmax(,) min-width, max-height 와 비슷 반응형 웹페이지를 만들때 사용 웹페이지가 resize될 때 최소값을 줌으로 레이아웃 유지 최대값은 fr을 써서 넓은 화면에서 빈공간 없도록 함 minmax 사용 안했을 경우 100px로 최솟값은 유지하지만 넓은 화면에서 오른쪽 빈 공간 발생 빈공간 채우기위해 1fr로 하니 좁은 화면에서 찌그러져서 레이아웃 망가짐 내용 overflow될 가능성 많음 minmax로 최솟값을 유지하면서 꽉채움 그러나 좁은 화면에서 최솟값때문에 스크롤 발생 자동으로 줄바꿈되길 원할 때 auto-fill, auto-fit을 쓰면 됨 auto-fit 반복할 횟수..
