HTTP_TypeScript_intro

Front-End/Angular/HTTP_Server_Client_DataBase.md

@@ -0,0 +1,73 @@
+# HTTP
+
+## XHR
+
+- Request
+- Response
+
+---
+
+- In a restaurant, the food request comes from the dining room, or the front-end
+- The customer makes a request to the kitchen. In web applications, this typically comes in the form of an **XML/HTTP Request** or an **XHR**.
+
+- XML is replaced by JSON in most instances now
+
+---
+
+
+
+## HTTP stand for
+
+- **HyperTextTransfer Protocol**
+  - the foundation of all communication on the web 
+
+- You can analyze XHR for any website in the browser's network tap in Chrome developer tools
+
+---
+
+
+
+## The Request / Response Cycle
+
+- After the customer makes a request, it is received by the kitchen, or the **web application server**.
+- The web application server then analyzes the request and decides whether or not it can fulfill that order.
+  - If the order is able to be fulfilled, then the kitchen staff will often reach into the database (the fridge), pull the data (the food), prepare the data, and then send the data back to the customer.
+
+![image-20220525214842560](C:\Users\hanju\TIL\image.assets\image-20220525214842560.png)
+
+- This represents a very simple request/response cycle. A request is made to the web application server, analyzed, and either rejected or accepted.
+
+---
+
+
+
+## Error Codes
+
+- XML/HTTP requests can be rejected by the server
+- If rejected, the web application server sends an HTTP response back to the client (the front-end).
+  - 400 level status generally indicate an issue with the request itself
+  - 500 level status codes generally indicate an error on the back-end
+    - **404** (not found)
+    - **403** (forbidden)
+    - **401** (not authorized)
+    - **500** (internal server error)
+    - **503** (service unavailable)
+
+- **Server** and **client** are very common terms in computing. 
+  - The "server" in full stack development typically refers to web application server, and the client refers to any device that is interacting with the server on the front-end. 
+  - Common clients include laptop and desktop computers, mobile phones, GPS systems in cars, voice-driven devices like Amazon Alexa, Siri and Google Home, video game consoles, smart watches, and anything else that connects to a back-end.
+
+---
+
+
+
+## HTTP Success Codes
+
+- All of the 200 level codes are generally positive status codes
+  - **200** (ok)
+  - **201** (created)
+  - **202** (accepted), etc.
+- If the initial request has been accepted by the web application server, and there is a need to retrieve data related to the request, the web application server then queries a database or databases to get the information needed to send back to the user.
+- The database sends the result of the query back to the web application server, and then the web application server usually formats the data into a format to be sent back to the front-end. 
+  - **JSON** (JavaScript Object Notation) is a very common format currently used to send data to clients (the front-end).
+

Front-End/Angular/Angular_1.md → Front-End/Angular/The_Stack.md

@@ -1,4 +1,4 @@
-# Angular
+# The Stack
 
 - Front-end and Back-end of a web application
 

Front-End/Angular/Typescript_Intro.md

@@ -0,0 +1,123 @@
+# Intro Typescript
+
+## Basic of TypeScript
+
+### Strings in TypeScript
+
+- Variables in TypeScript can be **statically typed**
+  - must always retain the data type that they start out with
+- Once a variable is statically typed as a string, it cannot hold any other data type
+
+```typescript
+let name: string = 'Fred'
+```
+
+```typescript
+let shoeColor: string = 'blue';
+console.log(shoeColor);
+```
+
+- It is possible to change variable values over time
+
+```typescript
+sheColor = 'red';
+console.log(shoeColor);
+// will be 'red'
+```
+
+---
+
+
+
+### Numbers in TypeScript
+
+```typescript
+let seatCount: number = 42;
+```
+
+- TypeScript does not designate between integers and floating point or decimal numbers like other languages when it comes to typing. Initializing a decimal number is just like initializing an integer:
+
+```typescript
+let registrationPercentage: number = 92.87;
+```
+
+- Note that `registrationPercentage` will always have to be of a number type. If you were to try to reassign `registrationPercentage` to a string value in another line of that program, the program would not compile, and your text editor would most likely throw an error.
+
+```typescript
+registrationPercentage = 'Ninety Two';
+
+// WILL CAUSE AN ERROR because registrationPercentage is statically typed as a number.
+```
+
+---
+
+
+
+### Booleans in TypeScript
+
+- **Boolean** values are either true or false. In TypeScript, you can declare and statically type a variable without initializing it with a value. For example:
+
+```typescript
+let isRegistered: boolean;
+```
+
+- If you try to use `isRegistered` at this point in the program, however, you will get an error. Some programmers declare variables and type them without initializing them because the value of the variable is completely unknown at the start of the program. Later, you can assign it.
+
+```typescript
+isRegistered = false;
+console.log(isRegistered); // false
+```
+
+- **Enum** values in Typescript are collections of constants. Think of an Enum as a type of fixed array of things that you use as a reference
+
+- The number of elements never changes during the run of the program and the order of elements doesn’t change either.
+
+```typescript
+enum spiceLevel {
+  NONE = "no spice",
+  LOW = "barely spicy",
+  MEDIUM = "medium spicy",
+  HIGH = "hot"
+}
+
+console.log(spiceLevel.MEDIUM); 
+// outputs "medium spicy"
+```
+
+- Modern Integrated development environments ( IDEs ) like Visual Studio Code help you complete `enum` values and other coding constructs by using autocomplete. `Enums` help to ensure that commonly used constants in your program are all consistent. This helps to avoid typos and general errors.
+
+---
+
+
+
+### The 'any' Type in TypeScript
+
+- The `any` type is essentially a wild card
+
+```typescript
+let userData: any;
+```
+
+- `userData` will now be a container that can hold any data type. Once `userData` is initialized, however, it will infer the type from the value given to it.
+
+```typescript
+let userData: any;
+
+userData = 22;
+console.log(userData + 2);
+// logs 24
+
+userData = "free";
+console.log(userData + "man");
+// logs "freeman";
+```
+
+- Note that with an **any** data type, even though the type is inferred upon assignment, you can re-assign the variable to another data type and it still works.
+- Using it when you might be accepting variable data that could conceivably be of any data type, such as getting user data from a server
+
+---
+
+- **Any** types not only accommodate data from any source, but they also signal to other developers the fact that **this particular variable is of an unknown type** and that the data should be handled with care.
+
+---
+