[위코드] TIL(Today I am learned) -03

미디어 쿼리(Media Query)

media query란 Responsive Web 을 구현하는 CSS technique.(한마디로 능동형 웹을 구현하기 위한 css 기술)

@media only screen and (max-width: 480px) {

body {

font-size: 12px;

}

}

1. @media — 이 키워드는 media 쿼리를 시작하겠다는 의미입니다.

2. only screen — 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다.

3. and (max-width : 480px) — 이건 media feature라고 불리는 부분입니다. 어느 조건에 아래의 css를 적용할지 작성해줘야 합니다. max(최대값), min(최소값)

 

---

자바스크립트

기존까지는 단순히 HTML로 웹브라우저의 구조였습니다.

이러한 구조적인 뼈대만 완성되어 있는데, 그러한 뼈대에 내용을 집어넣는 것이 자바스크립트입니다.
(자바와 자바스크립트는 다른 것입니다.)

 

자바스크립트를 작동시키려면 3가지의 조건이 필요합니다.

• 브라우저가 존재해야하고,

• HTML파일이 있어야하고,

• HTML파일에서 JavaScript 파일을 연결시켜줘야 합니다.

자바스크립트는 개발용어인데, 보통 여럿에 의한 합동작업이 이루어지는 언어이다.

그렇기떄문에 서로간 약속된 언어들이 있는데 대표적으로 'alert', 'console.log' 등을 "약속어"라고 한다.

---

주석

주석이란 코드를 작성했지만 해당코드를 무시할때 쓰는 언어이다.

//(슬래쉬의 두번)으로 사용되어 지며, 주로 사용하는 예시로

1. 특정 코드가 필요 없어졌는데, 혹시 몰라서 남겨놓고 싶을 때
2. 다음 사람에게 인수인계 해야해서 코드에 설명해 놓을 때 //------여기까지 헤드, body------ 로 사용된다.
3. 코드를 볼 때마다 이해가 잘 안 돼서 한글로 설명해 놓을 때

이렇게 사용되지만, 이에따른 반응도 호불호가 있다.

 

호(好)

• 코드 유지보수의 용이함,
• 협업에 따른 직접적인 대화가 필요없고 작성된 내용을 통해서 의사소통이 가능함.

불(不)

• 코드가 지저분해진다.
• 주석이 필요하다는 것은 코드를 제대로 짜지 않았다.(애초에 필요없게 짜야 맞는 것.)

여러줄을 주석처리 하려면 (*)별표로 사용하면 된다.

/*시작해서 */로 작성한다.

/* <a href="링크주소">

<p>별내용 없어용</p>*/

위 처럼 작성시에 해당 내용은 주석처리되어 실제로 작동시 작동되지 않는다.

 

---

Variables(변수)

통칭 var로 표기한다.

1. 변수의 사용

2. 변수의 생선(선언)

3. 변수 이름 정하기.

4. let, const

5. 변수 값 수정

 

1. 변수의 사용

컴퓨터가 많은 데이터를 기억 할 수 있도록 변수를 사용.

 

2. 변수의 생성(선언) 

var 변수이름 = "value(값)" 을 표기한다.

ex)

var name = "홍길동";

var job = "frontend developer";

- 위 내용 중 변수에 해당 하는 것 : name, job

- 위 내용 중 값에 해당 하는 것 : 홍길동, frotend developer

 

3. 변수 이름 정하기

var name = "홍길동";

위 내용의 변수는 name이었다. 이러한 변수의 이름을

var myName = "홍길동";

myName으로 바꿀 수 가 있는데, 이러한 변경을 위해서는 일정한 규칙이 있다.

• 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.

• 대소문자 구문 - 변수이름, 함수이름, 연산자 모두 대소문자를 구분합니다. 따라서 myName과 MyName은 다른 변수입니다.

• 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.

• 두 번째 문자 부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.

• 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 쓸 것.

여기서 나온 camelCase란? 

카멜(camel)이 낙타를 의미하는 것은 알고 있을 것이다.

그러한 낙타의 등이 어떤 모습인가? 파동처럼 울퉁불퉁하다.

즉 변수의 이름이 Name 처럼 단어가 새로 시작될때부터 대문자를 쓰면 된다.

• firstSecond

• myProfileImg

• toDoListArray

카멜 케이스가 있었다. 또 다른 snake_case란?

변수의 이름에서 (-)하이픈을 사용할 수 없으므로 (_)밑줄로 대신 사용이 가능하다.

• first_second

• my_profile_img

• to_do_list_array

4. let, const

자바스크립트에서는 기존 var라는 변수 선언만 존재하였는데, 버전이 올라감에 따라 let, const가 생겼다.

사용 방법은 var 동일하다.

그러나 let은 변수 값을 수정이 가능하지만, const(constant의 약자)임에 따라 변수 값 수정이 불가능하다.

개발자의 의견에 따라서 이를 수정이 가능한 var, let을 쓸지 아니면 고정해야할 필요가 있을 떄에는 const를 쓸지 결정하면 된다.

 

5. 변수 값 수정

앞서 말했듯이 var, let에서는 변수 값이 수정되는 것을 언급하였다.

그렇다면 어떻게 변수 값을 수정해야할지 궁금하다라는 의문이 들수 있다.

변수 값을 설정 할 때는 변수를 선언하는 것과 다르게 태그를 넣지 않는다.

var name = "행복";

name = "슬픔";

이렇게 설정이 가능하다.

const로 설정한 것은 변수 값 변경이 불가하다.

 

cf. 변수의 생성 vs. 변수의 수정

변수의 이름은 중복되지 않는다.

var naem1 = "행복"

var naem1 = "행복"

이렇게 하면 중복이 되어 에러코드가 뜰 것이다.

 

하지만, 값의 중복은 가능하다.

무슨 말이냐?

var naem1 = "행복"

var naem2 = "행복"

var naem3 = "행복"

위 처럼 변수의 이름이 다르니 값이 동일함에도 사용이 가능하다.

 

---

Function(함수)

1. 함수의 정의

2. 함수의 호출

3. 함수의 형태

4. 함수의 정의 vs 함수의 실행(함수의 호출)
 4-1)add 함수 정의

 4-2)add 함수 실행(호출)

 

1. 함수의 정의

함수란? 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록.

 

2. 함수의 호출

변수에 이름이 있듯이, 함수에도 이름이 있다.

함수를 호출하면 함수 내의 코드가 실행된다.

함수를 불러 실행시키는 것을 앞으로 "함수를 호출한다."로 표현하겠습니다.

function Happy() {   let hi = "안녕하세요";      return hi; }

함수를 정의 해 보았습니다. 함수 이름은 Happy 입니다.

 

위처럼 함수를 만들고, 

호출 할 수 있습니다.

Happy();

위 처럼 타이핑 하면 "함수호출"이 실행됩니다.

정의만하고 호출하지 않으면 실행되지 않습니다.

 

3. 함수의 형태

funtion 함수이름() {  let hi = "안녕하세요"; return hi; }

funtion - funtion 키워드

함수이름 : 이름

() : 소괄호. 함수를 알린다.

{} : 중괄호 함수의 시작을 알린다.

return : 함수에서 반환할 값

 

4. 함수의 정의 vs 함수의 실행(함수의 호출)

앞서 함수형태에서 함수를 정의했다. 하지만, 실행이 되지 않을 것이다. 왜?

함수의 껍데기를 정의했지. 내부를 정의하지 않았으니까.

 4-1)add 함수 정의

funtion plus() {

  let sum = 3+3;

  return sum;

}
plus();

내부까지 정의하였다. 이제 호출하면 함수가 실행될 것이다.

 

 4-2)add 함수 실행(호출)

plus();

이제 함수를 실행해보려한다.

이미 정의를 위에서 했는데 sum이란 변수는 없다. 왜 그런걸까?
우리는 함수실행 방법을 정의한거지 아직 실행시켜서 컴퓨터한테 sum = 3+3이다 라는 값을 인식시키지 않았기때문이다.

 

그렇기에 지금 실행시켜보면 이제 sum = 3+3이라는 sum변수와 3+3이 sum에 저장될 것이다.

 

---

Function(함수) - 데이터 반환하기(1)

함수의 반환(return)

매개변수(parameter)와 인자(argument)

 

Function(함수) - 데이터 반환하기

1. 함수의 반환(retrun)

모든 함수는 반환을 해야합니다.

그러므로 결과를 변수에 저장할 수도 있고, 다른 로직에도 사용이 가능합니다.

 

그렇다면 함수반환 값을 확인하는 법을 알아보자.

간단하다.

function Happy() {
  let good = "hi";

  return good;
}

 

이렇게 정의하였다.

 

이제 다시 콘솔로그를 통해서 반환값을 확인해보자.

console.log(Happy());

위 내용대로 쳐보면 return 반환하여 반환값을 확인할 수 있다.

이렇게 반환하는 것에서 return 키워드를 생략할 수도 있다.

하지만,  그럼에도 불구하고 함수는 무엇인가를 반환하고 있다.

함수가 반환을 생략하면 undefined라는 값을 반환한다.

 

2. 매개변수(parameter)와 인자(argument)

이제 외부에서 입력 받은 데이터를 처리하는 경우대해서 알아보도록 하자.

function Happy(매개변수) { 
  return 매개변수 + '님'; 
}

const result1 = Happy('아내')
const result2 = Happy('자식')
const result3 = Happy('부모')

console.log(result1)
console.log(result2)
console.log(result3)

위 내용처럼 함수 Happy의 소괄호에 매개변수라는 글자가 들어갔다.

매개변수(parmeter)란 "외부의 데이터가 들어가는 자리"라고 보면 된다.

 

아내, 자식, 부모의 해당하는 값이 argument(인자)라고 한다.

fu

위의 내용 값을 콘솔에서 보면, 아내님 자식님 부모님으로 반환되는 것을 볼 수 있을 것이다.

따옴표와 세미콜론을 항시 주의하자!

---

Math expressions

다소 생소한 수학 표현식

수학식 계산 순서

 

Math expressions

자바스크립트에선 수학계산이 가능하다.

대충 정의만 하고 작동 되도록 사용이 가능한 것이다.

let a = 7;
let b = 9;
let c = 13;

console.log(a+b);
console.log(a-b);
console.log(a+133);
console.log(40-17);
console.log(a+20*b*c*c/73);

위 사례처럼 계산도 해준다!

하지만, 일반인들이 알지 못하는 수식들도 있다.

 

다소 생소한 수학 표현식

let num = 33;

num++;



console.log(num);

위 처럼 내용을 한번 쳐보면, 답은 34이다.

왜냐면, num이라는 함수에 ++는 +1하겠다는 의미.

반대로 num--;로 치면 -1을 적용한다.

 

let num = 33;

let nnum = num++

console.log(num);

console.log(nnum);

정답은 무엇일까?

num = 34

nnum = 33이다.

왜냐하면 첫줄 num = 33;으로 33이 정의되었지만, 그 아래 num++의 작동으로 num의 경우 34로 정의되고

nnum읜 num++가 적용되기전에 num만 읽어 33이 정의 되었기떄문이다.

즉, num과 동일하게 나오려면 ++를 먼저 읽도록 해야 동일한 값이 나온다.

javascript가 순서에 따라 적용하는 수학식의 적용시간이 다른 것이 원인이다.

 

수학식 계산 순서

수학의 계산 방법이 사칙연산에 따라서 적용되는 것은 여러분도 알것이다.

컴퓨터의 수학 계산 방식도 동일하다.

 

4+7*3=?

정답은 25.

하지만 33이 될수도 있다. 

(4+7)*3=33

이렇게 컴퓨터도 계산 괄호를 표기하여 방식을 달리해줘야한다.

 

 

 

아직 콘솔로 테스트 안한 것들도 있다. 이점을 유의하자.

내가 복습 차원에서 만든 수업의 내용들.

오늘 이전에 했던 리뷰를 다시해보니 1,2일차에 내가 빼 먹은 부분이 있다는 것을 알았다. 
+ P.S 여담. 

해당 부분을 따로 표시하고 index로 목록화를 해야할 필요가 있는 듯.