avatar

Page 29

  • React ๊ณต๋ถ€ํ•˜๊ธฐ 4 - Event

    ## ์ด๋ฒคํŠธ ๋ฆฌ์•กํŠธ์˜ ์ด๋ฒคํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ HTML์˜ ์ด๋ฒคํŠธ์™€ ๋น„์Šทํ•˜์ง€๋งŒ, ์ฃผ์˜์‚ฌํ•ญ์ด ๋ช‡๊ฐ€์ง€ ์žˆ์Šต๋‹ˆ๋‹ค. 1. ์ด๋ฒคํŠธ ๋ช…์€ ์นด๋ฉœ ์ผ€์ด์Šค๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค. `onclick` โ†’ `onClick` 2. ์ด๋ฒคํŠธ์— ์‹คํ–‰ํ•  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ณ , ํ•จ์ˆ˜ํ˜•ํƒœ์˜ ๊ฐ’์„ ์ „๋‹ฌํ•ด์•ผ ํ•œ๋‹ค. 3. DOM์š”์†Œ์—๋งŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. Custom Component๋Š”...

    2๋ถ„
  • React ๊ณต๋ถ€ํ•˜๊ธฐ 3 - Component

    ## ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ณธ์ ์ธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์ž. ```javascript import React, {Component} from 'react'; class MyComponent extends Component{ render() { return ( <div className='hello'> ...

    4๋ถ„
  • React ๊ณต๋ถ€ํ•˜๊ธฐ 2 - JSX

    ## Create-react-app ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์‹œ์ž‘ ``` yarn global add create-react-app create-react-app hello-react cd hello-react yarn start ``` ### app.js์˜ ๊ตฌ์กฐ ```javascript import React from 'react'; import logo fr...

    3๋ถ„
  • React ๊ณต๋ถ€ํ•˜๊ธฐ 1 - background

    ## ๋ฆฌ์•กํŠธ ์š”์•ฝ ๊ธฐ์กด์— ๋งŽ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ฐ˜ ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์ด ์žˆ์—ˆ๋Š”๋ฐ, ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์€ MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) ์•„ํ‚คํ…์ณ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ๋˜์—ˆ๋‹ค. ![MVC](https://mdn.mozillademos.org/files/1...

    4๋ถ„
  • Disciplined entrepreneurship

    ### ์ž‘๋™ํ•˜๋Š” ๊ฐ€์„ค์„ ๋งŒ๋“ค์–ด๋ผ โ€˜๊ฐ€์„คโ€™์ด๋ผ๋Š” ๋‹จ์–ด๋Š” ๊ธฐ์—…๊ฐ€์ •์‹ , ์ด๋…ธ๋ฒ ์ด์…˜๊ฒฝ์˜, ๊ทธ๋ฆฌ๊ณ  ์ง€๊ธˆ์˜ ํŒŒ๊ดด์ ํ˜์‹ ์— ์ด๋ฅด๊ธฐ๊นŒ์ง€ ๊ฐ€์žฅ ๋งŽ์ด ์ ‘ํ•œ ๋‹จ์–ด ์ค‘ ํ•˜๋‚˜ ์ž…๋‹ˆ๋‹ค. ๊ทธ ๋งŒํผ ๋งŽ์€ ํ•™์ž๋“ค์ด ๊ธฐ์—…์„ ๊ฒฝ์˜ํ•˜๋Š”๋ฐ ์žˆ์–ด ๊ฐ€์„ค์„ ๋งŒ๋“ค๊ณ  ์ฆ๋ช…ํ•˜๋Š” ์ผ์ด ์ค‘์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์— ๊ณต๊ฐ๋Œ€๋ฅผ ํ˜•์„ฑํ–ˆ๋‹ค๋Š” ๋œป์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฐ€์„ค์—๋Š” ์ˆ˜๋งŽ์€ ๋ณ€์ˆ˜๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ณ€์ˆ˜์—๋Š” ๊ธฐ...

    10๋ถ„
  • ์—…๋ฌด ์ž๋™ํ™” (1) - ๊ตฌ๊ธ€ ์Šคํ”„๋ ˆ๋“œ ์‹œํŠธ API ํ™œ์šฉํ•˜๊ธฐ

    ๊ตฌ๊ธ€ ์Šคํ”„๋ ˆ๋“œ ์‹œํŠธ๋ฅผ ํŒŒ์ด์ฌ์—์„œ ์กฐ์ž‘ํ•ด๋ณด์ž. ๋‚ด๊ฐ€ ํ• ์ผ์€ 1. ์Šคํ”„๋ ˆ๋“œ์‹œํŠธ๋ฅผ ์ฝ๊ณ  2. ์Šคํ”„๋ ˆ๋“œ์‹œํŠธ์— ์“ฐ๋Š” ๋‘๊ฐ€์ง€ ์ž‘์—…์ด๋‹ค. ```python import pickle import os.path from googleapiclient.discovery import build from google_auth_oauthlib.flow import Installe...

    3๋ถ„
  • ์ดˆ๋ณด๋ฅผ ์œ„ํ•œ ์›นํฌ๋กค๋ง: ๋„ค์ด๋ฒ„ ์˜ํ™” ๋Œ“๊ธ€ ํฌ๋กค๋งํ•˜๊ธฐ

    e ํŒŒ์ด์ฌ๊ณผ ํŒŒ์ด์ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ (beatifulSoup)๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋„ค์ด๋ฒ„ ์˜ํ™” ๋Œ“๊ธ€ ํฌ๋กค๋ง ํ•ด๋ณด๊ธฐ ## 1. ํฌ๋กค๋งํ•˜๋ ค๋Š” ์›นํŽ˜์ด์ง€์˜ ๊ตฌ์กฐ๋ฅผ ์‚ดํŽด๋ณด๊ธฐ ์ธํฌ๋ ˆ๋”๋ธ” ํ‰์  ๋Œ“๊ธ€ ํŽ˜์ด์ง€๋ฅผ ๋จผ์ € ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. [์—ฌ๊ธฐ](https://movie.naver.com/movie/bi/mi/point.nhn?code=136990&onlyActualPointYn=Y#po...

    14๋ถ„
  • ReactiveX) Subject

    subject๋Š” ์˜ต์ €๋ฒ„๋‚˜ observable์ฒ˜๋Ÿฌ ํ–‰๋™ํ•˜๋Š” ์ผ๋ถ€ ReactiveX๊ตฌํ˜„์ฒด์—์„œ๋งŒ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์ผ์ข…์˜ ํ”„๋ก์‹œ๋‹ค. subject๋Š” ์˜ต์ €๋ฒ„์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•˜๋‚˜์ด์ƒ์˜ observable์„ ๊ตฌ๋…ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋™์‹œ์— observable ์ด๊ธฐ๋„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•ญ๋ชฉ์„ ํ•˜๋‚˜ํ•˜๋‚˜ ๊ฑฐ์น˜๋ฉด์„œ ๋‹ค์‹œ pushํ•˜๊ณ  ์ƒˆ๋กœ์šด ํ•ญ๋ชฉ์„ pushํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด 4์ข…๋ฅ˜์˜ subject...

    2๋ถ„
  • ReactiveX) Observable

    ๋ณดํ†ต ์ผ๋ฐ˜์ ์ธ ํ”„๋กœ๊ทธ๋žจ์˜ ๊ฒฝ์šฐ์—๋Š”, ํ•˜๋‚˜์”ฉ ์ž‘์„ฑ๋œ ์ˆœ์„œ์— ๋”ฐ๋ผ ๋กœ์ง์ด ์‹คํ–‰๋˜๊ณ , ์™„๋ฃŒ๋˜๋ฉด ๋˜๋‹ค๋ฅธ ๋กœ์ง์ด ์‹คํ–‰๋˜๋Š” ๋“ฑ์˜ ์ˆœ์„œ๊ฐ€ ์žˆ์Œ์„ ์•Œ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด์™€ ๋‹ฌ๋ฆฌ ReactiveX๋Š” "Observer"์— ์˜ํ•ด ์ž„์˜์˜ ์ˆœ์„œ์— ๋”ฐ๋ผ ๋ณ‘๋ ฌ์ ์œผ๋กœ ์‹คํ–‰๋˜๊ณ  ๋‚˜์ค‘์— ๊ฒฐ๊ณผ๋‚˜ ๋‚˜์˜จ๋‹ค. ์ฆ‰ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, Observable์•ˆ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์กฐํšŒํ•˜๊ณ , ๋ณ€ํ™˜...

    3๋ถ„
  • ๋ฐœ์Œ ๊ธฐ๋ฐ˜์œผ๋กœ String์˜ ์œ ์‚ฌ๋„๋ฅผ ๋น„๊ตํ•ด ๋ณด์ž.

    ์•ž์„  ํฌ์ŠคํŒ… ํ†ตํ•ด์„œ ๋‘ String์„ ๋ฌธ์ž์—ด ๊ธฐ๋ฐ˜์œผ๋กœ ๋ถ„์„ํ•˜์˜€์„๋•Œ. ์œ ์‚ฌ๋„๋ฅผ ์–ด๋–ป๊ฒŒ ์ธก์ •ํ•˜๋Š”์ง€ ์•Œ์•„๋ณด์•˜๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์Œ์„ฑ์ธ์‹์œผ๋กœ String์„ ๋น„๊ต ํ–ˆ์„ ๋•Œ, ย ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฌธ์ œ์— ์ง๋ฉดํ•˜์˜€๋‹ค.

    4๋ถ„