2차 프로젝트가 시작되었다.
2차에서 클론코딩할 사이트는 아리따움이다.
반응형을 고려하며 1920px, 820px, 375px을 잡았다.
내가 맡은 page
상세 페이지를 맡았다.
Component 쪼개기 및 제거할 기능
상단 제품 설명
하단 리뷰
이렇게 쪼갠 이유
- 상단은 그냥 이미지와 영수증 박스를 나눈 것 뿐이다.
- 리뷰는 빨간색의 상태에 따라 밑에 리뷰들의 정보들을 정렬한 후 표현하기 때문에 필터바와 리뷰 전체를 보여주는 창을 나누었다.
- 리뷰는 반복되는 component이기 때문에 하나를 만들어 사용했다.
구상을 생각하며 어려웠던 점
- 별점을 표현하는 방법
- 필터에 따라 누른 상태는 검정색으로 변해야하며 밑에 리뷰들을 바꿔야하는데 이걸 어떻게 나눠야할까?
- 리뷰의 주인외의 유저는 리뷰를 수정, 삭제가 불가능하다.
기능 구현
🔝 상단
상단은 1차때 사용한 정규표현식을 이용한 세자리마다 ,붙히기와 계산기를 사용했기에 어려움이 없었지만 별점을 표현하는 방법이 어려웠다.
별점을 표현하기 위한 반복문 ⭐️
const itemRate = count => {
const arr = [];
for (let i = 1; i < count + 1; i++) {
arr[i] = i;
}
for (let j = count + 1; j < 6; j++) {
arr[j] = 0;
}
arr.shift();
return arr;
};리뷰 전체에서 별점의 올림 숫자를 count로 두고 배열을 만들어서 만약 3점이라면 1부터 3까지는 해당하는 숫자로 나머지 4부터 5는 0으로 만든다. 그리고 0이 아니라면 노란색이 입혀진 아이콘을 나타낸다.
지금 내가 위치한 URL 복사 💾
오랜만에 보는 html을 조작하는 js라고 생각해서 이게 재밌었다.
execCommand 공식 문서
const doCopy = text => {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea); // 생성한 textarea를 body내에 보냄
textarea.focus(); // 생성한 textarea를 선택
textarea.select(); // textarea에 있는 내용물 선택
document.execCommand('copy'); // 클립보드에 현재 선택 영역의 내용을 복사
document.body.removeChild(textarea); // textarea 삭제
alert('제품 링크가 복사되었습니다.');
};localStorage에 제품 id 저장
최근 본 상품들을 구현하기 위해 localStorage를 사용해야했다.
id는 useParams()를 이용해서 가져왔다.
중복되는 숫자들도 들어가며 ,가 무한으로 같이 들어가서 걸러주는 조건을 만들어주는데 애를 먹었다.
map과 더 친해질 수 있는 시간이었다.
⤵️ 하단
🔎 리뷰를 정렬시키는 filter bar
제일 오래 고민했던 것 같다.
각 버튼에 className을 주며 filter bar의 컴포넌트를 바꿔주고 밑 정렬된 리뷰의 트리거의 역을 해주게 하는거 였는데 JSX내에서 JS를 사용하지 못하는게 문제였다.
즉발 함수를 알게 되어 className을 받아 switch문으로 해당하는 component를 나오게 했다.
위의 switch문에서는 filter가 완료된 리뷰들을 표현해주는 컴포넌트가 나오게 하고 밑에는 filter bar에서 누르면 색과 글자가 바뀌는 기능을 처리했다.
🖊 모달을 만들어 리뷰를 작성한다.
react-hook-form library를 사용했다.
이미지 미리보기 기능을 구현하고 싶었는데 library를 사용하는데도 useRef()랑 이것 저것 엄청 이용하는 것만 보다가 블로그를 보게 되었다.
URL.createObjcerURL을 이용해 미리보기를 구현한 블로그
watch메소드를 이용해 쉽게 내가 올린 input의 값을 가져오고 이미지가 올라온다면 URL.createObjcerURL을 통해 가져오고 창을 닫거나 제출을 하게 된다면 메모리 누수 가능성을 없애기 위해 URL.revokeObjectURL을 사용했다.
⭐️ 모달 리뷰 작성창에 rating 기능
결과
별점은 lable을 사용해서 표현했다.
CSS를 사용하면서 ~와 -webkit을 알게 되었다.
~?
flex와 CSS의 general sibling selector (~)를 이용한다.
~ 선택자란 해당 태그와 같은 레벨에 있는 태그를 전부 선택하는 것이다.
ex) div~p는 동일 선상에 있는 id(2,3)를 의미한다.
<div>
<p id='1'>
</div>
<p id='2'>
<p id='3'>-
-webkit?-
stroke-color
CSS를 사용하여 텍스트에 외곽선, stroke 효과를 주는 방법
text-shadow로 대체 가능하다. -
stroke-width (글자의 테두리 넓이)
text-shadow를 사용한다면 가능하지만 지금은 별(label)의 바탕을 채우기 위해 사용한다.
stroke-width라는 속성을 이용한다. -
fill-color
MDN
color로 대체 가능하다.
-
🧶 1주의 후기
생각보다 구현을 해야하는 것들이 많았던 것 같다.
그래도 조금만 더 꼼꼼하게 라는 생각 덕분에 완성도가 조금이나마 올라가고 새로운 것들을 배운 것 같다.
원래 힘들어서 리뷰에서 별점 기능은 그냥 input의 type을 range나 text로 두려고 했었지만 알아보며 만들다 보니 -webkit도 배우고 radio를 사용하는 방법에 대해 알게 된 것같다.
