웹시스템
1.1. WWW
Pre-Internet EraProprietary client-server over Intranet (e.g., Ethernet) and ModemPre-WWW EraEmail, FTP, Bulletin Board Systems (Hitel,나우누리, 천리안)RPC b
2.2. HTML
HTML5 문서임을 선언하며, 문서의 첫 줄에 와야 함최상위 요소 <html>최상위 HTML 문서의 최상위요소Head와 body를 포함<html lang=“ko”> <- 검색엔진을 위한 meta문서자체의 정보(meta)를 담는 <head>문서제목,
3.3. CSS
CSS 도입 이전까지 브라우저들은 각각의 Style tag들을 사용함HTML element들이 스스로 스타일(“어떤 색으로,””얼마나 크게,””어디에” 보여야 하는지)을 정의함CSS 도입 이후 (CSS level 1 1996 발표, 현재 CSS level 3)Exter
4.4. JavaScript Fundamentals
JavaScript is a scripting languageDesigned to write scripts or small programs to automate tasks or perform functions (Bash, JavaScript, Python, etc.)A
5.5. JavaScript Function Class
A function is a self-contained collection of statements that run as a single unit함수는 하나의 단위로 실행되는 자체적인 문장 모음입니다A function declarationDefine a body of
6.6. JavaScript Asynchronous Programming
async / await
7.7. DOM (Document Object Model)
A convention for describing the structure of an HTML document and a programming interface for interacting with the browser.An Interface to access HTML
8.8. Form & Semantic Tags
<form> is used to define an interactive area on a web page where users can input data and interact with the web application.Plain HTML 에서는 사용자 입력 정
9.9. Interfacing and REST
Fetching resources such as HTML documentsA complete document is reconstructed from the differentsub-documents fetched (e.g., text, CSS, images, videos
10.10. NodeJs
NodeJs Overview Deno NodeJS vs. NextJS Node Fundamentals Modular design : Modules Modules (calculate example) Modules (calculate example) : ES6
11.11. ExpressJs
npm (Node Package Manager) npm command and package.json
12.12. MongoDB
v Vertical Scaling§ Puts more memory and more powerful CPU as well as Disks§ HP Superdome can have 32 Intel Xeon and 48TB RAMv 데이터 저장소에 대해서 크게 두 가지 op
13.13. Mongoose
Translating documents in a MongoDB to objects in the program Object Document Mapper for MongoDB ODM == Object Relational Mapping (Apache MyBatis,
14.14. React Intro
– Aligned based on their first appearance to the market– jQuery was very popular– React from Facebook (Meta)– Angular from Google In the last 10 year
15.15. React Component
JSX is a syntax extension to JavaScript that allows us to define Reactelements using a tag-based syntax directly within our JavaScript code§ Even if
16.16. React Event / State
All the HTML form elements that are available to the DOM are also availableas React elements React lets you add event handlers to your JSX. Event
17.17. React State(2)
Triggering a render (delivering the guest’s order to the kitchen)Rendering the component (preparing the order in the kitchen)Committing to the DOM (pl
18.18. React Context
v Context lets the parent component make some information available to anycomponent in the tree below it—no matter how deep—without passing itexplicit
19.19. React Effect
v So far, logics inside React components we have studied are rendering codeand event handlers.§ Rendering code is about calculating the result on the
20.20. Microservice Architecture
v Monolithic Architecture: Popular in Web Applications§ Usually all-in-one in the Web Application Server• UI, DB, Logic/App§ One build and deployment
21.21. Design Backend for Data Intensive Application (1)
We need both the principles (theory from the textbook) and thepracticalities of data systems. We need to figure out which tools and which approache
22.22. Design Backend for Data Intensive Application (2)
Data models are perhaps the most important part of developing software,because it is about not only on how the software is written, but also on howw