리액트 기초반 1주차

minkyung·2022년 5월 20일

🐳 1주차 / React 개발 환경을 구성하는 방법, JSX

👉 우리가 만들 웹사이트가 어떻게 동작하는지 웹사이트의 원리와 서버리스 환경에 대해 이론을 조금 알아보고, NVM을 사용하는 방법과 CRA로 React 프로젝트를 만드는 방법을 배울거예요. JSX를 배우고 써볼거예요.

❗️질문 잘하는 법

어떤 운영체제를 쓰는지, (윈도우10, 맥 등 간략하게 표기해주셔도 됩니다!)

오류가 났다면 어떤 오류 메시지가 나오는지, (화면을 캡쳐해주세요!)

어떤 것을 하고 싶으신지

🐳 2 . 필수 프로그램 설치

visual studio code의 터미널 -> bash로 설정

Homebrew 설치

❗️이상한 오류 만남

Homebrew를 저번에 설치한 것 같은데 brew -v을 눌러도 버전이 안나오길래 다시 설치해야하나 하고 설치 명령어를 넣었는데 (그 중간에 멘붕에 기억이 날아간 내 만행있을수 있음) 쉘이 cat으로 바뀌더니 원래 Last login: 밑에 뜨던 내 컴퓨터 이름이랑 아이디도 안뜨고, 테스트용 명령어도 입력해봤는데 하나도 안먹히는 먹통상태가 되었다...

재부팅도 해보고, 터미널 환경설정에서 기본 쉘을 zsh로 설정해서 터미널을 다시 열어도 제자리여서 엉엉 울기 직전에 control(^) + z 를 누르면 프로세스가 종료된다길래 눌러봤는데 됐다... 다시 zsh로 돌아오고 내 컴퓨터이름이랑 내 아이디가 떠서 안심했다. 다시 돌아오니까 brew -v로 버전 확인도 되더라... 😳

brew install nvm
brew ls (nvm 설치 확인)

nvm -v
nvm --version

이번엔 또 nvm 버전 확인이 안돼서 다음으로 못넘어갔다.
nvm이 설치된 것 까지도 확인이 되는데 왜 버전이 안나올까...
brew info nvm 해도 나오는데 ...

인터넷 이리저리 찾다가 그냥 brew가 하라는대로 해보기로했다. (이게맞음)

그래서 결국 잘 됐다.
근데 왜 됐는지 내가 뭘한건지는 몰라서 기록용으로 적어놨음 ...

환경변수 추가

터미널이 bash일 경우 vi ~/.bash_profile (vi 에디터로 설정 파일 열기)

하니까 이런 Attention 이 뜸 .........
튜터님이 절대 다른거 만지지 말라고 하셨는데 내가 뭘만진건지 몰라서 무서움

nvm -v가 안돼서 brew가 시키는대로 했더니 튜터님이 환경변수 설정하면서 보여주신거랑 엄청 다르게 했는데 결론적으로 nvm -v 는 됨. 명령어도 두줄까지는 똑같았는데 왜 나는 밖에서 한건지 ... 뭔지모르겠음.... 무서움 ... 내 컴퓨터 할부로 삼 ...

❗️ Attention 고침!
내가 vi 편집기에 들어가서 텍스트 입력까지 해놓고 그냥 나와버려서 편집 중인 파일이 동시에 2개인 상황인 것이었다 ...
참고 블로그 : vi 편집기 E325: ATTENTION swap 에러

이제는 vi 편집기 들어가도 이렇게 평화롭게 뜨고 mvn 버전도 잘 나온다. 근데 튜터님 화면과는 다르게 위에 아무것도 안떠서 환경변수 설정이 잘 된건지 모르겠다.

🐳 3. 프론트엔드 기초 지식

웹을 구성하는 요소: 서버와 클라이언트
서버와 클라이언트의 상호작용
HTML, CSS, javascript => 정적자원
방문자가 웹사이트에 있는 내내 상호작용이 일어남. 유저가 어떤 행동을 할 때마다. (요청할 때마다)

웹의 동작 개념

HTML을 받는 경우

데이터만 내려올 경우 -> JSON 형식

프론트엔드 개발자가 하는 일?

화면을 그리고
말 그대로 화면을 그림. 눈에 보이는 부분. 인터랙션.
데이터를 적용함
서버에서 데이터를 가지고 와서 만든 화면에 넣어주는 것.

서버리스(serverless)란?

서버가 없다는 이야기가 아니라, 원래는 웹페이지 통째로 만드려면 서버와 클라이언트를 둘 다 개발해야하는데 서버리스는 백엔드 작업을 직접 할 필요 없다는 뜻임.

서버를 띄워줄 역할, 서버 설정 => 다 해놓은 서버를 빌려주는 서비스 = 서버리스 서비스

원래 했어야 했던 작업을 내가 할 필요가 없음.

🐳 4. HTML

HTML(Hypertext Markup Language)
"여기는 글자 영역이고 여기는 이미지 영역이야!"라고 표시해서 브라우저가 웹페이지를 잘 그릴 수 있도록 하는 게 HTML이랍니다. 🙂

DOM(Document Object Model)
문서 객체 모델. html의 단위 하나하나를 객체로 생각 하는 모델

<div>
  <h3>고양이 밥주기</h3>
  <p>고양이 물, 사료 챙겨주기</p>
  <button> 완료</button>
</div>

div 엘리먼트는 h3, p, button 엘리먼트들을 자식으로 가지고 있다.
h3, p, button 엘리먼트들은 div 엘리먼트라는 부모를 가지고 있다.
: 부모자식 관계

이 포함되고 포함하는 모양새를 트리 구조라고 부름

<div>안녕</div>, <p>하세요</p>, <button>확인</button> => 요소(elements) 태그는 요소를 만들 때만드는 <></>를 말함.

Elements : html을 확인할 수 있는 탭
Console : js 입력할 수 있는 탭

자바스크립트가 어떤 자식에 접근할 때는 .찍어서 하위 요소에 접근할 수 있음.

같은 부모를 둔, 같은 레벨의 요소들을 형제 관계라고 함.

자식 요소에 접근하기

document.body.childNodes
document.body.children //요소들만 뽑을 수 있음
document.getElementsByTagName("div") //특정 요소만 뽑을 수 있음
firstChild
lastChild

body - 에서 요소로 접근하는 것과 document에서 body로 접근하는 방식이 왜 다른지? => 그렇게 합의된 약속임. 📎 MDN 문서 참고

🐳 5. CSS

📎 CSS MDN 문서 링크

Selector
어떤걸 꾸밀건지 꾸밀 걸 선택하는 것. 선택자

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

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

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

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

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

특정상태일 때의 코드만 보여주는 개발자 도구

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

button:hover {
        background-color: orange;
    }

 #title{
        color: skyblue;
        text-decoration: underline;
    }

그리드 시스템

DOM 요소들은 기본적으로 박스형태로 표시됩니다.
p, div 할 것 없이 모두 네모난 영역을 가져요!

맨 가운데: 컨텐츠 영역

.wrap {
	display: flex; 
	/* flexible box, 카드 하나하나의 영역을 유동적으로 바꿔줌 
    기본적으로 div는 display:block 속성으로 가짐. (넓은 영역 다 쓰기) 
    flex는 컨텐츠 너비 만큼만 너비를 가짐. */
    }

.box {
	border: 1px solid gray;
    border-radius: 5px;
    margin: 1em;
    padding: 2em;
    flex: 1 1 0; 
    /* 이거 왜 이렇게 했는지 설명 안해줌... */
}

css 사칙연산

반응형 웹 만들 때 사용함

button{
    width: calc(80% - 20px);
    /* clac 함수는 단위를 맞춰주지 않아도 작동함 */
}

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

자바스크립트에서 dom을 어떻게 조작할 수 있는지?
어떻게 접근할 수 있는지?

document로 DOM에 접근하기

(1) document.getElementsByClassName

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

(2) document.getElementById

const title = document.getElementById("title");
console.log(title);

const title = document.getElementById("title");
console.log(title);
title.style.backgroundColor="yellow";

(3) document.getElementsByTagName

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

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

for (let i=0; i<buttons.length; i++){
buttons[i].addEventListener("click",sayHello)
// 이벤트를 붙일 때 사용해주는 내장함수
}

할일 목록 카드의 완료 버튼 누르면 배경 색 바뀌게 하기

function changeBackgroundColor(index){
let card = document.getElementsByClassName("box")[index];
card.style.backgroundColor = "blue"
        }

<button onclick="changeBackgroundColor(0)"> 완료</button>

document에 DOM 요소 추가하기

(1) document.createElement()
만든다고 화면에 바로 적용되지 않음. dom객체를 만들고 나면 어디에 넣어달라는 지정을 따로 해줘야함.

const new_div = document.createElement("div");
new_div.style.backgroundColor="green";
new_div.style.height="100px"
new_div.style.width="100px"
console.log(new_div);
document.body.appendChild(new_div);

스크립트를 바디 맨 아래에다가 쓴 이유:
요소들이 html에서 생긴 다음에 자바스크립트에서 접근한거고, 스크립트를 바디 맨 위에다가 넣으면 요소 생기기 전에 접근해서 type error 남.

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

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

ECMA script = ES

프론트 엔드 개발자는 ES5,6,7 정도는 알아두는게 좋음.

(1) let, const와 Scope

var 먼저 있었음
let, const 새로 만듬
let: 값을 바꿔줄 수 있음.
let b -> 선언부
b = 2 -> 할당부 (let은 재할당 가능)
const으로 선언한 c = 상수 (변하지 않는 값)

let,const는 block-level scope를 가지고 var는 함수레벨 scope를 가짐

블록레벨: 중괄호 {} / {}안에서만 쓸 수 있는 것
함수레벨:

var는 지역변수 전역변수 구분이 안됨.

(2) 함수

3가지 방법
1) 함수 선언식

function do_something () {...}

2) 함수 표현식
선언식과의 차이: 클로저로 사용할 수 있다, 변수화를 했으니까 콜백으로 사용하기 편하다

// 함수 이름은 생략해도 괜찮아요!
let do_something = function [함수 이름]() { ... }

3) 화살표 함수

// 화살표 함수는 함수 표현식의 단축형입니다.
// function까지 생력이 되었죠!
let do_something = () => { ... }

(3) Class
컴포넌트 (1.클래스형, 2.함수형)
클래스: 어ㅓㄴ 객체를 정의하기 위한 틀 역할. 어떠한 상태값 +함수
객체 단위로 코드를 그룹화({}) 하고 쉽게 재사용하려고 사용함.

자식클래스 만들기
Cat이라는 클래스를 상속해서 Mycat 클래스 만들기
이름 받아오는건 부모 클래스에 이미 있음. 그러면 부모 클래스에서 그냥 가져오면됨. 굳이 정의해줄 필요없음.
부모클래스에 접근하는 방법: super

super 키워드

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

(4) =과 ==과 ===

자바스크립트는 묵시적 형변환을 함.
1+"2" = "12"
= 할당
== 등차 (유형을 비교하지 않는 등차, 변수 값을 기반으로 비교)
=== 등차 (유형도 비교하는 등차, 엄격한 비교)

(5) Spread 연산자 (Spread 문법)
어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 역할
딕셔너리, 배열 등 {} 혹은 []을 벗겨버림

let a1 = [1,2,3]
let a2 = [4,5,6]
let a3 = [...a1, ...a2]
a3 = [1,2,3,4,5,6]

불변성이라는 것을 맞춰주기 위해 많이 씀.

(6) 조건부 삼항 연산자

if문의 단축 형태

return result = (조건문) ? (참일경우) : (거짓일 경우)

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

Array 내장 함수

map
배열에 속한 항목을 변환할 때.
어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어 줌.
원본 배열은 값이 변하지 않음.
반복문을 돌리는거라고 생각해도 됨.
filter
concat
from

DOM 객체 자바 스크립트로 가져올 때 '유사배열' 얘기했었음.
length, 대괄호로 Index로 접근 등은 가능함.
근데 어레이 내장함수는 사용 불가능.
유사배열을 배열로 만들어서 사용해줘야함. 그 때 사용.
배열에 들어갈 요소가 확실하지않음 그러나 길이는 확실. 그때 사용함

let my_name ="minkyung";
let my_name_array = Array.from(my_name);

console.log(my_name_array);

> ['m', 'i', 'n', 'k', 'y', 'u', 'n', 'g']

let num_array = Array.from(my_name, (item, index) => {return index});
console.log(num_array)

>[0, 1, 2, 3, 4, 5, 6, 7]

정해진 값은 없지만 길이가 정해져 있음
from에 속성값 넣어서 index 뽑기 (자세한 사항은 MDN)

let new_array = Array.from({length:4},(item, index) => {
    return index;
})

console.log(new_array)

>[0, 1, 2, 3]

✍ Quiz_Array 내장 함수

map

for문을 map으로 바꾸기)

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

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

-----------------------------------------------------------------

const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];
let count = 0;
animals.map ((animal) =>{
    if (animal==="고양이"){
        count++;
    }
})

console.log(count);

filter

for문을 filter로 바꾸기)

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

-----------------------------------------------------------------

내 풀이 ... indexOf 모름 ..

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

let cats = [];
cats = animals.filter((animal) => animal.includes("고양이"))
console.log (cats)

-----------------------------------------------------------------

튜터님 풀이) 생각보다 if문 안의 비교문을 그대로 써도 됨 ,,
 
const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = animals.filter((animal) => {
    return animal.indexOf("고양이") !== -1;
})
console.log (cats)

concat

const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];

let animals = dogs.concat(cats)
console.log (animals);

🐳 9. 첫 React 프로젝트 만들기

노드라는 친구 위에서 리액트가 돌아감.
노드는 버전이 미친듯이 많고 버전 업그레이드가 자꾸 됨.
그래서 nvm을 씀. 자기가 알아서 이폴더에서는 이 노드버전을 설치해서 쓸거야 저 폴더에서는 저노드버전을 설치해서 쓸거야 라는 말을 한 줄의 코드로 실행할 수 있음.

노드 패키지 매니저 (노드 설치 시 자동으로 깔림)
노드 버전 매니저

리액트는 자유도가 엄청 큼. 그러다보니까 모든 구성요소들을 따 따와서 조립할 수도 있음. 근데 너무 힘듬. 조각들을 다 끼워맞춰놓은 애가 있음. 편하게. = CRA 크리에이트 리액트 앱 이라는 패키지

🐳 10. JSX

리액트 프로젝트에서는 html 파일 딱 하나.
jsx문법을 사용해서 리액트요소를 만들고, 그래서 뷰를 그리는 요소들이 자바스크립트 파일에 들어갈 수 있음.
app.js 파일에서 dom요소로보이는 것들은 리액트 요소.

🐳 11. JSX 사용법

태그는 꼭 닫아주기
<input type="text"/>
무조건 1개의 엘리먼트를 반환(return)하기
jsx에서 리턴할 수 있는 요소 수 = 딱 하나
리턴하는 값이 없어도 안됨. null이라도 넘겨줘야함.
null도 자바스크립트에서 사실 객체임

JSX에서 javascript 값을 가져오려면?
class 대신 className!
id는 그냥 id임. 지대 어이없음.

인라인으로 style 주기

객체로, 딕셔너리로 스타일을 넘겨줘야함
{key:value}
딕셔너리를 jsx에서 이 안에다가 넣어주려면 또 중괄호 안에 넣어줘야함.

🐳 11. JSX 사용법

내 풀이)

function App() {
  let name = "minkyung";
  return (
    <div className="App">
      
      <div style={{width:"300px", margin:"0px 70px"}}>
      <h1 style={{color:"green", fontSize:"30px"}}>안녕하세요!</h1>
        <hr></hr>
      <p style={{textAlign:"left"}}>이름을 입력해주세요</p>
      <input type="text" style={{width:"100%"}}/>
      </div>
      
    </div>
  );
}