내일배움캠프 사전팀과제 7일차 제출
(23/3/9 사전팀과제 7일차)
[오늘 한일]
- 메인페이지 펼쳐보기 기능
- 상세페이지 좋아요버튼, 공감버튼 계수기능
오늘은 프론트적인 기능을 위주로 진행했다.
백엔드는 어느정도 일단락하고 페이지의 디테일한 부분을 조정하기로 했다.
팀전체적으로 결과물에 대한 디자인이 조정되었는데,
나도 의견을 내고 디자인을 결정하는데 참여했다.
펼쳐보기기능, 상세페이지의 좋아요 공감 버튼등을 어떻게 할지,
그리고 폰트, 아이템 정렬, 칸여백등이 조정됬다.
마무리를 하고 우리팀은 오늘 저녁에 과제를 제출했다.
하루 일찍 제출한것이다.
[오늘 배운점]
- 메인페이지 펼쳐보기는 사진처럼 칸이 늘어나면서,
아이템이 4개씩 나열되는걸로 바뀌게 하기로 했다.
이 부분도 스크립트 함수였다.
함수로 css 설정이 변경되게 만들어서 페이지를 움직이게 하고있었다.
펼쳐보기를 눌렀을때 리스트 칸을 세로로 늘리는건 어렵지 않았다.
그런데 아이템을 4열로 배치하는게 난관이였다.
부트스트랩도 쓰지않았는 상황이였고,
css클래스를 대체하는 방법, 4열로 html본문을 새로 작성되게하는 방법 등으로 고민을 했다.
알아본 끝에 매우 간단한 방법을 찾아냈다.
css flexible box기능을 이용해서 리스트 덩어리를 나열하고 있었는데,
여기에 flex-wrap:warp을 부여하니까 알아서 아이템들을 가로길이에 맞게 줄을 바꿔준다.
- 좋아요와 공감 버튼도 페이지내 함수로 숫자가 계수되고 그걸 보여주는 기능이였다.
처음 구상은 DB에 각각 카운트가 저장되서 그걸 불러와서 보여주는거였지만,
우리는 거기까지 하지않고 그냥 누르면 동작만하는 버튼으로 두자고 결정했다.
(즉, 새로고침하면 계수가 다 없어지고 다시 0이다.)
그런데 어제 리뷰리스팅 기능을 적용하니까 공감 버튼이 죽어버렸다.
계수함수에서 클래스를 참조하는데,
리스팅하며 작성되는 클래스가 일관하기때문에 계수하는 함수가 멈춘것이였다.
해결한 방법은 이렇다.
우선 리뷰리스팅 함수로 리스팅을 할때
i를 쓰기위해서 foreach를 for문으로 바꿨다.
그리고 일관된 클래스가 아닌, 함수와 아이디 값을 주는데 (symBtn, symCnt)
i를 활용해서 symBtn(i)로 i를 참조하는 함수,
symCnti로 순번값이 붙은 id를 작성하게 한다.
그럼 공감버튼 함수인 symBtn함수가 동작할때마다
광역 변수인 counttest가 ++로 숫자가 올라가고
그걸 그대로 id symCnt에 반영해 보여주는 것이다.
이렇게 하면 클릭마다 실시간으로 잘 올라가는 공감버튼 기능을 다시 만들수 있다.
- 다만, 광역 변수를 let counttest = 0 이렇게 하나로 선언하면 모든 리뷰의 공감이 같이 올라간다.
리뷰는 여러개고 공감버튼은 각각 달려있다.
리뷰 개수만큼 변수가 필요한 셈이다.
그럼 어떻게 변수를 필요한 만큼 만들까.
변수를 어떤 고정된 개수만큼(예컨대 넉넉하게) 선언하는 것도 적합하지 않고,
i 즉 a를 참조해서 동적으로 변수를 만드는건 방법도 모르겠고,
좋은 방법이 아니라고 한다.
내가 찾은 해결책은 위의 사진처럼 변수를 배열형으로 선언하는 것이다.
저렇게 배열형으로 선언하면,
순번값으로 지칭되는 배열위치에 각각 값을 추가하고 보여주고 할수 있다.
- if(!counttest)는 counttest == false와 같다.
이렇게 조건을 주면 false에 해당하는 값일경우라는 뜻이 된다.
자세하게는 다음 포스팅에 작성하겠다.