2021.05.31~06.04

43449 단어 한 주 회고한 주 회고

31일(월)부터 6월4일(금)까지 시간이 역시 순식간에 지나갔다..
짧은시간에 너무 많은 걸 배워서 그런지 지금 머릿속에 내가 배운 내용들이 정리되지 않은 기분이 든다.
그래서 오늘은 처음부터 회고를 하면서 내가 알고 있는 것들과 모르고 있는 것들을 파악하고 보완하는 시간을 가져보려한다.

Chapter 1. 변수

변수

  • 데이터 보관함 (메모리)
  • 보관함의 크기는 동일
  • 각 보관함의 이름 = 변수
  • 이름을 통해 데이터 사용 (재활용)

How to use

  • 보관함 확보 -> 선언(declaration) let age;
  • 보관함에 데이터 저장 -> 할당(assignment) age = 12;
  • 선언과 할당 동시에 가능 -> let name = 'kim';

변수와 타입

  • 변수는 상황에 따라 변할 수 있는 값
  • 선언은 let myname;
  • 할당은 myname = 'Steve';
  • 같이쓰면 let myname = Steve';
  • 프로그래밍 세계에서의 변수는 이름이 붙은 값
  • myname이라는 변수를 이용해 'Steve'라는 값을 다른 곳에서도 이용할 수 있다.
pi * 5 * 5; // 반지름이 5인 원의 넓이 
pi * 7 * 7; // 반지름이 7인 원의 넓이
let radius = 5;
pi * radius * radius;
// 결과물을 다시 변수로 담을 수 있다.
let areaOfCircle = pi * radius * radius;
//변수명에는 공백을 사용하지 못해서 중간에 단어 첫글자를 대문자로 해줘야한다.camel case
  • 변수는 동일한 변수를 이용해 대입할 수 있다.
let sum = 1;
sum = sum + 2;
sum = sum + 3;
sum = sum + 4;
// 수학적으로는 말이 안되지만, = 이 '같다'가 아니라 sum에 이미 할당된 sum + n의 값을 대입한 것이다.
// 한번 선언했던 변수를 다시 사용할 때는 let을 쓰지 않는다.

Chapter 2. 타입

변수에 담을 수 있는 데이터는 숫자나 문자처럼 특정한 형태를 가지고 있다. 타입은 숫자나 문자 같이 변수에 할당할 수 있는 형태를 의미한다.

  • Achievement Goals
    • JS에서 원시자료형과 참조자료형이 무엇인지 알아야한다
    • 원시자료형 string number boolean undefined의 의미를 알아야한다
    • 타입마다 다른 속성과 메소드가 있다는 것을 알아야한다
    • typeof를 사용해서 특정 값의 타입을 확인할 수 있어야한다.
    • 비교시 엄밀한 비교 ===와 !==의 필요성을 알아야한다.
  • 배열 , 객체 (자료형) compound type , undefined과 함수도 타입이다.

Chapter 3. 함수

함수 : 논리적인 일련의 작업을 하는 하나의 단위
배열의 각 요소가
특정논리(함수)에의해 > 함수
다른요소로 map(지정)된다.

  • Achievement Goals
  • 함수 Intro
    • 함수가 작은 기능의 단위 라는 것을 알아야한다.
    • 함수 선언을 위해 필요한 keyword name parameter body 에 대해 알아야한다.
    • 함수 선언과 호출의 기초적인 작동원리를 알아야한다.
    • 함수가 선언되어 함수 표현식이 변수에 담기는 과정을 알아야한다.
    • 함수의 결과값이 변수에 할당되어 담기는 과정을 알아야한다.
  • 함수 기초, 함수 실습
    • 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있어야 한다.
    • 함수 그 자체 (func) 와, 함수의 호출 (func())를 구분하여 사용할 수 있어야한다.
    • parameter 와 argument 를 구분하여 사용할 수 있어야 한다. 매개변수,전달인자
    • 같은 기능을 하는 함수를 선언식,표현식,화살표함수로 바꾸어 표현할 수 있어야한다.
  • 함수는 다음과 같은 의미를 가지고 있다
    • 코드의 묶음 (즐겨찾기 버튼)
    • 기능(function)의 단위
    • 입력과 출력간의 매핑(mapping)
    • 반드시 돌아온다 (return)
  • 함수의 사용법
      1. 버튼 제작 -> 특별한 공간에 보관된다.
   function cal(param1, param2) {
   	console.log(param1 + param2);
   	return param1 * 10;
   }
    1. 버튼 사용 -> 버튼이 만들어지면 언제든 다시 사용할 수 있다. 이를 함수의 호출이라 한다
    • 호출 (call , invocation)
      cal(10,20);
    • 마지막으로 함수를 표현한 표현식이 어떻게 평가될까? Evaluation of expression
let result = cal(10,20);
function cal(param1, param2) {
	console.log(param1 + param2);
    return param1 *10;
    // 함수 호출 코드는 리턴 값으로 바뀐다. -> let result = 100;
}
  • 함수 선언 방법
1. 함수 선언식 
function getTriangleArea(base, height) {
	let triangleArea = (base * height) /2;
    return triangleArea
}
2. 함수 표현식
const getTriangleArea = function (base, height) {
	let triangleArea = (base * height) / 2;
    return triangleArea
}   
3. 화살표 함수
const getTriangleArea = (base, height) => {
	let triangleArea = base * height;
    return triangleArea;
};
// 1. 만약 함수의 본문(body)에 return문만 있는 경우 , 
: return 과 {} 중괄호 (curly bracket)를 생략할 수 있다.
// 2. return 문에서 소괄호를 사용할 수 있다. 
// 3. 만약 함수 내의 표현식이 두 줄 이상인 경우 , 
: return과 {}를 명시적으로 쓰는 것이 좋다.

Chapter 4. 조건문

  • Achievement Goals
    • truthy 와 falsy가 조건문에서 작동하는 방식을 알아야한다
    • 비교연산자를 통한 엄격한 비교 === !==에 대해 알아야한다.
    • if와 else if , else를 이해하고 무리없이 활용할 수 있어야한다.
    • 논리연산자를 (&&,||,!...)을 통해 복잡한 조건을 간결하게 작성할 수 있어야 한다.
  • 코플릿 조건문 13번문제 해결 방법을 익히면서 , 문제를 체계적으로 해결하는 방법을 배워야한다.
  • 복잡한 조건문을 활용하여 , 실생활에서 쉽게 마주하는 문제를 해결하기 위한 알고리즘을 구현할 수 있어야 한다.
  • Boolean 타입에 대한 이해가 필요하다
    • 조건문은 어떠한 조건을 판별하는 기준을 만드는 것
    • 조건문에는 반드시 비교연산자(comparison operator)가 필요하다
    • 비교의 결과는 늘 Boolean , 즉 true, or false 이다.
  • 조건문은 다음과 같이 쓸 수 있다
if (조건1) {
	// 조건1이 통과할 경우 
} else if (조건2) {
	// 조건1이 통과하지 않고
    // 조건2가 통과하는 경우 
} else {
	// 모든 조건이 통과하지 않는 경우
}
-> 조건1,2 에는 Boolean으로 결과가 나오는 비교 구문이 들어간다.
  • 두가지 조건이 한번에 적용되는 경우?
    • 논리 연산자 (Logical Operator) 를 사용
1. 학생이면서 , 여성일 때 통과  -> AND연산자 
isStudent && isFemale;  
2. 학생이거나, 여성일 때 통과   -> OR연산자
isStudent || isFemale;
3. 학생이 아니면서, 여성일 때 통과 -> NOT연산자 (truthy , falsy여부를 반전시킴)
!isStudent && isFemale;

Chapter 5. 문자열

변수, 타입 , 함수, 자료형, 그리고 조건문 까지 학습했다.
컴퓨터는 코드와 문자열을 구분하기 위해서 작은 따옴표 '나 큰 따옴표 "를 사용해서 문자열을 구분한다.
문자열을 다루는 일은 매우 중요하다. 자동완성 기능처럼 문자열을 직접 사용하는 소프트위어를 만드는 일에도 사용할 수 있고, 날짜를 나타내는 숫자를 문자열로 변경해서 01과 같이 나타낼수도 있다.

문자열은 string이다. 문자 하나는 character이며, char라는 축약어로 부르기도 한다.
char가 포함된 메소드도 있다.

Achivement Goals

  • 문자열의 속성과 메소드를 이용해 원하는 형태로 만들 수 있다.
    • 문자열의 length라는 속성을 활용해 길이를 확인할 수 있다. str.length
    • 문자열의 글자 하나하나에 접근할 수 있다. str[1]
    • 문자열을 합칠 수 있다. word1 + " " + word2
    • 문자열을 원하는 만큼만 선택할 수 있다. str.slice(0, 3) 또는 str.substring(0, 3)
    • 영문을 모두 대문자로 바꿀 수 있다. str.toUpperCase()
    • 영문을 모두 소문자로 바꿀 수 있다. str.toLowerCase()
    • 문자열 중 원하는 숫자의 index를 찾을 수 있다. str.indexOf('a') 또는 str.lastIndexOf('a')
    • 문자열 중 원하는 문자가 포함되어 있는지 알 수 있다. str.inclides('a')

Advanced Challenges

  • 띄어쓰기 (" ")로 문자열을 구분하여 배열로 바꿀 수 있다. str.split(" ")
  • 위의 배열의 요소 사이에 띄어쓰기 (" ") 넣어 다시 문자열로 바꿀 수 있다. `str.split("").join(" ")

Basic Usages

  • accessing a character
var str = 'codestates';
console log (str[0]); // 'C'
  • Concatenating strings
// + 연산자를 쓸 수 있음
// string타입과 다른 타입 사이에 + 연산자를 쓰면 , string형식으로 변환 (tostring)
var str1 = 'Code';
var str2 = 'States';
var str3 = '1';
console.log(str1 + str2); // 'CodeStates'
console.log(str3 + 7); // '17'
str1.concat(str2, str3...); 의 형태로도 사용 가능

Properties

  • str.length
문자열의 전체 길이를 반환
var str = 'CodeStates';
console.log(str.length); //10

Methods

  • str.indexOf(seachValue)
arguments: 찾고자하는 문자열
return value: 처음로 일치하는 index , 찾고자하는 문자열이 없으면 -1
lastIndexOf는 문자열 뒤에서부터 찾음
'Blue Whale'.indexOf('Blue'); // 0
'Blue Whale'.indexOf('blue'); // -1
'Blue Whale'.indexOf('Whale'); // 5
'Blue Whale Whale'.indexOf('Whale'); //5
'canal'.lastIndexOf('a'); //3
str.include(searchValue) - 구형브라우저에서는 작동하지 않음 주의
  • str.split
arguments : 분리 기준이 될 문자열
return value: 분리된 문자열이 포함된 배열
var str = 'Hello from the other side';
console.log(str.split(' '));
// ['Hello', 'from', 'the', 'other', 'side']
csv형식을 처리할 때 유용하다.
  • str.substring(start, end)
arguments : 시작 index , 끝 index
return value : 시작과 끝 indext사이의 문자열
var str = 'abcdefghij';
console.log(str.substring(0, 3)); // 'abc'
console.log(str.substring(3, 0)); // 'abc'
console.log(str.substring(1, 4)); // 'bcd'
console.log(str.substring(-1, 4)); // 'abcd' 음수는 0으로 취급
console.log(str.substring(0, 20)); // 'abcdefghij'
++ str.slice(start, end)
- substring과 비슷하나, 몇가지 차이점을 보임
  • str.toLowerCase() / str.toUpperCase() [immutable]
arguments : 없음
return value : 대,소문자로 변환된 문자열 
console.log('ALPHABET'.toLowerCase()); // 'alphabet'
console.log('alphabet'.toUpperCase()); // 'ALPHABET' 
다른예시
let word = 'hello';
word.toUpperCase();
// "HELLO" 
word는 대문자 hello? 소문자 hello?
-> word = "hello" why? immutable이기 때문에 원본이 변하지 않는다.
what is immutable ? 
모든 string method는 immutable
array method는 immutable및 mutable 여부를 잘 기억해야한다. 
즉 , 원본이 변하지 않는다.

Methods(Learn Myself)

  • trim
  • 공백문자 : 탭문자 (\t) , Carrige return (\r\n) 및 return 문자 (\n)
  • match
  • replace

array method는 immutable및 mutable 여부를 잘 기억해야한다.

Chapter 6. 반복문

Achievement Goals

  • 반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있어야 한다.
  • for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있어야 한다.
  • 기본적인 for문 for(let i = 0; i < 5; i++)을 응용해서 다양한 for문을 만들 수 있어야한다.
  • for와 while의 차이에 대해서 알아야 한다.
  • 반복문에 조건문을 적용하여 특정 조건에서만 코드가 실행되도록 할 수 있어야한다.
  • 이중 포문이 무엇인지 이해하고 활용할 수 있어야한다.

반복문

  • 반복할 조건을 코드로 작성한다
let sum = 1;
"sum과 숫자 (n)의 합을" "sum에 대입"하자.
-> sum = sum + n;
"조건:
- 숫자(n)는 2부터 시작한다
- 숫자(n)는 4가 될때까지 반복한다
- 숫자(n)는 1씩 증가한다
-> 
let n = 2;
n <= 4;
n= n + 1;
console.log(sum);

for 구문

  • 반복할 내용을 중괄호 block 안에 넣어준다 -> 반복할 조건을 초기화, 조건식, 증감문 순서로 넣어준다.
let sum = 1;
for(let n = 2; n <= 4; n = n + 1){
	sum = sum + n; // 반복할 내용
}
console.log(sum); // 10

while 구문

  • 반복할 조건 중, 초기화,증감문은 따로, 조건식만 괄호 안에 넣어주면 된다.
let sum = 1;
let n = 2;
while(n <= 4) {
	sum = sum + n ;
    n = n + 1;
}
console.log(sum); // 10

Chapter 7. HTML기초

HTML은 HyperText Markup Language의 약자로 웹페이지를 구성하는 마크업언어이다.

  • HTML은 프로그래밍 언어가 아니다.
  • 웹페이지를 구성하는 뼈대가 되는 언어이다.
  • 구조를 표현하는 언어이기 때문에 HTML의 구조를 잘 짜놓으면 , JS로 개발을 할 때 더욱 직관적인 코드를 작성할 수있다. 의미있는 (Semantic) 태그를 적절하게 사용한다면, 다른 사람이 HTML 문서를 접할 때 쉽게 이해하고 개발할 수 있다.
  • Achivement Goals
    • HTML을 CSS를 적용하고 Javascript로 개발 할 수 있게 작성할 수 있어야한다.
    • HTML이 markup language라는 것을 알아야한다.
    • HTML의 구조와 문법에 대해서 이해하고 적용할 수 있어야 한다.
    opening tag, closing tag 에 대해서 알아야 한다.
self-closing tag => 태크 내부에 내용이 없다면 , (<tag></tag>와 같이 표현되는 경우)
<tag/>와 같이 표현 가능
ex) 
<img src="codestates-logo.png"></img>
=== 
<img src="codestates-logo.png" />
    • 자주 사용되는 HTML요소(element)가 무엇인지 알고 차이를 알아야한다.
    1. div, span 태그가 무엇이고, 어떤 차이가 있는지 알아야한다.
 2. ul, ol, li가 무엇이고 , 언제 사용해야하는지 알아야한다.
 3. input type을 설정해서 다양한 종류의 input을 활용할 수 있어야 한다.
    • 동적인 웹 어플리케이션 개발을 위한 HTML구조를 짤 수 있어야 한다.
    간단한 웹 페이지 기획안을 HTML문서로 짤 수 있다.
id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱 sementic HTML문서를 작성할 수 있어야한다.
HTML5 semantic tag를 적재적소에 사용해서 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있어야 한다.
  • HTML소개
<!DOCTYPE html>					이문서가 HTML 문서임을 명시
<html>						html 시작태그로, 문서 전체의 틀을 구성
  <head>					head태그는 문서의 메타데이터를 선언
     <title>Page title</title>			문서의 제목, 브라우저의 탭에 보여짐
  </head>					</태그이름>은 해당 태그가 끝났음을 의미
  <body>					body태그는 문서의 내용을 담는 곳 
      <h1>Hello world</h1>			heading을 의미하며, 크기에 따라 h1~h6까지 있음
      <div>Contents here			content division을 의미하며, 줄바꿈됨
        <span>Here too!</span>			줄바꿈이 없는 content 컨테이너
      </div>					div태그가 끝났음을 의미
 </body>					body태그가 끝났음을 의미
</html>						html태그가 끝났음을 의미

tree structure

  • html 문서 시작
    • html
      • head
        • title: page title
    • body
      • h1: Hello world
      • div: Conthens here
        • span : Here too!

MOST USED TAGS IN HTML

태그          				설명
<div>					Division
<span>					Span
<img>					Image
<a>					Link
<ul> & <li>				Unordered List & List Item
<input>					Input ( Text, Radio, Checkbox )
<textarea>				Multi-line Text Input
<button>				Button

div VS span

<div>div 태크는 한 줄을 차지한다</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지한다</span>
<span>span 2</span>
<span>span 3</span>
<div>division 3</div>
이렇게 코드를 작성하고 
=> html을 열면
div 태그는 한 줄을 차지합니다
division 2
span태그는 컨텐츠 크기만큼 공간을 차지한다 span 2 span 3
division 3
이렇게 나온다.

img : 이미지 삽입

<img src="https://i.imgur.com/JVAj4t0.jpg">

이미지태그는 닫는 태그가 없다

a: 링크 삽입

<a href="https://codestates.com" target="_blank">코드스테이츠</a>

ul, li : 리스트

<ul> // 
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 has nested list
   <ul> //
    <li>item 3-1</li>
   </ul> //
  </li>
 </ul> // 주석 부분을 ol 로 바꾸면 넘버링이 됨
  • item 1
  • item 2
  • item 3 has nested list
    • item 3-1

input, textarea : 다양한 입력 폼

<body>

 <div>
    ID<input type="text" placeholder="type here">
 </div>
 <div>
   Password<input type="password">
 </div>

<div>
   <input type="radio" name="choice" value="a"> a
   <input type="radio" name="choice" value="b"> b
</div>
<textarea></textarea>
<div>
   <input type="checkbox" checked> checked
   <input type="checkbox"> unchecked
 </div>
</body>


button: 버튼

<button>Submit</button>

Chapter 8. CSS기초

CSS는 Cascading Style Sheets의약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다. HTML이 웹페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당한다.

Achivement Goals

  • CSS의 사용목적을 알아야한다.
  • 프론트엔드 개발자의 기초소양에 대해 알아야한다
  • CSS의 기본 문법과 구조를 알아야한다
  • CSS를 HTML에 적용하는 방법을 알아야한다
    • 직접 HTML안에 CSS를 정의하는 것은 좋지 않다는 것을 알아야한다
  • id 및 class 와 관련된 selector규칙을 알아야한다
  • CSS를 이용해 텍스트를 꾸밀 수 있어야 한다
  • CSS에서 쓰이는 단위의 두가지 구분을 알아야 한다.
    • 각 단위가 적합한 경우를 구분할 수 있어야한다
  • CSS박스 모델을 알아야한다
    • box model
      • width, height
      • margin, padding, border
    • 박스 크기를 측정하는 두가지 기준의 차이를 알아야한다
  • MDN 또는 w3school 등의 레퍼런스 사이트를 이용해서 CSS속성을 검색해보자

CSS는 스타일링을 위한 도구이다.

  • CSS는 화려함만을 위해 사용되지는 않는다
    • 콘텐츠의 배치나 위치 ( 레이아웃 디자인 )
    • 텍스트를 강조하거나 밑줄을 치는 등 , 최소한의 타이포그래피 (Typography)

CSS 내용 분해하기

셀렉터(selector)
body { 선언블록(declaration block)
		color: red; // 선언 (declaration)
        1.font-size: 2.30px 3.; // 선언 (declaration)
     1.속성명(property), 2.속성값(value), 3.선언구분자  
     }
  • 셀렉터는 태그이름이나 id또는class를 선택한다. 셀렉터로 특정요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성한다.
  • 요소에 적용할 수 있는 내용을 속성이라고 한다. (색상, 글자크기등)
  • 코드에 나타나 있는 color: red;는 이 요소의 색상을 빨간색으로 스타일링한다.
  • 속성과 값의 끝에는 세미클론으로 속성끼리 구분한다.

CSS 파일 추가

  • CSS 파일을 HTML파일에 연결 할 때는, link태그 안에서 href속성을 통해 파일을 연결해야한다.
<link rel="stylesheet" href="index.css" />
=> link 태그와 Link 태그의 속성
  • link 태그는 HTML파일과 다른 파일을 연결하는 목적으로 사용한다. link태크의 rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다. CSS는 stylesheet이므로 rel속성에 stylesheet을 추가한다.
  • href속성에는 파일의 위치를 추가해야한다. 다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있다.
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="layout.css" />
=> index.html파일에 새로운 link태그 추가

CSS 스타일을 적용할 수 있는 방법

3가지가 있다.

  • 같은 줄에서 스타일을 적용하는 인라인 스타일
<nav style="background: #eee; color: blue">...</nav>
=> 인라인 스타일
  • css파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성하는 내부 스타일 시트
  • 외부 스타일 시트

기본적인 셀렉터 (selector)

id로 이름 붙여서 스타일링 적용하기

위에서 작성해본 HTML문서에는 <h4> 나 <p> 요소(element)가 여러개 존재한다.
<h4>요소에만 색을 바꾸려면, h4요소는 하나의 태그 이기 때문에 태그를 선택해 색상을 바꿀 수 있다.

h4 {
	color: red;
}
=> h4태그의 색상을 변경
  • 하지만 모든 h4요소에도 변경된 색상이 적용되었다.
  • <h4> 요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있다.
  • 이름을 붙일 때는 가능한 의미를 담아서 지어준다.
  • id가 있는 요소를 선택할 때에는 #기호를 이용한다 id는 하나의 문서에서 한 요소에만 사용해야한다.
<h4 id="navigation title>This is the navigation section.</h4>
=> h4요소에 id를 붙인다

#navigation-title {
	color: red;
}
=> id로 요소를 선택해 스타일링한다.

class로 스타일을 분류하여 적용하기

id와 유사하게 특정요소에 class를 지정하는 방법도 있다. 이번에는 navigation section의 <li>요소와 footer의 <li>요소를 구분해보자. 

li {
	text-decoration: underline;
}
=> li요소에 밑줄을 친다.
  • 이번에도 의도와는 다르게 모든 <li> 요소에 스타일링이 적용되었다. 그러나 id는 한 문서에서 한번만 사용할 수 있는데,, 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용한다.
    navigation section의 모든 li요소에 동일한 class를 추가하면, 동일한 스타일을 여러 요소에 적용할 수 있다.
  • class는 #이 아닌 . 을 이용해 선택한다.
<ul>
	<li class="menu-item">Home</li>
	<li class="menu-item">Mac</li>
	<li class="menu-item">iPhone</li>
    <li class="menu-item">iPad</li>
</ul>
=> 여러요소에 같은 스타일링을 적용하기 위해서는 class를 사용한다.
.menu-item{
	text-decoration: underline;
}
=> class menu-item을 선택하여 밑줄을 적용한다.

여러 개의 class를 하나의 엘리먼트에 적용하기

위에서 , 하나의 class를 여러 요소에 적용했다. 이번에는 반대로 여러 class를 하나의 요소에 적용한다.
어러 class를 하나의 요소에 적용하기 위해서는 , 공백으로 적용하려는 class의 이름을 분리해야한다.
selected class를 통해 적용된 내용을 확인할 수 있다.
요소를 만들거나 , 요소에 스타일링을 적용할 때에는 항상 이름과 목적이 일치하는지 봐야한다.

<li class="menu-item selected">Home</li>
=> 하나의 요소에 여러 class를 적용하는 방법
.selected {
	font-weight: bold;
    color: #009999;
}
=> 특정 class(selected)를 통해 요소를 스타일링하는 것

id와 class의 차이점

id

  • #으로 선택
  • 한 문서에 단 하나의 요소에만 적용
  • 특정 요소에 이름을 붙이는 데 사용

class

  • .으로 선택
  • 동일한 값을 갖는 요소 많음
  • 스타일의 분류에 사용

텍스트 꾸미기 (아직정리안함)

박스모델 (아직정리안함)

[JS/Node] 배열 기초

대량의 데이터를 다루기에 적합하게 제작된 데이터 타입인 배열과 객체를 참조 타입 (reference type)데이터 라고 한다. 참조 타입 데이터는 이전에 배운 원시 타입 ( 숫자, 문자열, boolean, undefined등)
데이터와 다른 성격을 가진다.

배열을 선언하고 배열요쇼를 추가하거나 변경, 삭제하는 방법을 확실하게 알아야한다.

Achivement Goals

배열 기초

  • 배열에서 사용되는 용어에 대해 알아야한다.
    • index, element, length
    • arr[0], push, pop
  • 배열에서 특정 인덱스의 요소를 조회하거나 , 변경할 수 있어야한다.
  • 배열의 요소가 배열인 이중 배열을 이해해야 한다.
  • 이중 배열의 요소를 조회하거나 변경할 수 있어야한다.

배열의 반복

  • 배열의 요소를 반복적으로 불러오는 방법을 이해하고 사용할 수 있어야한다.
  • 배열의 각 요소에 대하여 , 반복하는 코드를 쓸 줄 알아야한다.
    • 기본적인 for문 for (let i = 0; i < 5; i++)을 응용해서 다양한 for문을 만든다.
    • 반복문에 조건문을 응용해서 특정 조건에서만 코드를 실행시킨다
    • 이중 반복문이 무엇인지 이해하고 활용해보자
  • 배열과 반복문을 활용해서 실생활에서 접할 수 있는 간단한 문제를 해결해보자
  • 문자열과 배열의 타입 변환을 돕는 메소드를 알고 있어야 한다.
    • 띄어쓰기 " "로 문자열을 구분하여 , 배열로 변경할 수 있어야한다. str.split(" ").join(" ")
    • 문자열을 요소로 가지는 배열을 띄어쓰기 (" ") 로 구분한 문자열로 변경할 수 있어야한다.

배열 기초 메소드

  • 배열 요소를 조회, 추가, 삭제, 복사, 분리하는 법을 알아야한다
    • unshift, shift, slice, length
  • 변수, 데이터 또는 특정 값이 배열인지 아닌지 판별할 수 있어야한다. Array.isArray
  • 배열의 요소를 추가 및 삭제 할 수 있어야한다. push , pop
  • 변수, 데이터, 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있어야한다. indexOf, includes

배열은 순서가 있는 값

  • 값을 요소라고 부른다 element
  • 순서를 부르는 용어 index , 그리고 1이 아닌 0부터 번호를 매김
  • 대괄호[] square bracket를 이용해서 배열을 만들고 , 각각의 element는 쉼표로 구분한다.
  • 값을 조회하려면 인덱스를 이용해 접근한다.
  • 값을 변경하려면 인덱스를 이용해 할당해준다.
  • 길이를 알아내려면 arr.length
  • 새로운 값을 추가하려면 arr.push(96);
  • 배열 마지막 값을 삭제하려면 arr.pop();

배열의 반복

반복문을 이용해 배열의 요소 (element)를 한번 씩 출력하려면?

let myNum = [73, 98, 86, 61];
"배열의 myNum의 n번째 인덱스"를 출력하자 => console.log(myNum(n])
조건
- 숫자 n 은 0부터 시작한다
- 숫자 n 을 배열의 길이보다 작을 때 까지 반복한다
- 숫자 n 은 1씩 증가한다
=> let n = 0;
   n < myNum.length;
   n = n + 1;
for (let n = 0; n < myNum.length; n++){
	console.log(myNum[n]);
}

연습

let myNum = [10, 20. 40, 10];
let sum = 0;
for(let i = 0; i < myNum.length; i++){
	sum = sum + sum[i];
}
console.log(sum); //80
[Programmers] - 이상한 로직 만들기
JS - let과 const

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage