본문 바로가기
닫기
필터

Page of 225
  • 미국의 AI(인공지능) 기술 선도 - 트렌드 - KOTRA 해외시장뉴스

    - AI 이니셔티브법 제정 필두, 교육·연구 개발 집중 지원 -

    - 모빌리티·운송·농업 등 산업별 AI 활용, 비약적으로 증가 -

    미국의 AI(인공지능) 기술 선도 - 트렌드 - KOTRA 해외시장뉴스
  • 5 Artificial Intelligence Technologies are Upgrading the Future of AI

    Artificial intelligence is the reproduction of human intellectual processes by computers, particularly computer systems. AI applications include expert systems, natural language processing, speech recognition, deep learning, machine learning, and computer vision.

    5 Artificial Intelligence Technologies are Upgrading the Future of AI
  • 전산학이란 무엇인가

    전산학이란 무엇인가
  • 데이터 사이언스의 학습 로드맵 (번역) – 이바닥늬우스

    이 글은 데이터 사이언스의 전문성을 갖출 수 있는 포트폴리오를 구축하기 위해 필요한 프레임워크, 리소스 그리고 프로젝트 아이디어를 제공하여 당신의 계획에 도움을 주기 위해 작성되었습니다.

    데이터 사이언스의 학습 로드맵 (번역) – 이바닥늬우스
  • PWA가 뭔가요? (+모바일 앱의 종류)

    #PWA #하이브리드앱 #플러터

    모바일 어플리케이션의 새로운 개발방식, PWA를 알아보겠습니다.

    네이티브 앱이란?: 00:13
    웹 앱이란?: 02:01
    하이브리드 앱이란?: 03:29
    크로스-플랫폼이란?: 04:42
    ⭐️PWA란?: 05:39
    PWA 개발하기: 7:39

    = = =

    🏠 얄코사이트: https://www.yalco.kr
    🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers

    🎥 가장 쉬운 Git 튜토리얼: https://youtu.be/FXDjmsiv8fI
    🎥 포인터 쉽게 알아보기: https://youtu.be/u65F4ECaKaY
    🎥 객체지향에 대해 알아보기: https://youtu.be/vrhIxBWSJ04
    🎥 객체지향 디자인 패턴: https://youtu.be/lJES5TQTTWE
    🎥 함수형 프로그래밍이란?: https://youtu.be/jVG5jvOzu9Y
    🎥 쿠키 vs 세션 vs 캐시: https://youtu.be/OpoVuwxGRDI
    🎥 프로세스와 스레드: https://youtu.be/iks_Xb9DtTM
    🎥 비동기 프로그래밍: https://youtu.be/m0icCqHY39U
    🎥 REST API 알아보기: https://youtu.be/iOueE9AXDQQ
    🎥 GraphQL 알아보기: https://youtu.be/EkWI6Ru8lFQ

    ===

    🎬 영상 주요 포인트

    📱 모바일 앱의 종류
    네이티브 앱

    네이티브 앱.
    스마트폰이란 것이 탄생하면서 있었던
    가장 기본적인 형태의 앱이에요.

    해당 스마트폰에 깔린 OS
    즉 안드로이드 또는 iOS환경에
    각각 그 전용으로 개발된 소프트웨인거죠.

    ...

    이처럼 OS 각각의 전용으로 개발되었기 때문에
    네이티브 앱은 안드로이드와 iOS 각각에서
    주어진 모든 자원과 기능들을 활용할 수가 있어요.

    iOS나 안드로이드가 새로 나올 때마다
    최신 기능들을 얼마든 탑재할 수 있고

    스마트폰의 전후 카메라, 각종 센서,
    하드웨어 자원, 내부 파일 시스템 등을
    각각의 OS가 허용하는 한 얼마든지 직.접. 활용할 수 있는거죠.

    스마트폰의 성능을 최대한 활용할 수 있는
    고퀄리티의 앱을 만들 수가 있는거에요.

    그리고 각각 iOS의 앱스토어,
    안드로이드의 플레이스토어에 올려지기 때문에

    구글과 애플에게 검증된 방식대로
    쉽게 스토어에서 검색해서 찾을 수 있고
    원하는 위치에 아이콘으로 추가해서
    언제든 간편하게 사용할 수 있죠.

    하지만 단점도 있어요.

    iOS와 안드로이드 각각에서 만들어야 하기 때문에
    안드로이드 개발자, iOS 개발자를 따로 두거나
    혹은 한 사람이 둘을 다 만들어야 하죠.

    개발에 드는 인력과 시간이 늘어나는거에요.

    ...

    우수한 성능의 앱을 만들 수 있지만
    개발하고 관리하는 과정이 어렵다는 것이
    네이티브 앱의 특징이자 장단점으로 정리될 수 있을거에요.

    모바일 웹

    모바일 웹은 다른 게 아니라
    스마트폰 사용자들을 대상으로 만든 웹사이트에요.

    ...

    스마트폰의 좁은 세로화면에서
    보기 편안하도록 만들어진 사이트가 모바일 웹이에요.

    ...

    눈치채셨겠지만, 모바일 웹의 장점이라면
    개발하고 운영하기가 훨씬 간편하다는거에요.

    모바일용으로 웹사이트만 만들어놓으면
    사용자 폰에서 크롬이나 사파리 같은
    브라우저로 열 수 있기 때문에

    웹 개발만 할 줄 알면 OS에 구분 없이
    어느 폰에서든 동작하는 웹앱을 만들 수 있고

    내용이 바뀔 때도 이 사이트만 업데이트하면 되니까
    스토어의 검수를 기다릴 필요 없이
    언제든 원하는 때에 버전업을 할 수 있는거죠.

    단점은 기능과 성능이에요.

    ...

    브라우저 화면에 나타날 뿐인 모바일 웹으로는
    할 수 있는것들이 제한되어 있어요.

    이걸로도 만들 수 있는 유용한 앱이 많지만
    스마트폰의 모든 자원과 기능을 활용할 수 있는
    고성능 게임이나 그래픽 툴 등의 앱은 어렵겠죠.

    하이브리드 앱

    이 둘 사이에서 절충점을 찾은게 하이브리드에요.

    네이티브로 만들되, 그 앱에 브라우저 창을 둬서
    일부 또는 대부분의 기능을 웹 형태로 제공하는거죠.

    보다 쉽게 말하자면, 안드로이드나 iOS 전용으로
    각각 스토어에 올리는 네이티브 앱을 만드는데

    그 앱 안에 크롬이나 사파리같은 브라우저처럼
    웹사이트를 보여주는 창을 하나 넣는거에요.

    ...

    이런 앱들은 이 네이티브 기능들에 대해서만
    스토어를 이용한 업데이트가 필요하고

    웹뷰에 나타나는 컨텐츠들은
    웹쪽만 업데이트하면 되기 때문에

    네이티브 앱보다 더 유연한 운영이 가능하고
    탑재할 수 있는 기능에도 제한이 없을거에요.

    크로스오버 플랫폼

    리액트 네이티브, 플러터, 자마린
    이런 크로스오버는 또 다른 방식의 접근이에요.

    하나의 언어, 한 번의 개발로
    안드로이드와 iOS 모두에서 동작하는
    네이티브 앱을 만들기 위한거죠.

    리액트 네이티브의 자바스크립트나 플러터의 다트,
    또는 자마린의 C#으로 코딩을 하면

    iOS와 안드로이드에서 각각 이해할 수 있는 언어로
    변환이 돼서 폰에서 돌아가게 되는거거든요.

    웹은 브라우저나 웹뷰가 제공하는
    이 영역까지의 기능만 사용할 수 있지만

    이 크로스오버 플랫폼들은 양쪽 OS의
    더 깊은 영역까지 닿을 수 있도록 만들어졌어요.

    ⭐️ PWA

    PWA는 먼저 설명한 것들을 대체하기 위한 것 또는
    그것들의 단점을 다 해결할 수 있는 무언가가 아니라

    개발하기 쉽고 사용하기 편리한 앱을 만들기 위한
    또 하나의 접근법, 방법론이라고 보시면 돼요.

    더 정확히는, 이 모바일 웹의 한계를
    브라우저의 발전을 통해 끌어올린거죠.

    ...

    브라우저에서 돌아가는 모바일 웹이
    어떻게 이게 다 가능하냐구요?

    네, 브라우저들이 이제 이런 기능들을 지원하는거죠.
    보다 편리한 PWA의 생태계를 위해 위 기능들 뿐 아니라
    여러 다른 것들을 가능하도록 하기 위한
    브라우저 기능들이 개발되고 발달해가고 있어요.

    ...

    웹으로 개발 가능한 수준의 앱은
    브라우저에서 돌리는 것보다 훨씬 편리하게
    그리고 지원되는 더 많은 기능들과 함께
    이용할 수 있는거에요.

    ...

    거기다 이제 홈에 아이콘으로 추가까지 되니까
    스토어에서 다운받는 이 앱들처럼,
    기존 사용자들을 묶어놓는것도 가능해진거구요.


    ===

    🎵 엔딩송 : 권민호, 김한영 - Let's Dance
    🎼 자료출처 : https://gongu.copyright.or.kr
    🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw

    PWA가 뭔가요? (+모바일 앱의 종류)
  • GraphQL이 뭔가요?

    #graphql #restapi

    REST API와는 또 다른 정보전달방식 GraphQL!
    익혀서 사용해보시면 그 간편함과 매력에 빠져들게 돼죠.

    GraphQL이란 무엇이고 어떻게 구현하며, REST API와 비교하여 어떤 장단점이 있는지
    🍕집 아저씨와의 대화를 통해 살펴보기로 해요.

    = = =

    🏠 얄코사이트: https://www.yalco.kr
    🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers

    🎥 가장 쉬운 Git 튜토리얼: https://youtu.be/FXDjmsiv8fI
    🎥 포인터 쉽게 알아보기: https://youtu.be/u65F4ECaKaY
    🎥 객체지향에 대해 알아보기: https://youtu.be/vrhIxBWSJ04
    🎥 객체지향 디자인 패턴: https://youtu.be/lJES5TQTTWE
    🎥 함수형 프로그래밍이란?: https://youtu.be/jVG5jvOzu9Y
    🎥 쿠키 vs 세션 vs 캐시: https://youtu.be/OpoVuwxGRDI
    🎥 프로세스와 스레드: https://youtu.be/iks_Xb9DtTM
    🎥 비동기 프로그래밍: https://youtu.be/m0icCqHY39U
    🎥 REST API 알아보기: https://youtu.be/iOueE9AXDQQ
    🎥 GraphQL 알아보기: https://youtu.be/EkWI6Ru8lFQ

    🎵 엔딩송 : 권민호, 김한영 - Let's Dance
    🎼 자료출처 : https://gongu.copyright.or.kr
    🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw

    GraphQL이 뭔가요?
  • REST API가 뭔가요?

    #rest #api #restful

    HTTP상 두 노드가 소통하는데 중요한 역할을 담당하는 REST API.
    때문에 프론트엔드 개발자도, 백엔드 개발자도 꼭 알고 있어야 하는 개념이죠.

    이번 영상에서는 기본적으로 API란 것이 무엇인지부터 시작해서
    REST API의 개념과 특징, 그리고 구현 방법을 알아보겠습니다.

    = = =

    🏠 얄코사이트: https://www.yalco.kr
    🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers

    🎥 가장 쉬운 Git 튜토리얼: https://youtu.be/FXDjmsiv8fI
    🎥 포인터 쉽게 알아보기: https://youtu.be/u65F4ECaKaY
    🎥 객체지향에 대해 알아보기: https://youtu.be/vrhIxBWSJ04
    🎥 객체지향 디자인 패턴: https://youtu.be/lJES5TQTTWE
    🎥 함수형 프로그래밍이란?: https://youtu.be/jVG5jvOzu9Y
    🎥 쿠키 vs 세션 vs 캐시: https://youtu.be/OpoVuwxGRDI
    🎥 프로세스와 스레드: https://youtu.be/iks_Xb9DtTM
    🎥 비동기 프로그래밍: https://youtu.be/m0icCqHY39U
    🎥 REST API 알아보기: https://youtu.be/iOueE9AXDQQ
    🎥 GraphQL 알아보기: https://youtu.be/EkWI6Ru8lFQ

    ===

    🎬 영상 주요 포인트

    🎮 API의 개념
    어떤 기계를 만들면, 사용자가 그 기능들을
    전부 활용할 수 있도록 제어장치를 마련해야 해요.

    예를 들어 TV는, 사용자가 그걸 켜거나 끄고,
    채널을 선택하고, 음량을 조절할 수 있게 해줘야 하죠.
    그래서 리모컨이 있는거에요.

    같은 이유로 자판기에는 버튼들이 있고
    컴퓨터에는 키보드와 마우스가 있죠.

    이런 것들을 ‘인터페이스’라고 불러요.
    기계와 인간 간의 소통창구인거죠.

    사용자가 명령을 넣는 것 뿐 아니라,
    그 결과와 정보들을 받아오기 위한
    TV의 스크린, 컴퓨터의 모니터 또한
    이 인터페이스에 속해요.
    소프트웨어의 영역으로 들어가볼까요?
    컴퓨터나 스마트폰을 켜보면
    사용자들이 프로그램이나 사이트, 앱을
    원하는대로 제어하고 정보를 볼 있도록

    버튼, 스크롤바, 슬라이더, 브라우저 창 등
    소프트웨어적인 장치들이 마련돼있죠.
    UI란 말 많이 들어보셨을거에요.

    소프트웨어와 인간의 소통을 위한
    User Interface인거에요.
    하지만 IT세계에는 우리 눈에
    직접 보이지 않는 영역들이 더 많죠.
    기계와 기계, 소프트웨어와 소프트웨어 사이에도
    수많은 요청과 정보 교환이 이뤄지고 있어요.
    이들 사이에도 소통할 수 있는 창구가 필요한거죠.

    ...

    이처럼 소프트웨어가 다른 소프트웨어로부터
    지정된 형식으로 요청, 명령을 받을 수 있는 수단을
    Application Programming Interface
    API라고 해요.

    🛋 REST API의 개념
    REST의 가장 중요한 특성은

    각 요청이 어떤 동작이나 정보를 위한 것인지를
    그 요청의 모습 자체로 추론 가능하다는거에요.

    ...

    RESTful하게 만든 API는 요청을 보내는 주소만으로도
    대략 이게 뭘 하는 요청인지 파악이 가능해요.

    ...

    자원을 구조와 함께 나타내는
    이런 형태의 구분자를 URI라고 해요.

    그런데 이런 조회작업 뿐 아니라, 정보를 새로 넣거나
    수정하거나 삭제하는 작업도 필요하죠.
    이들을 통들어서 C.R.U.D, CRUD라고 불러요.

    서버에 REST API로 요청을 보낼 때는
    HTTP란 규약에 따라 신호를 전송해요.

    ...

    하지만 누구든 각 요청의 의도를 쉽게 파악할 수 있도록
    RESTful하게 API를 만들기 위해서는
    이들을 목적에 따라 구분해서 사용해야 해요.

    ===

    🎵 엔딩송 : 권민호, 김한영 - Let's Dance
    🎼 자료출처 : https://gongu.copyright.or.kr
    🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw

    REST API가 뭔가요?
  • HTTPS가 뭐고 왜 쓰나요? (Feat. 대칭키 vs. 비대칭키)

    #https #대칭키 #비대칭키

    오늘날 운영하는 웹사이트를 HTTPS로 세팅하는 것은 필수가 되었죠.
    하지만 이 HTTPS란것이 무엇이며, 이를 사용하는 것이 왜 중요할까요? 🤔

    정보를 암호화하고 다시 푸는 두 방식인 대칭키와 비대칭키 시스템을 사용해서
    어떻게 HTTPS가 사이트 이용의 🚨보안성을 강화하는지 알아보기로 해요.

    = = =

    🏠 얄코사이트: https://www.yalco.kr
    🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers

    🎥 가장 쉬운 Git 튜토리얼: https://youtu.be/FXDjmsiv8fI
    🎥 포인터 쉽게 알아보기: https://youtu.be/u65F4ECaKaY
    🎥 객체지향에 대해 알아보기: https://youtu.be/vrhIxBWSJ04
    🎥 객체지향 디자인 패턴: https://youtu.be/lJES5TQTTWE
    🎥 함수형 프로그래밍이란?: https://youtu.be/jVG5jvOzu9Y
    🎥 쿠키 vs 세션 vs 캐시: https://youtu.be/OpoVuwxGRDI
    🎥 프로세스와 스레드: https://youtu.be/iks_Xb9DtTM
    🎥 비동기 프로그래밍: https://youtu.be/m0icCqHY39U
    🎥 REST API 알아보기: https://youtu.be/iOueE9AXDQQ
    🎥 GraphQL 알아보기: https://youtu.be/EkWI6Ru8lFQ

    🎵 엔딩송 : 권민호, 김한영 - Let's Dance
    🎼 자료출처 : https://gongu.copyright.or.kr
    🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw

    🎬 영상 주요 포인트

    🛡 HTTPS를 사용하는 이유
    HTTP'S'의 s는 secure에요.
    즉 기존의 HTTP 사이트보다 안전하다는 얘기죠.
    무엇으로부터 안전할까요? 크게 둘로 나뉘어요.

    먼저, 내가 어떤 웹사이트에 보내는 정보를
    다른 누군가 훔쳐보지 못하게 합니다.

    ...

    다른 하나는, 여러분이 접속한 사이트가 진품인지,
    신뢰할 수 있는 사이트인지를 판별해주는거에요.

    🔑 대칭키의 개념
    그동안 널리 사용되어 온 건 대칭키 방식이에요.

    메시지를 보내는 쪽과 메시지를 받는 쪽이
    메시지를 암호화하고, 이를 다시 메시지로 바꾸는
    즉 복호화하는 같은 방식을 공유하는거죠.

    ...

    이런 임의의 문자열이 있어요. 이걸 '키'라고 부릅니다.
    (예시: @#%#%$^#$^#)

    4에 3을 곱하면 12가 되죠.

    상대방에게 보내고자 하는 메시지를
    이 '키'와 함께 어떤 알고리즘에 넣고 돌리면

    이처럼 전혀 알 수 없는 암호문이 만들어져요.

    12에서 4를 얻어내려면, 3으로 나눠야 하는것처럼
    이 암호문을 받은 사람이 이걸 해독하려면

    이 키값을 알고, 이 알고리즘을 거꾸로 돌리면 돼요.
    (딱) 이 과정을 복호화라고 하죠.

    이 '키'값을 알지 못하면 절대 이 암호문을 해독할 수 없어요

    🗝 비대칭키의 개념
    이를 보완한 새 방식이 1970년대에 수학자들에 의해 개발됐어요.
    비대칭키, 또는 공개키라 불리는 시스템이죠.

    여기에는 두 개의 키가 사용돼요. 각각 A키와 B키라고 부를게요.
    이 둘은 한 쌍이에요. 서로 다르기 때문에 '비대칭키'라고 불립니다.

    이 암호화 방식을 개발자들은 보통 '공개키'라고 많이 부르는데
    이 영상에서는 여러분이 헷갈리지 않도록

    '대칭키'와 상반되는 개념으로 '비대칭키' 방식이라 부를게요.

    대칭키 시스템에서는 어떤 키로 암호화를 하면
    같은 키로 복호화를 할 수 있었지만,

    여기서는 A키로 암호화를 하면 B키로만 복호화할 수 있어요.
    반대로 B키로 암호화를 하면 A키로만 풀 수가 있죠.

    🏢 Certificate Authority
    일단 네이버가 우리에게 뿌린 공개키.
    이게 정품인지를 확인할 수 있어야죠.

    네이버가 아니라 네이놈의 공개키일수도 있으니까요.

    이걸 인증해주는 공인된 민간기업들이 있어요.
    Certificate Authority, 줄여서 CA 라고 부르죠.

    이런 회사들이에요. 아무나 차려서 될 수 있는게 아니라
    엄격한 인증과정을 거쳐야 CA를 할 수 있는거에요.

    여러분의 브라우저, 즉 크롬이나 사파리, 파이어폭스,
    엣지, 익스플로러 등의 프로그램에는

    이 CA들의 목록이 내장돼있어요.

    🌟 위 개념들을 사용해서 구체적으로 어떻게 HTTPS의 보안이 이뤄지는지 영상에서 확인하세요!

    HTTPS가 뭐고 왜 쓰나요? (Feat. 대칭키 vs. 비대칭키)
  • 쿠키, 세션, 캐시가 뭔가요?

    #쿠키 #세션 #캐시

    일반인들도 한 번쯤 들어보았을 법한 용어들.

    뭔가를 사용한 뒤 저장해놓는다는 의미로 어렴풋이 알고는 있는데
    이 셋은 어떻게 다르고 무엇에 사용될까요?

    한 찜질방을 사용하는 과정에 비유해서
    쿠키🍪와 세션, 캐시를 쉽게 설명해보겠습니다.

    = = =

    🏠 얄코사이트: https://www.yalco.kr
    🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers

    🎥 가장 쉬운 Git 튜토리얼: https://youtu.be/FXDjmsiv8fI
    🎥 포인터 쉽게 알아보기: https://youtu.be/u65F4ECaKaY
    🎥 객체지향에 대해 알아보기: https://youtu.be/vrhIxBWSJ04
    🎥 객체지향 디자인 패턴: https://youtu.be/lJES5TQTTWE
    🎥 함수형 프로그래밍이란?: https://youtu.be/jVG5jvOzu9Y
    🎥 쿠키 vs 세션 vs 캐시: https://youtu.be/OpoVuwxGRDI
    🎥 프로세스와 스레드: https://youtu.be/iks_Xb9DtTM
    🎥 비동기 프로그래밍: https://youtu.be/m0icCqHY39U
    🎥 REST API 알아보기: https://youtu.be/iOueE9AXDQQ
    🎥 GraphQL 알아보기: https://youtu.be/EkWI6Ru8lFQ

    = = =

    🎬 영상 주요 포인트

    🍪 쿠키
    쿠키는 사이트를 방문하고 이용할 때
    브라우저에 저장되는 내용들이에요.

    브라우저는 내 컴퓨터에 있는거니까
    내가 갖고 있는 정보인거죠.

    그런데 이 '쿠키북'에는 한계가 있어요.
    내가 임의로 고치거나 지울 수 있고
    심지어 남이 훔쳐보거나 도둑질하기도 쉬워요.

    나로서는 민감하거나 중요한 정보를
    쿠키북에 적어서 다니기는 불안하겠죠.

    🎟 세션
    세션을 사용하는 사이트에 접속하면
    서버에서는 사용자를 구분하기 위한
    기한이 짧은 임시 키 하나를
    브라우저에 보내서 쿠키로 저장해요.

    '얄코'란 사용자가 사이트 안의 페이지들을 돌아다닐 때
    이 사용자의 중요한 정보들은
    이 서버의 메모리나 데이터베이스에 저장되죠.

    브라우저가 이 사이트의 페이지들에 접속할 때마다
    http 요청에 이 키를 실어서 전송하고

    서버는 그 키를 보고 '얘는 얄코구나' 인식해서
    얄코의 정보들을 가공해서 응답 보내주는거에요.

    ...

    그리고 사용자나 다른 누군가에게 노출되어서는 안 되는,
    서비스 제공자가 직접 관리해야 할 정보들은
    세션으로 서버 안에서 다뤄지는거죠.

    📦 캐시
    캐시란 개념은 웹 뿐만 아니라
    컴퓨터의 메모리 부분이나 안드로이드 등
    다양한 곳에서 쓰이는데

    거의 공통적인 의미로, 가져오는데 비용이 드는 데이터를
    한 번 가져온 뒤에는 임시로 저장해두는거에요.

    웹 캐시는, 이미지 등의 정보를 불러올 때
    데이터 사용량도 발생하고 시간도 들기 때문에

    사용자가 여러 번 방문할 법한 사이트에서는
    한 번 받아온 데이터를 사용자의 컴퓨터
    또는 중간 역할을 하는 서버에 저장해두는거에요.

    = = =

    🎵 엔딩송 : 권민호, 김한영 - Let's Dance
    🎼 자료출처 : https://gongu.copyright.or.kr
    🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw

    쿠키, 세션, 캐시가 뭔가요?
  • Angular, React, Vue가 뭔가요?

    #react #angular #vue

    Angular, React, 그리고 Vue로 대표되는 SPA 프레임워크들!
    웹개발에 관심이 있다면 들어보셨을거에요.

    MVC 프레임워크영상으로 동적 프로그래밍에 대한 보다 깊은 이해를 다지셨다면

    이제 Single Page Application으로, 프론트엔드와 백엔드를 분리한
    보다 현대적인 웹 개발 방식을 알아가보기로 해요.

    영상에 사용된 코드 (주석 추가):
    https://github.com/yalcodic/code-examples/tree/master/18_SPA_Framework

    = = =

    🏠 얄코사이트: https://www.yalco.kr
    🛒 개발자스티커 구매: https://smartstore.naver.com/honeykers

    🎥 가장 쉬운 Git 튜토리얼: https://youtu.be/FXDjmsiv8fI
    🎥 포인터 쉽게 알아보기: https://youtu.be/u65F4ECaKaY
    🎥 객체지향에 대해 알아보기: https://youtu.be/vrhIxBWSJ04
    🎥 객체지향 디자인 패턴: https://youtu.be/lJES5TQTTWE
    🎥 함수형 프로그래밍이란?: https://youtu.be/jVG5jvOzu9Y
    🎥 쿠키 vs 세션 vs 캐시: https://youtu.be/OpoVuwxGRDI
    🎥 프로세스와 스레드: https://youtu.be/iks_Xb9DtTM
    🎥 비동기 프로그래밍: https://youtu.be/m0icCqHY39U
    🎥 REST API 알아보기: https://youtu.be/iOueE9AXDQQ
    🎥 GraphQL 알아보기: https://youtu.be/EkWI6Ru8lFQ

    = = =

    🎬 영상 주요 포인트

    😎 SPA의 등장 배경
    ...

    웹에서도 그게 가능하다면, 즉 서버에서 데이터만 보내줘도
    이걸 브라우저에서 HTML, CSS, 자바스크립트로 랜더링해낼 수 있다면

    이제 서버는 어디서 정보를 요청하든
    동일한 작업을 수행해서 데이터를 전송하면 될 거에요.

    서버 개발자가 이 일에만 집중할 수 있게 되는거죠.

    웹사이트 개발을 이렇게
    사용자 컴퓨터의 브라우저에서 돌아가는 프론트엔드와
    서버에서 돌아가는 백엔드로 분리하는거에요.

    브라우저에서도 동작하는 이 자바스크립트란 언어로
    강력한 라이브러리나 프레임워크를 만들면 가능하지 않을까요?

    바로 그게 Angular, React, Vue 같은 SPA 프레임워크에요.
    🥓 SPA의 개념
    SPA, Single Page Application은
    종업원들이 고기와 쌈재료를 가져다주면
    손님이 직접 불판에 구워먹는 고기집이라고 생각하시면 돼요.

    사용자가 사이트에 접속하면
    서버는 정적 웹처럼, HTML, CSS, 자바스크립트로 된
    코드들을 브라우저에 전송해요.

    여기 포함된 자바스크립트 코드는 Git똥찬 기능을 수행하는데요
    주어진 데이터에 따라 HTML 웹페이지를 랜더링해내는거에요.

    기존의 동적 웹에서 서버가 하던 일을
    이제는 사용자의 컴퓨터에서 브라우저가 해내는거죠.

    SPA는 서버에서 데이터를 받아와야 할 때마다
    요청을 보내서 반환된 데이터로 사이트 내용을 갱신해요.

    이렇게 되면 사이트에서 뭘 할 때마다 새로 접속하지 않고
    한번 로드된 화면에서 많은 기능을 사용할 수 있겠죠.

    그래서 Single Page Application이라 불리는거에요.

    = = =

    🎵 엔딩송 : 권민호, 김한영 - Let's Dance
    🎼 자료출처 : https://gongu.copyright.or.kr
    🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw

    Angular, React, Vue가 뭔가요?

라이브러리에 저장

좋아하는 강좌들을 수집하고 관리하고 공유하세요

닫기