꿈꾸는 개발자의 블로그

게시물을 출력하는 과정에서 불필요한 게시물은 제외해야했다. 내 경우에는 같은 유저의 게시물을 보여주면 안됐기 때문에, 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;

변수를 선언하는 var, let 키워드는 서로 다른 스코프를 가지고 있다는 점에서 차이가 있다. 이 때문에 같은 코드를 실행했더라도 다른 결과를 출력하는 모습을 볼 수 있다. 내가 의도한 것은 1초 후에 0, 1, 2, ... 9 가 출력되는 것이었다. 왜 의도한대로 되지 않는지, 변수에 무슨 차이가 있는지 정리해보았다. var 다음과 같이 코드를 짰을 때, 함수 스코프를 가지는 var 키워드의 경우에는 10을 10번 출력한다. for (var i = 0; i < 10; i++) { setTimeout(function() { console.log(i) }, 1000) } for문이 시작하고 하위 setTimeout 함수도 1초 후에 시작되는데, 이 때 for문은 무척 빠른 속도로 돌기 때문에 setTim..