꿈꾸는 개발자의 블로그

함수로 배열을 객체로 만들기 1. map() 함수 이용하기 2. Object.fromEntries() 함수 이용하기 1. map() 함수 이용하기 const arr = [[1,2], [3,4], [5,6]]; let formattedArr = arr.map(function(a) { let newArr = {}; newArr[a[0]] = a[1]; return newArr; }); // formattedArr => (3) [{1: 2}, {3: 4}, {5: 6}] 2. Object.fromEntries() 함수 이용하기 const arr = [ ['name', 'Chloe'], ['age', 17], ['city', 'NewYork'] ]; const newObj = Object.fromEntries(..

게시물을 출력하는 과정에서 불필요한 게시물은 제외해야했다. 내 경우에는 같은 유저의 게시물을 보여주면 안됐기 때문에, filter로 한번 걸러주고 나머지를 map으로 돌려서 뿌려주었다. 전체 코드를 살펴보자. 전체 코드 const Posts = () => { const [otherPosts, setOtherPosts] = useState([]) const getOtherPosts = async (producId) => { const res = await get(...); setOtherPosts(res.data.data...); }; useEffect(() => { getOtherPosts(); }, []); return ( {otherPosts.filter((post) => userId !== post..

각각의 이미지 카드를 자동으로 순환시켜 슬라이드 쇼 형식으로 보여주고 싶었다. 이런 방식을 캐러셀이라고 하고, 다음의 라이브러리를 이용하여 구현할 수 있었다! 이미지 슬라이드/캐러셀 구현하기 (Carousel) 1. 라이브러리 설치 2. 라이브러리 imort하여 적용 3. 코드 구현 4. 스타일 수정 1. 라이브러리 설치 $ yarn add react-slick $ yarn add slick-carousel 2. 라이브러리 import import Slider from "react-slick"; // 스타일 수정이 필요할 시 import import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; 3. 코..

overflow 내가 지정한 width, height 값에 대하여 그 하위 내용이 범위를 벗어날 때 사용하는 방법이다. overflow-x, overflow-y 를 사용하여 상하/좌우에 대하여 지정할 수도 있다. overflow 속성 속성 의미 visible 바깥으로 나오는 기본 값 hidden 안쪽 외 나머지는 잘림 scroll 스크롤을 만듬 auto 내용이 넘어가면 자동으로 스크롤을 만들어 줌 코드 예시 overflow: hidden;

이미지 파일을 가지고 있을 때, 이를 이용하여 배경으로 화면 전체를 채우는 방법이다. 전체 코드 background: url("/background.jpg"); background-size: cover;