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

yyoujg·2022년 5월 21일
0

03.프론트엔드 기초 지식

1)서버와 클라이언트

1.웹의 동작 개념(HTML을 받는 경우)
웹페이지는 서버에서 미리 준비해두었던 것을 "받아서", "그려주는" 것입니다.
즉 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일뿐이다.
1) 요청은 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것이다.

2.웹의 동작 개념(데이터만 받는 경우)
HTML만 내려주는 것이 아니라 데이터만 내려줄 때가 더 많다.
공연 티켓을 예매하고 있는 상황이라면 좌석이 차고 꺼질때마다 보던 페이지가 리프레시 되면 안되기 때문에 데이터만 받아 끼우게 된다.

데이터만 내려올 경우 이런 생김새를 JSON 형식이라고 한다.

3.서버와 클라이언트
클라이언트는 웹사이트를 보는 도구(휴대폰,PC,아이패드)가 모두 클라이언트이다.
서버는 웹사이트에 뿌려줄 것(html이나 데이터)을 만들어 클라이언트에 전달해주는 것이다.

2) 프론트엔드의 역할

  1. 화면을 그린다.
    눈에 보이는 부분을 만든다. 글이나 아이콘을 넣거나 마우스를 올릴때만 글자색을 바꿔주는 등의 작업(인터렉션을 준다)
  2. 데이터를 끼얹는다.
    서버에서 데이터를 가지고 와서 만든 화면에 착착 넣어준다.

3) 서버리스(serverless)란?

서버가 없거나 DB, 백엔드 개발을 안해도 되는것이 아니라 서버를 내가 만들 필요가 없는 것.
서버를 구성할 때 EC2를 사고, 서버 설정 등을 미리 해둔 어떤 서버를 빌려다 쓰는 것.
서버의 사양, 네트워크 설정 같은 게 미리 되어 있는 서버를 빌려 쓰니, 인프라 작업을 내가 안해도 된다.

4. HTML

HTML(Hypertext Markup Language)은 마크업 언어이다.
마크업은 이름 그대로 표시하는 것이다. 웹페이지는 그림도 있고, 글도 있고 표도 있고, 여러가지 요소가 잔뜩 들어있는데, "여기는 글자 영역이고 여기는 이미지 영역이다"라고 표시해서 브라우저가 웹페이지를 잘 그릴 수 있도록 하는게 HTML이다.

5) DOM

<div>안녕</div>,<p>하세요</p>,<button>확인</button>...등 을 요소(elements)라고 한다.
tag란 요소를 만들 때 사용하는 <></>를 말한다.
(1) DOM(문서객체모델)
DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들면 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있다. 이런 구조를 트리구조라고 한다.
DOM이 트리구조라는 뜻이다.
(2) dom 트리 확인하기
document와 body, head는 부모- 자식 관계이다. body와 head는 형제 관계이다(sibling)
(3) 자식 요소에 접근하기
프로그래밍 언어는 어떤 연산을 수행하거나, 소프트웨어, 시스템을 동작하게 하는 언어이다.
HTML은 프로그래밍 언어가 아니라 마크업 언어이다.

05.CSS

(6)Selector

selector는 꾸밀 요소를 선택하는 선택자이다. 어떤 것을 꾸밀 지 선택하고 속성을 넣어 꾸며준다.

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

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

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

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

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

/*{...}는 선언부라고 하고 속성: 값으로 이루어져 있다.*/

(7)그리드 시스템

DOM 요소들은 기본적으로 박스형태로 표시된다.
(1)박스모델

  • margin box:
    가장 바깥 영역. 주로 다른 요소들과 간격을 줄 때 사용한다.
    margin 속성을 주면 이 영역이 바뀐다.

  • border box:
    테두리 영역. border 속성으로 테두리를 주면 이 영역이 바뀐다.

  • padding box:
    테두리와 콘텐츠 사이 영역. padding 속성을 주면 이 영역이 바뀐다.
    박스 내부의 간격을 줄 때 사용한다.

  • contents box:
    실제 콘텐츠 영역. width, height 등으로 사이즈를 줄 수 있고, 따로 지정하지 않을 경우는 콘텐츠 내용(글이나 이미지 등)에 따라 임의로 사이즈가 잡힌다.
    (2)그리드 시스템
    그리드 시스템은 레이아웃을 잡는데 사용하는 것이다.

  • flex

  • table

  • block

  • grid

(8)css 사칙연산

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

바닐라 자바스크립트로 DOM 조작하기

14) document로 DOM에 접근하기

(1)document.getElementsByClassName
클래스 명으로 DOM 요소에 접근한다.

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

// 새 요소를 만들어요.
const new_div = document.createElement("div");

// 한 눈에 확인해볼 수 있도록 스타일을 조금 추가해줄게요. 그냥 div는 눈에 안보일테니까요!
new_div.style.backgroundColor = "green";
new_div.style.width = "100px";
new_div.style.height = "100px";

// 요소를 body에 추가해줍시다.
document.body.appendChild(new_div);

07.자바스크립트 기초(2)

React는 javascript 라이브러리이다.
ES6은 자바스크립트 표준 문법 중 하나로 가장 보편화되어 있다.

16)자바스크립트 기초 이론

(1)let, const와 scope
스코프(Scope)란 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위, 즉 변수에 접근할 수 있는 범위이다.

  • var: 함수 단위
  • let: block 단위 (변수: let으로 선언한 변수는 값이 변할 수 있다.)
  • const: block 단위 (상수: 한번 선언한 값은 바꿀 수 없다.)

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

  • 함수 선언식
function do_something() { ... }
  • 함수 표현식
// 함수 이름은 생략 가능
let do_something = function [함수 이름]() { ... }
  • 화살표 함수
// 화살표 함수는 함수 표현식의 단축형이다.
// function까지 생략됨
let do_something = () => { ... }

(3)Class
클래스란 객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일정의 틀을 말한다. 객체를 정의하기 위한 상태와 함수로 구성되어 있다.

  • 1)클래스를 구성하는 것
    클래스 안에는 객체를 정의하기 위한 상태(property)와 함수가 있다.
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) =과 ==과 ===
  • =
    =는 할당을 뜻한다. 어떤 변수에 값을 할당할 때 쓴다.
  • ==
    ==는 등차이다. 유형을 비교하지 않는 등차이다. 변수 값을 기반으로 비교한다.
    (ex.0 == "0"은 true를 반환한다.)
  • ===
    ===도 등차이다. 유형도 비교하는 등차이다. 엄격한 비교.
    (ex. 0 === "0"은 false를 반환한다.
    →0은 숫자(number)고, "0"은 문자(string)이기 때문이다.

(5)Spread 연산자(Spread 문법)
어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내준다.

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

console.log(new_array);

(6)조건부 삼항 연산자
삼항 연산자는 if문의 단축 형태이다.
사용법: 조건 ? 참일 경우: 거짓일 경우

let info = {name: "mean0", id: 0};

let is_me = info.name === "mean0"? true : false;

console.log(is_me);

8. 자바스크립트 기초(3)

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

11)Array 내장 함수

(1) map
map은 배열에 속한 항목을 변환할 때 많이 사용한다.
어떤 배열에 속한 항목을 원하는대로 변환하고 변환한 값을 새로운 배열로 만들어준다.
즉, 원본 배열은 값이 변하지 않는다.

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

const new_array = array_num.map((array_item) =>{ 
	return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값.
console.log(new_array);
// 원본 배열은 그대로 있다.
console.log(array_num);

(2)filter
filter는 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수이다.
원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있다.

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은 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수이다.
원본 배열은 변하지 않는다.

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

const merge = array_num01.concat(array_num02);

// 중복 항목(숫자 3)이 제거되지 않고 그대로 있다.
console.log(merge);

concat은 중복 항목을 제거해주지 않는다.
다른 내장함수와 함께 사용해서 제거해야 한다.

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
(5)reduce

09. 첫 React 프로젝트 만들기

13) NVM으로 노드 버전 관리

NVM(Node Version Manager)을 왜 써야할까?
👉 nvm은 Node.js의 버전 관리자이다.
우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있다.

시스템(우리 컴퓨터)에 Node.js를 직접 설치하다보면 다른 버전을 설치하게 되는 경우가 많은데, 여러 버전의 Node.js를 관리하는 건 귀찮은 일앋.

nvm을 설치하고 설치한 nvm을 통해 node를 설치하면 나중에 생길 귀찮음을 방지할 수 있다.

nvm 설치 확인하기
VSCode에서 터미널을 열고 아래와 같이 타이핑 하면 nvm이 잘 설치 되었다면 설치한 nvm 버전이 나온다.

nvm --version

nvm으로 노드 설치하기
👉 Node.js를 설치
노드 공식 사이트에서 안정적인 버전(버그가 적은 버전. LTS)을 확인해보고 LTS 버전을 설치
공식 사이트에는 최신 LTS 버전과 최신 버전을 바로 안내해주고 있다.
14.17.5가 최신 LTS일 경우 아래 명령어를 입력해서 node.js를 설치
14.17.5 버전을 설치

nvm install [설치할 버전]

설치가 끝났다면 터미널에 아래 명령어를 입력해서 잘 설치 되었는 지 확인

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

갓 설치한 14.17.5 버전에 사용 중인 노드 버전을 표시하는 화살표가 붙어 있다.
node -v를 입력해서 나온 버전과 같은 지 확인.
+) nvm에서 사용 중인 노드 버전 바꾸기

⚠️ LTS는 14.17.5인데, 사용 중인 노드 버전을 바꾸고 싶을 경우

아래 명령어를 입력해 사용할 노드 버전을 바꾸고, 다시 node -v 명령어로 노드 버전을 확인

nvm use [사용할 노드 버전]

14) npm으로 yarn을 설치

  • NPM(Node Package Manager)은 무수히 많은 third-party 패키지를 활용할 수 있게 해준다.

💡 비슷한 친구로는 yarn이 있다.
둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"입니다.
→ "누가 만들어 놓은 좋은 것"(= 패키지)을 가져다 쓰기 편하게 도와준다.

👉 npm은 노드를 설치하면 함께 설치되서 따로 설치하지 않아도 됩니다!

  • npm으로 yarn을 설치

아래 명령어를 입력해서 yarn을 설치

# npm으로 패키지를 설치할 때는 아래 명령어를 사용
# 옵션은 필요한 경우에만 적어줍니다.
# npm install [옵션] [설치할 패키지 이름]
    
npm install -g yarn 
    
# 이 명령어는 "npm으로 yarn을 컴퓨터 전체에 설치한다"는 뜻.
# -g 옵션은 컴퓨터 전체에서 쓸 수 있게 한다는 뜻.

잘 설치되었다면 아래처럼 yarn -v 명령어로 yarn의 버전을 확인할 수 있다.

👉 yarn으로 패키지를 설치할 때는?
****yarn으로 패키지를 설치할 때는 아래 명령어를 사용. 명령어가 조금 더 직관적

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

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

- yarn으로 CRA를 설치

👉 yarn을 설치하지 않았다면 아래 명령어 대신, npx나 npm을 사용해도 된다.

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

👉 React는 레고같은 친구입니다. 어린이들이 레고로 성을 만드는 것처럼 우리는 React로 웹사이트를 만들 거예요.

React는 웹사이트에 만들기 위해 필요한 것들을 하나씩 설치할 수 있다. (webpack, babel 등을 배워야 하지만.)

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

  • 첫번째 리액트 프로젝트

다시 터미널로 돌아가서 첫 리액트 프로젝트 생성

# yarn create react-app [리액트 프로젝트 이름]
# 우리가 설치한 create-react-app 패키지를 써서 프로젝트를 만들어요.
# 주의! 꼭 sparta_react 폴더 경로에서 입력
yarn create react-app week-1

👉 React에서는 프로젝트를 앱이라고 한다. 리액트 프로젝트와 리액트 앱은 같은 말이다.

🔥 프로젝트가 생성이 되면, sparta_react 폴더 아래에 week-1이라는 폴더가 생긴다.
VSCode를 열어서, [폴더 열기] → sparta_react → week-1 폴더를 선택
설치가 끝났다면, 아래 명령어를 입력해서 첫 리액트 앱을 실행

cd week-1 # week-1 폴더로 이동
yarn start

10. JSX

16) JSX 가 뭘까?

🔥 VSCode에서 src폴더 아래의 App.js 파일

// 파이썬에서 뷰티풀스프를 불러올 때와 비슷하다.
// *react*에서도 다른 패키지를 불러다 쓸 수 있다.
// import [패키지명] from [경로] 이 형식
import React from 'react'; 
// js 파일 뿐 아니라 이미지도 가능
import logo from './logo.svg';
// css 가능
import './App.css';
    
function App() {
	return (
		<div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }
    
    export default App;
    ```
    
- JSX
👉 리액트에서는 딱 하나의 html 파일만 존재한다. 
(public 폴더 아래에 있는 index.html)

👉 리액트에서는 App.js 파일에서 보이듯, 
**JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서** 그립니다.
        
- HTML을 품은 JS === JSX!
            
아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다.

```html
<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

그래서 나온 게 JSX이다.
자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다.

const start_half = <div>
                <h1>안녕하세요!</h1>
                <p>시작이 반이다!</p>
              </div>;

JSX에서 쓰는

~~
는 DOM 요소가 아니라 React 요소이다.
리액트 돔을 구성하는 건 리액트 요소, 돔을 구성하는 건 돔 요소

11. JSX 사용법

17) JSX 사용법 훑어보기

🔥 개발자 도구를 열고 에러를 보는 거 잊지 마세요!
(F12 혹은 Cmd +Opt + i , Ctrl + Shift + i를 눌러 개발자 도구를 열 수 있다.)

  • JSX 규칙
    - 1. 태그는 꼭 닫아주기
// input 태그를 닫지 않고 넣어볼거예요!
function App() {
	return (
		<div className="App">
			<input type='text'>
		</div>
			);
}

JSX 문법에 맞지 않는다고 에러난다. 아래처럼 /를 추가하고 브라우저를 새로고침한다.

<input type='text'/>
    1. 무조건 1개의 엘리먼트를 반환하기

이번엔 return 아래에 p태그를 하나 추가해볼까요?

return (
	<p>안녕하세요! 리액트 반입니다 :)</p>
	<div className="App">
		<input type='text'/>
	</div>
		);

컴포넌트에서 반환할 수 있는 엘리먼트는 1개이다. 아래와 같이 바꾸고 다시 새로고침 한다.

return (
	<div className="App">
		<p>안녕하세요! 리액트 반입니다 :)</p>
		<input type='text'/>
	</div>
);
    1. JSX에서 javascript 값을 가져오려면 중괄호를 쓴다.
const cat_name = 'perl';
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 한다.
return (
	<div>
		hello {cat_name}!
	</div>
);

👉 값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있다.

import React from 'react';
import logo from './logo.svg';
import './App.css';
            
function App() {
	const number = 1;
            
	return (
			<div className="App">
				<p>안녕하세요! 리액트 반입니다 :)</p>
					{/* JSX 내에서 코드 주석은 이렇게 쓴다. */}
					{/* 삼항 연산자 사용 */}
				<p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
                </div>
              );
            }
            
export default App;
    1. class 대신 className!
<div className="App">

JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 class대신className으로 사용한다.
id는 그냥 id로 씁니다.

    1. 인라인으로 style 주기

👉 html 태그에 스타일을 직접 넣던 거 기억하시나요? 거기에서 아주 조금 달라요!
css 문법 대신 json 형식으로 넣어주면 끝!

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>
              );
}
profile
yyoujg
멋쟁이 개발자가 될거야!!
이전 포스트

항해99 1주차 회고록

다음 포스트

[스파르타코딩클럽] 리액트 기초반 - 2주차

0개의 댓글