1. 부트스트랩
- 트위터에서 시작된 오픈 소스 프론트엔드 프레임워크
- 웹페이지에서 사용되는 많은 요소를 포함하고 있다.
글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘, 드롭다운 메뉴, 내비게이션 바, 버튼, 탭, 리스트, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등을 포함
- PC용 디자인뿐 아니라 태블릿이나 스마트폰 같은 모바일용 디자인을 반응형으로 한번에 지원
- 사전 정의된 디자인이 있다보니 비슷한 디자인의 페이지가 양산될 수 있다.
- 하지만, 오픈 소스다 보니 사용자가 임의로 변경하는 것이 자유롭고, 변경한 것을 재배포하거나 상업적으로 판매하는 것이 가능하기 때문에 문제를 해결할 수 있다.
1)함수
- return이 있는 함수 or return이 없는 함수로 나누어짐.
2. break / continue / return 차이
1) break는 보통 반복문에서 사용되며, break키워드를 통해 반복문을 빠져 나올수 있도록 하는 역할을 한다.
for (let i = 0; i < 10; i++) {
if (i === 5) {
console.log(`${i}에서 멈춘다.`);
break;
}
console.log(i);
}- if문에서 i가 5를 만나면 console.log를 만나 출력하고 break를 만나 반복문을 빠져 나오게 된다.
2) continue는 반복문에 사용되며 현재 단계를 중단하고 다음 반복문을 이어서 진행한다.
for (let i = 0; i < 10; i++) {
if (i === 5) {
console.log(`${i}에서 건너뛴다.`);
continue;
}
console.log(i);
}- if문에서 i가 5를 만나면 console.log를 만나 출력하고 다음반복문(i = 6)으로 넘어가 진행을 계속하게 된다.
3) return는 함수에서 사용하지 않으면 에러가 발생하게 된다.
function number() {
for (let i = 0; i < 10; i++) {
if (i === 5) {
return i;
}
console.log(i);
}
}
console.log(`number라는 함수가 ${number()} 입니다.`);- number함수에서 i가 5일 때 number 함수에 5가 반환되고 그 자리에서 함수가 종료된다.
3. Promise
- Promise(프로미스)는 자바스크립트 비동기 처리에 사용되는 객체이다.
- 비동기처리 - ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’
- 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용
1) Promise가 필요한 이유
- 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다.
$.get('url 주소/products/1', function(response) { // ... });
- 위 API가 실행되면 서버에다가 ‘데이터 하나 보내주세요’ 라는 요청을 보내는데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨게 된다. 이러한 문제를 해결하는 것이 Promise(프로미스)이다.
2) Promise 동작원리
4. async await
1) async 함수
async function f() {
return 1;
}- anync는 function앞에 위치한다.
- function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다.
- 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.
- 아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환된다.
async function f() {
return 1;
}
f().then(alert); // 1- async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다.
2) await
- await는 async 함수 안에서만 동작한다. (일반 함수에서는 사용 불가)
let value = await promise;- await 키워드를 만나면 프라미스가 처리될 때까지 기다리고(await는 '기다리다’라는 뜻을 가진 영단어입니다 – 옮긴이). 결과는 그 이후 반환된다.
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000)
});
let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)
alert(result); // "완료!"
}
f();
- 함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 '중단’되었다가 프라미스가 처리되면 실행이 재개 한다.
- 프라미스 객체의 result 값이 변수 result에 할당된다.
- 1초 뒤에 '완료!'가 출력
- 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다.
- 프라미스가 처리되면 그 결과와 함께 실행이 재개 된다.
- 프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.
4. 클로저
- 함수와 함수가 선언된 어휘적 환경의 조합이다.
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)
- myFunc은 makeFunc이 실행 될 때 생성된 displayName 함수의 인스턴스에 대한 참조
- displayName의 인스턴스는 변수 name 이 있는 어휘적 환경에 대한 참조를 유지
- myFunc가 호출될 때 변수 name은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 alert 에 전달
- 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다.
- 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.
1) makeAdder 함수
function makeAdder(x) {
var y = 1;
return function(z) {
y = 100;
return x + y + z;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨
console.log(add5(2)); // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산단일 인자 x를 받아서 새 함수를 반환하는 함수 makeAdder(x)를 정의했다. 반환되는 함수는 단일인자 z를 받아서 x와 y와 z의 합을 반환한다.
add5, add10 두 개의 새로운 함수들을 만들기 위해 makeAdder함수 공장을 사용
하나는 매개변수 x에 5를 더하고 다른 하나는 매개변수 x에 10을 더한다.
add5와 add10은 둘 다 클로저이며, 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다.
[https://react-bootstrap.github.io/layout/grid] (반응형 웹)
[https://lsm0823.github.io/Htmlsite/] (lsm 웹페이지)
github로 웹사이트 만들기
- index.html파일을 폴더에 저장
- 리파토리지 생성
- git push
- github에서 setting -> pages -> branch/master -> save
풀스택 개발 이야기