[스파르타코딩클럽] 리액트 기초반 - 1주 차 시작
-
vscode 사용,
git bash터미널 사용,
nvm 사용 -
powershell과 다른 터미널 종류인 git bash로 변경,
변경 방법 보러 가기
이유는? 튜터와 똑같은 환경으로 맞추기 위해 -
프론트엔드가 하는 일
화면을 그리고 데이터를 끼얹는다 -
서버리스(serverless)란?
DB도 백엔드 개발도 안 해도 되는 건가?
서버를 내가 만들 필요 없다!
서버의 사양, 네트워크 설정 같은 게 미리 되어 있는 서버를 빌려 쓰니(EC2),
인프라 작업을 내가 안 해도 된다
서버리스는 백엔드리스가 아니라는 것
대표적인 서버리스 서비스 파이어베이스
DOM이란?
문서 객체 모델(DOM, Document Object Model)은
XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
이 객체 모델은 문서 내의 모든 요소를 정의하고,
각각의 요소에 접근하는 방법을 제공
DOM을 이해하기 위해서는 DOM tree를 봐야 한다
출처 - https://poiemaweb.com/js-dom
DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱 하여 생성하는 모델을 의미
그래서 html = DOM이라고 이해하면 안 된다
객체의 트리로 구조화되어 있기 때문에 DOM tree라 부른다
이러한 구조로 자바스크립트가,
document라는 전역 개체로 HTMl요소에 접근할 수 있는 것
DOM을 통해 웹페이지를 조작하기 위한
필요한 수단(API)을 자바스크립트가 제공
CSS 기초지식
- :hover
:focus
:active
:visited
:checked
.
.
.
얘네들을 수도 클래스 선택자라고 부른다
- css 사칙연산
width: calc(80% - 20px);
반응형 웹 만들 때 유용하다고 한다
rem,em,vh,vw도 있다
JS 기초지식
- 함수 선언식
function hello() {}- 함수 표현식
let say = function hello() {}- 화살표 함수
let say = () => {}Class
객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해
변수와 함수를 정의하는 일종의 틀
객체를 정의하기 위한 상태와 함수로 구성되어 있다
객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용
class Cat {
// 생성자 함수
constructor(name) {
// 여기서 this는 이 클래스입니다.
this.name = name;
}
// 함수
showName(){
console.log(this.name);
return this.name;
}
}
// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
// 생성자 함수
constructor(name, age) {
// super를 메서드로 사용하기
super(name);
this.age = age;
}
// 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
// 오버라이딩한다고 해요.
showName(){
console.log(this.name);
// super를 키워드로 사용하기
return '내 고양이 이름은 '+super.showName()+'입니다.';
}
showAge(){
console.log('내 고양이는 '+this.age+'살 입니다!');
}
}
let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();생성자 함수: 클래스 인스턴스를 생성하고
생성한 인스턴스를 초기화(초기 값을 설정한다고 생각하기)
- Spread 연산자
let array = [1,2,3,4,5];
// [...array]은 array에 있는 항목을 전부 꺼내
// 새로운 배열에 넣어준다
let new_array = [...array];
console.log(new_array);- 조건부 삼항 연산자
조건? 참 : 거짓
return에서 if문 사용 불가
이럴 때 삼항 연산자를 사용하면 된다
많이 사용하는 Array 내장 함수
map, filter, concat, from
-map
const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
let count = 0;
animals.map((animal) => {
if (animal === "고양이") {
count += 1;
}
});
console.log(count);
// 3- filter
const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];
let arr1 = [];
let a = animals.filter(a => {
return a.indexOf("고양이") !== -1;
})
console.log(a);
// ['검정 고양이', '노랑 고양이', '고양이']- concat
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
const merge = array_num01.concat(array_num02);
console.log(merge);
// 중복 항목은 제거되지 않는다이럴 땐
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로,
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];
// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);- from
얘는 유사배열에서도 사용 가능
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);
// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요.
const text_array = Array.from('hello', (item, idx) => {return idx});
console.log(text_array);
// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요.
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
console.log(new_array);이제 react시작이다!
어찌저찌해서 환경 설정을 끝내고
yarn으로 CRA(create-react-app) 설치!
- CRA(create-react-app)
웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지
JSX === HTML을 품은 JS
그렇다면 리액트에서 엘리먼트들도 DOM?
아니죱. 리액트 요소다
JSX 사용법
- JSX 규칙
-
태그는 꼭 닫아주기
-
무조건 1개의 엘리먼트를 반환하기
최상위 요소는 형제 요소가 없어야 한다!
div
div > 이거 안돼
div
div > 이건 돼
아무것도 없어도 안돼
-
JSX에서 javascript 값을 가져오려면?
{변수명}
if문은 삼항 연산자 사용 -
class 대신 className!
className으로 만들었지만
개발자 도구에서 html파일에서 보면 class로 나와있음, id는 그대로 id -
인라인으로 style 주기
html에서 인라인 스타일 주기:
리액트에서는 객체로 넘겨줘야 한다{변수명} 안녕
중괄호가 두 개인 걸 꼭 기억하자
와! 배울 게 엄청 많다😁
