bootstrap
어제는 가로 중앙정렬을 배웠따. justify를 이용해서 가로에서 가운데 왼쪽 오른쪽으로 정렬이 가능했다.
그럼 세로는 어떻게 할까
세로 정렬
<div class="container text-center">
<!-- 그리드정렬 -->
// 세로 가운데 정렬
<div class="row align-items-center">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
// 세로 위 정렬
<div class="row align-items-start">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
// 세로 아래 정렬
<div class="row align-items-end">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>결과
align-items로 세로를 정렬할 수 있다. 위 가운데 아래는 가로 정렬과 같이 start, center, end로 정할 수 있다.
img
이미지 fluid
이미지를 삽입할 수 있는 클래스?, 그건 그냥 css에도 있다.
우선 코드부터 보자
<img src="./img/pic_1.jpg" alt="사과" class="img-fluid">
이것만 하면 자동으로 max-width가 적용되어 부모의 크기를 자식이 넘지 못하게 해준다.
이미지 float
bootstrap에서의 float이다.
<div class="container text-center">
<img src="./img/doit.jpg" alt="소년" class="float-start">
<img src="./img/doit.jpg" alt="소년" class="float-end">
</div>결과
왼쪽과 오른쪽으로 정렬이 된것을 확인할 수 있다.
table
bootstrap에서는 table을 어떻게 사용할까?
bootstrap은 테이블의 소스를 지원한다 . 그래서 홈페이지에 있는 결과를 보고 마음에 드는 소스를 사용할 수 있다.
docs탭의 table에 들어가서 마음에 드는 결과를 보고 소스를 복사해서 사용할 수있다.
복사해서 사용한 결과
테이블이 복사되었다.
이거 말고도 hover디자인을 준다거나 클릭디자인도 줄 수 있다.
결과를 보고 마음에 드는 디자인을 소스를 들고와서 사용하니까 많이 편리했다. 이거 말고도 다른 영역에서도 소스를 사용할 수 있으니 서치능력을 키워야 할 것같다.
text
text color
<p class="text-primary">Lorem ipsum</p>
<p class="text-secondary">Lorem ipsum</p>
<p class="text-success">Lorem ipsum</p>문자에도 색깔을 줄 수 있다. 색의 이름은 사이트에서 찾을 수 있다.
결과
text 정렬
<p class="text-center">Lorem</p>
<p class="text-start">Lorem</p>
<p class="text-end">Lorem</p>매우 간단하다. 이런거 보면 왜 bootstrap안 쓰는지 싶다.
결과
메뉴 with.nav
나브바또한 홈페이지에서 소스를가져올 수 있다.
가져온 소스 파악하기
나브바를 가져와서 소스를 분석했다. 소스가 길어지면 헷갈리는게 많아지는데 이때 주석을 달아서 알기 쉽게 해 줄 수 있다.
그런데 어디서 어디까지가 무엇인지를 알기가 어려운데 이때는 부모태그를 접으면 더 알기가 쉬워진다.
이렇게 보기 보다는
이렇게 보는게 더 어떤 소스가 화면에서 어디인지 인지하기가 쉽다.
반응형 웹디자인
bootstrap은 자동으로 반응형웹을 지원한다 그래서 화면을 줄이거나 하면 자동으로 바뀌게 코딩을 해놓았다.
전체화면일 때
해상도가 줄었을 때
메뉴의 모양이 바뀌는 것을 알 수 있다. 알아서 코딩이 다 돼있는 것이다.
ecma javascript
이제 부트스트랩을 끝내고 이크마 자바스크립트로 넘어가자
객체
배열에 객체넣기 json
자바스크립트에서 배열에 객체를 넣는 것을 json이라고한다.
let data = [
{name : "혼자 공부하는 자바",
price : 18000,
publisher : "한빛미디어"
},
{name : "HTML5 웹 프로그래밍 입문",
price : 26000,
publisher : "한빛아카데미"
}
];형태는 배열변수 안에 여러개의 객체가 들어가있는 형태이다.
객체 속성 추가
미리 만들어 놓은 객체에 새로운 속성을 추가하고 싶은경우 사용할 수 있는 방법이 있다. 일일이 찾아서 추가 할수 있지만 더 편리한 방법을 알아보자
// 객체 속성 추가하기
let students = {name : "윤인성",}
console.log(students);
// 속성 추가 : 새로운 속성을 추가시킬 일이 생길경우 사용할 수 있는 방법
students.hobby = "악기";
console.log(students);결과
악기가 추가된 것을 확인 할 수 있다.
객체 속성 수정
let students = {name : "윤인성",
hobby : "악기"};
console.log(students)
students.name = "홍길동";
console.log(students)결과
윤인성이 홍길동으로 바뀐것을 볼 수 있다
근데 여기서 바꾸기 전의 콘솔 결과를 봐도 홍길동인 것을 알 수가 있다. js는 차례대로 읽어도 전의 것을 완전히 수정해버리기에 시간과 상관없이 다 수정된 결과를 보인다.
객체 속성 삭제
let students = {name : "윤인성",
hobby : "악기"};
delete students.name;
console.log(students);결과
class
이크마js에서 클래스란 객체를 표현하는 다른 방법이다.
js에서도 백엔드가 가능해지면서 클래스를 사용하게 되었다.
클래스 만드는법
// 클래스란 객체를 표현하는 방법 :
//class 클래스명 {생성자(){} 함수명1(){} 함수명2(){}};
class squre {
//원둘레 구하는 함수
getperimeter(width){
return 2 * width * 3.14;
};
//원 너비 구하기
getArea(width){
return width * width * 3.14;
};
};클래스 호출하는 법
// "변수 = new 클래스();"를 해주면 된다.
//함수 사용은 인스턴스가 호출된 이후에 "인스턴스 이름.함수();"해주면 된다.
let squre = new Squre();
console.log("둘레: " + squre.getperimeter(4));
console.log("둘레: " + squre.getArea(4));이런 식으로 인스턴스를 만들어 인스턴스의 함수를 사용할 수 있다.
함수 정의법
함수 표현식
// 예제 1) 텃셈 함수를 정의하세요
// 기본함수 : 함수 선언식
function mySum(first, second) {
console.log(first + second);
};
mySum(3,7);
기존에 우리는 함수를 이렇게 만들었다. 함수를 만들고 거기에 이름을 적은 함수.
그런데 또 다르게 함수를 만드는 방법이 있다.
// 예제 1) 텃셈 함수를 정의하세요
//함수 표현식
let mySum =function(first, second) {
console.log(first + second);
};
이 방법은 전과는 다르게 변수가 등장한다. 변수에 함수를 넣기 때문에 함수 이름이 따로 없다.
만들어진 이유
기존 함수 만드는 방법이 있는데 왜 굳이 나왔을까? 그건 함수 선언식의 단점때문이다.
함수 선언식을 정의하면 웹브라우저가 함수를 강제로 제일 위쪽으로 옮긴다.이걸 함수 호이스팅이라고 한다.
js는 위부터 차례대로 읽는데, 7라인에서 함수를 정의했다면 이걸 웹부라우저가 1라인으로 옮겨서 이거부터 읽게 만들었다. 그럼 실행순서가 개발자의 의도와 다르게 되고 이런 이유로 함수 표현식이 등장.
애로우함수
//에로우함수 만드는 법 : 함수 코딩 효율을 증가시키기 위해(간단하게 만들기 위해)
let mySum =(first, second) => {
console.log(first + second);
};함수표현식에서 "function"을 지우고 매개변수 뒤에 "=>"을 넣어주면 된다.
만약 함수 내용이 한 줄이라면 "return"과 중괄호 생략도 가능하다.
spread
배열값 복사
let arr = [1,2,3,4,5];
let arr2 = [...arr, 6, 7, 8, 9];
console.log(arr2);
배열을 복사해서 추가하고 싶을 경우사용할 수 있다. 배열이 길거나 기존의 코드를 건드리지 않기 위해 사용한다.
let arr1 = [1, 2, 3];
let arr11 = [4, 5, 6];
let arr111 = [...arr1, ...arr11];
console.log(arr111);결과
이처럼 여러개도 가능하다
향상된 for문
향상된 for
배열에만 적용이 가능한 for문이다.
for(let e of arr){
console.log(e);
};for(let 변수명 of 배열명){실행문}으로 표현할 수 있다.
새로운 함수e를 주었고 이게 arr의 전체 배열의 값을 가지게 되고 자동으로 배열의 길이만큼 반복해준다.
기존의 반복문보다 더 간단하게 반복문을 돌릴수 있다. 하지만 이건 배열에만 사용 할 수 있고 길이 까지만 반복이 가능하다.
foreach
arr.forEach((value) => console.log(value));배열에서만 사용이 가능하며 "배열.foreach((value) => console.log(value));"를 해주면 value라는 배개변수에 배열값이 담기고 이걸 console이 배열의 길이만큼 자동으로 반복해주는 구조이다.
특징
1. 자동으로 반복문을 실행함
2. return이 없는 실행문에 대해 사용 : 값 출력 용 사용
3. break문 사용 불가
생기게 된 배경
함수형 프로그래밍으로 코드를 짜면, 객체지향으로 짜는것보다 굉장히 짧아지는 코드가 생김 그 중 하나가 foreach이다.
그래서 이것을 가져와서 사용할 수 있게 만들었다. 자바와 자바스크립트에서..
map
특징
1. 자동으로 반복을 실행해준다.
2. return값으로 값을 반환하여 변수를 해줘야한다.
3. break를 사용할 수 없다.
4. 결과를 배열로 보여준다.
let num = [1,2,3,4,5];
let res = num.map((value) => value * value);
console.log(res);또다른 foreach와의 차이점은 이것은 결과를 배열로 보여준다는 것이다.
그래서 기존 배열을 바탕으로 새로운 배열을 만들고 싶을때 사용할 수 있다.
결과
filter
특징
1. 자동 반복
2. break사용 불가
3. return사용
4. 원본보다 개수가 작은 새로운 배열을 만든다.
5. 조건을 입력하며 조건에 해당하는 수만 반복한다. 이래서 이름이 filter
let num = [1,2,3,4,5];
let result = num.filter((value) => value >3 );
console.log(result);
결과
조건에 따라 3보다 큰 4,5만 배열에 들어간 것을 확인 할 수 있다.
느낀점
오늘은 뭔가 한번에 여러언어의 너무 많은 것을 배운 느낌이다. 그렇게 배운만큼 머리에 들어오는 것은 별로 없는거 같다. 아마 백엔드 위주라서 프론트엔드 영역의 것은 가볍게 배우고 넘어가려는거 같다.
함수형 코딩에 괜찮은 기능들이 많은거 같다. 이런것들을 잘 이용하면 코딩의 속도와 효율이 많이 증가할거 같다. 이런것들을 추후에 배우는것도 나쁘지 않은거 같다고 생각한다.
