1. 프로젝트 작업 기간:
- 프로젝트 초판 작업기간 : 2023.03.30 ~ 2023.03.31
- 프로젝트 1차 리팩토링: 2023.04.01 ~ 2023.04.02
- 프로젝트 2차 리팩토링: 2023.04.06
2. 프로젝트 초판 코드 리뷰
- 초판 깃페이지 : https://seunggyu-jung.github.io/Hodu-project/
- 본 리뷰는 작업하는동안 어려웠던 부분에 대해 작성하고, 이후 정식으로 코드리뷰를 받고, 모범사례들을 참고하여 리팩토링까지 이어진다.
2-1. 수업에서 진행한 피드백
- 페이지의 제목을 알려주는 로고는 되도록 h1태그로 가져가는 것이 접근성 및 코드의 시맨틱성을 향상시키기에 사용을 권장한다.
또한, 코드의 시맨틱함을 위해 header나 main, footer 태그는 가장 밖에 위치하도록 작성하는 것이 바람직하다.
2. 페이지의 가운데 정렬 작업을 하고 싶은 경우, 무리하게 패딩값을 주는 것을 지양해야한다. 디스플레이 화면이 사용자의 모니터 사양마다 다르기에, 패딩값으로 가운데 정렬을 하면 화면이 일그러진다.
따라서 가운데 정렬시, wrapper라는 또 다른 div 태그로 감싸주고, max-width 와 margin : auto로 맞춰주는 것을 적극 권장한다. 여기서 max-width는 너비의 최대치를 설정하여, 그 이상으로 커져서 화면이 깨지는 것을 막아주는 프로퍼티다.
- 이미지 태그를 작성할 때는 반드시 alt에 자세한 설명을 작성하도록! 이는 접근성의 기본이 되기 때문에 반드시 작성해야 한다.
- input 태그 안에 required를 함께 넣어주면 웹 접근성이 더욱 향상되기에 필히 함께 쓰는 것을 적극 권장한다.
또한 라벨 태그 안에 인풋에 대한 설명을 작성하고, a11y 클래스를 줘서 숨기면 접근성이 더더욱 향상된다.
3. 프로젝트 Refactoring & 코드 리뷰
- 리팩토링 프로젝트 깃허브 URL : https://github.com/Seunggyu-Jung/Hodu-project/tree/main/Project_Refactoring
3-1. 변경 사항
- 상단의 이미지 로고는 h1태그로 감싸줘서 접근성을 향상시켰다.
또한, header와 main, footer는 전부 wrapper로 감싸서 가운데 정렬시켰다.
- 메인의 하단의 learn more가 적힌 버튼을 float :right 처리하여 무지성 flex 나열을 방지했다.
- 가장 하단의 article부분의 input태그 부분에 flex를 풀고, position : relative를 넣고 subscribe 버튼에 abosolute값을 줘서 위치를 배치했다.
근데, 위치를 잡는게 이 방법이 맞나 싶다. translate시키는 숫자도 너무 크고, input태그에 넣는 패딩 값도 커서, 너무 원시적이고 유지보수가 어려울 것 같은 느낌이 든다.
-> 이를 해결하기 위해 포지션의 top과 right값을 주고 transform값을 주지 않았다.
-> 그리고 반응형의 경우, 기존의 포지션 right 값을 초기화하고, top,left, transform: translateY값으로 조정했다.
- footer에 위치한 고양이 배경 사진을 배경이 아닌 일반 이미지 태그로 넣었으며,
object-fit: cover로 이미지의 일그러짐을 방치했다.
- 드디어 스스로 미디어 쿼리를 사용해서 반응형 작업을 해봤다. 남들처럼 기기마다의 반응형 작업은 다소 무리일 것이라 판단하여 시안에 나온 너비를 위한 반응형 작업을 했다.
- pc페이지에선 한 줄이지만, 반응형에선 줄바꿈이 생기는 작업을 하고 싶은 경우:
변경을 원하는 텍스트를 span태그로 감싼 뒤,
이를 반응형 미디어 쿼리에서 display : block;하면 된다.
3-2. 추가적으로 작업해야 하는 부분
- 반응형 작업을 걸어 해상도가 낮아질때, 메뉴 버튼이 생기게 하는 방법에 대해 고민하고 시도해볼 필요가 있다고 생각한다. 필자의 생각으로는 기존 pc버전의 상단 배너에 메뉴 버튼을 숨김처리하고 줄였을때, 숨김처리를 해제하면 가능할 듯 하다.
-> 버튼 태그를 만들고, a11y-hidden 클래스로 숨김처리를 했다.
-> 그리고 반응형 a11y-hidden 클래스안에 속성들에 inital value값들을 넣어 나타나게 처리했다. 근데 더 간단한 방법이 있었던 것 같은데, 질문 해봐야겠다.
- 반응형으로 작업할 시, 시안에 나온대로 텍스트가 깔끔하게 나오지 않아 상당히 불편하다. 이걸 조절하는 방법이 있는지에 대해 질문해볼 가치가 있다고 생각한다.
-> 텍스트를 작업할 때, 반드시 해당 텍스트 폰트의 속성들을 전부 비교해봐야한다. 특히, 전역에 폰트를 바꾸는 작업은 반드시 선행되어야 한다.
그 후에, font-weight,line-height,font-family등 다양한 폰트 속성들도 맞춰야 시안과 같은 작업물이 나온다.
- 위로 올라가기 버튼을 작업하지 못했다. 이건 아마도 포지션 fixed로 작업하면 될 듯하다.
4. 회고
이번 프로젝트는 주인장에게 있어서 상당히 유의미한 작업이었다. 무엇보다 가운데 정렬과 반응형을 스스로 만들어 구현해내었다는 것이 가장 인상깊었다.
자랑은 아니지만, 남들은 진작에 할 수 있던 것임에도, 완전 쌩초보에 배우는게 느려서 이제 깨달은 듯 하다. 앞으로 잘하면 된다.
본 프로젝트는 추후에 라스트 리팩토링 및 커스터마이징까지 진행하여 내 포트폴리오 사용할 예정이다.
