인프런 : https://www.inflearn.com/course/한입-리액트
소스 : https://github.com/braverokmc79/react-with-one-bite
들어가며
1.강의 및 강사 소개
2. React 소개
3.오픈채팅방 입장 방법 및 비밀번호
JavaScript 기본
4.Hello World
5.변수와 상수
6.자료형과 형 변환
7.연산자
8.조건문
9.함수
10.함수표현식 & 화살표 함수
11.콜백함수
12.객체
13.배열
14.반복문
15.배열 내장 함수
JavaScript 응용
16.Truthy & Falsy
17.삼항 연산자
18.단락회로 평가
19.조건문 업그레이드
20.비 구조화 할당
21.Spread 연산자
22.동기 & 비동기
23.Promise - 콜백 지옥에서 탈출하기
24.async & await - 직관적인 비 동기 처리 코드 작성하기
25.API 호출하기
Node.js 기초
26.Node.js란?
27.Node.js & VsCode 설치하기
28.Node.js Hello World & Common JS
29.Node.js 패키지 생성 및 외부 패키지 사용하기
React.js 기초
30.Why React?
31.Create React App
32.JSX
33.State
34.Props
React 기본 - 간단한 일기장 프로젝트
35.프로젝트 소개
36.React에서 사용자 입력 처리하기
37.React에서 DOM 조작하기 - useRef
38.React에서 배열 사용하기 1 - 리스트 렌더링 (조회)
39.React에서 배열 사용하기 2 - 데이터 추가하기
40.React에서 배열 사용하기 3 - 데이터 삭제하기
41.React에서 배열 사용하기 4 - 데이터 수정하기
42.React Lifecycle 제어하기 - useEffect
43.React에서 API 호출하기
44.React developer tools
45.최적화 1 - useMemo
46.최적화 2 - React.memo
47.최적화 3 - useCallback
48.최적화 4 - 최적화 완성
49.복잡한 상태 관리 로직 분리하기 - useReducer
50.컴포넌트 트리에 데이터 공급하기 - Context
React 실전 프로젝트 - 감정 일기장 만들기
51.프로젝트 완성 예시
52.페이지 라우팅 0 - React SPA & CSR
53.페이지 라우팅 1 - React Router 기본
54.페이지 라우팅 2 - React Router 응용
55.프로젝트 기초 공사 1
56.프로젝트 기초 공사 2
57.페이지 구현 - 홈 (/)
58.페이지 구현 - 일기 쓰기 (/new)
59.페이지 구현 - 일기 수정 (/edit)
60.페이지 구현 - 일기 상세 (/diary)
61.(서브 챕터) 흔히 발생하는 버그 수정 하기
62.LocalStorage를 일기 데이터베이스로 사용하기
63.프로젝트 최적화
64.배포 준비 & 프로젝트 빌드하기
65.Firebase로 프로젝트 배포하기
66.Open Graph 설정하기
들어가며
1.강의 소개 :
강좌:
2. React 소개
강좌:
3. 오픈채팅방 입장 방법 및 비밀번호
강좌:
카카오톡 : Winterlood 궁금한 사항 질문 : 오픈 채팅방 비밀번호는 wlreact입니다.
JavaScript 기본
4.Hello World
강좌:
코드 센트 박스
외부 라이브러리나 프레임워크를 쓰지 않는 순수 JavaScript를 이르는 말이다. 사용자 정의된 라이브러리나 프레임워크 자체를 쓰지 않기 때문에 당연히 다른 라이브러리나 프레임워크를 사용했을 때보다 빠르고 호환성이 좋을 수밖에 없다. 또한 숙련된 사람일 수록 별의별 기능을 구현할 수 있다는 특징이 있다.
5.변수와 상수
강좌:
변수 규칙 주의
1. $ , _ 제외 하고 특수문자 사용 금지
2. 변수 첫글자는 숮자는 안된다.
3. 예약어 안된다.
var 대신에 let 사용.
상수는 const
6.자료형과 형 변환
강좌:
// 템플릿 리터럴 let isSwitchOff = false; // null 은 의도적으로 선언 let a = null; //값이 없을 경우 기본 undefined //console.log() let numberA = 12; let numberB = "2a"; console.log(numberA * Number(numberB)); console.log(numberA * parseInt(numberB));
Number 와 paertint 차이
7.연산자
복합연산자
복합대입연산자는 다음과 같은 형태로 사용됩니다.
+=, -=, *=, /=
이 기호들이 어떤 식으로 쓰이는 지 코드를 한 번 볼까요?
var value = 10; value += 10; alert(value); //20
증감연산자
let c; c = c ?? 10; console.log(c);
8.조건문
let a = 3;
if (a >= 7) {
console.log("7이상입니다.");
} else if (a >= 5) {
console.log("5이상입니다.");
} else {
console.log("5 미만입니다.");
}
let country = "ko";
switch (country) {
case "ko":
console.log("한국");
break;
case "cn":
console.log("중국");
break;
case "jp":
console.log("일본");
break;
default:
break;
}
9.함수
let count = 1;//전역 변수
function getArea() {
let width = 10;
let height = 20;
let area = width * height;
console.log(area);
}//함수 선언식, 함수 선언 방식의 함수 생성
getArea();
10.함수표현식 & 화살표 함수
간단한 예시 (함수선언문 vs 함수표현식)
foo();
foo2();
function foo() { // 함수선언문
console.log("hello");
}
var foo2 = function() { // 함수표현식
console.log("hello2");
}
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
let hello = () => {
return "안녕하세요 여러분1";
};
const helloText = hello();
console.log(helloText);
console.log(helloB());
function helloB() {
return "안녕하세요. 여러분2";
}
11.콜백함수
function checkMood(mood, goodCallback, badCallback) {
if (mood === "good") {
//기분이 좋을 때 하는 동작
goodCallback();
} else {
//기분 안 좋을 때 하는 동작
badCallback();
}
}
function cry() {
console.log("ACTION :: CRY");
}
function sign() {
console.log("ACTION :: SIGN");
}
function dance() {
console.log("ACTION :: DANCE");
}
checkMood("good", sign, cry);
12.객체
let person1 = new Object();
let person2 = {}; // 객체 리터럴 방식
const person3 = {
key: "value", //프로퍼티 (객체 프로퍼티)
key1: "value2",
name: "홍길동",
say: function () {
console.log("안녕");
} //메서드 ->방법
}; //객체 리터럴 방식
console.log(getPropertyValue("name"));
console.log(getPropertyValue2("name"));
function getPropertyValue(key) {
return person3[key];
}
function getPropertyValue2(key) {
return person3.key;
}
//출력
// 홍길동
// value
person3.age = 31;
console.log(person3);
//객체 삭제
person3.key1 = null;
console.log(person3);
console.log(`name : ${"name" in person3}`);
출력 =>
홍길동
value
▶{key: "value", key1: null, name: "홍길동", say: ƒ say(), age: 31}
▶{key: "value", key1: null, name: "홍길동", say: ƒ say(), age: 31}
name : true
13.배열
//let arr0 = [1, 2, 3, 4, true, null, undefined, {}, [], function () {}]; //배열 리터럴
let arr = [1, 2, 3, 4, 5];
arr.push(6);
console.log(arr);
14.반복문
const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i]);
}
let person = {
name: "홍길동",
age: 25,
tall: 175
};
//Object.keys 함수로 객체를 배열로 반환 처리
const personKeys = Object.keys(person);
for (let i = 0; i < personKeys.length; i++) {
const curkey = personKeys[i];
const curValue = person[curkey];
//console.log(`1 ${curkey} : ${curValue}`);
}
//Object.keys 함수로 객체를 배열로 반환 처리
const personValue = Object.values(person);
for (let i = 0; i < personValue.length; i++) {
console.log(`${personValue[i]}`);
}
15.배열 내장 함수
const arr = [
1,
2,
3,
4,
{ num: 1, color: "blue" },
{ num: 2, color: "red" },
{ num: 3, color: "blue" }
];
const newArr = [];
let number = 5;
arr.forEach((elm) => {
newArr.push(elm * 2);
});
console.log(newArr);
const resMap = arr.map((elm) => elm * 2);
console.log(resMap);
console.log(arr.includes(number));
console.log(arr.indexOf(number));
console.log(
"findIndex : ",
arr.findIndex((elm) => {
return elm.color === "blue";
})
);
const element = arr.find((elm) => {
return elm.color === "blue";
});
console.log("find ", element);
console.log(
"filter :",
arr.filter((elm) => elm.color === "blue")
);
let chars = ["나", "다", "가"];
chars.sort();
console.log(" chars : ", chars);
출력
Filter
All
Console was cleared
(7) [2, 4, 6, 8, NaN, NaN, NaN]
(7) [2, 4, 6, 8, NaN, NaN, NaN]
false
-1
findIndex :
4
find
{num: 1, color: "blue"}
filter :
(2) [Object, Object]
chars :
(3) ["가", "나", "다"]
댓글 ( 4)
댓글 남기기