본문 바로가기

전체 글346

[TypeScript] Basic Types TypeScript gives us some data types and it helps us a lot. Boolean It has a true/false value. let isSuccess: boolean = true; Number let binary: number = 0b0111; let octal: number = 0o765; let decimal: number = 7; let hex: number = 0xcafe; let big: bigint = 1234n; If you want to use bigint, you need to use ES2020 or later. String let familyName: string = 'kim' let givenName: string = "hoya" let m.. 2021. 7. 4.
[Python3] typing module We can use a type in Python3. It is not enforced like other strong typed languages, but it can help us. It can be a communication tool with other developers and can prevent mistakes. Syntax The default syntax is like this. # def func_name(param: param_type) -> return_type # func_body def say_hello(name: str) -> str: return f"Hello {name}" Python3 supports bool, int, str, tuple, set, list, and di.. 2021. 7. 3.
[Python] Decorator Decorator allows you to dynamically add actions to a function or object without changing the behavior of the function or object. In Python, Decorator can be applied to a function and executed before and after the surrounding function. Simple Example This example changes the input string to the upper case. def to_upper_case(func): text = func() if not isinstance(text, str): raise TypeError("Not a.. 2021. 6. 29.
[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.