WD Flashcards
(135 cards)
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)
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)
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
4
Q
Hooks
A
- are specific to react
- classes are a part of JavaScript
5
Q
./
Ex: ‘./index.css’
A
Means it’s in the same folder
6
Q
export default
How many things does it export?
A
1
7
Q
State
A
Is a built-in React obj that is used to contain data / information about the component
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
9
Q
JSON.parse()
What does it do?
A
Translates JSON into a JavaScript object
10
Q
JSON.stringify()
What does it do?
A
Translates a JavaScript obj into JSON
11
Q
../
A
Means exit the folder that you’re in
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
13
Q
3 states of a promise
A
- fulfilled
- rejected
- pending
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
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
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
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
18
Q
DNS
What does it stand for?
A
Domain Name System
19
Q
API
What does it stand for?
A
Application Programming Interface
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
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
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
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
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
25
Promise.all() (es6)
A method that lets you iterate through an array of promises and returns an array of fulfilled values
26
What does REST in RESTful API stand for?
Representational State Transfer
27
What are the standard http methods?
GET - getting data
POST - creating data
PUT - updating data
DELETE - deleting data
28
What is REST?
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 )
29
Parts of useState
const [**state variable** (ex. index), **state setter function** (ex. setIndex] = useState(0);
30
Environment variables (.env files) [don’t forget, still not best practice and not secure]
What do you use it for?
You store things like api keys
Then put the .env file into gitignore
31
What is node.js?
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
32
Common js what do you know about it?
Export and import is different
Import you use const __ = require()
Export: module.exports = __
33
Top level await only works where?
Inside modules
Other times you still need async function
34
Difference between require() and import
Require(): part of CommonJS (older) / it is synchronous
Import: es6 and up, asynchronous
35
Req.query, what is it/what do you get?
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
36
Req.body, what is it/what do you get?
It is an obj containing data submitted to the server in the body of POST/PUT/PATCH request
37
Req.headers, what is it/ what do you get?
It is an obj containing the HTTP headers that were sent to the client in the HTTP requests
38
Req.params, what is it/what do you get?
It is an obj that contains route parameters
Placeholders in the route pattern specified when defining a route
Captures values from the actual URL
39
res.send, what is it/what does it do? What can you attach before it?
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”)
40
const fs = required(“fs”);
What is fs?
Fs stands for file system
It allows you to access your file system
41
Res.json, what is it/what do you get?
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
42
DBMS
Database management system
Collection of programs that allow us to access databases and work with data allows control access to database users
43
Schema
Relation between tables and fields
44
What does REPL stand for? what is it?
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
45
what is a computer process?
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 )
46
What is a “module” in JavaScript?
Single js file
47
Array.filter()
48
All strings have indexOf(), startsWith(), includes() methods
49
What is a service (from servers)?
The sharing of resources of (from) a server
50
What is application protocol?
The content and formatting of the data for the requested service
51
An example of inter-process communication
The client sends a request and the server returns a response
52
What is communication protocol?
A common language and rules of communication so both client and server know what to expect
53
What are HTTP requests?
They’re messages sent by the client to initiate an action on the server
54
What three element does an HTTP request’s request-line contain?
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
Do all requests have a body?
No
Requests fetching resources like GET or HEAD dont need a body
56
What type of / when does a request typically require a body?
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
What two categories can bodies be broadly divided into?
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
What is the start line of an HTTP response called?
Status line
59
What info does the status line contain?
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
Do all responses have a body?
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
What three categories can bodies be divided into?
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
What is npm?
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
What are npm packages like?
Typically small and solves one problem well
Allows you to compose larger custom solutions out of smaller/shared building blocks
64
Benefits of npm
- 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
What are the distinct components of npm?
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
What is nodemon and what does it do?
Nodemon is a tool that helps develop Node.js apps by restarting the node app when file changes are detected
67
What does the spread operator do?
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
What are primitive variables? Are they immutable or mutable? Can you change const value?
69
What are reference variables? Are they immutable or mutable? Can you change const value?
Functions, objects, arrays
Mutable
Yes in the sense that you can add to the (ex) array
70
What are the 2 rules a component function must follow?
Name must start with an Uppercase character
Returns “renderable” content
71
Does the browser support jsx files?
No, so sometimes we’ll see js files with react components in it
72
What is Static Content?
- content that is hardcoded into the JSX code
- can’t change at runtime
Ex:
Hello World
73
What is dynamic content?
- Logic that produces the actual value is added to JSX
- content/value is derived at runtime
Ex:
{userName}
74
What do curly braces in JSX/React say?
That you want to output a dynamic value
You can add any JS expression (that directly produce a value) between the curly braces
75
What can React do with props?
Pass data to components (from parent to children)
76
When does handleClick() (or any other function with parens) execute compared to handleClick
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
How many times does a React component execute?
By default, only once
You have to “tell” React if a component should be executed again
(Through state)
78
What is the 1st rule of React hooks?
(Where can React hooks be called?)
React hooks are, technically, regular functions but must only be called in React component functions or other react hooks
79
What is the 2nd rule of React hooks?
You can only call React hooks on the top level
They must not be called in nested code statements (for example if-statements)
80
What does useState() yield?
An array with 2 elements
81
What are the 2 elements in the useState array?
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
What is in the parenthesis of the useState()?
The initial value (stored by react)
83
Why can you use const for useState()?
Because the current state value (first in the array) will be recreated every time the component function executes
84
What’s the idea behind “derived state” / “computed values”?
Computed values are values that shouldn’t be managed as separate state since they can be derived from other state
85
Derived state / computed values
(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
3 ways to use conditionals in jsx
1. Ternary operator (? : )
2. Logical AND operator (&&)
3. Create a variable, then conditional and place variable in return in {}
87
What are props?
Props are “custom HTML attributes” set on components
88
What does React do with props?
React merges all props into a single object
89
How are props passed/received?
Props are passed to the component function as the first argument by React
90
The reason why there needs to be 1 parent element in component return
Even in normal JavaScript you can only return one thing/value
91
How do you forward(proxy) props?
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
Difference between images stored in the public and src file.
Which folder should you use?
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
Vanilla CSS Pros
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
Vanilla CSS Cons
You need to know CSS
CSS code is not scoped to components, rules may clash across components
95
Inline Styles Pros
Quick and easy to add to JSX
Styles only affect the element to which you add them
96
Inline Styles Cons
You need to style every element individually
No separation between CSS and JSX code (CSS code lives in JSX code)
97
State vs Refs
**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
File name.csv, what does csv stand for?
Comma separated values
99
What is middleware?
Something that sits in between the server and raw requests
100
What 4 things can middleware do?
- 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
What makes an api restful?
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
URL what does it stand for and what is it?
Universal resource locator
An address for a particular resource
103
What does SQL stand for?
Structured Query Language
104
What advantage do NoSQL databases have over SQL?
They are flexible. You can change the structure of your data without changing the entire database.
Scale horizontally and vertically
105
What are the advantages to SQL databases?
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
What is a container?
Loosely isolated environment where you can package and run an application
107
Benefits of containers
Lightweight and contains everything needed to run the application, so you don’t need to rely on what’s installed on the host
108
What happens when you use **fetch()** and the server returns a 404 or 500?
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
React Link component vs anchor tag w/href
110
Axios vs fetch:
Axios pros / cons
*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
Axios vs fetch:
Fetch pros / cons
*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
Difference between the commands “nodemon fileName” vs “npx nodemon fileName”
Nodemon fileName is when nodemon is installed globally
Npx nodemon fileName is when nodemon is locally installed or not installed
113
Export function vs export default function
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
Amazon EC2
Amazon Elastic Compute Cloud
115
AWS lambda
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
AWS
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
Amazon EC2
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
IAM
Identity and Access Management, framework of policies and technologies that ensures the right individuals have access to resources in an organization
119
Identity Management
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
Acess management
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
Control Flow
Controlling the flow of the code depending on the current conditions (conditionals)
122
Syntactic Sugar
Certain language features in programming that make code easier to read or write
123
Difference between function and method
Method is something an object can do
124
How to differentiate property and method when both use dot method on object?
The parenthesis that follow
object.firstChild
object.click()
125
Higher Order Functions
Functions that can take other functions as inputs
126
Separation of concerns
Separate html (structure) and css (styling) from JavaScript (functionality), separate frontend from backend
127
What does URL stand for? What is it?
Uniform resource locator
Specific type of URI (uniform resource identifier) that included the location of a resource
(Basically an address)
128
What does a URI stand for? What is it?
Uniform resource identifier
Generic term for a string that identifies a resource, either by location, name or both
129
Data structure
A specific format for storing, accessing, organizing data
130
Async / await
What is it? What does each keyword “do”?
Async await are keywords that simplify working with asynchronous operations
Async - used to define an asynchronous function. ALWAYS returns a promise. Either resolving with the returned value or rejecting with an error thrown. Enables the use of await inside the function body
Await - used (only inside async function) to pause the execution until a Promise is resolved or rejected. It “awaits” the Promise and if the Promise resolves it returns the resolved value. If the Promise rejects, it throws an error which can be caught using a try catch block
131
What is a Promise?
A Promise is an object representing the eventful result of an asynchronous operation.
Acts as a placeholder for a value that might not be available immediately.
Can be in 3 states:
Pending: the initial state, represents that the asynchronous operation is still in progress
Fulfilled: indicates the asynchronous operation completed successfully, and the result value is available
Rejected: indicates that the asynchronous operation failed, and an error or reason for failure is available
132
What is a library?
A library is a collection of pre-written code you can call when you need it. (Like a toolbox, you pick the tool you need and use it in your project) [lodash, Axios, react, but this (react) can be controversial because some people say it’s a framework]
133
What is a framework?
A framework provides a full structure for your app.
Framework is in control, and calls your code when needed.
It enforces rules and patterns to follow
Some refer to it as “inversion of control” — you fill in the blanks but framework runs the show
Ex: angular, next.js, Django, Ruby on Rails
In angular, framework decides:
How routing works
How components are initialized
Where your code goes
So you write code WITHIN its structure
134
What does it mean when a component is unmounted?
It means a component is removed from the DOM (and from react’s virtual dom)
It’s the cleanup phase of a component’s lifecycle
When a component gets unmounted:
Navigating away from the route/page
Toggling a component with state
Conditional rendering changes
Cleanup during full page reload or tab close
135
Why does unmounting matter?
You can risk:
Memory leaks
“Can’t update state on an unmounted component” errors
Performance issues
