jwj3400

React-router-dom (v6 기준) BrowserRouter: history API를 이용해 UI를 업데이트, SPA(single page application)은 화변의 header나 footer, sidebar등 다시 로드해도 변함없는 부분이 있고 BrowserRouter는 변경되는 부분만 부분적으 렌더링함 Routes: Route로 생성된 자식 컴포넌트 중에 path와 url이 대응되는 컴포넌트 렌더링(element 요소) 이때 url이 중복되는 경우 먼저 마주치는 컴포넌트를 렌더링 (순서가 중요) ex) 아래코드에서 /secondPage에 접근해도 FirstPage로 넘어가짐 import { BrowserRouter, Routes, Route, Link } from 'react-route..

Margin 주변 요소와 거리를 두기 위한 영역 양수, 음수, auto, collapse 가능 (collapse는 둘 이상의 요소가 있을 때 margin 값이 더 큰것으로 합쳐지는 특징 ) margin과 padding 은 위, 오른쪽, 아래, 왼쪽 (시계방향) 순으로 값 지정 가능 .style { margin: 20px 10px 0px 0px; padding: 20px 10px 0px 0px; } Borader 요소 영역을 표현하는 선의 두께 Padding boarder와 요소간의 간격을 나타냄 padding 값은 div 틀 안에서 문자를 padding 만큼 밀어내는게 아니라 본래 div 값에서 padding 값만큼 div 경계를 밀어냄 padding은 margin과 달리 auto, collapse 사용..

1. transform 이용 .parentContainer { position: relative; } .childContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } top과 left를 50퍼를 주면 정 중앙에 상단 좌측 꼭짓점이 배치하게 됨 transform: translateX(), transform: translateY()를 통해서 오른쪽(x축으로) 이동, 아랫쪽 (y축으로 이동) 이동할 수 있고, -(minus)를 통해서 좌측과 상단으로 이동 transform: translate(x,y)는 translateX()와 translateY()를 합친 함수, 이를 통해서 도형의 50퍼만큼 위쪽과 왼쪽..

포지션 모든 태그들은 초기 position static이 default, static은 오른쪽에서 왼쪽, 위에서 아래로 쌓임 포지션에는 static, relative, absolute, fixed가 존재 relative는 요소 자기자신의 원래 위치(static일 때의 위치)를 기준으로 배치 relative는 top, right, bottom, left 속성으로 위치 조절이 가능 relative는 각각의 방향을 기준으로 태그 안쪽으로 이동 (해당 움직임이 본래 위치로 돌아오려면 어떤값을 써야할 지를 역으로 적는다고 생각) absolute는 가장 가까운 위치에 있는 부모 요소를 기준으로 배치 부모 Position을 가진 요소가 없다면 초기 컨테이닝 블록(웹 페이지 전체)을 기준으로 함 Fixed는 뷰포트를 ..

create-react-app은 리액트 개발에 필요한 웹팩, 바벨, 테스트 라이브러리 등 다양한 환경을 한 번에 제공해줌 Webpack 여러개의 파일을 하나로 합쳐주는 모듈 번들러(번들러는 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구) 번들러를 사용하는 이유? 1. 한번에 많은 요청을 하지 않아도 된다. 예를 들어 한 웹페이지에서 사용하는 자바스크립트 파일이 10개정도 된다고 가정해보자. 그렇다면 웹 페이지가 로드될 때 자바스크립트 파일 10개롤 모두 네트워크를 통해 요청해서 받아와야 해서 네트워크 병목현상이 발생할 수 있다. 2. 모듈 단위로 개발하여 유지보수성을 높일 수 있다. 하나의 파일에 모든 자바스크립트 코드가 있다고 할때 그 코드가 몇 천 라인, 몇 만 라인인지는 모르지만 우리가 수..

Flex Flex 레이아웃을 만들기 위한 구조 html item1 item2 item2 css .container { display: flex; /* display: inline-flex; */ } Flex에 속성들은 컨테이너에 적용하는 속성 inline-flex: 반응형으로 동작하지 않음, 화면 창이 작아지거나 하면 아랫줄로 block이 내려 아이템들이 배치된 방향의 축을 Main Axis, 그 와 수직인 방향을 Cross Axis라고 부름 flex-directoin: 축의 방향을 결정하는 속성 즉, Main Axis의 방향을 결정 아래와 같은 4가지 방향이 존재 .container { flex-direction: row; /* flex-direction: column; */ /* flex-direct..