ReactJs
React - open source JavaScript library
JSX - javascript syntex extention that allows to write html-like code in react
Virtual DOM - it is lightweight copy of actual dom in memory
- when changes in state or props - react creates new Virtual Dom - compares it with previous one - updates only necessary part of actual dom
React component - building block of react app - reusable and independed piece of UI which makes combined UI
- class or function based
Keys - help react to identify which item have changed, added or deleted in list
React hook - function that allow developer to use state and other feature in function component
- way to provide stateful logic - managing component state, performing side effect, using life cycle methods
React Context - way to share data betwn component without passing through every level of component
- it create context provider to provide data and consumer to consume data.
diff function and class component
- function - simple and easy to read - function that accept props as argument and return JSX
- Class - javascript class that extends React.component class - it has feature like life cycle method and state
--------------------------------------------------------
ReactJs
--------------------------------------------------------
React - open source JavaScript library
JSX - javascript syntex extention that allows to write html-like code in react
Virtual DOM - it is lightweight copy of actual dom in memory
- when changes in state or props - react creates new Virtual Dom - compares it with previous one - updates only necessary part of actual dom
React component - building block of react app - reusable and independed piece of UI which makes combined UI
- class or function based
Keys - help react to identify which item have changed, added or deleted in list
React hook - function that allow developer to use state and other feature in function component
- way to provide stateful logic - managing component state, performing side effect, using life cycle methods
React Context - way to share data betwn component without passing through every level of component
- it create context provider to provide data and consumer to consume data.
diff function and class component
- function - simple and easy to read - function that accept props as argument and return JSX
- Class - javascript class that extends React.component class - it has feature like life cycle method and state
HOC - a function that takes a component and returns new component
// A simple HOC that logs the component's props
const withLogger = (WrappedComponent) => {
return class WithLogger extends React.Component {
componentDidMount() {
console.log('Props:', this.props);
}
render() {
return <WrappedComponent {...this.props} />;
}
};
};
// Usage of the HOC
const EnhancedComponent = withLogger(MyComponent);
render() - it returns JSX - it is called whenever updates to state or props
setState() - use to update state of component - when called react re-render component with updated state - any child component also re-render
prop driling - process of passing props from high-level component to a deeply nested component - context and redux
React Router - way to define different routes and their corresponding component
- allow to render different component based on current URL
- browserRouter, Route and Link to handle routing
React Fragment - group multiple element togather without addition DOM element
--------------------------------------------------------
Hooks in react js
--------------------------------------------------------
useState - manage state in function compo
useEffect - perform side effect in function comp (e.g data fetching, subscription, dom manipulation ) after rendering
useContext - access value of context provider within function comp
useReducer -
useRef - creates a ref object that can hold value across render
useMemo - memoize value to prevent un-necessary re-computation
useCallback - memoize function to prevent un-necessary re-creation
useMemo - use to memoize result of function or computation - prevent un-necessary execution of function
const result = useMemo(()=>{return a + b},[a, b]) => react will reuse the previous result untill a and b changes
useCallback - to memoize callback fun, preventing un -necessary re-creation of function render
- useful when passing callback as dependency to child component
const handleClick = useCallback(()=>{},[])
--------------------------------------------------------
NextJs
--------------------------------------------------------
SSR and SSG - pre-render pages at build time (ssg) or request time (ssr)
SSR - process of rendering react component on server and sending generated HTML to client
- improve initial page load time
- improve search engine optimization
- to implement SSR in nodejs with react, we can use next
getStaticProps - function to fetch data at build time and pass it as props to page compo - returns props
- used in static site generation(SSG) to pre-render pages with fetched data
=> Example:
=> The news data is returned as props, which can be accessed in the News component.
=> During the build process, Next.js will call the getStaticProps function and wait for the asynchronous operation to complete.
=> The fetched data is stored in the news variable.
=> The props object is returned with the news data, which will be passed to the News component as props
=> The revalidate property is set to 1, which means that the page will be re-generated every 1 second (during development) or when a new request is made (in production). This is useful for dynamic data updates
=> By using getStaticProps, you ensure that the news data is fetched at build time and passed as props to the News component.
=> This allows Next.js to generate a static version of the page with the fetched data, providing better performance and SEO benefits
export default function News({ news }) {
return (
<p>{news}</p>
)}
export async function getStaticProps(){
let news = {}
return {
props:{news:news}
}
}
getServerSideProps:-
--------------------
=> allows to fetch data on every request made to page
=> used in SSR to fetch data dynamically at run time
Here's an explanation of how the getServerSideProps method works:
=> When a request is made to a page that includes the getServerSideProps method, Next.js calls this function on the server.
=> Inside the getServerSideProps function, you can fetch data from an API, a database, or any other data source using asynchronous operations like fetch.
=> The fetched data is typically stored in variables in data variable.
=> You return an object in props key. This data will be passed as props to the page component.
=> The page component, along with the fetched data as props, is then rendered on the server and sent as a response to the client.
=> The getServerSideProps method is useful when you have dynamic data that needs to be fetched and rendered on each request, such as personalized user data, real-time data, or data that frequently changes. It enables server-side rendering for the specific page, allowing you to fetch and render data dynamically on the server.
export default function MyPage({ data }) {
// Use the fetched data in your page component
return (
<div>
<h1>{data.title}</h1>
<p>{data.description}</p>
</div>
);
}
export async function getServerSideProps() {
// Fetch data from an API or database
const res = await fetch('https://api.example.com/data');
const data = await res.json();
// Return the data as props
return {
props: {
data,
},
};
}
getStaticPaths function
- use for dynamic route generation in nextjs
Diff getServerSideProps and useEffect
- both used in next.js for data fetching and handling side effect
getServerSideProps: -
- executed on server-side during every request
- fetch data before rendering and provide props to page
useEffect:-
- executed on client side after component has render
- it run after inital render
--------------------------------------------------------
NodeJS
--------------------------------------------------------
- single threaded
- event loop and non-blocking i/o to handle multiple request
event loop
- it checks for new event in queue and execute one by one in loop to handle multiple req
non-blocking
- nodejs initate operation and continue execute without waiting for other i/o when i/o operation finish callback returns result
Diff single thread multi thread
- referes to handling consurrent task and executing task
single thread
- only one thread of execution
- program sequentially executes in single flow
- task or operation is processed in sequential manner
- program can work on single taks at a time
- if task takes long time, it can block sub sequent task
- leading delay in overall execution
multi thread
- multiple thread of execution
- each thread represent separate flow in program
- multiple task performed simultaneously using multiple thread
- each thread can perform specific task
- allowing parallel execution of task
- threads can communicate with each other and share data
os module - provides info related to operating sys
querystring - provide method to parse and format url query string
crypto - provide crypto graphic functionality
- generating hash, encrypting, decrypting data, working with signature
File upload in nodejs
const multer = require("multer")
const storage = multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,'uploads/')
}
filename:(req,file,cb)=>{
cb(null,Date.now())
}
})
const upload = multer({storage:storage})
--------------------------------------------------------
path module
--------------------------------------------------------
- to join path segments
- to resolve relative paths
- to extract file extentions
path.resolve() - returns absolute path of project - C:\Users\junior node\Desktop\pramay
path.resolve("public","image","logo.png") - returns absolute path of file or directory - C:\Users\junior node\Desktop\pramay\public\images\logo.png
path.resolve(__dirname) - returns abs path of current dir
path.resolve(__filename) - returns abs path of current file
path.join("/usr", "local", "bin", "app.js") - \usr\local\bin\app.js
path.dirname("C:\\Users\\junior node\\Desktop\\pramay\\public\\images\\logo.png) - C:\Users\junior node\Desktop\pramay\public\images
path.extname("C:\\Users\\junior node\\Desktop\\pramay\\public\\images\\logo.png") - .png
path.normalize("C:\\Users\\junior node\\Desktop\\pramay\\..\\images\\logo.png") - C:\Users\junior node\Desktop\images\logo.png - it resolves . and ..
path.isAbsolute("file.txt") - false - returns boolean for abs path
path.relative("C:\\Users\\junior node\\Desktop\\pramay\\images\\logo.png", "C:\\Users\\junior node\\Desktop") - ..\..\.. - returns relative path to given arg
path.sep => returns / for win and \ for linux
--------------------------------------------------------
socket
--------------------------------------------------------
web sockets - communication protocol, enables real time, bi-directional data transfer bet client and server
socket.emit(eventName, data) => send event to specific connected client/socket - one-to-one communication
io.emit - send event to all connected client/sockets - one-to-many
socket.join(room)
socket.leave(room)
=> socket.emit() => to emit data to only current connected socket
=> io.emit() => to emit data to all connected socket
=> socket.broadcast.emit() => to emit data to all other socket except current connected
=> io.to(room).emit(eventName,data) => to emit data to only given room
--------------------------------------------------------
fs module
--------------------------------------------------------
fs - to create, delete and modify files, as well as to read content async or sync way
form submission - it can be handle by middleware like body-parser to parse multipart/formdata
env - it is use to store configuration setting for nodejs
- to access env use process.env object
--------------------------------------------------------
Http
--------------------------------------------------------
- to create http and https server
- making http request
--------------------------------------------------------
Stream in nodejs
--------------------------------------------------------
- to handle data streaming
- enable large amount of data processing by working with chunk instead of entire data
--------------------------------------------------------
hook in nodejs
--------------------------------------------------------
hook - mechanisam to modify operation or event in app
- to register or execute custom code when certain event occurs
- middleware act as hook - it modify req and res
app.use((req,res,next)=>{
next() - pass control to next middleware
})
- pre and post hook in mongoose - mongoose provides hook to modify document before and after they are executed
userSchema.pre('save', function(next) {
console.log('Saving user:', this.name);
next();
});
- webhook
- user defined http callback
- allow external service to be notified when certain event occur in app
- hooks to execute custom code when receving notification
- triggered by new register, payment confirmation ,data updates
- GitHub Webhooks
- Payment Gateway Webhooks
--------------------------------------------------------
Event in nodejs
--------------------------------------------------------
Event hook -
- you can define and emit custom events using EventEmitter
- other part of app can listen to this event and execute specific action when they are trigger
const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
// Define a hook (custom event)
myEmitter.on('customEvent', (data) => {
console.log('Custom event triggered:', data);
});
// Trigger the hook (emit the custom event)
myEmitter.emit('customEvent', { message: 'Hello, World!' });
--------------------------------------------------------
MongoDb
--------------------------------------------------------
- noSql database
- document oriented database
- it stores data in JSON format
- schemaless, no need to define schema
advantage
- easy to scale up or down
- supports data partitioning
- use dynamic db schema
- use javascript obj
- supports primary and secondary index
- supports field, range-based, string pattern matching type queries
features of mongodb
- indexing - it supports unique,compound,full-text index
- Aggregation -provides aggregation framework for data processing
- TTl - it supports ttl for data that should expire at certain time
- Sharding - process of splitting data across machines
BSON - binary JSON - binary encoded json like docs
document - JSON like data structure
Collection - group of MongoDb documents
databases - group of collections
mongo shell - javascript shell that allows mongodb from command line
ObjectId - 12 byte unique id - primary key - generated based on timestamp, machine id, process id, random string
findOne - returns first doc match
find - returns all doc
index - it is data structure - improves speed of data retrival
aggregation - a feature of mongo - provides data transformation and process using pipeline
- allows filter, project, group and ops
sharding - process of distributing data across multiple machine
- use for horizontal scaling and improve performance
Replica set - Replica set is group of mongodb servers that maintan same data set
- it provides high availabilty
- it has primary node and one or more secondary node
Primary node - it accept write operation
performance improve
- creating index
- proper schema design
- lean method
$lookup
- performs left out join net current collection and another collection
{
$lookup: {
from: "foreignCollection",
localField: "localField",
foreignField: "foreignField",
as: "outputArray"
}
}
mongodump - to create binary export of content of database
mongorestore - restore content of db from binary export created by mongodump
$text - to enable text search
diff sharding and replication
- sharding - distributing data across multiple machine - improve horizontal scaling
- replication - creating copy across multiple server - to enhance high availability
mongostate - provides a real-time, human-readable view statistics
--------------------------------------------------------
lean()
--------------------------------------------------------
Message.find({ type: 1 }).select("title -_id").lean()
- to retrieve plain JavaScript objects rather than Mongoose documents,
Reduced Overhead:- Mongoose documents come with additional metadata and methods
Memory Efficiency: - Mongoose documents can consume more memory
Faster Serialization: - plain JavaScript objects are usually faster to serialize into JSON,
Note:- lose some of the Mongoose-specific features and methods that documents provide
--------------------------------------------------------
MongoDB Query
--------------------------------------------------------
User.find({ age: { $gte: 21 } })
User.updateOne({ name: 'John Doe' }, { age: 26 })
User.updateMany({ age: { $lt: 21 } }, { $set: { isUnderage: true } })
User.deleteOne({ name: 'John Doe' })
User.deleteMany({ age: { $gte: 60 } })
User.countDocuments({ age: { $gte: 21 } })
User.aggregate([
{ $match: { age: { $gte: 21 } } },
{ $group: { _id: '$age', count: { $sum: 1 } } }
]) // returns age wise total
--------------------------------------------------------
GraphQL
--------------------------------------------------------
const GET_ALL_SLUGS = gql`
query {
posts {
data {
attributes {
slug
}
}
}
}
`;
const GET_ALL_AUTHORS = gql`
query {
authors {
data {
id
attributes {
name
description
about
createdAt
social
image {
data {
attributes {
url
name
}
}
}
}
}
}
}
`;
const GET_SINGLE_AUTHOR = gql`
query ($id: ID!) {
author(id: $id) {
data {
id
attributes {
name
description
social
createdAt
about
image {
data {
attributes {
url
}
}
}
}
}
}
}
`;
const GET_AUTHORBY_NAME = gql`
query ($name1: String!) {
authors(filters: { name: { eq: $name1 } }) {
data {
id
attributes {
name
description
social
createdAt
about
image {
data {
attributes {
url
}
}
}
}
}
}
}
`;
const GET_TAG = gql`
query ($id: ID!) {
tag(id: $id) {
data {
id
attributes {
name
}
}
}
}
`;
const GET_ALL_TAG = gql`
query {
tags {
data {
id
attributes {
name
}
}
}
}
`;
const GET_ALL_POST = gql`
query {
posts {
data {
id
attributes {
title
description
createdAt
content
slug
status
image {
data {
attributes {
url
}
}
}
author {
data {
id
attributes {
name
description
social
about
image {
data {
attributes {
url
}
}
}
}
}
}
categories {
data {
id
attributes {
name
}
}
}
tags {
data {
id
attributes {
name
}
}
}
}
}
}
}
`;
const GET_SINGLE_POST = gql`
query ($id: ID!) {
post(id: $id) {
data {
id
attributes {
title
description
categories {
data {
id
attributes {
name
}
}
}
author {
data {
id
attributes {
name
about
image {
data {
id
attributes {
url
name
}
}
}
}
}
}
}
}
}
}
`;
const GET_POSTBY_SLUG = gql`
query ($urlSlug: String!) {
posts(filters: { slug: { eq: $urlSlug } }) {
data {
id
attributes {
title
description
createdAt
content
slug
image {
data {
attributes {
url
}
}
}
categories {
data {
id
attributes {
name
}
}
}
author {
data {
id
attributes {
name
about
image {
data {
id
attributes {
url
name
}
}
}
}
}
}
tags {
data {
id
attributes {
name
}
}
}
}
}
}
}
`;
const GET_POSTBY_CATEGORY = gql`
query ($category: String!) {
posts(filters: { categories: { name: { eq: $category } } }) {
data {
id
attributes {
title
description
createdAt
content
slug
image {
data {
attributes {
url
}
}
}
categories {
data {
id
attributes {
name
}
}
}
author {
data {
id
attributes {
name
about
image {
data {
id
attributes {
url
name
}
}
}
}
}
}
tags {
data {
id
attributes {
name
}
}
}
}
}
}
}
`;
const GET_POSTBY_TAG = gql`
query ($tag: String!) {
posts(filters: { tags: { name: { eq: $tag } } }) {
data {
id
attributes {
title
description
createdAt
content
slug
image {
data {
attributes {
url
}
}
}
categories {
data {
id
attributes {
name
}
}
}
author {
data {
id
attributes {
name
about
image {
data {
id
attributes {
url
name
}
}
}
}
}
}
tags {
data {
id
attributes {
name
}
}
}
}
}
}
}
`;
const GET_ALL_CATEGORY = gql`
query {
categories {
data {
id
attributes {
name
}
}
}
}
`;
const GET_CATEGORY = gql`
query ($id: ID) {
category(id: $id) {
data {
id
attributes {
name
createdAt
}
}
}
}
`;
-----------------------------------------------------------
logical Questions
-----------------------------------------------------------
1) in - {a:1, b:2, c:3} out -{ a: 3, b: 6, c: 9 }
let input = {a:1, b:2, c:3}
Object.entries(input) => [[a,1],[b,2]]
Object.fromEntries(Object.entries(input)) => {a:1, b:2, c:3}
Object.fromEntries(Object.entries(input).map(([key, value]) => [key, value * 3])); // returns { a: 3, b: 6, c: 9 }
--------------------------------------------------------
2) return even num from arr
let arr = [1,2,3,4,5]
arr.filter((item)=>item % 2 ===2)
--------------------------------------------------------
3) get unique array from two array
let arr1 = [1, 2, 3, 4, 5, 6, 7];
let arr2 = [2, 4, 7, 4];
let combinedSet = new Set([...arr1, ...arr2]);
console.log(Array.from(combinedSet));
let uniqueArray = arr1.concat(arr2).filter((value, index, self) => { return self.indexOf(value) === index});
indexOf() - it will return index and check if element is first occurance in array
--------------------------------------------------------
4)
*****
*****
*****
*****
*****
*****
* *
* *
* *
*****
*
**
***
****
*****
*
**
***
****
*****
*****
****
***
**
*
*
**
* *
* *
* *
******
*
***
*****
*******
*********
*********
*******
*****
***
*
*
* *
* *
* *
*********
*
***
*****
*******
*********
*******
*****
***
*
*
* *
* *
* *
* *
* *
* *
* *
*
*********
*******
*****
***
*
***
*****
*******
*********
*
**
***
****
*****
****
***
**
*
*
**
***
****
*****
****
***
**
*
*** ***
***** *****
***********
*********
*******
*****
***
*
1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
We need to run a loop to print n numbers in each row, where n is the row number. This forms the internal loop.
In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows).
For each row, we need to print numbers from num = 1 to num = n.
Example : For the 5th row, n = 5. The internal loop goes from num = 1 to num = 5. The 5th row becomes: 1 2 3 4 5
let str = "";
for (i = 1; i <= 5; i++) {
for (j = 1; j <= i; j++) {
str += j + " ";
}
str += "\n";
}
console.log(str);
1
2 2
3 3 3
4 4 4 4
5 5 5 5 5
let str = "";
for (i = 1; i <= 5; i++) {
for (j = 1; j <= i; j++) {
str += i + " ";
}
str += "\n";
}
console.log(str);
1
2 3
4 5 6
7 8 9 10
let str = "";
let sum = 1;
for (i = 1; i <= 4; i++) {
for (j = 1; j <= i; j++) {
str += sum + " ";
sum++;
}
str += "\n";
}
console.log(str);
12345
1234
123
12
1
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = 1; j <= n + 1 - i; j++) {
str += j;
}
str += "\n";
}
console.log(str);
1
123
12345
1234567
123456789
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= n - i; n++) {
str += " ";
}
for (k = 1; k <= 2 * n - 1; k++) {
str += k;
}
str += "\n";
}
console.log(str);
*****
*****
*****
*****
*****
let str = "";
for (i = 1; i <= 5; i++) {
for (j = 1; j <= 5; j++) {
str += "*";
}
str += "\n";
}
console.log(str);
*****
* *
* *
* *
*****
let str = "";
for (i = 1; i <= 5; i++) {
for (j = 1; j <= 5; j++) {
if (i == 1 || i == 5) {
str += "*";
} else {
if (j == 1 || j == 5) {
str += "*";
} else {
str += " ";
}
}
}
str += "\n";
}
console.log(str);
*
**
***
****
*****
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = 1; j <= n - i; j++) {
str += " ";
}
for (k = 1; k <= i; k++) {
str += "*";
}
str += "\n";
}
console.log(str);
*
**
***
****
*****
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= i; j++) {
str += "*";
}
str += "\n";
}
console.log(str);
*
***
*****
*******
*********
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= n - i; j++) {
str += " ";
}
for (k = 1; k <= 2 * i - 1; k++) {
str += "*";
}
str += "\n";
}
console.log(str);
54321
5432
543
54
5
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = 5; i <= j; j--) {
str += j;
}
str += "\n";
}
console.log(str);
*
**
* *
* *
* *
******
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= i; j++) {
if (j == 1 || j == i || i == n) {
str += "*";
} else {
str += " ";
}
}
str += "\n";
}
console.log(str);
*****
****
***
**
*
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = n; j >= i; j--) {
str += "*";
}
str += "\n";
}
console.log(str);
A
AA
AAA
AAAA
AAAAA
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = 1; j <= i; j++) {
str += "A";
}
str += "\n";
}
console.log(str);
AAAAA
AAAA
AAA
AA
A
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = n; j >= i; j--) {
str += "A";
}
str += "\n";
}
console.log(str);
$
$$
$$$
$$$$
%%%%%
%%%%
%%%
%%
%
let n = 9;
let str = "";
for (i = 1; i <= n; i++) {
if (i <= 4) {
for (j = 1; j <= i; j++) {
str += "$";
}
} else {
for (k = 5; k + 4 >= i; k--) {
str += "%";
}
}
str += "\n";
}
console.log(str);
AAAAA
AAAA
AAA
AA
A
B
BB
BBB
BBBB
BBBBB
let n = 11;
let str = "";
for (i = 1; i <= n; i++) {
if (i <= 5) {
for (j = 5; j >= i; j--) {
str += "A";
}
} else if (i == 6) {
str += " ";
} else {
for (k = 7; k <= i; k++) {
str += "B";
}
}
str += "\n";
}
console.log(str);
* * * * *
* * * *
* * *
* *
*
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (k = 1; k <= i - 1; k++) {
str += " ";
}
for (j = 1; j <= n + 1 - i; j++) {
str += "*";
}
str += "\n";
}
console.log(str);
* * * * *
* * * *
* * *
* *
*
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= n + 1 - i; j++) {
str += "*";
}
str += "\n";
}
console.log(str);- a function that takes a component and returns new component
// A simple HOC that logs the component's props
const withLogger = (WrappedComponent) => {
return class WithLogger extends React.Component {
componentDidMount() {
console.log('Props:', this.props);
}
render() {
return <WrappedComponent {...this.props} />;
}
};
};
// Usage of the HOC
const EnhancedComponent = withLogger(MyComponent);
render() - it returns JSX - it is called whenever updates to state or props
setState() - use to update state of component - when called react re-render component with updated state - any child component also re-render
prop driling - process of passing props from high-level component to a deeply nested component - context and redux
React Router - way to define different routes and their corresponding component
- allow to render different component based on current URL
- browserRouter, Route and Link to handle routing
React Fragment - group multiple element togather without addition DOM element
--------------------------------------------------------
Hooks in react js
--------------------------------------------------------
useState - manage state in function compo
useEffect - perform side effect in function comp (e.g data fetching, subscription, dom manipulation ) after rendering
useContext - access value of context provider within function comp
useReducer -
useRef - creates a ref object that can hold value across render
useMemo - memoize value to prevent un-necessary re-computation
useCallback - memoize function to prevent un-necessary re-creation
useMemo - use to memoize result of function or computation - prevent un-necessary execution of function
const result = useMemo(()=>{return a + b},[a, b]) => react will reuse the previous result untill a and b changes
useCallback - to memoize callback fun, preventing un -necessary re-creation of function render
- useful when passing callback as dependency to child component
const handleClick = useCallback(()=>{},[])
--------------------------------------------------------
NextJs
--------------------------------------------------------
SSR and SSG - pre-render pages at build time (ssg) or request time (ssr)
SSR - process of rendering react component on server and sending generated HTML to client
- improve initial page load time
- improve search engine optimization
- to implement SSR in nodejs with react, we can use next
getStaticProps - function to fetch data at build time and pass it as props to page compo - returns props
- used in static site generation(SSG) to pre-render pages with fetched data
=> Example:
=> The news data is returned as props, which can be accessed in the News component.
=> During the build process, Next.js will call the getStaticProps function and wait for the asynchronous operation to complete.
=> The fetched data is stored in the news variable.
=> The props object is returned with the news data, which will be passed to the News component as props
=> The revalidate property is set to 1, which means that the page will be re-generated every 1 second (during development) or when a new request is made (in production). This is useful for dynamic data updates
=> By using getStaticProps, you ensure that the news data is fetched at build time and passed as props to the News component.
=> This allows Next.js to generate a static version of the page with the fetched data, providing better performance and SEO benefits
export default function News({ news }) {
return (
<p>{news}</p>
)}
export async function getStaticProps(){
let news = {}
return {
props:{news:news}
}
}
getServerSideProps:-
--------------------
=> allows to fetch data on every request made to page
=> used in SSR to fetch data dynamically at run time
Here's an explanation of how the getServerSideProps method works:
=> When a request is made to a page that includes the getServerSideProps method, Next.js calls this function on the server.
=> Inside the getServerSideProps function, you can fetch data from an API, a database, or any other data source using asynchronous operations like fetch.
=> The fetched data is typically stored in variables in data variable.
=> You return an object in props key. This data will be passed as props to the page component.
=> The page component, along with the fetched data as props, is then rendered on the server and sent as a response to the client.
=> The getServerSideProps method is useful when you have dynamic data that needs to be fetched and rendered on each request, such as personalized user data, real-time data, or data that frequently changes. It enables server-side rendering for the specific page, allowing you to fetch and render data dynamically on the server.
export default function MyPage({ data }) {
// Use the fetched data in your page component
return (
<div>
<h1>{data.title}</h1>
<p>{data.description}</p>
</div>
);
}
export async function getServerSideProps() {
// Fetch data from an API or database
const res = await fetch('https://api.example.com/data');
const data = await res.json();
// Return the data as props
return {
props: {
data,
},
};
}
getStaticPaths function
- use for dynamic route generation in nextjs
--------------------------------------
Diff getServerSideProps and useEffect
--------------------------------------
- both used in next.js for data fetching and handling side effect
getServerSideProps: -
- executed on server-side during every request
- fetch data before rendering and provide props to page
useEffect:-
- executed on client side after component has render
- it run after inital render
--------------------------------------------------------
NodeJS
--------------------------------------------------------
- single threaded
- event loop and non-blocking i/o to handle multiple request
event loop
- it checks for new event in queue and execute one by one in loop to handle multiple req
non-blocking
- nodejs initate operation and continue execute without waiting for other i/o when i/o operation finish callback returns result
--------------------------------------------------------
Diff single thread multi thread
--------------------------------------------------------
- referes to handling consurrent task and executing task
single thread
- only one thread of execution
- program sequentially executes in single flow
- task or operation is processed in sequential manner
- program can work on single taks at a time
- if task takes long time, it can block sub sequent task
- leading delay in overall execution
multi thread
- multiple thread of execution
- each thread represent separate flow in program
- multiple task performed simultaneously using multiple thread
- each thread can perform specific task
- allowing parallel execution of task
- threads can communicate with each other and share data
os module - provides info related to operating sys
querystring - provide method to parse and format url query string
crypto - provide crypto graphic functionality
- generating hash, encrypting, decrypting data, working with signature
--------------------------------------------------------
File upload in nodejs
--------------------------------------------------------
const multer = require("multer")
const storage = multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,'uploads/')
}
filename:(req,file,cb)=>{
cb(null,Date.now())
}
})
const upload = multer({storage:storage})
--------------------------------------------------------
path module
--------------------------------------------------------
- to join path segments
- to resolve relative paths
- to extract file extentions
path.resolve() - returns absolute path of project - C:\Users\junior node\Desktop\pramay
path.resolve("public","image","logo.png") - returns absolute path of file or directory - C:\Users\junior node\Desktop\pramay\public\images\logo.png
path.resolve(__dirname) - returns abs path of current dir
path.resolve(__filename) - returns abs path of current file
path.join("/usr", "local", "bin", "app.js") - \usr\local\bin\app.js
path.dirname("C:\\Users\\junior node\\Desktop\\pramay\\public\\images\\logo.png) - C:\Users\junior node\Desktop\pramay\public\images
path.extname("C:\\Users\\junior node\\Desktop\\pramay\\public\\images\\logo.png") - .png
path.normalize("C:\\Users\\junior node\\Desktop\\pramay\\..\\images\\logo.png") - C:\Users\junior node\Desktop\images\logo.png - it resolves . and ..
path.isAbsolute("file.txt") - false - returns boolean for abs path
path.relative("C:\\Users\\junior node\\Desktop\\pramay\\images\\logo.png", "C:\\Users\\junior node\\Desktop") - ..\..\.. - returns relative path to given arg
path.sep => returns / for win and \ for linux
--------------------------------------------------------
socket
--------------------------------------------------------
web sockets - communication protocol, enables real time, bi-directional data transfer bet client and server
socket.emit(eventName, data) => send event to specific connected client/socket - one-to-one communication
io.emit - send event to all connected client/sockets - one-to-many
socket.join(room)
socket.leave(room)
=> socket.emit() => to emit data to only current connected socket
=> io.emit() => to emit data to all connected socket
=> socket.broadcast.emit() => to emit data to all other socket except current connected
=> io.to(room).emit(eventName,data) => to emit data to only given room
--------------------------------------------------------
fs module
--------------------------------------------------------
fs - to create, delete and modify files, as well as to read content async or sync way
form submission - it can be handle by middleware like body-parser to parse multipart/formdata
env - it is use to store configuration setting for nodejs
- to access env use process.env object
--------------------------------------------------------
Http
--------------------------------------------------------
- to create http and https server
- making http request
--------------------------------------------------------
Stream in nodejs
--------------------------------------------------------
- to handle data streaming
- enable large amount of data processing by working with chunk instead of entire data
--------------------------------------------------------
hook
--------------------------------------------------------
hook - mechanisam to modify operation or event in app
- to register or execute custom code when certain event occurs
- middleware act as hook - it modify req and res
app.use((req,res,next)=>{
next() - pass control to next middleware
})
- pre and post hook in mongoose - mongoose provides hook to modify document before and after they are executed
userSchema.pre('save', function(next) {
console.log('Saving user:', this.name);
next();
});
- webhook
- user defined http callback
- allow external service to be notified when certain event occur in app
- hooks to execute custom code when receving notification
- triggered by new register, payment confirmation ,data updates
- GitHub Webhooks
- Payment Gateway Webhooks
--------------------------------------------------------
Event in nodejs
--------------------------------------------------------
Event hook -
- you can define and emit custom events using EventEmitter
- other part of app can listen to this event and execute specific action when they are trigger
const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
// Define a hook (custom event)
myEmitter.on('customEvent', (data) => {
console.log('Custom event triggered:', data);
});
// Trigger the hook (emit the custom event)
myEmitter.emit('customEvent', { message: 'Hello, World!' });
--------------------------------------------------------
MongoDb
--------------------------------------------------------
- noSql database
- document oriented database
- it stores data in JSON format
- schemaless, no need to define schema
advantage
- easy to scale up or down
- supports data partitioning
- use dynamic db schema
- use javascript obj
- supports primary and secondary index
- supports field, range-based, string pattern matching type queries
features of mongodb
- indexing - it supports unique,compound,full-text index
- Aggregation -provides aggregation framework for data processing
- TTl - it supports ttl for data that should expire at certain time
- Sharding - process of splitting data across machines
BSON - binary JSON - binary encoded json like docs
document - JSON like data structure
Collection - group of MongoDb documents
databases - group of collections
mongo shell - javascript shell that allows mongodb from command line
ObjectId - 12 byte unique id - primary key - generated based on timestamp, machine id, process id, random string
findOne - returns first doc match
find - returns all doc
index - it is data structure - improves speed of data retrival
aggregation - a feature of mongo - provides data transformation and process using pipeline
- allows filter, project, group and ops
sharding - process of distributing data across multiple machine
- use for horizontal scaling and improve performance
Replica set - Replica set is group of mongodb servers that maintan same data set
- it provides high availabilty
- it has primary node and one or more secondary node
Primary node - it accept write operation
performance improve
- creating index
- proper schema design
- lean method
$lookup
- performs left out join net current collection and another collection
{
$lookup: {
from: "foreignCollection",
localField: "localField",
foreignField: "foreignField",
as: "outputArray"
}
}
mongodump - to create binary export of content of database
mongorestore - restore content of db from binary export created by mongodump
$text - to enable text search
diff sharding and replication
- sharding - distributing data across multiple machine - improve horizontal scaling
- replication - creating copy across multiple server - to enhance high availability
mongostate - provides a real-time, human-readable view statistics
--------------------------------------------------------
lean()
--------------------------------------------------------
Message.find({ type: 1 }).select("title -_id").lean()
- to retrieve plain JavaScript objects rather than Mongoose documents,
Reduced Overhead:- Mongoose documents come with additional metadata and methods
Memory Efficiency: - Mongoose documents can consume more memory
Faster Serialization: - plain JavaScript objects are usually faster to serialize into JSON,
Note:- lose some of the Mongoose-specific features and methods that documents provide
--------------------------------------------------------
MongoDB Query
--------------------------------------------------------
User.find({ age: { $gte: 21 } })
User.updateOne({ name: 'John Doe' }, { age: 26 })
User.updateMany({ age: { $lt: 21 } }, { $set: { isUnderage: true } })
User.deleteOne({ name: 'John Doe' })
User.deleteMany({ age: { $gte: 60 } })
User.countDocuments({ age: { $gte: 21 } })
User.aggregate([
{ $match: { age: { $gte: 21 } } },
{ $group: { _id: '$age', count: { $sum: 1 } } }
]) // returns age wise total
--------------------------------------------------------
--------------- Linux ---------------
--------------------------------------------------------
--------------------------------------------------------
zip
--------------------------------------------------------
--> To zip any folder in ubuntu
zip -r my_project.zip . --exclude=node_modules/ --exclude=dist/ --exclude=other_folder/
==> zip first 1000 files
---> zip -r 1000.zip $(ls | head -n 1000)
=> zip from 100 to next limit
---> zip -r next_100_files.zip $(ls | tail -n +101 | head -n 100)
--------------------------------------------------------
cron job in apache linux
--------------------------------------------------------
--> To list cron jobs running
crontab -l
--> to open cron file in edit mode
crontab -e
--> exit from crontab edit file
ctrl + z
--> open crontab with editor
EDITOR=nano crontab -e
--------------------------------------------------------
server time setting
--------------------------------------------------------
==> check server timezone
---> timedatectl
==> set timezone on server
---> sudo timedatectl set-timezone Asia/Singapore
--------------------------------------------------------
GraphQL
--------------------------------------------------------
const GET_ALL_SLUGS = gql`
query {
posts {
data {
attributes {
slug
}
}
}
}
`;
const GET_ALL_AUTHORS = gql`
query {
authors {
data {
id
attributes {
name
description
about
createdAt
social
image {
data {
attributes {
url
name
}
}
}
}
}
}
}
`;
const GET_SINGLE_AUTHOR = gql`
query ($id: ID!) {
author(id: $id) {
data {
id
attributes {
name
description
social
createdAt
about
image {
data {
attributes {
url
}
}
}
}
}
}
}
`;
const GET_AUTHORBY_NAME = gql`
query ($name1: String!) {
authors(filters: { name: { eq: $name1 } }) {
data {
id
attributes {
name
description
social
createdAt
about
image {
data {
attributes {
url
}
}
}
}
}
}
}
`;
const GET_TAG = gql`
query ($id: ID!) {
tag(id: $id) {
data {
id
attributes {
name
}
}
}
}
`;
const GET_ALL_TAG = gql`
query {
tags {
data {
id
attributes {
name
}
}
}
}
`;
const GET_ALL_POST = gql`
query {
posts {
data {
id
attributes {
title
description
createdAt
content
slug
status
image {
data {
attributes {
url
}
}
}
author {
data {
id
attributes {
name
description
social
about
image {
data {
attributes {
url
}
}
}
}
}
}
categories {
data {
id
attributes {
name
}
}
}
tags {
data {
id
attributes {
name
}
}
}
}
}
}
}
`;
const GET_SINGLE_POST = gql`
query ($id: ID!) {
post(id: $id) {
data {
id
attributes {
title
description
categories {
data {
id
attributes {
name
}
}
}
author {
data {
id
attributes {
name
about
image {
data {
id
attributes {
url
name
}
}
}
}
}
}
}
}
}
}
`;
const GET_POSTBY_SLUG = gql`
query ($urlSlug: String!) {
posts(filters: { slug: { eq: $urlSlug } }) {
data {
id
attributes {
title
description
createdAt
content
slug
image {
data {
attributes {
url
}
}
}
categories {
data {
id
attributes {
name
}
}
}
author {
data {
id
attributes {
name
about
image {
data {
id
attributes {
url
name
}
}
}
}
}
}
tags {
data {
id
attributes {
name
}
}
}
}
}
}
}
`;
const GET_POSTBY_CATEGORY = gql`
query ($category: String!) {
posts(filters: { categories: { name: { eq: $category } } }) {
data {
id
attributes {
title
description
createdAt
content
slug
image {
data {
attributes {
url
}
}
}
categories {
data {
id
attributes {
name
}
}
}
author {
data {
id
attributes {
name
about
image {
data {
id
attributes {
url
name
}
}
}
}
}
}
tags {
data {
id
attributes {
name
}
}
}
}
}
}
}
`;
const GET_POSTBY_TAG = gql`
query ($tag: String!) {
posts(filters: { tags: { name: { eq: $tag } } }) {
data {
id
attributes {
title
description
createdAt
content
slug
image {
data {
attributes {
url
}
}
}
categories {
data {
id
attributes {
name
}
}
}
author {
data {
id
attributes {
name
about
image {
data {
id
attributes {
url
name
}
}
}
}
}
}
tags {
data {
id
attributes {
name
}
}
}
}
}
}
}
`;
const GET_ALL_CATEGORY = gql`
query {
categories {
data {
id
attributes {
name
}
}
}
}
`;
const GET_CATEGORY = gql`
query ($id: ID) {
category(id: $id) {
data {
id
attributes {
name
createdAt
}
}
}
}
`;
-----------------------------------------------------------
logical Questions
-----------------------------------------------------------
1) in - {a:1, b:2, c:3} out -{ a: 3, b: 6, c: 9 }
let input = {a:1, b:2, c:3}
Object.entries(input) => [[a,1],[b,2]]
Object.fromEntries(Object.entries(input)) => {a:1, b:2, c:3}
Object.fromEntries(Object.entries(input).map(([key, value]) => [key, value * 3])); // returns { a: 3, b: 6, c: 9 }
--------------------------------------------------------
2) return even num from arr
let arr = [1,2,3,4,5]
arr.filter((item)=>item % 2 ===2)
--------------------------------------------------------
3) get unique array from two array
let arr1 = [1, 2, 3, 4, 5, 6, 7];
let arr2 = [2, 4, 7, 4];
let combinedSet = new Set([...arr1, ...arr2]);
console.log(Array.from(combinedSet));
let uniqueArray = arr1.concat(arr2).filter((value, index, self) => { return self.indexOf(value) === index});
indexOf() - it will return index and check if element is first occurance in array
--------------------------------------------------------
4)
*****
*****
*****
*****
*****
*****
* *
* *
* *
*****
*
**
***
****
*****
*
**
***
****
*****
*****
****
***
**
*
*
**
* *
* *
* *
******
*
***
*****
*******
*********
*********
*******
*****
***
*
*
* *
* *
* *
*********
*
***
*****
*******
*********
*******
*****
***
*
*
* *
* *
* *
* *
* *
* *
* *
*
*********
*******
*****
***
*
***
*****
*******
*********
*
**
***
****
*****
****
***
**
*
*
**
***
****
*****
****
***
**
*
*** ***
***** *****
***********
*********
*******
*****
***
*
1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
We can see that we need to run a loop for a row number of times. We need to run a loop for 5 rows in the example here. This forms the external loop.
We need to run a loop to print n numbers in each row, where n is the row number. This forms the internal loop.
In the example above, we have 5 rows. For 5 rows, we need an external loop that goes from n = 1 to n = 5 (i.e. no of rows).
For each row, we need to print numbers from num = 1 to num = n.
Example : For the 5th row, n = 5. The internal loop goes from num = 1 to num = 5. The 5th row becomes: 1 2 3 4 5
let str = "";
for (i = 1; i <= 5; i++) {
for (j = 1; j <= i; j++) {
str += j + " ";
}
str += "\n";
}
console.log(str);
1
2 2
3 3 3
4 4 4 4
5 5 5 5 5
let str = "";
for (i = 1; i <= 5; i++) {
for (j = 1; j <= i; j++) {
str += i + " ";
}
str += "\n";
}
console.log(str);
1
2 3
4 5 6
7 8 9 10
let str = "";
let sum = 1;
for (i = 1; i <= 4; i++) {
for (j = 1; j <= i; j++) {
str += sum + " ";
sum++;
}
str += "\n";
}
console.log(str);
12345
1234
123
12
1
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = 1; j <= n + 1 - i; j++) {
str += j;
}
str += "\n";
}
console.log(str);
1
123
12345
1234567
123456789
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= n - i; n++) {
str += " ";
}
for (k = 1; k <= 2 * n - 1; k++) {
str += k;
}
str += "\n";
}
console.log(str);
*****
*****
*****
*****
*****
let str = "";
for (i = 1; i <= 5; i++) {
for (j = 1; j <= 5; j++) {
str += "*";
}
str += "\n";
}
console.log(str);
*****
* *
* *
* *
*****
let str = "";
for (i = 1; i <= 5; i++) {
for (j = 1; j <= 5; j++) {
if (i == 1 || i == 5) {
str += "*";
} else {
if (j == 1 || j == 5) {
str += "*";
} else {
str += " ";
}
}
}
str += "\n";
}
console.log(str);
*
**
***
****
*****
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = 1; j <= n - i; j++) {
str += " ";
}
for (k = 1; k <= i; k++) {
str += "*";
}
str += "\n";
}
console.log(str);
*
**
***
****
*****
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= i; j++) {
str += "*";
}
str += "\n";
}
console.log(str);
*
***
*****
*******
*********
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= n - i; j++) {
str += " ";
}
for (k = 1; k <= 2 * i - 1; k++) {
str += "*";
}
str += "\n";
}
console.log(str);
54321
5432
543
54
5
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = 5; i <= j; j--) {
str += j;
}
str += "\n";
}
console.log(str);
*
**
* *
* *
* *
******
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= i; j++) {
if (j == 1 || j == i || i == n) {
str += "*";
} else {
str += " ";
}
}
str += "\n";
}
console.log(str);
*****
****
***
**
*
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = n; j >= i; j--) {
str += "*";
}
str += "\n";
}
console.log(str);
A
AA
AAA
AAAA
AAAAA
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = 1; j <= i; j++) {
str += "A";
}
str += "\n";
}
console.log(str);
AAAAA
AAAA
AAA
AA
A
let str = "";
let n = 5;
for (i = 1; i <= n; i++) {
for (j = n; j >= i; j--) {
str += "A";
}
str += "\n";
}
console.log(str);
$
$$
$$$
$$$$
%%%%%
%%%%
%%%
%%
%
let n = 9;
let str = "";
for (i = 1; i <= n; i++) {
if (i <= 4) {
for (j = 1; j <= i; j++) {
str += "$";
}
} else {
for (k = 5; k + 4 >= i; k--) {
str += "%";
}
}
str += "\n";
}
console.log(str);
AAAAA
AAAA
AAA
AA
A
B
BB
BBB
BBBB
BBBBB
let n = 11;
let str = "";
for (i = 1; i <= n; i++) {
if (i <= 5) {
for (j = 5; j >= i; j--) {
str += "A";
}
} else if (i == 6) {
str += " ";
} else {
for (k = 7; k <= i; k++) {
str += "B";
}
}
str += "\n";
}
console.log(str);
* * * * *
* * * *
* * *
* *
*
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (k = 1; k <= i - 1; k++) {
str += " ";
}
for (j = 1; j <= n + 1 - i; j++) {
str += "*";
}
str += "\n";
}
console.log(str);
* * * * *
* * * *
* * *
* *
*
let n = 5;
let str = "";
for (i = 1; i <= n; i++) {
for (j = 1; j <= n + 1 - i; j++) {
str += "*";
}
str += "\n";
}
console.log(str);
