cd ..

๐Ÿ’ป ๊ตฐ๋Œ€์—์„œ ์ฝ”๋”ฉํ•˜๊ธฐ (1)

20๋…„ 8์›”์— ์ž…๋Œ€ํ•˜๊ณ  ๋‚˜์„œ๋ถ€ํ„ฐ, ๊ตฐ๋Œ€ ์•ˆ์—์„œ ์ฝ”๋”ฉ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ๊ณ„์† ์ฐพ์•„์™”๋‹ค. ์ž…๋Œ€ ์ „์—๋Š” ์‹œ๊ฐ„์ด ๋ฌธ์ œ์ผ ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ, ์‹œ๊ฐ„๋„ ์‹œ๊ฐ„์ด์ง€๋งŒ ์ƒ๊ฐ์ฒ˜๋Ÿผ ๋˜์ง€ ์•Š๋Š” ๊ฒƒ๋“ค์ด ๋งŽ์•˜๋‹ค. ๋จผ์ € ์ž…๋Œ€ ์ „ ๋ผ์ฆˆ๋ฒ ๋ฆฌ ํŒŒ์ด๋ฅผ ์„ค์น˜ํ•ด ๋‘๊ณ  ์™”๋Š”๋ฐ, ์‚ฌ์ด๋ฒ„์ง€์‹์ •๋ณด๋ฐฉ์—์„œ ssh์™€ vnc ํฌํŠธ๋ฅผ ๋ง‰์•„๋’€๊ธฐ๋•Œ๋ฌธ์— (๋ชจ๋‘ ๋ณด์•ˆ๋ฌธ์ œ์™€ ์ง๊ฒฐ์ด ๋˜์–ด ์žˆ์—ˆ๋‹ค), ์ง์ ‘ ์—ฐ๊ฒฐ์€ ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋‹ค.

์‚ฌ์ง€๋ฐฉ์˜ ์ปดํ“จํ„ฐ๋ฅผ ๊ทธ๋Œ€๋กœ ์“ฐ๊ธฐ๋„ ํž˜๋“ค์—ˆ๋‹ค. ์žฌ๋ถ€ํŒ…๋งˆ๋‹ค ํŒŒ์ผ์ด ์‚ฌ๋ผ์ง€๋Š”๊ฑด ๋‘˜์งธ์น˜๊ณ , VS Code๋Š” Extension ์„ค์น˜๊ฐ€ ์•ˆ๋˜๊ณ (.vsix๋กœ์˜ ์„ค์น˜๋„ ๋ง‰ํ˜€์žˆ๋Š” ๋“ฏ ํ•˜๋‹ค), Powershell๋„ ์•ˆ๋˜๊ณ โ€ฆ ํ•˜๋ชจ๋‹ˆ์นด ๋ฆฌ๋ˆ…์Šค๋Š” VS Code๊ฐ€ ๊ธฐ๋ณธ ์„ค์น˜๋˜์–ด์žˆ๊ธดํ•˜์ง€๋งŒ ์—ญ์‹œ๋‚˜ Extension์„ ์„ค์น˜ํ•  ์ˆ˜ ์—†์—ˆ๋‹ค. ํ„ฐ๋ฏธ๋„ ์ ‘๊ทผ๋„ ํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.

Codeanywhere

๊ทธ๋ž˜์„œ ์ฒ˜์Œ ์‚ฌ์šฉํ–ˆ๋˜๊ฑด Codeanywhere์˜€๋‹ค.

Codeanywhere

VS Code๋ž‘ ๋น„์Šทํ•œ GUI, ์ž์ฒด Container, terminal & sftp ์ง€์› ๋“ฑ ๋‹ค ์ข‹์•˜๋Š”๋ฐ, ๋ช‡๊ฐ€์ง€ ๋‹ต๋‹ตํ•œ ๋ถ€๋ถ„์ด ์žˆ์—ˆ๋‹ค.

  1. JS๋ฅผ ์ œ์™ธํ•˜๋ฉด, Linting์ด ์•ˆ๋œ๋‹ค. ํ•„์ˆ˜์ ์ธ ๋ถ€๋ถ„์€ ์•„๋‹ ์ˆ˜ ์žˆ์ง€๋งŒ, ์€๊ทผ ๋ถˆํŽธํ•˜๋‹ค. ์ด ๋ฌธ์ œ๋Š” ๊ฒฐ๊ตญ Extension์˜ ๋ถ€์žฌ๊ฐ€ ์›์ธ์ด๋‹ค.
  2. ๋ญ”๊ฐ€ ๋ถˆํŽธํ•˜๋‹ค. Layout ์„ค์ •์ด๋ผ๋“ ๊ฐ€, ์ฐฝ๋“ค์„ ์ €์žฅํ•ด๋‘˜ ์ˆ˜ ์—†๋‹ค๋“ ๊ฐ€โ€ฆ ๋‚ด๊ฐ€ ์ž˜๋ชป์“ฐ๊ณ  ์žˆ๋Š”๊ฑด์ง€ ๋ญ”์ง€ ์ด๋Ÿฐ ์ž์ž˜์ž์ž˜ํ•œ ๋ถˆํŽธํ•จ๋“ค์ด ๊ณ„์†๋๋‹ค.
  3. ssh/sftp์— ์˜์กดํ•˜๊ฒŒ๋œ๋‹ค. ์ง‘์— ๊ฐ€์ง€๋„ ๋ชปํ•˜๋Š”๋ฐ (์ฝ”๋กœ๋‚˜๋•Œ๋ฌธ์— ๊ทผ 150์ผ๊ฐ„ ํœด๊ฐ€๋ฅผ ๋‚˜๊ฐ€์ง€ ๋ชปํ–ˆ๋‹ค) ์ง‘์—์žˆ๋Š” RPi๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ๋ž€ ์—ฌ๊ฐ„ ๋ถˆํŽธํ•œ๊ฒŒ ์•„๋‹ˆ์—ˆ๋‹ค. ๋ถˆ์•ˆํ•˜๋‹ˆ ํ•จ๋ถ€๋Ÿฌ ๊ฐ€์ง€๊ณ  ๋†€๊ธฐ๊ฐ€ ํž˜๋“ค์—ˆ๋‹ค. Container๋ฅผ ์ œ๋Œ€๋กœ ์“ฐ์ž๋‹ˆ ์œ ๋ฃŒ๊ณ โ€ฆ

์ž์ž˜์ž์ž˜ํ•œ ๋ถˆํŽธํ•จ๋“ค๋งŒ ์—†์—ˆ๋‹ค๋ฉด ๊ทธ๋‹ฅ ๋น„์‹ธ์ง€ ์•Š์•˜๊ธฐ๋•Œ๋ฌธ์— Container ์‚ฌ์šฉ์„ ์œ„ํ•ด ๊ธฐ๊บผ์ด ๋น„์šฉ์„ ์ง€๋ถˆํ–ˆ์„ ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ข€ ๋ถˆํŽธํ•˜๊ณ  ๋ญ”๊ฐ€ ๋ถˆ์•ˆํ•˜๋‹ค๋Š” ๋งˆ์Œ์„ ๋–จ์น  ์ˆ˜๊ฐ€ ์—†์—ˆ๋‹ค.

code-server

๊ฒฐ๊ตญ ๊ณ ๋ฏผํ•˜๋‹ค๊ฐ€ cdr/code-server๋ฅผ ์„ ํƒํ–ˆ๋‹ค. ๋ผ์ฆˆ๋ฒ ๋ฆฌํŒŒ์ด์— ํ•˜๋Š”๊ฒŒ ๋น„์šฉ๋ฉด์—์„  ์ข‹์•˜๊ฒ ์ง€๋งŒ, ARM์ง€์›๋„ ์•ˆ๋ ๋ฟ๋”๋Ÿฌ(์ ์–ด๋„ ๋ผ์ฆˆ๋ฒ ๋ฆฌํŒŒ์ด๋Š” ์•ˆ๋˜๋Š” ๋“ฏ ํ–ˆ๋‹ค), ์•ž์—์„œ ๋งํ–ˆ๋“ฏ์ด ํ•˜๋“œ์›จ์–ด๊ฐ€ ์ง‘์—์žˆ์œผ๋‹ˆ ๋ถˆ์•ˆ๋ถˆ์•ˆํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ Vultr์—์„œ ์ƒˆ๋กœ์šด VPS๋ฅผ ๊ตฌ์ž…ํ–ˆ๋‹ค. ์ฒ˜์Œ์—” $5์งœ๋ฆฌ๋กœ ํ•ด๋ดค์ง€๋งŒ, code-server๋งŒ ์˜ฌ๋ ค๋„ htop๊ฐ€ ์†Œ๋ฆฌ๋ฅผ ์ง€๋ฅด๊ธธ๋ž˜ ๊ฒฐ๊ตญ $10์งœ๋ฆฌ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œ ํ–ˆ๋‹ค. 2PX1๋กœ ๊ณ„์‚ฐํ•˜๋‹ˆ ๋‚˜์˜์ง€ ์•Š์•„ ๋ณด์˜€๋‹ค. PX๋ณด๋‹ค๋Š” ๋” Productiveํ• ํ…Œ๋‹ˆ. code-server๋Š” ์ •๋ง ๊ฑฐ์˜ ๋ชจ๋“  ๋ถˆํŽธํ•จ์„ ๋‹ค ํ•ด์†Œํ•ด์ฃผ์—ˆ๋‹ค. Code-server๋Š”

  1. VSCode๋ž‘ ์•„์˜ˆ ๋˜‘๊ฐ™์œผ๋‹ˆ, UI๋ฉด์—์„œ ๋ถˆํŽธํ•  ์ผ์ด ์—†์—ˆ๋‹ค. Git integration๋„ ๋„ˆ๋ฌด ํ–‰๋ณตํ•˜๋‹ค.
  2. Extension ์„ค์น˜๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ˆ, Linting๋„ ๋˜๊ณ , Debugging๋„ ๋˜๊ณ , color / icon theme๋„ ์„ค์น˜ ๊ฐ€๋Šฅํ•˜๋‹ค. ๋ชจ๋“  ์–ธ์–ด๊ฐ€ ๋‹ค ์ง€์›๋œ๋‹ค.
  3. ์ €์žฅ ํ•„์š”์—†์ด, ๋„๊ธฐ๋งŒ ํ•ด๋„ ์ €์žฅ๋˜๊ณ , workspace, tab๊นŒ์ง€ ์ „๋ถ€ ๊ทธ๋Œ€๋กœ๋‹ค. ์–ด๋Š ์ปดํ“จํ„ฐ๋ฅผ ๊ณ ๋ฅด๋“  ํ•ญ์ƒ ๊ทธ๋Œ€๋กœ๋‹ค.
  4. VPS์—์„œ ๋Œ๋ฆฌ๋‹ˆ ๋„ˆ๋ฌด๋‚˜๋„ ๊ฐ„๋‹จํ•˜๋‹ค. ๊บผ์งˆ ๊ฑฑ์ •๋„ ์—†๊ณ , ์ดํ•ด ์•ˆ๋˜๋Š” ๊ฒƒ๋„ ์—†๋‹ค.

์œ ์ผํ•˜๊ฒŒ ์•„์‰ฌ์šด ์ ์€ Remote Development๊ฐ€ ์•ˆ๋œ๋‹ค๋Š” ์ . ๋ผ์ฆˆ๋ฒ ๋ฆฌ ํŒŒ์ด์— sftp๊ฐ€ ์•ˆ๋œ๋‹ค. ํ„ฐ๋ฏธ๋„๋กœ ํ•  ์ˆœ ์žˆ๋‹ค๋งŒ ๋ถˆํŽธํ•œ๊ฑด ์‚ฌ์‹ค์ด๋‹ˆโ€ฆ ๊ทธ๋Ÿฌ๋‹ค๋ณด๋‹ˆ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ผ์ฆˆ๋ฒ ๋ฆฌํŒŒ์ด์˜ ์‚ฌ์šฉ๋นˆ๋„๊ฐ€ ์ค„์—ˆ๋‹ค. ๋ญ ๊ฐœ์ธ์ ์ธ๊ฒƒ๋“ค ์˜ฌ๋ฆฌ๊ธฐ์—” ์•„์ง ๋”ฑ์ด์ง€๋งŒ, ์กฐ๋งŒ๊ฐ„ ์ข‹์€ ์“ธ๋ชจ๋ฅผ ์ƒ๊ฐํ•ด ๋‚ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.

๊ฒฐ๋ก 

๊ตฐ๋Œ€์—์„œ ์ฝ”๋”ฉํ•˜๊ธฐ๊ฐ€ ๋งˆ๋ƒฅ ์‰ฝ์ง„ ์•Š๋‹ค. ์ผ๋‹จ ๋ถ€๋Œ€ ์—ฌ๊ฑด๋ถ€ํ„ฐ๊ฐ€ ์ฒœ์ฐจ ๋งŒ๋ณ„์ด๋‹ค. ์ง€๊ธˆ ๋‚ด ๋ถ€๋Œ€๊ฐ€ ์—ฌ๊ฑด์ด ํ›Œ๋ฅญํ•œ๊ฑด ๋ชป๋˜์ง€๋งŒ, ์ ์–ด๋„ ์‹œ๊ฐ„๋„ ์žˆ๊ณ (๊ทผ๋ฌด๋งŒ ๋บ€๋‹ค๋ฉดโ€ฆ), Github๋„ ์ž˜ ๋œ๋‹ค(๋งŽ์€ ๋ถ€๋Œ€๊ฐ€ Github ์ ‘์†์ด ์•ˆ๋œ๋‹ค๋Š” ๋ง์„ ๋“ค์—ˆ๋‹ค. Gitlab๋งŒ ๋œ๋‹ค๋Š” ๋ถ€๋Œ€๋„ ๋งŽ์€ ๋“ฏ ํ•˜๋‹ค). ํ•˜์ง€๋งŒ Cloud IDE๋งŒ ์žˆ์œผ๋ฉด ์ถฉ๋ถ„ํžˆ ๊ฐ€๋Šฅํ•œ ๊ฒƒ ๊ฐ™๋‹ค. ์‚ฌ์ง€๋ฐฉ๋„ ๋ฌด๋ฃŒํ™”๋๊ณ , ํœด๋Œ€ํฐ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์ ธ์„œ ์ž๋ฆฌ๋„ ๋„๋„ํ•ด์ง€๊ณ . ์ƒ์•  ์ฒซ ํŒŒ์ด์ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ thecampy๋„ ์‚ฌ์ง€๋ฐฉ์—์„œ ํƒœ์–ด๋‚ฌ๋‹ค. ํ•˜๋ ค๋ฉด ์ถฉ๋ถ„ํžˆ ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์‚ฌ์‹ค ์ผ๊ณผ๊ฐ€ ๋๋‚˜๋ฉด ๋ชฐ๋ ค์˜ค๋Š” ์กธ์Œ์„ ์ด๊ฒจ๋‚ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์ด ์ œ์ผ ํฐ ๋ฌธ์ œ์ธ ๊ฒƒ ๊ฐ™๋‹ค.

  1. PX ๋‘๋ฒˆ ๊ฐˆ ๋ˆย