개발/Front (4) 썸네일형 리스트형 [React] 리액트에서 반복문을 사용해 배열의 내용들 출력하기 객체 안에 담긴 내용을 html에 보이게 해야 하는데 객체 멤버 변수 중 배열로 되어 있는 것이 있어 배열의 내용을 깔끔하게 출력하는 방법을 공유하려고 한다. 반복문을 사용해 배열 내용을 출력하는 방법은 두 가지가 있는데 본인 코딩 스타일에 맞는 방식을 선택해 코딩하면 되겠다. 1. 메소드의 return 값을 출력 const use_for = (arr) => { const result = []; for (let i = 0; i < arr.length; i++) { result.push({arr[i]}); } return result; }; return ( {use_for(arr)} ) 메소드의 return 값들을 출력시켜주는 방법이며 arr는 부모에게서 받아 오거나 import한 파일의 정보를 담고 있는.. [React] React Icons 사용하기 React에서 제공하는 모듈을 사용해 다양한 아이콘을 가져오자. 공식 문서 및 아이콘 리스트를 보고 싶다면 여기를 클릭! 우선 모듈을 설치해야 한다. $ npm install react-icons 사용 예제 코드 import { FaBeer } from 'react-icons/fa'; class Question extends React.Component { render() { return Lets go for a ? } } Beer 검색 시 여러 종류의 Beer 이미지가 나오는데 사용 예제에서는 Font Awesome에서 제공하는 FaBeer를 사용했다. Fa의 Beer인 FaBeer를 사용했기에 from 'react-icons/fa'라고 선언한 것이다. 이것을 확장해서 생각해보면 BiBeer를 사용하고.. [JS] 스크롤 내리면 나타나는 navBar(메뉴바) 구현 페이지가 길다면 메뉴바는 있어야 한다. 메뉴바가 없다면 header가 있는 곳까지 다시 오는건 비효율적이라고 생각하기 때문이다. 그래서 스크롤 시 상단에 메뉴바가 나타나게 구현해야 한다. 메뉴바를 고정시키면 되지 않냐고? header가 작은 페이지는 별로 없는 것 같은데 페이지를 내릴 때마다 header가 딸려 온다면 그만큼 다른 내용이 보이지 않기 때문에 이것도 비효율적이다. 그래서 나타나게 할 메뉴바는 최대한 필요한 것들만 모이고 크기를 차지 않게 만들어야한다. 처음에는 엄청 어려울 줄 알았는데 검색해서 이해한 결과로는 누구나 가능하다. 필요한 태그 목록이다. 헤더 나타날 메뉴바 본문 이런 형태를 가지기만 하면 되기 때문에 자신의 페이지에 맞게 커스터마이징하면 된다. navBar를 안 보이는 영역에 .. [CSS] 단락 높이를 화면에 꽉 맞게 지정하기 보통 화면에 꽉 맞는 높이를 지정하기 위해서는 100%를 자주 쓴다. 하지만 기괴하게도 100%로 선언하면 내가 원하는대로 안 되는 경우가 많다. 그렇다고 px 값을 지정해서 준다면 화면 크기가 바뀌었을 때 스크롤만 무한히 내려갈 것이다. 그러면 어떻게 %가 아닌 고정값으로 화면에 맞게 높이를 지정하는가? 아래 코드를 사용하면 쉽게 구현할 수 있다. /* 배경 이미지 */ body { height: 100vh; background-image: url('path'); background-repeat: no-repeat; background-size: cover; } /* 단락 */ div { width: 100%; height: 100vh; } heigth에 100vh를 지정해주면 된다. 이전 1 다음
