[Ez to Play _ Function] 까먹기 전에 적는 캐러셀 반응형으로 리팩토링하기

내가 열심히 만든 홈 화면과 캐러셀. 반응형을 시도하기로 했기 때문에 화면의 크기에 따라 컨텐츠 크기도 바뀌도록 만들어야 한다. 반응형은 @media로 시작하는 media query를 사용하면 된다. @media screen and (min-width: 820px) { width: calc(170px * ${sizeChange.tablet}); height: calc(${props => props.height}px * ${sizeChange.tablet}); } 우리는 미디어 쿼리를 공통 컴포넌트로 만들어 사용했는데 이 글을 쓰는 이유는 캐러셀 로직에 관련된 부분이므로 css 부분은 넘어가도록 하겠다. 앞선 캐러셀 만들기 글에서도 언급했지만 캐러셀은 가로로 길게 늘어선 이미지들을 화면 길이만큼씩 순서대로..

• format_list_bulleted Ez to Play - Project/Function
• · 2023. 8. 4.
• textsms

[Ez to Play _ Function] 아주 쉽고 누구나 할 수 있는 멋진 캐러셀(Carousel) 만들기

스택: React, TypeScript, Styled-Components 화질이 낮아서 슬프다..ㅠ 이번 팀 프로젝트에서 맡은 파트 중 캐러셀이 들어간 페이지가 있어 만들게 되었다. 캐러셀 라이브러리가 있다는 것을 알고 있었지만 무식하면 용감하다고 한 땀 한 땀 직접 짰다. 의외로 원리만 알면 간단하다. 요런게 옆으로 계속 넘어가는게 캐러셀이다. 캐러셀이 동작하는 원리는 이렇다. 3개의 슬라이드가 있을 때, '하나의 슬라이드 가로폭 * 3'짜리 칸을 만들어 그 안에 슬라이드를 가로로 주르륵 줄 세워 놓고 클릭 또는 지정된 시간마다 좌표를 하나의 가로폭 만큼씩 빼주는 것이다. 이 때 css의 transition 속성을 이용하면 슬라이드를 부드럽게 넘길 수 있다. transition: -100vw 0.5s ..

• format_list_bulleted Ez to Play - Project/Function
• · 2023. 8. 4.
• textsms

[Ez to Play / Function] 23.06.30 1주차 멘토링

FE 1주차 멘토링 내용 추천 스택 Next.js (리액트에서 SSR 하기 위해, 서버컴포넌트 이해하면 좋음 근데 어려움) Typescript zustand recoil vercel(배포) 추천 발표 주제 react-hook-form 이러한 라이브러리가 생긴 이유 이 라이브러리를 선택한 이유 Github Actions 서버컴포넌트 지도 마커 이쁘게 꾸며서 띄우기 (네이버 지도 맡은 사람이 하기) 지도 선택(의사결정과정 - 카카오, 구글, 네이버 중 왜 이걸 선택했는가) 스토리북 지금은 빠듯, font color input textarea 만들어놓아도 충분 zustand 모바일 퍼스트 (mobile first) PC 뷰포트보다 모바일을 우선으로 하여 구현 반응형으로 설계하여 태블릿, PC까지 커버하기 ..

• format_list_bulleted Ez to Play - Project/Function
• · 2023. 7. 12.
• textsms