[Front-end๐Ÿฆ] #23 ์กฐ๊ฑด๋ฌธ, ๋ฐ˜๋ณต๋ฌธ, ํ•จ์ˆ˜ / 10~12์žฅ

๋˜์ƒยท2021๋…„ 11์›” 30์ผ
0

front-end

๋ชฉ๋ก ๋ณด๊ธฐ
37/58
post-thumbnail

1. ๋ฉ‹์‚ฌ ์ˆ˜์—…

์˜ค๋Š˜์€ ์ด์ „ ์‹œ๊ฐ„์— ๋‚˜๊ฐ”๋˜ ๋ฐ˜๋ณต๋ฌธ๋ถ€ํ„ฐ ๋‹ค์‹œ ์‹œ์ž‘ํ–ˆ๋‹ค. for๋ฌธ์— ๋Œ€ํ•ด ์ด์–ด์„œ ์ดํ•ด๋ฅผ ํ•˜๋ฉด์„œ ๋‚˜๊ฐ€๊ณ , for ... of ์‚ฌ์šฉ๋ฒ•๊ณผ forEach ์— ๋Œ€ํ•ด์„œ๋„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋‹ค๋ฃจ๊ณ , String built-in ํ•จ์ˆ˜๋“ค์„ ๋ช‡๊ฐ€์ง€ ๋ณด๊ณ  ๋„˜์–ด๊ฐ”๋‹ค. indexOf, slice, substr, replace. ๊ทธ๋ž˜์„œ ํŠน๋ณ„ํ•˜๊ฒŒ ๋” ์ •๋ฆฌํ•  ๊ฒƒ์€ ์—†์—ˆ๊ณ  ์ •๋ฆฌํ•˜์ง€ ์•Š์•˜๋˜ ๋‚ด์šฉ์ธ String ํ•จ์ˆ˜๋“ค๋งŒ #21 ์— ์ถ”๊ฐ€ํ–ˆ๋‹ค.


๊ทธ๋ฆฌ๊ณ  ์ˆ˜์—…์„ ๋“ค์œผ๋ฉด์„œ ๋ชฐ๋ž๋˜ ์šฉ์–ด๋“ค์— ๋Œ€ํ•œ ์„ค๋ช…์„ ํ•ด์ฃผ์…จ๋‹ค. ๋‚˜์ค‘์— ๋‹ค ๋‚˜์˜ฌ ๊ฒƒ ๊ฐ™๊ธด ํ•œ๋ฐ ํ•œ๋ฒˆ ์ •๋ฆฌํ•ด ๋ณด์•˜๋‹ค!!

์ฝœ๋ฐฑํ•จ์ˆ˜ : ํ•จ์ˆ˜๋ฅผ ์ธ์ž๊ฐ’์œผ๋กœ ์ „๋‹ฌ๋ฐ›์•„์„œ ๋‚˜์ค‘์— ์‚ฌ์šฉ.

let add = (x, y) => x + y; // ํ•จ์ˆ˜๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค.
// ๊ธฐ๋ช…ํ•จ์ˆ˜
let aa = function sum(x, y) {
  return x + y
}
// ์ต๋ช…ํ•จ์ˆ˜
(function(x, y) {
  return x + y
})

spread

function (...x) { // x iterable ์— ์žˆ๋Š” ๊ฒƒ์„ ํŽผ์ณ์„œ ๋ณด์—ฌ์คŒ
}

ํ‘œํ˜„์‹

//console.log() ๋Š” ๊ฒฐ๊ตญ console.log ๋ผ๋Š” ํ•จ์ˆ˜๊ฐ€ ์žˆ๋Š” ์ž๋ฆฌ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š” ๋ฌธ์žฅ์ž„.
let c = console.log;
c("hello"); // ์ฐํžŒ๋‹ค.

DOM (document object model)
html document๋ฅผ ๋งŒ๋“ค์–ด๋‚ผ ์ˆ˜ ์žˆ๋Š” ํ”„๋ฆฐํŠธ ๊ณต์žฅ ๊ฐ™์€ ๊ฒƒ. js๋กœ ์—ฌ๊ธฐ๋ฅผ ๊ฑด๋“œ๋ ค์„œ html์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

strict mode

'use strict' // ์ƒˆ ๋ฒ„์ „์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด์„œ ์ด์ „ ๋ฒ„์ „ ์ฝ”๋“œ๋ฅผ ์•ˆ๋Œ์•„๊ฐ€๊ฒŒ

์ƒํ˜ธ์ž‘์šฉ

//prompt
prompt('hello?'); // ์ž…๋ ฅ๋ฐ›๋Š”
confirm('hi') // ํ™•์ธ true ์ทจ์†Œ false
alert('hello') // ๊ฒฝ๊ณ ์ฐฝ




2. Deep Dive

  1. ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ๋งํฌ
  2. ์›์‹œ ๊ฐ’๊ณผ ๊ฐ์ฒด ๋น„๊ต ๋งํฌ
  3. ํ•จ์ˆ˜ ๋งํฌ

์ฑ… ๋‚ด์šฉ ์š”์•ฝ์€ ์ €์ž‘๊ถŒ์— ๊ฑธ๋ฆด ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•˜์—ฌ,,, (์‚ฌ์‹ค ์–ด๋””๊นŒ์ง€๊ฐ€ ์š”์•ฝ์ด๊ณ  ์–ด๋””๊นŒ์ง€๋ฅผ ๋Š๋‚€์ ์œผ๋กœ ์น  ์ˆ˜ ์žˆ์„ ์ง€ ๋ชจ๋ฅด๊ฒ ์–ด์„œ ํ•ด๋‹น ๋ถ€๋ถ„์€ ๊ฐœ์ธ ๋…ธ์…˜ํŽ˜์ด์ง€๋กœ ์ด๋™ํ–ˆ๋‹ค.)




3. ๋Š๋‚€์ 

  • ๋ฌธ๋ฒ• ๊ณต๋ถ€๋ผ์„œ ์ดํ•ดํ•˜๋ฉด์„œ ์˜ค ~ ํ•˜๋Š”๊ฑด ์žฌ๋ฐŒ๋Š”๋ฐ ๋ญ”๊ฐ€ HTML ์ฒ˜๋Ÿผ ์ดฅ์ดฅ ๋งŒ๋“ค์–ด์ง€๋Š”๊ฒŒ ๋ˆˆ์— ์•ˆ๋ณด์—ฌ์„œ ๊ทธ๋Ÿฐ๊ฐ€... ์ˆ˜์—… ๋๋‚˜๊ณ  ๋˜ ๊ณต๋ถ€ํ•˜๊ธฐ๊ฐ€ ํž˜์ด ์•ˆ๋‚œ๋‹ค.
  • ๊ทผ๋ฐ ๋˜ ์„œ๋ฅ˜๋ž‘ ๋ฉด์ ‘ ๊ฐ™์ด ์ค€๋น„ํ•˜๋ฉด์„œ ํ•˜๋‹ˆ๊นŒ ์ฐจ๋ผ๋ฆฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋น ์ ธ๋“œ๋Š”๊ฒŒ ๋” ์žฌ๋ฐŒ๋‹ค. ๋ฉด์ ‘ ์–ด๋–กํ•˜๋ƒ......
  • ์ง€๊ธˆ๊นŒ์ง€ ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์„ ์–ธํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ค‘ ์ œ๋Œ€๋กœ ์•„๋Š”๊ฒŒ OOP ํ•˜๋‚˜ ๋ฟ์ด์—ˆ๋Š”๋ฐ, ํ•จ์ˆ˜ํ˜• ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ์ •์˜๋ฅผ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ์„ ์–ธํ˜•์€... ๋ญ”๊ฐ€ ๋ณ€์ˆ˜ ์„ ์–ธ ์‹์œผ๋กœ ๊ฐ€๋Š” SwiftUI์—์„œ ์“ฐ๋Š” ๊ทธ๋Ÿฐ๊ฑด๋ฐ... ์ •ํ™•ํ•˜๊ฒŒ ์„ค๋ช…์€ ๋ชปํ•˜๊ฒ ๋‹ค.. ์ด์ œ ์„ ์–ธํ˜•๋งŒ ๋ฟŒ์‹œ๋ฉด ๋œ๋‹ค.
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ ์ง„์งœ ๊ทธ๋ƒฅ ์ž์นซํ•˜๋ฉด ์•ˆํ’€๊ณ  ๋„˜์–ด๊ฐ€๊ฒŒ ๋˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ์‰ฌ์šด๊ฑฐ๋ผ๋„ ๊ผฌ์˜ฅ ํ’€์–ด๋ณด์ž.




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

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