자바 스크립트 두번째 과제, 반응형 FAQ 카드 만들기! 그리고 받은 결과 리포트

두번째 완성 결과물!

 

 

 

프론트엔드 멘토(Frontend Mentor)에서의 두번째 JavaScript 과제를 제출했다. 첫번째로 도전했던건 HTML과 CSS만 사용하는 과제였고, 이번에 처음으로 자바 스크립트를 이용해야하는 걸 해보았다. (사실 튜토리얼 등을 보면서 따라한 것 외에 처음으로 어떠한 가이드 없이 혼자 자바 스크립트를 사용해본 경우였다!) 아직 HTML/CSS/자바 스크립트를 독학한지 한 달밖에 되지 않아서 이 과제도 너무나 어렵게 느껴졌다 ㅠ_ㅠ.. 직접 코드를 계속 짜봐야 된다는게 정말 맞는 말인 것 같다.

 

 

<프론트엔드 멘토(Frontend Mentor) 사이트를 처음 찾고 쓴 글>

2020/12/24 - [Learn to Code] - HTML, CSS, 자바스크립트 배운 뒤 프로젝트 하라고?! 어..어떤 프로젝트?

 

 

과제 리소스로 다운받은 zip파일 안에는 디자인 리소스가 담긴 images 폴더와 기본 텍스트가 적힌 index.html, 폰트 및 사용 컬러 등을 알려주는 style-guide, 그리고 내가 따라해야 하는 결과물의 이미지를 담은 design 폴더가 함께 있었다.

 

design 폴더 내용물. 이렇게 만들도록 하면 된다.

 

images 폴더에 담긴 리소스들. 이 아이들을 이용해서 화면 구현을 하면 된다.

 

기본 레이아웃을 만드는 것과 반응형으로 바꾸는 HTML이나 CSS 요소들 말고, 아래 사항들은 자바 스크립트로 해결했다:

 

- 긴 답변들은 HTML에 넣지 않고 JS로 추가

- 반복되는 아이콘은 JS로 추가

- 각 질문들이 포함된 영역 클릭시

  (1) 질문 제목이 굵어지고

  (2) 화살모양 버튼이 뒤로 뒤집히고

  (3) 답변이 짜잔하고 나타나도록 구현

 

 

답변들이랑 아이콘을 JS를 이용해 넣은 것은 최대한 많이 언어를 써보기 위해서였다. (반복도 줄일겸...)

 

한가지 요소에다가 이벤트 리스너를 여러번 적용할 수 있다는 걸 몰랐어서 '도대체 답변이 나오는 동시에 제목도 굵어지게 어떻게 하는거야!!!!'라며 아주 긴 시간 혼자 고민을 했지만 우연히 시도해봤다가 되길래 좋아라 했다.

 

마우스를 올리면(hover) 제목 컬러가 바뀐다

 

이번 과제도 github repository를 만들어서 올리고, vercel이 자꾸 안되서 그냥 github page로 열어서 과제를 제출했다.

 

<과제 제출하는 방법 상세 설명>

2020/12/24 - [Learn to Code] - 프론트엔드 맨토(Frontend Mentor), 과제 제출하기!

 

 

그렇다면 이번엔 어떤 리포트가 나왔을까? 아래에 디자인 비교와 자동 코딩 검수 부분을 공유한다.

1. 디자인 비교

오른쪽이 오리지널 디자인, 왼쪽이 내가 한 가리지널(?) 디자인

이러이러하게 만들어라, 라고 제공해주는 design 폴더의 이미지는 대충 눈대중으로 보고 만드는 것이기 때문에 이렇게나 큰 사이즈 차이가 나왔다...ㅜㅜ...ㅎㅎㅎ 그래도 얼추 느낌은 비슷하니 패스...!

 

 

2. 리포트

 

자바 스크립트로 처음 해본 코딩이어서 뭔가 이슈가 많을 것이라고 예상을 하긴 했다. 아니나 다를까, 이번엔 무슨 짓을 해논건지 접근성 부분에선 10개의, HTML에선 6개의 이슈가 나왔다.

 

 

 

그런데 보아하니, 대다수가 겹치는 내용이어서 조금 안심했다.ㅋㅋㅋㅋ 일단 접근성 부분에선 두 가지의 같은 이슈가 반복되어서 총 10개의 합으로 표시된 것이었다.

 

 (1) 버튼: Accessibility API에 가능한 이름들을 지정하지 않았다고 한다. (내 HTML의 버튼은 모두 헐벗은 자연 그대로의<button></button>이었다.)

 

 (2) 이미지: ㅜㅜ... 급하게 하다가 <img>의 alt=""를 모두 비워두었다. 이미지가 어떠한 이유로 표시되지 못할 때, 또는 시각장애인이 브라우저를 이용할 때 이미지의 alt 부분에 적힌 글이 음성으로 설명된다고 한다. 앞으론 꼭 써야겠다.

 

 

 

HTML 부분에선 6가지 이슈가 있다고 나왔는데, 그 중 한 개가 h1관련이고 나머지는 모두 img와 관련된 동일한 이슈였다.

 

(1) h1: 내가 사용한 맥락에선 <h1>이 <span>의 자식 요소로 사용되면 안된다고 한다.

폰트 굵기를 두껍게 하기가 그렇게 귀찮았냐!!

(2) img: 접근성 이슈에 나왔던 것과 마찬가지로, <img>에 alt를 다 빈칸으로 남겨두었다는걸 짚어주었다. 앞으로 안그럴게요!!

 

 

두번째로 도전해본 과제인데, 너무 재미있다. 아니 왜 이런걸 이제야 배워가지고...

 

 

추가로,

프론트엔드 멘토 홈페이지의 대시보드엔 나와 같이 과제에 도전하고 제출한 사람들의 결과물들이 쭉 올라온다. 이중엔 나랑 같은 과제에 도전한 사람들 것들도 종종 볼 수 있으며, github repository 링크를 따라 들어가서 코드도 확인해 볼 수 있다. 똑같은 과제를 다른 사람은 어떻게 했는지 비교하면서 공부가 가능하니 더 많이 배우는 것 같다.