본문 바로가기

javascript50

[JavaScript] Function Function in JS is objects. Especially, first-class objects. The function is an important thing to understand JS. Function Definition There are 4 ways to define function. Function Definition Statement This is a statement, so it can be located in any place where there can be a statement. function adder(x, y) { return x + y; } Since ambiguity occurs by function hoisting, it is not recommended. cons.. 2022. 6. 25.
[JavaScript] Control Flow Statements Conditional Statements if ... else statement JS's if/else statement is similar to other programming languages. if (conditions_1) { statements_1 } else if (conditions_2) { statements_2 } else { statements_last } If the conditions_1 is true, the statements_1 is executed, and if the conditions_1 is false and conditions_2 is true, the statements_2 is executed. Lastly, all conditions are false, the s.. 2022. 6. 22.
[JavaScript] Operators The operators of JS are not much different from other languages. Assignment Operators Assignment: = Addition assignment: += Subtraction assignment: -= Exponentiation assignment: **= Multiplication assignment: *= Division assignment: /= Remainder assignment: %= Left shift assignment: = Unsigned right shift assignment: >>>= Bitwise AND assignment: &= Bitwise XOR assignment: ^= Bitwise OR assignmen.. 2022. 6. 21.
[JavaScript] Data Types JS is a dynamic typing language, i.e. the data type of a variable is inferred by its value. In other words, variables don't have a type, but values have a type. JS has several primitive data types and an object type. However, I will explain it from the point of the developer. If a data types are not a primitive type, it is an object type. All primitive types are immutable. Let's find out about t.. 2022. 6. 19.
[JavaScript] Variable There are two types of variables in JS. One is a mutable type and the other is an immutable type. And, we use var, let, and const keywords for defining a variable. Mutable Variable We use the var and let keyword for defining mutable variables. In the past, we used var, but now, we usually use let because var has issues like scope and hoisting. let mutable_var = 'I am a mutable variable.'; consol.. 2022. 6. 18.
[JavaScript] console object The console object provides access to the browser's debugging console. The console object can be accessed from any global object. Methods console.assert() This method writes an error message to the console if the assertion is false. If the assertion is true, nothing happens. for (let i = 0; i < 4; i++) { console.assert(i % 2 == 0, `The number ${i} is not an even number.`); } console.clear() This.. 2021. 12. 6.
[Vue3] Getting Started with Vue3 + Electron (with Typescript, TailwindCSS) Let's make a desktop application using Vue3. Create a Project using Vue-CLI $ vue create vue-electron Select "Manually select features" for some options. I picked TypeScript, Router, and Vuex. I will use Vue3. And, I will use ESLint with Prettier. Lastly, I will use dedicated config files for easier management. $ cd vue-electron Now, we have our project. Adding Electron Now, let's add Electron t.. 2021. 6. 28.
[Vue3] Vuex Usage Vuex is a library that helps create centralized repositories to manage data and state. Create a Project Let's create a project for vuex. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Installing Vuex $ vue add vuex You just type this command if you want to use vuex. You can also set it in the create a project stage. Creating Store The store is a react.. 2021. 6. 26.
[Vue3] Mixins Mixin is a method of implementing functions separately and combining mixin files into components whenever necessary. Create a Project 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Let's create a project to start to learn Mixin. Create Mixins mixins/mixin.ts export default { methods: { $callMixin(name: string): string { return `Hello, ${name}`; }, }, .. 2021. 6. 26.
[Vue3] Composition API Composition API is a function-based API added to Vue3. Let's take a look at this what is this. Create a Project 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS First of all, create a project for testing our example. Traditional Methods Let's create an adder component in the traditional way. components/composition_api.vue Traditional Method + = {{ resul.. 2021. 6. 25.
[vue3] Plugins Vue3 has a plugin feature. Let's learn about this. Create a Project Create a project for a plugin example. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Creating Plugins Let's create a plugin file. plugins/vending.ts import { Plugin } from "vue"; export const vendingPlugin: Plugin = { install(app, options?) { app.config.globalProperties.$pick = (key:.. 2021. 6. 25.
[Vue3] Custom Directives Vue3 allows that user defines their own directives. Create a Project Let's create a project first. 2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS Create Own Directives in Global Creating a global custom directive uses directive method. main.ts const app = createApp(App) app.directive("focus", { mounted: (el) => el.focus(), }); app.mount("#app"); We cr.. 2021. 6. 24.