Fullstack Stack Part 2 Flashcards

1
Q

What’s the difference between a library and a framework

A

People use these terms interchangeably but they don’t mean the same thing. Frameworks and libraries are both code written by someone else that helps you perform some common tasks in a less verbose way

LIBRARY:

  • Using a library = going to Ikea to pick items you need
  • You are in control of when are where you call the library (like jquery)

FRAMEWORK:

  • Using a framework = moving into a model home that has everything decorated for you already
  • Frameworks are more opinionated
  • When you use a framework, the framework is in charge of the flow and provides some places for you to plug in your code (as needed)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Express

A
  • Express is the most popular Node web framework and is the underlying library for many other popular Node Web Framework
  • As a framework, express is mostly unopinionated
  • The Express library provides mechanisms to:
    o Write handlers for requests with different HTTP verbs at different URL paths (routes)
    o Add request processing middleware at any point in the request handling pipeline
  • Express itself is fairly minimalist, but is compatible with other libraries that work with cookies, sessions, URL parameters (for example Express body-parser
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Express Router

A

We can create a router with express.Router(). The Express Router is like a mini express application and it provides us with useful routing APIs like .use , . get , . param . We can have many routers for different types of routes, which in turn makes our applications more modular and flexible.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Routing

A

Routing refers to how an applications endpoint’s respond to client requests. Each route can have one or more handler functions that get executed when the route is matched.

app. METHOD(PATH, HANDLER)
- app is an instance of express
- Method is an http request method
- Path is a path on the server
- Handler is the callback function executed when the route is matched

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

HTTP

A

Hyper Text Transfer Protocol
A client-server protocol which allows the fetching of resources like HTML documents
Clients and servers communicate by exchanging individual messages (1 Request, 1 Response)
It is the foundation of any data exchange on the web

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

API

A
  • Application Programming Interface
  • An API allows two systems to communicate with one another and provides the language and contract for how these systems can interact
  • API’s can use HTTP requests to get information from a web application or web server
  • when a company offers an API to their customers, it just means that they’ve built a set of dedicated URLs that return pure data responses
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

API Endpoint

A
  • An endpoint is one end of a communication channel. When an API interacts with another system, the touchpoints of the communication are considered endpoints.
  • Each endpoint is the location from which APIs can access the resources they need to carry out their functions.
  • Endpoints specify where resources can be accessed by APIs.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Route Parameters

A

Named URL segments that are used to capture the values specified at their position in the URL. The captured values are populated in the req.params object
Example: http://www.cookies.com/:cookieId

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

RESTful Routing

A

Representational State Transfer – an architectural style for designing backend applications.
Restful routes are a conventional pattern to follow when structuring different routes for interacting with the server whenever an HTTP request is made.
In order for a route to be completely RESTful, it must:
- Separate the client from the server
- Be reliable
- Use HTTP verbs and URLs
- Not hold state between requests (all information necessary to respond to a request is available in each request)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Express Body Parser

A

Express comes with a built-in middleware that automatically parses incoming request bodies and makes the data available under req.body

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Express Middleware

A
  • A function that receives the request and response objects of an HTTP request/response cycle.
  • Middleware can execute any code (like logging) and then move to the next middleware on the chain or modify the request and response objects before passing them on to the next middleware on the chain.
  • Middleware can also end the request/response cycle (res.send)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Client vs. server

A

The client connects to the server to ask it to perform actions. The client sends HTTP requests. The client is often the browser.

The server is a connection point for several clients that will handle their requests. It responds to HTTP requests

Request / Response Cycle
ONE REQUEST – ONE RESPONSE
- Request: a formatted message sent over the network by a client. Consists of VERB, URI (route), headers, and body
- Response: A server’s reply to a request. Contains headers, status

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Payload

A

A payload is the actual data pack that is sent with the GET method in HTTP. It’s the part of the transmitted data that holds the actual intended message
It is crucial information that you submit to the server when you are making an API request. It’s oftentimes a JSON Object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

JSON

A

JavaScript Object Notation
Lightweight, data-interchangeable format
Data is stored in name / value pairs that are in quotes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

DBMS

A

Database Management System
A DBMS doesn’t have to be relational. It’s just an application that intelligently stores data and can answer requests that manage the data. A DBMS is a one layer and language to store and access data – sold as a way for non-technical people to manage data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

RDBMS

A

Relational Database Management System – allows you to create, update, and administer a relational database. Most RDBMS use SQL to access the database.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

SQL

A

Structured Query Language = a programming language used to communicate with data stored in a relational database management system.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

MySQL

A

MySQL is a relational database management system based on SQL

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Database

A

A database persists information and is accessible via code.
Good databases are:
- Organized
- Queryable
- Manageable
- give us concurrency – multiple clients can make queries to read and update without the risk of deadlock or starvation.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

ACID (databases)

A

Acid refers to a standard set of properties that guarantee database transactions are processed reliably.

A -
Atomicity – you guarantee that either all of the transaction succeeds or none of it does. You don’t get partially successful transactions.

C-
Consistency – Ensures that data is consistent – all data will be valid according to defined rules

I -
Isolation – Guarantees that no transaction will be affected by other transactions that have not yet been completed

D
Durability – Once a transaction is committed, it will remain in the system. Changes must be stored permanently.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

PostgreSQL

A

An advanced, open source relational database that supports both SQL (relational) and JSON (nonrelational) querying.
We commonly call it just “Postgres”
It is NoSQL (Not only SQL)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Postico

A

Postico provides an easy-to-use interface that makes PostgreSQL more accessible.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Object Relational Mapper (ORM)

A

Acts as a bridge between our code and the RDBMS.
Object relational mappers let us interact with our database using a language of our choice instead of SQL.
This is great because SQL can be complicated. However, the abstraction means that we won’t have as good of an understanding of what is going on under the hood.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Sequelize

A
  • Sequelize is promised-based Node.js ORM (Object-Relational-Mapper)
  • allows us to easily manage a SQL database.
  • It maps an object syntax onto our database schemas.
  • Sequelize uses a constructor function to connect to your database and it return a Sequelize instance for you to interact with.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Sequelize Hooks

A
  • Hooks are functions which are called before and after calls in sequelize are executed. There are four lifecycle event categories (Validate, Create, Destroy, Update)
  • Hooks include - (beforeUpdate, beforeCreate, etc) - https://sequelize.org/master/manual/hooks.html
26
Q

Sequelize Association

A

An association is a relationship between two Sequelize models (a source and a target). Creating an association generally involves adding a foreign key to one model, which creates a reference to the other. Some common associations include “has one”, “belongsTo”, “hasMany”, and “belongsToMany”

27
Q

Magic Methods

A

Defining relationships between models in Sequelize will create some “Magic Methods.” Access via instance.__proto__

28
Q

Eager Loading

A

The Sequelize version of SQL’s inner join. If we have an association between two tables, we can “include” information from the associated table with eager loading.

29
Q

Instance and Class Methods (Sequelize)

A

Instance methods are available on instances of the model whereas class methods are available on the model itself, and allow us to do something to more than one instance.

30
Q

ECMAScript vs. JavaScript

A

ECMAScript is a language specification for scripting languages
JavaScript is an implementation of that specification

31
Q

JavaScript ES6

A
  • Also known as ECMAScript 2015 or ECMAScript 6
  • ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript
  • The second major revision to JavaScript
  • Introduced: ‘let’, ‘const’, and arrow functions, default parameter values, rest params (…)
32
Q

Webpack

A
  • Webpack is a static module bundler for modern JavaScript applications
  • It takes all the code from your application and makes it usable in a web browser.
  • When Webpack processes your application, it builds a dependency graph which maps out the modules that your project needs and generates one or more bundles. A bundle is a distinct grouping of connected code that has been compiled and transformed for the browser.
33
Q

Module

A
A module is just a file
Modules can load one another using special directives like ‘import’ and ‘export’ to interchange functionality and call the functions of one module from another
34
Q

Postman

A

Platform for API development and testing

35
Q

V8 JavaScript Engine

A
  • V8 is an open-source JavaScript engine developed by The Chromium Project for Google Chrome and Chromium web browsers
  • Node uses the V8 JavaScript engine
36
Q

Node

A
  • Node is an open-source, cross-platform runtime environment that allows developers to create all kinds of server-side tools and applications in javascript
  • The runtime environment is intended for use outside of a browser context
  • We can use Node to easily create servers using the built-in HTTP module (but Express makes it even easier to write and maintain our server code)
37
Q

React

A
  • an open-source, front end, JavaScript library for building user interfaces
  • created by Facebook
  • key features include Components, JSX, the unidirectional dataflow and server-side rendering
38
Q

React Hooks

A

React Hooks allow us to use state and other React Features in functional components

  • useState: a hook that lets us add state to React functional components
  • useEffect: a hook that lets us perform side effects in functional components
39
Q

JSX

A
  • Javascript XML
  • JSX is a syntax extension to JavaScript
  • It allows us to write HTML elements in JavaScript and place them into the DOM without using createElement() or appendChild() methods.
  • This makes it very helpful for writing React Apps
40
Q

State

A

State is essentially an object of a set of observable properties that control the behavior of a React component. When you change the state, React will update the view.

41
Q

Components in React

A
A component is an independent, reusable piece of the UI
Two main types – functional components and class components
42
Q

Class Component vs. Functional Components

A

CLASS COMPONENTS:

  • Class components are defined using the ES6 class syntax and extending React.Component
  • They may be stateful, have a render method, and also access to props via this.props

FUNCTIONAL COMPONENTS:

  • Functional components are just a function
  • They have no state, but react hooks enable us to mimic the functionality of class components
  • The functional component’s return value is what renders
  • Accesses props passed to it via the first argument to the function.
43
Q

Props

A

React props are like function arguments in JS and attributes in HTML. Props are how data is passed between React components, through a unidirectional flow. Props data is read only by the receiving component

44
Q

Three Principles of Redux

A
  1. The global state of your application is stored in an object tree within a single store
  2. That state is read-only and the only way to change it is by emitting an action
  3. Actions are dispatched using pure reducers
45
Q

Redux Reducer

A
  • A Redux Reducer is just a pure JavaScript function (no side effects)
  • It takes in two parameters, the current state and an action
  • When an action is dispatched, the store forwards a message (the action object) to the reducer and the reducer produces the next state
46
Q

React-Redux

A

React Redux is the official Redux binding UI for React. It binds the two libraries together to make them easier to use.

47
Q

DOM

A
  • The document object model
  • The data representation of the objects that comprise the structure and content of a document on the web
  • The DOM represents the document as nodes and objects, so that programming languages can connect to the page
48
Q

Virtual DOM

A
  • Most JS frameworks update the DOM too often
  • The virtual DOM was created by the React team
  • It’s a virtual representation of the DOM and manipulating it is like drawing on a blueprint instead of doing construction on a real house
  • When you render JSX, the virtual DOM gets updated. Once the virtual DOM gets updated, it’s compared to the snapshot of the virtual DOM from before the update to determine which changes need to be made.
49
Q

connect()

A

A function that connects a React component to the Redux store

50
Q

MapStateToProps()

A

Subscribes your React component to updates in the Redux store
Any time the store gets updated, mapStateToProps gets called

51
Q

MapDispatchToProps()

A

Allows you to dispatch actions to the store from within a component

52
Q

React Router

A

Used on Single Page Applications to render certain components when a specific route it called in the URL

53
Q

Front-End vs. Back-End Routes

A

Server-side / back-end routing is what happens when a route makes a request to the server. Like clicking a link that submits your form to a server. However, it does result in a full-page refresh and it can take a minute for your page to render again

Client-side / front end routing is when a route is handled internally by the JavaScript that is loaded on the page. For example, clicking a link in a React component will change the URL and bring you to another “page” without a page refresh or a request to the server

54
Q

Controlled vs. Uncontrolled Form

A

In a controlled form, data is handled by the React component whereas with an uncontrolled component, the data is handled by the DOM itself

55
Q

React Component Lifecycle

A

The React Component Lifecycle describes the methods that run on a React Class component. Every React Class component needs a Render()
They describe what happens when a component is:
- Mounting
- Updating
- Unmounting
- Handling an error

56
Q

SPA

A

A SPA is a Single Page Application
A web application implementation that loads only a single we document, then updates the body content of that single document and shows different “views”

57
Q

Axios

A

A JavaScript Library for making http requests from node or XMLHttpRequests from the browser

58
Q

MVC

A
  • Model View Controller – a pattern in web design used to implement user interfaces, data and controlling logic
  • Emphasizes a separation between the software’s business logic and display
  • Model – Manages data and business logic
  • View – handles layout and display
  • Controller – Routes commands to the model and view parts
59
Q

Functional Programming

A

Functional Programming is the process of building software by:

  • Composing pure functions
  • Avoiding shared state, mutable data and side effects
  • It is declarative rather than imperative
  • Application state flows through pure functions
60
Q

Destructuring

A

A JavaScript syntax that makes it possible to unpack values from arrays and objects into distinct variables

61
Q

Script Tag

A

A script tag is used to embed a client-side script. It either contains the scripting statements or points to an external source that does

62
Q

Promise

A

An object that may produce a single value some time in the future: either a resolved value or some reason that it’s not resolved.
A promise can be returned synchronously from an asynchronous function in one of three possible states:
1. Fulfilled
2. Rejected
3. Pending