WD Flashcards

1
Q

cli
What does it stand for? What is it?

A

Command line interface
Text-based interface where you can input commands that interact with a computer’s operating system
(Ex. Bash, cmd, powershell)

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

gui
What does it stand for? What is it?

A

Graphical user interface
Form of user interface that allows users to interact with electronic devices through graphical icons and visual indicators
(Ex. Windows, macOS, and android environments, the files/folders you see on the desktop)

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

jsx
What is it?

A

(JavaScript XML)
A syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file

  • simply: what let’s you write HTML in a JavaScript file
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Hooks

A
  • are specific to react
  • classes are a part of JavaScript
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

./
Ex: ‘./index.css’

A

Means it’s in the same folder

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

export default
How many things does it export?

A

1

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

State

A

Is a built-in React obj that is used to contain data / information about the component

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

JSON
What does it stand for? What is it?

A

JavaScript Object Notation
- it is a lightweight data interchange format for storing and exchanging data
- used to transmit data between server and web app
- represented as key-value pairs (similar to obj literals in JS)
- text, in JS object notation

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

JSON.parse()
What does it do?

A

Translates JSON into a JavaScript object

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

JSON.stringify()
What does it do?

A

Translates a JavaScript obj into JSON

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

../

A

Means exit the folder that you’re in

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

Promise
What is a promise?

A

Promise is an obj..that produces a single value sometime in the future
- resolve value or reject

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

3 states of a promise

A
  • fulfilled
  • rejected
  • pending
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

AJAX
what does it stand for? what is it? what does it do?

A

Asynchronous JavaScript and XML
- it is a technique/method that allows you to create asynchronous web apps
- allows parts of the web page to be updated without reloading the entire page
- it sends and retrieves data in the background while the user interacts with the page

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

Benefits of AJAX

A
  • page updates quicker
  • less data is downloaded on updates which results in less wasted bandwidth
  • feels faster and more responsive because you don’t have to wait for the page to refresh
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Async/Await (es8)
What does async do? What does await do?

A

Async makes a function return a promise
Await makes an Async function wait for a promise
- Async/await is built on top of promises
- allows you to write asynchronous code in synchronous manner
- doesn’t have resolve or reject params
- everything after await is placed in an event queue

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

CDN
What does it stand for?
What is it?

A

Content Delivery Network
Is it a network of interconnected servers that speeds up webpage loading for data-heavy applications

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

DNS
What does it stand for?

A

Domain Name System

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

API
What does it stand for?

A

Application Programming Interface

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

console.error vs throw new error
What is the difference?

A

console.error
- method provided by browser’s console obj in JS
- used to log error messages in console
- does not stop the execution of a program

throw new Error
- used to explicitly throw an exception(an error) in JS
- used when you want to indicate that something unexpected happened and you want to stop the normal flow of the program

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

Benefits of CDN (content delivery network)

A
  • faster content delivery: users can access content from a server that is physically closer to them, reducing latency and improving page load times
  • improve website performance: CDNs cache static content(img, Stylesheets, scripts, etc) on edge servers. Cached content can be served directly from the edge server, reducing load on the origin server and speeding up content delivery
  • loading balance
  • distributed global presence
  • bandwidth savings
  • security enhancements
  • scalability
  • caching strategies
  • cost efficiency
  • content analytics
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

.finally() (es9 2018)
When is it used?

A

Good for when you need to run a piece of code no matter what after a promise

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

for await of (es9 2018)
What does it do?

A

Creates a loop that iterates over an array of async iterable objs, as well as sync iterables

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

Promise.allSettled() (es2020)

A

Takes an array of promises and returns a single promise, an array of objs that describe the outcome of each promise

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

Promise.all() (es6)

A

A method that lets you iterate through an array of promises and returns an array of fulfilled values

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

What does REST in RESTful API stand for?

A

Representational State Transfer

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

What are the standard http methods?

A

GET - getting data
POST - creating data
PUT - updating data
DELETE - deleting data

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

What is REST?

A

An architectural style for designing networked applications. (Set of constraints or principles that dictate how web services should be designed
RESTful APIs are based on the principles of REST )

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

Parts of useState

A

const [state variable (ex. index), state setter function (ex. setIndex] = useState(0);

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

Environment variables (.env files) [don’t forget, still not best practice and not secure]
What do you use it for?

A

You store things like api keys
Then put the .env file into gitignore

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

What is node.js?

A

It is a program that allows JavaScript to be run outside the web browser (created with v8 engine)
before you could only run it on the browser because they were the only ones that had the JS engine (like v8)
- commonly used to build backends
- written in combo of JS and C++
- Python and Perl used to automate the build process of Node.js source code

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

Common js what do you know about it?

A

Export and import is different
Import you use const __ = require()
Export: module.exports = __

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

Top level await only works where?

A

Inside modules
Other times you still need async function

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

Difference between require() and import

A

Require(): part of CommonJS (older) / it is synchronous
Import: es6 and up, asynchronous

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

Req.query, what is it/what do you get?

A

It is an obj containing the parsed query params from the URL
- Query params are included in the URL after the ?
- used to send data to the server as key-value pairs

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

Req.body, what is it/what do you get?

A

It is an obj containing data submitted to the server in the body of POST/PUT/PATCH request

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

Req.headers, what is it/ what do you get?

A

It is an obj containing the HTTP headers that were sent to the client in the HTTP requests

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

Req.params, what is it/what do you get?

A

It is an obj that contains route parameters
Placeholders in the route pattern specified when defining a route
Captures values from the actual URL

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

res.send, what is it/what does it do? What can you attach before it?

A

It is a method used to send a response to the client
Can be used to send various types of responses (plain text, HTML, JSON, etc)
It automatically sends the appropriate “content-type” header based on the type of data being sent
You can attach .status()
Ex: res.status(404).send(“not found”)

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

const fs = required(“fs”);
What is fs?

A

Fs stands for file system
It allows you to access your file system

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

Res.json, what is it/what do you get?

A

It is a method specifically designed to send JSON responses to the client.
- Automatically sets “Content-Type” header to ‘application/json’ and converts the provided JS obj to a JSON string before sending it in the response

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

DBMS

A

Database management system
Collection of programs that allow us to access databases and work with data allows control access to database users

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

Schema

A

Relation between tables and fields

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

What does REPL stand for? what is it?

A

Read - eval - print - loop
it is a simple interactive computer programming environment that takes single user inputs, executes them, and returns the result to the user.
A program written in REPL environment is executed piecewise

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

what is a computer process?

A

Simply = an active application
a process is the instance ( result of an instantiation process of a virtual or physical computer system )of a computer program that is being executed by one or many threads ( a thread of execution is the smallest sequence of programmed instructions that can be managed independently by a scheduler, which is typically part of the operating system
- thread is a component of a process )

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

What is a “module” in JavaScript?

A

Single js file

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

Array.filter()

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

All strings have indexOf(), startsWith(), includes() methods

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

What is a service (from servers)?

A

The sharing of resources of (from) a server

50
Q

What is application protocol?

A

The content and formatting of the data for the requested service

51
Q

An example of inter-process communication

A

The client sends a request and the server returns a response

52
Q

What is communication protocol?

A

A common language and rules of communication so both client and server know what to expect

53
Q

What are HTTP requests?

A

They’re messages sent by the client to initiate an action on the server

54
Q

What three element does an HTTP request’s request-line contain?

A
  1. An HTTP method, verb (GET, PUT, POST, DELETE) or noun (HEAD or OPTIONS)
  2. The request target, usually URL or absolute path of the protocol, port, and domain (look at MDN for more info)
  3. HTTP version
55
Q

Do all requests have a body?

A

No
Requests fetching resources like GET or HEAD dont need a body

56
Q

What type of / when does a request typically require a body?

A

Requests that send data to the server to create a resource, like PUT or POST, require a body with the data used to fulfill the request (for ex: HTML form data)

57
Q

What two categories can bodies be broadly divided into?

A
  1. Single-resource bodies
    • consists of 1 file, defined by two headers: Content-Type and Content-Length
  2. Multiple-resource bodies
    • consists of multipart body, each containing a different bit of info. Typically associated with HTML forms
58
Q

What is the start line of an HTTP response called?

A

Status line

59
Q

What info does the status line contain?

A
  1. Protocol version (usually HTTP/1.1, but can also be HTTP/1.0)
  2. A status code (indicating success or failure of the request)
  3. A status text (a brief, purely informational, textual description of the status code to help a human understand HTTP message)

Ex: HTTP/1.1 404 Not Found

60
Q

Do all responses have a body?

A

No
Responses with a status code that sufficiently answers the request without the corresponding payload (like 201 Created or 204 No Context) usually don’t

61
Q

What three categories can bodies be divided into?

A
  1. Single-resource bodies (consisting of a single file of KNOWN length, defined by two headers: Content-Type and Content-Length)
  2. Single-resource bodies (consisting of a single file of UNKNOWN length, encoded by chunks with Transfer-Encoding set to chunked)
  3. Multiple-resource bodies (consisting of multipart body, each containing a different section of info [relatively rare])
62
Q

What is npm?

A

It is a software registry
- It allows developers to share and borrow packages (also called modules, which is a directory with one or more files including package.json which includes meta data about the package)
- makes it easy to check for and download updates on borrowed packages

63
Q

What are npm packages like?

A

Typically small and solves one problem well
Allows you to compose larger custom solutions out of smaller/shared building blocks

64
Q

Benefits of npm

A
  • allows you to draw expertise outside of yourself from people who could be more experienced than you
  • can allow you to finish projects faster and reuse code across projects
65
Q

What are the distinct components of npm?

A
  1. Website
    - discover packages, set up profiles, and manage other aspects of npm experience
  2. The registry
    - large public database of JavaScript software and meta info surrounding it
  3. CLI (command line interface)
    - runs from terminal and how most developers interact with npm
66
Q

What is nodemon and what does it do?

A

Nodemon is a tool that helps develop Node.js apps by restarting the node app when file changes are detected

67
Q

What does the spread operator do?

A

It pulls out the values from an array and adds them as comma separated values to a new array (it can also be used on objects)

Ex. const hobbies = [“sports”, “cooking”];
const newHobbies = [“reading”];
const mergedHobbies = […hobbies, …newHobbies];
You get [“sports”, “cooking”, “reading”]

68
Q

What are primitive variables? Are they immutable or mutable? Can you change const value?

A
69
Q

What are reference variables? Are they immutable or mutable? Can you change const value?

A

Functions, objects, arrays
Mutable
Yes in the sense that you can add to the (ex) array

70
Q

What are the 2 rules a component function must follow?

A

Name must start with an Uppercase character
Returns “renderable” content

71
Q

Does the browser support jsx files?

A

No, so sometimes we’ll see js files with react components in it

72
Q

What is Static Content?

A
  • content that is hardcoded into the JSX code
  • can’t change at runtime
    Ex: <h1>Hello World</h1>
73
Q

What is dynamic content?

A
  • Logic that produces the actual value is added to JSX
  • content/value is derived at runtime
    Ex: <h1>{userName}</h1>
74
Q

What do curly braces in JSX/React say?

A

That you want to output a dynamic value
You can add any JS expression (that directly produce a value) between the curly braces

75
Q

What can React do with props?

A

Pass data to components (from parent to children)

76
Q

When does handleClick() (or any other function with parens) execute compared to handleClick

A

handleClick() executes when the line it’s called in executes
handleClick (is passed as a value) will execute when the (for example) button is clicked by React

77
Q

How many times does a React component execute?

A

By default, only once
You have to “tell” React if a component should be executed again
(Through state)

78
Q

What is the 1st rule of React hooks?
(Where can React hooks be called?)

A

React hooks are, technically, regular functions but must only be called in React component functions or other react hooks

79
Q

What is the 2nd rule of React hooks?

A

You can only call React hooks on the top level
They must not be called in nested code statements (for example if-statements)

80
Q

What does useState() yield?

A

An array with 2 elements

81
Q

What are the 2 elements in the useState array?

A

First is the current state value, it is provided by React and may change if the component func is executed again
Second is the state updating FUNCTION, it updates the stored value and “tells” React to re-execute the component function in which useState() was called

82
Q

What is in the parenthesis of the useState()?

A

The initial value (stored by react)

83
Q

Why can you use const for useState()?

A

Because the current state value (first in the array) will be recreated every time the component function executes

84
Q

What’s the idea behind “derived state” / “computed values”?

A

Computed values are values that shouldn’t be managed as separate state since they can be derived from other state

85
Q

Derived state / computed values

A

(Not exactly the same, but similar in..)
Calculation based on other values: both involve calculating values based on existing data, state, or variables
Dynamic nature: Both can change dynamically based on updates to the data or variables they depends on
Avoidance of redundancy: both help avoid redundancy by calculating values on-the-fly rather than storing them separately

86
Q

3 ways to use conditionals in jsx

A
  1. Ternary operator (? : )
  2. Logical AND operator (&&)
  3. Create a variable, then conditional and place variable in return in {}
87
Q

What are props?

A

Props are “custom HTML attributes” set on components

88
Q

What does React do with props?

A

React merges all props into a single object

89
Q

How are props passed/received?

A

Props are passed to the component function as the first argument by React

90
Q

The reason why there needs to be 1 parent element in component return

A

Even in normal JavaScript you can only return one thing/value

91
Q

How do you forward(proxy) props?

A

Use { ex, ex2, …props }
(doesn’t have to be named props, it can be anything)
And then spread operator {…props}

Ensures all extra props will be forwarded from parent to child
Allows us to avoid a long list of props

92
Q

Difference between images stored in the public and src file.
Which folder should you use?

A

Images stored in the public file are made publicly available
- use public for images that should not be handled by the build process and should be generally available (images used directly in the index.html file or favicons
Whereas, images stored in the src files aren’t accessible by website visitors
- they can be used in code files
-images used inside components should be stored in src folder

93
Q

Vanilla CSS Pros

A

CSS code is decoupled from JSX code
CSS code can be written by another developer who needs only a minimal amount of access to your JSX code

94
Q

Vanilla CSS Cons

A

You need to know CSS
CSS code is not scoped to components, rules may clash across components

95
Q

Inline Styles Pros

A

Quick and easy to add to JSX
Styles only affect the element to which you add them

96
Q

Inline Styles Cons

A

You need to style every element individually
No separation between CSS and JSX code (CSS code lives in JSX code)

97
Q

State vs Refs

A

State
- causes components to re-execute when changed
- should be used with components where the UI will change/be updated
- should not be used for “behind the scenes” values that have no direct UI impact
Refs
- does not cause components to re-execute
- can be used to gain direct DOM element access (good for reading values or accessing certain browser APIs)

98
Q

File name.csv, what does csv stand for?

A

Comma separated values

99
Q

What is middleware?

A

Something that sits in between the server and raw requests

100
Q

What 4 things can middleware do?

A
  • preprocess the requests
  • logging requests (how long does it take for the request to come through, what type of request gets post/put, what is the status of the request being handled, etc)
  • authentication (before we let the request through to the backend, check and see if it’s from a client that is authorized)
  • process errors in requests and handle them before they go through
101
Q

What makes an api restful?

A
  1. It uses HTTP methods (Get, Post, Put, Patch, Delete)
  2. Should have a standard data format that it responds with (Like JSON format or XML)
  3. Clients and servers are separate, not in the same system or file. Able to msg each other over a network to make requests and get responses
  4. Stateless, server shouldn’t be storing any client side state or data between requests (every time client makes a request to server, it contains all the info that the server needs in order to know how to respond back.
  5. Resource based, it is an api centered around resources and uses a unique universal resource identifier/locator (uri/url)
102
Q

URL what does it stand for and what is it?

A

Universal resource locator
An address for a particular resource

103
Q

What does SQL stand for?

A

Structured Query Language

104
Q

What advantage do NoSQL databases have over SQL?

A

They are flexible. You can change the structure of your data without changing the entire database.
Scale horizontally and vertically

105
Q

What are the advantages to SQL databases?

A

Good at relationships (relational)
Able to join tables, query efficiently which vastly increases the speed of database access
Additionally, having structure/being able to plan databases/relationships ahead of time, having consistency that you can rely on is good for maintaining good code quality

106
Q

What is a container?

A

Loosely isolated environment where you can package and run an application

107
Q

Benefits of containers

A

Lightweight and contains everything needed to run the application, so you don’t need to rely on what’s installed on the host

108
Q

What happens when you use fetch() and the server returns a 404 or 500?

A

IT WILL NOT REJECT
it will resolve and set the ok property to false
So you need to check res.ok before extracting the JSON and throw a new Error it it’s not ok

109
Q

React Link component vs anchor tag w/href

A
110
Q

Axios vs fetch:
Axios pros / cons

A

Axios is a popular third-party library for making http requests
Pros:
- automatic JSON transformation, makes it easier to work with JSON responses
- better error handling, automatically throws error for http responses with status codes outside the range of 200, making it easier to handle errors
- request cancellation, builtin support for cancelling requests using cancel tokens
- browser compatibility, works in all modern browsers and Node.js
- Interceptors, allows you to define middleware for requests and responses, useful for authentication, logging, etc

Cons:
- external dependency, requires installing a separate package/adds to bundle size
- less flexible than fetch,

111
Q

Axios vs fetch:
Fetch pros / cons

A

Fetch is a modern, built-in JavaScript API for making http requests
Pros:
- built in, no need to install so it’s lightweight and always available
- promise based, makes it easier to work with asynchronous code and integrate async/await
- supports streaming responses
- provides a flexible way to configure requests (including custom headers, body types, etc)

Cons:
- no automatic JSON transformation, manually transform the response to json using .json()
- error handling, only rejects a promise if there is a network error, need to manually check the response status to handle HTTP errors
- no request cancellation
- older browser support, may require polyfills for older browsers

112
Q

Difference between the commands “nodemon fileName” vs “npx nodemon fileName”

A

Nodemon fileName is when nodemon is installed globally
Npx nodemon fileName is when nodemon is locally installed or not installed

113
Q

Export function vs export default function

A

You use export function when your module needs to export multiple functions / variables / objects
- you also have to use exact name of the exported item when importing
Whereas export default function only exports one function, variable or object
- you can use any name for import (useful when the module is used indifferent contexts with different naming convention)

114
Q

Amazon EC2

A

Amazon Elastic Compute Cloud

115
Q

AWS lambda

A

Serverless computing service by AWS. Allows users to run code without provisioning or managing servers

Good for:
- event-driven, short lived functions: small, stateless functions that are triggered by events such as http requests, s3 uploads, or dynamoDB changes
- automatic scaling: scales up or down based on the number of incoming requests, ideal for apps with unpredictable or spiky traffic
- cost effective: workloads that don’t run continuously or have low to moderate usage (cost effective because you only pay for compute time used)
- simplified operations: you don’t need to worry about provisioning, patching, or maintaining servers

116
Q

AWS

A

Amazon Web Services,
cloud computing platform. Has cloud based products and services that helps businesses and developers build/scale apps, store data, and manage infrastructure.

117
Q

Amazon EC2

A

Amazon Elastic Compute Cloud,
allows you to run virtual servers in the cloud. Provides flexibility to scale up or down
Good for:
- long-running or stateful application: apps that run continuously, maintain state, or manage long-running processes
- large, complex applications: app is large, complex, or requires specific hardware configurations (e.g GPUs, large amounts of memory)
- high and predictable traffic: apps with steady traffic
(For apps like social media platforms)

118
Q

IAM

A

Identity and Access Management, framework of policies and technologies that ensures the right individuals have access to resources in an organization

119
Q

Identity Management

A

identify individuals in a system (employees, customers, devices)
control their access to resources by associating user rights and restrictions with established identity
- User identification authentication: verify who the user is
- user account creation and management: creating, updating, and managing user profiles

120
Q

Acess management

A

controlling and managing authenticated users’ access to specific resources and systems within an organization
- authorization: granting or denying access to resources based on user roles and permissions
- access control policies: defining and enforcing what resources a user can access and what actions they can perform

121
Q
A