웹의 기초 개념

웹의 동작 개념

HTML을 받는 경우

  • 브라우저 : 서버 API에 요청을 보내서 받은 HTML 파일을 그려줌

데이터만 받는 경우

  • JSON 형식의 데이터를 받아와서 페이지에 끼우게 됨

클라이언트와 서버

  • 클라이언트 : 우리가 웹사이트를 보는 도구
  • 서버 : 우리가 보는 웹사이트에 뿌려줄 것을 만들어 클라이언트에 전달해주는 역할

 

서버리스(serverless)

  • 서버의 사양, 네트워크 설정 등이 되어있는 서버를 빌려서 사용함
  • 직접 서버를 구축하기 위한 인프라 작업을 하지 않아도 됨

 

DOM (Document Object Model)

  • HTML 단위 하나하나를 객체로 생각하는 모델
  • 트리구조

 

 

Javascript 기초

Class

  • 객체를 정의하기 위한 상태, 함수로 구성
class Cat {
  constructor(name) { //생성자
		this.name = name; 
	}

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

class MyCat extends Cat {
  constructor(name, age) {
		super(name); //부모 클래스의 생성자
		this.age = age; 
	}
	
	showName(){ //오버라이딩
		return '내 고양이 이름은 '+super.showName()+'입니다.';
	}
	
	showAge(){
		console.log('내 고양이는 '+this.age+'살 입니다!');
	}
}

let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();

 

변수 선언

  • var : 함수 단위 변수
  • let : block 단위 변수 (재할당 가능)
  • const : block 단위 변수 (재할당 불가)
function scope(){
	const a = 0;
	let b = 0;
	var c = 0;
	
	if(a === 0){ //block 기준 : 중괄호 {}
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}

	console.log(a, b, c);
}
  • 실행 결과 c만 1로 변하고 a, b는 바뀌지 않음

 

=, ==, ===

  • = : 변수에 값 할당
  • == : 동등 연산자, 유형을 비교하지 않는 등차
  • === : 일치 연산자, 유형도 비교하는 등차
💡
0 == "0" → true 반환 0 === "0" → false 반환

 

Spread 연산자

  • 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 역할
  • 점 3개 (...) → Spread 문법
let array = [1,2,3,4,5];
let new_array = [...array];

 

Array 내장 함수

1. map

  • 배열에 속한 항목을 변환할 때 사용
  • 변환한 값을 새로운 배열로 만들어줌 (원본 배열은 변화 X)
const array_num = [0,1,2,3,4,5];
const new_array = array_num.map((array_item) => {
	return array_item + 1;
});

2. filter

  • 특정 조건을 만족하는 항목만 골라서 새로운 배열로 만들어줌
const array_num = [0,1,2,3,4,5];
const new_array = array_num.filter((array_item) => {
	return array_item > 3;
});

3. concat

  • 배열과 배열을 합치거나, 배열에 특정한 값을 추가해주는 함수
const array_num01 = [0,1,2,3];
const array_num02 = [3,4,5];
const merge = array_num01.concat(array_num02);
  • concat은 중복 항목을 제거해주지 않음 → Set을 이용하면 가능
const array_num01 = [0,1,2,3];
const array_num02 = [3,4,5];
const merge = [...new Set([...array_num01, ...array_num02])];

 

  • Quiz_Array 내장 함수
    1. 아래 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 += 1;
	}
});
console.log(count);

     

    1. 아래 코드를 filter 이용하도록 바꾸기
    const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = [];
for (let i = 0; i < animals.length; i++) {
	let animal = animals[i];
	if (animal.indexOf("고양이") !== -1) {
		cats.push(animal);
	}
}
console.log(cats);
    • 정답 
      const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

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

       

     

    1. 아래 두 배열을 하나로 합치기
    const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];

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

     

    1. 딸기는 몇 개일까? (map 이용)
    let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
	let fruit = fruit_list[i];
	if (fruit == '딸기') {
		count += 1;
	}
}
console.log(count);
    • 정답 
      let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let count = 0;
fruit_list.map((fruit) => {
	if (fruit == "딸기") count += 1;
});
console.log(count);

       

     

 

 

React 프로젝트 만들기

NVM(Node Version Manager)

  • Node.js의 버전 관리자
  • 다양한 버전을 마음대로 골라서 설치할 수 있게 해주는 툴
  • 설치된 NVM 버전 확인
nvm --version

 

Node.js 설치하기

  • 설치하기
nvm install [설치할 버전]

 

  • 정상적으로 설치되었는지 확인
nvm ls //nvm으로 설치한 노드 버전 리스트 확인
node -v //노드 버전 확인

 

  • 사용 중인 노드 버전 바꾸기
nvm use [사용할 노드 버전]

 

Yarn 설치하기

  • NPM(Node Package Manager) : 무수히 많은 third-party 패키지를 활용할 수 있게 해줌
  • NPM과 유사한 도구 : Yarn→ 둘 다 프론트엔드 의존성을 관리하기 위한 패키지 매니저
  • → 이미 완성된 패키지를 가져다 쓰기 편리하도록 도와줌
  • NPM으로 Yarn 설치하기
//npm install [옵션] [설치할 패키지 이름]
npm install -g yarn
//-g : 컴퓨터 전체에서 쓸 수 있게 하는 옵션
yarn -v //yarn 버전 확인

 

  • Yarn으로 패키지 설치하기
yarn add [옵션] [설치할 패키지 이름]

 

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

  • Yarn으로 CRA 설치
yarn add global create-react-app

 

  • 리액트 프로젝트 만들기
//yarn create react-app [프로젝트 이름]
yarn create react-app week-1

 

  • 리액트 앱(프로젝트) 실행하기
//프로젝트 폴더로 이동한 후 실행
cd week-1
yarn start

 

 

JSX

JSX란?

  • 리액트에서 뷰를 그리는 방법→ JSX 문법을 이용해서 React 엘리먼트 생성, DOM으로 렌더링시켜서 그리기
  • 자바스크립트 안에서 HTML 태그 같은 마크업을 넣어 뷰 작업을 할 수 있음
const start_half = <div>
	<h1>안녕하세요</h1>
</div>;

 

JSX 규칙

  1. 태그를 반드시 닫기
  1. 반드시 1개의 엘리먼트를 반환하기
return (
	<div className="App">
		<p>안녕하세요</p>
		<input type="text"/>
	</div>
);
  1. JSX에서 자바스크립트 값을 가져오기 위해서는 중괄호를 사용
const cat_name = 'perl';
return (
	<div>
		hello {cat_name}!
	</div>
);
  1. 태그 내에서 클래스 명을 정할 때 class 대신 className을 사용
<div className="App">
  1. 인라인으로 style 넣기
//중괄호를 두 번 쓰는 이유 -> 딕셔너리도 자바스크립트이기 때문
<p style={{color:'orange', fontSize:'20px'}}>orange</p>

//또는 스타일 딕셔너리를 변수로 선언해서 사용
function App() {
	const style = {
		color: 'orange',
		fontSize: 20px'
	};

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

 

 

Component

State

  • Component가 가지고 있는 데이터
  • 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터

 

Props

  • Component가 부모 Component로부터 받아온 데이터
  • Props로 받은 데이터는 수정할 수 없다

 

함수형 Component

BucketList.js

import React from 'react';

const BucketList = (props) => {
	return (
		<div>
			버킷 리스트
		</div>
	);
}

/*
//또는 이렇게 작성할 수 있다.
function BucketList(props) {
	return (
		<div>버킷 리스트</div>
	);
}
*/

export default BucketList;
  • return을 통해 Component가 뿌려줄 UI 엘리먼트를 반환
  • 함수형 Component를 export하여 다른 컴포넌트에서 이 Component를 사용할 수 있도록 함

 

App.js

import React from 'react';
import BucketList from './BucketList';

function App() {
	return (
		<div className="App">
			<h1>내 버킷리스트</h1>
			<BucketList/>
		</div>
	);
}

export default App;

 

클래스형 Component

💡
class 클래스명 extends React.Component

App.js

import React from 'react';
import BucketList from './BucketList';

class App extends React.Component {
	constructor(props){
		super(props);
		this.state = { //state 정의
			list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
		};
	}

	render() { //render 함수 안에 리액트 엘리먼트 넣기
		return (
			<div className="App">
				<h1>내 버킷리스트</h1>
				<BucketList/>
			</div>
		);
	}
}

export default App;

 

Component간의 데이터 전달

  • 함수형 Component에는 state가 없음 (React hook을 이용하면 state 사용 가능)
💡
<컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/>

App.js

render() {
	return (
		<div className="App">
			<h1>내 버킷리스트</h1>
			<BucketList list={this.state.list}/>
		</div>
	);
}

 

 

Uploaded by Notion2Tistory v1.1.0

'[스파르타코딩클럽] > 프론트엔드의 꽃, 리액트' 카테고리의 다른 글

프론트엔드의 꽃, 리액트 4주차 정리 (Firebase, 리액트에 Firestore 연동하기)  (0) 2021.08.19
프론트엔드의 꽃, 리액트 4주차 정리 (애니메이션 keyframes)  (0) 2021.08.19
프론트엔드의 꽃, 리액트 3주차 정리 (리덕스, react-redux)  (0) 2021.08.06
프론트엔드의 꽃, 리액트 3주차 정리 (라우팅)  (0) 2021.08.06
프론트엔드의 꽃, 리액트 2주차 정리 (SCSS, styled-components, 라이프 사이클, state 관리, 이벤트 리스너)  (0) 2021.07.23

+ Recent posts

티스토리툴바