나보단 잘하자

일단 구현에 의의를 두고…. 이걸 적어도 되는지 의문이긴 한데 빠르게 구현하고자 하는 사람들을 위해 기록해봅니다. 아래와 같은 것을 구현 해 볼 것인데… 우선 여기서 쓰는 marquee 태그는 아주 생소하다고 생각이 들 수 있습니다. 그만큼 이젠 안쓴다는 뜻임ㅎ 제대로 쓰고 싶으면 자바스크립트를 써보아요~ 간단하니, 코드에 주석으로 설명을 대신하겠습니다. import styled from "styled-components"; const GlassIndex = () => { return ( GLASSMORPHISM ); }; export default GlassIndex; const GlassWrap = styled.div` position: relative; width: 600px; height: 100..

이런 상황이 있을 수 있다. 예를 들어 sample.com이라는 사이트의 상품 리스트 페이지는 sample.com/lists 라고 치자. 근데 리스트 페이지는 어디나 그렇듯 소팅을 해야하고 전체 목록을 보여준다고 해도 ‘전체’ 카테고리가 선택 돼 있을 것이다. 때문에 sample.com/lists?sort=all 등의 파라미터를 설정해야하는데, sample.com/lists로 파라미터 없이 접속했을 때 에러로 인한 리다이렉트가 아닌 디폴트로 sort=all 등의 파라미터를 설정해줄 수는 없을까? Nextjs의 장점인 ssr을 사용하면 설정하기 쉽다. 원리는, 서버사이드에서 파라미터를 파싱해서 없으면 해당 파라미터를 가진 url로 리다이렉트 시켜주고 그렇지 않으면 원래대로 넘기는 방식이다. 아래와 같이 설..

분명 어디선가 본 것 같은데... 예시를 못 찾겠다ㅜㅜ 상세페이지에 해당 상품의 후기가 10개 정도 올라와 있고, 이 후기 중에 원하는 후기 하나를 누르면 후기 전체 페이지에서 클릭한 후기로 자동 스크롤되고 반짝이며 포커싱 되는 기능이다. 물론 구현을 위해서는 백엔드 쪽에서 데이터에 해당 후기의 고유번호를 넣어주어야 한다. 간단히 필수적인 기능들만 들어간 페이지 두 개로 실습해보자. 데이터는 목데이터로 단순하게 넣을 것이다. 참고로 기능만 집중적으로 살펴 볼 예정이기 때문에 전체 파일의 코드를 언급하지는 않으려고 한다. 혹시나 필요하신 분이 계시면 댓글 달아주세요... 깃허브에 올리겠습니다... 기본 세팅은 아래와 같다. pages > review > index.js 리뷰를 10개만 보여주는 미리보기 페..

이런 문제 있는 분들 많을 것 같은데 생각보다 검색 결과가 없어서 찾기 힘들었다. 결국 직접 스택오버플로우에 물어봤고, 답변을 공유하고자 한다. 그라디언트를 당연히 마지막은 투명도를 0으로 줘서 자연스럽게 배경에 흡수되는 그라디언트를 만들려고 했는데 이상하게 줄이 생긴 것 같은 착시 효과를 주더라. 보통 짜는 코드처럼 단순하게 그라디언트를 설정하면 아래와 같이 보여진다. div.gradient_wrap { margin: 100px; width: 300px; height: 300px; background: linear-gradient(0deg, rgba(38,38,38,1) 0%, rgba(255,255,255,0) 100%); } 이 느낌을 없애주기 위해서는 아주 섬세한 그라디언트 컨트롤이 필요하다. 아..