교육 | 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 3주차

국민내일배움카드로 국비지원받고 프론트엔드 학습
열공 챌린지 3주차

 

 

🎥 목차

1. 목표

2. 알게된 점

3. 좋았던 점

4. 아쉬운 점

5. 나의 다짐

 

🚀 목표

패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 3주차 학습강의 듣기가 학습 목표이다.

 

💡 알게된 점

익명 함수 vs 기명 함수

익명함수와 기명함수의 가장 큰 차이점은 함수의 이름의 유무이다.

# 익명함수
function () {
	console.log('익명함수입니다.');
}

# 기명함수
funtion namedFn () {
	console.log('기명함수입니다.')
}

 

 

또 다른 차이점은 호이스팅이다.

강의 화면 캡쳐

호이스팅

기명함수는 호이스팅에 의해 최상단에 함수가 선언되고, 익명함수는 그 자리에서 함수가 표현된다.

 

이 차이는, 내가 함수를 어디에서 실행하냐에 따라서 에러가 걸릴 수 있고 아닐 수 있다.

 

캡쳐한 강의 화면 을 보면 쉽게 알 수 있다.

 

DOM API : class 추가

Element.classList.add('속성')

# 예시
<div></div>

const element = document.querySelector('div');
element.classList.add("id")

<div id></div>

 

※ 해당 element(태그)에 속성이 있는지 확인하려면, contains()를 사용한다.

# 예시
<div id></div>

const element = document.querySelector('div');
element.classList.contains("id") // true

 

DOM API : class 삭제

Element.classList.remove('속성')

# 예시
<div id></div>

const element = document.querySelector('div');
element.classList.remove("id")

<div></div>

 

DOM API : forEach 매개변수

forEach는 반복되는 객체의 모든 원소를 사용한다.

 

객체 뿐만아니라, querySelectorAll로 얻은 가상 배열 또한,. forEach를 이용해 원소 하나씩 사용이 가능하다.

# 예시
const array = ["A","B","C","D"]
array.forEach(function(element, index){
	console.log(element, index);
})

// A 1
// B 2
// C 3
// D 4

 

forEach 함수는 익명함수를 인수로 추가한다. 

 

익명함수는 원소뿐만아니라, index를 가질 수 있다.

 

DOM API : Getter, Setter

말 그대로, Getter는 값을 얻는 것이고 Setter는 값을 설정하는 것이다.

# 예시
const A = {
	name: "tenenger"
}

 // Getter
console.log(A.name); // tenenger

 // Setter
 A.name = "origin"
console.log(A.name); // origin

 

메소드 체이닝

메소드가 체인처럼 이어져 있는 것을 말한다.

# 예시
const a = "Hello"
const b = a.split('').reverse().join('');

console.log(a);	// Hello
console.log(b);	// olleH

 

favicon

favicon.ico라는 정확한 파일명을 지정할 경우, 따로 설정할 필요없이 자동으로 적용된다.

만약 수동으로 지정하고 싶다면, <link rel="icon" src="파일경로" />을 작성하면 적용이된다.

 

og, twitter

티스토리, 카톡 등에서 URL을 입력하면 카드형태로 그림과 설명이 나오게 설정하는 것을 오픈 그래프라고 한다.

# Open Graph
<meta property="og:type" content="website" />
<meta property="og:site_name" content="웹사이트 제목" />
<meta property="og:title" content="글 제목" />
<meta property="og:description" content="설명" />
<meta property="og:image" content="이미지" />
<meta property="og:url" content="링크" />

# Twitter
<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="웹사이트 제목" />
<meta property="twitter:title" content="글 제목" />
<meta property="twitter:description" content="설명" />
<meta property="twitter:image" content="이미지" />
<meta property="twitter:url" content="링크" />

 

<a> 태그 링크 : javascript:void(0) 또는 #

<a> 태그에 경로를 지정할때, 경로가 정해지지 않았다고 명시할때 사용한다.

# 예시
<a href="#">

<a href="javascript:void(0)">

 

중앙정렬

중앙정렬을 하기 위해서는, width 값, block 요소, position: absolute, margin: auto 을 가지고 있어야한다.

그다음, 수직 정렬할지, 수평 정렬할지 정하면 된다.

top: 0, bottom: 0 → 수직 정렬

left: 0, right: 0 → 수평 정렬

 

글자 사이 구분선 : ::before

 

글자 사이에 구분선을 그릴때 border에 값을 주는 것이 아닌, background에 값을 주어 만든다.

content: ""
width: 1px;
height: 12px;
background: gray;
position: absolute;
top: 0;
bottom: 0;
margin: auto;

 

🙌 좋았던 점

길고 긴 개념 공부를 마치고, 스타벅스 실습 시작

길고 긴, 개념 공부를 드디어 마치고, 스타벅스 실습을 시작하게 된 3주차이다.

 

최근에 바닐라 자바스크립트를 알려주는 강의나 책이 부족해서 유튜브를 통해 공부하고 있었는데, 기대가 된다.

(나중에 알게된 사실이지만, 바닐라 자바스크립트가 아니라는 것을 알고나서 조금 아쉬웠다.)

 

🐧 아쉬운 점

라이브러리 사용

나는 스타벅스 실습은 바닐라 자바스크립트, 즉 순수한 자바스크립트로 만드는 것인 줄 알았다.

 

그러나, 라이브러리를 사용하게 되는데 난생 처음보는 라이브러리여서 적잖이 당황했다.

 

GASP라는 라이브러리를 사용하여, 애니메이션 효과를 준다는 것이었는데 '라이브러리를 사용하지 않고, 자바스크립트로도 충분히 구현 가능하지 않나'라고 생각하게 되었다.

 

GASP로 구현한 부분은 개인적으로 바닐라 자바스크립트로 구현하게 되었다.

 

# 메인화면

 

# 배지

※ Promise는 setTimeout과 같은 비동기 함수를 순차적으로 실행되도록 도와준다.

 

익명 함수로 화살표 함수를 사용하지 않는다...?

개인적으로 2가지 이유 중에서 하나만이라도 충족하면 익명 함수를 사용한다.

1. 한번만 쓰고 사용하지 않을 함수인가?

2. 가독성이 좋아야하는가?

 

특히 2번을 충족하기 위해 화살표 함수를 사용하게 되는데, 해당 강의에서는 화살표 함수를 사용하지 않아서 조금 아쉬웠다.

 

왜냐하면, function () {} 보다는 () =>{}를 사용하는 것이 가독성이 좋다고 생각하기 때문이다.

 

코드를 작성할때는 개인적으로 익명 함수로 화살표 함수를 사용했다.

 

💬 나의 다짐

진짜 천천히 하기

작년 12월에 국비지원으로 타 강의를 수강하면서 정말 급하게 하루에 8강의 꽉꽉채워서 5주 분량을 2주에 끝낸적이 있었다.

 

'지금 해당 강의가 머리속에 남아 있나?'라고 스스로 되물었을때 내 대답은 'No'이다.

 

원래 공부도 쉬엄쉬엄 해당 내용이 왜 그런지 생각하면서 진행해야하는데, 그때는 여유가 없어서 무작정 막 들었던거 같다.

 

이번에는 똑같은 실수를 반복하지 않기위해 천천히 음미하면서 공부를 해야겠다.

 

하루에 1개 챕터씩 학습하기

1주 차 강의를 듣고 나서 든 생각은 꽤나 괜찮다는 느낌을 받았다.

물론 강의 제목에서 알 수 있듯이, React와 Redux를 배워봐야 알 수 있겠지만, 현재까지는 만족스럽다.

어느정도 배운 상태에서 강의를 수강해야, 머릿속에 잘 들어오는 거 같다.

내가 맨 처음에 HTML이나 CSS를 학습했을 때, nth-child()와 같은 복잡해 보이는 내용을 외우려고 해도 금방 까먹었는데, 어느 정도 CSS를 다뤄보고 실제로도 nth-child를 사용해보고 강의를 수강하니 머릿속에 단번에 들어왔다.

하루에 1개 챕터씩 학습을 해야 수료가 되기 때문에 열심히 해야겠다고 생각한다.