나보단 잘하자

오늘 실습해 볼 것은 아래와 같습니다. 주어진 데이터는 100점 만점 기준 해당 브랜드의 평균 평점입니다. 아마 93점 이렇게 나오겠죠? 별점은 정말 세세하게 퍼센트로 채워짐을 표현해야합니다. 물론! 이를 구현함에 있어 정말 많은 좋은 방법들이 있습니다. 처음 떠올렸던 방법은 별모양 다섯개를 한 묶음으로 status bar를 제작했던 원리와 비슷하게 overflow hidden으로 채워진 것 과 같은 표현을 주는 것 이었습니다. 그러나 주어진 별모양 파일은 svg였고 새로 만들고 싶지 않았습니다. 전체 웹사이트에 통일된 코드기도 했고요. 때문에 각 별 svg마다의 clip-path를 지정해서 5개로 총 길이를 나누는 방법을 사용하려고 합니다. 별 하나만 있는 샘플 코드는 아래와 같습니다. 보라색을 좋아해..

저희 회사는 크게 2개의 파트가 있는데 한 파트는 Next.js로 만들어진 자체 사이트(주로 작업은 여기서 합니다), 또 다른 하나는 카페24에서 운영하는 쇼핑몰 사이트를 운영합니다. 가끔 카페24 사이트를 운영하는 파트가 기술팀에 기능 개발을 요청하곤 하는데 그 담당자가 제가 돼 버렸네요. 때문에, 바닐라 자바스크립트도 만지고 있는데 최근에 꽤 팁이 될 수 있을 만한 이벤트가 있어 적어보려 합니다. 개요 카페24에서 이미지를 수정해서 업로드하면, 자체 캐시 기능이 이미지를 캐싱해서 새로고침을 해도 이미지 수정 적용이 바로 안됩니다. url에 파라미터를 넣어 수정해봐도 수정이 안되는 경우가 있습니다. 이 문제에 대해 카페24는 '이미지 이름을 다르게 업로드'하는 방법을 해결책으로 설명하고 있습니다. 그러..

외부에서 이미지 파일을 불러왔을 때 발생하는 에러. next.config.js에서 설정하면 된다. module.exports = { reactStrictMode: true, images: { domains: ['cdn.pixabay.com'] // 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 된다. } } 그리고 next.config 파일을 수정했기 때문에 서버를 껐다가 다시 켜야 된다. 이 에러는 width, height값이나 layout='fill' 값을 설정 해 주어야 한다는 것이다. width, height 값은 만약 이미지의 비율 값과 같게 넣게 된다면, layout='responsive'를 줬을 때 비율에 맞게 줄어들고 늘어나게 된다.

Dynamic title은 아래와 같다. head의 title 부분을 주목해서 보면 검색어를 입력했을 때 검색어에 따라 title이 바뀌는 모습을 볼 수 있다. 만약에 검색어가 없으면 아래와 같이 뜬다. 또 이런거 전문이 next.js이기 때문에 아주 간단하게 설명을 해보겠다. 해당 head를 원하는 페이지의 return에 아래와 같은 코드를 넣자. import Head from "next/head" ""(큰따옴표)를 표시하기 위해서는 엔티티 코드를 사용해야 하는데, 이는 "이다. res는 따로 변수 처리 해 둔 검색어이다. 그런데 이렇게 하면 검색어가 없을 때도 "" 검색결과 라고 뜨기 때문에 예외처리를 해 주어야 한다. sdv는 우리 팀 이름이다. 아무튼, 이렇게 간단히 삼항연산자로 해결을 봤다. 너..