[Front-end๐Ÿฆ] #16.5 ์ฝ”ํ…Œ + ํ”„๋กœ์ ํŠธ ๋ณต์Šต

ddosangยท2021๋…„ 11์›” 20์ผ
0

front-end

๋ชฉ๋ก ๋ณด๊ธฐ
27/58

1. Winter Coding Test

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฌธ์ œ ํ’€๋ ค๊ณ  ๋“ค์–ด๊ฐ”๋‹ค๊ฐ€ ๋ฉ”์ธ ๋ฐฐ๋„ˆ์— ์žˆ์–ด์„œ ์ง€์›ํ•œ ์œˆํ„ฐ์ฝ”ํ…Œ! 205์  ๋ฐ›์•˜๋‹ค...

SQL์€ ๋„ˆ๋ฌด ์˜ค๋žœ๋งŒ์— ๋ด์„œ ์žŠ์–ด๋ฒ„๋ ค์„œ ์‚ฌ์‹ค ์ƒ๊ด€ ์—†์—ˆ๊ณ ... ๋‚˜๋จธ์ง€ 3๊ฐœ๋งŒ ํ’€์ž ํ–ˆ๋Š”๋ฐ, 1๋ฒˆ์€ ๋กœ์ง์€ ๋งž๊ฒŒ ์งฐ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ test case 1๊ฐœ ๋นผ๊ณ  ์ „๋ถ€ time-out ๋‚˜์„œ 10์  ๋ฐ›์•˜๊ณ , 2๋ฒˆ์€ ๊ณ ๋ คํ•˜์ง€ ๋ชปํ•œ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์–ด์„œ ํ•œ๊ฐœ ๋นผ๊ณ  ์ „๋ถ€ ํ†ต๊ณผ 95์ , 3๋ฒˆ์€ ๋”ฑ๋ด๋„ ๋ฌธ์ œ์— ์„œ์ˆ ๋œ ๋ฐฉํ–ฅ๋Œ€๋กœ ํ’€๋ฉด time-out ๋‚  ๊ฒƒ ๊ฐ™์•˜๋Š”๋ฐ ์›ฌ์ผ๋กœ ๊ทธ๋ ‡๊ฒŒ ์ ‘๊ทผ์„ ์•ˆํ•ด์„œ 100์  ๋ฐ›์•˜๋‹ค.

๋“€์–ผ ๋ชจ๋‹ˆํ„ฐ๋Š” ์•ˆ๋ผ์„œ ๋…ธํŠธ๋ถ์„ ๋ชจ๋‹ˆํ„ฐ์— ์—ฐ๊ฒฐํ•ด์„œ ํ’€์—ˆ๋Š”๋ฐ ์ž ๊น ์„  ๊ฑด๋“œ๋ ธ๋‹ค๊ฐ€ ์—ฐ๊ฒฐ ๋Š๊ฒจ์„œ ํ™”์ƒ ๊ณต์œ ๋„ ๋Š๊ธฐ๋Š”....... ๋Œ€๋‹จํ•œ ์ผ์ด ์žˆ์—ˆ๋‹ค. ์•ž์œผ๋กœ๋Š” ๊ทธ๋ƒฅ ๋…ธํŠธ๋ถ์œผ๋กœ ๋ณด๋˜๊ฐ€ ๋ชจ๋‹ˆํ„ฐ ์“ธ๊ฑฐ๋ฉด hdmi ์ผ€์ด๋ธ”์„ ์ƒˆ ๊ฑฐ ์‚ฌ์™€์•ผ๊ฒ ๋‹ค...




2. Login Modal

  • ๋ฒ„ํŠผ๋งˆ๋‹ค cursor: pointer; ๋ฅผ ์ฃผ๋Š” ๊ฒƒ๋ณด๋‹ค reset.css ์—์„œ ์ฃผ๋Š” ๊ฒƒ์ด ๋‚ซ์ง€ ์•Š์„๊นŒ ํ–ˆ๋Š”๋ฐ, ๊ทธ๋ ‡๊ฒŒ ์คฌ๋”๋‹ˆ ์•ˆ๋ผ์„œ ์ฐพ์•„๋ดค๋”๋‹ˆ, ๋ฒ„ํŠผ์€ ๊ต‰์žฅํžˆ ์˜ค๋ž˜๋œ ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ปค์„œ๋ฅผ ๋ฐ”๊พธ์ง€ ์•Š์•„๋„ ๊ธฐ๋ณธ ์Šคํƒ€์ผ๋งŒ์œผ๋กœ๋„ ๋ˆŒ๋Ÿฌ์•ผํ•˜๋Š”๊ฑธ ์•Œ๊ธฐ ๋•Œ๋ฌธ์— default cursor๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ•œ๋‹ค. ๊ตณ์ด ์ฃผ๊ณ  ์‹ถ์œผ๋ฉด class ์— ์ค˜์•ผํ•œ๋‹ค.
    Why don't button HTML elements have a CSS cursor pointer by default?
  • ์ˆ˜์—…์‹œ๊ฐ„์— ๋ญ”๊ฐ€ ๊ผฌ์—ฌ์„œ ์ ์šฉ์ด ์•ˆ๋์—ˆ๋Š”๋ฐ.. ์™ ์ง€ live server ๋ฌธ์ œ์ผ์ˆ˜๋„ ์žˆ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค. live server ์ผ  ๊ฒƒ๋ณด๋‹ค ๋ฐ–์— ์žˆ๋Š” ๊ฒƒ์„ ์ƒ๋Œ€ ๊ฒฝ๋กœ๋กœ ์ง€์ •ํ–ˆ๋”๋‹ˆ ์ด๋ฏธ์ง€๋ฅผ ๋ชป ๋ถˆ๋Ÿฌ์˜ค๋”๋ผ...
  • JS challenge์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ์„ ์ ์šฉํ•ด์„œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด modal ์ฐฝ์ด ๋œจ๊ฒŒ ํ•˜๋Š๋ผ html ๊ตฌ์กฐ๊ฐ€ ์กฐ๊ธˆ ๋ฐ”๋€Œ์—ˆ๋‹ค. ๊ทธ๋ž˜๋„ ๊ฐ์‹ธ๋Š” ๋ถ€๋ถ„๋งŒ ๋ฐ”๋€๊ฑฐ๋ผ BEM naming์— ํฐ ์ˆ˜์ •์ด ์žˆ์ง„ ์•Š์•˜๋‹ค. ๋‹คํ–‰์ด๋‹ค...
  • ์›ฌ๋งŒํ•˜๋ฉด ๋ฐ”๊นฅ container ์˜ height ๋Š” content ๋†’์ด์— ์ข…์†๋˜๊ฒŒ CSS๋ฅผ ์ˆ˜์ •ํ–ˆ๋‹ค.



3. Vending Machine

3-1. ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฐ›์€ ๋‚ด์šฉ ๋œฏ์–ด๋ณด๊ธฐ.

tipsโœจ

  • *{box-sizing : border-box} ์ƒ๋‹จ์— ๋„ฃ์–ด์„œ ํŽธํ•˜๊ฒŒ ๊ฐ€์ž!!
    |
  • flex-basis๋„ ์ข‹์ง€๋งŒ width๋กœ ์‚ฌ์šฉํ•ด์„œ ๋ฐ˜์‘ํ˜•์„ ์žก์„ ๋•Œ width๊ฐ€ ์•ˆ๋จน๋Š” ์ผ์ด ์—†๋„๋ก ํ•˜์ž!
    |
  • ์˜ค๋ฅธ์ชฝ ์„น์…˜์€ grid๋กœ grid-template-rows: 50px 474px; gap : 20px;๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ ‡๊ฒŒ ์˜ค๋ฅธ์ชฝ ์•„๋ž˜ ์š”์†Œ์˜ margin-top, height ์„ค์ •์„ ์ƒ๋žตํ•  ์ˆ˜ ์žˆ๋‹ค.
    |
  • txt-item์—์„œ ๋ฒ„ํŠผ์ฒ˜๋Ÿผ ๋ณด์ด๊ณ  ์‹ถ์„ ๋•Œ, line-height, width ๊ฐ’์„ ์ฃผ๋Š” ๊ฒƒ๋ณด๋‹ค padding ์„ ์ ์šฉํ•˜๋ฉด ๊ฐ„๋‹จํ•ด์ง„๋‹ค!!
    |
  • ๋ฐ˜์‘ํ˜•์—์„œ main display๋Š” flex ์†์„ฑ์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ  block์œผ๋กœ ์ค˜์„œ๋„ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•˜๋‹ค!!

๊ฐœ์„ ์ ๐Ÿ‘Ž

  • ๋ธ”๋Ÿญ ์š”์†Œ๋Š” margin: 0 auto; ๋กœ ๊ฐ€์šด๋ฐ ์ •๋ ฌ ๊ฐ€๋Šฅ! ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์—์„œ๋„ ๋‹ค์‹œ ์กฐ์ ˆ์„ ์•ˆํ•ด๋„ ๋จ.
.tit-app {
    /* position: relative; top: 0; left: calc(50% - 193px); */
    /* ๊ฐœ์„  */
    margin: 0 auto; 
    background-image: url('../img/logo.png');
    width: 386px;
    height: 180px;
    background-size: 386px 180px;
}
  • block ์š”์†Œ๋Š” ์ž์‹์˜ ๋†’์ด์˜ ํ•ฉ(min-height, height)์ด ๊ณง ๋ถ€๋ชจ์˜ ๋†’์ด๋กœ ์ž๋™ ์„ค์ •๋˜๊ธฐ ๋•Œ๋ฌธ์— height, min-height, align-items๋Š” ์ƒ๋žตํ•˜์ž! (์˜๋„ํ•˜๋Š” ์Šคํƒ€์ผ์ด ์žˆ์„ ๊ฒฝ์šฐ ์ถ”๊ฐ€!)
    |
  • ๊ฐ€์žฅ ๋ฐ”๊นฅ์ชฝ์— padding ์„ ์ค˜์„œ ๋†’์ด๋ฅผ ๊ฒฐ์ •ํ•˜๋Š”๊ฑด ์ข‹์ง€๋งŒ wrap ํ•˜๋Š” ํƒœ๊ทธ๋“ค์€ margin์„ ์‚ฌ์šฉํ•ด์„œ ์กฐ์ ˆํ•˜์ž. margin-bottom์€ ๋งˆ์ง„ ๊ฒน์นจ ํ˜„์ƒ ๋•Œ๋ฌธ์— ์•ˆ๋จนํžˆ๋‹ˆ, .app(๊ฐ€์žฅ ๋ฐ”๊นฅ ํƒœ๊ทธ)์— padding-bottom์„ ์“ฐ์ž.
    |
  • ์ž์‹์— width๋ฅผ ์ง€์ •ํ•˜๊ธฐ ๋ณด๋‹ค๋Š” ๋ถ€๋ชจ์˜ width๋ฅผ ๋„ฃ์–ด์„œ ์ž์‹์„ ์žก์ž. height๋Š” ์ƒ๋žตํ•˜์ž.
    |
  • .back-sold-out img๋Š” ๋ถ€๋ชจ position์ด absolute๋ผ์„œ position์„ ์„ค์ •ํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค.
    |
  • inline์š”์†Œ์ธ๋ฐ block์ด๊ณ  ์‹ถ์€ ๊ฒƒ์€ block ๋ณด๋‹ค๋Š” inline-block ์œผ๋กœ ์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
    |
  • button tag ์•ˆ์˜ ์š”์†Œ๋“ค์€ ์ž๋™ ์ค‘์•™ ์ •๋ ฌ!
    |
  • cont-myitems strong์€ ์•ˆ์— ๋˜ strong์ด ์žˆ์œผ๋‹ˆ๊นŒ, ์ง๊ณ„ ์ž์† ์„ ํƒ์ž๋ฅผ ์‚ฌ์šฉํ•˜์ž.
    |
  • txt-total(strong)์€ width 100%๋กœ ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ด์•ผ text-align์ด ์ ์šฉ๋œ๋‹ค.
    |
  • ๋ฐ˜์‘ํ˜•์„ ์œ„ํ•ด min-width๊ฐ’์„ #app์— ์ค˜์•ผํ•ฉ๋‹ˆ๋‹ค.

3-2. ์ •๋ฆฌ

  • width ๋Š” ์ž์‹์ด ๋ถ€๋ชจ์— ์ข…์†๋˜๊ฒŒ ์„ค์ •ํ•˜๊ณ , ์ž์‹ ์š”์†Œ์—๋Š” padding ๊ฐ’์„ ์ ๊ทน ์ด์šฉํ•˜์ž.
  • ์ „์ฒด height ๋Š” ์ž์‹์˜ height์— ์ข…์†๋˜๋„๋ก ์„ค์ •ํ•˜์ž.
  • ๋””์ž์ธ์— ๋‚˜์˜จ ๊ฐ’์„ ๋ฐ”๋กœ padding-bottom์œผ๋กœ ๋จน์ด์ง€ ๋ง๊ณ ,100vh๋กœ ์„ค์ •ํ•˜๊ณ  ์ ๋‹นํ•œ ๊ฐ„๊ฒฉ์„ ์ฃผ์ž.
  • inline ์š”์†Œ๊ฐ€ block ์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๊ฒŒ ํ•˜๊ณ  ์‹ถ์„ ๋•Œ๋Š” inline-block์„ ์ด์šฉํ•˜์ž.



4. ์ž‘์€ ํšŒ๊ณ 

fact - ๋ฌด์Šจ ์ผ์ด ์žˆ์—ˆ๋Š”์ง€, ๋ญ˜ ํ–ˆ๋Š”์ง€

  • ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋ฅผ ๋ณด๊ณ ......
  • ์ง„ํ–‰ํ•˜๊ณ  ์žˆ๋˜ ๋‘๊ฐ€์ง€ ํ”„๋กœ์ ํŠธ(Vending Machine, Login Modal)๋ฅผ ๋ณต์Šตํ•˜๊ณ 
  • ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฐ›์€ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๊ณ  ์ฝ”๋“œ๋ฅผ ๊ณ ์ณ๋ณด์•˜๋‹ค.

feeling - ๋ฌด์—‡์„ ๋Š๊ผˆ๋Š”์ง€,
finding - ์–ด๋–ค ์ธ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ์—ˆ๋Š”์ง€

  • ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ๋ฅผ ๋ณด๊ณ ... ๊ณต๋ถ€๊ฐ€ ๋” ํ•„์š”ํ•˜๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  3๋ฒˆ ๋ฌธ์ œ๋ฅผ ์ƒ๊ฐ๋ณด๋‹ค ์ž˜ ํ‘ผ ์ ์€ ๋งŒ์กฑ์Šค๋Ÿฝ๋‹ค!! ๊ณ„์† ์ต์ˆ™ํ•ด์ง€์ž.
  • ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฐ›์€ ๊ฒƒ์„ ๋ณด๋‹ˆ๊นŒ ๊ฐ™์€ ํ™”๋ฉด์ด ๋‚˜์™€๋„ ๊ฒฝ๋ ฅ์ž๋“ค ์‚ฌ์ด์— ์Œ“์ธ ํšจ์œจ์ ์ธ ๋ฐฉ์‹์€ ์ •ํ•ด์ ธ์žˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

future action - ์•ก์…˜ ํ”Œ๋žœ์ด ์žˆ๋Š”์ง€

  • ๋ฉ˜ํ† ๋‹˜์€ ์กฐ๊ธˆ... ํž˜๋“œ์‹œ๊ฒ ์ง€๋งŒ... ๊ณผ์ •์ด ๋๋‚˜๋ฉด ๋ฐ›๊ธฐ ํž˜๋“œ๋‹ˆ๊นŒ!! ์ฝ”๋“œ๋ฆฌ๋ทฐ๋ฅผ ๋” ๋งŽ์ด ์˜๋ขฐํ•ด์•ผ๊ฒ ๋‹ค.
  • ์ฝ”๋”ฉ ํ…Œ์ŠคํŠธ ๊ฐ•์˜์—์„œ ์ง€๊ธˆ๊นŒ์ง€ ํ‘ผ ~์ž๋ฃŒ๊ตฌ์กฐ๊นŒ์ง€ ์„น์…˜์˜ ๋ฌธ์ œ๋ฅผ ์ผ์ฃผ์ผ์— 5~10๊ฐœ์”ฉ ๋‹ค์‹œ ํ’€๊ธฐ
  • ์Šคํ„ฐ๋””์—์„œ ํ•˜๋Š” ๋ฌธ์ œ๋“ค๋„ 2๊ฐœ ์ด์ƒ์˜ ์–ธ์–ด๋กœ ํ’€๊ธฐ
  • dfs, bfs ๋“ฑ ์–ด๋ ค์šด ๋ฌธ์ œ๋Š” ์ž๋ฃŒ ์ฐพ์•„๋ณด๊ณ , ๊ฐ•์˜ ๋“ฃ๊ณ  ํ’€์–ด๋ณด๊ธฐ

feedback

์ถ”ํ›„ ์ถ”๊ฐ€ ์˜ˆ์ •.




profile
0๋…„์ฐจ iOS ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

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