[항해99] 리액트 기초반

항해99_7기/3주차 React 입문 주차

[항해99] 리액트 기초반 - 1주차

code10 2022. 5. 20. 13:20

스파르타코딩클럽 리액트 기초반 1주차

(nvm 설치: M1칩은 한 번에 되는 게 없냥..아무튼 성공. 자바스크립트 강의 부분: 2주차 알고리즘 문제 풀면서 몰랐던 부분을 많이 알게됨. react: 친절하다.! )

[수업 목표]

프론트엔드 전반에 필요한 기본기를 다진다. (HTML, CSS, Javascript)
React 프로젝트 환경설정을 배워본다.
React에서 쓰는 태그(JSX)를 사용해서 화면을 그릴 수 있다.

1-2 설치

Nvm 설치 오래 걸림.

node.js 16.15로 설치하고(18버전이었음) 그리고 환경설정에서 터미널에 뜬 내용으로 복사에서 붙이니 성공.

1-3. 프론트엔드 기초 지식

우리가 하는 일: 화면을 그리고 데이터를 끼얹는다!

화면 그리기: 눈에 보이는 부분 만들기. 어디에는 글이 들어가고, 어디에는 아이콘을 넣어주고 ..., 더 나아가서는 마우스를 올릴 때만 글자색을 바꿔주는 등의 작업(인터렉션을 준다고 해요!)도 해줍니다.
데이터 끼얹기: 서버에서 데이터를 가지고 와서 만든 화면에 착착 넣어주는 거예요.

서버리스: 백엔드 작업을 직접 할 필요 없다. 백엔드리스 아님!

1-4. 알면 쉬운데 모르면 괴로운(1) - HTML

HTML(Hypertext Markup Language): 이름 그대로 표시하는 것. 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어.

요소 :<div>안녕</div>, <p>하세요</p>, <button>확인</button> ... 등등!

태그 : 요소를 만들 때 사용하는 <></>

DOM(문서객체모델)

DOM은 html 단위 하나하나를 객체로 생각하는 모델.

=> 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다.

document와 body, head는 부모 - 자식 관계.

body랑 head는 형제 관계. (sibling이라고도 하죠!)

프로그래밍 언어는 어떤 연산을 수행하거나, 소프트웨어, 시스템을 동작하게 하는 언어.

즉, HTML은 프로그래밍 언어가 아니라 마크업 언어!

1-5. 알면 쉬운데 모르면 괴로운(2) -CSS

selector는 꾸밀 요소를 선택하는 선택자

#id, .class를 선택자라고 부르는데, { ... }은 뭐라고 부를까요? 선언부라고 부릅니다! 속성 : 값;으로 이루어짐.

https://developer.mozilla.org/ko/docs/Web/CSS

/* id selector */
#id { ... }

/* class selector */
.class { ... }

/* tag selector */
tagName { ... }

/* 여러 요소 선택하기 */
#id, .class { ... }

/* 수도 클래스 선택자 */
/* 어떤 요소가 특정 상태(마우스 올림, 포커스 됨 등등)일 때만 선택하게 해주는 선택자예요. */
button:hover { ... }

► 그리드 시스템

DOM 요소들은 기본적으로 박스형태로 표시

(1)박스모델

margin box: 가장 바깥 영역입니다. margin 속성을 주면 이 영역이 바뀌어요. 주로 다른 요소들과 간격을 줄 때 사용해요!
border box: 테두리 영역입니다. border 속성으로 테두리를 주면 이 영역이 바뀌어요.
padding box: 테두리와 콘텐츠 사이 영역입니다. padding 속성을 주면 이 영역이 바뀌어요. 박스 내부의 간격을 줄 때 사용해요!
contents box: 실제 콘텐츠 영역입니다. width, height 등으로 사이즈를 줄 수 있고, 따로 지정하지 않을 경우는 콘텐츠 내용(글이나 이미지 등)에 따라 임의로 사이즈가 잡혀요.

(2) 그리드 시스템

.wrap {
        display: flex;
      }

      .todo-card {
        border: 1px solid gray;
        border-radius: 5px;
        padding: 2em;
        margin: 1em;
        flex: 1 1 0;
      }

현재는 Flex, grid 등을 많이 쓰는 것 같으나, 언제든 유행?은 바뀔 수 있다.

CSS 사칙연산

(1) calc()

버튼 크기를 화면의 20%보다 20px 작게

button {
        width: calc(20% - 20px);
      }

calc()는 아래 순서로 연산.

- 왼쪽에서 오른쪽으로,

- 곱셈, 나눗셈을 먼저, 덧셈, 뺄셈은 그 다음에!

- 괄호가 있으면 괄호 안쪽을 먼저 계산

1-6. 자바스크립트 기초(1)

const wraps = document.getElementsByClassName("wrap");
console.log(wraps);

콘솔에 찍으면,

HTML Collection이라는 배열같은 게 하나 나오죠. 이게 바로 자바스크립트 이론에서 배웠던 유사배열이랍니다. Array의 내장함수를 쓸 수 없다

(2) document.getElementById

const title = document.getElementById("title");
// 자바스크립트에서는 어떤 객체의 속성에 접근할 때 .을 이용해 접근할 수 있어요.
// title이라는 요소의 style 속성에 접근하려면 아래와 같이 title.style로 접근할 수 있습니다!
// style 안에 있는 속성에 접근할 때도 마찬가지예요. style.backgroundColor로 배경색 속성에 접근할 수 있어요.
title.style.backgroundColor = "yellow";

(3) document.getElementsByTagName

function sayHello (event) {
            console.log("hello");             
         }

         const buttons = document.getElementsByTagName("button");

        // 이 구문은 X! html collection은 유사 배열이기 때문에 array의 내장함수를 쓸 수 없어요!
        //buttons.map(b => {
            //console.log(b);
        //});        

        for (let i=0; i< buttons.length; i++){
            // .addEventListener()로 클릭 이벤트를 연결해줍니다. 
            buttons[i].addEventListener("click", sayHello);
        }

15) document에 DOM 요소 추가하기

(1) document.createElement()

요소는 만들기만 하면 알아서 DOM에 뿅 생기지 않아요! 만들고 → DOM에 넣어주어야 합니다.

1-7 자바스크립트 기초(2)

React는 javascript 라이브러리

ES6: 자바스크립트 표준 문법 중 하나로 가장 보편화된 친구

스코프(Scope)가 뭘까? 우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 불러요.

변수에 접근할 수 있는 범위

변수 선언!

var: 함수 단위. scope 전체에서 살아 있음.
let: block 단위(변수: let으로 선언한 변수는 값이 변할 수 있습니다.) 재할당 가능. 재선언 불가능
const: block 단위(상수: 한번 선언한 값은 바꿀 수 없습니다.) 재할당 재선언 모두 불가능.

let b=1;

let b >선언부

b=1; > 할당부

b=2; > 재할당

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;

	// {} 증괄호 안에 든 내용을 블럭이라고 표현해요.
	
	if(a === 0){
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}
	// 앗! c는 값이 변했죠? 
	// 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
	// let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
	console.log(a, b, c);
}

(2) 함수

함수는 function do_something() { ... } 처럼 생긴 친구들을 말합니다. 어떤 코드의 묶음이고, do_something()처럼 ()를 붙여주면 미리 만들어둔 코드 묶음이 실행되는 거예요. 내장 함수는 우리가 만들지 않아도 자바스크립트가 쓰기 편하라고 미리 만들어둔 코드 묶음들

함수선언식:

function do_something() { ... }

함수 표현식:

// 함수 이름은 생략해도 괜찮아요!

let do_something = function [함수 이름]() { ... }

화살표 함수

// 화살표 함수는 함수 표현식의 단축형입니다.

// function까지 생력이 되었죠!

let do_something = () => { ... }

(3) Class

클래스란? 객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀을 말해요.

객체를 정의하기 위한 상태와 함수로 구성되어 있죠!

객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용합니다.

-1) 클래스를 구성하는 것

class Cat {
	// 생성자 함수
  constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		console.log(this.name);
	}
}

// 여기서 new는 키워드예요. 새로운 무언가를 만들기 위해서 생성자 함수와 함께 씁니다.
// 네, new와 생성자 함수는 세트예요 :) (소근 
let cat = new Cat('perl');
cat.showName();
console.log(cat);

생성자 함수: 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화(초기 값을 설정한다고 생각하세요!)하는 역할을 합니다.
함수: 어떤 일을 하는 함수입니다.

-2) 클래스를 상속하려면?

이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만든다는 것.

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();

super 키워드
- 메소드로 사용할 수 있다.(constructor 안에서)
  - 부모의 constructor를 호출하면서 인수를 전달한다.
  - this를 쓸 수 있게 해준다.
- 키워드로 사용할 수 있다.
  - 부모 클래스에 대한 필드나 함수를 참조할 수 있다.

(4) =과 ==과 ===

= 할당. 어떤 변수에 값을 할당할 때 씀.

== 등차. 유형을 비교하지 않는 등차. 변수 값을 기반으로 비교. 0 == "0" 은 true

=== 등차. 유형도 비교하는 등차. 엄격한 비교. 0 === "0" false

묵시적 형변환 console.log(1+"2") //"12"

(5) Spread 연산자 (Spread 문법)

어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내줌.

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];

console.log(new_array);

(6) 조건부 삼항 연산자

사용법: 조건 ? 참일 경우 : 거짓일 경우

1-8. 자바스크립트 기초(3) 내장 함수!

11) Array 내장 함수

(1) map - 배열에 속한 항목을 변환할 때 많이 사용. 변환한 값을 새로운 배열로 만듦. 원본 배열은 값이 변하지 않아요!

const new_array = array_num.map((array_item) =>{ return array_item + 1; });

const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];

let count = 0;
for (let i = 0; i < animals.length; i++) {
	let animal = animals[i];
	if (animal === "고양이") {
		count += 1;
	}
}
console.log(count); //3

(2) filter - 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수. cf) map은 요소 개수만큼 똑같은 개수의 배열 반환

원본 배열은 변하지 않고, 원하는 배열을 하나 더.

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = [];
for (let i = 0; i < animals.length; i++) {
	let animal = animals[i];
	// indexOf는 파라미터로 넘겨준 텍스트가 몇 번째 위치에 있는 지 알려주는 친구입니다.
	// 파라미터로 넘겨준 텍스트가 없으면 -1을 반환해요!
	// 즉 아래 구문은 고양이라는 단어를 포함하고 있니? 라고 묻는 구문이죠!
	if (animal.indexOf("고양이") !== -1) {
		cats.push(animal);
	}
}
console.log(cats);

//filter함수 이용
let cats = animals.filter((animal) => {
		return animal.indexOf("고양이") !== -1;
});

const array_num = [0, 1, 2, 3, 4, 5];

// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면 됩니다!
	// return에는 true 혹은 false가 들어가야 해요.
	return array_item > 3;
});

console.log(new_array);

(3) concat - 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수. 원본 배열은 변하지 않아요!

concat은 중복 항목을 제거해주지 않아요! 다른 내장함수와 함께 사용해서 제거해야 합니다! (...new Set)

const merge = array_num01.concat(array_num02);

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);

(4) from - 1) 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때

2) 새로운 배열을 만들 때 (초기화한다고도 표현해요.)

// 배열화 하자!
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);

1-9. 첫 React 프로젝트 만들기

NVM(Node Version Manager)을 왜 써야할까?

nvm은 Node.js의 버전 관리자입니다. 우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있게 해주는 멋진 친구입니다. 🙂 시스템(우리 컴퓨터)에 Node.js를 직접 설치하다보면 다른 버전을 설치하게 되는 경우가 많은데, 여러 버전의 Node.js를 관리하는 건 굉장히 귀찮은 일이죠. 😖 nvm을 설치하고 설치한 nvm을 통해 node를 설치하면 나중에 생길 귀찮음을 방지할 수 있습니다!

macintosh HD → 사용자 → [내 컴퓨터 이름] 아래에! 폴더 생성.

nvm 설치 확인.

nvm으로 노드 설치.

nvm에서 사용 중인 노드 버전 바꾸기 ▽

nvm ls # nvm으로 설치한 노드 버전 리스트 확인 명령어
node -v # 노드 버전 확인 명렁어
nvm use [사용할 노드 버전]

npm으로 yarn 설치.

=>npm, npx 사용도 오케이. (yarn이 좀 빠름):"프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"

==>NPM(Node Package Manager)은 무수히 많은 third-party 패키지를 활용할 수 있게 해줍니다!

npm은 노드를 설치하면 함께 설치됨.

# npm으로 패키지를 설치할 때는 아래 명령어를 사용해요!
# 옵션은 필요한 경우에만 적어줍니다.
# npm install [옵션] [설치할 패키지 이름]

npm install -g yarn 

# 이 명령어는 "npm으로 yarn을 컴퓨터 전체에 설치한다"는 뜻입니다.
# -g 옵션은 컴퓨터 전체에서 쓸 수 있게 한다는 뜻입니다.

yarn으로 패키지를 설치할 때

yarn add [옵션] [설치할 패키지 이름]

CRA(create-react-app)으로 시작하는 리액트

React도 우리가 웹사이트에 만들기 위해 필요한 것들을 하나씩 설치할 수 있습니다. (webpack, babel 같은 녀석들을 배워야 하지만요.)

CRA(Create React App)는 웹사이트를 만들 때 필요한 것을 몽땅 때려넣어 만든 패키지.

# 옵션 global은 전역에 이 패키지를 깔겠다는 뜻입니다.
yarn add global create-react-app

폴더 만들고, 폴더로 이동해서, yarn start

1-10. JSX

src폴더 아래의 App.js 파일 열기.

import React from 'react';
// js 파일 뿐 아니라 이미지도 가능가능!
import logo from './logo.svg';
// css? 가능!
import './App.css';

JSX === HTML을 품은 JS

리액트에서는 딱 하나의 html 파일만 존재. (public 폴더 아래에 있는 index.html)

JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다.

1-11. JSX 사용법

JSX 규칙

1. 태그는 꼭 닫아주기

2. 무조건 1개의 엘리먼트를 반환하기

3. JSX에서 javascript 값을 가져오려면? => 중괄호를 쓴다!

4. class 대신 className!

<div className="App">

5. 인라인으로 style 주기

HTML

<p style="color: orange; font-size: 20px;">orange</p>

JSX

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}