Senior Side Flashcards

Question

node-process What is a computer process?

Answer 1

The instance of a computer program that is being executed by one or many threads. It contains the program code and its activity. short version: instance of running program

Answer 2

500+ processes, but only 3 were listed as running

Answer 3

Full stack web development is based on making multiple processes work together to form one application, so knowing about computer processes will help with making applications with clients, servers, and databases

Answer 4

It's a global object that provides information about, and control over, the current Node.js process. Another way: a model of the current instance of Node.js process

Answer 5

``` The 'process' object is always available (global) to Node.js applications, so you can just type 'process.' To explicitly access it then you use: const process = require('process'); ```

Answer 6

An array of strings which contains the command line arguments passed when the Node.js process was launched. Note: means array of strings. Note: the first element will be 'process.execPath' (the absolute path to where the Node.js process launched), the second element will be the name of the JavaScript file being executed, the remaining elements are any additional command line arguments.

Answer 7

A JavaScript file.... which uses code from a separate file to execute its code

Answer 8

'export' = a reference to module.exports (you can add a single thing by making it exports = 'some string', but its default value is an object, so an example is exports.foo = 'bar', which will add them as a property of the exports object) 'require' = used to import modules, JSON, and local files. 'module' = a reference to the current module '__filename' = file name of the current module '__dirname' = directory name of the current module These 5 values (all local variables or parameters which are passed into a module wrapper function to know where your code is from) are passed into your module, which can then be accessed by your code

Answer 9

The 'process' object and the 'global' namespace object. 'console' is also another one. In JavaScript the window object controls both variables and their process In Node.js, the 'process' object controls processes and the 'global' object controls variables

Answer 10

To export the code in one JavasScript file and give access to that code to other JavaScript files

Answer 11

const `variableName` = require FUNCTION followed by parenthesis, which contains a string to the relative path of the file you want to import

Answer 12

It's responsible for handling callbacks. Looks at the stack, if it's clear, then look at the task/callback queue, and then push the callback onto the stack

Answer 13

blocking = operations that run synchronously (and are slow, which block further execution of JavaScript code (ex; AJAX requests) *blocking operations are happening on the stack and nothing can be executed until it is off the stack* - JavaScript causes non-blocking = operations that run asynchronously and therefore don't block execution of JavaScript code (gets put into the callback queue) *non-blocking operations happen anywhere that's not on stack* Note: a callback queue exists which means callbacks will not execute all at once

Answer 14

a file folder

Answer 15

The file path relative from the current/or some location

Answer 16

The full path, starting from the root (in mac OS it is a slash), of a file

Answer 17

the 'fs' module *stands for file system*

Answer 18

fs.writeFile() method

Answer 19

The ones we used are asynchronous, but there are synchronous versions

Answer 20

Service requesters - software/hardware that request info from servers

Answer 21

service providers: software/hardware that provides resource or service note: nowadays it's software talking to each other isntead of hardware/computer devices

Answer 22

GET method - which requests representation of data

Answer 23

The request header, HTTP method which describes action to be performed (GET) and then the request target (URL), protocol version

Answer 24

status line, with the protocol/http version and then the status code, then status text

Answer 25

Information relating to the HTTP request/response which can be modified by the client or server short version: meta data about response/request

Answer 26

No, usually the status code is enough

Answer 27

A package manager for the Node JavaScript platform. Puts modules so that node can find them and manage dependency conflicts It's actually 3 things: - website - cli - registry

Answer 28

A package is a file or directory with package.json file in it

Answer 29

npm init for options or npm init --yes for default package

Answer 30

files necessary to run our code npm install `packageName`

Answer 31

It's added to the node_modules directory (makes one if none are found) and adds/updates dependencies property on the package.json file to have that dependency

Answer 32

npm install express,

Answer 33

the listen() method. first you require('express') then do app = express() 'function', then app.listen('portName') Note: require('express') returns a function unlike require('fs') which returns an object

Answer 34

the use method of app object

Answer 35

req (stands for 'request') and res (stands for 'response') object

Answer 36

Content-Type: application/json; charset=utf-8 Note: worth noting that the headers to be arbitrary, for example it is possible for it to say application/json, but actually be an html file. So headers are just a HINT of what is in the body

Answer 37

It parses incoming JSON requests and places the data in the req.body (request body). You'd need it when you're posting an object ex: app.use(express.json()); Note: by default node and express don't show you/take in the body Notes: command line args are always a string, unless there is a space

Answer 38

It tells the server what the client is trying to do, but it is up to the programmer to actually decide. Significance is a communication tool to tell what the client wants to do, but is actually arbitrary methods are: GET, POST, PUT, DELETE

Answer 39

Free, open source Relational Database Management System (RDBMS). Often cited as most advanced open source database of its kind because of its robust feature set, standards compliance, and reliability. Alternatives: MySQL (also free), SQL Server by Microsoft, and Oracle by Oracle Corporation Usually toss up between PostgreSQL or MySQL when first learning 'full stack'

Answer 40

Once you learn one relational database, then you can learn other relational databases easily because they all use SQL language. Good guarantees about data integrity. They can store and modify data in a way that makes data corruption as unlikely as possible. (devs can make database to reject 'bad' data and not worry about 'half-written' data- ACID- computer science). Multiple users can access the data and most apps use a database. Note: relational databases are commonly called 'SQL databases' because you usually use SQL language to some degree despite not being PostgreSQL.

Answer 41

'sudo service postgresql status' command in terminal, using 'top' command in second terminal, or doing something with it like this command: " psql -c '\l' " and if it errors then you know it's not on 'pgweb' is an admin tool/GUI which lets you look at and/or manipulate your database

Answer 42

A collection of tables. It defines how the data in a relational database should be organized. Note: in relational databases, you typically define your schema up front and the database server will make sure that any data being written to the database conforms to that schema

Answer 43

A table (called relations) is a list of rows which have the same set of attributes. Ex: table could be called 'students' which have 'firstName', 'lastName', and 'class' attributes (attributes are referred to as columns). My interpretation: the table holds the TYPE of data.

Answer 44

A row is a record of something in a table, which has all the same attributes as outlined by the table. EX: 'students' table has 'name', 'class', 'dob' attributes (or columns). This means that each row identifies a specific student.

Answer 45

SQL is our primary way for communicating with the database. SQL is a declarative programming language (like HTML or CSS), meaning you describe the results you want and the programming environment comes up with its own plan for getting those results. JavaScript is an imperative programming language, meaning you tell JS runtime what to do and how to do it.

Answer 46

By using the 'select' statement followed by the column name in double quotes, followed by a comma if adding more than one, then put 'from' statement followed by table name. Ex: select "firstName", "gradeLevel" from "students"; Note: the last clause in an SQL statement has a semicolon at the end

Answer 47

By using the 'where' clause, followed by column name, followed by comparison operators, then if it's a number just type number or if it's a string then use single quotes. Note: it comes after the 'from' clause

Answer 48

You should indent SQL code to have a consistent style and therefore better readability. Note: Reasoning is that it is much easier to read text that is narrower. For example MDN becomes a three column layout when the browser gets big enough and it keeps the text smaller width. (It doesn't span the whole width of the page). the select statement and all the clauses like 'where' should align to each other, where the 'e' in 'where' is right below the 't' in 'select'. Exception is order by where by is lined up with the first quote of column names.

Answer 49

Greater than (>), less than (>), equal (=), and not equal (!=). Note: you can also use <=, >=, and <>

Answer 50

Using the 'limit' clause, followed by a number of the max rows you want. Note: it is the last thing in the code if it is included, unless there is an offset, fetch, or for.

Answer 51

Using an asterisk (*), usually called 'star' by devs

Answer 52

Using the 'order by' clause, followed by a column name in double quotes. BUT it doesn't actually have to be a column name, it could be order by a value of 'replacementCost' for example Note: default sort order is ascending, but if you put 'desc' keyword after the column name then it changes it to descending order. Note: orders are not predictable, unless 'order by' clause is used

Answer 53

Using the 'insert into' statement, followed by the table name in double quotes, followed by the columns you want to insert in parentheses, followed by the values clause with corresponding to the column names in parenthesis, then lastly an optional returning clause to see what you added. ``` Ex: insert into "languages" ("name") values ('HTML'), ('CSS'), ('JavaScript') returning *; ```

Answer 54

A list of values

Answer 55

values clause, then the column attributes in parentheses, then just add a comma at the end.

Answer 56

using the 'returning' clause followed by the column names you want or just the asterisk returning * or returning 'columnName', 'columnName'

Answer 57

Using the 'update' statement followed by the table name in double quotes, Then in the next line use the 'set' clause followed by column names in double quotes then an equal sign to what value you want to change it to (commas to separate multiple changes). Lastly include a 'where' clause to specify a column name of what you are updating. Note: can include 'returning' clause too ``` Ex: update "films" set "rating" = 'R', "name" = 'SCARY' where "rating" = 'T' returning *; ```

Answer 58

If you don't include 'where' clause then it'll update EVERY row in the table

Answer 59

Using the 'delete' statement followed by 'from' clause with table name, then using 'set' clause followed by assignment operator to value you want, then specifying 'where' clause you want to delete (where you can use 'and' clause for higher specificity, no comma needed). Note: can include 'returning' clause too ``` Ex: delete from "films" where "rating" = 'T' and "name" = 'SCARY' returning *; ```

Answer 60

Not specifying with a 'where' clause

Answer 61

A column that links two tables together based on the column value. Ex: is 'filmId' being in a 'films' table AND in an 'inventory' table

Answer 62

select statement syntax, then using 'from' clause for one table, then using 'join' clause with second table's name ``` Ex: select "firstName", "lastName" from "rentals" join "customers" using ("customerId") join "inventory" using ("inventoryId") join "films" using ("filmId") where "title" = 'Magic Mallrats' ``` Note: rentals needs to have a 'customerId', 'inventoryId' needs to be in either rentals or customers table, etc. Basically the previous tables needs to have what you stated in your 'using' clause (the foreign key). Putting all joins in one line negates this ordering since going forward/backward doesn't matter

Answer 63

By giving them an alias with the 'as' keyword. Note this can be done for table names too and that aliases with 'as' are temporary (only show in result set, but not actually changed in the database). Ex: ``` select "line1", "c"."name" as "cityName", "district", "countries"."name" as "countryName" from "addresses" join "cities" as "c" using ("cityId") join "countries" using ("countryId"); ```

Answer 64

max(""), avg(""), sum(""), count(""), min(""), every(""), and many more. Can store JSON in column value (Ex: json_agg() then join actors and castMember table)

Answer 65

Groups what you're selecting for into their own rows then applying the aggregate to that, so if you group by "genre" then each row is gonna be like 'horror', 'comedy', etc.

Answer 66

pending (initial state...... then transition to a fulfilled (success), OR rejected (fail)

Answer 67

using then() method of the promise object. It takes two arguments: on fulfilled function and onrejected function. Best to use catch() method for failures.

Answer 68

Either with the second argument of the then() method or just the catch method which takes an error function as an argument. Best to use catch()

Answer 69

If you wanted to condense an array to certain values. Very useful to filter an array based on a test outlined by a function. Note: It CREATES a new array of elements that passed the test ``` Ex: const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]; ``` ``` function isPrime(num) { for (let i = 2; num > i; i++) { if (num % i == 0) { return false; } } return num > 1; } ``` console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

Answer 70

If you want to create a new array containing transformed elements of another array difference from filter is that it returns same # from original array since it applies change to every single index for each method is different because it doesn't return an array (it is undefined by default)

Answer 71

Combining the elements of an array into a single value based on the reducer (slash predicate) function

Answer 72

syntax in a programming language that is designed to make things easier to read or to express Ex: constructor functions vs classes (same function for the most part, but classes easier syntax)

Answer 73

A function (constructor function specifically) Note: JavaScript classes aren't real classes (just same as constructor functions for the most part, syntactic sugar)

Answer 74

- class keyword followed by a class name with a capital first letter - opening curly braces - constructor method with some parameters, then assign 'this' object to the parameters - under constructor method make other class methods Note: 'this' will refer to the 'class' variable ``` - To add new object to class then do `let john = new Person("John Doe");` Note: new objects of the class automatically call the constructor() method ``` NOTE: arrow functions behave differently with classes/constructor since 'this' is defined at definition time (double check if it's call time or definition time) Use classes/constructors when you want an obj to have behavior (OOP typically for ppl that make frameworks or libraries, so not typical for apps development)

Answer 75

Restructuring existing code (changing the factoring) without changing it's output/external behavior

Answer 76

A module bundler (a module is just a file) - Webpack bundles JavaScript files into one. (it rewrites the code and makes it smaller for 'production' mode) Note: difference from commonJS (aka exports/import modules) is that WebPack combines all these files into one JavaScript file (main.js by default) to run in a web browser Webpack automatically finds your 'src' folder then your 'index.js' exports then creates a 'dist' (short for distribution or end product) dir if it doesn't exist to make a main.js

Answer 77

npm install ``--save-dev`` packageName devDependencies are for packages not included in the production build/app

Answer 78

An npm scripts are a convenient way to bundle common shell commands for your project. Basically a command you type in your CLI to do something with your application (can be given any name in your package.json scripts section). - can use all cli commands and commands in the bin

Answer 79

full command: npm run build Have to: check if package.json file exists, if not `npm init -y` Then install jquery with `npm install jquery` 1. npm install --save-dev webpack 2. npm install --save-dev webpack-cli 3. Add `"build": "webpack"` into scripts property of package.json file - build can be named anything "build": "webpack", "watch": "webpack --watch --mode=development --devtool=source-map", devtool gives better errors mode makes it load faster with dev mode

Answer 80

- Main difference is that they are officially supported by the browser, but commonJS modules aren't - Static module structure which means you can determine what to import and export without having to execute the whole file. - don't use require() and module.exports statements - More compact syntax Note: with import { } we are importing 'named' exports, but if we do import someName from './something' then it's by default. (default is just a name, so when importing it then you can say import 'namedWhatever' rather than import 'default')

Answer 81

``` ECMAScript modules CommonJS modules AMD modules Assets (just any file you want to import) WebAssembly modules ``` Note: It can look at absolute, relative, and module paths Note: In the exercise, when '../lib' is used then it means it looks for an index.js in the lib directory and the index.js has all the imports instead of doing individual imports in each file like noop.js and to-array.js) Note: Tim has made dom creation function which can be used to refactor AJAX code. It basically calls the function and makes the DOM

Answer 82

A front-end JavaScript library (all frameworks are libraries though for conversation) for creating user interfaces Note: - libraries (you call their code) - frameworks (they call your code) If there is an inversion of control then it's a framework - Sample statement = My understanding is that there is an inversion of control, so all frameworks are libraries, but not all libraries are frameworks

Answer 83

They are plain objects that describe what the DOM element should look like. NOT an HTML or DOM element

Answer 84

You import the ReactDOM from the react-dom package, then use ReactDOM.render(elementName, containerName) to mount an element to the page Note: we dont use dots or slashes to import because it's a package, not at a path on our computer Note2: we usually only run ReactDOM.render once, unlike other render functions. It also completely changes the child elements of the specified container (makes React own it). Never touch DOM/ do DOM manipulation if you use React

Answer 85

Babel is a JavaScript compiler (short answer). It's a toolchain that is mainly used to convert ES 2015+ (aka ES6) code into backwards compatible version of JavaScript in current/older browsers/environments. compiler means it translates programming language to another language, in this case new JS to old JS Note: lets it works on older browsers

Answer 86

A software component that adds a specific feature to an existing computer program. It's customization or addons.

Answer 87

Loaders are transformations that are applied to the source code of a module. They allow you to processing files as you import or load them into another language. They are used to customize the features of webpack, in this case we are using babel to make JavaScript code backwards compatible. Note: don't need loaders to use webpack

Answer 88

npm install --save-dev babel-loader also need to module.exports `loader: babel-loader` in webpack.config.js file

Answer 89

Syntax extension to JavaScript. It is commonly used with React, and it produces React 'elements' but with using the syntax of a template language like HTML. Note: don't read it like HTML even if it looks like it (can use babel to see what it actually looks like) Should name files .jsx to get syntax help in VS Code

Answer 90

Have to be sure that React is available because JSX will call for React eventually (it's actually calling React.createElement even though it looks like HTML

Answer 91

Babel Loader with the plugin transform-react-jsx

Answer 92

Reusable and independent bits of code, which serve the same purpose as JavaScript functions. They return React elements. Alternatively called 'function components.'

Answer 93

function keyword, variable name, 1 parameter props, then opening curly braces, then return React element

Answer 94

create an element variable which calls the component with the desired values. Then use ReactDOM.render(element, container) first arg of ReactDOM.render NEEDS to be a React element

Answer 95

Props are arbitrary inputs, basically parameters for React components Worth noting they ARE objects (that's why it is called props)

Answer 96

React Component then prop name = some value 1. create react component 2. key name/prop name 3. equal sign then value in a string Note: can have multiple props, kinda like HTML attributes

Answer 97

You put it in curly braces

Answer 98

class keyword, followed by variable name starting with capital letter, that extends to the component property of the react method (React.Component), opening curly braces, then a mandatory render() prototype method in the class body which has a return statement for a React element Ex: ``` class CustomButton extends React.Component { render() { return {this.props.text}; } } ```

Answer 99

using 'this' object Ex: this.props.propName

Answer 100

The purpose of state is to keep track of values that change over time In this exercise, the state is whether the button was clicked, not the change of text. Think of state as data model, render is where you put styling aka CSS

Answer 101

Pass it as a property

Answer 102

the map() method which applies a change to every single item in the array.

Answer 103

The best value for a key is the props' id, if it doesn't have one then you can use the index, but that isn't encouraged.

Answer 104

An input form element whose value is controlled by React - Components that have an internal state which is managed by React, usually refers to native HTML elements. Note: Totally okay to make multiple 3 different handler functions for 3 inputs like email, name, comment, etc. Purpose is for when user needs to update a form then it comes prepopulated.

Answer 105

props: control, value, and listen for, onChange,

Answer 106

A middleware function (think of it as a barebones server and all you need is a 'public' directory for your frontend files/code) ``` static = serves same thing to every user without modifications dynamic = serves something to a user based on logic of the request ``` NEED to use path.join to guarantee that node uses the 'public' directory next to your index.js (server code) kinda serves as security too since it gives users access to only the 'public' directory

Answer 107

the absolute path to the directory of the current module (same as path.dirname() of the __filename)

Answer 108

Joins all given path segments together (paths should be strings unless and relative unless __dirname) Basically concatenates all files together (relatively pathed), but it follows the order of the path, so if you do '..' at the end then it just exits out (see example on node.js)

Answer 109

A Promise that resolves to a Response object (which is a representation of entire HTTP response) Note: The first then method() is the only one that's a PROMISE, javascript will wait until that promise is fulfilled to pass in the parameter into the next then method Differences from xml http: Benefit of fetch: then() chaining Cons: no progress event (so hard to implement loading bar)

Answer 110

GET method NOTE: res.json() doesn't return the data, it returns a Promise. of the data There's instances where you don't use res.json(), but it's rare

Answer 111

Add a method property in second argument of fetch method. Ex: method: 'POST' // or PUT, DELETE, GET, etc.

Answer 112

Invoked immediately after a component is mounted (inserted into the tree) order: constructor called first ONE time, then render method, then after that componentDidMount called ONLY ONE time after first successful render()

Answer 113

componentDidMount(), componentDidUpdate(), and componentWillUnmount() *all invoked immediately based on their names render() is also one

Answer 114

using props (do this any time you want to share data b/w components)

Answer 115

myFunction is being called and then it's being called again on the return of the first call Note: functions can call other functions, and a function knows when it was defined

Answer 116

``` function wrap (value) { function ( ) { value } } ``` It defines a function named 'wrap' with one parameter, value, which calls an anonymous function with the return value of 'value' If you call wrap, you get back a function. The point is to store a variable and then retrieve that value

Answer 117

When the function is defined (aka lexical), or more accurately when it's compiled EVERY function's scope is at function definition Note: Good example is clickCounter with an event listener. Event listener callback has a closure on the 'counter' variable outside of the event listener

Answer 118

Closures Which is a combination of a function and the lexical environment within which that function was declared. Note: All JS has access to variables outside of it, but they cant look into functions and access variables

Answer 119

last-in-first-out Refers to stacks where last thing that is 'pushed' onto the stack is the first thing that can be popped out.

Answer 120

push(), pop(), peek()

Answer 121

Pop from the stack repeatedly until we see the value we want. linear time complexity - O(n)

Answer 122

First-in-first-out Relates to queues: the first thing enqueued onto the queue is the first thing that can be dequeued out

Answer 123

Enqueue() - adds value to the 'back' of the queue Dequeue() - removes the 'front' value from the queue and returns it Peek() - returns the 'front' value of the queue without removing it shift and pop for arrays Not optimal to use arrays because shift() makes JS have to reassign every value. But if you run into a question where you need to use queues/dequeues then just say that I will be using arrays as a queue. I know it's not as optimal as a queue though.

Answer 124

Dequeue() repeatedly (n times) until you reach arbitrary point you want Linear time complexity - O(n)

Answer 125

Linked lists are sequential access (like a queue), not random access (like an array). That means that, in order to go to a specific place in the list, you have to start at the beginning, then jump from node to node until you get there. random access is 'constant time' O(1) no matter how big the array is Linked lists are not typically used for anything practical for web development

Answer 126

you have to start at the beginning, then jump from node to node until you get there. linear time O(n) Problems solved with stack, don't define your own class just use the predefined methods