Project 1 : Colors
완성된 모습
마크업
colors 디렉토리 하위에 index.html을 두었습니다. 만약 colors 디렉토리로 이동을 하게 되면, index.html이 기본 페이지로서 동작을 하겠네요.
마크업 구조는 컨테이너로 삼을 div와, button 하나를 두는 간단한 배치로 결정했습니다.
웹개발을 처음 배울 당시에는 index.html이 참으로 이해가 안갔습니다만, 다른 하위 페이지들의 index 역할을 하는 목차 페이지라고 이해하니, 왜 이름이 index.html인지 조금은 이해가 갔습니다. 웹 사이트들은 아날로그 문서/책들의 기본적인 기능에 조금 더 풍부한 멀티미디어기능이 추가된 버전이니까요.
마크업 코드는 아래와 같습니다. 저는 스타일시트에서 중복되는 스타일은 루트 디렉토리의 스타일에, 개별 프로젝트에서 사용되는 스타일, 또는 루트 디렉토리의 스타일을 재정의해서 사용해야하는 스타일은 해당 프로젝트 디렉토리의 css파일에 작성해서 스타일을 분리해주었습니다.
<!-- projects/colors/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<main class="App">
<div class="'container">
<button id="random-color-button">Click Me!</button>
</div>
</main>
<script src="./main.js" type="module"></script>
</body>
</html>기능개발
이제 기능을 개발해보겠습니다. 기능은 단순합니다.
- 버튼 클릭시 버튼의 배경화면 색, 버튼색, 테두리 색이 바뀌어야 함
UI
- container Wrapper
- 가로세로 100%. 부모가 main태그.
- 버튼 컴포넌트
- 위치: 부모(container) 컴포넌트의 중앙
- hover 일 때 버튼색상
- hover 일 때font 색상
- active
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<main class="App">
<div class="'container">
<button id="random-color-button">Click Me!</button>
</div>
</main>
<script src="./main.js" type="module"></script>
</body>
</html>프로젝트 회고
원작자 코드와 비교하며 셀프 코드리뷰
(1) 색상명 관리방식의 차이 - 원작자는 script.js 파일 안에 색상명을 배열로 저장한 반면, 저는 키값을 색상명으로, 색상코드를 값으로 하는 객체로 저장했습니다. 만약 CSS에 등록되어있는 색상이 아닌 다른 색상을 추가한다면, 객체방식이 더 좋을 듯 하지만, 코드의 간결성은 원작자의 코드가 더 높았습니다.
(2) DOM 접근방식의 차이 - 버튼에 클릭 이벤트리스너를 추가한 점은 나와 동일했지만, 이벤트 콜백 함수에서 원작자는 document.body태그에 직접 점근하여 스타일을 변경한 반면, 저는 버튼의 부모 노드에 접근하여 스타일을 변경했습니다.
이는 마크업 구조의 차이때문에 발생한 차이로, 원작자는 body 태그 밑에 button 태그를 두었지만, 저는 body - main -container - button 구조였습니다.
스타일시트는 두 개를 link할 수 있다.
다만, 순서를 지켜서 반영되기 때문에, 아래에 있는 스타일이 이전에 적용된 스타일을 덮어쓸 수 (overwrite)있다.
또한, 각 스타일 파일을 브라우저로 로드해오는 것이기 때문에, 웹페이지 로딩 시간을 늘리는 부작용도 있다.
<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">CSS href 경로는 상대경로와 절대경로를 잘 확인하고 사용하자!
제가 처음 href 경로 작성 시 실수했던 부분은 css href의 절대경로를 적용하지 않았다는 것입니다.
첫 번째 href=”style.css”는 루트 경로를 의도하였던 경로입니다만, 결과적으로는 “href=”./style.css”와 같은 의미가 되어버렸습니다.
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="./style.css" />그래서 이렇게 수정을 했습니다.
첫 번째 style.css는 전역 스타일만 모아놓는 스타일시트이고,
두 번째 style.css는 해당 프로젝트 디렉토리 경로에서만 사용하는 스타일들을 모아놓은 스타일시트입니다.
<link rel="stylesheet" href="/style.css" />
<link rel="stylesheet" href="./style.css" />모듈에 대한 이해
흔히 개발을 공부하면서 코드를 모듈 단위로 분리하는 것이 좋다라고 배웁니다. 그렇지만 정확하게 모듈이 무엇인지, 브라우저에서의 모듈은 어떻게 동작하는지 잘 몰랐습니다.
아래 글을 읽고 나서, 모듈에 대해 몰랐던 부분을 짧게 정리해보았습니다.
CSS 파일에서 semicolon 자동으로 붙이기
아래 설정을 Cmd+ shift +p 로 settings.json에 접근한 다음, 추가해 주도록 하자.
"css.completion.completePropertyWithSemicolon" : trueHTML attribute order 대한 고찰
Prettier, ESLint와 같은 포매터와 린터는 협업 시에 코드의 일관성과 가독성을 높이는 역할을 합니다. 그 중에는 순서와 관련된 규칙들도 있습니다.
객체 나열시에 key값을 알파벳 순서로 정렬한다던지, import문을 정렬하는 일은 얼핏 사소해보이지만 한번 신경이 쓰이면 계속 눈에 밟힙니다.
HTML 요소들에는 다양한 속성이 있습니다. 그리고 비록 브라우저는 속성의 순서를 신경쓰지는 않지만, 흔히들 속성을 나열하는 방식이 있을 것이라 생각했습니다.
아래 첨부된 글에서는 속성은 class, id, data-*, 그 외의 것들로 순서를 권장하고 있습니다. 아무래도 DOM 요소들이 class와 id로 선택되어 조작되기 때문에 가장 앞에 두어 빠르게 해당 선택자들을 확인하기 위함이 아닌가 생각이 듭니다. 궁금하신 분들은 재미로 한 번 읽어보시기 바랍니다 ㅎㅎ.
Principles of writing consistent, idiomatic HTML
순수 자바스크립트에서 import 할 때 주의점
| Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
이 에러가 발생하면서 컬러테이블 변수를 받아오지 못했었다. 그 원인을 살펴보니, 내가 colorTable을 아래처럼 import 해오고 있었어요.
import { colorTable } from './colorTable';리액트에 익숙해져서 그런지 확장자명 입력을 하지 않아서 발생했던 오류였습니다. 확장자명을 추가해주니 제대로 동작했습니다.
import { colorTable } from './colorTable.js';아직은 빈약한 메인 페이지
현재는 메인페이지의 마크업이 조악합니다. Project2 - CSS Gradient Generator 를 진행하고 나서, 메인 페이지 레이아웃을 한 번 손봐야겠습니다.
