TIL020_210412

keepcalmยท2021๋…„ 4์›” 13์ผ
0

TIL

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

๐ŸŠ ๊ฐ์ƒ


giphy

๊ณต๋ถ€์˜ ์‹œ์ž‘๊ณผ ๋์€ ๋ฌด์กฐ๊ฑด ๋ณต์Šต!
๋ณต์Šตํ•˜๋‹ˆ ํ™•์‹คํžˆ ๋‚ด์šฉ ์ •๋ฆฌ๊ฐ€ ์ž˜ ๋œ๋‹ค

๐Ÿ“™ ์—ดํ’ˆํƒ€ ์ฝ”๋”ฉ ์‹œ๊ฐ„ 10hour
๐Ÿ‘๐Ÿผ -
๐Ÿ‘Ž๐Ÿผ -

๐Ÿš€ ๋ชฉํ‘œ

  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (332/682)
  • ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (6/30, 4.12 ์™„๋ฃŒ)
  • ๋“œ๋ฆผ์ฝ”๋”ฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜ ์™„๊ฐ• (5/23)
  • ๋ณต์Šต: TIL003-TIL014

๐Ÿ“ฃ ๋ณต์Šต: The Web Developer Bootcamp

Web

์ธํ„ฐ๋„ท: ์ปดํ“จํ„ฐ๊ฐ€ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ๋กœ ์—ฐ๊ฒฐ๋˜์–ด ์ •๋ณด ์ฃผ๊ณ  ๋ฐ›์Œ
url: ์ปดํ“จํ„ฐ ๋„คํŠธ์›Œํฌ์™€ ๊ฒ€์ƒ‰ ๋ฉ”์ปค๋‹ˆ์ฆ˜์—์„œ์˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜๋Š” ์›น ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•œ ์ฐธ์กฐ, ์ปดํ“จํ„ฐ ๋„คํŠธ์›Œํฌ ์ƒ์˜ ์ž์›์ด ์–ด๋”” ์žˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ๊ธฐ ์œ„ํ•œ ๊ทœ์•ฝ, ์ธํ„ฐ๋„ท ์ฃผ์†Œ
ํ†ต์‹  ํ”„๋กœํ† ์ฝœ: ์ปดํ“จํ„ฐ๋‚˜ ์›๊ฑฐ๋ฆฌ ํ†ต์‹  ์žฅ๋น„์—์„œ ๋ฉ”์‹œ์ง€๋ฅผ ์ฃผ๊ณ  ๋ฐ›๋Š” ์–‘์‹๊ณผ ๊ทœ์น™์˜ ์ฒด๊ณ„
HTTP: ํ”„๋กœํ† ์ฝœ, ํ†ต์‹ ๊ทœ์•ฝ -> ์ปดํ“จํ„ฐ๊ฐ€ ๋‹ค๋ฅธ ์ปดํ“จํ„ฐ์™€ ๋ฉ”์‹œ์ง€๋ฅผ ์ฃผ๊ณ  ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค, W3 ์ƒ์—์„œ ์ •๋ณด ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ํ”„๋กœํ† ์ฝœ, ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ์‚ฌ์ด์— ์ด๋ฃจ์–ด์ง€๋Š” ์š”์ฒญ/์‘๋‹ต ํ”„๋กœํ† ์ฝœ
ํ•˜์ดํผํ…์ŠคํŠธ: ํ•˜์ดํผ๋งํฌ๋ฅผ ํ†ตํ•ด ๋…์ž๊ฐ€ ํ•œ ๋ฌธ์„œ์—์„œ ๋‹ค๋ฅธ ๋ฌธ์„œ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ํ…์ŠคํŠธ
์›น: ์ปจํ…์ธ ๋“ค์ด ํ•˜์ดํผํ…์ŠคํŠธ๋กœ ๋ฌถ์ธ ์ง‘ํ•ฉ
HTML: ํ•˜์ดํผํ…์ŠคํŠธ ๋งˆํฌ์—… ์–ธ์–ด, ๊ตฌ์กฐ์  ๋ฌธ์„œ
๋งˆํฌ์—… ์–ธ์–ด: ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฌธ์„œ๋‚˜ ๋ฐ์ดํ„ฐ์˜ ๊ตฌ์กฐ๋ฅผ ๋ช…๊ธฐํ•˜๋Š” ์–ธ์–ด์˜ ํ•œ ๊ฐ€์ง€
W3(WWW): ์›น, ์ธํ„ฐ๋„ท์— ์—ฐ๊ฒฐ๋œ ์ปดํ“จํ„ฐ๋ฅผ ํ†ตํ•ด ์‚ฌ๋žŒ๋“ค์ด ์ •๋ณด๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ์ „์„ธ๊ณ„์ ์ธ ์ •๋ณด ๊ณต๊ฐ„
์›น ๋ธŒ๋ผ์šฐ์ €: ์›น ์„œ๋ฒ„์—์„œ navigateํ•˜๋ฉฐ ์Œ๋ฐฉํ–ฅ ํ†ต์‹ ํ•˜๊ณ  html ๋ฌธ์„œ๋‚˜ ํŒŒ์ผ์„ ์ถœ๋ ฅํ•˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด, http ์†Œํ”„ํŠธ์›จ์–ด ์—์ด์ „ํŠธ (e.g. ํฌ๋กฌ, ์—ฃ์ง€, ์˜คํŽ˜๋ผ, ์‚ฌํŒŒ๋ฆฌ, ํŒŒ์ด์–ดํญ์Šค)

HTML

<tag attribute=""> // <ํƒœ๊ทธ ์†์„ฑ="์†์„ฑ๊ฐ’'></ํƒœ๊ทธ> (elements(์š”์†Œ))

์ž์ฃผ ์“ฐ์ด๋Š” ํƒœ๊ทธ

<html>
	<head>
    	<meta charset="UTF-8" /> <!--๋ฌธ์„œ ์„ค๋ช…, ๊ฒ€์ƒ‰์–ด, ๋ฌธ์„œ ๋ถ€ํ˜ธ์ฒ˜๋ฆฌ ๋ฐฉ์‹-->
    	<title> ๋ธŒ๋ผ์šฐ์ € ํˆด๋ฐ” ์ƒ๋‹จ ๋ฌธ์„œ ์ œ๋ชฉ <title>
        <style type="text/css"> 
        	body {color:red;}</style> <!--internal ๋ฐฉ์‹์˜ ์Šคํƒ€์ผ-->
        </style>
        <script type="text/javascript"> 
        	alert('์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ๊ฒฐ, defer์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ธฐ'); 		
        </script>
        <link rel="stylesheet" href="style.css"/> <!--style sheet external ์—ฐ๊ฒฐ-->
    </head>
	<body>
    	<header> ์›น ํŽ˜์ด์ง€ ์ƒ๋‹จ ์˜์—ญ 
        	<nav> ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ ๊ทธ๋ฃน </nav>
        </header>
        <hgroup>
    		<h1> ์ œ๋ชฉ, 6๊นŒ์ง€ ์“ธ ์ˆ˜ ์žˆ์Œ </h1>
            <h2> hgroup์€ ์ œ๋ชฉ-๋ถ€์ œ๋ชฉ์˜ ๋‹ค๋‹จ๊ณ„ ์ œ๋ชฉ ์„ค์ •, ํ•˜์ง€๋งŒ html5์—์„œ ์‚ญ์ œ๋จ </h2>
        </hgroup>
    	<p>๋ฌธ๋‹จ, ๋‹จ๋ฝ ์ƒ์„ฑ
        	<span> ์ธ๋ผ์ธ ์š”์†Œ, ํŠน์ • ๋ถ€๋ถ„ ์Šคํƒ€์ผ ์ ์šฉ, p ํƒœ๊ทธ ์•ˆ์— ์‚ฌ์šฉํ•˜๊ธฐ๋„ </span>
            <dfn> ์šฉ์–ด๊ฐ€ ์ฒ˜์Œ ๋“ฑ์žฅํ•  ๋•Œ ์ •์˜, ์ „๋ฌธ์–ด ์ •์˜ - ๋ถ€๋ชจ ์š”์†Œ์— ์„ค๋ช… ํฌํ•จ </dfn>
            <abbr title="์•ฝ์ž์˜ ๋œป"> ์•ฝ์ž, ๋งˆ์šฐ์Šค ์˜ฌ๋ ธ์„ ๋•Œ ๋œป ๋‚˜ํƒ€๋‚จ </abbr>
            <q> ์งง์€ ์ธ์šฉ๊ตฌ </q>
            <b> ๊ธ€์”จ๋ฅผ ๊ตต๊ฒŒ </b>
            <strong> ๊ธ€์ž ๊ตต๊ฒŒ ํ•ด์„œ ํ…์ŠคํŠธ ์ค‘์š”ํ•˜๊ฒŒ </strong>
            <em> ํŠน์ • ํ…์ŠคํŠธ ๊ฐ•์กฐ, ์ดํƒค๋ฆญ์ฒด </em>
            <i> ์ดํƒค๋ฆญ์ฒด </i>
            <ins> ๋ณ€๊ฒฝ ํ›„ ์ถ”๊ฐ€๋œ ๋‚ด์šฉ ํ‘œ์‹œ, ๋ฐ‘์ค„ </ins>
            <del> ๋ณ€๊ฒฝ ํ›„ ์‚ญ์ œ๋œ ๋‚ด์šฉ ํ‘œ์‹œ, ๊ฐ€์šด๋ฐ ๋ผ์ธ </del>
            <br> ์ค„๋ฐ”๊ฟˆ ํƒœ๊ทธ
            <pre>
            	ํƒœ๊ทธ ์•ˆ์˜ ํƒญ, ์—”ํ„ฐ, ์ŠคํŽ˜์ด์Šค ํ‘œํ˜„๋จ
            </pre>
            <p><sup>1</sup>/<sub>2</sub> + <sup>1</sup>/<sub>2</sub> = 1</p>
            <!--sup์€ squared, sub์€ baseline-->
            1 &lt; 6 <!--entity code ์จ์ฃผ๊ธฐ-->
        </p>
        <blockquote>
        	๋‹ค๋ฅธ ์ž์›์—์„œ ์ธ์šฉํ•œ ์ผ๋ถ€ ์ง€์ •, ์ธ์šฉ๋ฌธ, ๋“ค์—ฌ์“ฐ๊ธฐ ๋จ
            <cite> ์ €์ž‘๋ฌผ์˜ ์ถœ์ฒ˜ ํ‘œ๊ธฐ, ๊ทธ๋ฆผ, ์ฑ…, ์˜ํ™” ์ด๋ฆ„ ๋“ฑ, ์ดํƒค๋ฆญ์ฒด </cite>
        </blockquote>
        <ol><li> ์ˆœ์„œ๊ฐ€ ์žˆ๋Š” ๋ชฉ๋ก </li></ol>
        <ul><li> ์ˆœ์„œ๊ฐ€ ์—†๋Š” ๋ชฉ๋ก </li></ul>
        <dl> ์šฉ์–ด ์„ค๋ช… ๋ชฉ๋ก
        	<dt> ์šฉ์–ด์˜ ์ œ๋ชฉ </dt>
            <dd> ์šฉ์–ด ์„ค๋ช… </dd>
        </dl>
        <hr> <!--ํ™”๋ฉด ๊ฐ€๋กœ์ง€๋ฅด๋Š” ๋ผ์ธ-->
        <table>
        	<thead><th> th๋Š” ์—ด์˜ ์ œ๋ชฉ </th><th></th></thead>
            <tbody><th></th><td> td๋Š” ๋‚ด์šฉ </td></tbody>
            <tfoot><tr><td colspan="2"> tr๋กœ ํ–‰ ์ƒ์„ฑ </td></tr></tfoot>
        </table>
        <code> ์ปดํ“จํ„ฐ ์ฝ”๋“œ์˜ ์ผ๋ถ€๋ถ„ ๋‚˜ํƒ€๋ƒ„ </code>
        <div> ๋ ˆ์ด์•„์›ƒ ๋ถ„ํ• , ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ, ์„น์…˜ ๋งŒ๋“ค ๋•Œ, ์˜๋ฏธ์  ๊ด€๊ณ„ ์—†์„ ๋•Œ
        	<img src="ddd.jpg" alt="ddd"> <!--์ด๋ฏธ์ง€ ์‚ฝ์ž…-->
        </div>
        <form>
        	<label for="dd"> ํผ ์–‘์‹์— ์ด๋ฆ„ ๋ถ™์ด๋Š” ํƒœ๊ทธ </label>
            <input type="text" id="dd">
            <textarea> ์—ฌ๋Ÿฌ ์ค„์˜ ํ…์ŠคํŠธ ์ž…๋ ฅ </textarea>
        </form>
        <select name="job">
        	<option value="ํ•™์ƒ">ํ•™์ƒ</option>
        </select>
        <button type="button"> inputํƒ€์ž…๊ณผ ๋‹ฌ๋ฆฌ ํ…์ŠคํŠธ๋‚˜ ์ด๋ฏธ์ง€ ๋„ฃ์„ ์ˆ˜ ์žˆ์Œ </button>
        <source src="url">
        <!--์ ˆ๋Œ€ ์ฃผ์†Œ ํ˜น์€ ์ƒ๋Œ€ ์ฃผ์†Œ๋ฅผ ๋ช…์‹œํ•˜์—ฌ ์žฌ์ƒํ•  ๋ฏธ๋””์–ด ํŒŒ์ผ ๋ณด์—ฌ์คŒ, ์˜ค๋””์˜ค, ๋น„๋””์˜ค-->
        <iframe src="http://dd.com"> ์ธ๋ผ์ธ ํ”„๋ ˆ์ž„, ๋‹ค๋ฅธ ๋ฌธ์„œ ํฌํ•จ </iframe>
        <figure>
          <audio src="http://dd.com"> ์Œ์„ฑํŒŒ์ผ ์žฌ์ƒ </audio>
          <video src="http://dd.com"> ์˜์ƒํŒŒ์ผ ์žฌ์ƒ </video>
          <figcaption> ์‚ฌ์ง„, ๋น„๋””์˜ค, ์˜ค๋””์˜ค ๋“ฑ ๋‹ด๋Š” ์ปจํ…Œ์ด๋„ˆ, ๋‚ด์šฉ๊ณผ ์—ฐ๊ด€ </figcaption>
        </figure>
        <aside> ๋ถ€์ฐจ์  ๋‚ด์šฉ, ๋ฐ”๊นฅ ์˜์—ญ, ๋Š์Šจํ•˜๊ฒŒ ๊ด€๋ จ๋œ ๋‚ด์šฉ </aside>
        <article> ๋ณธ๋ฌธ ํŒŒ์•…, ๋…์ž์ ์œผ๋กœ ์™„์„ฑ๋œ ์ปจํ…์ธ  </article>
        <section> ์„œ๋กœ ๊ด€๊ณ„์žˆ๋Š” ๋ฌธ์„œ๋ฅผ ๋ถ„๋ฆฌ </section>
        <main> 
        	body ์š”์†Œ์˜ ์ฃผ ์ฝ˜ํ…์ธ ๋ฅผ ์ •์˜ํ•œ๋‹ค, ์ง์ ‘์ ์œผ๋กœ ์ค‘์‹ฌ ์ฃผ์ œ์—ฌ์•ผ ํ•˜๊ณ  ๋ฐ˜๋ณต๋˜๋Š” ๋‚ด์šฉ์€ ์•ˆ ๋จ, ๋ฌธ์„œ 			๋‚ด์— ๋‹จ ํ•˜๋‚˜๋งŒ ์กด์žฌํ•ด์•ผ ํ•˜๋ฉฐ ๋‹ค๋ฅธ article, aside, footer, header, nav์˜ ์ž์† ์š”์†Œ ์•ˆ 			 ๋จ 
        </main>
        <details>
        	<summary> summary๊ฐ€ details์˜ 1๋Œ€ ์ž์‹ ์š”์†Œ๋กœ ๋‚˜์™€์•ผ ํ•œ๋‹ค</summary>
            <p> details๋Š” ๋”๋ณด๊ธฐ/์ ‘๊ธฐ ๊ธฐ๋Šฅ์˜ ์˜์—ญ์„ ๊ฐ์‹ผ๋‹ค </p>
        </details>
        <time datetime="YYYY-MM-DDThh:mm:ssTZD|PTDHMS">
        <!--time tag๋กœ ์š”์†Œ์˜ ๋‚ ์งœ์™€ ์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ machine-readable ํ˜•ํƒœ๋กœ ๋ช…์‹œํ•œ๋‹ค-->
        <footer>
       	๊ผฌ๋ฆฟ๋ง, ๋ฌธ์„œ์˜ ์ •๋ณด
        <address> ๊ธ€์˜ ์ €์ž๋‚˜ ํšŒ์‚ฌ์™€ ์—ฐ๋ฝํ•  ์ˆ˜ ์žˆ๋Š” ์ •๋ณด </address>
        </footer>
    </body>

style์€ ์„ธ ๊ฐ€์ง€ ๋ฐฉ์‹์œผ๋กœ ์‚ฝ์ž… ๊ฐ€๋Šฅ

  1. inline: ํƒœ๊ทธ ์†์„ฑ์ฒ˜๋Ÿผ ์‚ฌ์šฉ
  2. internal: head์— style tag๋กœ ์‚ฝ์ž…
  3. external: .css ์ €์žฅ ํ›„ link ํƒœ๊ทธ ์‚ฌ์šฉ

semantic web: ์˜๋ฏธ๋ก ์ ์ธ ์›น -> SEO

CSS

selector

{ property: value; }

universal, multiple(,), id(#), class(.), descendant( ), adjacent(+), direct(>)
attribute([type="text"])

ํ•˜์œ„ ์„ ํƒ์ž์™€ ์ž์‹ ์„ ํƒ์ž

ํ•˜์œ„ ์„ ํƒ์ž section ul -> ๋ชจ๋“  ํ•˜์œ„ ์š”์†Œ์— ์Šคํƒ€์ผ ์ ์šฉ
์ž์‹ ์„ ํƒ์ž section>ul -> ๋ถ€๋ชจ์˜ ๋ฐ”๋กœ ์•„๋ž˜ ์ž์‹ ์š”์†Œ์—๋งŒ ์ ์šฉ

์ธ์ ‘ ํ˜•์ œ ์„ ํƒ์ž์™€ ์ผ๋ฐ˜ ํ˜•์ œ ์„ ํƒ์ž

e+f adjacent sibling combinator, e ์š”์†Œ ๋’ค๋”ฐ๋ฅด๋Š” f ์š”์†Œ -> ์ฒซ๋ฒˆ์งธ ๋™์ƒ์š”์†Œ์—๋งŒ ์ ์šฉ
e~f general sibling combinator, e ์š”์†Œ๊ฐ€ ์•ž์— ์กด์žฌํ•˜๋ฉด f ์„ ํƒ -> ๋ชจ๋“  ๋™์ƒ์š”์†Œ์— ์ ์šฉ

pseudo-classes

box model

border ๋•Œ๋ฌธ์— box size ์ปค์ง€๋Š” ๋ฌธ์ œ ํ•ด๊ฒฐ -> box-sizing: border-box;

position property

static, relative, absolute, fixed, sticky

transition & transform

โญ๏ธ responsive css & flexbox

grid

grid-template: 1fr 50px/20% 80%;
grid-column-start:3;
grid-column-end:5; /*๋งˆ์ง€๋ง‰ ์ˆ˜๋Š” ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค*/
grid-column-end: span 2;
/*grid-column: 3 / 5;*/
grid-column: 2/6;
grid-row: span 5;
/*grid-area: 1 / 2 / 6 / 6;*/
.box1 {align-self: start;}
.box4 {align-self: end;}
.box4 {justify-self: end;}

javascript

string methods

" hello ".trim().toUpperCase()//"HELLO"
let tvShow = 'catdog';
tvShow.indexOf('cat'); //0
tvShow.slice(0,3); //'cat' -> new copy
tvShow.slice(3); //'dog; -> new copy
tvShow.replace('cat','dog'); //'dogdog' -> ์ฒซ๋ฒˆ์งธ๋งŒ ๋ฐ”๊ฟˆ
tvShow.repeat(3) //'dogdogdog'
`Total is: $${price*qty}`//template literals

math object

Math.PI //3.14159265
Math.round(4.9) //5 //Rounding a number
Math.abs(-456) //456 //Absolute value
Math.pow(2,3) //8 //Raises 2 to the 3rd power=2**3
Math.floor(3.999) //3 //Removes decimal
Math //object ๋ณผ ์ˆ˜ ์žˆ์Œ
Math.ceil(34.1) //35 //Round up
Math.random(); //0.328923749
Math.floor(Math.random()*10)+1; //1 to 10

boolean logic

parseInt(userInput) // string์ด ์ˆซ์ž๋กœ ๋ณ€ํ•จ

const day = prompt('Enter a day').toLowerCase();
if (day==='monday') {console.log("You are a baby");
} else if (day==='saturday') {console.log("You are a child");
} else if (day==='friday') {console.log("You are an adult");
} else {console.log ("You are a senior.");
}

array

array methods: push, pop, shift, unshift

let cats = ['blue', 'kitty']
let dogs = ['rusty', 'wyatt']
let party = cats.concat(dogs) //(4) ["blue", "kitty", "rusty", "wyatt"]
cats.includes('blue') //true
party.indexOf('kitty') //1 //์ฒซ๋ฒˆ์งธ๋งŒ ์ฐพ๋Š”๋‹ค
party.reverse() //["wyatt", "rusty", "kitty", "blue"]
party.slice(1) //["rusty", "kitty", "blue"]
party.slice(2,4) //["kitty", "blue"]
party.slice(-1) //["blue"]
party.splice(1,1) //["wyatt", "kitty", "blue"]
party.splice(1,0,"bruno") //["wyatt", "bruno", "kitty", "blue"]

๋ ˆํผ๋Ÿฐ์Šค๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๊ฐ’์€ ๋ณ€ํ•  ์ˆ˜ ์žˆ๋‹ค

๊ฐ์ฒด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด๋Š” ํ‚ค(key)๊ณผ ๊ฐ’(value)์œผ๋กœ ๊ตฌ์„ฑ๋œ ํ”„๋กœํผํ‹ฐ(Property)๋“ค์˜ ์ง‘ํ•ฉ
๊ฐ์ฒด๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์˜๋ฏธํ•˜๋Š” ํ”„๋กœํผํ‹ฐ(property)์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๋™์ž‘(behavior)์„ ์˜๋ฏธํ•˜๋Š” ๋ฉ”์†Œ๋“œ(method)๋กœ ๊ตฌ์„ฑ๋œ ์ง‘ํ•ฉ

๋ชจ๋“  ํ‚ค๋Š” string์œผ๋กœ ๋ณ€ํ™˜๋จ (symbol๋งŒ ๋นผ๊ณ )

person["lastName"] //Jagger
person.lastName //Jagger

ordered data : array
unordered data : object

const comments =[
{username: 'Tammy', text: 'lololol'. votes: 9},
{username: 'FishBoi', text: 'glub glub'. votes: 123}
]
comments[1].text //"glub glub"

loop

const animals = [ 'lions','tigers','bears'];
for (let i=0; i<animal.lenth; i++) {
console.log(i, animals[i]); }

let num = 0;
while (num<10) {
console.log(num);
num++;
}

const subreddits = ['cringe', 'books', 'funny', 'soccer', 'pics']
for (let i = 0; i < subreddits.length; i++) {
	console.log(`Visit reddit.com/r/${subreddits[i]}`)
}
for (let sub of subreddits) {
	console.log(`Visit reddit.com/r/${sub}`)
}

let total=0;
for (let score of Object.values(testScores)) {
	total+= score;
}
console.log(total / scores.length)

function

scope

lexical scope: ํ•จ์ˆ˜์˜ ์„ ์–ธ์— ๋”ฐ๋ผ ์ƒ์œ„ ์Šค์ฝ”ํ”„๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค

forEach

const numbers = [1,2,3,4,5]

numbers.forEach(function (el) {
	console.log(el)
})

// ์ด๊ฑด ์š”์ฆ˜์˜ ๋” ์ƒˆ๋กœ์šด ๋ฐฉ์‹, for์„ ์ด์šฉํ•ด์„œ elment ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

for (let el of numbers) {
	console.log(el);
}

map

์ฐธ๊ณ ๋งํฌ: zerocho

//1
function cleanNames(arr) {
	const newArr = arr.map(function(name){
    	return name.trim();
	})
    return newArr;
}

//2
function cleanNames = arr => {
	const newArr = arr.map(function(name) {
    	return name.trim();
};

//3
function cleanNames = arr => arr.map(name => name.trim());

โญ๏ธโญ๏ธโญ๏ธ this

  1. ํ•จ์ˆ˜ ์‹คํ–‰์‹œ์—๋Š” ์ „์—ญ(window) ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.
  2. ๋ฉ”์†Œ๋“œ ์‹คํ–‰์‹œ์—๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ์†Œ์œ ํ•˜๊ณ  ์žˆ๋Š” ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.
  3. ์ƒ์„ฑ์ž ์‹คํ–‰์‹œ์—๋Š” ์ƒˆ๋กญ๊ฒŒ ๋งŒ๋“ค์–ด์ง„ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ this๋Š” ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ ๊ฒฐ์ •๋œ๋‹ค
ํ˜ธ์ถœ์„ ์–ด๋–ป๊ฒŒ ํ–ˆ๋ƒ, ๋ˆ„๊ฐ€ ํ–ˆ๋ƒ

ํ˜ธ์ถœํ•œ ๋†ˆ(๊ฐ์ฒด), ๋ˆ„๊ฐ€ ์‹คํ–‰ํ–ˆ๋ƒ === this

var someone = {
	name: 'codejong',
    whoAmI : function() {
    	console.log(this);
	}
};

someone.whoAmI(); //dot notation ๋ฐฉ์‹์œผ๋กœ someone์ด ํ˜ธ์ถœํ–ˆ์œผ๋ฏ€๋กœ someone์ด this

var myWhoAmI = someone.whoAmI;
myWhoAmI(); //regular function call ๋ฐฉ์‹์œผ๋กœ global(window)์—์„œ ์‹คํ–‰ํ–ˆ์œผ๋ฏ€๋กœ this๋Š” window

<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',someone.whoAmI);
// boom...button์ด ํ˜ธ์ถœ๋จ, ํ•จ์ˆ˜๋ฅผ ๋ฒ„ํŠผ์— ๋„˜๊ฒจ์ค€ ๊ฒƒ. ์‹คํ–‰ํ•œ ์• ๋Š” ๋ฒ„ํŠผ
</script>

bind(๋ฐ”์ธ๋”ฉ)

var bindedWhoAmI = myWhoAmI.bind(someone);
btn.addEventListener('click',someone.whoAmI); //someone

filter method

๋†’์€ ํ‰์ ์„ ๊ฐ€์ง„ ์˜ํ™”์˜ ์ œ๋ชฉ๋งŒ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

movies.filter(m=>m.score>80).map(m=>m.title);

reduce method

๋ณต์Šต๋งํฌ
์ฐธ๊ณ ๋งํฌ: zerocho
-> map ๊ณผ filter ๊ฐ™์€ ํ•จ์ˆ˜ํ˜• ๋ฉ”์„œ๋“œ๋ฅผ reduce๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค

  1. map์„ reduce๋กœ ๋งŒ๋“ค๊ธฐ
  2. filter์„ reduce๋กœ ๋งŒ๋“ค๊ธฐ
  3. ๊ฐ€์žฅ ์ž‘์€ ์ˆ˜ ์ฐพ์•„๋‚ด๊ธฐ
  4. ๊ฐ€์žฅ ํ‰์ ์ด ๋†’์€ ์˜ํ™” ์ฐพ๊ธฐ
    -> ์˜ˆ์ œ, ๊ธฐ์–ต ์•ˆ ๋‚˜๋ฉด ๋งํฌ ์ฐธ์กฐ

arrow function

traditional function์€ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ๊ณณ์˜ ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค
ํ•˜์ง€๋งŒ arrow functiondms ํ•จ์ˆ˜๊ฐ€ ๋งŒ๋“ค์–ด์ง„ ๊ณณ์— scope๋œ๋‹ค

normal function already create the variable with the function keword
function sum(a,b){ return a+b; }
but arrow function, we have to create own variable to store the function
let sum2 = (a,b) => a+b;

arrow function์€ ์ต๋ช… ํ•จ์ˆ˜์—์„œ ๋น›์„ ๋ฐœํ•œ๋‹ค

๐Ÿ“ฃ ๋“œ๋ฆผ์ฝ”๋”ฉ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜:6-

6. Class ๊ฐ์ฒด์ง€ํ–ฅ์–ธ์–ด

class vs object
object-oriendted

class person{
	name; //property - ์†์„ฑ(field)
    speak(); //function - ํ–‰๋™(method)
}    

property

์–ด๋–ค ๊ฐ’์ด ๋‹ค๋ฅธ ๊ฐ’๊ณผ ์—ฐ๊ด€์„ ๊ฐ€์ง€๊ณ  ์žˆ์„ ๋•Œ
๋ฌธ์ž์—ด.length ์—์„œ length๋ฅผ ํ”„๋กœํผํ‹ฐ๋ผ ํ•œ๋‹ค
๊ฐ์ฒด์— ์†Œ์†๋œ ํ•จ์ˆ˜ -> ๋ฉ”์„œ๋“œ (e.g. cowokers.showAll())
๊ฐ์ฒด์— ์†Œ์†๋œ ๋ณ€์ˆ˜ -> ํ”„๋กœํผํ‹ฐ (e.g. var cowokers = { 'programmer':'egoing'} ์—์„œ programmer
-> ๊ฐ™์€ ๊ฒƒ์ด๋ผ๋„ ๋งฅ๋ฝ์— ๋”ฐ๋ผ ๋ถ€๋ฅด๋Š” ๊ฒƒ์ด ๋‹ค๋ฅด๋‹ค

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