코딩소년 - 기술블로그

ReactJS 영화 웹 서비스 만들기

ReactJS의 장점

• Components는 HTML을 반환하는 함수이다.
• 리액트의 가장 큰 장점은 빠르다. (react는 소스코드에 처음부터 HTML을 넣지 않고, HTML에서 HTML을 추가하거나 제거하는 법을 알고 있다.) 
• 바로바로 반영된다.
• Virtual document object model (Virtual DOM)
• Jsx (Javascript + HTML) -> React에 특화된 개념
• 하나의 component만을 렌더링 해야한다.
• Props = properties 
• React magic = 인자를 한 번에 다 받아온다.

(Object 안에 props라고 불리는 한 argument의 내부이다.)

import React from 'react';

function Food({fav}) {

  return <h1>I like {fav}</h1>

}

function App() {

  return (

  <div> 

    <h1>Hello!!!</h1>

    <Food fav="kimchi"/> 

    <Food fav="ramen"/> 

    <Food fav="samgiopsal"/> 

    <Food fav="chukumi"/> 

    </div>

    );

}

export default App;

Map = 함수를 취해서 그 함수를 배열의 각 item에 적용해 

한번은 dal에게 한번은 mark에게 한 번은 lynn에게 각 연산의 결과로 배열을 만들고 각 연산의 결과 값은 항상 0이다.

Ex) 

friends.map(function(friend) {

    return friend + "❤️";

})

(4) ["dal❤️", "mark❤️", "lynn❤️", "japan guy❤️"]

friends.map(function(current) {

    console.log(current);

    return 0

})

이모지 및 기호

control + cmd + space 

npm I prop-types

state

매 순간 너가 set State를 호출할 때 마다 react는 새로운 state와 함께 render function을 호출할거야

Mounting = 태어나는 것 

Updating = 업데이트

Unmounting = 컴포넌트가 죽는 것. (페이지가 바뀔 때)

npm I gh-pages

Vscode Control c = kill the server

npm run build

Navigation

Browser Router vs HashRouter 

깃에는 해쉬라우터가 좋다고함.

https://bit.ly/3zJCfCz

이 글을 참조하자.

파이썬은 객체지향 언어이다.

그리고 객체지향을 이루는 특성들이 바로 

Class, Method, Instance 등의 요소들인데 각 각 무엇인지 

정리를 해보자!

파이썬 

class 

• 아이언맨 설계도(blueprint)

method 

• class 내에 있는 함수(function)

instance 

• 아이언맨 설계도의 결과물 

파이썬은 Method를 호출할 때, 그 method의 instance를 첫 번째 argument로 사용한다.

(self)를 엄청나게 봐왔던 이유가 이거 였구만....

Class 예제 1. 

class Car():
	wheels = 4
	doors = 4 
	windows = 4
	seats = 4

	def start(self) :
		print(self.doors)
		print(“I started”)

porche = Car()
porche.color = “Red Sexy Red”
porche.start(porche)

실행결과

4
I started

Class 예제 2.

class Car():

    def __init__(self, **kwargs):
        self.wheels = 4
        self.doors = 4
        self.windows = 4
        self.seats = 4
        self.color = kwargs.get("color", "black")
        self.price = kwargs.get("price", "$20")

    def __str__(self):
        return f"Car with {self.wheels} wheels"


porche = Car(color="green", price = "$40")
print(porche.color, porche.price)

mini =Car()
print(mini.color, mini.price)

실행결과 

green $40
black $20

Class 예제 3.

class Car():

    def __init__(self, **kwargs):
        self.wheels = 4
        self.doors = 4
        self.windows = 4
        self.seats = 4
        self.color = kwargs.get("color", "black")
        self.price = kwargs.get("price", "$20")

    def __str__(self):
        return f"Car with {self.wheels} wheels"

# class의 확장(extension)

class Convertible(Car):
    def __init__(self, **kwargs):
    
    	# method의 확장(extension)
        # super = 함수가 부모 class를 호출하는 함수이다.
        
        super().__init__(**kwargs)
        self.times = kwargs.get("time", 10)

    def take_off(self):
        return "taking off!"

    def __str__(self):
        return f"Car with no roof"


porche = Convertible(color="green", price="$40")
porche.take_off()
porche.wheels

print(porche.color)
print(porche)
print(porche.times)
print(porche.wheels)


실행결과

green
Car with no roof
10
4

결론 - django는 좋은 class 들의 모임인 것이다.