TIL008_210327

keepcalmยท2021๋…„ 3์›” 28์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
8/33
post-thumbnail

TIL

๐Ÿ‘๐Ÿผ ๊ฐ์ƒ


์™œ ๋ชฉ์ฐจ ์ ์šฉ์ด ์•ˆ ๋˜์ง€?

๐Ÿ“™ ์—ดํ’ˆํƒ€ 16hour
๐Ÿ‘๐Ÿผ ์—ด๊ณต
๐Ÿ‘Ž๐Ÿผ -

๐Ÿš€ ๋ชฉํ‘œ

  • ๋…ธ๋งˆ๋“œ ์ฝ”๋” React ๋ณต์Šต (-3/27)
  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (161/682)
  • ๋งค์ผ ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (7/30, 3.27 ์™„๋ฃŒ)
  • 3.24 ๋ฐœ๊ฒฌ ๋…ธ์…˜์œผ๋กœ ์˜ฎ๊ธฐ๊ธฐ
  • ๋‚ด์ผ๋ฐฐ์›€์นด๋“œ ์‹ ์ฒญ
  • ~~18์‹œ๊ฐ„ ๋„์ „ํ•ด๋ณด๊ธฐ (16์‹œ๊ฐ„ ์ ๋‹นํžˆ ์™„๋ฃŒ)~~
  • CSS ํŒŒํŠธ ์™„๋ฃŒ, ์œ„ํ‚ค๋กœ ๋ณต์Šตํ•ด๋ณด๊ธฐ

๐Ÿ’ก TIP

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

์•Œ๊ณ ๋ฆฌ์ฆ˜ : ์ž…๋ ฅ, ์ถœ๋ ฅ, ์œ ํ•œ์„ฑ, ๋ช…๋ฐฑ์„ฑ, ํšจ๊ณผ์„ฑ
C์–ธ์–ด ๊ธฐ์ดˆ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(์–ธ์–ด)+์ž๋ฃŒ๊ตฌ์กฐ -> ์‹ค์ „ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ฐ•์ขŒ
์Šค์ผ€์ค„๊ด€๋ฆฌ, ๋„ค๋น„๊ฒŒ์ด์…˜, ๊ฒŒ์‹œํŒ

[๋งํฌ ๋ชฉ๋ก]

The Web Developer Bootcamp 2021
Taehoon CSS Grid ์„ค๋ช…
MDN Grid system
๋งˆ์šฐ์Šค ํฌ์ธํ„ฐ ํšจ๊ณผ Javascript
Bootstrap Icons
SVG Guide
Font Awsome
Icon sites
Codepen JS Airplanes
Poly.google
GreenSock ScrollTrriger
Cํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ž…๋ฌธ by๋‚˜๋„์ฝ”๋”ฉ
Jump to Python WikiDocs

๐Ÿ“ฃ The Web Developer Bootcamp 2021: 12.121-15.152

Bootstrap

Bootstrap Quick start

css ๋งํฌ ๋ณต์‚ฌ ํ›„ head์— ๋ถ™์—ฌ๋„ฃ๊ธฐ, stylesheet ์œ„์— ๋„ฃ์–ด์•ผ ๋‚ด๊บผ ์•ˆ ๋ฌปํž˜
js script closing body tag ์ „์— ๋„ฃ๊ธฐ

container ์™€ grid sytem (grid system ์‚ฌ์šฉํ•˜๋ ค๋ฉด container ํ•„์š”)
container-fluid
container-md(sm,md,lg,xl)

Typography
Blockquotes

<blockquote class ="blockquote">

Alignment
[Utility]
not component, stand alone, ๋’ค์— ์ถ”๊ฐ€ํ•˜๋ฉด ๋จ

badge
button group
alert
dismissing

โœ… ~~Bootstrap Basics Practice(Done)~~

Grid System

Every row in Bootstrap has 12 units of space, total is always 12 units
MDN Grid system


div ๋Œ€์‹  container ์“ธ ์ˆ˜ ์žˆ๊ธด ํ•˜๋‚˜ margin ์ƒ๊น€

โœ… ~~Bootstrap Grid Practice(Done)~~

<div class="container">
    <div class="row">
        <div class="col-4 bg-danger">One Third</div>
                <div class="col-8 bg-warning">Two Thirds</div></div>
                 <div class="row">
        <div class="col-3 bg-info">One Quarter</div>
                <div class="col-6 bg-warning">One Half</div>
                <div class="col-3 bg-success">One Quarter</div>
    </div>
    </div>

Responsive Bootstrap Grid

<div class="col-6">
  <!--ํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋„ 6๊ทธ๋ฆฌ๋“œ๋ฅผ ๊ณ„์† ์ฐจ์ง€ํ•œ๋‹ค-->
<div class="col-md-6">
  <!--6units๋ฅผ ์ฐจ์ง€ํ•˜๋‹ค๊ฐ€ medium ์‚ฌ์ด์ฆˆ ๋ฐ‘์œผ๋กœ ๋‚ด๋ ค๊ฐ€๋ฉด ์‚ฌ์ดํŠธ ์ „์ฒด๋ฅผ ์ฐจ์ง€ํ•œ๋‹ค-->
<div class="col-md-6 col-xl-3">
  <!--์ด์ „์—๋Š” stack, medium์‚ฌ์ด์ฆˆ๋ถ€ํ„ฐ๋Š” 6์นธ ์ฐจ์ง€, xl ์‚ฌ์ด์ฆˆ๋ถ€ํ„ฐ 3์นธ ์ฐจ์ง€-->

image fluid

container์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋ณ€ํ™”

<div class="row no-gutters"><!--nogutters:๋งˆ์ง„ ์—†์•จ ๋•Œ ์”€-->
<div class="col-xl-4 col-md-6">
  <img class="img-fluid" src="" alt="">

Grid utilities

``

``

Justify Content

``

``

Bootstrap & Forms

form input

<input type="email" class="form-control" id="email"> 

<div class="form-group">
<label for="password">Password</label>
<intput type="password" class="form-control" id="password"> </div>
<div class="form-row">
	<div class="form-group col-md-6">
		<label for="state">City</label>
      	<input type="text" class="form-control" id="city">
  	</div>
 	<div class="form-group col-md-3 c0l-6">
    	<label for="state">State</label>
		<select class="form-control" name="state" id="state">
			<option value="AL">Alabama</option>
          	<option value="AK">Alaska</option>
      	</select>
  	</div>
  	<div class="form-group col-md-3 col-6">
   		<label for="zip">Zip Code</label>
    	<input type="text" class="form-control" id="zip">
  	</div>      
</div>
<div class="form-group">
	<div class="custom-control custom-checkbox">
  		<input type="checkbox" class="custom-control-input" id="tos">
  		<label class="custom-control-label" for="tos"Sign Me Up</label>
	</div>
</div>
<button type="submit" class="btn btn-success">Register</button>
  • Bootstrap์ด ์—…๋ฐ์ดํŠธ ๋˜๋ฉด์„œ ๋” ์ด์ƒ ๋™์ž‘ ์•ˆ ๋จ

์ฒดํฌ๋ฐ•์Šค

Bootstrap Navbar

Icons

Bootstrap Icons
๊ทธ๋ƒฅ ์›ํ•˜๋Š” ๊ณณ์— ๋ฐ”๋กœ ๋„ฃ์œผ๋ฉด ๋จ

Bootstrap Utility

Bootstrap Border

Colors

Spacing

โš ๏ธ ~~optional) Musiem of Candy Project(Undone)~~

Javascript

Primitive Types

The basic building blocks
number, string, boolean, null, undefined

๐Ÿ”ธ cmd +option+ J : ๊ฒ€์‚ฌ์ฐฝ
clear(): console์ฐฝ ๊นจ๋—ํ•˜๊ฒŒ

Numbers ins javascript

js has one number type
positive numbers
negative numbers
whole number (integer) (์ •์ˆ˜)
decimal(์†Œ์ˆ˜) numbers

// ์ฃผ์„

PEMDAS: order of operation
parentheses
exponentiation and root extraction
multiplication and division
addition and subtraction

9 % 2 ->remainder = 9-24=1
2 ** 3 -> 2
2*2 = 8

NaN (not a number)

numeric value, but not a number
technically number in js

0/0 //NaN
1+NaN //NaN
typeof 4 //number
NaN * 12 //NaN

(13%5)**2 //9
200+0/0 //NaN
  • NaN
    ํ‘œํ˜„ ๋ถˆ๊ฐ€๋Šฅํ•œ ์ˆ˜์น˜ํ˜• ๊ฒฐ๊ณผ,์ž๊ธฐ ์ž์‹ ๊ณผ ์ผ์น˜ํ•˜์ง€ ์•Š๋Š” ์œ ์ผํ•œ ๊ฐ’
    ์ˆซ์ž๊ฐ’์ด์ง€๋งŒ ์ปดํ“จํ„ฐ๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์—†๋Š” ์ˆซ์ž๊ฐ’
    ์ˆซ์ž๋กœ์„œ ์ •์ƒ์ ์ธ ๊ฐ’์ด ์•„๋‹Œ ๊ฒƒ

Variables & Let

variables are like labels for values
jar with a value inside of it, with a label on it

let year=1985; //registering variable
let roosters = 2;
hens + roosters //6, recall values
roosters + 1 = 3;

์•„๋žซ์ค„ ๋ณ€๊ฒฝํ•œ๋‹ค๊ณ  ์œ—๊ฐ’๋„ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹˜
snapshot์„ ์ฐ๋Š” ๊ฒƒ, link๋œ ๊ฒƒ์ด ์•„๋‹˜

โœ… ~~Our First Variables Exercise(Done)~~

Updating Variables

``
score += 5; //+5๊ฐ€ score๋กœ update ๋œ๋‹ค
score -= 10; //-10์ด score๋กœ updat ๋œ๋‹ค
score *= 2;

numLives-- //decrements by 1
numLives++ //increments by 1
``

๐Ÿ”ธ clear() = command + k

const

const works just like let, except you cannot change or update the value.

const age = 17;
age = age + 1; //ERROR

-> const ์“ฐ๋Š” ์ด์œ 
const dayssInWeek = 7;

Booleans

true false (lowercase๋กœ๋งŒ ์จ์•ผ ํ•จ)

Variables can change Types -> 2 -> false ๊ฐ€๋Šฅ

typescript๋Š” javascript ๊ธฐ๋ฐ˜์˜ ์–ธ์–ด์ธ๋ฐ ์ข€ fancier

Variable Naming & conventions

variable - valid identifier
๋„์–ด์“ฐ๊ธฐ ์•ˆ ๋จ
์ˆซ์ž ์“ฐ๋Š” ๊ฑด ๋จ
๊ทผ๋ฐ ์ˆซ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ๊ฑด ์•ˆ ๋จ
_ (underscore ๊ฐ€๋Šฅ) ์ด๊ฑธ๋กœ ์‹œ์ž‘ํ•˜๋Š” ๊ฑด ๊ฐ€๋Šฅ

๋ณดํ†ต ์–ธ๋”์Šค์ฝ”์–ด, ์ฒซ๋ฌธ์ž ์–ดํผ์ผ€์ด์Šค๋กœ ์•ˆ ์“ด๋‹ค
camelCase๋ฅผ ์“ด๋‹ค -> ๋‘๋ฒˆ์งธ ๋‹จ์–ด ์ฒซ๋ฌธ์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ
let currentYear = 1999;

isLoggedIn
isGameOver ์ด๋Ÿฐ ๊ฑฐ ์ž์ฃผ ์”€ is ์“ฐ๋Š” ์ด์œ ๋Š” boolean variable์ด๋ผ๋Š” ๊ฒƒ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด

Javascript Strings

Basic building Blocks

number
string : text, strings of characters, ' " ์›ํ•˜๋Š” ๋Œ€๋กœ ์“ฐ์ง€๋งŒ ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ
boolean
null
undefined

"" : technically a string, empty string

โœ… ~~Our First String Variables Practice(Done)~~

Indices & Length

strings are indexed, each character has a corresponding index, a positional number

let animal = "dumbo

์ธ๋ฑ์Šค๋กœ figure out ํ•จ
animal.length ๋กœ length ์•Œ ์ˆ˜ ์žˆ์Œ
highest index = length -1
"lol"[0] ๋„ ๊ฐ€๋Šฅ

concatenation: "lol" + "lol"

let firstName = "River"; //1
let lastName = "Phoenix";
firstName + lastName //RiverPhoenix
firstName = "river" //2
1๊ณผ 2๋Š” ๊ฐ™์€ ๊ฒŒ ์•„๋‹ˆ๋‹ค, completely different string
let fullName = firstName + " " + lastName

๐Ÿ“ฃ Jump to Python: 01.1-02.1

์ค„ ์•ˆ ๋งž์ถ”๋ฉด ์‹คํ–‰ ์•ˆ ๋จ (๋“ค์—ฌ์“ฐ๊ธฐ ํ•ด์•ผ ํ•จ)
์ž๋ฃŒํ˜•: ํ”„๋กœ๊ทธ๋žจ์˜ ๊ธฐ๋ณธ์ด์ž ํ•ต์‹ฌ

Hello World

>>> 7 % 3
1
>>> 3 % 7
3

"""
๋ฌธ์ž์—ด ์˜ค๋ฅ˜๋ฅผ ์ผ์œผํ‚ค์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ•๋“ค (" ' ๋ฐ˜๋Œ€๋กœ ์จ์ฃผ๊ธฐ), \๋ฅผ ๋”ฐ์˜ดํ‘œ ์•ž์— ์จ์ฃผ๊ธฐ
"""
food = "Python's favorite food is perl" 
say = '"Python is very easy." he says.'
say = "\"Python is very easy.\" he says."

"""
์—ฌ๋Ÿฌ ์ค„์ธ ๋ฌธ์ž์—ด์„ ๋ณ€์ˆ˜์— ๋Œ€์ž…ํ•˜๊ณ  ์‹ถ์„ ๋•Œ, ํฐ๋”ฐ์˜ดํ‘œ ์„ธ ๊ฐœ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค
"""
multiline='''
... Life is too short
... You need python
... '''

\n ๋ฌธ์ž์—ด ์•ˆ์—์„œ ์ค„์„ ๋ฐ”๊ฟ€ ๋•Œ ์‚ฌ์šฉ
\t ๋ฌธ์ž์—ด ์‚ฌ์ด์— ํƒญ ๊ฐ„๊ฒฉ์„ ์ค„ ๋•Œ ์‚ฌ์šฉ
\ ๋ฌธ์ž \๋ฅผ ๊ทธ๋Œ€๋กœ ํ‘œํ˜„ํ•  ๋•Œ ์‚ฌ์šฉ
' ์ž‘์€๋”ฐ์˜ดํ‘œ(')๋ฅผ ๊ทธ๋Œ€๋กœ ํ‘œํ˜„ํ•  ๋•Œ ์‚ฌ์šฉ
" ํฐ๋”ฐ์˜ดํ‘œ(")๋ฅผ ๊ทธ๋Œ€๋กœ ํ‘œํ˜„ํ•  ๋•Œ ์‚ฌ์šฉ

๋”ฐ์˜ดํ‘œ๋กœ ๋‘˜๋Ÿฌ์‹ธ์—ฌ ์žˆ์œผ๋ฉด "123"์ด๋ผ๋„ ๋ฌธ์ž์—ด!

์ธ๋ฑ์‹ฑ: a[๋ฒˆํ˜ธ]
์Šฌ๋ผ์ด์‹ฑ(Slicing): a[0:4] ->์ฃผ์˜: ๋ ๋ฒˆํ˜ธ์— ํ•ด๋‹นํ•˜๋Š” ๊ฒƒ์€ ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค
a[0:4] = 0 <= a < 3
a[19:] : ์‹œ์ž‘ ๋ฒˆํ˜ธ๋ถ€ํ„ฐ ๋๊นŒ์ง€
a[:] : ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€

ํŒŒ์ด์ฌ์€ 0๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ ์žŠ์ง€ ๋ง๊ธฐ!!!

"Pithon"์ด๋ผ๋Š” ๋ฌธ์ž์—ด์„ "Python"์œผ๋กœ ๋ฐ”๊พธ๋Š” ๋ฐฉ๋ฒ•

๋ฌธ์ž์—ด ์ž๋ฃŒํ˜•์€ immutableํ•œ ์ž๋ฃŒํ˜•์ด๋ฏ€๋กœ ์ธ๋ฑ์‹ฑ์œผ๋กœ ๋ฐ”๋กœ ๋ฐ”๊พธ๋ ค ํ•˜๋ฉด ์˜ค๋ฅ˜
ํ•˜์ง€๋งŒ ์Šฌ๋ผ์ด์‹ฑ ํ†ตํ•ด์„œ๋Š” ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค -> ์‚ฌ์ด์— ์ถ”๊ฐ€ํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฌธ์ž์—ด์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ

๋ฌธ์ž์—ด ํฌ๋งคํŒ…

  1. ๋ฌธ์ž์—ด ํฌ๋งท ์ฝ”๋“œ %d: "I eat %d apples." % 3
  2. ๋ฌธ์ž์—ด ํฌ๋งท ์ฝ”๋“œ %s: "I eat %s apples." % "five"
  3. ๋ณ€์ˆ˜๋กœ ๋Œ€์ž…ํ•˜๊ธฐ: "I eat %d apples." % number
  4. 2๊ฐœ ์ด์ƒ์˜ ๊ฐ’ ๋„ฃ๊ธฐ: "I ate %d apples. so I was sick for %s days." % (number, day)

%s ๋Š” ์ž๋™์œผ๋กœ % ๋’ค์— ์žˆ๋Š” ๊ฐ’์„ ๋ฌธ์ž์—ด๋กœ ๋ฐ”๊พผ๋‹ค

"Error is %d%." % 98 ->์ด๋Ÿฌ๋ฉด ์˜ค๋ฅ˜ ๋œธ, ๋ฐ˜๋“œ์‹œ ํฌ๋งคํŒ… ์—ฐ์‚ฐ์ž์™€ ํ•จ๊ป˜ %๋ฅผ ์“ธ ๋•Œ๋Š” %%๋ฅผ ์จ์ค€๋‹ค.
"Error is %d%%." % 98

0๊ฐœ์˜ ๋Œ“๊ธ€