🍪 TIL 0112

[git Commands]

✔️ To update the clone that the user received, these commands are needed:

*git pull origin master: Update the file "master".
*git stash: Transient(temporal) savings are done but not commited to git yet.
*git stash list: See the list of temporary saved files.
*git stash pop: Get the part of the files that user saved temporaly.

---

[on- / Booleans]

• The code that starts with on goes to events; Meaning that information of the tags go to events when there happens some changes in input.
  --> ex) onChange, onClick, etc.

• Empty string means false.

• If there are any strings included in the braket, it is considered as true even it is written " ". The space takes the string of space itself.
  --> The goal is for the computer to recognize the message/string.

• Also, 0 equals false and all real numbners except 0 equals true.

---

[Interaction Between Two Computers]

• To send data from one computer to the other, there needs a program that automatically takes the process of data sending. What the user needs to do is tell the computer what data the user is trying to send.
• Once the user commands the computer to send the data, there appears a way for the computer to send data.
  --> At this point, it becomes possible to publish data to the other.
• Mail, text, and hyper-text can be sent as a data.
  --> Hyper-text is used in HTML: Hypertext Markup Language.

3 ways to send data:

FTP: Sending regualr files.
SMTP: Sending simple mails.
HTTP: Sending text or typer-text. (The one that I'm going to use often.)

Rules for HTTP:

1. The data should be "requested" from one computer to the other. In other words, there should be interactions among request and respond.
   --> Requesting from frontend computer to backend computer.
   ex) (request) Upload this post.
   --> Text data request is sent in a form of text.
2. Request delivered to backend computer and save the request into the data base. (Similar as saving in excel)
3. If data received and solved the request successfully, it is responding to frontend computer.
   ex) 200 (respond) Succesfully Done.
   --> The number 200 here is status response code. The status response code comes together with response code.
   --> 200 status response code means the request is done succesfully.
   --> 100th status code and 300th status code, each of them contains different meanings.
   --> If the user receives 400 or 500th code, it means the backend computer failed to resopnse.

---

[Rest-API vs. Graphql-API]

✔️ Each APIs have different functions thus the user must request to the corresponding API for the response.

Rest-API:

✔️ Form of a link.

• How it works: The charger goes to the first post and gets the data and returns the data back to frontend.
• Even if the user wants only one information, whole bunch of data is brought. (Waste)
• At this point, user wanted something more efficient, so Facebook made graphql-API, which is way much simple than original Rest-API.

Graphql-API:

✔️ Form of a function.

• Brings the data that is only needed and returns the specific data.

But why should we learn rest-API?

• From the outsource, most of those sources use rest-API.
  ex) Gathering all the information of weather, and users can access to the data for free.
  --> These pre-existing API help users develop easier and faster since free backend is given already.

Response Header / Request Header

Header insdie the response that contains the short summary of what kind of data it contains.

💡 JSON: Java Script Object Notation
Executing the response as a form of object(객체).
--> Interact in a form of JSON.(Also receive status response code.)
--> Request** in form of object, which contains keys and values.

---

[CRUD]

Create Read Update Delete
✔️ These four things should better be included in API.
✔️ Backend needs them for making API so that it can respond to what frontend requested.

---

[Axios vs. Apollo-client]

Each of them are operated by specific options:

-- Axios --
Post: Add data
Put: Edit data
Delete: Remove data
Get: Get data from the server

-- Apollo-client --
Mutation: Functions that affct data
Query: Functions that don't affect data

✔️ Both get and query don't give any changes to data. Just getting or checking the data.

➡️ To use these functions in vs code:
♦️ Axios : import axios from 'axios'
const result = axios.post(API NAME GOES HERE)
const result = axios.put(API NAME GOES HERE)
const result = axios.delete(API NAME GOES HERE)
const result = axios.get(API NAME GOES HERE)

♦️ Apollo-client : import {useMutation, useQuery} from '@apollo/client'
const result = useMutation(API NAME GOES HERE)

🔔 To sum up, Rest-API uses axios that receives all data given by backend while graphql uses apollo-client that picks specific needed data.

---

[Tools for API Practice and API Docs]

🔹 Rest API => Postman & Swagger
-->Swagger contains API docs.
--> Postman downloaded in Google apps.
🔰 Excercise Link:
http://example.codebootcamp.co.kr/api-docs
http://koreanjson.com

• API endpoint: A variable the user writes at the end of the link form to get that particular data.
  --> frontend: "I want to upload my first post. What is the API endpoint?
  --> backend: "/post/1"
  ex) https:// koreanjson.com /posts/1
• Postman blue send button => request to get/check/see data.
  --> Then the user gets the response with status response code (200).
• Go to the property list through request and go inside the data base. Then get the response from there and display to frontend.

Example)

⬇️ How Swagger looks like: ⬇️

⬇️ How Postman looks like: ⬇️

🔹 Graphql API => Playground
🔰 Excercise Link:
http://example.codebootcamp.co.kr/graphql

• Backend developers can edit type details in mutains/query.
• Playground both contains API docs and API practice.
• When use creatProfiles for instance, the results give the user multiple unknown profile data. This is because the value the user input and the other users input were overlapping each other.
• FetchBoard: When the user wants to check with the ID number of a post--to see the writer, title, and contents--, it doesn't overlap with other posts since it is automatically produced when registered in data base.

Example)

⬇️ createBoard ⬇️

• Declaring writer, title, and contents to the board.
• Then type what the user wants to know: message and number.
• Returns ID number for this board: 112.
• Return message appears, telling that the board is created successfully.
  

⬇️fetchBoard⬇️

• Fetching with the number(id) that was provided precedingly in createBoard result.
• Then write what the user want to know: writer, title, contents.
  

[Algorithms - If Condition]

✔️ If-condition executes the logic only if the condition matches.
🔍 If - Boolean

function boolean(input1, input2){
  if (input1 === true || input2 === true) {
//조건식 자체는 true일 경우에만 실행되기에 그냥 input만 써줘도 됨
    return "true";
  }
  else (input === false && input2 ===false){
    return "false";
  }
}
boolean(true, false);
--> 'true'

🔍 If - Temperature

function temperature(num){
	if(num<=18) {
			return "조금 춥네요" ;
	}
	else if (num>=19 && num<=23){
			return "날씨가 좋네요";
}
	else if (num>=24){
			return "조금 덥습니다";
}
}
temperature(23)
--> 날씨가 좋네요

🔍 Case - Weekdays

const day = “월요일”;

switch(day){
	case “월요일” :
		“월요일입니다”;
	break;
	case “화요일”:
    "화요일 입니다.";
}

--> After switch, case must follow. This is because the user must write the value of Day so that the function is executed.
--> Case is executed even if the logic doesn't match.
--> That's the reason why break is needed. Break literally breaks the function at the point of case where user wants.