디자이너에서 개발자

[패스트캠퍼스] 웹 개발 강의(OpenGraph,파이썬 패키지 관리)

Rosie, Lee — Fri, 28 Apr 2023 01:09:22 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다.

OpenGraph(Og태그)

html meta태그로 웹사이트 정보를 제공하는 것이다.

검색엔진최적화[SEO(Search Engine Optimization)]를 위해 해야 한다. (검색엔진이 수집해갈 수 있는 코드로 사이트가 잘 나올 수 있도록 하는 것)
SNS 공유할 때 meta 태그로 사용한 image와 description이 함께 공유된다.

<meta property="title" content="웹사이트 타이틀">
<meta property="description" content="웹사이트 설명">
<meta property="image" content="/static/c.jpg">
<meta property="og:title" content="웹사이트 타이틀">
<meta property="og:description" content="웹사이트 설명">
<meta property="og:image" content="/static/c.jpg">

변경사항이 생기면 AWS 인스턴스에 접속해서 다시 재시작해줘야 한다

먼저 실행 중인 프로그램 확인

ps -ef

위와 같이 하면 모든 프로그램이 나와서 보기 어렵다.

아래와 같이 입력해서 일치하는 프로그램 리스트로 확인한다.

ps -ef | grap python3

프로그램 종료(띄어쓰기로 구분해서 여러개를 한꺼번에 종료할 수 있다)

sudo kill -9 {종료할프로그램번호 종료할프로그램번호}

다시 프로그램 시작

sudo nohup python3 app.py &

인스턴스(PC) 안에다가 새로운 파일을 업로드해서 여러 프로젝트 관리가 가능하다.

venv(virtual environment)

파이썬으로 개발할 때, 패키지 다른 경우 관리하는 방법

venv 가상 환경 구성하기

프로젝트 폴더를 vs code로 열어준다.

그리고 터미널에 명령어로 아래와 같이 입력한다.

python -m venv {your venv name}

탐색기에 venv 폴더가 생성된다.

가상환경 활성화

activate.bat 파일 실행

source {your venv name}/bin/activate

그러면 터미널의 경로에 맨 앞에 (venv)라고 표시되며 가상 환경에서 작업할 수 있게 된다.

테스트로 패키지 설치를 해본다.

pip3 install requests

그러면 가상환경 내부에 패키지가 설치된다.

가상환경 비활성화

deactivate

이렇게 가상환경을 사용하면 한개의 PC에서 여러 프로젝트별로 관리할 수 있다.

[패스트캠퍼스] 프론트엔드 강의 학습일지(Redux)

Rosie, Lee — Tue, 25 Apr 2023 14:42:32 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

Redux

리덕스는 상태 관리 라이브러리이다.

State를 Store에 넣어놓고 사용할 수 있다.

REDUCER

상태 변경사항을 결정하고 업데이트된 상태를 반환하는 함수이다.

인수로 조치를 취하고, store 내부의 상태를 업데이트 합니다.

Store

클래스가 아니고 Methods가 있는 객체 저장소이다.

애플리케이션의 전체 상태 트리를 보유한다, 내부 상태를 변경하는 방법은 상태에 대한 Action을 전달하는 것이다.

Props와 State의 구별

Props

Properties의 줄임말
컴포넌트상 서로 통신하는 방법
상위 구성 요소에서 아래쪽으로 흐른다(부모 -> 자식)
자식이 가지고 있는 props를 변경하려면 부모 컴포넌트의 state를 변경해야 한다.

State

부모 컴포넌트에서 자식 컴포넌트로 data를 보내는 게 아니고, 하나의 컴포넌트 안에서 데이터를 전달하기 위해 사용함(예를 들어서 검색 창에 글을 입력할 때 글이 변하는 것은 state로)
state is mutable(조작할 수 있는) / State는 자체적으로 변경할 수 있다.
state가 변하면 re-render 된다.

미들웨어 없이 리덕스 카운터 앱 만들기

앱 만들기

폴더를 만들고 그 안에서 명령어를 칠 때는 ./ 를 사용

npx create-react-app ./ --template typescript

폴더도 같이 생성되게 하려면 폴더명과 함께 사용(ex: my-app)

npx create-react-app my-app --template typescript

리덕스 설치

npm install redux --save

Subscribe()

change listener를 추가합니다.
작업이 전달될 때마다 호출되며 상태 트리의 일부가 잠재적으로 변경될 수 있습니다.
그런 다음 getState()를 호출하여 내부의 현재 상태 트리를 읽을 수 있습니다.

store.subscribe(render);

https://redux.js.org/api/store#subscribelistener

Store | Redux

API > Store: the core Redux store methods

redux.js.org

combineErducers

provider

리덕스 스토어에 접근할 수 있게 해주는 것

최상위에 감싸주면, 어떤 컴포넌트던 스토어에 접근할 수 있다.

provider는 React Redux라는 라이브러리에서 가지고 올 수 있어서 설치를 해준다.

npm install react-redux --save

useSelector

스토어의 값을 가지고 오는 hooks

useDispatch

스토어에 있는 dispach 함수에 접근하는 hooks(액션을 보내는 것)

리덕스 미들웨어

액션을 dispatch 하고 리듀서에 도달하는 순간 정해놓은 작업을 하는 중간지입니다.
로깅, 충돌 보고, 비동기, API 통신, 라우팅 등을 위해 사용합니다.

로깅으로 사용하여 출력

로깅 미들웨어 생성하기

리덕스를 이용할 때 로그를 찍어주는 미들웨어

const loggerMiddleware = (store: any) => (next: any) => (action: any) => {

code..

};

리덕스 Thunk

thunk: 일부 지연된 작업을 수행하는 코드 조각

리덕스를 사용하는 앱에서 비동기 작업을 할 때 많이 사용하는 방법이 redux-thunk 이다.

npm install redux-thunk --save

비동기 작업은 언제 하나?

서버에 요청을 보내서 데이터를 가져올 때 주로 비동기 요청을 보낸다.

테스트를 위해 Dummy 데이터를 가지고 와서 axios로 API 요청을 해본다.

axios 모듈 설치

npm install axios --save

리덕스 toolkit

리덕스 로직을 작성하기 위한 공식 권장 접근 방식이다.

리덕스를 사용할 때 복잡해지는 부분을 쉽게 작성할 수 있게 도와주는 것이다.

https://redux-toolkit.js.org/tutorials/quick-start

Quick Start | Redux Toolkit

redux-toolkit.js.org

npm install @reduxjs/toolkit react-redux

리덕스가 구현되어 있는걸 바로 시작할 수 있다.

https://github.com/reduxjs/cra-template-redux

GitHub - reduxjs/cra-template-redux: The official Redux template for Create React App

The official Redux template for Create React App. Contribute to reduxjs/cra-template-redux development by creating an account on GitHub.

github.com

[패스트캠퍼스] 프론트엔드 강의 학습일지(React 앱 성능 개선)

Rosie, Lee — Tue, 25 Apr 2023 01:16:47 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

리액트 확장 프로그램

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023.

chrome.google.com

Profiler 성능 측정을 위한 테스트

위에서 설치한 확장프로그램에서 Profiler 기능을 확인해 보기 위해 앱을 만들어 본다.

데이터가 많아야 확인이 가능하기 때문에 가짜 데이터를 가지고 와서 사용해 본다.

가짜 데이터 API를 사용할 수 있는 곳

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month.

jsonplaceholder.typicode.com

A컴포넌트: 모든 요소를 하나의 컴포넌트에 넣음 | B컴포넌트: 여러 컴포넌트로 나누어줌

Pfofiler로 성능 측정했을 때 A컴포넌트가 1.3ms, B컴포넌트가 2.8ms로 나누지 않은 게 성능이 더 좋게 나왔다.

이유는 input에 작성하는 글만 렌더링 되어야 하는데, 리스트까지 모두 렌더링이 되고 있었다.(확장프로그램의 Components -> Highlight updates when components render 를 체크하면 확인할 수 있다.)

즉 렌더링 되지 않아도 되는 부분까지도 렌더링이 돼서 성능이 안 좋게 나왔다.

React.memo

위 문제가 있는 B 컴포넌트를 React.memo로 성능 최적화를 해본다.

import React from 'react';

const ListItem = React.memo(({ post }) => {
  return (
    <li key={post.id}>
      <p>{post.title}</p>
    </li>
  );
});

const List = React.memo(({ posts }) => {
  return (
    <ul>
      {posts.map((post) => (
        <ListItem
          key={post.id}
          post={post}
        />
      ))}
    </ul>
  );
});

const Message = React.memo(({ message }) => {
  return <p> {message} </p>;
});

const B = ({ message, posts }) => {
  return (
    <div>
      <h1>B components</h1>
      <Message message={message} />
      <List posts={posts} />
    </div>
  );
};

export default B;

위 코드와 같이 수정하고 처음과 같은 방식으로 테스트했는데, A는 1.7ms, B는 0.1ms로 성능이 좋아졌다.

React.memo() 란?

컴포넌트가 React.memo()로 둘러 쌓여 있다면, 처음 컴포넌트를 렌더링 하고 결과를 메모이징(Memoizing)한다.

그리고 다음 렌더링 시 Props가 같으면 메모이징 된 내용을 재사용한다.

Memoization은 주어진 입력 값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행(캐시 된 결과를 반환)해서 컴퓨터 프로그램 속도를 높이는데 주로 사용되는 최적화 기술입니다.

React.memo()를 사용할 때는 Profiler를 통해 성능 개선의 여지가 있을 경우에 사용한다. 너무 의존하면 버그 유발 가능성이 있다.

얕은 비교

숫자, 문자열 등 원시 자료형은 값을 비교한다.

배열과 객체 등 참조 자료형은 참조되는 위치를 비교한다.

얕은 비교가 사용되는 경우

React.memo()
state 변경이 있을 때
부모 컴포넌트가 렌더링 될 때

참고) 리액트가 리렌더링 되는 경우

state 변경이 있을 때
부모 컴포넌트가 렌더링 될 때
새로운 props가 들어올 때
shouldComponentUpdate에서 true가 반환될 때
foceUpdate가 실행될 때

최적화를 위한 방법

useCallback

컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 된다.

똑같은 함수를 렌더링 될 때마다 계속 다시 만드는 것은 좋은 현상이 아니다.

특히나 자식 컴포넌트가 부모 컴포넌트의 함수를 똑같이 가지고 있다면, 같은 함수를 계속 다시 만들게 된다.

이 문제를 해결하기 위해 useCallback()으로 해결할 수 있다.

메모이제이션된 함수를 반환하는 함수

const textFunction = useCallback(() => {}, []);

의존성 배열(usecallback의 마지막 인수인 [])이 바뀌지 않는다면 메모이제이션된 함수를 사용한다.

useMemo

사용 예시

function component({a,b}) {

const result = useMemo(() => compute(a,b), [a,b]);

return <div>{result}</div>

}

[패스트캠퍼스] 웹 개발 강의(AWS 배포)

Rosie, Lee — Sun, 23 Apr 2023 18:34:10 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다.

AWS

서버 준비

배포를 위해 클라우드 혹은 서버환경을 구성하는데, 여기서는 AWS EC2를 가지고 서버 구성을 한다.

AWS > 컴퓨팅 > EC2 > 상단 오른쪽에 리전도 꼭 서울로 체크
인스턴스 = 컴퓨터
- 인스턴스 시작은 컴퓨터를 하나 만드는 것이다. 여기다 운영체제를 설치, 성능 선택 등 할 수 있다.
키페어(접속을 위한 키) 생성
- 키를 잃어버리면 접속할 수 없으니 잘 관리해야 한다.
웹사이트 제공용이니 SSH, HTTP, HTTPS 트래픽 허용 모두 체크한다.

설정 값 스크린샷

퍼블릭 IPv4 주소가 서버의 IP이다.

코드 수정

기존에 python으로 작업한 코드에서 host와 port를 수정해줘야 한다.

# 다른 주소로도 접속할 수 있도록 설정
# 0.0.0.0 = 모든 주소로 접속할 수 있다.
# 웹사이트는 기본적으로 사용하는 포트가 80이다.
app.run(host='0.0.0.0', port='80')

서버에 소스코드 업로드

소스코드 업로드를 위해 Filezilla 설치해서 SFTP 방식으로 업로드할 수 있다.

또는 ssh로 서버 접속하여 옮길 수도 있다.(vscode의 Remote - SSH 확장프로그램을 사용)

서버에 필요한 패키지 설치

소스코드를 업로드하고 나서 EC2 서버 접속(AWS 인스턴스에서 연결 버튼 클릭해서 연결도 가능)해서 필요한 패키지를 설치한다.

sudo pip3 install flask Flask-PyMongo

MongoDB 설치

설치는 MongoDB의 문서를 참고해서 한다.

https://www.mongodb.com/docs/v4.4/tutorial/install-mongodb-on-amazon/

Install MongoDB Community Edition on Amazon Linux — MongoDB Manual

Docs Home → MongoDB Manual MongoDB AtlasMongoDB Atlas is a hosted MongoDB service option in the cloud which requires no installation overhead and offers a free tier to get started.Use this tutorial to install MongoDB 4.4 Community Edition on Amazon Linux

www.mongodb.com

vim /etc/yum.repos.d/mongodb-org-4.4.repo

vim에서 아래 내용 붙여 넣고 저장(ESC클릭 누르고 -> :wq)

[mongodb-org-4.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/amazon/2/mongodb-org/4.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.4.asc

mongoDB 설치

sudo yum install -y mongodb-org

monogDB 시작

sudo systemctl start mongod

실행 됐는지 확인(active(runngin) 나오면 실행 확인)

sudo systemctl status mongod

python3 실행(리눅스에는 python2와 python3가 기본적으로 설치되어 있어서 3를 꼭 명시해 줘서 실행해야 한다.)

sudo python3 app.py

그러면 IP가 생성된다. 그 IP로 접속이 가능하다.

백그라운드에서 실행

그런데 python3를 종료하면 다시 접속이 안된다.

python3가 계속 실행 중이어야 된다.

그래서 nohub을 사용한다.

sudo nohup python3 app.py &

다시 IP로 접속하면 정상 동작함

도메인 연결

네임서버 관리에서 A레코드(웹사이트 연결) 추가한다. (호스트 추가도 가능하다 (ex: www))

연결 IP에 python3 실행했던 IP로 연결한다.

[패스트캠퍼스] 웹 개발 강의(Flask)

Rosie, Lee — Sat, 22 Apr 2023 15:32:48 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다.

파이썬으로 웹개발을 시작할 수 있는 프레임워크는 Flask 또는 장고(Django)가 있다.

그중에 Flask(Micro Framework)를 사용해 본다.

가볍고 빠르고 쉽게 접근 가능하다.
라우팅을 직관적으로 쉽게 할 수 있다.
data를 html 코드에 렌더링 하는데 유용하다.

아래에서 설명하는 대로 연습해 본다.

https://flask-docs-kr.readthedocs.io/ko/latest/quickstart.html

빠르게 시작하기 — Flask 0.11-dev documentation

웹 어플리케이션에 있어서 클라이언트에서 서버로 보내는 데이타를 처리하는 것은 중요한 일이다. Flask에서 이 정보는 글로벌한 request 객체에 의해 제공된다. 여러분이 파이썬 경험이 있다면,

flask-docs-kr.readthedocs.io

Flask 설치

pip3 install flask

응답을 만드는 방법 2가지

render_template은 html 파일을 렌더링 해주는 함수(html 파일을 응답해 줌)
1. 루트에 templates 폴더를 만들어서 html 파일을 생성한다. Flask에서 정의해 놓은 이름이므로 오타가 나지 않도록 주의하자
2. 그리고 그 폴더 안에 index.html 파일을 만들어서 레이아웃을 만든다.
3. 파이썬 파일에서 아래와 같이 render_template 함수로 hello_wordld.html을 적어주면, html 렌더링을 해준다.
jsonify는 데이터 형식을 json형식의 파일로 변환해주는 함수(json 데이터를 응답해 줌)
1. jsonify(오브젝트나 딕셔너리와 같은 객체) 이렇게 해주면 json 형식으로 변환해서 응답해 준다.

from flask import Flask, render_template, jsonify

app = Flask(__name__)

@app.route('/')
def hello_world(): # define의 약자이고 함수를 만들 때 사용한다
    return render_template('hello_world.html')

@app.route('/fs')
def fs():
    res = []
    for i in range(10):
        res.append(
            {"title": str(i) + " title"}
        )
    return jsonify(res)

 if __name__ == '__main__':
    app.run('localhost', port=5001)

기본 포트는 5000번 포트로 열면 403 에러가 나서 5001번 포트를 지정해 주었다.

그리고 css, 혹은 js 파일 등은 static 폴더를 만들어서 넣어주면 된다. 이것도 Flask에서 정의해 놓은 이름이기 때문에 오타가 없도록 주의하자

flask-pymongo 설치

POST 작성을 위해 mongodb를 유용하게 사용할 수 있는 패키지를 설치한다.

pip3 install flask-pymongo

from flask_pymongo import PyMongo
app = Flask(__name__)
app.config['MONGO_URI'] ='mongodb://localhost:27017/local' # local DB 사용을 위한 연결
mongo = PyMongo(app)

// 아래와 같이 사용하여 쉽게 db에서 내용을 찾고, 가지고 올 수 있다
// mongo.db['디비명'].find()
// mongo.db['디비명'].insert_one({})

눈 내리는 효과

눈 내리를 javascript 효과를 만든 코드를 활용하여 적용한다.

https://github.com/hyperstown/pure-snow.js

GitHub - hyperstown/pure-snow.js: Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in

Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in every modern browser. - GitHub - hyperstown/pure-snow.js: Snowfall effect written in pure JavaScript....

github.com

js 파일과 css 파일, 그리고 index.html에 사용한 부분을 확인하고 똑같이 적용해 준다.

https://github.com/hyperstown/pure-snow.js/blob/master/pure-snow.js

GitHub - hyperstown/pure-snow.js: Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in

Snowfall effect written in pure JavaScript. No additional libraries, no dependencies. Works in every modern browser. - GitHub - hyperstown/pure-snow.js: Snowfall effect written in pure JavaScript....

github.com

다음 map 쉽게 적용하기

다음 지도에서 적용할 곳을 검색한 후 HTML 태그 복사하여 그대로 사용하면 된다.

이미지 업로드 기능 적용하기

먼저, 파일 전달을 위해 form에 enctype = "multipart/form-data"로 변경해 준다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

HTMLFormElement: enctype property - Web APIs | MDN

The HTMLFormElement.enctype property is the MIME type of content that is used to submit the form to the server. Possible values are:

developer.mozilla.org

input type의 file을 만들고 전달한다.

import os # 경로를 표현하기 위해 사용하는 패키지

...

# 파일 저장
fileinfo = request.files['image']
filepath = os.path.dirname(os.path.abspath(__file__))
filepath = os.path.join(filepath, 'static')
fileinfo.save(os.path.join(filepath, fileinfo.filename))

...
# db에 저장
product_db.insert_one({
	'image': fileinfo.filename
})

...

저장이 됐으면 리스트에도 출력하도록 추가

이미지가 없을 수도 있으니 if문으로 예외처리도 한다.

[강의 스크린샷]

그 외 사용한 라이브러리

우편번호 서비스(다음 카카오)

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

이미지 슬라이더

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

아이콘 사용처

https://pictogrammers.com/library/mdi/

Material Design Icons - Icon Library - Pictogrammers

The original. Following Google's Material Design guidelines for system icons, MDI is our largest library, touting over 6500 unique icons!

pictogrammers.com

WYSIWYG

https://quilljs.com/

Quill - Your powerful rich text editor

Sailec Light Sofia Pro Slabo 27px Roboto Slab Inconsolata Ubuntu Mono Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any ne

quilljs.com

[패스트캠퍼스] 프론트엔드 강의 학습일지(React 동작 기록과 배포)

Rosie, Lee — Fri, 21 Apr 2023 23:45:36 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

Tic Tac Toe 앱 만들기

동작에 대한 기록 저장하기

이전에 만들던 Tic Tac Toe(https://rosylee.tistory.com/20) 앱을 이어서 진행한다.

이번에는 보드에 스퀘어를 누를 때마다 X나 O가 표시되는데, 이것을 저장하여 기록으로 남기는 기능을 추가한다.

핵심은 스퀘어를 누를 때 배열의 복사본(slice())을 만들어서 동작에 대한 기록 저장이 가능하다는 것이다.

History Strate는 Board 컴포넌트와, Square 컴포넌트 둘 다 필요하기 때문에, 최상위 단계인 App에 만들어준다.

기존 Board.js에 만들었던 state를 App.js에 옮겼다.

과거의 이동 표시하기

moves라는 함수를 만들어서 화면에 뿌려준다.

const moves = history.map((step, index) => {
  const desc = index ? 'Go to move #' + index : 'Go to game start';
  return (
    <li>
      <button>{desc}</button>
    </li>
  );
});

아래와 같은 에러가 발생하는데, key(고유값)을 지정해 주면 해결된다.

여기서 고유 값은 index로 사용할 수 있다.

const moves = history.map((step, index) => {
  const desc = index ? 'Go to move #' + index : 'Go to game start';
  return (
    <li key={index}>
      <button>{desc}</button>
    </li>
  );
});

JSX Key 속성

리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야합니다. 키는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 됩니다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 합니다.

가상돔 비교해서 파악한 후 바뀐 부분만 실제 돔에 적용해주는데, 리스트를 나열할 때 바뀐 부분을 찾으려면 key를 이용해서 인식한다. key로 index는 비추천한다. 추가되거나 제거되면 변경되기 때문이다.

전개 연산자(Spread Operator)

ES6에서 추가된 기능

객체나 배열의 값을 다른 객체, 배열로 복제하거나 옮길때 사용한다.

... 으로 사용한다

객체는 객체 자체가 아닌 각각의 값이 할당된다.

const obj1 = {
	A: 'a',
    B: 'b'
};
const obj2 = {
	C: 'c',
    D: 'd'
};

const spreadObj = {...obj1, ...obj2};
console.log(spreadObj); // {A: 'a', B: 'b', C: 'c', D: 'd'};


const obj = {obj1, obj2};
console.log(obj);
/*
{
    "obj1": {
        "A": "a",
        "B": "b"
    },
    "obj2": {
        "C": "c",
        "D": "d"
    }
}
*/

기존 배열을 보존할 수 있다.

const arr1 = [1,2,3];
const arr2 = arr1.reverse();
console.log(arr1); // [3,2,1]
console.log(arr2); // [3,2,1]

// 전개 연산자 사용하면 기존 배열을 보존해준다.
const arr3 = [1,2,3];
const arr4 = [...arr3].reverse();
console.log(arr3); // [1,2,3]
console.log(arr4); // [3,2,1]

git 배포

작업 순서

Working Directory ---(git add)---> Staging Area ---(git commit)---> Git repository(LOCAL) ---(git push)---> Git repository(REMOTE)

git 명령어

// 현재 디렉토리 상의 모든 변경 내용을 스테이징 영역에 추가
giit add .


// 스테이징 영역에 있는 소스 코드를 로컬 저장소에 메시지와 함께 저장
git commit -m "commit message"


// main 브랜치 설정
git branch -M main


// 로컬 git 저장소와 github remote(원격) 연결
git remote add origin {깃헙레포지토리주소}


// 로컬 git 저장소에 있는 소스 코드를 github 저장소로 push(local의 main branch에서 git push -u origin main이라고 치면, local의 main과 remote(orgin)의 main 브랜치와 연결된다.)
// 이때 -u는 upstream을 의미(upstream은 git repository끼리 동기화할 때 사용되는 용어이다)
// 한 번 -u를 달아서 커맨드를 날리면 이후엔 브랜치명을 생략하고 git push만 해도 된다.
// downstream 이란 용어도 있다.
git push -u origin main

소스코드를 업로드 했다면, 배포를 해본다.

먼저, gh-pages 모듈을 사용한 React 웹사이트 배포

모듈 설치 방법

npm install gh-pages --save-dev

package.json에 hompage url을 작성해준다.

https:// {깃허브유저이름}.github.io/{저장소이름}/

package.json 배포를 명령어 입력을 위해 script에 "deploy": "gh-pages -d build", 추가

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "gh-pages -d build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

그리고 build 폴더 생성

npm run build

배포

npm run deploy

npm run deploy

배포가 완료되면(Published) gitub 저장소에서 gh-pages 브랜치 생성되고, Settings > Pages에 배포된 경로가 나온다.

[패스트캠퍼스] 프론트엔드 강의 학습일지(React 함수형 컴포넌트)

Rosie, Lee — Fri, 21 Apr 2023 11:46:39 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

React Hooks

리액트 생명주기가 있다.

시작 할 때(Mounting)
시작하고 난 이후(Updating)
컴포넌트가 더 이상 사용하지 않을 때(Unmounting)

이러한 중요한 생명주기를 함수형 컴포넌트에선 사용하지 못해서, 클래스 컴포넌트로 사용해 왔다.

하지만 React Hooks가 업데이트되어서 함수형 컴포넌트에서도 생명주기를 사용할 수 있게 되었다.

함수형 컴포넌트의 장점

useEffect를 사용해서 Hooks(여러 가지의 생명주기를 간결하게 사용)를 사용할 수 있다.
state 업데이트는 const [getter, setter(state를 정하는 함수)] = useState("") 이런 식으로 하고, getter를 이용해서 state를 업데이트할 수 있다.
HOC 컴포넌트를 Custom React Hooks로 대체할 수 있다.
- HOC(Higher Order Component): 재사용 가능한 로직만을 분리해서 컴포넌트로 만드는 방식이다.
- HOC 컴포넌트 사용 시 많은 Wrapper가 생길 수 있는 문제점이 있다.
- 이러한 문제점을 Custom React Hooks로 대체하면 Wrapper로 감싸주는 게 아니라 넣어서 사용하면 돼서 Wrapper가 많아지는 문제를 해결할 수 있다.

[강의 중 스크린샷] 클래스와 함수형의 코드 차이점

[강의 중 스크린샷] HOC컴포넌트의 많은 Wrapper의 문제점

클래스 컴포넌트와 함수형 컴포넌트의 비교

Class Component

많은 기능 제공
긴 코드 양
복잡한 코드
더딘 성능

Functional Component

적은 기능 제공
짧은 코드
심플한 코드
빠른 성능

Tic Tac Toe 앱

함수형 컴포넌트로 변경

이전에 만들었던 앱(https://rosylee.tistory.com/20)에 클래스형 컴포넌트를 함수형 컴포넌트로 변경한다.

코드를 작성할 때 Snippet을 활용하면 자동완성 코드로 빠르게 생성할 수 있다.

rafce // react arrow function export
useStateSnippet // useState

useState

useState를 사용하는 두 가지 방식이 있다.

setNumber(number + 1): 한 번만 실행
setNumber(prev => prve +1): 코드마다 실행

아래 코드에서 확인할 수 있다.

import React, { useState } from 'react';
import Square from './Square';
import './Board.css';

const Board = () => {
  const [squares] = useState(Array(9).fill(null));
  const [number, setNumber] = useState(0);

  const handleClick = (i) => {
    setNumber(number + 1);
    setNumber(number + 1);
    console.log(number); // 위에서 1을 두번 더했지만 한번씩만 실행됨

    // setNumber((prev) => prev + 1);
    // setNumber((prev) => prev + 1);
    // console.log(number); // 두번 더한 값이 실행됨
  };

  const renderSquare = (i) => {
    return (
      <Square
        value={squares[i]}
        onClick={() => handleClick(i)}
      />
    );
  };

  return (
    <div>
      <div className="status">Next Play: X, O</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      ...
    </div>
  );
};

export default Board;

setNumber(numver + 1)로 사용한 거는 두 번 더했지만 한 번씩만 실행돼서 console.log에 0,1,2,3... 이런 식으로 찍히고

setNumber(prev => prev + 1)로 사용한거는 두 번 더해진 값이 실행돼서 console.log에 0,2,4,6... 이렇게 찍힌다.

두 가지 방식의 차이점을 알아두자.

- 강의 중 소개해주신 유용한 확장 프로그램

다음 라인을 미리 예상해 주는 프로그램이다.

https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more - Visual Studio Marketplace

Extension for Visual Studio Code - JavaScript, Python, Java, Typescript & all other languages - AI Code completion plugin. Tabnine makes developers more productive by auto-completing their code.

marketplace.visualstudio.com

[패스트캠퍼스] 웹 개발 강의(MongoDB)

Rosie, Lee — Thu, 20 Apr 2023 23:23:12 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다.

MongoDB

설치하기

https://www.mongodb.com/

MongoDB: The Developer Data Platform

Get your ideas to market faster with a developer data platform built on the leading modern database. MongoDB makes working with data easy.

www.mongodb.com

강의에서는 사이트에서 다운로드하는 걸로 설치함

mac은 brew를 이용하여 설치한다.

brew tab mongodb/brew
brew install mongodb-community@4.4

그런데 설치하는데 아래와 같이 오류가 났다.

Error: An exception occurred within a child process:
  CompilerSelectionError: mongodb/brew/mongodb-database-tools cannot be built with any available compilers.
Install GNU's GCC:
  brew install gcc

오류 메시지에서 gcc를 설치하라고 해서 설치하고, 다시 MongoDB 설치를 했는데 또 아래와 같은 오류가 났다.

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
Error: Failure while executing; `/usr/bin/ld -version_details` exited with 1. Here's the output:

그래서 구글링 해보니 xcode command line 설치가 되지 않아서 생긴 오류라고 해서 xcode를 설치했다.

참고: https://www.mongodb.com/docs/v4.4/tutorial/install-mongodb-on-os-x/#run-mongodb-community-edition

xcode-select --install

설치 완료하고 다시 MongoDB 설치하니 완료되었다!

MongoDB 시작

MongoDB의 기본 포트인 27017로 로컬서버가 구동된다.
http://localhost:27017

brew services start mongodb-community@4.4

MongoDB 종료

brew services stop mongodb-community@4.4

brew로 서비스 중인 리스트 확인

brew services list

brew services list

MongoDB Compass로 컬렉션 추가하는 등 다양한 데이터 관리를 할 수 있지만, 터미널에서도 할 수 있다.

먼저, 터미널에서 서버를 시작하고, mongo를 활성화해 준다.

- 서버 시작

brew services start mongodb-community@4.4

- connect

mongo

위 명령어를 입력하면 > 활성화된다.

만약 안된다면, .zshrc 파일을 수정해줘야 한다.
아래 명령어로 작성해야 할 내용을 확인한다.
brew info mongodb-community@4.4

If you need to have mongodb-community@4.4 first in your PATH, run:
echo 'export PATH="/usr/local/opt/mongodb-community@4.4/bin:$PATH"' >> ~/.zshrc
To restart mongodb/brew/mongodb-community@4.4 after an upgrade:
brew services restart mongodb/brew/mongodb-community@4.4
Or, if you don't want/need a background service you can just run:
/usr/local/opt/mongodb-community@4.4/bin/mongod --config /usr/local/etc/mongod.conf
라는 메시지를 확인하였다.

.zshrc 파일을 열어서 export PATH="/usr/local/opt/mongodb-community@4.4/bin:$PATH 추가하고 저장해주거나
명령어로 echo 'export PATH="/usr/local/opt/mongodb-community@4.4/bin:$PATH"' >> ~/.zshrc 입력한다.
그리고 brew services restart mongodb/brew/mongodb-community@4.4 로 서비스를 재시작해준다.
그래도 mongo가 안되면 터미널을 껐다가 다시 킨 후 서버 시작해 준다.
이제 mongo 연결이 가능하다.

- 데이터베이스 생성 및 전환

use 데이터베이스명

- 데이터베이스 확인

show dbs

이 외 다른 명령어는 아래에서 확인할 수 있다.

https://poiemaweb.com/mongdb-basics-shell-crud

MongoDB Shell - CRUD | PoiemaWeb

MongoDB Shell method를 사용한 CRUD의 기본

poiemaweb.com

이제 본격적으로 파이썬을 이용해서 데이터를 다뤄본다.

파이썬 pymongo 설치

pymongo를 설치하고 documentation을 확인하면서 개발한다.

pip3 install pymongo

https://pymongo.readthedocs.io/en/stable/tutorial.html

Tutorial — PyMongo 4.3.3 documentation

Tutorial This tutorial is intended as an introduction to working with MongoDB and PyMongo. Prerequisites Before we start, make sure that you have the PyMongo distribution installed. In the Python shell, the following should run without raising an exception

pymongo.readthedocs.io

데이터 조회하기

먼저 테스트로, local의 collection인 startup_log에 있는 내용을 조회해 본다.

from pymongo.mongo_client import MongoClient

client = MongoClient('localhost', 27017)
db = client.local

collection = db.startup_log
rows = collection.find()

for row in rows:
  print(row)

그리고 이번엔 새로운 컬렉션을 만들어서 데이터를 조회해 본다.

- 컬렉션 만들기

Create collection 클릭해서 만들어준다.

- 데이터 넣기

from pymongo.mongo_client import MongoClient

client = MongoClient('localhost', 27017)
db = client.local

collection = db.fastcampus
rows = collection.find()

# 데이터 넣기(JSON과 비슷한 딕셔너리로 넣는다.)
collection.insert_one({
  "title": "fastcampus",
  "content": "hello!"
})

for row in rows:
  print(row)

데이터가 잘 들어갔는지 확인

- 조건을 걸어서 데이터 찾기

from pymongo.mongo_client import MongoClient

client = MongoClient('localhost', 27017)
db = client.local

collection = db.fastcampus

# 조건을 걸어서 데이터 찾기
row = collection.find_one({'title': 'fastcampus'})
print(row)

웹 스크래핑 결과 저장하고 출력하기

이전에 했던 YES24 크롤링 코드(https://rosylee.tistory.com/22)를 이용해서 MongoDB 에 연동해 본다.

import requests
from bs4 import BeautifulSoup 
from pymongo.mongo_client import MongoClient

client = MongoClient('mongodb://localhost:27017/') # DB 접속
db = client.local # DB 선택

res = requests.get('http://www.yes24.com/24/Category/BestSeller')
soup = BeautifulSoup(res.text, "html.parser")

for i in range(40):
    index = str(i+1)
    if index == "19":
        index = "19_line"
    elif index == "20":
        index = "20_line"
    title = soup.select_one("#bestList > ol > li.num"+ index +" > p:nth-child(3) > a")

    # 새 컬렉션을 생성할 때는 컬렉션이 이미 있는 것처럼 키로 접근하여 사용하면 자동으로 생성된다.
    db['yes24'].insert_one({
        'Title': title.text
    })

위 코드를 실행하고, 데이터가 잘 들어갔는지 MongoDB Compass로 확인한다.

추가된 데이터 확인

추가된 데이터 조회해 보기

import requests
from bs4 import BeautifulSoup 
from pymongo.mongo_client import MongoClient

client = MongoClient('mongodb://localhost:27017/') # DB 접속
db = client.local # DB 선택
collection = db.yes24 # Collection 선택
rows = collection.find() # 조회
for row in rows:
    print(row)

터미널로 잘 가져오는 걸 확인하였다.

[패스트캠퍼스] 웹 개발 강의(파이썬으로 하는 크롤링)

Rosie, Lee — Thu, 20 Apr 2023 11:31:31 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 웹 개발 강의를 듣고 정리한 내용입니다.

웹사이트 구성원리

주소(www.naver.com)를 입력하면 실제 숫자(IP)로 이루어진 주소로 컨텐츠 요청(네이버 서버)하면 서버에서 내용 확인하고 사용자 브라우저 HTML을 보내고 브라우저가 HTML을 해석해서 화면에 보여주는 형식으로 구성된다.

서버와 통신

Ajax 통신이 왜 필요할까?

매번 페이지가 새로고침되면 불편한 상황이 있다.
이런 상황에서 Ajax를 통해 페이지는 변경되지 않고 정보가 변경(서버와 통신)된다.

API

데이터를 주는 주소로 제공해주는 인터페이스

테스트해볼 수 있는 API

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month.

jsonplaceholder.typicode.com

https://jsonplaceholder.typicode.com/posts (게시판 글 테스트용)

Python 설치

백엔드 프로그램 만들기와 크롤링(스크랩핑)하여 데이터베이스에 저장하기를 해봅니다.

먼저 파이썬으로 크롤링 하는 방법을 배웁니다.

파이썬 설치 방법은 두 가지가 있다.

첫 번째는 파이썬 공식 웹사이트에서 설치한다.

https://www.python.org/

Welcome to Python.org

The official home of the Python Programming Language

www.python.org

위 이미지 표시된 버튼을 클릭한다.
windows라면 설치 파일 실행할 때 확인되는 Add Python 3.10 to PATH 를 체크하고 설치한다. 체크하지 않으면 vscode에서 python의 경로를 알 수 없어서 python 명령어를 사용할 수 없다.

두 번째는 아나콘다 를 설치한다.

아나콘다로 설치하면 개발 환경도 같이 설치되고, 아나콘다 내에서 가상 환경을 사용할 수 있어서, 이 방식으로 설치했다.

https://www.anaconda.com/download

Free Download | Anaconda

Anaconda is the birthplace of Python data science. We are a movement of data scientists, data-driven enterprises, and open source communities.

www.anaconda.com

vscode에서 파이썬을 사용할 수 있도록 확장 프로그램 설치를 한다.

https://marketplace.visualstudio.com/items?itemName=ms-python.python

Python - Visual Studio Marketplace

Extension for Visual Studio Code - IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), Jupyter Notebooks, code formatting, refactoring, unit tests, and more.

marketplace.visualstudio.com

파이썬이 잘 설치되었는지 터미널에서 확인해본다.

python

위 명령어를 입력하고, >>> 이렇게 표시되면 파이썬 실행 중이다.

실행 중에서 나가려면 아래 명령어 입력한다.

quit()

웹 스크래핑(Crawling)

크롤링을 하기 위해 웹에 요청하는 방법과 분석하는 방법을 배운다.

주의 사항
- 너무 많은 요청을 하지 않고 한 번만 데이터를 가지고 오는 방식으로 한다.
- 이유는 yes24의 서버에 부담이 가고, 공격으로 여겨서 크롤링이 막힐 수 있다.

크롤링 할 웹사이트 분석하기

웹사이트에서 크롤링할 내용의 구조를 분석한다.
구조는 크롬에서 해당하는 내용에 마우스 오른쪽 클릭하고 Copy > Copy selector 를 통해 확인한다.
해당 강의 에서는 YES24의 베스트 책의 제목을 기준으로 한다.

구조 분석을 위한 작업

분석 결과 베스트 책 제목들이 아래와 같은 코드들이 반복되는 걸 확인했다.

#bestList > ol > li.num1 > p:nth-child(3) > a
#bestList > ol > li.num2 > p:nth-child(3) > a
#bestList > ol > li.num3 > p:nth-child(3) > a

이제 패키지의 도움을 받아 크롤링해본다.

참고사항: 파이썬의 여러 패키지들이 있는 곳이다. (pip로 설치하는 것들)
https://pypi.org/

크롤링을 하기 위해 두 가지의 패키지를 설치한다.

requests 패키지(HTTP 라이브러리, 웹 요청을 만드는 라이브러리)
beautifulsoup4(웹 페이지에서 정보를 쉽게 긁어낼 수 있게 해주는 라이브러리)

https://pypi.org/project/requests/

requests

Python HTTP for Humans.

pypi.org

https://pypi.org/project/beautifulsoup4/

beautifulsoup4

Screen-scraping library

pypi.org

Windows 설치 방법

pip install beautifulsoup4

pip install requests

Mac 설치 방법

에는 기본적으로 파이썬이 설치되어 있기 때문에, 내가 설치한 python과 구분하기 위해 3을 작성해서 설치해준다.

php3 install beautifulsoup4

pip3 install requests

크롤링하려 print 해보기

import requests
from bs4 import BeautifulSoup # bs4는 BeautifulSoup의 4버전 안에서 쓰겠다는 의미

res = requests.get('http://www.yes24.com/24/Category/BestSeller')
# print(res.text) 'http://www.yes24.com/24/Category/BestSeller'의 전체 내용을 긁어옴

# BeautifulSoup은 태그 특징을 이용해 찾을 수 있도록 도와주는 라이브러리
soup = BeautifulSoup(res.text, "html.parser")

for i in range(40):
    index = str(i+1) # 파이썬은 같은 타입끼리 더하지 않으면 에러가 나기 때문에 문자열로 바꾸어줌 -> str()
    # 예외처리
    if index == "19":
        index = "19_line"
    elif index == "20":
        index = "20_line"
    
    title = soup.select_one("#bestList > ol > li.num"+ index +" > p:nth-child(3) > a")
    print(title.text)
# select_one: 조건에 맞는 태그 하나만 가지고 오겠다는 의미
# select: 조건에 맞는 모든 태그를 가져옴

select_one할 때 클래스명이 아래와 같이 다른 부분이 있어서 예외 처리하였다.

vs code에서 작성된 코드를 실행한다.

그럼 아래와 같이 책 제목 내용이 잘 출력된다.

[패스트캠퍼스] 프론트엔드 강의 학습일지(React 시작하기)

Rosie, Lee — Wed, 19 Apr 2023 18:20:18 +0900

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

리액트는 무엇일까?

리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 사용한다.
vue.js와 Angular는 프레임워크이고, 리액트는 라이브러리이다.
- 프레임워크: 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것(프레임워크 안에 여러 모듈이 있다)
- 라이브러리: 특정 기능을 모듈화 해놓은 것
리액트는 View를 담당하는데, 그외에 Model과 Controler를 조작하기 위해서는 여러 모듈을 사용하게 된다.
- 라우팅(페이지이동): react-router-dom
- 상태관리: redux, mobx, recoil
- 테스트: Jest, Mocha

Node.js가 필요한 이유?

프로젝트를 개발할때 필요한 모듈인 바벨이나 웹팩 등이 Node.js로 사용하기 때문이다.

Node.js 설치는 아래 블로그에서 작성하였으니, 참고해 주세요.

https://rosylee.tistory.com/18

[패스트캠퍼스] 프론트엔드 강의 학습일지(Node.js와 Git)

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다. Node.js Node.js는 Chrome V8 JavaScript 엔진(자바스크립트 문법을 해석하는 엔진)으로 빌드된 JavaScript 런타임

rosylee.tistory.com

브라우저가 그려지는 원리와 가상돔

리액트의 특징은 가상돔을 사용한다.

웹 페이지 빌드 과정(Critical Rendering Path CRP)

서버에서 HTML 문서를 브라우저에 전달하고, 브라우저가 문서에 따라 화면에 그리기 위해 HTML->DOM생성, CSS 랜더링 등을 해서

DOM에 변화(인터렉션)가 발생하면, Render Tree를 재생성된다. 이러면 성능과 비용이 커지는 문제가 발생한다.

이를 해결하기 위해 나온 것이 가상돔(Virtual Dom)이다.

가상 DOM은 실제DOM을 메모리에 복사해 둔 것이다.

이전 DOM과 비교해서 바뀌는 것만 가상 DOM에 렌더링(Diffing)이 되고, 바뀐 부분만 실제 DOM에 적용(재조정)한다.

이렇게 되면, 많은 요소가 바뀌더라도 한꺼번에 묶어서 한 번에 실제 DOM으로 적용되므로 DOM 조작 비용이 줄어들 수 있다.

리액트 앱 설치

https://ko.reactjs.org/docs/create-a-new-react-app.html

새로운 React 앱 만들기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

터미널에서 아래 명령어를 입력한다.

npx create-react-app {폴더 이름}

만약 폴더를 생성하고, 현재 폴더에 설치하려면 아래와 같은 명령어로 입력하면 된다.

 npx create-react-app ./

npx란?

노드 패키지 실행을 도와주는 도구이다.

npm 레지스트리에는 많은 라이브러리들이 있다.
그중 create-react-app이라는 라이브러리를 사용해서 설치하는 것이다.

위와 같은 명령어로 설치하면, 아래 이미지처럼 되고 웹팩과 바벨등 여러 node module이 함께 설치된다.

웹팩(Webpack)이란?

오픈 소스 자바스크립트 모듈 번들러이다.
여러 개의 파일을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다.
로딩에 대한 네트워크 비용을 줄일 수 있다.
모듈 단위로 개발이 가능하여 가독성과 유지보수가 쉽다.

바벨(Babel)이란?

최신 자바스크립트를 지원하지 않는 브라우저에도 적용이 되도록 변환시켜 주는 라이브러리이다.
최신 문법으로 개발을 할 수 있다.
- ES6의 화살표 문법을 사용하더라도, 바벨을 사용하면 ES5문법으로 변환시켜 준다.

SPA(Single Page Application)이란?

웹 사이트의 전체 페이지를 하나의 페이지에 담아서 동적으로 화면을 바꿔가며 표현하는 것이다.

HTML5의 History API를 사용해서 페이지 전환이 가능하게 합니다.

Tic Tac Toe 앱 만들기

리액트 자습서에 있는 것을 따라 만들어 본다.

https://ko.reactjs.org/tutorial/tutorial.html

자습서: React 시작하기 – React

A JavaScript library for building user interfaces

ko.reactjs.org

JSX(Javascript syntax extension)

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

A JavaScript library for building user interfaces

ko.reactjs.org

리액트에서는 HTML구조와 자바스크립트를 함께(JSX) 사용해서 UI를 나타낸다.
JSX로 작성된 코드를 바벨을 통해 변환시켜준다.
주의사항: JSX에 여러 엘리먼트 요소가 있다면, 반드시 부모 요소 하나로 감싸줘야 한다.

리액트 코드 / 바벨이 변환해 준 코드

리액트로 개발 시 유용한 vscode 확장 프로그램

https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets

ES7 React/Redux/GraphQL/React-Native snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax (forked from dsznajder)

marketplace.visualstudio.com

설치하면 축약어로 빠르고 쉽게 코드 작성이 가능하다.

코드는 파일 이름 기반으로 생성된다.

rcc(react class component) 클래스형 컴포넌트
rfc(react funtional comonent) 함수형 컴포넌트

Props(Properties)

상속하는 부모 컴포넌트로부터 자식 컴포넌트에 데이터 등을 전달하는 방법이다.
읽기 전용(immutable)으로 자식 컴포넌트에서는 변경할 수 없다.
변경하려면 부모 컴포넌트에서 state를 변경시켜줘야 한다.

State

컴포넌트 안에서 무언가 기억하기 위해 사용한다.
컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다.
state 값이 변경되면 컴포넌트는 리랜더링 된다.
클래스형 컴포넌트에는 Constructor를 사용한다.
Constructor(생성자)를 사용하면, 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해서 초기화할 수 있다.

import React from 'react';
import './Square.css';

export default class Square extends React.Component {
  // State 생성
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }
  render() {
    return (
      <button
        className="square"
        onClick={() => {
          this.setState({ value: 'X' }); // State 변경
        }}
      >
        {/* State 이용 */}
        {this.state.value}
      </button>
    );
  }
}

state의 super 키워드는?

자식 클래스 내에서 부모 클래스의 생성자를 호출할 때 사용된다.
자식 클래스 내에서 부모 클래스의 메소드를 호출할 때 사용된다.
super 키워드 이후에 this 키워드가 나와야 한다.(부모 클래스의 생성자 호출을 먼저 해야 된다)
super키워드에 props를 인자로 전달하는 이유는
- React.Componet 객체가 생성될 때 props 속성을 초기화하기 위해 부모 컴포넌트에게 props를 전달
- 생성자 내부에서도 this.props를 정상적으로 사용할 수 있도록 보장하기 위해서

강의 중 설명 스크린샷

State 보관하기

자식 컴포넌트에서 부모 컴포넌트로 옮기기

여러 개의 자식으로부터 데이터를 모으거나, 자식 컴포넌트끼리 서로 통신하려면 부모 컴포넌트에서 공유 state를 정의해야 한다.

불변성을 지키는 방법은?

참조 타입(Array, Object)은 아예 새로운 배열을 반환하는 메소드를 사용한다.

새로운 배열 반환하는 메소드: spread orerator, map, filter, slice, reduce
원본데이터 변경하는 메소드: push, splice