오늘 실습해 볼 것은 아래와 같습니다. 주어진 데이터는 100점 만점 기준 해당 브랜드의 평균 평점입니다. 아마 93점 이렇게 나오겠죠? 별점은 정말 세세하게 퍼센트로 채워짐을 표현해야합니다. 물론! 이를 구현함에 있어 정말 많은 좋은 방법들이 있습니다. 처음 떠올렸던 방법은 별모양 다섯개를 한 묶음으로 status bar를 제작했던 원리와 비슷하게 overflow hidden으로 채워진 것 과 같은 표현을 주는 것 이었습니다. 그러나 주어진 별모양 파일은 svg였고 새로 만들고 싶지 않았습니다. 전체 웹사이트에 통일된 코드기도 했고요. 때문에 각 별 svg마다의 clip-path를 지정해서 5개로 총 길이를 나누는 방법을 사용하려고 합니다. 별 하나만 있는 샘플 코드는 아래와 같습니다. 보라색을 좋아해..
저희 회사는 크게 2개의 파트가 있는데 한 파트는 Next.js로 만들어진 자체 사이트(주로 작업은 여기서 합니다), 또 다른 하나는 카페24에서 운영하는 쇼핑몰 사이트를 운영합니다. 가끔 카페24 사이트를 운영하는 파트가 기술팀에 기능 개발을 요청하곤 하는데 그 담당자가 제가 돼 버렸네요. 때문에, 바닐라 자바스크립트도 만지고 있는데 최근에 꽤 팁이 될 수 있을 만한 이벤트가 있어 적어보려 합니다. 개요 카페24에서 이미지를 수정해서 업로드하면, 자체 캐시 기능이 이미지를 캐싱해서 새로고침을 해도 이미지 수정 적용이 바로 안됩니다. url에 파라미터를 넣어 수정해봐도 수정이 안되는 경우가 있습니다. 이 문제에 대해 카페24는 '이미지 이름을 다르게 업로드'하는 방법을 해결책으로 설명하고 있습니다. 그러..
Dynamic title은 아래와 같다. head의 title 부분을 주목해서 보면 검색어를 입력했을 때 검색어에 따라 title이 바뀌는 모습을 볼 수 있다. 만약에 검색어가 없으면 아래와 같이 뜬다. 또 이런거 전문이 next.js이기 때문에 아주 간단하게 설명을 해보겠다. 해당 head를 원하는 페이지의 return에 아래와 같은 코드를 넣자. import Head from "next/head" ""(큰따옴표)를 표시하기 위해서는 엔티티 코드를 사용해야 하는데, 이는 "이다. res는 따로 변수 처리 해 둔 검색어이다. 그런데 이렇게 하면 검색어가 없을 때도 "" 검색결과 라고 뜨기 때문에 예외처리를 해 주어야 한다. sdv는 우리 팀 이름이다. 아무튼, 이렇게 간단히 삼항연산자로 해결을 봤다. 너..
프로젝트 중 백엔드 구축을 위해 strapi를 heroku에 배포하기로 했다. Strapi를 사용 한 이유는 백엔드에 시간을 많이 소모하고 싶지 않았기 때문이다. 시작 전에 주의할사항은, heroku의 무료 플랜은 하루에 16시간 열려있으며, 30분동안 접속을 하지 않으면 슬립모드에 들어가고 슬립모드에서 깨어나면 초기 로딩 시간이 길어진다는 것이다. 내가 얼마나 사용했는지 알고싶으면 아래의 명령어를 입력하면 된다. heroku ps -a 우선 heroku와 strapi는 회원가입이 됐다는 가정 하에 진행하도록 하겠다. 따라만 오면 적용할 수 있게끔 글을 적어보도록 하겠다. homebrew를 우선 설치해야 하는데, 아래의 명령어로 설치하면 된다. homebrew는 맥 용 패키지 관리자이다. /bin/bas..
- Total
- Today
- Yesterday
- 파이썬 크롤링
- react router
- vscode venv
- 파이썬 flask
- bs4 크롤링
- 카페음료테스트
- css 글래스모피즘
- nextjs 파라미터 넘기기
- NextJS
- 글래스모피즘 애니메이션 구현
- 글래스모피즘 구현
- 백준 10989 파이썬
- next.js 리다이렉트
- 움직이는 글래스모피즘
- getserversideprops redirect
- 리액트 스크롤
- 자바스크립트
- 리액트 컴포넌트
- nuxt 공식문서 한글
- dvd 효과
- 파이썬 정렬
- 리액트 파라미터 넘기기
- 화이팅
- 리액트
- 리액트 라우터
- css marquee
- nuxt 공식문서
- Til
- 10989 파이썬
- nextjs 스크롤
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |