전체 글 (286) 썸네일형 리스트형 블로그를 github page로 옮깁니다 앞으로 작성하는 글들은 아래 링크에서 보실 수 있습니다. https://socratone.github.io/blogs SwiperSlide에 이미지나 영상을 넣었을 때 여백이 발생하는 문제 해결 방법 Swiper 라이브러리를 이용하면 슬라이더를 쉽게 구현할 수 있다. 여기에서 어떤 게 되는지 확인해보자. Swiper라는 컴포넌트를 부모로 하고 SwiperSlide를 여럿 자식으로 넣어 슬라이드 되게 한다. 그러나 SwiperSlide에 이미지나 동영상을 넣었을 경우 ios 모바일에서 오른쪽 패딩이 생기는 문제가 발생했다. 화면당 하나가 오도록 설정했고 (slidePerView = 1) 이대로라면 하나의 SwiperSlide가 뷰포트의 width를 꽉 채워야만 하는데 말이다. 문제는 SwiperSlide의 width를 계산하는 로직에 있었다. 실험해보니 브라우저의 viewport가 resize될 때 SwiperSlide width의 CSS 값을 변경하는 것을 확인했다. 이미지나 영상을 다 다운 받기 전.. NextJS Image 사용 방법 NextJS의 Image 컴포넌트를 이용하면 이미지 최적화를 쉽게 할 수 있다. 확장자를 저용량인 webp로 바꿔준다거나 viewport에 적합한 이미지를 다운로드 한다거나 lazy loading 등등 개발자가 일일이 하기 귀찮은 작업을 알아서 해준다. 다만 일반 image 엘리먼트가 아니기 때문에 잘 파악하고 있지 못하면 화면에 따라 레이아웃이 변해야하는 등의 반응형 개발에 어려움이 생긴다. 공식문서에서 소개하는 내용을 쉽게 볼 수 있도록 정리하고자 한다. src 아래와 같이 이미지를 import 해서 src에 넣는다. import Image from 'next/image' import profilePic from '../public/me.png' /* ... */ dynamic import는 불가능하.. 스마트폰(안드로이드) 크롬 디버깅 방법 1. 안드로이드 개발자 옵션을 활성화시킨다. https://comeinsidebox.com/enable-galaxy-developer-options-and-debugging/ 2. 설정 > 개발자 옵션에서 USB 디버깅을 활성화시킨다. 3. 컴퓨터에서 크롬 브라우저의 주소 인풋에 다음을 입력하고 컴퓨터와 스마트폰을 연결한다. chrome://inspect 아래와 같은 창이 나타난다. 위의 빨강과 달리 스마트폰의 크롬에서 보고 있는 페이지 리스트가 안 나타나고 다음과 같은 메시지가 나타난다면 Pending authentication: please accept debugging session on the device. 개발자 옵션 > USB 디버깅 switch를 껐다 켜보자. 4. 위의 빨강에서 디버깅 하기.. 리로딩하지 않으면서 브라우저의 url을 바꾸는 방법 replaceState를 쓰면 된다. 3번째 인자에 원하는 url을 넣는다. 동일한 origin에서만 가능하다고 한다. const replaceUrl = (url: string) => { window.history.replaceState(null, '', url); } 자세한 내용은 다음을 참고하자. https://developer.mozilla.org/ko/docs/Web/API/History/replaceState 맥에서 작업한 웹앱을 윈도우 크롬에서 테스트하는 방법 같은 크롬이더라도 윈도우와 맥에 따라 달라지는 게 있어서 종종 윈도우 크롬이나 엣지 등에서 작업한 웹앱이 제대로 작동하는지 테스트 해야 하는 경우가 있다. 이런 때 무식하게 윈도우에 git bash를 설치하고 git hub에서 클론한 뒤 npm install로 똑같이 만든 다음 테스트할 수도 있지만 굳이 윈도우에 모든 것을 설치할 필요 없이 작업하고 있는 맥을 서버로 두고 윈도우 pc 등에서 접속해 테스트하는 방법이 있다. cra(create-react-app)보다 더 좋은 것 같은 vite를 이용해서 리액트 앱을 설치하고 (cra로 해도 상관 없음) https://vitejs.dev/guide/#scaffolding-your-first-vite-project yarn create vite 생성된 프로젝.. git rebase 이해하기 branch를 하나 따서 작업한 코드를 dev나 main에 간단히 추가하려면 git merge를 쓴다. 현재 브랜치에서 추가하고 싶은 브랜치를 입력하면 된다. current-branch > git merge target-branch (current-branch의 내용을 target-branch에 merge 하라!) 그러나 merge와 비슷한 명령어로 rebase가 있는데 merge와 달리 작동 방식이 직관적이지 않아 헷갈린다. merge를 이용하면 브랜치가 꽈배기처럼 꼬이고 불필요한 커밋 log가 남아 git 관리를 좀 더 효율적으로 하기 위해서 rebase를 사용하는 것 같다. 이런 장점이 있는 rebase를 사용하기 위해서 쉽게 설명해보고자 한다. rebase는 말 그대로 base를 다시 설정하겠다.. Styled Components에서 keyframes의 prop이 작동하지 않을 때 해결 방법 styled componets의 컴포넌트 안에 애니메이션을 위한 keyframes 코드를 넣으면 잘 작동한다. const StyledContainer = styled.div` @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } `; 그러나 keyframes 안의 값을 바꿔야 할 일이 생겼을 때 잘 작동하지 않는 문제가 생겼다. 위 방식이 정상적인 방법이 아니기 때문이다. styled components에서 keyframes를 사용하려면 아래와 같이 해야 한다. import styled, { keyframes } from 'styled-components'; const moveR.. 이전 1 2 3 4 ··· 36 다음
