💬 들어가기에 앞서
원래는 바로 구상한 아이디어로 웹 페이지를 만들려고 기획 단계까지 마친 상태였다.
친구랑 포폴 관련 얘기를 하다가 '너꺼 좀 보여줘바' 라고 하길래..
자신이 없어진 나는 다른 프론트엔드 개발 취준생 포폴을 구글링하여 보여줬다.
순간, 그동안 토이프로젝트, 미니프로젝트랍시고 자잘하게 코딩했었는데
번듯한 결과물 하나 제대로 없는게 스스로 부끄럽고 살짝 현타가 왔다.
그래, 다들 개나소나 클론코딩 한다는데
나도 많은 개나소나 중 하나일 뿐이니
클론코딩 먼저 하자! 싶어 시작하게 되었다는 후문...
🕘 일정
- CGV 웹 페이지 섹션 나누기
- 프로젝트 파일 생성
- html 마크업
- 동영상 영역까지 style 작성 (X)
- 느낀점
📁 프로젝트 생성
1-1. node package manager 설치
npm init (or yarn init) 으로 npm을 설치한다.
html 파일이 열리는 root directory 를 변경하고 싶다면 package.json 에서
start 옵션 명령어 뒤에 directory 경로를 입력해준다.
ㅡ npm 설치 및 옵션 참고 글
https://curryyou.tistory.com/346
1-2. 폴더 및 파일 분류
public, src, style 등 역할에 따라 폴더를 구분하고 그에 맞는 파일을 생성한다.
main entry가 되는 html 파일과 favicon은 public 폴더에 넣어주었다.
favicon 적용 방법
<link rel="shortcut icon" href="파일명.ico">ㅡ favicon 관련 참고 블로그
https://d8040.tistory.com/122
🧱 마크업
큼지막한 섹션들 위주로 나누고 세세한 wrap, figure 등으로 범위를 좁혀나갔다.
HTML 요소들 정리한 문서 보면서 잘 사용하지 않았던 요소들을 사용하려고 노력했는데
확실히 마크업을 각잡고 제대로 하면 시간이 훌쩍 가버린다.
아직까지 요소를 사용하는 '기준'이 모호한 것들이 있다.
대표적으로 section 과 article 이다.
마크업 할때마다 느끼는거지만 MDN 문서와 공부할 때 정리한 문서, 구글링 등을 봐도
'이런 상황에는 이 요소를 쓴다!' 라고 명확하게 나오지 않으니,
스스로가 왜 이 요소를 사용했는지 명확하고 확실한 근거와 자신감이 중요한것 같다.
혼자 고민하다가 영 맥을 못 잡을 때는 CGV 페이지 소스코드를 참고했는데
오랜만에 dl, dt, dd 등의 요소들이 보여서 낯설기도, 반갑기도 했다.
그리고 여전히 너무 어려운 네이밍... BEM 패턴을 사용하긴 했는데
BEM을 적용하기 애매한것들은 Camel Case로 작성하느라 뒤죽박죽 예쁘지가 않다 🥴
다른 사람들의 코드들을 자주 접하면서 네이밍 관점도 넓혀야겠다
🌝 느낀점
얼추 전체 마크업을 완성했다.
오전 11시부터 오후3시까지 (중간 쉬는시간 포함하더라도)
거진 3시간 이상이 걸렸는데 생각 이상으로 오래걸렸다.
점점 시간이 줄길 기대해봐야지.
웹 페이지 소스코드들을 볼때마다 스크린 리더기를 통한
접근성 고려를 1도 하지 않는 웹 페이지들이 수두룩하다.
아니 거의 못 본듯..? 그러다보니 나도 점점 인식이 약해져가고
심지어 거의 가물가물 .. 까먹었다 ㅠㅠ 2차로 웹 접근성 관점에서 좀 더 다듬어봐야겠다.
스타일까지 건드려보려고 했으나 배도 고프고 이미 진이 빠지는것...🤪
우선은 집에 가서 좀 쉬다 저녁에 접근성 고려 + 스타일 건드려봐야지
