https://jae04099.tistory.com/ 아이고 어서오십쇼 ko Thu, 2 Jul 2026 23:20:02 +0900 TISTORY 100 adore_voy https://tistory1.daumcdn.net/tistory/3483631/attach/b36c02b4ab1d4a43881f40c21d64c0fe https://jae04099.tistory.com https://jae04099.tistory.com/entry/CSS-%ED%99%94%EB%A9%B4%EB%B3%B4%ED%98%B8%EA%B8%B0%EC%B2%98%EB%9F%BC-%EB%8F%8C%EC%95%84%EB%8B%A4%EB%8B%88%EB%8A%94-%EA%B8%80%EB%9E%98%EC%8A%A4%EB%AA%A8%ED%94%BC%EC%A6%98-%EA%B5%AC%ED%98%84 일단 구현에 의의를 두고…. 이걸 적어도 되는지 의문이긴 한데 빠르게 구현하고자 하는 사람들을 위해 기록해봅니다. 아래와 같은 것을 구현 해 볼 것인데… 우선 여기서 쓰는 marquee 태그는 아주 생소하다고 생각이 들 수 있습니다. 그만큼 이젠 안쓴다는 뜻임ㅎ   제대로 쓰고 싶으면 자바스크립트를 써보아요~ 간단하니, 코드에 주석으로 설명을 대신하겠습니다.   import styled from "style.. Basic_Studies/CSS css marquee css 글래스모피즘 css 애니메이션 dvd 효과 MARQUEE 태그 글래스모피즘 구현 글래스모피즘 애니메이션 구현 움직이는 글래스모피즘 adore_voy https://jae04099.tistory.com/300 https://jae04099.tistory.com/entry/CSS-%ED%99%94%EB%A9%B4%EB%B3%B4%ED%98%B8%EA%B8%B0%EC%B2%98%EB%9F%BC-%EB%8F%8C%EC%95%84%EB%8B%A4%EB%8B%88%EB%8A%94-%EA%B8%80%EB%9E%98%EC%8A%A4%EB%AA%A8%ED%94%BC%EC%A6%98-%EA%B5%AC%ED%98%84#entry300comment Mon, 25 Jul 2022 17:12:41 +0900 https://jae04099.tistory.com/entry/Nextjs-url%EC%97%90-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0-%EB%84%98%EA%B8%B0%EC%A7%80-%EC%95%8A%EC%9D%84-%EB%95%8C-%EB%94%94%ED%8F%B4%ED%8A%B8-%EA%B0%92-%EC%84%A4%EC%A0%95%ED%95%B4%EC%A3%BC%EA%B8%B0 이런 상황이 있을 수 있다. 예를 들어 sample.com이라는 사이트의 상품 리스트 페이지는 sample.com/lists 라고 치자. 근데 리스트 페이지는 어디나 그렇듯 소팅을 해야하고 전체 목록을 보여준다고 해도 ‘전체’ 카테고리가 선택 돼 있을 것이다. 때문에 sample.com/lists?sort=all 등의 파라미터를 설정해야하는데, sample.com/lists로 파라미터 없이 접속했을 때 에러로 인한 리다이렉트가 아닌.. Basic_Studies/React & Next.js getServerSideProps getserversideprops redirect next.js 리다이렉트 adore_voy https://jae04099.tistory.com/299 https://jae04099.tistory.com/entry/Nextjs-url%EC%97%90-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0-%EB%84%98%EA%B8%B0%EC%A7%80-%EC%95%8A%EC%9D%84-%EB%95%8C-%EB%94%94%ED%8F%B4%ED%8A%B8-%EA%B0%92-%EC%84%A4%EC%A0%95%ED%95%B4%EC%A3%BC%EA%B8%B0#entry299comment Thu, 21 Jul 2022 11:48:03 +0900 https://jae04099.tistory.com/entry/Nextjs-%EC%9D%B4%EC%A0%84-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%ED%81%B4%EB%A6%AD-%ED%95%9C-%ED%9B%84%EA%B8%B0-%EB%8B%A4%EC%9D%8C-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%ED%8F%AC%EC%BB%A4%EC%8B%B1-%EC%A3%BC%EA%B8%B0 분명 어디선가 본 것 같은데... 예시를 못 찾겠다ㅜㅜ 상세페이지에 해당 상품의 후기가 10개 정도 올라와 있고, 이 후기 중에 원하는 후기 하나를 누르면 후기 전체 페이지에서 클릭한 후기로 자동 스크롤되고 반짝이며 포커싱 되는 기능이다. 물론 구현을 위해서는 백엔드 쪽에서 데이터에 해당 후기의 고유번호를 넣어주어야 한다.   간단히 필수적인 기능들만 들어간 페이지 두 개로 실습해보자. 데이터는 목데이터로 단순하게 넣을 것이다.   참.. Basic_Studies/React & Next.js nextjs 스크롤 nextjs 파라미터 넘기기 리액트 스크롤 리액트 파라미터 넘기기 adore_voy https://jae04099.tistory.com/298 https://jae04099.tistory.com/entry/Nextjs-%EC%9D%B4%EC%A0%84-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%ED%81%B4%EB%A6%AD-%ED%95%9C-%ED%9B%84%EA%B8%B0-%EB%8B%A4%EC%9D%8C-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%ED%8F%AC%EC%BB%A4%EC%8B%B1-%EC%A3%BC%EA%B8%B0#entry298comment Mon, 18 Jul 2022 14:53:03 +0900 https://jae04099.tistory.com/entry/CSS-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98%EA%B7%B8%EB%9D%BC%EB%94%94%EC%96%B8%ED%8A%B8-%EC%A4%84-%EC%9E%88%EB%8A%94-%EA%B2%83-%EC%B2%98%EB%9F%BC-%EB%B3%B4%EC%9D%B4%EB%8A%94-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0 이런 문제 있는 분들 많을 것 같은데 생각보다 검색 결과가 없어서 찾기 힘들었다. 결국 직접 스택오버플로우에 물어봤고, 답변을 공유하고자 한다. 그라디언트를 당연히 마지막은 투명도를 0으로 줘서 자연스럽게 배경에 흡수되는 그라디언트를 만들려고 했는데 이상하게 줄이 생긴 것 같은 착시 효과를 주더라. 보통 짜는 코드처럼 단순하게 그라디언트를 설정하면 아래와 같이 보여진다.   div.gradient_wrap { margin: 100px; w.. Basic_Studies/CSS css gradient css 그라데이션 css 그라데이션 줄 css 그라데이션 줄생김 css 그라디언트 줄 css 그라디언트 줄생김 adore_voy https://jae04099.tistory.com/297 https://jae04099.tistory.com/entry/CSS-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98%EA%B7%B8%EB%9D%BC%EB%94%94%EC%96%B8%ED%8A%B8-%EC%A4%84-%EC%9E%88%EB%8A%94-%EA%B2%83-%EC%B2%98%EB%9F%BC-%EB%B3%B4%EC%9D%B4%EB%8A%94-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0#entry297comment Thu, 14 Jul 2022 16:47:44 +0900 https://jae04099.tistory.com/entry/React-svg%EB%A1%9C-%EB%B9%84%EC%9C%A8-%EC%A0%95%ED%99%95%ED%95%9C-%EB%B3%84%EC%A0%90-%EA%B5%AC%ED%98%84 오늘 실습해 볼 것은 아래와 같습니다. 주어진 데이터는 100점 만점 기준 해당 브랜드의 평균 평점입니다. 아마 93점 이렇게 나오겠죠?별점은 정말 세세하게 퍼센트로 채워짐을 표현해야합니다.   물론! 이를 구현함에 있어 정말 많은 좋은 방법들이 있습니다. 처음 떠올렸던 방법은 별모양 다섯개를 한 묶음으로 status bar를 제작했던 원리와 비슷하게 overflow hidden으로 채워진 것 과 같은 표현을 주는 것 이었습니다.  .. Basic_Studies/React & Next.js svg별점 svg별점 구현 리액트 별점 리액트 별점 구현 별점 퍼센트 자바스크립트 별점 자바스크립트 별점 구현 adore_voy https://jae04099.tistory.com/296 https://jae04099.tistory.com/entry/React-svg%EB%A1%9C-%EB%B9%84%EC%9C%A8-%EC%A0%95%ED%99%95%ED%95%9C-%EB%B3%84%EC%A0%90-%EA%B5%AC%ED%98%84#entry296comment Wed, 13 Jul 2022 14:06:28 +0900 https://jae04099.tistory.com/entry/JavaScript-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-%ED%95%A0-%EB%95%8C-%EB%A7%88%EB%8B%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%BA%90%EC%8B%9C-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B8%B0feat%EC%B9%B4%ED%8E%9824 저희 회사는 크게 2개의 파트가 있는데 한 파트는 Next.js로 만들어진 자체 사이트(주로 작업은 여기서 합니다),또 다른 하나는 카페24에서 운영하는 쇼핑몰 사이트를 운영합니다.   가끔 카페24 사이트를 운영하는 파트가 기술팀에 기능 개발을 요청하곤 하는데 그 담당자가 제가 돼 버렸네요.때문에, 바닐라 자바스크립트도 만지고 있는데 최근에 꽤 팁이 될 수 있을 만한 이벤트가 있어 적어보려 합니다. 개요 카페24에서 이미지를 수정해서 업로드.. Basic_Studies/JavaScript 이미지캐싱 이미지파라미터 자바스크립트 카페24이미지캐싱 adore_voy https://jae04099.tistory.com/295 https://jae04099.tistory.com/entry/JavaScript-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-%ED%95%A0-%EB%95%8C-%EB%A7%88%EB%8B%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%BA%90%EC%8B%9C-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B8%B0feat%EC%B9%B4%ED%8E%9824#entry295comment Sat, 9 Jul 2022 18:20:29 +0900 https://jae04099.tistory.com/entry/ERROR-Error-Invalid-src-prop-on-nextimage   외부에서 이미지 파일을 불러왔을 때 발생하는 에러. next.config.js에서 설정하면 된다. module.exports = { reactStrictMode: true, images: { domains: ['cdn.pixabay.com'] // 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 된다. } } 그리고 next.config 파일을 수정했기 때문에 서버를 껐다가 다시 켜야 된다. 이 에.. ERROR COLLECTION error: invalid src prop NextJS nextjs image nextjs 이미지 이미지 에러 adore_voy https://jae04099.tistory.com/286 https://jae04099.tistory.com/entry/ERROR-Error-Invalid-src-prop-on-nextimage#entry286comment Mon, 24 Jan 2022 18:02:40 +0900 https://jae04099.tistory.com/entry/Nextjs-Dynamic-title-%EB%A7%8C%EB%93%A4%EA%B8%B0 Dynamic title은 아래와 같다. head의 title 부분을 주목해서 보면 검색어를 입력했을 때 검색어에 따라 title이 바뀌는 모습을 볼 수 있다. 만약에 검색어가 없으면 아래와 같이 뜬다. 또 이런거 전문이 next.js이기 때문에 아주 간단하게 설명을 해보겠다. 해당 head를 원하는 페이지의 return에 아래와 같은 코드를 넣자. import Head from "next/head" <Head> &l.. Basic_Studies/React & Next.js dynamic title NextJS nextjs 다이나믹 타이틀 다이나믹 타이틀 adore_voy https://jae04099.tistory.com/285 https://jae04099.tistory.com/entry/Nextjs-Dynamic-title-%EB%A7%8C%EB%93%A4%EA%B8%B0#entry285comment Fri, 21 Jan 2022 17:06:06 +0900 https://jae04099.tistory.com/entry/Nodejs-Heroku%EC%97%90-StrapiPostgresql-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 프로젝트 중 백엔드 구축을 위해 strapi를 heroku에 배포하기로 했다. Strapi를 사용 한 이유는 백엔드에 시간을 많이 소모하고 싶지 않았기 때문이다.   시작 전에 주의할사항은, heroku의 무료 플랜은 하루에 16시간 열려있으며, 30분동안 접속을 하지 않으면 슬립모드에 들어가고 슬립모드에서 깨어나면 초기 로딩 시간이 길어진다는 것이다. 내가 얼마나 사용했는지 알고싶으면 아래의 명령어를 입력하면 된다. heroku ps -a &.. Basic_Studies/Node.js heroku Heroku strapi 배포 PostgreSQL strapi adore_voy https://jae04099.tistory.com/284 https://jae04099.tistory.com/entry/Nodejs-Heroku%EC%97%90-StrapiPostgresql-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#entry284comment Fri, 21 Jan 2022 15:41:36 +0900 https://jae04099.tistory.com/entry/TIL-Nextjs-TS-Styled-components-%EC%84%A4%EC%B9%98-%EB%AA%85%EB%A0%B9%EC%96%B4 자꾸 까먹어서 블로그 계속 찾는다. 여기다 적어놓으려고 기록함.   yarn create next-app 앱이름 --typescript yarn add styled-components @types/styled-components styled-normalize 에휴 TIL Today I Learned adore_voy https://jae04099.tistory.com/282 https://jae04099.tistory.com/entry/TIL-Nextjs-TS-Styled-components-%EC%84%A4%EC%B9%98-%EB%AA%85%EB%A0%B9%EC%96%B4#entry282comment Wed, 19 Jan 2022 08:38:40 +0900