📝 오늘 한 것

1. 반응형 CSS 직접 작성해보기 (이어서)

2. 내가 짠 코드와 강의 내용 비교·분석 (이어서)

3. javascript 학습

📖 학습 자료

1. 드림코딩 '프론트엔드 포트폴리오 클론코딩' (반응형 nav, 반응형 web site)

2. 드림코딩 유튜브 '자바스크립트 강의' (1~3편)

3. 사전 학습 가이드 step 2 (~Types)

📚 배운 것

🔎 CSS

---

1. 반응형 nav

• toggle-btn에 position: absolute를 적용한 후 right, top을 지정해 위치를 조정해주었다.

2. 반응형 web

• 🙋‍♀️ 질문 ❗
  브라우저의 너비가 변함에 따라 컨테이너의 너비가 변해도 그 안의 이미지 비율을 유지한 채 컨테이너에 꽉 차게 이미지를 줄이는 방법을 모르겠다. 검색을 통해 해결은 했지만, 원리가 이해되지 않는다. ※ 이 블로그 참고

(1) 원래 내가 썼던 코드 → 브라우저 크기를 줄이니까 outer 원의 좌우가 같이 줄어드는 문제 발생

.testimonial-avatar-outer {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.testimonial-avatar {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}

(2) 해결 방안을 검색해서 수정한 코드

.testimonial-avatar-outer {
  width: 200px;
  height: 200px;
}

/* 원래 없었는데 div와 img 사이에 추가한 div 태그 */
.testimonial-avatar-outer-two {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  padding-top: 100%;
}

.testimonial-avatar {
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
}

※ 다양한 비율 만들기 ❗

2:1 비율 → padding-top: 50%
1:2 비율 → padding-top: 200%
4:3 비율 → padding-top: 75%
16:9 비율 → padding-top: 56.25%

• 화면이 작아졌을 때 project를 양옆에 흰색 배경을 줄이고 화면에 꽉 차게 만들기 위해 나는 width: 100%를 사용했는데, 강의에서는 flex-grow: 1을 사용했다. 전자의 경우 @media에서 정의한 max-width 이하로 작아지면 무조건 한 줄에 1개의 project만 오게 된다. 그러나 후자의 경우 max-width 이하로 작아져도 어느 정도는 한 줄에 2개의 project가 있다가 좀 더 줄이면 1개의 project로 바뀐다.
  
  

🔎 javascript

📁 드림코딩 유튜브

---

1. 강의 전 사전 설명

1) HTML에 main.js 연결

<script src="main.js" defer></script>

2) async VS defer

• async : parsing 중에 js 파일을 다운로드 받고, HTML에 정의된 순서에 상관없이 js 파일이 하나씩 다운로드가 완료될 때마다 parsing을 멈추고 이를 실행한다.

• defer : parsing 중에 js 파일을 전부 다운로드 받아놓고, parsing이 끝나면 HTML에 js 파일이 정의된 순서에 따라 차례대로 실행한다

3) 'use strict'; 선언

• js 파일 제일 위에 'use strict';를 선언해줘야 한다.

• 이렇게 해주면 실수로 선언되지 않은 변수에 값을 할당하는 등 비상식적인 작업을 했을 때, 개발자 도구의 console 창에 오류 메시지가 뜨게 된다.

4) 개발자 도구(F12)의 console 창 이용

5) Web API

• 브라우저가 제공하고 이해할 수 있는 함수들을 말한다 (javascript에 포함된 것x)
• 대표적으로 console API도 web API 중 하나이다
• console.log('Hello World!');
  → 뜻 : console API 중 log라는 함수를 이용해 Hello World! 라는 메시지를 콘솔 창에 출력
  
  

2. 변수(variable)

1) 변수의 종류

• global scope에서 선언된 전역 변수 : 어플리케이션이 실행되는 순간부터 끝날 때까지 항상 메모리에 탑재되어 있으므로 최소한으로 사용해야 함

• local scope에서 선언된 지역 변수 : 밖에서는 안이 보이지 않고, 안에서만 밖을 볼 수 있다.

cf. scope : 변수에 접근할 수 있는 범위

• function scope : 함수 안과 밖이 단절됨

• block scope : block의 안과 밖이 단절됨

2) 변수를 선언하는 키워드(keyword)

• var : 더 이상 쓰면 안됨
  • 이유
    • 변수를 선언하기도 전에 값을 할당할 수 있고, 값을 할당하기도 전에 출력도 가능하다. 즉, 변수를 어디에 선언했는지와 상관없이(=블록을 무시) 항상 제일 위로 선언을 끌어올려준다. 이러한 var hoisting은 비상식적인 작업을 가능케 해서 위험하다.

ex.

console.log(me);
me = 3;
var me;

라고 쓰면, console 창에 undefined가 뜬다. 이는 값이 대입되지 않았을 뿐 변수는 선언되었음을 의미한다. 맨 밑에 있는 var me;를 제일 위로 끌어올려 인식하는 것이다. 반면에, let을 사용하면 console 창에 변수가 선언되지 않았다는 오류 메시지가 뜨게 된다.

• let (메모리에서 읽고 바꿔 쓰기 가능)

  • 한번 값을 할당해도 변경이 가능하다 (mutable type)

  • ES6에서 추가됨

• constant (메모리에서 읽기만 가능, 바꿔 쓰기 불가능)

  • 한번 값을 할당하면 절대로 변경할 수 없다 (immutable type)

  • 웬만하면 const를 사용하길 추천한다 (보안, 실수 방지)

📁 사전 학습 가이드, 드림코딩 유튜브

---

1. javascript가 웹 페이지를 조작하는 과정

• HTML 요소 찾기

• 웹 화면 상의 동작들을 감지 (이벤트에 구독하고 응답하기)

• HTML 수정·삭제·생성

2. 주석

• javascript → 한 줄 : //, 여러 줄 : /* */

• HTML → <!-- -->

• CSS → /* */
  
  

3. 식별자(identifier)

• 변수를 선언할 때 지어주는 이름

• 변수

  • 변할 수 있는 값을 담은 저장소
  • 변수를 선언하는 방법 : var, let, const

• 숫자, 알파벳, $, _ 사용 가능

• 숫자로 시작할 수 없고, javascript 키워드(예약어)는 사용할 수 없다

• 자바스크립트에서 =는 =를 기준으로 '오른쪽에 위치한 값'을 '왼쪽의 변수'에게 대입/할당 한다는 것을 의미한다.
  
  

4. 데이터 타입 (값의 종류)

• 원시 타입 : 더는 작게 나눌 수 없는 한 가지 아이템, value(값) 자체가 메모리에 저장됨
  • 숫자
  • 문자열
  • boolean (true/false)
  • undefined
  • null
  • symbol

• 객체 타입 : object(객체)를 가리키는 reference가 메모리에 저장됨
  • object
    ~ 한 가지 아이템들을 여러 개 묶은 것
    ~ function도 변수에 값으로 할당이 가능함

• immutable 데이터 타입 : 원시 타입, frozen objects

• mutable 데이터 타입 : 기본적으로 자바스크립트에서의 모든 objects

1) boolean

• false로 변환되는 값 :
  0 ｜ -0 ｜ false ｜ undefined ｜ null ｜ NaN ｜ "" ｜ '' ｜ ``

• true로 변환되는 값 : 그 외의 값 모두
  
  

const what = 1 > 4;
console.log(`value: ${what} type: ${typeof what}`) // value: false type: boolean

2) undefined, null, NaN

• undefined : 정의되지 않음, 값이 대입되지 않은 상태를 의미하는 값

• null : 의도적으로 값이 없음을 나타내고 싶을 때 사용되는 값

• NaN : 유효하지 않은 숫자 연산을 실행했을 때 나타나는 값

3) 숫자(number)

• % : 나머지 값을 구하는 연산자

• ** : 거듭제곱을 구하는 연산자

console.log(2 ** 3); // 2의 3승

• 증가 / 감소 연산자

💡 a = a + 1 = a += 1 = ++a

( -, *, / )도 마찬가지, 그러나 //a나 **a는 없다)

let a = 1;
console.log(a = a + 1); // 2
console.log(a += 1); // 3
console.log(++a); // 4

💡 사전·사후 증가 (감소도 마찬가지)

// counter라는 변수의 값을 뒤에서 바꿀 것이므로 const 말고 let 사용
let counter = 1;

// 사전 증가
const preincrement = ++counter;
/*
순서
counter = counter + 1;
preincrement = counter;
*/
console.log(`preincrement: ${preincrement}, counter: ${counter}`); // preincrement: 2, counter: 2

// 사후 증가
const postincrement = counter++;
/*
순서
postincrement = counter;
counter = counter + 1;
*/
console.log(`postincrement: ${postincrement}, counter: ${counter}`); // postincrement: 2, counter: 3

• Infinity/-Infinity : 어떤 수를 0/-0으로 나누었을 때 나오는 값

• isNaN 함수 : 어떤 값이 NaN(Not A Number)인지 판별하기 위해 사용

var a = 5;
var b = isNaN(a);
console.log(b); // false

• typeof 연산자 : 어떤 종류의 값인지 판별하기 위해 사용, 값은 항상 문자열로 나타남 ("number", "object", "function"...)

var a = typeof 3;
console.log(a); // "number"

4) 문자열(string)

• 항상 따옴표를 붙여서 쓴다

• 문자열은 더할 수 있다

var result = "a" + "b";
console.log(result); // ab

※ 템플릿 문자열(=template literals=template string) ❗

• 백틱 기호와 ${...} 사용

const c = "a" + "b";
console.log(`value: ${c} type: ${typeof c}`); // value: ab type: string

const Jimmy = "Jimmy";
const man = `Bye, ${Jimmy}!`;
console.log('Bye, ' + Jimmy + '!'); // Bye, Jimmy!
console.log('value: ' + man + ' type: ' + typeof man); // value: Bye, Jimmy! type: string
console.log(`value: ${man} type: ${typeof man}`); // value: Bye, Jimmy! type: string

• \n, \t, \ 더 이상 쓸 필요 없이 (enter, tab, ') 그대로 표현 가능

console.log('I\'m ' + 'Syong'); // I'm Syong

console.log(`string literals: ${1 + 3}
  ''''
3 + 2 = ${1 + 4}`);
/*
string literals: 4
  ''''
3 + 2 = 5
*/

• number ≠ "number" 주의!

var number = 30;
var something = typeof number;

console.log(number === something); // false (∵ number ≠ "number")

• 문자열의 길이 .length   ※ 공백도 포함한다

var str = "happy ";
console.log(str.length); // 6

console.log("sad".length); // 3

• 인덱스 [ ]   ※ 1 이 아니라 0 부터 시작한다

var str = "happy";
console.log(str[0]); // "h"

console.log("sad"[2]); // "d"

📌 문자열 메서드

1. toLowerCase()

• 모두 소문자로

console.log('You hAve BeEn DiSHonest'.toLowerCase());
// you have been dishonest

2. toUpperCase()

• 모두 대문자로

console.log('No wAy!'.toUpperCase()); // NO WAY!

3. indexOf('찾을 문자')

• 찾고 싶은 문자가 문자열의 몇 번째 자리에서 시작하는지

console.log('Are you sure?'.indexOf(' yo')); // 3

4. slice(추출 시작할 문자 인덱스, 추출 끝낼 문자 인덱스)

• '추출 끝낼 문자 인덱스'는 추출 값에 포함되지 않는다

console.log('My name is Syong.'.slice(1, 5)); // y na

5. split('기준이 될 문자')

• 기준이 될 문자를 기준으로 자른 문자열을 각 배열 요소에 담은 뒤 해당 배열 객체를 반환해준다

console.log('I?doubt?that'.split('?'));
// (3) ['I', 'doutb', 'that']

console.log('Why would you doubt my word?'.split(''));
/*
(28) ['W', 'h', 'y', ' ', 'w', 'o', 'u', 'l', 'd', ' ', 'y',
'o', 'u', ' ', 'd', 'o', 'u', 'b', 't', ' ', 'm', 'y', ' ',
'w', 'o', 'r', 'd', '?']
*/

6. startsWith('검색할 문자열')

• 문자열이 특정 문자열로 시작하는지 확인해준다
• true/false 값을 출력한다

console.log('what are you doing?'.startsWith('what ')); // true

7. endsWith('검색할 문자열')

• 문자열이 특정 문자열로 끝나는지 확인해준다
• true/false 값을 출력한다

console.log('I am doing FiNe'.endsWith('iNe')); // true

8. includes('검색할 문자열')

• 검색할 문자열이 해당 문자열에 포함되어 있는지를 확인해준다
• true/false 값을 출력한다

console.log('hi ken'.includes(' ke')); // true

9. repeat(횟수)

• 주어진 문자열을 횟수만큼 반복한 값을 반환한다

console.log('6'.repeat(3)); // 666

5) Symbol

• 맵이나 자료 구조에서 동시다발적으로 일어날 수 있는 코드에서 우선순위를 주고자 하는 등 고유한 식별자가 필요할 때 사용

• 주어진 string이 같아도 각기 다른 고유한 식별자를 만들 수 있다

• 주어진 string이 같을 때는 같은 식별자를 만들고 싶으면 .for을 추가하면 된다

• symbol의 value를 올바르게 출력하기 위해 뒤에 .description을 추가한다

const symbol1 = Symbol('hi'); // 오른쪽은 반드시 '대문자 S'로 써야 함
const symbol2 = Symbol('hi');
console.log(symbol1 === symbol2); // false

const symbol3 = Symbol.for('hi');
const symbol4 = Symbol.for('hi');
console.log(symbol3 === symbol4); // true

console.log(`value: ${Symbol1.description} type: ${typeof Symbol1}`); // value: hi typeof: symbol

6) 객체(object)

const syong = {name: 'syong', age: 21};
syong.age = 22;

const를 사용했으므로 한번 할당된 object는 다른 object로 변경할 수 없다. 그러나 object 안의 변수인 name과 age 값은 변경 가능하다.

5. 동적 타이핑 (dynamic typing)

1) 정적 타입 언어 ex) C, JAVA ...

• 변수를 선언할 때 타입도 결정해서 같이 선언해준다.

2) 동적 타입 언어 ex) javascript...

• 변수를 선언할 때 타입을 선언하지 않고, 프로그램이 동작할 때(runtime에) 할당된 값에 따라서 타입 변경이 가능하다.

• 좋은 아이디어가 있어서 빠르게 프로토타입을 하고 싶을 때는 매우 유용하다.

• 그러나 다수가 참여하는 규모 있는 프로젝트에서는 주의가 필요하다. 이 문제를 해결하기 위해 나온 게 typescript이다.

let text = "hello";
console.log(text.charAt(0)); // h
console.log(text[0]); // h

text = `1` + 5; // 5도 문자로 자동 인식
console.log(`value: ${text} type: ${typeof text}`); // value: 15 type: string

text = '8' / '2'; // 둘 다 숫자로 자동 인식
console.log(`value: ${text} type: ${typeof text}`); // value: 4 type: number

console.log(text.charAt(0)); // error (∵ text는 더 이상 문자열이 아님)

🙋‍♀️ 질문

1. 여기 바로가기 → 해결 (210925)

✨ 내일 할 것

1. javascript 기초 복습

2. 드림코딩 유튜브 '자바스크립트 강의' (4~6편)

3. git 커밋 기준 알아보기