Senior Side Week 2 & 3 Flashcards

1
Q

What is a client?

A

A client is a computer program or device that requests services or resources from a server.
The client sends a request to the server, which processes the request and sends a response back to the client.

Example: A broswer

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

What is a server?

A

A server is a computer program or device that provides services or resources to clients.
The server is responsible for processing requests from clients and returning the requested information or service.

Examples: web servers, mail servers, file servers, database servers, and game servers.

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

Which HTTP method does a browser issue to a web server when you visit a URL?

A

GET

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

What is on the first line of an HTTP request message?

A

HTTP Method, Request Target, HTTP Version

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

What is on the first line of an HTTP response message?

A

Protocol Version, Status Code, Status Text

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

What are HTTP headers?

A

HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value

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

Is a body required for a valid HTTP message?

A

Depends on the specific requirements of the HTTP method being used and the specific circumstances of the request or response.

For some HTTP methods, such as GET and HEAD, a message body is not required, and any included message body would be ignored by the server. For other methods such as POST, PUT, and DELETE, a message body may be required to send or modify data associated with the request.

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

What is NPM?

A

NPM is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages.
The 3 components in the npm is:
the website
the command line interface (CLI)
the registry

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

What is a package?

A

A package is a file or directory that is described by a ‘package.json’. A package must contain a ‘package.json’ file in order to be published to the npm registry.

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

How can you create a package.json with npm?

A

npm init –yes

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

What is a dependency and how do you add one to a package?

A

In package.json file, there is an object called dependencies and it consists of all the packages that are used in the project with its version number. So, whenever you install any library that is required in your project that library you can find it in the dependencies object.

Basically means that the package depends on this.

Version:
The first number is the major version.
The second number is the minor version.
The third number is the bug fix version.

You can add on either through the command line or manually editing the ‘package.json’ file.

Command line: npm install <package-name></package-name>

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

What happens when you add a dependency to a package with npm?

A

It gets stored in the ‘package.json’ file. It creates a node.modules directory and adds a line in your package.json. It goes to the npm registry and adds it to the node.modules file.

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

What are some other popular package managers?

A

Yarn and PNPM

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

What is Express useful for?

A

Implementing the HTTP endpoints for web applications. Help manage routes.

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

How does Express fit into a full-stack web application?

A

It is on the server side and it does the communication for the backend and the frontend.
It manages the HTTP messages.

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

How do you add ‘express’ to your package dependencies?

A

Writing ‘npm install express’ in your command line

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

What Express application method starts the server and binds it to a network ‘port’?

A

The listen method(). A port is endpoint of communication in an operating system.

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

What is Express middleware?

A

It is a set of functions in the Express.js web application framework that are executed in between the processing of an incoming HTTP request and the generation of an HTTP response

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

What is Express middleware useful for?

A

It can be used to perform various tasks such as logging, authentication, parsing incoming data, and serving static files, among others.

It is in between with request coming in and response coming out.

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

How do you mount a middleware with an Express application?

A

app.use and pass in a function

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

Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?

A

request, response, next

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

What is an API endpoint?

A

An API endpoint is a specific location or URL within an API (Application Programming Interface) that is used to access and interact with its functionality.

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

What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?

A

application/json

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

What is the significance of an HTTP request’s method?

A

It let’s the server know what the client wants

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

What does the express.json() middleware do and when would you need it?

A

It parses incoming requests with JSON. It is needed when we need to parse JSON data.

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

Why do we use databases in Web development?

A

Databases are used to store data. It is accessible by many users thus providing a centralized location for application data.

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

What is PostgreSQL and what are some alternative relational databases?

A

PostgreSQl is an open-source relational database management system that is known for its reliability, scalability, and advanced features.

Alternatives:
MySQL
Oracle database
Microsoft SQL
SQLite

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

What are some advantages of learning a relational database?

A

1) Efficient Data Management
2) Data Integrity
3) We learn it so store data

Relational database is a database structure that recognize relations among stored items of information.

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

What is one way to see if PostgreSQL is running?

A

Write in the command line:
sudo service postgresql status

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

What is a database schema?

A

A schema is a collection of tables. A schema defines how the data in a relational database should be organized and structured.

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

What is a table?

A

A table is a list of rows each having the same set of attributes.

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

What is a row?

A

A row is a single record or a set of related data in a table.

It’s a single set of data or object or item that has similar columns.

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

What is an attribute and what other names are used to describe them?

A

Attributes are commonly known as columns.

Attributes are the individual data elements or properties of an entity that are stored in a database table. They describe the characteristics of the entity, and they are organized in columns in the table.

Attributes have defined data types.

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

What is SQL and how is it different from languages like JavaScript?

A

SQL is the primary way of interacting with relational databases. It is a powerful way of retrieving, creating, and manipulating dat in a relational database.

It is different from Javascript because JavaScript is an imperative programming languages. SQL is a declarative programming language. In declarative languages, the programmers describe the results they want and the programming environment comes up with its own plan for getting those results.

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

How do you retrieve specific columns from a database table?

A

By using the select statement.

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

How do you filter rows based on some specific criteria?

A

By using the syntax ‘order by’ followed by a column name. It comes after the from clause. Default setting is ascending order.

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

What are the benefits of formatting your SQL?

A

Readability

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

What are four comparison operators that can be used in a ‘where’ clause?

A

= equal
!= not equal
< less than
> greater than

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

How do you limit the number of rows returned in a result set?

A

By using the ‘limit’ clause. It always comes last. It is a literal integer number.

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

How do you retrieve all columns from a database table?

A

Using the * sign

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

How do you control the sort order of a result set?

A

You can’t control the set order of the list unless you

42
Q

How do you add a row to a SQL table?

A

Use ‘insert into’ following the table name.

43
Q

What is a tuple?

A

A list of values

44
Q

How do you add multiple rows to a SQL table at once?

A

Add another line of values in parenthesis

45
Q

How do you get back the row being inserted into a table without a separate ‘select’ statement?

A

Add the syntax ‘returning *’

46
Q

How do you update rows in a database table?

A

Using the ‘update’ followed by the table followed by the ‘set’ syntax followed by the column that you want to update.

47
Q

Why is important to include a ‘where’ clause in your ‘update’ statements?

A

Using ‘where’ is important because we need to specify which row we are going to update. If we don’t use it then everything in the table will update.

48
Q

How do you delete rows from a database table?

A

Using the ‘delete’ syntax.

49
Q

How do you accidentally delete all rows form a table?

A

If you don’t add a where statement.

50
Q

What is a foreign key?

A

Foreign keys put the “relational” in “relational database” they help define the relationships between tables.

Foreign key is the reference of other data from different tables.

51
Q

How do you join two SQL tables?

A

Using the ‘join’ syntax.

52
Q

How do you temporarily rename columns or tables in a SQL statement?

A

After writing “as”, you can write a name for the column in double quotes.

53
Q

What are some examples of aggregate functions?

A

sum(), count(), max(), min(), avg(), every()

54
Q

What is the purpose of a “group by” clause?

A

The purpose of the “group by” clause is to allow the aggregation of data and to perform calculations on the groups of data.

It is to get data on certain rows and not the entire table

55
Q

What are JavaScript classes?

A

A class describes the behavior of a collection of similar objects. That is, a class describes the methods and properties that these objects all share.

A class is not an object, but a template for creating an object.

56
Q

When would you want to use a class?

A

It’s a way to organize code. Use classes when you want to create objects that store their own internal data and expose a lot of behavior.

57
Q

How do you declare a class?

A

For example:

class MyClass {
// class body..
}

58
Q

How do you inherit from another class?

A

Using the ‘extend’ clause, which indicates the class it extends from.

59
Q

Why would you want to inherit from another class?

A

Then the class will become very hard to maintain because it keeps growing with new values. It becomes messy.

60
Q

How do you add methods and properties to a class?

A

You can add properties in the constructor.
‘this’ (JavaScript) keyword is used to refer to the object instance being created.

You can define the method below the constructor.

61
Q

What is Webpack?

A

Webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are are static assets to serve your content from.

“Bundlers” have been developed that bundle all the code from JavaScript files and ‘npm’ packages into a single (or a few) files that can be easily downloaded. Many bundlers will removed unused code.

It examines your code, starting at its entry point, and recursively scanning the ‘import’ statements to find all the modules your code uses.

62
Q

What is the advantage of using Webpack (or a similar bundler)?

A

It examines your code, starting at its entry point, and recursively scanning the ‘import’ statements to find all the modules your code uses.
It builds a dependency graph and analyzes it to find and remove code that is not in use.
It renames functions, variables, classes, etc., to ensure there are no name conflicts and to minimize and obfuscate the resulting JavaScript code.
It performs similar optimizations on HTML, CSS, and image files.

Bundlers will remove unused code and may also “minify” the code by renaming variables and functions to just a few letters. This makes the bundled code even smaller and easier to read.

63
Q

What is Babel?

A

Most widely-used JavaScript transpiler. It is designed to transpile newer versions of JavaScript into older versions. This allows developers to write code using modern productivity enhancements and still run their code on older devices or systems.

64
Q

What is the advantage of using Babel (or a similar transpiler)?

A

It can transform syntax.
Polyfill features that are missing in your target environment.
Source code transformations.

65
Q

What is React?

A

A frontend framework.

React is an open-source JavaScript library used for building user interfaces (UIs) or front-end applications.

React allows developers to create reusable UI components that can be composed together to build complex applications.

66
Q

What is a React element?

A

React element is a plain JavaScript object that represents a component instance or a DOM element in the application’s UI.
A custom written DOM element.

67
Q

How do you mount a React element to the DOM?

A

Use the ‘ReactDOM.render() method.
This method takes two arguments:

1) The first argument is the React element that you want to render.

2) The second argument is the DOM node where you want to mount the element.

68
Q

What is JSX?

A

JSX is a syntax extension for JavaScript that lets you write HTML -like markup inside a JavaScript file.

69
Q

How does React use JSX to render components?

A
70
Q

What is a React component?

A

Reusable UI elements for your app. React app is made of components.

71
Q

How do you define a component in React?

A

Regular JavaScript functions. Their names always begin with a capital letter. They return JSX markup.

72
Q

How do you mount a component to the DOM (or “render” a component)?

A

Render it to the root.

73
Q

What are props in React?

A

Props are a type of object where the value of attributes of a tag is stored. The word “props” implies “properties”, and its working functionality is quite similar to HTML attributes. But you can also pass any JavaScript value through them. Basically, these props components are read-only components.
In React, props (short for “properties”) are used to pass data from a parent component to a child component.

74
Q

How do you use props in a component?

A

Pass in props as an argument in your function. You can declare prop’s variables or de-structure it.

75
Q

How do you pass props to a component?

A

In React, you can pass props (short for “properties”) to a component by setting them as attributes in the JSX element when you’re rendering the component.

76
Q

How do you write JavaScript expressions in JSX?

A

We need to write them in curly braces. { JavaScript Expression }

77
Q

How do you pass an event handler to a React component?

A

Define a function that handles the event and then pass it as a prop to the component.

78
Q

What is the naming convention for event handlers?

A

Have names that start with ‘handle’, followed by the name of the event.

79
Q

What are some custom event handler props a component may wish to define?

A

When creating custom React components, you may want to define event handler props to allow users of the component to customize its behavior.

Ex:
onClick, onChange, onSubmit, onKeyPress

80
Q

What is the naming convention for custom event handler props?

A

You can name it whatever you want, but by convention, event handler props should start with ‘on’, followed by a capital letter.

81
Q

What are hooks in React?

A

Hooks are special functions that are only available while React is rendering. They let you “hook into” different React features.

82
Q

What are the “Rules of Hooks”? (if necessary, re-read the “Pitfall” box in State)

A
83
Q

What is the purpose of state in React?

A

To contain data or information about the component.

84
Q

Why can’t we just maintain a state in a local variable?

A

Local variables don’t persist between renders. When React renders this component a second time, it renders it from scratch – it doesn’t consider any change to the local variables.

85
Q

What two actions happen when you call a “state setter” function?

A

1) Update the variable
2) Trigger React to render the component again

86
Q

When does the local “state variable” get updated with the new value?

A

The state variable is updated with the new value after setIndex is called and this tells React to remember the index is now the new value and triggers another render.

87
Q

How do controlled components differ from uncontrolled components?

A

A controlled component is a component whose value is controlled by React, while an uncontrolled component is a component whose value is controlled by the DOM.

A controlled component, React manages the state of the component, meaning that its value is kept in the React component’s state and is update using the set function.

88
Q

What are some advantages of using uncontrolled components?

A

Better performance when dealing with large or complex forms. You don’t have to maintain state variables.

89
Q

What are some advantages of using controlled components?

A

More predictable behavior.

Manage the input’s behavior more precisely and provides more control over the form’s state.

Give’s live update of the form.

90
Q

Which style do you prefer?

A

Controlled.

91
Q

What two props must you pass to an input for it to be “controlled”?

A

“value” prop : current value of the input

“onChange” prop : specifies a function that will be called whenever the user types something in the input or the value changes for any other reason. Inside this function, you update the value in the component’s state to reflect the current value of the input.

92
Q

What are some popular npm packages for creating forms in React?

A

React Hook Form,
React Final Form,
Formik

93
Q

When would we want to create a list of React components?

A

When you want o create multiple similar components from a collection of data.

94
Q

Why is it important for React components to be data-driven?

A

React components data-driven is important for creating responsive, real-time applications that can efficiently manage complex UIs while maintaining code maintainability.

95
Q

Where in the component code would a list of React components typically be built?

A

It is inside the function body.

96
Q

What “Array” method is commonly used to create a list of React components?

A

Map and filter

97
Q

Why do components in a list need to have unique keys?

A

React needs to keep track of them if the list changes.

98
Q

What is the best value to use as a “key” prop when rendering lists?

A

id or any unique number that the list will only have

99
Q

What are two ways React components can interact?

A

The two most common are by passing properties from a parent component to children components, and by responding to Events from children components.

100
Q

How can multiple React components share state?

A

By putting the state inside the parent component

101
Q

What are the steps to “lift state up”?

A

1) Remove the state from the child components.
2) Pass hardcoded data from the common parent.
3) Add state to the common parent and pass it down together with the event handlers.

102
Q

When would you want to lift state up?

A