인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

웹 개발

타입스크립트 코리아 : Electron with TypeScript Hands-On Labs 세미나

타입스크립트와 일렉트론으로 간단한 채팅 앱을 만드는 강좌입니다.

(4.0) 수강평 4개

수강생 156명

TypeScriptElectron

초급자를 위해 준비한
[웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • Electron 프레임워크의 기본 개념

  • 타입스크립트를 사용한 데스크탑 애플리케이션 개발

  • Firebase 설정 및 사용자 인증

  • 실시간 데이터베이스 연결

  • CSS 프레임워크를 활용한 뷰 생성

  • 로그인/로그아웃 처리

  • 데이터 전송 및 처리

  • 코드 리팩토링 기법

1. 강좌 소개

타입스크립트는 MS 가 만든 오픈소스 프로젝트로, 많은 자바스크립트 개발자들에게 사랑을 받고 있습니다. Angular 의 기본 언어로 사용되고 있으며, 구글에서도 공식 개발 언어로 지정한 타입스크립트는 쉽게 배울 수 있고, 사용이 어렵지 않으면서, 강력한 타입 체크 기능을 제공합니다. 많은 자바스크립트 프로젝트가 타입스크립트로 옮겨지고 있습니다. 본 강좌는 2017년 9월에 진행된 타입스크립트 코리아 유저그룹 ‘ Electron with TypeScript Hands-On Labs’ 세미나로 타입스크립트로 일렉트론을 사용하는 법에 대해 배울 수 있습니다.

2. 학습 목표

“텍스트 기반 온라인 메세지 앱 만들기” (like Slack) 슬랙과 같은 수준을 그 시간안에 만들기는 어렵습니다. 파이어베이스를 이용해서 텍스트 메세지를 주고 받을 수 있는 간단한 형태를 만들 예정입니다. 타입스크립트를 활용해 만들면서 실제 작업에 대해 좀더 가깝게 느낄수 있습니다.

3. 도움이 되는 분들

  • 타입스크립트와 일렉트론을 이용하여 간단한 앱을 따라 만들어 보고 싶으신 분들
  • ‘타입스크립트 코리아 – 기초 세미나’ 를 듣고 수강하시길 권장 드립니다.

4. 강사 소개

이웅재

현 스튜디오씨드코리아 소프트웨어 엔지니어 Seoul.js.org 오거나이저 현 타입스크립트 코리아 유저그룹 운영자, 일렉트론 코리아 유저그룹 운영자 전 브이터치 소프트웨어 엔지니어링 랩 랩장 전 트리플베이 CTO

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 웹 기술에 관심 있는 사람

  • 데스크탑 애플리케이션 개발을 배우고 싶은 사람

  • 타입스크립트와 Electron을 활용하고 싶은 개발자

  • Firebase를 사용한 실시간 데이터베이스 연결을 배우고 싶은 사람

  • 프로그래밍 실습을 통해 실력을 향상시키고 싶은 사람

안녕하세요
입니다.

11,833

명

수강생

124

개

수강평

4.7

점

강의 평점

5

개

강의

14년차 소프트웨어 엔지니어 입니다.

 

2021년 부터는 NHN Dooray 에서 프론트엔드개발팀을 리드하며, 서비스 전체의 UI 에 대한 책임을 맡았습니다. 팀을 맡아 기존에 운영하고 있던 레거시 시스템(AngularJS, Vue)을 React, TypeScript 로 리뉴얼 하였습니다. 10인 이상의 다수 프론트엔드 엔지니어들이 하나의 프러덕트를 함께 개발할 수 있도록 아키텍처를 설계하고 관리하는 업무를 하고 있습니다. 전체 서비스 규모가 크고 복잡도가 높아 Monorepo 로 개발 및 운영하고, Micro Frontend 를 도입하여 배포 주기 단축에 대해 노력해왔습니다. Storybook 을 통해 컴포넌트를 적극적으로 관리하며, Design System 을 구축하고 활용이 될 수 있도록 프로세스를 다듬는 역할을 했습니다.

 

이전에는 Studio XID 에서 TypeScript 와 Electron 을 이용하여, 디자이너를 위한 인터렉션 프로토타이핑 툴인 ProtoPie 를 만들었습니다. 한가지 제품을 약 4년동안 만들면서 좋은 코드, 품질이 좋은 코드를 작성하기 위해 노력해왔습니다.

 

대규모 자바스크립트 어플리케이션 개발에 대한 더 나은 방향을 고민하고, 적용하기 위해 노력하고 있습니다.
Microsoft MVP (TypeScript) 로 활동해 왔으며, 최신 웹기술에 대해 사람들과 이야기 하는 것을 즐깁니다.

 

여러 곳에서 프론트엔드 팀을 이끌며, 주로 함수형 언어(클로저)나 Node.js 로 백엔드 작업을 진행합니다.
인프라 자동화에 대한 관심이 많습니다.

커리큘럼

전체

24개 ∙ (4시간 56분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

4개

4.0

4개의 수강평

  • 신도희님의 프로필 이미지
    신도희

    수강평 1

    ∙

    평균 평점 5.0

    5

    46% 수강 후 작성

    강의 재미있게 해주시는데 아쉽게 그간 많은 버전업으로 인해 차이가 있긴합니다 ㅠㅠ

    • akor1님의 프로필 이미지
      akor1

      수강평 24

      ∙

      평균 평점 5.0

      4

      67% 수강 후 작성

      큰 틀을 이해할 수 있었습니다. 버전이 안맞는게 아쉽네요

      • JAKK3 Shin님의 프로필 이미지
        JAKK3 Shin

        수강평 2

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        내용 이해하기 쉽게 잘 설명해줍니다. 다만 일렉트론 자체가 버전업이 되면서 depricated 된 내용이 다소 있어 강의에 제공된 코드를 그대로 쓰기보단, 최신 공식문서를 찾아보면서 직접 짜면서 따라할 필요가 있습니다. 강의의 문제는 아니고, 강의가 나온지 시간이 좀 지났다보니 생기는 문제인 것 같습니다.

        • 범띵떵님의 프로필 이미지
          범띵떵

          수강평 1

          ∙

          평균 평점 2.0

          2

          67% 수강 후 작성

          솔직히 아쉬운 부분이 많습니다. 마지막 강의 업데이트가 2018년일 뿐더러 강의가 온라인강의를 위해 따로 촬영한것이 아닌 어디선가 수업한 내용의 녹화본을 가지고 그대로 올린게 느껴져 강의 외적인 내용도 나오고합니다. (이러한 부분이라도 편집해서 올리셨으면 어떠했을지) 타 강의에 비해 짧은 시간에 금액도 비싼감이 있기도하며, 오래된 내용이라 다른분의 댓글처럼 공식문서를 보고 개발을 따로 진행해야하는 부분이 있습니다.

          이웅재님의 다른 강의

          지식공유자님의 다른 강의를 만나보세요!

          React Router 완전 정복강의 썸네일

          React Router 완전 정복

          이웅재

          React 로 SPA를 만드는 모든 사람들에게 필수인 React Router를 함께 정복해보아요 💪

          초급

          초급

          react-router-dom, react-router, React

          앵귤러 기초 세미나강의 썸네일

          앵귤러 기초 세미나

          이웅재

          웹 프론트엔드 프레임워크의 큰 축인 앵귤러가 5 버전이 출시 되었습니다. 5.0 출시와 함께 타입스크립트 유저 그룹을 중심으로 앵귤러 5 를 빠르게 배워보는 워크샵을 진행하였습니다. 큰 그림을 빠르게 이해할 수 있으며, 디테일한 추가 강의가 이어질 예정입니다.

          중급이상

          중급이상

          Angular

          타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

          타입스크립트 코리아 : React with TypeScript 세미나

          이웅재

          타입스크립트와 리액트 관련 강좌입니다.

          중급이상

          중급이상

          React, TypeScript

          타입스크립트 코리아 : 기초 세미나강의 썸네일

          타입스크립트 코리아 : 기초 세미나

          이웅재

          타입스크립트 관련 강좌입니다.

          초급

          초급

          TypeScript

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!

          Electron과 NodeJS 그리고 Socket.io를 이용한 채팅 어플리케이션 개발강의 썸네일

          Electron과 NodeJS 그리고 Socket.io를 이용한 채팅 어플리케이션 개발

          김지운

          강의의 내용을 바탕으로 기본적인 채팅어플리케이션 작성과 Electron 과 NodeJS의 기본적인 구조에 대해 알아간다.

          초급

          초급

          Node.js, Electron, Socket.io

          [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편강의 썸네일

          [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편

          제로초(조현영)

          타입스크립트 기본 문법을 배우고, 다른 사람이 작성한 타입을 분석하는 방법과, 내가 직접 타입을 작성하는 방법에 대해 알아봅니다.

          초급

          초급

          TypeScript

          React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발강의 썸네일

          React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

          코딩의세계 한태재

          React와 Three.js 를 한번에! 3D 기초부터 현업에 사용할 수 있는 프로젝트 그리고 최적화 팁 까지 !

          초급

          초급

          인터랙티브 웹, react-three-fiber, Three.js

          타입스크립트의 모든 것강의 썸네일

          타입스크립트의 모든 것

          yongsoocho

          Node.js 진영의 표준, TypeScript 어떻게 쓰고 계신가요? 타입 주석만 달고 계신다면 진짜 타입스크립트가 아닙니다. 무엇을 좋아할지 몰라서 다 준비했습니다. 타입스크립트 A to Z를 알아봅시다 :)

          초급

          초급

          TypeScript, NestJS, Deno

          입문강의 타입스크립트부터 ionic6 (앵귤러 기반)강의 썸네일

          입문강의 타입스크립트부터 ionic6 (앵귤러 기반)

          깊알못nodeep

          쉽게 안드로이드 앱, 윈도우 앱, ios 앱을 만들어보고 배포하는 방법까지 알고 싶은 분들에게 추천드립니다. 자바스크립트와 앵귤러보다는 타입스크립트의 기초부터 알려드립니다!

          입문

          입문

          TypeScript, IONIC, 하이브리드 앱

          React 기반 Gatsby로 기술 블로그 개발하기 v2강의 썸네일

          React 기반 Gatsby로 기술 블로그 개발하기 v2

          주현도

          Gatsby v5를 통해 직접 나만의 기술 블로그를 개발해보는 강의입니다.

          중급이상

          중급이상

          Gatsby, React, 블로그

          [개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지강의 썸네일

          [개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

          제로초(조현영)

          노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서비스를 배포해보기도 하고 노드 프로젝트를 타입스크립트로 전환해도 봅니다.

          초급

          초급

          Node.js, Express, MySQL

          타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

          타입스크립트 코리아 : React with TypeScript 세미나

          이웅재

          타입스크립트와 리액트 관련 강좌입니다.

          중급이상

          중급이상

          React, TypeScript

          아이오닉(ionic2) 개발을 위한 타입스크립트 기본강의 썸네일

          아이오닉(ionic2) 개발을 위한 타입스크립트 기본

          차정민

          하이브리드 앱 개발을 위한 프레임워크 중 하나인 Ionic2 Framework를 학습하기 위한 사전단계로 Typescript 를 배워봅니다.

          초급

          초급

          IONIC, TypeScript

          [코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의 썸네일

          [코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

          코드팩토리

          자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

          초급

          초급

          NestJS, REST API, backend

          코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)강의 썸네일

          코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

          이동훈

          MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

          초급

          초급

          MongoDB, Express, React

          따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)강의 썸네일

          따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

          John Ahn

          이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

          초급

          초급

          클론코딩, Node.js, React

          연관 로드맵

          강의가 포함된 로드맵으로 학습해 보세요!

          Javascript로 데스크탑 앱을 만들자 - Electron 채팅 앱 개발 로드맵 썸네일

          Javascript로 데스크탑 앱을 만들자 - Electron 채팅 앱 개발

          인프런