분류 전체보기69 [React] 데이터 목록 출력하기. 1. 더미 데이터 추가 const DUMMY_DATA = [ { id: 'm1', title: 'This is a first meetup', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Stadtbild_M%C3%BCnchen.jpg/2560px-Stadtbild_M%C3%BCnchen.jpg', address: 'Meetupstreet 5, 12345 Meetup City', description: 'This is a first, amazing meetup which you definitely should not miss. It will be a lot of fun!', }, { id: 'm2', title: 'This is a .. 2022. 7. 25. [React] CSS module로 스타일링하기 리액트에서 css module을 이용해서 컴포넌트 별로 스타일을 지정해 줄 수 있다. 1. MainNavigation.module.css 파일 만들기 먼저 css를 적용하고 싶은 컴포넌트 주변에 컴포넌트와 이름이 같고. module.css를 확장자로 가지는 파일을 만든다. //MainNavigation.module.css .header { width: 100%; height: 5rem; display: flex; align-items: center; justify-content: space-between; background-color: #77002e; padding: 0 10%; } .logo { font-size: 2rem; color: white; font-weight: bold; } .header.. 2022. 7. 25. [React] Route에서 <Link /> 사용하기 1. 태그는 링크를 클릭하면 새로운 요청을 서버(리액트 앱을 호스팅 하는 서버)로 전달한다. 그리고 서버가 응답을 보내면 라우터가 어떤 페이지를 로딩할지 다시 판단해야 한다. 링크가 동작하지만, 다른 링크로 옮기려고 서버에 요청을 보내면서 이미 실행되고 있는 리액트 애플리케이션을 완전히 나가게 되는 것이다. 그래서 서버에 새로운 요청을 보내지 않고 react-router-dom에서 제공하는 Link컴포넌트를 사용할 수 있다. Link는 react-router-dom에서 내부적으로 의 클릭 리스너를 추가하고 클릭시 브라우저가 서버로 요청하는 것을 방지하고 옮겨 가려는 경로의 URL을 해석해서 브라우저의 URL창을 변경한다. 그러면 서버로 요청을 보내지 않고 적절한 컴포넌트를 화면에 로드할 수 있다. 2. .. 2022. 7. 25. [HTML] <em>, <i>의 차이, <strong>, <cite> 태그 사용하기 1. vs 공통점 기울임 꼴이 적용된다. 차이점 : 택스트의 강세를 나타낸다. 쉽게 말해서 글에서 강조하고 싶은 단어를 나타낼 때 태그를 사용한다. See the Pen em tag by dadafly1244 (@dadafly1244) on CodePen. : 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트에서 사용한다. 강조X, 중요 X. 곤충 매미가 아니라 태풍의 이름이 "매미"라는 것을 표현하기 위해서 사용하는 태그이다! See the Pen i tag by dadafly1244 (@dadafly1244) on CodePen. 2. 주변보다 훨씬 중요한 텍스트라는 것을 나타내고 싶다면, 태그를 사용하면 된다. 태그는 굵은 글씨로 표시된다!! 3. 저작물(책, 연극, .. 2022. 7. 25. 이전 1 2 3 4 5 6 7 8 ··· 18 다음
