WEB10 React 라우터(Router) 설정하기 오늘은 React 라우터 설정하는 법에 대해서 알아보자~라우터란 무엇일까?라우트는 사용자가 특정 URL로 이동했을 때, 어떤 컴포넌트를 보여줄지 결정하는 경로를 의미한다한마디로 요약하자면 페이지 전환을 관리하는 역할을 담당한다! React Router에서 라우트 사용법React에서는 react-router-dom 라이브러리를 사용해서 라우팅을 구현한다.다운로드터미널 창을 켜서 다음과 같은 명령어를 입력해서 다운로드 받는다.npm install react-router-dom 1. index.jsimport { BrowserRouter } from 'react-router-dom';index.js 파일에 BrowserRouter를 import 받기! 2. App.jsimport { BrowserRouter.. 2025. 3. 30. 웹 문서의 레이아웃 만들기 배치 방법을 결정하는 display 속성 종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 바꿈 (여러 줄->한 줄) inline 블록 레벨 요소를 인라인 레벨 요소로 바꿈 inline-block 인라인과 블록 레벨 요소의 속성을 모두 가지고 마진과 패딩을 지정할 수 있다. none 해당 요소를 화면에 표시하지 않는다 menu1 menu2 menu3 menu4 li를 display : inline-block으로 지정하여 가로 배치를 해준다. * display: inline-block과 float: left 속성의 차이점 display: inline-block은 기본 패딩과 마진 값을 가지고 있지만 float: left는 기본 패딩과 마진을 가지고 있지 않아서 필요에 따라 지정해야 되고 float.. 2024. 2. 22. CSS와 박스 모델 블록 레벨 요소 혼자 한 줄을 차지하는 것이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. ex) div, span, p 인라인 레벨 요소 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 즉 한 줄에 인라인 레벨 요소를 어러 개 표시할 수 있다. ex) span, img, strong 박스 모델의 기본 구성 콘텐츠 영역(contend) 패팅 영역(padding) : 콘텍츠 영역과 테두리 영역 사이의 여백 테두리(border) : 박스의 테두리 마진(margin) : 박스 모델 사이의 여백 * 마진과 패팅은 상하좌우 여백을 조정할 수 있다. 사진 첨부 padding 테두리와 콘텐츠 영역간의 .. 2024. 2. 22. [JS] 연산자 JS에서 사용되는 연산자들을 알아보자 증감 연산자 증가 ++ 변숫값을 1만큼 증가 감소 -- 변숫값을 1만큼 감소 var a = 10; var b = a++ + 5; // b=15 var c = 10; var d = ++c + 5; // d=16 증감 연산자는 피연산자(a) 뒤에 있을 때 전체 수식의 처리가 끝난 다음 적용된다. 피연산자(c) 앞에 있을 때는 전체 수식을 처리하기 전에 적용된다. 문자형과 숫자형 연산 이해하기 var numVar = 100; var strVar = "50"; numVar+strVar "10050" 100과 50을 더하니 둘을 연결한 문자 10050이 나온다 즉 + 기호는 연결 연산자다 numVar - strVar 50 ' - '기호는 산술 연산자다 따라서 js에서는 숫자형.. 2024. 1. 3. 이전 1 2 3 다음
