angular_about_front_back

LiJell · May 24, 2022 · a1dc51e · a1dc51e
1 parent 70b23e2
commit a1dc51e
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 0 deletions.
diff --git a/Front-End/Angular/Angular_1.md b/Front-End/Angular/Angular_1.md
@@ -0,0 +1,44 @@
+# Angular
+
+- Front-end and Back-end of a web application
+
+---
+
+
+
+## The Concept of Web Stacks
+
+- Stack is not a technical term
+  - It is a loose term and can be very fluid and sometimes even subjective
+- Angular is a TypeScript based
+
+---
+
+
+
+## Front-End vs. Back-End
+
+- The fridge room could be seen as the **DATABASE** or a series of data resources
+- The kitchen is the **WEB APPLICATION SERVER**
+- The dinning room is a bundle of tech that contains primarily **HTML, FRONT-END, JAVASCRIPT, CSS**, and image
+- The databases and the web application server are part of the **back-end**. HTML, CSS, and front-end JavaScript are a part of the **front-end**.
+
+
+
+- The back-end’s primary responsibility is the processing of data, where the front-end’s main responsibility is the displaying of data and handling user interaction. Front-ends process data as well, but heavy data manipulation is generally within the domain of the back-end.
+
+---
+
+
+
+### The Front-End
+
+- In web development, the **front-end** is what the user sees.
+
+### The Back-End
+
+- Both the **web application server** and the **database** live.
+  - via TS
+    - Handle requests from the front-end for information
+    - Create, Read, Update and Delete in the system (**CRUD**)
+    - Send info back to the front-end in JSON format (**J**ava**S**cript **O**bject **N**otation)
diff --git a/Front-End/JavaScript/Vanilla_Toy_PJ/To-Do.md b/Front-End/JavaScript/Vanilla_Toy_PJ/To-Do.md
@@ -0,0 +1,69 @@
+# To-Do
+
+## 폴더 구조
+
+Vanilla_JS_Toy
+
+- css
+  - style.css
+- img
+  - 0.jpg
+  - 1.jpg
+  - 2.jpg
+  - 3.jpg
+  - 4.jpg
+- js
+  - clock.js
+  - greetings.js
+  - quotes.js
+  - background.js
+  - todo.js
+- index.html
+
+---
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/style.css" />
+    <title>Momentum</title>
+  </head>
+  <body>
+    <form id="login-form" class="hidden">
+      <input
+        required
+        maxlength="15"
+        type="text"
+        placeholder=" What is your name?"
+      />
+      <button>Log In</button>
+      <!-- <input type="submit" value="Log In" /> -->
+    </form>
+    <h2 id="clock">00:00:00</h2>
+    <h1 id="greeting" class="hidden"></h1>
+    <form id="todo-form">
+      <input type="text" placeholder="Write a To Do and Press Enter" required />
+    </form>
+    <ul id="todo-list"></ul>
+    <div id="quote">
+      <span></span>
+      <span></span>
+    </div>
+
+    <script src="js/greetings.js"></script>
+    <script src="js/clock.js"></script>
+    <script src="js/quotes.js"></script>
+    <script src="js/background.js"></script>
+    <script src="js/todo.js"></script>
+  </body>
+</html>
+```
+
+```javascript
+```
+
+![image-20220520151928582](C:\Users\hanju\TIL\image.assets\image-20220520151928582.png)
diff --git a/image.assets/image-20220520151928582.png b/image.assets/image-20220520151928582.png