Senior Side Week 2 & 3

Question 1

What is a client?

Answer 1

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

Question 2

What is a server?

Answer 2

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.

Question 3

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

Answer 3

GET

Question 4

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

Answer 4

HTTP Method, Request Target, HTTP Version

Question 5

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

Answer 5

Protocol Version, Status Code, Status Text

Question 6

What are HTTP headers?

Answer 6

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

Question 7

Is a body required for a valid HTTP message?

Answer 7

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.

Question 8

What is NPM?

Answer 8

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

Question 9

What is a package?

Answer 9

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.

Question 10

How can you create a package.json with npm?

Answer 10

npm init –yes

Question 11

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

Answer 11

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>

Question 12

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

Answer 12

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.

Question 13

What are some other popular package managers?

Answer 13

Yarn and PNPM

Question 14

What is Express useful for?

Answer 14

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

Question 15

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

Answer 15

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

Question 16

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

Answer 16

Writing ‘npm install express’ in your command line

Question 17

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

Answer 17

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

Question 18

What is Express middleware?

Answer 18

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

Question 19

What is Express middleware useful for?

Answer 19

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.

Question 20

How do you mount a middleware with an Express application?

Answer 20

app.use and pass in a function

Question 21

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

Answer 21

request, response, next

Question 22

What is an API endpoint?

Answer 22

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.

Question 23

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

Answer 23

application/json

Question 24

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

Answer 24

It let’s the server know what the client wants

Question 25

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

Answer 25

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

Question 26

Why do we use databases in Web development?

Answer 26

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

Question 27

What is PostgreSQL and what are some alternative relational databases?

Answer 27

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

Question 28

What are some advantages of learning a relational database?

Answer 28

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.

Question 29

What is one way to see if PostgreSQL is running?

Answer 29

Write in the command line: sudo service postgresql status

Question 30

What is a database schema?

Answer 30

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

Question 31

What is a table?

Answer 31

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

Question 32

What is a row?

Answer 32

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.

Question 33

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

Answer 33

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.

Question 34

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

Answer 34

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.

Question 35

How do you retrieve specific columns from a database table?

Answer 35

By using the select statement.

Question 36

How do you filter rows based on some specific criteria?

Answer 36

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

Question 37

What are the benefits of formatting your SQL?

Answer 37

Readability

Question 38

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

Answer 38

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

Question 39

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

Answer 39

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

Question 40

How do you retrieve all columns from a database table?

Answer 40

Using the * sign

Question 41

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

Answer 41

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

Question 42

How do you add a row to a SQL table?

Answer 42

Use 'insert into' following the table name.

Question 43

What is a tuple?

Answer 43

A list of values

Question 44

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

Answer 44

Add another line of values in parenthesis

Question 45

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

Answer 45

Add the syntax 'returning *'

Question 46

How do you update rows in a database table?

Answer 46

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

Question 47

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

Answer 47

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.

Question 48

How do you delete rows from a database table?

Answer 48

Using the 'delete' syntax.

Question 49

How do you accidentally delete all rows form a table?

Answer 49

If you don't add a where statement.

Question 50

What is a foreign key?

Answer 50

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.

Question 51

How do you join two SQL tables?

Answer 51

Using the 'join' syntax.

Question 52

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

Answer 52

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

Question 53

What are some examples of aggregate functions?

Answer 53

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

Question 54

What is the purpose of a "group by" clause?

Answer 54

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

Question 55

What are JavaScript classes?

Answer 55

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.

Question 56

When would you want to use a class?

Answer 56

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.

Question 57

How do you declare a class?

Answer 57

For example: class MyClass { // class body.. }

Question 58

How do you inherit from another class?

Answer 58

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

Question 59

Why would you want to inherit from another class?

Answer 59

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

Question 60

How do you add methods and properties to a class?

Answer 60

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.

Question 61

What is Webpack?

Answer 61

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.

Question 62

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

Answer 62

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.

Question 63

What is Babel?

Answer 63

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.

Question 64

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

Answer 64

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

Question 65

What is React?

Answer 65

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.

Question 66

What is a React element?

Answer 66

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.

Question 67

How do you mount a React element to the DOM?

Answer 67

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.

Question 68

What is JSX?

Answer 68

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

Question 69

How does React use JSX to render components?

Question 70

What is a React component?

Answer 70

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

Question 71

How do you define a component in React?

Answer 71

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

Question 72

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

Answer 72

Render it to the root.

Question 73

What are props in React?

Answer 73

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.

Question 74

How do you use props in a component?

Answer 74

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

Question 75

How do you pass props to a component?

Answer 75

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.

Question 76

How do you write JavaScript expressions in JSX?

Answer 76

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

Question 77

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

Answer 77

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

Question 78

What is the naming convention for event handlers?

Answer 78

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

Question 79

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

Answer 79

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

Question 80

What is the naming convention for custom event handler props?

Answer 80

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

Question 81

What are hooks in React?

Answer 81

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

Question 82

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

Question 83

What is the purpose of state in React?

Answer 83

To contain data or information about the component.

Question 84

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

Answer 84

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.

Question 85

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

Answer 85

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

Question 86

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

Answer 86

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.

Question 87

How do controlled components differ from uncontrolled components?

Answer 87

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.

Question 88

What are some advantages of using uncontrolled components?

Answer 88

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

Question 89

What are some advantages of using controlled components?

Answer 89

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.

Question 90

Which style do you prefer?

Answer 90

Controlled.

Question 91

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

Answer 91

"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.

Question 92

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

Answer 92

React Hook Form, React Final Form, Formik

Question 93

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

Answer 93

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

Question 94

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

Answer 94

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

Question 95

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

Answer 95

It is inside the function body.

Question 96

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

Answer 96

Map and filter

Question 97

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

Answer 97

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

Question 98

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

Answer 98

id or any unique number that the list will only have

Question 99

What are two ways React components can interact?

Answer 99

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

Question 100

How can multiple React components share state?

Answer 100

By putting the state inside the parent component

Question 101

What are the steps to "lift state up"?

Answer 101

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.

Question 102

When would you want to lift state up?