usericon

자유자재


자유자재님의 페이지입니다


전산학이란 무엇인가


전산학이란 무엇인가

데이터 사이언스의 학습 로드맵 (번역) – 이바닥늬우스

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


데이터 사이언스의 학습 로드맵 (번역) – 이바닥늬우스

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가 뭔가요?

MVC 웹 프레임워크가 뭔가요?

#MVC #프레임워크 #스프링 스프링, 장고, 라라벨... IT와 관련된 분이라면 한 번쯤은 들어보셨죠? 정적웹, 동적 웹 편에서 단순하게 PHP로 작성했던 수준을 넘어서 보다 체계적인 틀 안에서 동적 웹을 제작할 수 있도록 해주는 MVC 프레임워크를, C#의 .Net 프레임워크 예제와 함께 알아보기로 해요. = = = 🏠 얄코사이트: 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 = = = 🎬 영상 주요 포인트 ⚙️ MVC의 개념 ... 뭔가가 거대해지고 복잡해질때는 특정 기준으로 분리, 모듈화해서 접근하곤 하죠. 국가기관을 입법, 사법, 행정으로 나누듯이 웹사이트를 비롯한 소프트웨어에는 Model, View, Controller MVC란 접근법이 많이 사용돼요. View 하고 Controller는 그래도 척 들으면 아 이거겠다 싶을거에요. View는 눈에 보이는 것, 웹의 경우 html이랑 css로 나타내는 요소들일 것 같죠. 맞아요. Controller 하면 말 그대로 뭔가를 제어하는 것 아마도 프로그래밍이 이 부분에서 많이 이뤄질 것 같은 느낌이죠? Model, 이게 좀 아리송할거에요. MVC에 대한 설명들을 봐도 무슨 상태를 저장한다느니 알 수 없는 얘기들을 하는데 그냥 '데이터'에 관련된거라 생각하시면 돼요. 🏛 라이브러리 vs. 프레임워크 다행히도 여러 회사 비영리 단체, 혹은 개인들이 이 MVC 구조의 기본 설계가 갖춰진 상태인 MVC 웹 프레임워크란 걸 제공해요. 건물의 기초 골격과 수도, 전기, 난방이 설치된 채로 사용자가 원하는대로 집을 개조하고 꾸밀 수 있게 제공되는거죠. '프레임워크'는 남이 이미 짜놓은 코드란 점에서 '라이브러리'와도 비슷한데 '라이브러리'가 각각 개별적인 기능들 즉 문짝이나 욕조 등의 부속품이라고 한다면 '프레임워크'는 이것들이 연결되어 기초적인 제품 형태를 갖춘 상태를 말해요. 쉽게 말해서, 가져다 쓰는게 '라이브러리'고 기본 틀로 삼아서 그 위에 뭘 덧붙여 만드는게 '프레임워크'인거죠. 💡 더 쉽게 이해하자면 내가 뭔가를 가져다 쓴다는 느낌이 들면 라이브러리 (내가 갑) 내가 무언가의 틀 안에서 작업한다는 느낌이 들면 프레임워크 (프레임워크가 갑) = = = 🎵 엔딩송 : 권민호, 김한영 - Let's Dance 🎼 자료출처 : https://gongu.copyright.or.kr 🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw


MVC 웹 프레임워크가 뭔가요?

정적 웹은 뭐고 동적 웹은 뭔가요?

#정적웹 #동적웹 #PHP 우리가 인터넷에서 보는 웹사이트들은 정적 웹이나 동적 웹, 또는 이 둘의 혼합으로 구분될 수 있어요. HTML, CSS, JavaScript 편에서 살펴봤던 정적 웹과는 동적 웹이 어떻게 다른지, 그리고 어떻게 구현할 수 있는지 PHP를 사용해서 간단한 동적 웹의 예시를 살펴보고, 정적 웹과 동적 웹이 각각 어떤 용도에 적합한지 알아봅니다. = = = 🏠 얄코사이트: 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 = = = 🎬 영상 주요 포인트 📦 정적 웹 정적 웹은 말 그대로 움직이지 않는, 언제 접속해도 같은 리소스를 건네주는 웹사이트를 말해요. 이전의 이 영상에서 어떻게 HTML, CSS, Javascript로 어떻게 웹사이트를 만들 수 있는지 보여드렸죠? 정적 웹은 말 그대로 움직이지 않는, 언제 접속해도 같은 리소스를 건네주는 웹사이트를 말해요. ... 결국 정적 웹의 기준은 접속할 때마다 받게 되는 HTML, CSS, Javascript 코드들, 그리고 동봉된 이미지, 동영상 등의 파일들이 같은가에요. 좀 더 정확히는, 서버에서 이걸 매 번 가공해서 제공하는게 아니라 프로그래머가 작성해서 갖다 준 제품들이 진열되어 있는 걸 그대로 가져가게 하냐는 거죠. 접속 시마다 내용이 변할 필요가 없는 사이트들 예를 들어 어떤 회사나 학교의 소개 페이지라던가 댓글 기능이 없는 블로그 페이지 등에 사용될 수 있겠죠. 🥛동적 웹 한편, 사용자들이 글을 올리는 게시판은 어떨까요? 글 열 개가 있던 게시판이 HTML 파일로 진열돼 있어요. 그런데 누가 글을 하나 더 올리면, 그때마다 개발자가 글이 열 한 개 있는 페이지를 새로 코딩해서 가져다 놓을 수는 없잖아요. 하물며 끊임없이 정보들이 올라오는 SNS 웹페이지 같은 곳은 말할 곳도 없겠죠. 그런 사이트는 편의점이 아닌 식당으로 만들어서 서버가 그때그때 요리를 하도록 해야 하는 거에요. ⭐️ 영상에서 코드 예제와 함께 살펴보세요! = = = 🎵 엔딩송 : 권민호, 김한영 - Let's Dance 🎼 자료출처 : https://gongu.copyright.or.kr 🎼 Music promoted by DayDreamSound : https://youtu.be/L16GOic2UXw


정적 웹은 뭐고 동적 웹은 뭔가요?