Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Development (#2) > Senior > Flashcards

Senior Flashcards

1
Q

Internet vs World Wide Web

A

internet is the network of connected computers
(servers or wifi)

world wide web are websites or pages
(link between html documents)

get those html documents with http requests
urls and http requests

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

NPM-INTRO
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, and many organizations use npm to manage private development as well.

npm consists of three distinct components:

the website
the Command Line Interface (CLI)
the registry

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

NPM-INTRO
What is a package?

A

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

package is a collection of code that is pre-written
directory with files

package is a directory with one of more files in it, plus a package.json

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

NPM-INTRO
How can you create a package.json with npm?

A

[ npm ] command

To create a default package.json using information extracted from the current directory, use the npm init command with the –yes or -y flag.

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

NPM-INTRO
What is a dependency and how to you add one to a package?

A

Packages required by your application in production

Third party code that application is required to function
npm install

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

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

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

EXPRESS-INTRO
How do you add express to your package dependencies?

A

NPM INSTALL EXPRESS

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

EXPRESS-INTRO
What Express application method starts the server and binds it to a network PORT?

A

The app. listen() function is used to bind and listen the connections on the specified host and port. This method is identical to Node’s http. Server.

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

Network Interface is a piece of hardware on a computer that allows network connectivity (internet)
each network interface is given its own IP address on your network
examples: wifi card / adapter, LAN card or adapter
LAN: Local Area Network (ethernet cable)
your phone and laptop have wifi cards
your laptop may have LAN
your desktop probably has LAN (maybe both)
every network interface provides 2^16 “ports”
the default (aka “well-known”) HTTP port is actually 80
the default (aka “well-known”) HTTPS port is actually 443
any port number below 1024 requires “admin” privileges to use

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

what is the difference between a library and a framework?

a library is code that someone else wrote (or a separate part of your codebase)
a library should be reusable (flexible)

a framework is a specific kind of library
a framework is different from a library when it has “inversion of control”
who calls who? (the hollywood principle) “don’t call us; we’ll call you”
a framework calls YOUR code
a library is called by your code
a framework describes WHEN to call your functions (you don’t call them)
- event system of the DOM is a framework (event listener)
- anything that uses events sis definitely a framework

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

EXPRESS-HELLO-WORLD
How do you mount a middleware with an Express application?

A

use the ‘use’ method on an express object
i.e. app.use( )

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

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

A

request object and response obeject

The req object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, and so on.

Req: a data model of the HTTP request message (from the Client!)
Res: a data model of the HTTP response message (to the Client!)

The res object represents the HTTP response that an Express app sends when it gets an HTTP request.

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

EXPRESS-GET-JSON
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
14
Q

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

A

parses incoming json body and need it when parsing incoming json bodies

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

POSTGRE-DATABASE
What is a database schema?

A

A database schema is considered the “blueprint” of a database which describes how the data may relate to other tables or other data models.

The database schema is the structure of a database described in a formal language supported by the database management system. The term “schema” refers to the organization of data as a blueprint of how the database is constructed.

A database schema defines how data is organized within a relational database; this is inclusive of logical constraints such as, table names, fields, data types, and the relationships between these entities

defines the structure of a database

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

POSTGRE-DATABASE
What is a table?

A

list of rows

attributes
data types

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

POSTGRE-DATABASE
What is a row?

A

each row is a single record of data

each row is an instance for all attributes

the table defines defines what attributes or columns each row should have

but row is a record or once instance of all of that.

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

SQLstands for Structured Query Language and it’s different from JavaScript because it’s a declarative langauge. SQL is like HTML and CSS where you describe the results and the programs renders the results.

imerperative (JavaScript) you tell it steps it needs to take

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

SELECT “thisColumn”, “thatColumn”
FROM thisTable;

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

SELECT “thisColumn”, “thatColumn”
FROM thisTable
WHERE “thisColumn” > 1;

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

looks cleaner and easier to read

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

use the limit clause

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

use * / asterisks

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

SQL-INSERT
How do you add a row to a SQL table?

A

insert into “table” (“col1”, “col2”)
values (‘hello’, ‘world’);

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

SQL-INSERT
What is a tuple?

A

tuple is a data structure like an array

a list of values

two tuples with same structure and each position refers to

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

SQL-JOIN
What is a foreign key?

A

a foreign key is a column used in another table to link them

constraint that one column has to match the other column

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

SQL-JOIN
How do you join two SQL tables?

A

use the join clause

select *
from “thisTable”
join “thisOtherTable” using (“thisColumn”);

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

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

A

use alias, can use them for more than just select statements

select “firstName” as “first”
from “thisTable” as “table”
join “otherTable” as “other”;

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

What do aggregate functions do?

A

Return a single value

Return a bunch of values into a single value

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

groups into single bucket rows based on criteria

groups them into a single row if all the columns match

31
Q

ES6-CLASSES
What is “syntactic sugar”?

A

Syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.
Usually a shorthand for a common operation that could also be expressed in an alternate, more verbose, form.

32
Q

ES6-CLASSES
What is the typeof an ES6 class?

A

functions

33
Q

ES6-CLASSES
Describe ES6 class syntax.

A

class Person {
constructor(name) {
this.name = name;
}
getName( ) {
return this.name;
}
}

class ‘keyword’ Person ‘class’ opening curl brace
constructor method followed by the instantiate an object of the class

class someName {
constructor (param1, param2, param3) {
this.param1 = param1;
this.param2 = param2;
this.param3 = param3;
}

anotherMethod( param1, … ) {
// code in the code block
}

34
Q

ES6-CLASSES
What is “refactoring”?

A

Code refactoring is the process of restructuring existing computer code - changing the factoring - without changing its external behavior.
Intended to improve design, structure, or implementation of the software, while preserving its functionality

35
Q

WEBPACK-INTRO
What is Webpack?

A

it is a module bundler for JS that transforms html, css, and images. Webpack takes modules with dependencies and generates static assets representing those modules.
Module Bundler

36
Q

ES6-MODULES
How are ES Modules different from CommonJS modules?

A

ES Module = standard for JS
ex: import, export
CommonJS = default for Node.js
ex: require, module.export

ES modules are the standard for JavaScript, while CommonJS is the default in Node.js.

37
Q

ES6-MODULES
What kind of modules can Webpack support?

A

ECMAScript, CommonJS, and AMD module

38
Q

REACT-ELEMENTS
What is React?

A

a library for building UIs. React makes it easy to create interactive UIs.

39
Q

REACT-ELEMENTS
What is a React element?

A

a react element is what gets returned from components
a plain js object

40
Q

REACT ELEMENTS
How do you mount a React element to the DOM?

A

const root = ReactDOM.createRoot(container);
root.render(div);

41
Q

BEBEL-INTRO
What is Babel?

A

it is a compiler that transforms es6 JS to es5 JS to make it backwards compatible

42
Q

BEBEL-INTRO
What is a Plug-In?

A

it is a software addon that enhances the program

43
Q

BEBEL-INTRO
What is a Webpack loader?

A

allow you to pre-process files as you import or “load” them

44
Q

BEBEL-INTRO
How can you make Babel and Webpack work together?

A

use npm i –save-dev babel-loader

babel compiles the code and webpack runs the code

babel core installed as dependency
webpack installed as dev dependency
bable pluggins

45
Q

REACT-JSX
What is JSX?

A

A syntax extension to JavaScript
syntax extension to JavaScript that produces react “elements”, structures UI similar to html

Javascript+

46
Q

REACT-JSX
Why must the React object be imported when authoring JSX in a module?

A

because internally every JSX is creating a React Component using JSX transformer

47
Q

REACT-JSX
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

A

npm i –save-dev webpack
npm i –save-dev babel-loader
npm i –save-dev @babel/plugin-transform-react-jsx

webpack is bundler
babel is compiler

bebel-loader
transform

48
Q

REACT-FUNCTION-COMPONENTS
What is a React component?

A

it is a function or a class whose job is to return react elements

49
Q

REACT-FUNCTION-COMPONENTS
How do you define a function component in React?

A

just like any other function but with first letter capital, but return what looks like html

function CustomButton() {
return <.button>Click Me! <./button>; (remove dots. brainscape dont allow)
}

return react element
name of component is capital letter

50
Q

REACT-FUNCTION-COMPONENTS
How do you mount a component to the DOM?

A

const container = document.querySelector(‘#root’);
const root = ReactDOM.createRoot(container);

root.render(<.CustomButton />);

51
Q

All frameworks are libraries

but not all libraries are frameworks

A

REACT IS A FRAMEWORK
NOT JUST A LIBRARY

LIBRARY
define functions

then hand to framework
and framework is in charge/decides to call them

(inversion of something…)

52
Q

REACT-PROPS-AND-EXPRESSIONS
What are props in React?

A

stands for properties
are object argument with data and returns a React element
function components

Props (properties) are arguments passed into React components through HTML attributes

53
Q

REACT-PROPS-AND-EXPRESSIONS
How do you pass props to a component?

A

its like an attribute
html attributes

by typing it with the react component

ex:
function CustomButton(props) {
console.log(props.name)
return {props.text};
}

<.CustomButton text=”something” name=”fred” />

54
Q

REACT-PROPS-AND-EXPRESSIONS
How do you write JavaScript expressions in JSX?

A

within curly braces { }
curly braces are how we escape JSX syntax into JS syntax

55
Q

REACT-CLASS-COMPONENTS
How do you create “class” component in React?

A

class Something extends React.Component {
render(props) {
return <.button> { props.text } <./button>
}
}

56
Q

REACT-CLASS-COMPONENTS
How do you create “class” component in React?

A

class ‘component name’ extends React.Component {
render(props) {
return <.button> { props.text } <./button>
}
}

must return a react element

57
Q

REACT-CLASS-COMPONENTS
How do you access props in a class component?

A

this
props

58
Q
A

state is to keep track of values that change over time

59
Q
A

pass it to the prop

pass as props (camelCase)
pass the function

ex:
<.button onClick={this.function}><./button>

60
Q
A

purpose of bind

guarantee the value of this WHEN the function of method is eventually called

bind returns a copy of a function with a permanent this

61
Q
A

root.render(

  1. react deletes everything from the container DOM element and OWNS it thereafter
  2. react looks at your react element and decides what to do
    - if the react element is an html type (button, div, h1) -> DOM Creation
    - if the react element is a fn component type -> call it (and use the elements)
    - if the react element is a class component type -> NEW (and call render)
    (third option - class)
    react immediately calls the render method of the new object
    ** {
    type: button,
    props: {
    onClick: fn,
    children: “Click Me!”
    }
    }
    react does DOM creation to make the real DOM match the above object
    and also adds the event listener (for “click”)
    when our click listener runs, it calls setState
    this starts a transition from the current state to the next state
    by replacing the old properties in this.state
    a re-render is scheduled (with the new state)
    react receives a NEW react element from the render method

{
type: button
props: {
children: Thanks!
}
}

62
Q

REACT-RENDERING-LISTS
What Array method is commonly used to create a list of React elements?

A

Map method
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Example:
const array1 = [1, 2, 3];
const map1 = array1.map( x => x * 2 );
console.log(map1)
// output: [2, 4, 6]

63
Q

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

A

unique identifier
ID or numbers
A “key” is a special string attribute you need to include when creating lists of elements.
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

64
Q

REACT-FORM-CONTROLS
What are controlled components?

A

kept somewhere in a component state
listen for when that value changes and update the state

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:

65
Q

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

A

prop
value = tell input current value
onChange = update current state

66
Q

EXPRESS-STATIC
What does express.static() return?

A

The express.static() function is a built-in middleware function in Express. It serves static files and is based on serve-static.
Parameters: The root parameter describes the root directory from which to serve static assets. Return Value: It returns an Object.

returns a function!!!!

67
Q

EXPRESS-STATIC
What is the local __dirname variable in a Node.js module?

A

It is a local variable that returns the directory name of the current module. It returns the folder path of the current JavaScript file. It returns the name the of current working directory.

68
Q

EXPRESS-STATIC
What does the join() method of Node’s path module do?

A

join combines directories into an absolute file path

69
Q
A

// figure out what file the client is asking for
// is the thing the client is asking for actually a directory
// if the requested thing is a directory / /images/ /foo/bar/baz/
// does that directory contain an index.html file
// if it does, then send the index.html
// if the requested thing is a file
// do we have that file in one of our folders?
// if so, then send the file back in the response body
// otherwise go to the next( ) middleware, because we dont have it

70
Q

FETCH
What does fetch() return?

A

fetches a resource from the network and returns a promise which is fulfilled once the response is available

returns a promise that can either be resolved or not
The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

71
Q

FETCH
What is the default request method used by fetch()?

A

a get request

72
Q

FETCH
How do you specify the request method (GET, POST, etc.) when calling fetch?

A

as the second optional parameter of fetch
ex: fetch (‘someLink’, {method: post})

73
Q
A

specifically after first successful render / “mount”
first successful render is the end of mounting phase

74
Q
A

componentsDidMount( ),
componentsDidUpdate( ),
componentWillUnmount( )

Web Development (#2) (6 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions