yceffort

43 posts tagged with "javascript"

Tensorflow.js - 07. Build an image classifier

Posted on February, 2020

Transfer learning image classifier 1. Introduction ๋ฐฐ์šฐ๊ฒŒ ๋  ๊ฒƒ 2. ์š”๊ตฌ ์‚ฌํ•ญ 3. Tensorflow.js์™€ MobileNet ๋ถˆ๋Ÿฌ์˜ค๊ธฐ 4. ๋ธŒ๋ผ์šฐ์ €์—์„œ MobileNet์„ ๋กœ๋”ฉ 5. MobileNet์„ ํ…Œ์ŠคํŠธ ํ•˜๊ธฐ 6. ๋ธŒ๋ผ์šฐ์ €์—์„œ ์›น์บ ์„ ํ™œ์šฉํ•˜์—ฌ MobileNet ๋ชจ๋ธ์„ ์‹คํ–‰ํ•˜๊ธฐ 7. MobileNetโ€ฆ

Read full post

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ http ์š”์ฒญํ•˜๊ธฐ - fetch์— ๋Œ€ํ•œ ๊ณ ์ฐฐ

Posted on January, 2020

1. ์„œ๋ก  2. XMLHttpRequest 3. JQuery Ajax 3. async await & fetch 4. fetch polyfill 5. deep dive to fetch 5-1. ์—๋Ÿฌ ์ฒ˜๋ฆฌ 5-2. Abortable Fetch 5-3. fetch in react 6. ๊ฒฐ๋ก  1. ์„œ๋ก  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ httpโ€ฆ

Read full post

Tensorflow.js - 05. Training and Prediction in Node.js

Posted on January, 2020

Training and Prediction in Node.js 1. ์†Œ๊ฐœ 2. ์š”๊ตฌ ์‚ฌํ•ญ 3. Nodejs.app ์„ค์น˜ 4. ํ•™์Šต/ํ…Œ์ŠคํŠธ์šฉ ๋ฐ์ดํ„ฐ ์„ค์น˜ํ•˜๊ธฐ 5. ๊ตฌ์งˆ์„ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ชจ๋ธ ๋งŒ๋“ค๊ธฐ 6. ๋ชจ๋ธ์„ ์„œ๋ฒ„์—์„œ ํ›ˆ๋ จ์‹œํ‚ค๊ธฐ 7. ํด๋ผ์ด์–ธํŠธ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ณ  display ์šฉ ์ฝ”๋“œ ๋งŒ๋“ค๊ธฐ 8. ์•ฑ ์‹คํ–‰ํ•˜๊ธฐ 9. ๋ฐฐ์šด๊ฒƒ Training and Predictionโ€ฆ

Read full post

React count down์—์„œ ๋ฐฐ์šด event-emitter ์™€ requestAnimationFrame

Posted on January, 2020

๋ฆฌ์•กํŠธ์—์„œ ์นด์šดํŠธ ๋‹ค์šด์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šด ๊ฒƒ๋“ค ๋ฆฌ์•กํŠธ์—์„œ ์นด์šดํŠธ ๋‹ค์šด์„ ๋งŒ๋“ ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ๊ฐ€์žฅ ๋จผ์ € ์ƒ๊ฐ๋‚˜๋Š”๋Œ€๋กœ, ๋น ๋ฅด๊ฒŒ ๊ตฌํ˜„ํ•œ๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋Š๋‚Œ์ด ๋  ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ์ด ์ฝ”๋“œ๋Š” ํ•œ๊ฐ€์ง€ ๋ฌธ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. setInterval, setTimeoutโ€ฆ

Read full post

Chrome Samesite ์ฟ ํ‚ค ์ •์ฑ…

Posted on January, 2020

๋ฌธ์ œ์˜ ์‹œ์ž‘ ์ง€๋‚œ ์ฃผ๋ง, ์—„์ฒญ๋‚˜๊ฒŒ ๊ธ‰ํ•˜๊ฒŒ ๋น ๋ฅธ ์†๋„๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ heroku์— ์˜ฌ๋ฆด ์ผ์ด ์žˆ์—ˆ๋‹ค. DB๋„ ์ƒˆ๋กœ๋งŒ๋“ค์–ด์•ผํ•˜๊ณ , ๋กœ๊ทธ์ธ๋„ ํ•„์š”ํ•œ ์‚ฌ์ดํŠธ๋ผ DB๋Š” Heroku์˜ Clean DB๋ฅผ, ๋กœ๊ทธ์ธ์€ google sign-in for websites์„ ์‚ฌ์šฉํ•˜์˜€๋‹ค. ์ฒ˜์Œ์—๋Š” passport google auth๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋‹ค๊ฐ€, ๊ทธ๋ƒฅ ํ•˜๋Š” ๊น€์— ์ง์ ‘ apiโ€ฆ

Read full post

Tensorflow.js - 04. CNN

Posted on January, 2020

Handwritten digit recognition with CNNs 1. ๋“ค์–ด๊ฐ€๊ธฐ์ „์— ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ ์šฐ๋ฆฌ๊ฐ€ ๋ฐฐ์šธ ๊ฒƒ ํ•™์Šต ์ „์— ์ค€๋น„ํ•ด์•ผ ํ•  ๊ฒƒ 2. Set up HTML, Javascript ์ƒ์„ฑ ๋ฐ์ดํ„ฐ์™€ ์ฝ”๋“œ๋ฅผ ์œ„ํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ์ƒ์„ฑ ํ…Œ์ŠคํŠธ ํ•ด๋ณด๊ธฐ 3. Load the Data 4. ์ž‘์—…์˜ ๊ฐœ๋…ํ™”โ€ฆ

Read full post

Tensorflow.js - 03. Linear Regression

Posted on December, 2019

Linear Regression ๋ช‡ ๋ฒˆ์งธ ์„ ํ˜• ํšŒ๊ท€์ธ์ง€ ์•Œ ์ˆ˜ ์—†๋‹ค. 01. 2d data๋กœ ์˜ˆ์ธกํ•ด๋ณด๊ธฐ ์ด๋ฒˆ ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” ์ž๋™์ฐจ ์„ธํŠธ๋ฅผ ํ‘œํ˜„ํ•œ ์ˆซ์ž ๋ฐ์ดํ„ฐ๋กœ ์˜ˆ์ธกํ•˜๋Š” ๋ชจ๋ธ์„ ํ›ˆ๋ จ์‹œ์ผœ ๋ด…๋‹ˆ๋‹ค. ์ด ์—ฐ์Šต์—์„œ๋Š” ๋‹ค์–‘ํ•œ ์ข…๋ฅ˜์˜ ๋ชจ๋ธ์„ ํ›ˆ๋ จํ•˜๋Š” ๊ณตํ†ต์ ์ธ ๋‹จ๊ณ„๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ , ์ด์— ๋”ฐ๋ผ ์ž‘์€ ๋ฐ์ดํ„ฐ ์„ธํŠธ์™€ ๊ฐ„๋‹จํ•œ ๋ชจ๋ธ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. 1์ฐจ์ ์ธ ๋ชฉํ‘œ๋Š” Tensorflowโ€ฆ

Read full post

Tensorflow.js - 01. ์‹œ์ž‘ํ•˜๊ธฐ

Posted on December, 2019

https://www.tensorflow.org/js/tutorials์„ ๊ฐœ์ธ์ ์ธ ํ•™์Šต์„ ์œ„ํ•ด ๋ฒˆ์—ญํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. ์ •ํ™•ํ•œ ๋ฒˆ์—ญ์„ ์œ„ํ•ด์„œ๊ฐ€ ์•„๋‹ˆ๋ผ, ๊ฐœ์ธ์ ์ธ ๊ณต๋ถ€๋ฅผ ์œ„ํ•ด์„œ ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜คํ•ด ใ„ดใ„ด ์‹œ์ž‘ํ•˜๊ธฐ Tensorflow.js๋Š” ๋ธŒ๋ผ์šฐ์ €์™€ Node.jsโ€ฆ

Read full post

Tensorflow.js - 02. ์„ค์น˜ํ•˜๊ธฐ

Posted on December, 2019

์ด์ „๊ธ€ ๋ณด๊ธฐ ์„ค์น˜ ๋ธŒ๋ผ์šฐ์ € ์„ค์น˜ Tensorflow.js๋ฅผ ์„ค์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‘ ๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. Script tag๋ฅผ ์ด์šฉํ•˜๋Š”๋ฒ• npm์„ ์ด์šฉํ•ด์„œ ์„ค์น˜ํ•˜๊ณ , Parcel, Webpack, Rollupโ€ฆ

Read full post

๋ฆฌ์•กํŠธ ํ…์ŠคํŠธ ํ•˜์ด๋ผ์ดํŠธ ๋งŒ๋“ค๊ธฐ

Posted on October, 2019

์š”๊ตฌ์‚ฌํ•ญ ํ•œ ์—˜๋ฆฌ๋จผํŠธ์•ˆ์—์„œ ํŠน์ •ํ•œ ํ‚ค์›Œ๋“œ๋ฅผ ๋‹ค๋ฅธ ์ƒ‰์‹ฑ์œผ๋กœ ๋ฐ”๊ฟ”์„œ ์ถœ๋ ฅํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์•„๋ž˜ ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด์ž before after ์˜์‹์˜ ํ๋ฆ„ ํŠน์ • ํ‚ค์›Œ๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋Š”์ง€, ๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์„ ๋”ฐ๋กœ ๋ฝ‘์•„ ๋‚ผ ์ˆ˜ ์žˆ๋Š” ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ผ๊นŒ? ๋ฐ”๋กœ split ์ผ ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์—ฌ๊ธฐ์„œ ๋‘ ๊ฐ€์ง€ ๋ชฐ๋ž๋˜ ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋œ๋‹ค. ์ฒซ ๋ฌธ์ž์— seperatorโ€ฆ

Read full post

๋ธŒ๋ผ์šฐ์ € ํžˆ์Šคํ† ๋ฆฌ ์กฐ์ž‘

Posted on September, 2019

๋ธŒ๋ผ์šฐ์ € ํžˆ์Šคํ† ๋ฆฌ ๋ธŒ๋ผ์šฐ์ €์˜ ํžˆ์Šคํ† ๋ฆฌ๋Š” ์•ˆ์— ์žˆ๋‹ค. ๋งŒ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์„ ๋ฟ, ์‹ค์ œ ๋‚ด๋ถ€์— ๋ฆฌ์ŠคํŠธ๋Š” ๊ฐ€์ ธ์˜ฌ ์ˆ˜๊ฐ€ ์—†๋Š”๋ฐ ์ด๋Š” ๋ณด์•ˆ์ƒ์˜ ๋ฌธ์ œ ๋•Œ๋ฌธ์ด๋‹ค. ๋Š” ๊ฐ๊ฐ ๋ธŒ๋ผ์šฐ์ €์˜ ์•ž์œผ๋กœ๊ฐ€๊ธฐ ๋’ค๋กœ ๊ฐ€๊ธฐ์™€ ๋™์ผํ•œ ์—ญํ• ์„ ํ•œ๋‹ค. ํŠน์ • ์œ„์น˜๋กœ ๊ฐ€๊ธฐ ํ˜„์žฌ ํŽ˜์ด์ง€์˜ index๋Š” 0 ์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค. -1 ์€ ๋ฐ”๋กœ ์ „ ํŽ˜์ด์ง€,โ€ฆ

Read full post

๋ฆฌ์•กํŠธ ์ธํ„ฐ๋ทฐ ์งˆ๋ฌธ & ๋‹ต (2)

Posted on August, 2019

๋ชฉ์ฐจ table of contents React Router What is React Router? How React Router is different from history library? What are the components of React Router v4? What is the purpose of and methods of ? Howโ€ฆ

Read full post

๋ฆฌ์•กํŠธ ์ธํ„ฐ๋ทฐ ์งˆ๋ฌธ & ๋‹ต (1)

Posted on August, 2019

๋ชฉ์ฐจ Core React What is React What are the major features of React? What is JSX? What is the difference between Element and Component? How to create components in React? When to use a Class Componentโ€ฆ

Read full post

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํƒ€์ž… ๋‹จ์–ธ

Posted on August, 2019

๋ฌธ์ œ์˜ ์‹œ์ž‘ ๋ฌธ์ œ์˜ ์‹œ์ž‘์€ ์—ฌ๊ธฐ ์˜€๋‹ค. ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์•˜๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ์—์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค. ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ์˜ค๋Š” ์ด enum์˜ ํ‚ค๊ฐ€ ์•„๋‹ ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ ์˜€๋‹ค. ๊ธฐ์กด lint ๋ฃฐ์—์„œ๋Š” any๋ฅผ acceptโ€ฆ

Read full post

๋ฆฌ์•กํŠธ ์ธํ„ฐ๋ทฐ ์งˆ๋ฌธ & ๋‹ต

Posted on August, 2019

์›๋ฌธ-reactjs-interview-questions 1. Core React 2. React - Router, Internationalization, Redux, Native and supported libraries and Integration 

Read full post

React Hooks Api (2)

Posted on August, 2019

useReducer ์˜ ๋Œ€์ฒด ํ•จ์ˆ˜๋‹ค. ๋‹ค์ˆ˜์˜ ํ•˜์œ— ๊ฐ’์„ ๋งŒ๋“œ๋Š” ๋ณต์žกํ•œ ๋กœ์ง, ํ˜น์€ ๋‹ค์Œ state๊ฐ€ ์ด์ „ state์˜ ์˜์กด์ ์ธ ๊ฒฝ์šฐ์— ์“ด๋‹ค. ๋ญ๊ฐ€ ๋ญ”์ง€ ๋ชจ๋ฅด๊ฒ ์œผ๋‹ˆ๊นŒ ์˜ˆ์ œ๋ฅผ ๋ณด์ž. useState๋ฅผ ์“ฐ๊ธฐ์ „ ์˜ˆ์ œ๋ฅผ ๋ณด๋‹ˆ ๋Œ€์ถฉ ๊ฐ์ด ์˜จ๋‹ค. dispatch๋ฅผ ํ†ตํ•ด์„œ state๊ฐ’์— ๋ณ€ํ™”๋ฅผ ์ฃผ์ง€ ์•Š๊ณ  stateโ€ฆ

Read full post

React Hooks Api (1)

Posted on August, 2019

Hooks API Hook์€ react 16.8์—์„œ ์ถ”๊ฐ€๋œ ๊ฐœ๋…์œผ๋กœ, Hook์„ ์‹œ์šฉํ•˜๋ฉด class๋ฅผ ๊ฐ–์„ฑํ•˜์ง€ ์•Š์•„๋„ state๊ด€๋ฆฌ์™€ ๊ฐ™์€ react์˜ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ธฐ๋ณธ Hook useStateโ€ฆ

Read full post

Javascript Reduce

Posted on July, 2019

๋ฉ์ฒญ์ด๋ผ ๊ทธ๋Ÿฐ์ง€ ํ•จ์ˆ˜๊ฐ€ ์ž˜ ์ดํ•ด ๋˜์ง€ ์•Š์•˜๋‹ค. Reduce : ์ฒ˜๋ฆฌํ•  ํ˜„์žฌ ์š”์†Œ (optional): ์ฒ˜๋ฆฌํ•  ์š”์†Œ์˜ ์ธ๋ฑ์Šค : ์ฝœ๋ฐฑ์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ๊ณ„์†ํ•ด์„œ ๋ˆ„์ ํ•œ๋‹ค. ์ด ์˜ˆ์ œ์—์„œ๋Š” ์ฒ˜์Œ์—” , ๊ทธ ๋‹ค์Œ์—” , ๊ทธ ๋‹ค์Œ์—” ๊ฐ€ ๋  ๊ฒƒ์ด๋‹ค. (optional): ๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด, ์—ฌ๊ธฐ์„œ๋Š” ์ด ๋  ๊ฒƒ์ด๋‹ค. (optional): ์˜ ์ตœ์ดˆ ๊ฐ’. ์—†์œผ๋ฉด ๋ฐฐ์—ด์˜โ€ฆ

Read full post

Javascript Proxy

Posted on July, 2019

Proxy ์•„๋ž˜์˜ ์˜ˆ์ œ๋ฅผ ์‚ดํŽด๋ณด์ž. ์— ์œผ๋กœ ์ ‘๊ทผํ•˜๋ ค๋Š” ์‹œ๋„๊ฐ€ ์ค‘๊ฐ„์— ๊ฐ€๋กœ์ฑ„๊ธฐ ๋‹นํ–ˆ๋‹ค.

Read full post

Javascript Set ๊ทธ๋ฆฌ๊ณ  Map

Posted on July, 2019

๊ทผ๋ฐ ์‚ฌ์‹ค.. ์ปฌ๋ ‰์…˜ ํ•„์š”์—†์ง€ ์•Š์„๊นŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ผ๋ฐ˜์ ์ธ Object๋Š” key-value์Œ์„ ๋Š์ž„ ์—†์ด ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ์‚ฌ์‹ค ์ปฌ๋ ‰์…˜์ด ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ผ ์ˆ˜๋„ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋”ฐ๊ธˆ์”ฉ object๋กœ ๋ถ€์กฑํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. keyโ€ฆ

Read full post

Javascript Symbol

Posted on July, 2019

Javascript Primitive ๊ธฐ์กด์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” 6๊ฐ€์ง€์˜ primitive๊ฐ€ ์žˆ์—ˆ๋‹ค. Object string number boolean null undefined ๊ทธ๋Ÿฌ๋‚˜ es6๊ฐ€ ๋“ค์–ด์„œ๋ฉด์„œ ์ด๋ผ๋Š” 7๋ฒˆ์งธ primitive๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ๋‹ค. Symbol ์ƒˆ๋กœ์šด ์‹ฌ๋ณผ ๊ฐ’์„ ์ƒ์„ฑํ–ˆ๋‹ค. ์ด ์‹ฌ๋ณผ๋กœ ์ƒ์„ฑํ•œ ๊ฐ’์€ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ constโ€ฆ

Read full post

javascript event bubbling & capturing

Posted on July, 2019

image Javascript Event Capturing Event Capturing์€ ํŠน์ • ์š”์†Œ์—์„œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ, ์ตœ์ƒ์œ„ ์š”์†Œ์—์„œ ๋ถ€ํ„ฐ ์ด๋ฒคํŠธ๋ฅผ ํƒ์ƒ‰ํ•˜์—ฌ ํŠน์ •์š”์†Œ๊นŒ์ง€ ์ฐพ์•„์˜ค๋Š” ์ด๋ฒคํŠธ ์ „ํŒŒ ๋ฐฉ์‹์„ ์˜๋ฏธํ•œ๋‹ค. ์œ„ ์˜ˆ์‹œ์—์„œ ๊ฐ€์žฅ ๋‚ด๋ถ€์˜ elementโ€ฆ

Read full post

javascript class

Posted on July, 2019

Class ํด๋ž˜์Šค๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋ ‡๊ฒŒ ์ƒ๊ฒผ๋‹ค. ํŠน์ง• 1. strict ๋ชจ๋“œ์—์„œ ์‹คํ–‰ ๋”ฑํžˆ ๋ฅผ ์„ ์–ธํ•˜์ง€ ์•Š์•„๋„, ํด๋ž˜์Šค์˜ ์ฝ”๋“œ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“œ์—์„œ ์‹คํ–‰๋œ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด, ๋‹น์—ฐํžˆ ๋ชจ๋“œ์˜ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํŠน์ง•์„ ์ž๋™์œผ๋กœ ๋”ฐ๋ฅด๊ฒŒ ๋œ๋‹ค.โ€ฆ

Read full post

javascript ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์˜ ์ฐจ์ด

Posted on July, 2019

ES6์—์„œ๋ถ€ํ„ฐ ์ƒ๊ธด ์€ ์ผ๋ฐ˜์ ์œผ๋กœ ์˜ ๋ชจ์–‘์„ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๋™์ž‘๋„ ๋น„์Šทํ•ด๋ณด์ธ๋‹ค. ํ•˜์ง€๋งŒ ์ด ๋‘ ์„ ์–ธ๋ฐฉ์‹์€ ๋‘๊ฐ€์ง€ ๋ถ„๋ช…ํ•œ ์ฐจ์ด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. 1. this์™€ argumentsโ€ฆ

Read full post

Intersection Observer

Posted on June, 2019

Intersection Observer Intersection Observer๋Š” ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ viewport์— ๋…ธ์ถœ๋˜๊ณ  ์žˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•ด์ฃผ๋Š” APIโ€ฆ

Read full post

Typescript, React, NextJs, Koa, Styled Component ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ํ™˜๊ฒฝ ๋งŒ๋“ค๊ธฐ

Posted on June, 2019

์‚ฌ์šฉํ•œ ์˜คํ”ˆ์†Œ์Šค React ์ž์„ธํ•œ ์„ค๋ช…์€ ์ƒ๋žต ํ•œ๋‹ค Nextjs NextJs ๋ฆฌ์•กํŠธ์—์„œ ์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋‹ค. angular๋‚˜ react ๋“ฑ์€ SPA๋ผ์„œ ๋ถˆํŽธํ•œ ์ ์ด ๋”๋Ÿฌ ์žˆ๋Š”๋ฐ, React์—์„œ NextJS๋ฅผ ํ™œ์šฉํ•˜๋ฉด react๋ฅผ ssr(server side renderingโ€ฆ

Read full post

Typescript Type, Enum, Partial, Record๋กœ ๊ธ€๋กœ๋ฒŒ ๋ณ€์ˆ˜ ๊ด€๋ฆฌํ•˜๊ธฐ

Posted on June, 2019

๊ณ ๋ฏผ์ง€์  Global ๋กœ ๊ด€๋ฆฌํ•˜๋Š” Colorset Red, Blue, Green, Black์ด ์žˆ๋‹ค. ์ด ์ƒ‰๋“ค์€ ๊ฐ๊ฐ ์ง€์ •๋œ ์นผ๋ผ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค ๊ทธ๋Ÿฌ๋‚˜ ๋•Œ๋กœ๋Š” ๊ทธ ์ปฌ๋Ÿฌ์ฝ”๋“œ์— ๋งž๊ฒŒ ์•ˆ์“ฐ๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค ๊ทธ๋Ÿฌ๋‚˜ ๋•Œ๋กœ๋Š” ์ € ๋„ค๊ฐœ๋ฅผ ๋‹ค ์•ˆ์“ฐ๊ณ  1~3๊ฐœ๋งŒ ์“ฐ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. Union types Union Type ์–ด๋–ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋ฐ›๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ์˜ ๊ฐ’์„ numberโ€ฆ

Read full post

Javascript - Promise

Posted on May, 2019

Promise ๋Š” ๋ฐ ์ธ์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ์‹คํ–‰ํ•จ์ˆ˜๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ์‹คํ–‰ํ•จ์ˆ˜๋Š” ์™€ ๋ฅผ ๋ฐ›์•„ ์ฆ‰์‹œ ์‹คํ–‰๋œ๋‹ค. ์‹คํ–‰ํ•จ์ˆ˜๋Š” ๋ณดํ†ต ๋น„๋™๊ธฐ ์ž‘์—…์„ ์‹œ์ž‘ํ•œ ํ›„, ๋ชจ๋“  ์ž‘์—…์„ ๋๋‚ด๋ฉด ๋ฅผ ํ˜ธ์ถœํ•ด์„œ ๋ฅผ ์ดํ–‰ํ•˜๊ณ , ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ ๋ฅผ ํ˜ธ์ถœํ•ด ๊ฑฐ๋ถ€๋œ๋‹ค. ๋Š” ๋‹ค์Œ ์ค‘ ํ•˜๋‚˜์˜ ์ƒํƒœ๋ฅผ ๊ฐ€์ง„๋‹ค. ๋Œ€๊ธฐ(pending): ์ดํ–‰๋˜๊ฑฐ๋‚˜ ๊ฑฐ๋ถ€๋˜์ง€ ์•Š๋Š” ์ดˆ๊ธฐ ์ƒํƒœ ์ดํ–‰(fullfiledโ€ฆ

Read full post

Javascript - Destructuring Assignment

Posted on May, 2019

๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์€ ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ๋ง๊ทธ๋Œ€๋กœ ๋ถ„ํ•ดํ•˜์—ฌ, ๋ถ„ํ•ด ํ•œ ๊ฐ’์„ ๊ฐœ๋ณ„๋ณ€์ˆ˜์— ๋‹ด์„ ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ํ‘œํ˜„์‹์ด๋‹ค. ๊ฐ์ฒด ๊ตฌ์กฐ ๋ถ„ํ•ด ์—ฌ๊ธฐ์—์„œ //๋Š” ์ „์—ญ๊ฐ์ฒด ์ผ ๊ฒƒ์ด๋‹ค. ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ํ‘œ๊ธฐ๋ฒ•๊ณผ JSON์˜ ์ฐจ์ด JSON์€ "key": valueโ€ฆ

Read full post

React ๊ณต๋ถ€ํ•˜๊ธฐ 7 - ์ปดํฌ๋„ŒํŠธ ๋ผ์ดํ”„ ์‚ฌ์ดํด

Posted on May, 2019

React Component Life Cycle ๋ผ์ดํ”„ ์‚ฌ์ดํด์€ ์ด 10๊ฐ€์ง€๋‹ค. ์ ‘๋‘์‚ฌ๋Š” ์–ด๋–ค ์ž‘์—…์„ ์ž‘๋™ํ•˜๊ธฐ์ „์— ์‹คํ–‰ํ•˜๋Š” ๋ฉ”์†Œ๋“œ๊ฐ€, ๋Š” ์–ด๋–ค ์ž‘์—…์„ ํ•œ ํ›„์— ์‹คํ•ด์˜ค๋””๋Š” ๋ฉ”์„œ๋“œ๋‹ค. ์ด ๋ฉ”์„œ๋“œ๋“ค์€ ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค์—์„œ ๋ฎ์–ด์จ์„œ ์„ ์–ธํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ผ์ดํ”„์‚ฌ์ดํด์€ ์ด 3๊ฐ€์ง€ ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋Š”๋ฐ, , , ๋‹ค. Mount DOMโ€ฆ

Read full post

React ๊ณต๋ถ€ํ•˜๊ธฐ 8 - ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ

Posted on May, 2019

ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ผ์ดํ”„์‚ฌ์ดํด, state ๋“ฑ์˜ ๊ธฐ๋Šฅ์„ ์ œ๊ฑฐํ•œ ์ƒํƒœ์ด๋ฏ€๋กœ ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์ด ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์— ๋น„ํ•ด ์ ๋‹ค. ๋”ฐ๋ผ์„œ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™” ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์œ„์™€ ๊ฐ™์ด ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŽ์ด ์“ฐ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

Read full post

React ๊ณต๋ถ€ํ•˜๊ธฐ 6 - ์ปดํฌ๋„ŒํŠธ ๋ฐ˜๋ณต

Posted on May, 2019

์ปดํฌ๋„ŒํŠธ ๋ฐ˜๋ณตํ•ด์„œ ์“ฐ๊ธฐ ํŠน๋ณ„ํ•œ ๊ฑฐ๋Š” ์—†์ง€๋งŒ, ์ฝ˜์†”์—์„œ ๊ฐ€ ์—†๋‹ค๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ๊ฐ€์ƒ DOM์„ ๋น„๊ตํ•œ๋Š ๊ณผ์ •์—์„œ, Key๊ฐ’์„ ํ™œ์šฉํ•˜์—ฌ ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚˜๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ๋•Œ๋ฌธ์—, key๊ฐ’์„ ์ง€์ •ํ•ด์ค˜์•ผํ•œ๋‹ค. ์ด์ œ ์—๋Ÿฌ๊ฐ€ ๋‚˜์ง€ ์•Š๋Š”๋‹ค. ๋ณดํ†ต์€ ์ด๋ ‡๊ฒŒ ์ •์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ์“ฐ๊ธฐ๋ณด๋‹ค๋Š”, ๋™์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๋” ๋ Œ๋”๋งํ•  ๊ธฐํšŒ๊ฐ€ ๋” ๋งŽ์„ ๊ฒƒ์ด๋‹ค.

Read full post

Javascript - Closure

Posted on May, 2019

ํด๋กœ์ € ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์–ด๋–ป๊ฒŒ ๋ณ€์ˆ˜์˜ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ์ •ํ•˜๋Š”๊ฐ€? ์—ฌ๊ธฐ์—์„œ ๋Š” ์ง€์—ญ๋ณ€์ˆ˜ ๊ณผ ํ•จ์ˆ˜ ์„ ์ƒ์„ฑํ–ˆ๋‹ค. ์€ ๋‚ด๋ถ€ํ•จ์ˆ˜์ด๋ฏ€๋กœ, ์—์„œ๋งŒ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ์€ ๋ณ„๋„์˜ ์ง€์—ญ๋ณ€์ˆ˜๊ฐ€ ์—†์ง€๋งŒ ๋‚ด๋ถ€ํ•จ์ˆ˜๋Š” ์™ธ๋ถ€ํ•จ์ˆ˜์— ์ ‘๊ทผํ•  ๊ถŒํ•œ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฏ€๋กœ, ์ด ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋  ๊ฒƒ์ด๋‹ค. ๋งŒ์•ฝ nameโ€ฆ

Read full post

React ๊ณต๋ถ€ํ•˜๊ธฐ 5 - Reference

Posted on May, 2019

Reference (Ref) ํŠน์ • DOM์š”์†Œ์— ์ž‘์—…์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ id๋ฅผ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ ์ฒ˜๋Ÿผ, React์—์„œ DOM์— ์ด๋ฆ„์„ ๋‹ค๋Š” ๋ฐฉ์‹์ด ์žˆ๋Š”๋ฐ ์ด๊ฒƒ์ด ๋ฐ”๋กœ ref (Reference)๋‹ค. ๋ฐ˜๋“œ์‹œ, ์ปดํผ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉ ์ค‘์š”ํ•˜๊ฒŒ ๋ด์•ผํ•  ๋ถ€๋ถ„์€ ๋ฐ”๋กœ ์—ฌ๊ธฐ ref ์†์„ฑ์„ ์ถ”๊ฐ€ํ•  ๋•Œ๋Š” props๋ฅผ ์„ค์ •ํ•˜๋“ฏ์ด ํ•˜๋ฉด ๋œ๋‹ค. refโ€ฆ

Read full post

React ๊ณต๋ถ€ํ•˜๊ธฐ 4 - Event

Posted on May, 2019

์ด๋ฒคํŠธ ๋ฆฌ์•กํŠธ์˜ ์ด๋ฒคํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ HTML์˜ ์ด๋ฒคํŠธ์™€ ๋น„์Šทํ•˜์ง€๋งŒ, ์ฃผ์˜์‚ฌํ•ญ์ด ๋ช‡๊ฐ€์ง€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ช…์€ ์นด๋ฉœ ์ผ€์ด์Šค๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค. โ†’ ์ด๋ฒคํŠธ์— ์‹คํ–‰ํ•  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๊ณ , ํ•จ์ˆ˜ํ˜•ํƒœ์˜ ๊ฐ’์„ ์ „๋‹ฌํ•ด์•ผ ํ•œ๋‹ค. DOM์š”์†Œ์—๋งŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. Custom Component๋Š” onClickโ€ฆ

Read full post

React ๊ณต๋ถ€ํ•˜๊ธฐ 3 - Component

Posted on May, 2019

์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ณธ์ ์ธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์ž. Props ์ปดํฌ๋„ŒํŠธ์˜ ์†์„ฑ์„ ์ค„๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’์ด๋‹ค. ์•„๋Ÿฐ์‹์œผ๋กœ ๋ถ€๋ชจ์—์„œ ๊ฐ’์„ ๋„˜๊ฒจ ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ default๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ์œ ์˜ํ•  ์ ์€ props์— ์•„๋ฌด๊ฐ’์„ ์•ˆ๋„˜๊ฒจ์ค˜๋„ () ๊ฐ’์€ default ๊ฐ€ ์•„๋‹Œ "" ๊ฐ€ ๋‚˜์˜จ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์™œ๋ƒํ•˜๋ฉด ""๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ stringโ€ฆ

Read full post

React ๊ณต๋ถ€ํ•˜๊ธฐ 2 - JSX

Posted on May, 2019

Create-react-app ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ์‹œ์ž‘ app.js์˜ ๊ตฌ์กฐ ์ฝ”๋“œ ์ฒซ์ค„์€ node.js์˜ ๊ธฐ๋Šฅ, ์ฆ‰ react๋ฅผ ๋ถˆ๋Ÿฌ์™€์„œ ๋ชจ๋“ˆํ™” ์‹œํ‚ค๋Š” ๊ฒƒ์ด๋‹ค. ์ด๋ฅผ ๋ฒˆ๋“ค๋งํ•˜๋Š” ์ž‘์—…์€ webpack์—์„œ ์ฒ˜๋ฆฌํ•ด ์ค€๋‹ค. css-loader๋กœ ๋ฅผ, file-loader๋กœ ํŒŒ์ผ์„ (), babel-loader๋กœ es6๋ฅผ esโ€ฆ

Read full post

React ๊ณต๋ถ€ํ•˜๊ธฐ 1 - background

Posted on May, 2019

๋ฆฌ์•กํŠธ ์š”์•ฝ ๊ธฐ์กด์— ๋งŽ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ฐ˜ ํ”Œ๊ฒŒ์ž„์›Œํฌ๋“ค์ด ์žˆ์—ˆ๋Š”๋ฐ, ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์€ MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) ์•„ํ‚คํ…์ณ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ๋˜์—ˆ๋‹ค. MVCโ€ฆ

Read full post