DOM이란?
HTML 마크업 구조를 자바스크립트로 조작이 가능한 ⭐️객체 형태로 모델링⭐️한 것을 DOM(Document Object Model)이라 한다.
Javascript
- arrow function
- ⭐️ Exports, Imports (==> Modules) ⭐️
- ⭐️ 객체와 배열은 참조형 자료타입이다. ⭐️
- 만약 재할당 한다면, 값이 아닌 포인터를 복사하는 것.- 진짜 복사하고 싶다면, 새로운 객체를 생성해서 전체 객체를 복사하는 것이 아니라 프로퍼티를 복사해야 함.
Exports & Imports (Modules)
문장을 내보내고 가져오는 '모듈'은 자바스크립트 파일 안에 있는 것으로,
다른 파일에서 컨텐츠를 불러올 수 있고, 자바스크립트 파일은 그 컨텐츠가 어디에서 온 것인지 알고 있음.
- 함수 표현식(자바스크립트 언어의 유연함을 살린 선언 방식)
let 함수명 = function () {
구현 로직
};
// 예시
var funcExpression = function () {
return 'A function expression';
}
funcExpression(); // 'A function expression'- 함수 선언식 (일반적인 프로그래밍 언어에서의 함수 선언과 비슷함)
function 함수명() {
구현 로직
}
// 예시
function funcDeclarations() {
return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'- ⭐️ 함수 선언식과 표현식의 차이점 ⭐️
함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.
React
React is all about "Componets"
Why Component?
1. 재사용성
- 반복적인 코드 입력을 하지 않게 해준다.
- 우려사항들을 분리할 수 있도록 해줌.
- Code base를 작게, 그리고 관리 가능한 단위로 유지할 수 있게 해준다.
- 리액트는 '선언적 접근 방식'을 사용한다.
// 미리보기 띄우기는 터미널에서 npm start
// 컴포넌트를 만들 때, 무조건 첫 글자는 '대문자'로 시작해야 한다.
// 폴더는 cameCase로.
// 컴포넌트 밖, 내가 필요한 파일을 가져오는 영역
import React from "react";
function App() {
// <---- 자바스크립트 영역 ---->
const handleClick = () => {
alert('클릭되었음.')
}
return (
/* <---- HTML/JSX 영역 ---->*/
<div
style={{
height: "100vh",
display: " flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
background: "red",
color: "#f2f2f2",
fontWeight: "bold",
}}
>
<p>내가 만든 App 컴포넌트 버튼입니다.</p>
<button id="btn" onClick={handleClick}>
Click!
</button>
</div>
);
}
// 내가 만든 컴포넌트를 밖으로 보내는 영역
export default App;
- JSX란?
화면에서의 레이아웃 구조, DOM객체 등의 위치 이런것을 표현할 때 사용.
HTML과 비슷하게 생겼지만, JSX는 자바스크립트이다. 때문에 JSX 문법을 알고 써야 리액트를 다루기 쉽다.
컴포넌트도 부모-자식관계 형성이 가능하다.
다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 하고,
부모 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 함.
import React from "react";
function Child() {
return <div>나는 자식입니다.</div>;
}
function App() {
return <Child />; // App컴포넌트 안에 Child컴포넌트가 들어간 모습.
}
export defalut App;후발대
// 배열을 다룰 때, 좀 더 유용한 방법.
// 테스트로 쓸 배열 하나 생성하기.
const testArr = [2,10,100,7,71,50,27,1]
for (let i = 0; i < testArr.length; i++) {
if(i < testArr.length) {
// console.log(testArr[i]);
}
}
for(item of testArr) {
// console.log(item);
}
// 객체(배열)에는 속성과, 메서드가 포함되어있다.
// 01. forEach => for + each
// 일반 for문과 똑같음. 하나씩 꺼내 집는것.
// forEach도 결국, 'array의 메서드'다.
// 함수를 넣는 방법
// 함수를 변수에 담아서 넣는 방법
const testFunc = () => {
console.log("Hello, Corona19 Wuhan");
}
// 함수를 넣는 방법
// 함수를 변수에 담아서 넣는 방법
// forEach는 매개변수로 콜백함수를 받음.
testArr.forEach(function(item) {
// console.log(item);
});
testArr.forEach( (item) => {
console.log((item));
})
// 이름을 붙히지 않은 함수들은 익명 함수라고 부른다.
// 02. map
// map은 맵핑한다. 새로운 배열을 재생성한다.
// map함수는 return한 애들을 모아서 새로운 배열을 만든다.
// 보통 익명함수를 map, forEach, ~~~의 매개변수로 넣는다.
// ㄴ 왜 ?? ==> 한 번 쓰고 말 것이기 때문이다. 재사용하지 않을 목적임.
const mappedArr = testArr.map(function(item) {
// console.log('----------');
// console.log(item);
return item ** 2
})
console.log("수정된 배열");
console.log(mappedArr);
const mappedArr1 = testArr.map((item) => {
})
console.log(mappedArr1);
// 03. filter => 걸러내는 것
//⭐️ filter에는 무조건 조건이 들어간다. ⭐️
const filterArr = testArr.filter((item) => {
// console.log("check", item);
// if (item < 10) {
// return item;
// } else {
// return null;
// }
// 삼항연산자
// return item > 30 ? item : null;
// item이 30보다 클 때만 반환. (null 병합 연산자)
return item > 30 ?? item;
})
console.log(filterArr);
// reduce (누산기)
// testArr.reduce((누적된 값, 현재값, 0부터 시작하는 인덱스 값) => {
// }, 초기값)
// idx가 왜 1부터 시작하는가 ..?
console.log('reduce 시작');
testArr.reduce((acc, cur, idx) => {
console.log('acc', acc);
console.log('cur', cur);
console.log('idx', idx);
console.log("");
return acc += cur;
}, 0);
// 초기값 0을 넣어주기 전에는 idx가 1이 출력되었음.
JSON
Key, value, comma로 이루어져있는 객체
객체에는 속성과 메서드가 있다.
우리가 지금부터 다루려고 하는 객체는 Promise의 형태를 가진 객체다.
이해하기 어려우면 그냥 Promise 객체로 이해할 것.
Promise 객체는 비동기 통신을 위한 객체라고 보면 된다.
그래서, 통신 이후 일어날 일들에 대한 ⭐️메서드⭐️를 가지고 있다.
통신이 성공 -> than
통신이 실패 -> catch
// function testFunc (인자1, 인자2) {
// return Promise형태의 객체를 반환.
// }
// 이해해보자
fetch('https://my-json-server.typicode.com/typicode/demo/posts') // promise 객체 >> 항상 then을 가짐.
// 👇 then은 통신에 대한 then. 그래서 res는 통신 후 가져온 값 자체.
.then(function(res) { // res에는 fetch로 받은 promise 객체가 전부 다 들어온다. 그 중에 우리가 쓸 것은 body 데이터만 쓸거임.
// console.log(res);
// res : 받아온 전부를 가지고 있는 'promise' 객체
// console.log(res.json()); // body에 있는 것들을 promise 객체 형태로 가지고 온다.
// json()도 비동기 함수다!! 즉, promise 객체를 반환한다는 뜻임.
return res.json();
})
// 👇 then은 json() 이것을 수행한 결과 (body 부분만 가져오는 것을 수행)
// 그래서 data는 json() 처리를 한 후, 가져온 body 부분 그 자체임.
.then(function(data) {
console.log('-----------------------');
console.log(data);
const customULTag = document.createElement('ul');
let customLITag
//여기서 DOM제어 해보기
for(item of data) {
// console.log(item['title']);
// li태그를 임시로 만들어서, ul 태그에 넣어주는 역할
//li 태그 생성
customLITag = document.createElement('li').textContent = item['title'];
return customULTag.appendChild(customLITag); // DOM에서 안 된다.
}
});
// 받아온 값을 통해서 DOM에 뿌려보기.
결론적으로 안 된다.
Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. 에러가 뜸. 아직 해결 못 했다.
오늘 몸이 진짜 안 좋아서 하루종일 머리가 너무 아프고, 눈도 아프다. 끼니도 안 챙겨먹었다. 건강관리를 잘해야 덜 고생할텐데 다들 건강 챙기세요.
- 배움에는 끝이 없다.