DEV Community: Hyunjin Cho

Aug 03rd, 2022

Hyunjin Cho — Wed, 03 Aug 2022 18:46:45 +0000

reacthook helps function component to use lifecycle and state.

useEffect and useCallback are two examples of reacthook.

useEffect

useEffect must be practiced after a page rendering.
useEffect must be practiced after the linked state is updated.

There are some ways to use this useEffect

useEffect(() => {})

useEffect(() => {}, [])

const [name, setName] = useState('hyun') useEffect(()=>, [name])

The first one is the most basic.
but because there is no dependency (the second parameter in other ways), this useEffect will be practiced any time.

The second one is practiced only once after the page rendering.

The third one is practiced after the page rendering and when the state, that is, dependency(name) is updated.

clean-up

useEffect(() =>{ console.log('mount') return () => { console.log('unmount')} }, [])

return ~ ('unmount')} returns function for clean-up

when mounting,
sending props to local state, request API, using library, setInterval, setTimeout....

when unmounting,
clearing the registered work(clearInterval, clearTimeout)...

April 5th, 2022

Hyunjin Cho — Tue, 05 Apr 2022 21:22:10 +0000

inside JavaScript,

*function *

function test() {}

also function can be value. That is, the function for the object's property is called method

objectA = { B : function() {} }

Method is a function for the object's property
Function is a function itself.

Function includes method.
Function is independent from object while a method is not.
Method can access the data inside the class/object

Property and Method

Object is a case made of properties

property is made of key-value pair

if value is function, we call that as method.
key is an identifier for identifying a property

const person = { name = 'hyunjin', say = function (){console.log('hi')} }

name = property, say = method

the main who practice method is the object
the main who practice function is the function itself.

April 5th, 2022

Hyunjin Cho — Tue, 05 Apr 2022 20:59:41 +0000

*CORS *
Cross-Origin Resource Sharing

a HTTP header based mechanism used when requesting resource to another origin from an origin

origin : like address for server

https://google.com:80

protocol : https://
host : google.com
port : :80

the system that compare origins is activated under browser. That is, when the server receives the request from another origin, the server sends response unless there is a restriction that the server will take request from same origin. Then, browser will compare the response whether CORS is violated or not.

browser : https://hyunin.com
server : https://server.com

send request to server
send response to the browser
the browser check if the origin is different or not. If different, the response is thrown.

Because of that, this CORS does not work between server communication.

Working of CORS

when requesting resources from another origin, the application-browser- use HTTP protocol and the request header includes Origin with value

Origin: https://hyunjin.com

then when the server send response, the response header includes Access-Control-Allow-Origin with allowed value. The browser will compare ACAO and request origin

1. when requesting preflight

preflight means the pre-request before actual request for checking if it is safe to send request. For this, OPTIONS method is used.

browser send pre-request(OPTIONS/resources - Origin:https://hyunjin.com) to the server
the server send response(200 ok Access-Control-Allow-Origin: *) to the browser.
browser send actual request to the server
the server send response

more specifically,
In preflight,
there are origin, Access-Control-Request-headers, Access-Control-Request-Method
In the response to the preflight,
there are Access-Control-Allow-Origin

2. simple request

No preflight and others are same

the condition for this,

the request method should be one of GET, HEAD, POST
only Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width should be used
when content-type, application/x-www-form-urlencoded, multipart/form-data, text/plain

resource: https://evan-moon.github.io/2020/05/21/about-cors/

March 21, 2022

Hyunjin Cho — Fri, 01 Apr 2022 04:37:35 +0000

absolute vs relative

absolute - px
relative - %, v*, em, rem

(16px is the pixel that the browser provides default)

em
1em = 16px

for example,
parent > child

.parent{
font-size: 8em;
}

.child{
font-size: 0.5em;
}

parent font size - 16px * 8 = 128px
child font size - 128px(parent font size) * 0.5 = 64px

rem
root em

root = html

parent > child

.parent{
font-size: 8rem;
}

.child{
font-size: 0.5rem;
}

parent font size - 16px * 8 = 128px
child font size - 16px * 0.5 = 8px

March 31th, 2022

Hyunjin Cho — Thu, 31 Mar 2022 22:20:50 +0000

React Hook - useEffect

can be used in component life cycle.. (mount, unmount, update...)
After the page is rendering, the useEffect must be run once.
When the dependencies that set in the array, the useEffect is run.

useEffect(()=>{})
useEffect(()=>{}, [])
useEffect(()=>{}, [dependency])

1 -> basic, but not used usually. no dependency, loading anytime
2 -> After the page rendering, the useEffect has be used only once.
3 -> After the page rendering, the useEffect has run one time and run again when the dependency (value in the array) is changed.

What to do in useEffect

useEffect(() => {
console.log('mount')
return () => {
console.log('unmount)}
, []}

1st param = function
2nd param = dependency array

return part is clean up part

when mount,

set props to state
request API
use library
iteration with setInterval
work with setTimeOut

when unmount,

clean the registered work(clearInterval, clearTimeout)
clean the library instance

When not setting props that are used in useEffect to dependency array, the function in useEffect cannot point out the latest props.

React Hook - useCallback

reuse the already created function

When defining the function like the before, the function is created every time the rendering.

const onRemove = id => {
setUsers(users.filter(user => user.id !== id));
};

const onRemove = useCallback(id =>{
setUsers(users.filter(user => user.id !== id));
}, [users])

[PWA] Useful website

Hyunjin Cho — Wed, 22 Dec 2021 21:48:40 +0000

The step...

Host my application using github or ngrok https://ngrok.com/ (for running the exe file, i used powershell)
Go to this website: https://www.pwabuilder.com/ it will check my application is enough for PWA
It will show my application is not enough 3-1. Create manifest.json and service worker using that website 3-2. Also recommend this: https://manifest-gen.netlify.app/ 3-3. The netlify is better when creating manifest.json file.
Downloading a new package from https://www.pwabuilder.com/ after being done of creating needed files and move to my application folder.
Following this step: https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/next-steps.md
and test it again and it will show my application is enough for PWA

[Android Studio] Duplicate value

Hyunjin Cho — Sat, 04 Dec 2021 23:22:47 +0000

Three arrayList:
Two for ArrayList - will take information of movie
One for ArrayList - will take movie id of the movie

Add all movie information object from database to reviewedArrayList(ArrayList)
While looping the reviewedArrayList, check if the movieIDArrayList(ArrayList) contains the movie id. When it does not have it, add it to movieIDArrayList and add the information object containing the movie id to newList(ArrayList) and if not, skip it.
Give newList which does not have duplicated value(movie id) to somewhere that I want to use.

  public void onDataChange(@NonNull DataSnapshot snapshot) {
                reviewedArrayList = new ArrayList<>();
                movieIDArrayList = new ArrayList<>();
                newList = new ArrayList<>();
                for(DataSnapshot childSnapshot: snapshot.getChildren()){
                    Playlist playlist = childSnapshot.getValue(Playlist.class);
                    reviewedArrayList.add(playlist);

                    for(int i=0; i < reviewedArrayList.size(); i++){
                        String mID = reviewedArrayList.get(i).mID;
                        if(!movieIDArrayList.contains(mID)){
                            movieIDArrayList.add(mID);
                            newList.add(reviewedArrayList.get(i));
                        }
                    }

                }

[Python] TypeError 'module' object is not callable in Python

Hyunjin Cho — Thu, 02 Dec 2021 21:42:31 +0000

'module' object is not callable

-> when module name and class name are confused, this error raised

For example,

I have DBCM class inside dbcm.py and import DBCM class like this,

import dbcm

# do something with dbcm
with dbcm(slef.db_name, sql):
 .....

It will raise that typeerror.

How to solve it,

Be clear which one is module and which one is class

from dbcm import DBCM as db_cm

with db_cm(self.db_name, sql):
 ....

Modified by Keoni Garner - Thank you!:

from dbcm import DBCM

with DBCM(self.db_name, sql):
 ....

Resource: https://www.stechies.com/typeerror-module-object-is-not-callable/

Android Studio/Firebase(1)

Hyunjin Cho — Thu, 25 Nov 2021 21:30:57 +0000

Structure
root

-- Comments

-- movidID

-- commentID

-- Playlist

-- userID

-- playlistID

//rootNode
FirebaseDatabase rootNode = FirebaseDatabase.getInstance();
//reference
DatabaseReference reference;

// When adding one movie to the playlist

reference = rootNode.getReference("Playlist").child(userID).push();

Playlist playlist = new Playlist(id, userID, img_path, playRef.getKey());

reference .setValue(playlist).addOnSuccessListener(new OnSuccessListener<Void>() {
                @Override
                public void onSuccess(Void unused) {
                    // work of button for adding and removing
                    btn_playlist.setVisibility(View.INVISIBLE);
                    btn_playlist.setEnabled(false);
                    btn_remove.setVisibility(View.VISIBLE);
                    btn_remove.setEnabled(true);
                }
            })

// When removing one movie from the playlist

DatabaseReference playcheckref = rootNode.getReference().child("Playlist").child(userID);

playcheckref.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {
                for(DataSnapshot dataSnapshot : snapshot.getChildren()) {

// if there is the clicked movie in the list                   if(Objects.requireNonNull(dataSnapshot.getValue(Playlist.class)).getmID().equals(id)){
                        btn_playlist.setVisibility(View.INVISIBLE);
                        btn_playlist.setEnabled(false);
                        btn_remove.setVisibility(View.VISIBLE);
                        btn_remove.setEnabled(true);

// grab the playlist movie id
                        String vID = Objects.requireNonNull(dataSnapshot.getValue(Playlist.class)).getvID();
                        btn_remove.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                btn_playlist.setVisibility(View.VISIBLE);
                                btn_playlist.setEnabled(true);
                                btn_remove.setVisibility(View.INVISIBLE);
                                btn_remove.setEnabled(false);

                                DatabaseReference removeRef = rootNode.getReference("Playlist").child(userID).child(vID);
                                removeRef.setValue(null);

                                Toast.makeText(MovieDetail.this, "Successfully deleted" + Objects.requireNonNull(dataSnapshot.getValue(Playlist.class)).getvID(), Toast.LENGTH_SHORT).show();
                            }
                        });

                    } else{
                        btn_playlist.setOnClickListener(addMovieToList);
                    }
                }
            }