TIL005_210324

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

TIL

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

TIL

๐Ÿ›Œ ๊ฐ์ƒ


๐Ÿ“™ ์—ดํ’ˆํƒ€ 5hour
๐Ÿ‘๐Ÿผ -
๐Ÿ‘Ž๐Ÿผ ๋Šฆ๊ฒŒ ์ผ์–ด๋‚จ, ๊ณต๋ถ€ ์‹œ๊ฐ„ ๋ถ€์กฑ

๐Ÿš€ ๋ชฉํ‘œ

  • ๋…ธ๋งˆ๋“œ ์ฝ”๋” React ๋ณต์Šต (-3/27)
  • Udemy์—์„œ Javascript ๊ฐ•์ขŒ ์ˆ˜๊ฐ•ํ•˜๊ธฐ (64/682)
  • ๋งค์ผ ์ปค๋ฐ‹ ์—ฐ์† 30์ผ ๋‹ฌ์„ฑํ•˜๊ธฐ (4/30)
  • 3.24 ๋ฐœ๊ฒฌ ๋…ธ์…˜์œผ๋กœ ์˜ฎ๊ธฐ๊ธฐ
  • SSAFY ์ง€๋ฐฉ ์–ผ๋ฆฌ๋ฒ„๋“œ ์‹ ์ฒญํ•˜๊ธฐ (-3/26)
  • 3.25์—๋Š” 5์‹œ ๊ธฐ์ƒ flexํ•˜๊ธฐ(์ œ๋ฐœ)

๐Ÿฅ ๊ฐœ๋ฐœ ๊ด€๋ จ ํŒ

์ง„์งœ ์ฝ”๋”ฉ ์‹ค๋ฌด์— ๋‹ค๊ฐ€๊ฐ€๊ณ  ์‹ถ์œผ๋ฉด Python-GUI๋ฅผ ๊ณต๋ถ€ํ•ด์„œ ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐ-ํฌํŠธํด๋ฆฌ์˜ค-ํ”ผ๋“œ๋ฐฑ ์ด ๊ณผ์ •์„ ๊ณ„์† ๋ฐ˜๋ณต

๐Ÿ’ก ๋ฐœ๊ฒฌ!

Technical Interview Guidelines for Beginners
์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ ํ•ด๊ฒฐ ํ•™์Šต ์ด์ •ํ‘œ
์ฝ”๋”ฉ ์บ ํ”„ ์ด์ •๋ฆฌ
์ทจ์—…์„ ์œ„ํ•œ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ ๊ณต๋ถ€ ๋ฐฉ๋ฒ•
์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ณต๋ถ€ ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ์š”
Open Source Flatform, ASP.net
์ฝ”ํ…Œ ์ค€๋น„ ๊ธฐ์ดˆ ๊ฐ•์˜
ํŒจ์ŠคํŠธ์บ ํ”„ ๋„ค์นด๋ผ์ฟ ๋ฒ 
ํŒŒ์ด์ฌ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌด๋ฃŒ ๊ฐ•์˜
์‹ค์ „ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ฐ•์ขŒ

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

The Web Developer Bootcamp 2021

๐Ÿ“ฃ The Web Developer Bootcamp 2021: 5.46-6.58

HTML: Form Element

<form action=""></form>
<!-- action attribute: specifies where the data should be sent, when the form is submitted>

submit a form -> http request will be sent
๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์— ํ™œ์šฉ (ex. reddit), ์ •๋ณด ์ œ์ถœ, ๊ฒ€์ƒ‰์–ด ์ž…๋ ฅ, ์•„์ด๋””์™€ ๋น„๋ฐ€๋ฒˆํ˜ธ ์ž…๋ ฅ


HTML: Form & Input Types & label & Button & Name Attribute

label element associates a direct connection between some input or some form control or some piece of text. - better experience for screen readers.
Ulso makes the label itself clickable

id supposed to be unique for the one input. label and id should be same.

Submit Also Submit Do not submit the form

Enter a Username

Enter a Username and submit

Enter a password

Enter a color

Enter a number

Enter a number

Search Reddit Search Google
<form action="/tacos">
<button>Submit</button>
<button type="submit">Also Submit</button>
<button type="button">Do not submit the form</button>
<!-- Not common, we got a javascript-->
  <p>
      <label for="username"> Enter a Username </label>
      <input id="username" type="text" placeholder="username">
  </p>
    <p>
      <label for="username"> Enter a Username and submit </label>
      <input id="username" type="text" placeholder="username" name="username">
  </p>
  <p>
    <label for="password"> Enter a password </label>
      <input id="password" type="password" placeholder="password">
  </p>
  <p>
 	  <label for="color"> Enter a color </label>
      <input id="color" type="color">
  </p>
  <p>
      <label for="number"> Enter a number </label>
      <input id="number" type="number" placeholder="number" min="10" max="100">
  </p>
  <p>
      <label>
         Enter a number
         <input type="number" placeholder="enter a number">
      </label>
    <!--This is a valid approach, but it's far more standard and common-->
  </p>
  <input type="submit" value="Yes, I also submit, but developers don't like me">
</form>
<!-- ์‹ค์šฉ์ ์ด์ง„ ์•Š์ง€๋งŒ ์›๋ฆฌ ์ดํ•ดํ•˜๊ธฐ ์ข‹์Œ -->
<form action="https://www.reddit.com/search">
  <input type="text" name="q">
  <button> Search Reddit </button>
</form>
<form action="https://www.google.com/search">
  <input type="text" name="q">
  <button> Search Google </button>
</form>
<form action="https://www.youtube.com/results">
  <input type="text" name="search_query" placeholder="Search Youtube. Press Enter">
</form>

HTML: Radio bottons, checkbox, select

I agree

XS S M

Please Select an Entree

Amount of Cheese

Any special Requests?

Submit
<form action="/birds">
  <input type="checkbox" name="agree_tos" id="agree" checked>
  <label for="agree"> I agree </label>
  <p>
    <label for="xs">XS</label>
    <input type="radio" name="size" id="xs" value="xs">
        <label for="s">S</label>
    <input type="radio" name="size" id="s" value="s">
        <label for="m">M</label>
    <input type="radio" name="size" id="m" value="m">
  </p>
  <p>
    <label for="meal"> Please Select an Entree </label>
    <select name="meal" id="meal">
      <option value="">--Please choose an option--</option>
      <option value="fsh">Fish</option>
       <option value="veg">Vegetarian</option>
       <option value="stk">Steak</option>
      <option value="non" selected>Actually, I don't want it</option>
    </select>
  </p>
  <p>
    <label for="cheese"> Amount of Cheese </label>
    <input type="range" id="cheese" name="cheese_level" min="0" max="25" step="5">
  </p>
  <p>
    <label for="requests">Any special Requests?</label>
    <textarea id="requests" rows="10" name="requests" cols="40" placeholder="Type Something here, But this is not an input"></textarea>
  </p>
  <button>Submit</button>
  </form>

โœ… ~~Forms Practice Excercies(Done)~~

Form Validations

์š”์ฆ˜์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋กœ๊ทธ์ธ ์ฐฝ์— ์•„์ด๋””, ๋น„๋ฒˆ ์ž…๋ ฅํ•  ๋•Œ ๋ฐ”๋กœ ์ž˜๋ชป๋œ ๊ฒƒ ์•Œ๋ ค์ฃผ์ง€๋งŒ
์˜ˆ์ „์—๋Š” submit ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์•ผ๋งŒ refresh ๋˜๋ฉด์„œ ์•Œ๋ ค์คŒ (server side validation)


Enter First Name

Username

Submit
<form action="/dummy">
  <label for="first">Enter First Name</label>
  <input type="text" name="first" id="first" required>
  <p>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" minlength="5" maxlength="20" required>
    <input type="email">
    <input type="url">
  </p>
  <button>Submit</button>
  </form>

โœ… Creating a Marathon Registragion Form

Race Resistration!

First Name Last Name

Select a Race:

<input id="fun" type="radio" name="race" value="fun">
<label for="fun">Fun Run 5k</label>

<input id="half" type="radio" name="race" value="half">
<label for="half">Half Marathon</label>

<input id="full" type="radio" name="race" value="full">
<label for="full">Full Marathon</label>

Email Password

Select Age Group

Register

CSS

Rules

h1 {color: purple;}
selector {property: value;}
input[type="text"]{border:2px solid red;}

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