[Ez to Play / Error Note] 이미지 태그로 감쌌을 때 생기는 공백 문제

Ez to Play 프로젝트 당시 세로로 움직이는 캐러셀도 만들었었다. 직면한 문제 캐러셀이 이쁘게 보이려면 배너가 다닥다닥 붙어있어야 하는데, 배너를 누르면 해당 페이지로 이동하도록 링크를 주기 위해서 태그로 감쌌더니 아래와 같이 간격이 생겨버린다. 원인 훌륭한 블로그 글을 발견하여 금방 해결했는데, 이 블로그에 따르면 img 태그의 display는 기본적으로 inline이고, inline은 문자의 정렬을 맞추기 위해 가상의 기준선이 존재하며, g 또는 y와 같이 기준선 아래로 내려가는 문자를 위해 아래 공간이 어느정도 비어있게 된다고 한다. 하지만 이미지는 대문자처럼 취급되어 베이스라인(기준선)에 붙어 있으니 내 상황처럼 이미지 여러개를 세로로 붙이려 하면 간격이 생기게 되는 것이다. 해결 여러 해결..

• format_list_bulleted Ez to Play - Project/Error Note
• · 2023. 9. 22.
• textsms

[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 / Error Note] 로그아웃시 쿠키 삭제 안 되는 문제

일반 로그인 후 로그아웃은 문제가 없지만, 로그인 후 아티스트로 등록하면 로그아웃시 쿠키가 삭제되지 않는 이슈가 있었다. /** 로그아웃 및 main으로 페이지 이동 */ const logoutHandler = () => { removeCookie('accessToken'); removeCookie('refreshToken'); removeCookie('userInfo'); alert('[로그아웃 성공] 로그아웃 되었습니다'); navigate('/'); }; removeCookie는 잘 들어가 있는데... react-cookie에서 못 찾은 답을 js-cookie에서 찾았다. 쿠키를 삭제할 때 기본 속성이 아닌 쿠키는 쿠키를 set 할 때 지정한 속성과 동일한 경로와 도메인을 넣어줘야 한다고 impor..

• format_list_bulleted Ez to Play - Project/Error Note
• · 2023. 7. 26.
• 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

[Ez to Play / Error Note] React Hook Form 사용중 xxx.current에서 타입에러

Type 'string' is not assignable to type 'HTMLInputElement' typescript와 react hoor form을 사용하는데 비밀번호 현재값을 input_password.current에 담으려 하자 아래와 같은 타입에러를 만났다. 상황: 비밀번호 확인(재입력)란에서 현재 입력된 비밀번호와 재입력된 비밀번호가 같은지 확인하기 위해 현재 입력된 비밀번호를 useRef 함수가 담긴 변수 input_password의 .current에 담음. useRef에 타입을 지정해줬어야 했는데, 에러문구를 보고 다짜고짜 useRef() 이렇게 string으로 타입을 지정해주면 이번엔 current에서 에러가 난다. 훅의 초기값을 null로 줘놓고 null 타입을 안 주는 만행을 저..

• format_list_bulleted Ez to Play - Project/Error Note
• · 2023. 7. 8.
• textsms