๐Ÿ 

์œ ์ •ํ˜(delivan)

์•ˆ๋…•ํ•˜์„ธ์š”!๐Ÿ– ์›น ๊ฐœ๋ฐœ์ž๋กœ ์ผํ•˜๊ณ  ์žˆ๋Š” ์œ ์ •ํ˜(delivan)์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ํšจ์œจ์ ์ธ ์ฝ”๋“œ ๊ตฌ์กฐ ์„ค๊ณ„์™€ ์ง๊ด€์ ์ธ UI/UX ๊ฐœ๋ฐœ์— ๋Œ€ํ•ด ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค. ๋ฐฐ์šฐ๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ์ตํžˆ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ•˜๊ณ  ์‹คํ–‰์œผ๋กœ ์˜ฎ๊ฒจ ๋ด…๋‹ˆ๋‹ค. ๊ฐ์ž์˜ ๊ฒฝํ—˜๊ณผ ์˜๊ฒฌ์„ ๊ณต์œ ํ•˜๊ณ  ์ž์œ ๋กญ๊ฒŒ ํ† ๋ก ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธํ™”๋ฅผ ์ง€ํ–ฅํ•ฉ๋‹ˆ๋‹ค.

Github https://github.com/delivan
E-mail wjdgurdl272@gmail.com

๐Ÿ›  ์‚ฌ์šฉ ๊ธฐ์ˆ 

HTML, CSS

  • ๊ธฐ๋ณธ์ ์ธ DOM handling(input data, event handling)์— ๋Œ€ํ•ด ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๊ธฐ๋ณธ์ ์ธ layout ๋ฐฉ๋ฒ•(float, flex, grid)์— ๋Œ€ํ•ด ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  • semantic markup๊ณผ SEO์˜ ๊ด€๊ณ„๋ฅผ ์ดํ•ดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  • BEM ๋ฐฉ๋ฒ•๋ก ๊ณผ Sass์— ๋Œ€ํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ธŒ๋ผ์šฐ์ € ๋ณ„ ๋Œ€์‘์— ๋Œ€ํ•œ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.

Javascript

  • ES5์™€ ES6 ์ดํ›„์˜ ๋ฌธ๋ฒ•์— ์ต์ˆ™ํ•ฉ๋‹ˆ๋‹ค.
  • this, prototype, closure์˜ ๊ฐœ๋…์„ ์•Œ๊ณ  ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • promise, generator๋กœ ๋น„๋™๊ธฐ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๊ธฐ๋ณธ์ ์ธ DOM api์— ๋Œ€ํ•ด ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ถˆ๋ณ€์„ฑ์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค๋ฃฐ ์ค„ ์••๋‹ˆ๋‹ค.
  • Nodejs(express) ํ™˜๊ฒฝ์—์„œ์˜ ์„œ๋ฒ„(api) ๊ฐœ๋ฐœ๋„ ์ต์ˆ™ํ•ฉ๋‹ˆ๋‹ค.

React

  • state, props์˜ ์˜๋ฏธ์™€ ์šฉ๋„๋ฅผ ์•Œ๊ณ  Life cycle api๋ฅผ ์ ์ ˆํ•œ ์ƒํ™ฉ์— ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • container, presentational ์ปดํฌ๋„ŒํŠธ์˜ ์ฐจ์ด์ ์„ ์•Œ๊ณ  ๊ตฌ๋ถ„ํ•ด์„œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • HOC, context api๋กœ prop drilling ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • redux, redux-saga๋ฅผ ์ด์šฉํ•œ ์ƒํƒœ ๊ด€๋ฆฌ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • statefulํ•œ ์ปดํฌ๋„ŒํŠธ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ์œ„ํ•ด hooks๋ฅผ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ๋ Œ๋”๋ง ์ตœ์ ํ™”๊ฐ€ ํ•„์š”ํ•  ๋•Œ memoization์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธฐํƒ€

  • git, github, git flow์— ์ต์ˆ™ํ•ฉ๋‹ˆ๋‹ค.
  • mongoDB(mongoose)์˜ ๊ธฐ๋ณธ์ ์ธ ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ์ดํ•ด์™€ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • webpack์œผ๋กœ ๋ฒˆ๋“ค๋งํ•˜๋Š” ๊ณผ์ •, ๊ธฐ๋ณธ์ ์ธ ์˜ต์…˜๋“ค์˜ ์˜๋ฏธ, code splitting์˜ ํ•„์š”์„ฑ๊ณผ ์ ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  • jest๋ฅผ ํ™œ์šฉํ•œ ์œ ๋‹›ํ…Œ์ŠคํŠธ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  • socket.io๋ฅผ ์ด์šฉํ•˜์—ฌ ์†Œ์ผ“ ํ†ต์‹ ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • typescript, react native๋ฅผ ์ ๊ทน์ ์œผ๋กœ ํ•™์Šตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿข ๊ฒฝ๋ ฅ

๊ตฌ๋ฆ„ (goorm)

  • ๊ธฐ๊ฐ„ : 18.09 ~ ํ˜„์žฌ
  • ํฌ์ง€์…˜ : ์›น ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž
  • ์„ค๋ช… : ๊ฐœ๋ฐœํŒ€์˜ ์ธํ„ด์œผ๋กœ ์‹œ์ž‘ํ•˜์—ฌ ๊ตฌ๋ฆ„ IDE์™€ ๊ตฌ๋ฆ„ EDU ์›น ์‚ฌ์ดํŠธ์˜ ์ „๋ฐ˜์ ์ธ ์œ ์ง€๋ณด์ˆ˜์™€ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ๋“ค์„ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ํ”„๋กœ์ ํŠธ :

    • ์–ด๋“œ๋ฏผ ํŽ˜์ด์ง€
    • ๊ธฐ์ˆ  ์Šคํƒ

      • ES6+, Sass, Next.js, Redux, Redux-saga, Express, Webpack, Mongoose, Redis, Jest
    • ์ฐธ์—ฌํ•œ ์ผ

      • ๊ตฌ๋ฆ„ EDU์—์„œ ๋งŒ๋“  ๋ฌธ์ œ๋ฅผ ๋ณต์‚ฌํ•˜๋Š” UI, API ๊ฐœ๋ฐœ
    • ๊ตฌ๋ฆ„ EDU
    • ๊ธฐ์ˆ  ์Šคํƒ

      • ES6+, React, jQuery, ejs, Express, Sass, Bootstrap, Webpack, Mongoose, Redis, Socket.io, Jest
    • ์ฐธ์—ฌํ•œ ์ผ

      • ๊ณต์ง€์‚ฌํ•ญ ํŽ˜์ด์ง€ UI, API ๊ฐœ๋ฐœ
      • ์ปค์Šคํ…€ ์ฑ„๋„ ๋ฉ”์ธํŽ˜์ด์ง€ UI ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ
      • ํ•œ๊ตญ์ฝ”๋“œํŽ˜์–ด ์›น ์‚ฌ์ดํŠธ ์ „์ฒด UI, API ๊ฐœ๋ฐœ
    • ๊ตฌ๋ฆ„ IDE
    • ๊ธฐ์ˆ  ์Šคํƒ

      • ES5, jQuery, ejs, Express, Mongoose, Redis, Socket.io, Docker
    • ์ฐธ์—ฌํ•œ ์ผ

      • IDE ์ปจํ…Œ์ด๋„ˆ ์ƒ์„ฑ ๋กœ์ง์„ ๋ธŒ๋ผ์šฐ์ €๋‹จ์—์„œ ์„œ๋ฒ„๋‹จ์œผ๋กœ ์˜ฎ๊ธฐ๋Š” ์ž‘์—…
      • IDE ๋‚ด์—์„œ ๋งŒ๋“  ์›น ์•ฑ์„ AWS Elastic Beanstalk, Heroku๋กœ ๋ฐฐํฌํ•˜๋Š” ๊ธฐ๋Šฅ ๊ตฌํ˜„

๐ŸŽ“ ํ•™๋ ฅ

ํ•™๊ต๋ช… ๋ช…์ง€๋Œ€ํ•™๊ต
๊ธฐ๊ฐ„ 12.03 ~ 19.02
์ „๊ณต ์ปดํ“จํ„ฐ๊ณตํ•™
์„ค๋ช… ์ž๋ฃŒ๊ตฌ์กฐ, ์•Œ๊ณ ๋ฆฌ์ฆ˜, ์ปดํ“จํ„ฐ ๋„คํŠธ์›Œํฌ, ์ปดํ“จํ„ฐ ์•„ํ‚คํ…์ฒ˜, ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์ปดํ“จํ„ฐ ๋ณด์•ˆ ๋“ฑ์—์„œ ์ค€์ˆ˜ํ•œ ์„ฑ์ ์„ ๋ฐ›์•˜์œผ๋ฉฐ 4ํ•™๋…„ 1ํ•™๊ธฐ์— ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ˆ˜์—… ์กฐ๊ต๋กœ ์ผํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿƒโ€โ™‚๏ธ ํ™œ๋™

ํ™œ๋™๋ช… ๊ธ€๋˜(๊ธ€์“ฐ๋Š” ๋˜๋ผ์ด)
๊ธฐ๊ฐ„ 19.07 ~ ํ˜„์žฌ
์„ค๋ช… ๊ฐœ๋ฐœ ๊ด€๋ จ ๊ธ€์„ 2์ฃผ๋งˆ๋‹ค ํ•˜๋‚˜์”ฉ ๊ผญ ์“ฐ๊ณ  ๋ธ”๋กœ๊ทธ์— ์˜ฌ๋ ค ์„œ๋กœ ํ”ผ๋“œ๋ฐฑ์„ ์ฃผ๊ณ ๋ฐ›๋Š” ํ™œ๋™์ž…๋‹ˆ๋‹ค.