DEV Community: Wonjin Cho

React-Redux Terminology

Wonjin Cho — Mon, 19 Jul 2021 17:40:55 +0000

Learning new languages always requires to learn new terminology which are usually very strange.
When we are talking about especially on React and Redux, a lot of new terminologies are involved. I hope this articles my help you to get some basic knowledges of strange definitions. These are my notes and brief summary of the React and Redux when I've built my last project of the Flatiron school.

*** Redux vs React***
We are utilizing Redux, our redux store is handling a lot of the data manipulation and communication with our api; whereas, our React application should be mainly for just to display our data.

ACTION CREATOR:
A function that creates an action

ACTION:
An object that contains information about how we want to change some data within our central state

action: {
type: [describes what change we want to make to our data],
payload: [context of what change we want to make]
}

DISPATCH:
A function that takes in an action, makes copies of the action, and sends them out to the reducers.

REDUCER:
A function that takes in an action and some existing data, changes the data according to the type and payload of the action, and then sends the updated data to the state.

STATE:
An object that serves as the central repository of all data from the reducers.

React-Redux
With React-Redux, we use some components and functions to tie React and Redux together: Store, Provider, and Connect.

STORE:
The Store contains the consolidated reducers and the state.

PROVIDER:
The Provider is a component that has a reference to the Store and provides the data from the Store to the component it wraps.

CONNECT:
Connect is a function communicates with the Provider. Whatever component we wrap with Connect, that component will be able to get changes in the Store state from the Provider.

We can configure Connect to get just the part of the data we want from the Provider. Connect passes this down as props into the wrapped components.

The flow with react-redux looks like this:

Create the Provider
Pass it a reference to our Redux Store
Wrap any component that needs to interact with the Store with Connect
Connect passes down the different pieces of state and any action creators we need as props down to the wrapped component.

Configuring connect
Connect takes in several arguments, but we will only be concerned with the first two: mapStateToProps and mapDispatchToProps.

*Extracting data with mapStateToProps*
mapStateToProps is essentially extracting just the pieces of the state you want into your component as props. It is important to note that when you specify a function for this argument, you are subscribing the component to changes in that part of the state. If the component does not need to re-render based on changes in the state, you can pass in null or undefined as the argument instead.

*Dispatching actions with mapDispatchToProps*
mapDispatchToProps can be defined as an object of action creators (there's Redux magic behind the scenes but this is a nice shorthand) and binds the dispatch of the store to each of the action creators. This allows you to use the actions creators through props in the component as you would by passing down functional props from the parent without Redux.

Project #4 : Vanilla JS Frontend with RoR API backend

Wonjin Cho — Sun, 20 Jun 2021 17:32:56 +0000

Intro

My fourth project for Flatiron School was building a Single Page Application(SPA) using Javascript as a frontend and Rails API as a backend.

Project Description

As always, for this time again, my 3 years old son gave me another idea what my project would be. It might be a little bit childish;however, I named my project "Dinosaur Flash Card" which will show the dinosaurs as cards and using CSS, flipping those cards to show the user to have brief details of the selected dinosaurs.

Backend Setup

I added two model since "MesozoicEra" and "Dinosaur" with a relationship of has_many and belongs_to relatively.
After migration and seeding data, by using rails scaffold for both models, backend was easily set up without having trouble.

Frontend challenges

There were many difficulties and challenges when I worked on this project. Altering codes from Index.js file to each model folder's file in order to make my code DRY was the basic challenge;however, the most important part was understanding what JS code looked like since I am totally new in this city.
For this project, 'fetching' and using 'addEventListner' method were the most useful method I had to use for several times.

Fetching

I used 5 fetching method; render all dions, render all eras, render dinos by era, POST(creating a dino), DELETE dino.
For this post, I would like to introduce how I fetched all dinosaurs and made them displayed on the webpage.

class API {
    static ALL_DINOSAURS_URL = "http://localhost:3000/dinosaurs"

   static addDinosaurs() {
        fetch(this.ALL_DINOSAURS_URL)
        .then(response => response.json())
        .then(dinosaurs => {
              dinosaurs.forEach(dinosaur => {
              const newDinosaur = new Dinosaur(dinosaur)
              newDinosaur.renderDinosaur(dinosaur)     
              Dinosaur.all.push(newDinosaur)
              })
        }) 
    }
}

Above code is the way how I fetched all dinosaurs as a class.
In services folder, I've created API.js file and added API class to make my code as DRY as I could. Since this is just fetching process, I needed to add the below codes to actually display all dinosaurs on the web page.

document.addEventListener("DOMContentLoaded", function() {
  API.addDinosaurs() };

I called 'addDinosaurs' function and invoked it to Index.js file with "DOMContentLaded" event listener so that it finally rendered and displayed all dinosaurs from the backend to the front.

Summary

Throughout this basic fetching process, I felt much comfortable playing with Javascript. As a beginner of JS, all methods and functions do not look familiar just like when I learned RUBY as a first computer language. By practicing this simple fetching method and repeating those process to fetch other backend data, I finally ended up having better confidence than the beginning of this project.

Rails Project - Rate My Hairstylist

Wonjin Cho — Sun, 16 May 2021 08:27:04 +0000

Project Idea

For my third project, I decided to build rating and reviewing web application.

Relationship

I created 3 models; User, UserStylist, Stylist.
User will have many stylists and Stylist will have many User through user_stylists. UserStylist(which will be review/rating model) model will be a join of User and Stylist. It belongs to user and stylists.

Data Migration

By using rails g resource function, it was really easy to create migrations. Since this project requires omniauth log in function, I've added "uid" and "provider" as user's attributes. I'll user Google omniauth login for my project.

Rested routes

Here are all the routes for this web application.

There is a nested route for user_stylist. For example, "user/3/user_stylists/46" will be the review details page which is a show page of this user's review.

A nested new route with form will be following.

scope method

Rather than using native Ruby method, this time, I've added two scope method; Most Reviewed hairstylists and High-rated reviews.

Those are my code for the two scope method. First one shows top 5 most reviewed hair stylists name. The second code is for rating scope that means each hairstylist has their reviews with star rating and by using that star attribute, I defined scope method to show only 5 stars reviews.

Conclusion

By having the 'resources' keyword, rails sets up every 'RESTful' route associated with that model. The routes magic were the one that really shined for me. I had struggled a lot dealing with all of Rails server errors to get promptly worked this application; however, each time, I've learned more than one error since one error causes usually another error.

Sinatra app basics - all you need to know before building up your project

Wonjin Cho — Fri, 16 Apr 2021 02:14:51 +0000

Building a Sinatra web application

From this blog posting, I am going to write down some basic key words and definitions to build a CRUD application using Sinatra.

Sinatra

Sinatra is Domain Specific Language implemented in Ruby to build web applications. By using methods like , for instance, "get" and "post", it will instantly transform Ruby application into an application that can respond to HTTP requests.

ORM/ActiveRecord

Object Relational Mapping :to map (or equate) ruby classes with database tables and the instances of those classes with the rows of the table.
ActiveRecord : a Ruby library that connects classes to relational SQL Databases. Essentially ActiveRecord is an ORM that helps to deal with databases.

Rack

a simple interface sits between web frameworks (Sinatra, Rails, etc) and web server

MVC

Models: The 'logic' of a web application where data is manipulated and/or saved.
Views: The 'front-end' web application - this is the only part of the app that the user interacts with directly. Views generally consist of HTML, CSS, and Javascript.
Controllers: The go-between for models and views. The controller relays data from the browser to the application, and from the application to the browser.

naming conventions for an MVC folder structure

erb

.erb file: contains HTML tags and embedded ruby(erb) tags(work with Ruby code); file names, by convention, should match with the action that renders them

controllers

will contain all the necessary routes to help the user sign-in/sign-out, sign-up, and CRUD user's data from the web.

Application Controller

Application Controller represents an instance of the web application when server is running; it is where configurations, routes and controller actions are implements; other controllers use it as an inheritance point to inherit all the defaults and behavior defined in ApplicationController (which inherits from Sinatra::Base)

Database Migrations

by creating tables and schema by using "rake db:migrate" in db/migrate folder, SQLite is usable with seeds data.

shotgun

a ruby Gem to test Rack-based Ruby web application and start Rack with auto code reloading

7 RESTful routes

Sinatra and ActiveRecord CRUD
CRUD
an acronym for Create, Read, Update, and Delete, these are the four basic functions of persistent storage.

Create is implemented in Sinatra by building a route, or controller action, to render a form for creating a new instance of your model.
get '/models/new' -> new.erb -> post '/models'
Read read either all of the instances of a class or a specific instance of a class
get '/models' -> index.erb (to render all of the instances stored in the @models instance variable)
get '/models/:id' -> show.erb (to find the instance of the model with that id number and set it equal to an instance variable: @model = Model.find(params[:id]))
Update To implement the update action, we need a controller action that renders an update form, and we need a controller action to catch the post request sent by that form
Add "use Rack::MethodOverride" line in "config.ru" file to use the Sinatra Middleware that lets our app send patch requests
get '/models/:id/edit' -> edit.erb -> patch '/models/:id'
Delete does not get into its own view page but is implemented via a "delete" button on the show page of given instance
get '/models/:id -> show.erb -> post '/models/:id/delete'

bcrypt gem

It will store a salted and hashed version of our user's passwords(not a plain text version of password) in our database in a column called "password_digest"

has_secure_password

Active Record macro method that works in conjunction with 'bcrypt' gem. It encrypts the plain text version of the password and comes with .authenticate method to see the match of the salted and hashed password from the database.

Session vs cookie

Cookies and Sessions are used to store information. Cookies are only stored on the client-side machine, while sessions get stored on the client as well as a server.

Session

server-side use case for temporarily persisting data while a user browsers the server’s website. Session hash lives on server and web application can access session via any of the controllers at any point in time.

Cookies

Text files stored on the client computer. Server sends a set of cookies to the browser; name, age, or ids etc. The browser stores this information on a local machine and when next time browser sends any request to web server, then it sends those cookies information to the server and server uses that information to identify the user.

Rendering

Rendering allows us to pass instance variables through to the erb file. Rendering a file displays the view without submitting an additional request to the server.

Redirecting

It actually sends a new request to the server. For this reason, Since HTTP is a stateless protocol, we are not able to pass instance variables through a redirect, as those variables no longer exist once new request has been made.

helper method

Helper methods is defined in the controller and can access to the views. It will help not only whether a user is logged in and who the current user is, but also make our code DRY.

rack::methodoverride

The only HTTP methods that HTML form element should allow are "GET" and "POST". For this reason, Rack::MethodOverride is required in order for forms to have a "_method", allowing PUT, PATCH and DELETE actions to function. Don't forget to add the "use Rack::MethodOverride" to 'config.ru' file so that the application will know how to handle patch and delete requests. Put "use Rack::MethodOverride" above "run application_controller" so that the override method works properly throughout the app.

Sinatra app basics - all you need to know before building up your project

Wonjin Cho — Thu, 18 Feb 2021 05:58:59 +0000

Building a Sinatra web application

From this blog posting, I am going to write down some basic key words and definitions to build a CRUD application using Sinatra.

Sinatra

ORM/ActiveRecord

Rack

a simple interface sits between web frameworks (Sinatra, Rails, etc) and web server

MVC

naming conventions for an MVC folder structure

erb

.erb file: contains HTML tags and embedded ruby(erb) tags(work with Ruby code); file names, by convention, should match with the action that renders them

controllers

will contain all the necessary routes to help the user sign-in/sign-out, sign-up, and CRUD user's data from the web.

Application Controller

Database Migrations

by creating tables and schema by using "rake db:migrate" in db/migrate folder, SQLite is usable with seeds data.

shotgun

a ruby Gem to test Rack-based Ruby web application and start Rack with auto code reloading

7 RESTful routes

Sinatra and ActiveRecord CRUD
CRUD
an acronym for Create, Read, Update, and Delete, these are the four basic functions of persistent storage.

bcrypt gem

It will store a salted and hashed version of our user's passwords(not a plain text version of password) in our database in a column called "password_digest"

has_secure_password

Session vs cookie

Cookies and Sessions are used to store information. Cookies are only stored on the client-side machine, while sessions get stored on the client as well as a server.

Session

Cookies

Rendering

Rendering allows us to pass instance variables through to the erb file. Rendering a file displays the view without submitting an additional request to the server.

Redirecting

helper method

Helper methods is defined in the controller and can access to the views. It will help not only whether a user is logged in and who the current user is, but also make our code DRY.

rack::methodoverride

First Project : Build a CLI app with External Data

Wonjin Cho — Thu, 14 Jan 2021 15:24:19 +0000

My first application ever before.Half success, half failure. But It was a precious project where I could learn a lot.

Brief introduction of the application:

The CLI application I built for the first project at Flatiron is a very simple app that can list the menu of Dunkin' donut's espresso and coffee. By scraping the list of menu from the website, user can see more details about the menu chosen.

How I scrape the data?

require 'nokogiri'
require 'open-uri'
URL = open("https://www.webpage")
doc = Nokogiri::HTML(open(URL))
doc.css("class").
puts doc

By this way, I could get messy data that is difficult to read. The problem has begun here. I misjudged the data and I believed I could scrape the text I want. Without analyzing the data in details, I started to code my project, enjoyed CLI time for several days. The problem occurred at last. There were data not "scrapable". All 'Ingredients', 'calories' and 'Allergens' text data were unable to scrape. I struggle with scraping the data for several days because it seemed like just normal text data. What i learned a few days later was that it happened because the web page used 'JavaScript' for the certain data: which I needed.

I have not learnt JavaScript yet so I had to minimize and simplify my project finish up on time. As I mentioned before, there was actually a bigger plan than what this application I coded shows now. I should have scraped the data and see the details of it very carefully before I start to code.

For this project, scraping external data might give more sources to build various applications. However, since the way 'scraping' has certain risk, for instance, each website may have different designs and use different languages with special styles, it will affect the application and someday the app will be no longer useful.

So, next time? Definitely APIs rather than scraping web data.

What I learned from the first project

creating/ editing ruby project files using gems.
Coding CLI class method and testing by bin/filename and binding.pry
The use of web scraping and what risk it has. Also why programmers are more likely to use APIs
How to use github

git status => if I want to check the status
git add . = > add file
git commit -am "any commit message" => to save my changes to the local repository.
-a
Includes all currently changed files in this commit
-m
Sets the commit's message
git push => to upload local repository content to a my github repo

Why am I studying Software Engineering?

Wonjin Cho — Sat, 19 Dec 2020 22:54:32 +0000

When I worked for an airlines in Korea, I participated in numerous projects. One of the biggest projects was data migration from old system to new ERP. At that time, I had to spend a lot of time with software engineers as a financial analyst.

My first motive has started there. They, the engineers, were always pursuing "efficiency". I was the one trying to tell them all the very and the finest details. However, they just collected only the most important parts of my words and transferred as data. Efficiency, conciseness and obviousness; every time when I worked, these were the first words that had come to my mind and that engineers were always dealing with those words.

The second motive has started from a little personal. Here, I want to be a little honest. During the data migration project, I had to go to work on weekends as well; however, the engineers were alway at home! I felt so lonely and envious of them. They were working remotely and socializing each other.

There are a lot of reason why I decided to change my career and to study a new field 'software engineering'. I have a three years old son and he is always the one who gives me the most powerful motivation. Whenever I carefully look at him, he makes me want to live a life just like as he lives now: Learning everyday new things, meeting and socializing with new people everyday, and for the last, being a creative painter(engineer).