심리테스트 페이지 리펙토링

---

https://yeyeong99.tistory.com/3

 

 

위의 링크가 원본

만들 때는 배포만을 목적으로 뒀기 때문에

만드는 거 자체가 뿌듯했었는데

시간이 지날수록 중구난방으로 짠 코드가 마음에 걸렸다.

​

그래서 거의 다 갈아 엎었다

자바스크립트를 배우면 배울 수록

아 좀 더 좋게 짤 수 있을 거 같은데 싶었는데

손 대면 너무 오래 걸릴까봐 미루고 있었다.

근데 결국엔 어느새 손을 대고 있었고

생각보다 빨리 끝냈다.

하루에 2-3시간씩 3일 정도 투자한 듯

어쨌든 어떻게 재구성했는지 설명해보려고 한다.

​

---

HTML, CSS

우선 HTML에서는 div를 거의 section으로 바꾸고

구조도 약간 바꿨다.

그리고 ol, li 로 바꿨음

css는 거의 안바뀌고 이번에 동아리 하면서 알게 된

visibility hidden 을 사용해봤다.

​

JS

원래는 함수를 만들고

그 함수에 화면에 출력하고자 하는 내용을

매개변수로 직접 넘기는 식으로 만들었었다.

이번엔 배열을 선언하고 그 안에 내용을 모두 객체로 저장하였다.

​

이런 식으로 질문이 들어있는 배열을 만들고

결과가 들어있는 배열을 만들었다.

그리고 팁에 관한 배열을 따로 만들었는데

이번엔 응답자의 답변에 따라서 팁을 다르게 출력하기 위해서였다.

​

 

화면을 바꿔주는 함수는 위쪽같이 선언했다.

원래 아래쪽 같이 했는데

차이는 매개변수로 객체 자체를 넘겨주고 비구조화 할당을 이용한 것이다.

비구조화 할당 배울 때 왜 이런 걸 만들었대 했는데 써보니까 편하다

​

결과 화면 출력도 질문 출력이랑 비슷하게 했다.

원래는 배경을 각 상황마다 일일이 변경해주었는데

이번엔 ` ${}`을 이용해서 상황에 맞게 넘겨주었다.

id 말고 indexOf를 사용해도 됐겠지만

이게 보기 좋아서 그냥 이렇게 했다..

​

가장 큰 변화는 이 부분인데

답변에 따라서 다른 결과를 출력하도록 했다.

그땐 생각만 하고 구현을 못했었는데 해서 홀가분

​

질문의 내용과 관련된 팁을 같은 index가 부여되도록 순서를 맞췄다.

그래서 팁이 들어간 배열 보면 제일 첫 번째 것이 비어있음..

이게.. 내 최선이었다.

쨌든 그렇게 index가 같게 해서,

예를 들어 만약 두 번째 질문에서 첫 번째 혹은 두 번째 답변을 선택했다면

두 번째 팁을 answerShow라는 배열에 삽입한다.

그런 식으로 답변에 따른 팁을 삽입하고

마지막엔 answerShow를 반환한다.

나중에 이걸 통째로 출력한다.

그리고 만약에 모든 답변이 3번째 거나 팁이 없는 답변을 선택할 경우를 대비해

그런 경우엔 팁을 랜덤으로 2-3개 출력하도록 했다.

2-3개인 이유는.. 비어있는 첫 번째 객체가 들어갈 경우 2개..

​

​

화면 출력을 제어하는 함수의 일부인데

이건 아직도 좀 .. 최선은 아닌 거 같음

여튼 설명을 하자면

마지막 화면이 되면 선택지(화면상의 하얀색 박스)를 모두 지움

그리고 버튼을 보이게 하고 이전 페이지에서 보여줬던 텀블벅 페이지는 지운다.

그리고 나서 되게 고민했는데

원래는 h5랑 그걸 담은 section을 먼저 만들어두고

display none이랑 visibility hidden을 이용했었다.

근데 정말 누가봐도 이건 정석이 아닌 거 같았음

그래서 그냥 필요할 때 html 태그를 생성하고

그걸 추가하는 식으로 했음..

그리고 visibility hidden을 이용해야

팁이 열리고 닫힐 때 결과를 설명하는 부분이 움직이는 일이 없었기 때문에

add hidden을 해주고 버튼에 addEventListener를 해서 toggle로 제어했음.

​

배열 선언해서 정리해둔 거랑 함수 선언한 거 빼면

(함수는 .. 빼면 안되지만)

이정도다

정말 간단하죠

와중에 button에 이벤트 리스너 줄 때 왜 h5랑 section 선택이 안되나 했는데

지역변수여서 그랬었군아..

코드 과몰입 하다보면 보이던 것도 안보인다.

​

그리고 지금 다운로드 받는 버튼에 이미지 연결 안해둔 거 생각났다.

ㅎ

---

 

이용자가 느낄 수 있는 달라진 점은

자신의 답변에 따라 다른 팁이 나온다는 거..

그외엔.. 눈에 보이게 바뀐 건 없다..

그래도 코드 자체가 일관성 있게 깔끔해진 느낌이라고 해야하나

 

여튼 비구조화 할당도 쓰고 forEach, join 같은 배열 함수도 이용하고

배열, 객체 이용해서 데이터 정리도 해두고

약 6개월 전보단 확실히 발전한 거 같다.