프리티어, reset css

하하 오늘은 월요일

 

오늘은 😪이상태로 강의 듣다가 개인 과제 해설이 올라와서 그걸 보고 코드를 좀 수정해보기로 한다.

 

1. 기본적인 prettier 설정

 

아무리 vs 코드의 prettier 설정이 잘 들어가 있더라해도 .prettierrc 파일의 설정을 우선시해주므로 .prettierrc 파일을 만들어 두는 게 좋다.

{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false,
    "bracketSpacing": true,
    "trailingComma": "none"
}

 

2. reset css 파일

모든 브라우저에서 일관된 기본 스타일을 적용해준다.

 

++ 그치만 사용하면 폰트가 제대로 적용이 안 돼서 일단 주석처리 해뒀다

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. 모듈

코드를 재사용 가능한 단위로 만드는 방법이다.

이를 통해 전체 코드 베이스를 유지 보수하기 쉽고, 모듈 간의 의존성을 관리할 수 있다.

= 긴 파일을 여러 개로 쪼개 관리하는 방법이다.

 

 

사진이 훨씬 이해하기 쉽다

 

3-1) export, import 사용해서 자바스크립트 파일 모듈화

 

export 키워드는 js 파일 안에서 외부로 공개하고자 하는 함수, 변수, 클래스를 지정할 수 있다.

import 키워드는 반대로 외부 파일에서 가져오는 데 사용한다.

 

즉, html 파일에서 js 코드가 쓰인다면, js 파일을 꺼내 따로 저장한 뒤(main.js) 연결한다.

그 다음 main.js 파일에서 분리해 math.js 파일을 만든다.

math.js 내부에 있는 함수는 export 키워드를 통해 외부로 내보낸다. -> export const div = (a, b) => a / b;

main.js 파일에서는 외부의 math.js 파일의 함수들을 import 키워드를 통해 가져온다. -> import {div} from "./math.j";

 

이때, 에러가 뜬다면 html script 태그 내부에 type="module"을 추가해줘야 한다.

 

++ 제대로 적용이 안 되는 것 같다. 일단 빼뒀다.

<!-- index.html -->
<script type="module" src="./modules/main.js"></script>

 

* default export vs named export

1. default export는 모듈 안에서 하나의 값을 외부로 공개한다.

const Name = () => {
}

export default Name

//other file
//아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

 

2. named export는 하나의 모듈 안에서 여러 개의 값을 공개할 수 있다.

export const Name1 = () => {
}

export const Name2 = () => {
}

//other file
import {Name1, Name2} from "name.js"

//다른 이름으로 가져오기
import {Name1 as newName, Name2} from "name.js"

//default export처럼 가져오려면 *사용
import * as NameModule from "name.js"

 

*  항상 엄격 모드로 실행되고, 지연 실행된다.

 

4. 시멘틱 태그 사용

알고는 있었는데... 뒤늦게 header 태그를 추가했다.

 

** 5. 검색창에 아무것도 입력하지 않았을 경우 alert창 뜨게 하기

** 6. 이미지 클릭했을 때만 movie id 뜨게 하기

 

5, 6번은 튜터님이 먼저 작성한 코드를 먼저 보신 후에 수정하는 게 좋을 것 같아 내일 하기로...