TIL020_210412
🍊 감상
공부의 시작과 끝은 무조건 복습!
복습하니 확실히 내용 정리가 잘 된다
📙 열품타 코딩 시간 10hour
👍🏼 -
👎🏼 -
🚀 목표
- Udemy에서 Javascript 강좌 수강하기 (332/682)
- 커밋 연속 30일 달성하기 (6/30, 4.12 완료)
- 드림코딩 자바스크립트 기초 강의 완강 (5/23)
- 복습: TIL003-TIL014
📣 복습: The Web Developer Bootcamp
Web
Web
인터넷: 컴퓨터가 서버와 클라이언트로 연결되어 정보 주고 받음
url: 컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는 웹 리소스에 대한 참조, 컴퓨터 네트워크 상의 자원이 어디 있는지 알려주기 위한 규약, 인터넷 주소
통신 프로토콜: 컴퓨터나 원거리 통신 장비에서 메시지를 주고 받는 양식과 규칙의 체계
HTTP: 프로토콜, 통신규약 -> 컴퓨터가 다른 컴퓨터와 메시지를 주고 받을 수 있다, W3 상에서 정보 주고받을 수 있는 프로토콜, 클라이언트와 서버 사이에 이루어지는 요청/응답 프로토콜
하이퍼텍스트: 하이퍼링크를 통해 독자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트
웹: 컨텐츠들이 하이퍼텍스트로 묶인 집합
HTML: 하이퍼텍스트 마크업 언어, 구조적 문서
마크업 언어: 태그를 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지
W3(WWW): 웹, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전세계적인 정보 공간
웹 브라우저: 웹 서버에서 navigate하며 쌍방향 통신하고 html 문서나 파일을 출력하는 소프트웨어, http 소프트웨어 에이전트 (e.g. 크롬, 엣지, 오페라, 사파리, 파이어폭스)
HTML
<tag attribute=""> // <태그 속성="속성값'></태그> (elements(요소))
자주 쓰이는 태그
<html>
<head>
<meta charset="UTF-8" /> <!--문서 설명, 검색어, 문서 부호처리 방식-->
<title> 브라우저 툴바 상단 문서 제목 <title>
<style type="text/css">
body {color:red;}</style> <!--internal 방식의 스타일-->
</style>
<script type="text/javascript">
alert('자바스크립트 연결, defer와 함께 사용하기');
</script>
<link rel="stylesheet" href="style.css"/> <!--style sheet external 연결-->
</head>
<body>
<header> 웹 페이지 상단 영역
<nav> 네비게이션 링크 그룹 </nav>
</header>
<hgroup>
<h1> 제목, 6까지 쓸 수 있음 </h1>
<h2> hgroup은 제목-부제목의 다단계 제목 설정, 하지만 html5에서 삭제됨 </h2>
</hgroup>
<p>문단, 단락 생성
<span> 인라인 요소, 특정 부분 스타일 적용, p 태그 안에 사용하기도 </span>
<dfn> 용어가 처음 등장할 때 정의, 전문어 정의 - 부모 요소에 설명 포함 </dfn>
<abbr title="약자의 뜻"> 약자, 마우스 올렸을 때 뜻 나타남 </abbr>
<q> 짧은 인용구 </q>
<b> 글씨를 굵게 </b>
<strong> 글자 굵게 해서 텍스트 중요하게 </strong>
<em> 특정 텍스트 강조, 이탤릭체 </em>
<i> 이탤릭체 </i>
<ins> 변경 후 추가된 내용 표시, 밑줄 </ins>
<del> 변경 후 삭제된 내용 표시, 가운데 라인 </del>
<br> 줄바꿈 태그
<pre>
태그 안의 탭, 엔터, 스페이스 표현됨
</pre>
<p><sup>1</sup>/<sub>2</sub> + <sup>1</sup>/<sub>2</sub> = 1</p>
<!--sup은 squared, sub은 baseline-->
1 < 6 <!--entity code 써주기-->
</p>
<blockquote>
다른 자원에서 인용한 일부 지정, 인용문, 들여쓰기 됨
<cite> 저작물의 출처 표기, 그림, 책, 영화 이름 등, 이탤릭체 </cite>
</blockquote>
<ol><li> 순서가 있는 목록 </li></ol>
<ul><li> 순서가 없는 목록 </li></ul>
<dl> 용어 설명 목록
<dt> 용어의 제목 </dt>
<dd> 용어 설명 </dd>
</dl>
<hr> <!--화면 가로지르는 라인-->
<table>
<thead><th> th는 열의 제목 </th><th></th></thead>
<tbody><th></th><td> td는 내용 </td></tbody>
<tfoot><tr><td colspan="2"> tr로 행 생성 </td></tr></tfoot>
</table>
<code> 컴퓨터 코드의 일부분 나타냄 </code>
<div> 레이아웃 분할, 블록 레벨 요소, 섹션 만들 때, 의미적 관계 없을 때
<img src="ddd.jpg" alt="ddd"> <!--이미지 삽입-->
</div>
<form>
<label for="dd"> 폼 양식에 이름 붙이는 태그 </label>
<input type="text" id="dd">
<textarea> 여러 줄의 텍스트 입력 </textarea>
</form>
<select name="job">
<option value="학생">학생</option>
</select>
<button type="button"> input타입과 달리 텍스트나 이미지 넣을 수 있음 </button>
<source src="url">
<!--절대 주소 혹은 상대 주소를 명시하여 재생할 미디어 파일 보여줌, 오디오, 비디오-->
<iframe src="http://dd.com"> 인라인 프레임, 다른 문서 포함 </iframe>
<figure>
<audio src="http://dd.com"> 음성파일 재생 </audio>
<video src="http://dd.com"> 영상파일 재생 </video>
<figcaption> 사진, 비디오, 오디오 등 담는 컨테이너, 내용과 연관 </figcaption>
</figure>
<aside> 부차적 내용, 바깥 영역, 느슨하게 관련된 내용 </aside>
<article> 본문 파악, 독자적으로 완성된 컨텐츠 </article>
<section> 서로 관계있는 문서를 분리 </section>
<main>
body 요소의 주 콘텐츠를 정의한다, 직접적으로 중심 주제여야 하고 반복되는 내용은 안 됨, 문서 내에 단 하나만 존재해야 하며 다른 article, aside, footer, header, nav의 자손 요소 안 됨
</main>
<details>
<summary> summary가 details의 1대 자식 요소로 나와야 한다</summary>
<p> details는 더보기/접기 기능의 영역을 감싼다 </p>
</details>
<time datetime="YYYY-MM-DDThh:mm:ssTZD|PTDHMS">
<!--time tag로 요소의 날짜와 시간 데이터를 machine-readable 형태로 명시한다-->
<footer>
꼬릿말, 문서의 정보
<address> 글의 저자나 회사와 연락할 수 있는 정보 </address>
</footer>
</body>
style은 세 가지 방식으로 삽입 가능
1. inline: 태그 속성처럼 사용
2. internal: head에 style tag로 삽입
3. external: .css 저장 후 link 태그 사용
semantic web: 의미론적인 웹 -> SEO
CSS
selector
{ property: value; }
universal, multiple(,), id(#), class(.), descendant( ), adjacent(+), direct(>)
attribute([type="text"])
하위 선택자와 자식 선택자
하위 선택자 section ul -> 모든 하위 요소에 스타일 적용
자식 선택자 section>ul -> 부모의 바로 아래 자식 요소에만 적용
인접 형제 선택자와 일반 형제 선택자
e+f adjacent sibling combinator, e 요소 뒤따르는 f 요소 -> 첫번째 동생요소에만 적용
e~f general sibling combinator, e 요소가 앞에 존재하면 f 선택 -> 모든 동생요소에 적용
pseudo-classes
box model
border 때문에 box size 커지는 문제 해결 -> box-sizing: border-box;
position property
static, relative, absolute, fixed, sticky
transition & transform
⭐️ responsive css & flexbox
grid
grid-template: 1fr 50px/20% 80%;
grid-column-start:3;
grid-column-end:5; /*마지막 수는 포함하지 않는다*/
grid-column-end: span 2;
/*grid-column: 3 / 5;*/
grid-column: 2/6;
grid-row: span 5;
/*grid-area: 1 / 2 / 6 / 6;*/
.box1 {align-self: start;}
.box4 {align-self: end;}
.box4 {justify-self: end;}
javascript
string methods
" hello ".trim().toUpperCase()//"HELLO"
let tvShow = 'catdog';
tvShow.indexOf('cat'); //0
tvShow.slice(0,3); //'cat' -> new copy
tvShow.slice(3); //'dog; -> new copy
tvShow.replace('cat','dog'); //'dogdog' -> 첫번째만 바꿈
tvShow.repeat(3) //'dogdogdog'
`Total is: $${price*qty}`//template literals
math object
Math.PI //3.14159265
Math.round(4.9) //5 //Rounding a number
Math.abs(-456) //456 //Absolute value
Math.pow(2,3) //8 //Raises 2 to the 3rd power=2**3
Math.floor(3.999) //3 //Removes decimal
Math //object 볼 수 있음
Math.ceil(34.1) //35 //Round up
Math.random(); //0.328923749
Math.floor(Math.random()*10)+1; //1 to 10
boolean logic
parseInt(userInput) // string이 숫자로 변함
const day = prompt('Enter a day').toLowerCase();
if (day==='monday') {console.log("You are a baby");
} else if (day==='saturday') {console.log("You are a child");
} else if (day==='friday') {console.log("You are an adult");
} else {console.log ("You are a senior.");
}
array
array methods: push, pop, shift, unshift
let cats = ['blue', 'kitty']
let dogs = ['rusty', 'wyatt']
let party = cats.concat(dogs) //(4) ["blue", "kitty", "rusty", "wyatt"]
cats.includes('blue') //true
party.indexOf('kitty') //1 //첫번째만 찾는다
party.reverse() //["wyatt", "rusty", "kitty", "blue"]
party.slice(1) //["rusty", "kitty", "blue"]
party.slice(2,4) //["kitty", "blue"]
party.slice(-1) //["blue"]
party.splice(1,1) //["wyatt", "kitty", "blue"]
party.splice(1,0,"bruno") //["wyatt", "bruno", "kitty", "blue"]
레퍼런스가 변하지 않는다면 값은 변할 수 있다
객체
자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합
모든 키는 string으로 변환됨 (symbol만 빼고)
person["lastName"] //Jagger
person.lastName //Jagger
ordered data : array
unordered data : object
const comments =[
{username: 'Tammy', text: 'lololol'. votes: 9},
{username: 'FishBoi', text: 'glub glub'. votes: 123}
]
comments[1].text //"glub glub"
loop
const animals = [ 'lions','tigers','bears'];
for (let i=0; i<animal.lenth; i++) {
console.log(i, animals[i]); }
let num = 0;
while (num<10) {
console.log(num);
num++;
}
const subreddits = ['cringe', 'books', 'funny', 'soccer', 'pics']
for (let i = 0; i < subreddits.length; i++) {
console.log(`Visit reddit.com/r/${subreddits[i]}`)
}
for (let sub of subreddits) {
console.log(`Visit reddit.com/r/${sub}`)
}
let total=0;
for (let score of Object.values(testScores)) {
total+= score;
}
console.log(total / scores.length)
function
scope
lexical scope: 함수의 선언에 따라 상위 스코프가 결정된다
forEach
const numbers = [1,2,3,4,5]
numbers.forEach(function (el) {
console.log(el)
})
// 이건 요즘의 더 새로운 방식, for을 이용해서 elment 불러오기
for (let el of numbers) {
console.log(el);
}
map
//1
function cleanNames(arr) {
const newArr = arr.map(function(name){
return name.trim();
})
return newArr;
}
//2
function cleanNames = arr => {
const newArr = arr.map(function(name) {
return name.trim();
};
//3
function cleanNames = arr => arr.map(name => name.trim());
⭐️⭐️⭐️ this
- 함수 실행시에는 전역(window) 객체를 가리킨다.
- 메소드 실행시에는 메소드를 소유하고 있는 객체를 가리킨다.
- 생성자 실행시에는 새롭게 만들어진 객체를 가리킨다.
자바스크립트의 this는 호출하는 방법에 따라 결정된다
호출을 어떻게 했냐, 누가 했냐
호출한 놈(객체), 누가 실행했냐 === this
var someone = {
name: 'codejong',
whoAmI : function() {
console.log(this);
}
};
someone.whoAmI(); //dot notation 방식으로 someone이 호출했으므로 someone이 this
var myWhoAmI = someone.whoAmI;
myWhoAmI(); //regular function call 방식으로 global(window)에서 실행했으므로 this는 window
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',someone.whoAmI);
// boom...button이 호출됨, 함수를 버튼에 넘겨준 것. 실행한 애는 버튼
</script>
bind(바인딩)
var bindedWhoAmI = myWhoAmI.bind(someone);
btn.addEventListener('click',someone.whoAmI); //someone
filter method
높은 평점을 가진 영화의 제목만 불러오기
movies.filter(m=>m.score>80).map(m=>m.title);
reduce method
복습링크
참고링크: zerocho
-> map 과 filter 같은 함수형 메서드를 reduce로 구현할 수 있다
- map을 reduce로 만들기
- filter을 reduce로 만들기
- 가장 작은 수 찾아내기
- 가장 평점이 높은 영화 찾기
-> 예제, 기억 안 나면 링크 참조
arrow function
traditional function은 함수가 실행되는 곳의 영향을 받는다
하지만 arrow functiondms 함수가 만들어진 곳에 scope된다
normal function already create the variable with the function keword
function sum(a,b){ return a+b; }
but arrow function, we have to create own variable to store the function
let sum2 = (a,b) => a+b;
arrow function은 익명 함수에서 빛을 발한다
📣 드림코딩 자바스크립트 기초 강의:6-
6. Class 객체지향언어
class vs object
object-oriendted
class person{
name; //property - 속성(field)
speak(); //function - 행동(method)
}
property
어떤 값이 다른 값과 연관을 가지고 있을 때
문자열.length 에서 length를 프로퍼티라 한다
객체에 소속된 함수 -> 메서드 (e.g. cowokers.showAll())
객체에 소속된 변수 -> 프로퍼티 (e.g. var cowokers = { 'programmer':'egoing'} 에서 programmer
-> 같은 것이라도 맥락에 따라 부르는 것이 다르다
Author And Source
이 문제에 관하여(TIL020_210412), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@keepcalm/TIL020210412저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)