FLEX
display
- flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됩니다.
- inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있습니다.
flex-direction
- 내부 요소(아이템)들을 어느 축(가로 또는 세로)을
이 값에 따라 justify-content, align-items, align-content 등의
속성들이 작용할 방향이 결정됩니다.
flex-wrap
- 내부 요소의 갯수 X 길이가 컨테이너를 넘어갈 때 이들을
여러 줄에 걸쳐 나열할지 여부를 정합니다.
justify-content
- 메인 축에서 아이템들을 정렬할 방식을 정합니다.
- flex-start(end)는 row(column)-reverse의 영향을 받는다는 점에서
start(end)와 다릅니다. flex-가 붙은 것을 사용하세요.
align-items
- 수직 축(메인 축의 반대)에서 아이템들을 정렬할 방식을
정합니다. wrap으로 아이템이 여러 줄이 되면 align-content를
사용해서 보다 다양한 방식으로 정렬할 수 있습니다.
gap
- 아이템간에 간격을 줄 수 있으며 두 개의 값을 넣어서
가로 간격과 세로 간격을 다르게 지정하는 것도 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="flex.css">
<title>Document</title>
</head>
<body>
<div id="container">
<div id="header">
<div>로고</div>
<div>메뉴들</div>
</div>
<div id="main">
<div id="content">
부모의 한가운데 배치
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>body{
margin: 0;
}
#container{
display: flex;
flex-direction: column;
height: 100vh;
}
#header{
display: flex;
flex-basis: 100px;
padding: 12px;
background-color: dodgerblue;
gap: 12px;
align-items: flex-end;
}
#header > *{
background-color: yellow;
padding: 12px 0;
text-align: center;
}
#header > *:first-child{
flex-basis: 100px;
}
#header > *:last-child{
flex-grow: 1;
}
#main{
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
#content {
padding: 24px;
background-color: skyblue;
}
#footer{
flex-basis: 60px;
background-color: tomato;
}# JavaScript 모듈 시스템
모듈이란
- 애플리케이션의 규모가 커지면 파일을 여러 개로 분리하는데 이때 분리된 하나의 파일을 모듈이라고 함
모듈의 장점
-
유지보수용이
-
네임스페이스화
- 전역스코프에 존재하는 변수명과 겹치지 않고 모듈만의 네임스페이스를 갖는다.
-
재사용성
모듈시스템
모듈들을 필요시 불러오는 방법
-
ES Module
- ES6에서 도입된 모듈시스템
-
CommonJS
- Node.js환경을 위해 만들어진 모듈 시스템
ES Module
- script 태그에 type="module"속성을 추가
내보내기
-
export를 사용하여 함수 또는 변수 내보냄
-
export default를 사용하여 하나 기본 함수를 내보낼 수 있음 (모듈 당 하나)
//내보내기 export const perfectScore = 100; export const sum = (num1,num2)=>num1+num2; export const avg = (num1,num2) => (num1+num2) / 2; const subtract = (num1,num2) => num1-num2; export default subtract;
불러오기
-
import를 사용하여 모듈 불러오기
//분리해서 가져올 수 있음 //import {perfectScore,sum,avg} from './math.js'; //별칭을 통해서 가져올 수 있 import * as math from './math.js'; // console.log('perfectScore : ',perfectScore); // console.log('sum : ',sum(80,10)); // console.log('avg : ',avg(80,90)); console.log('perfectScore : ',math.perfectScore); console.log('sum : ',math.sum(80,10)); console.log('avg : ',math.avg(80,90)); //export default를 가져오는 방 import subtract from './math.js'; console.log('subtract : ',subtract(80,90));
CommonJS방식
내보내기
-
exports 변수의 속성으로 내보냄
-
module.exports 하나의 객체로 묶어서 내보냄
//내보내기 // exports.perfectScore = 100; // exports.sum = (num1,num2)=>num1+num2; // exports.avg = (num1,num2) => (num1+num2) / 2; // exports.subtract = (num1,num2) => num1-num2; //객체로 내보내기 const perfectScore = 100; const sum = (num1,num2)=>num1+num2; const avg = (num1,num2) => (num1+num2) / 2; const subtract = (num1,num2) => num1-num2; module.exports = { perfectScore, sum, avg, subtract }
불러오기
- require 키워드를 통해 변수에 할당
// const {perfectScore,sum,avg,subtract} = require('./math.js');
const math = require('./math.js');
console.log('perfectScore : ',math.perfectScore);
console.log('sum : ',math.sum(80,10));
console.log('avg : ',math.avg(80,90));
console.log('subtract : ',math.subtract(80,90));NPM
명령어로 자바스크립트 라이브러리( == 모듈 == 패키지)를 설치하고 관리할 수 있는 패키지 매니저
package.json
package.json 파일은 직접 작성할 수도 있고, npm init 명령어를 통하여 자동으로 생성할 수 있다.
| 속성 | 설명 |
|---|---|
name | 프로젝트 이름으로 가장 중요하다. (필수항목) |
version | 프로젝트 버전을 정의한다. 주로 3단계 버전을 사용한다. (필수항목) |
description | 프로젝트 설명을 기술한다. npm search로 검색된 리스트에 표시되기 때문에 사람들이 패키지를 찾아내고 이해하는 데 도움이 된다. |
keywords | 프로젝트를 검색할 때 참조되는 키워드이다. description과 마찬가지로 npm search로 검색된 리스트에 표시된다. |
private | true 로 설정되면 npm 게시를 거부합니다. 이 값은 개인 리포지토리가 실수로 게시되는 것을 방지합니다. |
main | main은 프로그램의 기본 진입점 입니다. |
scripts | 프로젝트에서 자주 실행하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능하다. |
author | 제작자의 이름을 지정합니다. |
license | 패키지에 대한 라이선스를 지정하여 사람들이 패키지를 사용할 수 있는 방법과 패키지에 대한 제한 사항을 알 수 있도록 해야 합니다. |
dependencies | - 프로젝트에서 사용하는(의존하는) 모듈을 기술하는 부분이다. 따라서, 이 프로젝트가 어떤 모듈을 사용하는지 한눈에 볼 수 있다. - 애플리케이션을 설치할 때 이 내용을 참조하여 필요한 확장 모듈을 자동으로 설치한다. 따라서 개발한 애플리케이션에서 사용하는 모듈은 여기에 꼭 명시를 해주어야 한다. |
devDependencies | 개발할 때만 의존하는 모듈을 관리한다. |
node_modules
node_modules 디렉토리에는 package.json 에 설치된 모듈 뿐만 아니라, package.json에 있는 모듈이 의존하고 있는(package-lock.json) 모듈 전부가 설치된 디렉토리이다.
package-lock.json
프로젝트에 설치된 모듈들의 의존성 트리를 기록하고 있으며, package-lock.json 파일을 참고하여 node_modules 디렉토리안에 모듈을 다운받습니다.
npm명령어
| 명령어 | 설명 |
|---|---|
npm init | 새로운 프로젝트(패키지)를 시작할 때 사용하는 명령어로 package.json 파일을 생성합니다. |
npm init -y | -y 옵션을 사용하여 기본값을 자동으로 설정할 수 있습니다. |
npm install <패키지명> (축약 i) | 패키지(= 라이브러리, 모듈)를 설치하는 명령어 입니다. (로컬 설치) |
npm install <패키지명@버전> | 버전과 함께 사용하면 특정 버전을 설치할 수 있습니다. |
npm install --save 축약 -S | --save 옵션을 사용하면 dependencies에 추가됩니다. (npm@5 버전 이후부터는 디폴트로 --save 옵션이 적용됨.) |
npm install --save-dev 축약 -D | 사용하면 devDependencies에 추가됩니다. |
npm install <패키지명1> <패키지명2> | 여러개를 설치할 수 있습니다. |
npm install -g <패키지명> | 전역 설치를 할 수 있습니다. (또는 --global) |
npm install | package.json에 설정된 모든 패키지를 설치 |
npm install --production | package.json에 설정된 모든 패키지를 설치 (devDependencies 제외) |
npm uninstall <패키지명> | 로컬 패키지 삭제 |
npm uninstall -g <패키지명> | 전역 패키지 삭제 |
npm update <패키지명> | 설치한 패키지를 업데이트 합니다. |
npm root | 로컬 패키지 설치 디렉토리 확인 |
npm root -g | 전역 패키지 설치 디렉토리 확인 |
npm ls | 로컬 설치된 패키지 확인 |
npm ls -g | 전역 설치된 패키지 확인 |
npm start | package.json 파일의 script 속성의 start 실행 |
npm run <script-name> | package.json 파일의 script 속성의 start외 스트립트 실행 |
초보 개발자의 성장기💻