코딩 192

타입스크립트 콜백함수 알아보기 - 타입스크립트 Typescript 강좌 3편

안녕하세요? 오늘은 타입 스크립트 강좌 3편을 이어 나가도록 하겠습니다. 오늘 내용은 콜백 함수 관련인데요. 지난 시간부터 이어져 오던 환경에서 새로운 파일을 만들어 보겠습니다. 1. 콜백 함수의 타입은? // funcs-with-funcs.ts export function printToFile(text: string, callback): void { console.log(text); callback(); } printToFile 함수를 만들었는데요. text인자를 받아서 console.log 하고 있습니다. 그리고 callbak 함수를 실행하는데요. callback 함수의 타입은 뭘까요? 마우스를 올려다 놓아 볼까요? callback을 그냥 any 타입으로 추론해 버렸네요. VS Code의 인텔리 센스..

코딩/Typescript 2021.10.30

라즈베리파이 OpenMediaVault 에 토렌트 설치

안녕하세요? 최근 라즈베리파이에 OpenMediaVault를 설치해서 시놀로지 같은 NAS를 구축해서 쓰고 있는데요. 이번에는 토렌트 서버를 구축해 볼까 합니다. OMV는 버전 4에서는 transmission이라는 토렌트 서버를 직접 설치할 수 있었는데요. OMV 버전 5에서는 도커(docker)를 통해서만 transmission을 설정할 수 있습니다. 자 그럼, 설치해 볼까요? 1. OMV-Extras 설치 도커를 설치할 수 있게 해주는 플러그인 같은건데요. 일단 SSH로 접속해서 root로 계정을 바꿔줍니다. root 비밀번호가 없다면 아래처럼 sudo passwd root로 root 계정의 비밀번호를 지정할 수 있습니다. 그리고 마지막으로 su root 명령어로 root 아이디로 계정을 변경하는 겁..

라즈베리파이에 PLEX 플렉스 미디어 서버 설치

안녕하세요. 지난 시간에 라즈베리파이를 이용해서 시놀리지 NAS 같은 걸 OpenMediaVault로 만들어 봤는데요. 오늘은 여기에 추가해서 PLEX 미디어 서버를 설치해 볼 예정입니다. PLEX는 아래 홈페이지처럼 개인 미디어 서버 같은 건데요. 개인 NETFLIX 같은 거라고 생각하시면 쉽습니다. https://www.plex.tv/ko/ Stream Movies Free Online | Free TV and Movies with Plex Free movies and TV plus all your personal media libraries on every device. Master your Mediaverse. www.plex.tv 일단 라즈베리파이에 SSH 접속합시다. ssh pi@192.168..

라즈베리파이로 시놀로지 같은 NAS 만들기 with OpenMediaVault

안녕하세요? 기존에 라즈베리파이 NAS 서버 구축에 대해 포스팅 올린 적이 있었는데요. 기존 포스트는 라즈베리파이를 리눅스 서버로 운영하려는 목적이 강했습니다. 그러나 오늘 올릴 포스트는 라즈베리파이를 진정한 NAS로 만들 수 있는 OpenMediaVault와 Plex 서버 설치에 관한 글입니다. 우리가 NAS 하면 떠올리는 게 아마 비싼 Sysnology 서버인데요. Sysnology 가 제공하는 게 웹상에서 서버 운영 및 모니터링을 가능하게 하고 윈도 환경으로 SAMBA로 저장공간을 공유할 수 있게 하고 기타 미디어 서버도 제공합니다. 그런데 시놀리지는 너무 비쌉니다. 그래서 그 대안으로 라즈베리파이를 이용해서 직접 만드는데요. 그냥 집에 구형 컴퓨터가 있어도 가능한데, NAS 서버 특성상 24시간 ..

타입스크립트 함수 알아보기 - 타입스크립트 TypeScript 강좌 2편

안녕하세요? 지난 시간부터 시작한 타입스크립트(typescript) 강좌를 이어 나가 보겠습니다. 일단 지난 시간에 설정한 NodeJS 패키지를 그대로 이어서 진행할 예정이오니 1편에서 typescript와 ts-node 설정부터 살펴보시면 감사하겠습니다. 1. function in typescript 일단 함수를 만들어야겠죠. 먼저, functions.ts 파일을 만들고 이 파일을 이용한 functions-test.ts 파일도 만들어서 여기서 함수 테스트를 해보겠습니다. 먼저 간단한 함수를 만들어 보겠습니다. //functions.ts function addNumbers(a, b) { return a + b; } export default addNumbers; 타입스크립트는 ES Module 방식을 따..

코딩/Typescript 2021.10.23

타입스크립트(Typescript) 강좌 1편

안녕하세요? 오늘은 드디어 새로운 강의를 시작하게 되었습니다. 최근에 React, NextJS를 이용하면서 Typescript의 위력을 다시 한번 느꼈었는데요. 타입스크립트는 다들 아시다시피 자바스크립트의 Super-set 이란 느낌입니다. 타입스크립트의 최대 장점은 type을 지정할 수 있고 거기에 따라 일반 자바스크립트에서 발생하는 type 관련 에러를 방지해 준다는 점에서 큰 효과를 볼 수 있는데요. 이 점이 결과적으로 코드를 더 빨리 짤 수 있게 도와주는 효과를 보게 됩니다. 자, 지금까지 자바스크립트를 배워왔던 분들도 이제는 타입스크립트를 저랑 같이 배워 볼까요? mkdir typescript-tutorial cd typescript-tutorial code . 폴더를 만들고 그 폴더에 들어가서..

코딩/Typescript 2021.10.23

TailwindCSS 강좌 3편 - Card 만들기

안녕하세요? 최근에 제 One-Pick이 된 TailwindCSS 강좌를 또하게 되었네요. 오늘은 Bootstrap 이나, Material-UI에는 다 있는 Card에 대해 직접 만들어 보겠습니다. 일단 완성형을 볼까요? 아래 동영상을 보시면 반응형 동작을 볼 수 있습니다. 반응형 동작 일단 지난 시간부터 이어져 오던 NextJS Template를 그대로 쓰겠습니다. 그리고 상단 Navbar 는 1편에 나온 걸 사용하도록 하겠습니다. /pages/index.tsx import Head from "next/head"; export default function Home() { return ( Navbar in Tailwind! Responsive Cards in Tailwind! {/* 카드 전체를 반응형..

코딩/React 2021.10.16

Tailwind CSS 강좌 2편 - 반응형 Sidebar Navbar 만들기

안녕하세요? 얼마전부터 Tailwind CSS 강좌를 이어 가고 있는데요. 처음에는 어려웠지만 계속 도전해 보니까 예전에 배웠는 HTML + CSS 지식이 다시금 살아나서 좋았습니다. Tailwind CSS 의 장점은 본인의 상상이 그대로 UI로 이어진다는데 있는거 같습니다. 앞으로 Tailwind CSS를 이용한 나만의 UI 라이브러리를 구축해 볼까 합니다. 그래서 지난번에 만들었던 Top Navbar 글의 후속편인데요. https://cpro95.tistory.com/531 Tailwind css 반응형 메뉴 navbar 만들기 안녕하세요? 오늘은 지금까지 쭉 관심있게 지켜본 Tailwind CSS 에 대해 공부해 볼까 합니다. Tailwind CSS 가 최근 가장 핫한 CSS 유틸인데요. React..

코딩/React 2021.10.13

Tailwind css 반응형 메뉴 navbar 만들기

안녕하세요? 오늘은 지금까지 쭉 관심있게 지켜본 Tailwind CSS 에 대해 공부해 볼까 합니다. Tailwind CSS 가 최근 가장 핫한 CSS 유틸인데요. React 로 UI 디자인은 보통 Material-UI, Bootstrap, Ant Design 등으로 많이 만드는데요. 최근에는 좀더 가벼운걸 찾는 추세라 Tailwind CSS 가 뜨고 있습니다. Tailwind CSS 는 일반적으로 CSS 헬퍼 유틸(Helper Utilities)이라고 하는데요. 예를 들어 일반적으로 CSS로 마진을 부여할 때는 margin-right : "20px" 이렇게 쓰는데요, Tailwind CSS에서는 좀 더 간편하게 줄여서 다음과 같이 씁니다. mr-10 헬퍼 유틸이라 줄임말이 많습니다. 그래서 처음에는 헷..

코딩/React 2021.10.10

자바스크립트 프레임워크(라이브러리) 비교 - React Vue Svelte Angular

안녕하세요? 오늘은 자바스크립트 프레임워크에 대해 알아 보겠습니다. 20년전 초장기에는 jQuery가 웹 개발에서 차지하는 비중이 대단했었는데요. React가 나오면서 자바스크립트 프레임워크 세계에서 일대 혁명을 일으켰습니다. 사실 Angular 가 먼저 붐을 일으켰지만 Angular는 너무 어려워서 React가 대세가 되었죠. React의 Virtual DOM 이 대 유행하면서 Vue가 나왔고, 중국을 위주로 Vue가 React를 추격하는 모양새가 되었지만, 미국을 중심으로한 React의 아성에는 못 미치고 있습니다. 최근에는 Svelte 등 여러가지 자바스크립트 프레임워크가 나오고 있으며, 각각 React의 아성에 도전하려고 노력하고 있습니다. 그래서 오늘은 자바스크립트 Todo 앱을 통해 각각의 프..

코딩/Javascript 2021.10.09