Moving to Vue from React, it was a bit difficult for me to understand the Vue way of coding. I didn’t get much time to go too deep with all the new concepts due to the timeframe to finish the project during an internship, but as I study and write codes in Vue, I learned about v-model that can be useful for writing codes efficiently. It was a little confusing (still is) to understand the concept, so this is to organize my thoughts about the concept ofv-model .

When I want to listen to a change event of inputs and…


It has been only a few weeks studying Vue JS and the transition from studying React to Vue was a little bit confusing, because of some of the concepts were new to me. Especially, I wasn’t quite sure about when to use computed or methods. Reading an official document is always helpful, but I personally find it hard to get a clear picture of concepts by reading the document for the first time before trying it myself. So, I feel it is important to do a combination of trying it yourself and reading the document.

computed: {
scaleSize() {…


If you are using Vue.js for the very first time, we can start by installing Vue CLI. Vue CLI is a standard tooling for Vue.js development.

In your terminal, you can install by:

npm install -g @vue/cli

-g means global, which means you want to install Vue CLI on your whole device, not only in the specific location. Once you installed it, you can always create a new Vue project by:

vue create my-project

my-project is for your project’s name. Once you enter the command, you will be prompted to pick a preset. You can choose default setting or manually…


Whoa, two months at WeCode are already gone! I can’t believe time flies so fast. As for the final month at WeCode bootcamp, students have a choice of internship and team projects. I chose an internship as I thought it would be a great opportunity to gain some experiences in the field.

I started my internship at Medistream with one of my back-end classmates from the last Monday. It is a startup company where provides various services including social networking, e-commerce, education, specifically for oriental medicine doctors and students. …


Starting the project

Can’t believe my second project at WeCode has finished already! The last 2 weeks have been pretty crazy, lots and lots of fun and learning. This is to share my journey with the second team project.

My second project is to clone one of the most popular recruiting platforms in Korea, Wanted. We came up with our team project name and logo, <GetWanted/>, which shows that we chose to make a recruiting website for developers particularly. There are six members in the team including me, three for front-end and back-end each.

Although it is a clone project, our goal is…


This post is about how to create an outside click handler in React using createRef(). There are hooks that you can install to achieve this, but I wanted to try figure out myself. The feature that I created is:

As you can see above, when the search input is clicked, the placeholder, search icon is moved to the left and the cancel icon appears. When the outside of the input is clicked, they go back to the initial position and the cancel icon disappears. Let’s look at the codes below:

class Header extends Component {
constructor() {
super();
this.state = {
searchInput…

Doing a small exercise creating monster cards using React components and map method, I thought to write about how to create a function of filtering search results by keywords. It let me use various methods like filter() and map() to create the filter that we use everywhere on the web.

The search results filter looks like the above. I would enter the keywords of the monster’s name, and any monster’s name that includes the keywords entered would be filtered and appear.

Each monster’s data such as name, picture, email, and more are in the JSON file which I fetched and…


Let’s say we finished building a layout for a login page with necessary functions and it is ready to send login data to the server and get a response for authentication and authorization. If the login information is correct, it can proceed to the main page, or it can alert a message that the login information needs to be checked again. I had the first time to work with a back-end classmate to realize this process.

<form className=”login-form”>
<input
className=”login-info”
onChange={this.handleIdInput}
id=”id”
type=”text”…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store