전체 글338 [Babel] Getting Started Babel is a JS compiler or transpiler. It compiles the newer JS to old JS for supporting many browsers. Because there is a lot of browsers that do not support the newer JS. Babel can work with many bundlers or frameworks. In this posting, let's find out the basic usage of Babel. Installation Create a new project for practicing Babel. And then, install babel packages inside the project folder. $ y.. 2020. 9. 10. [Pug] Getting Started Pug is a template engine that helps develop HTML like a programming language. Installation I'm using yarn, but if you use npm, it also works. $ yarn add -D pug Pug is usually used with other bundlers or frameworks. But in this posting, I'll use Pug directly. So, let's install one more package. $ yarn add -D pug-cli This package allows me to use a Pug in the terminal. Create Template for HTML Let.. 2020. 9. 9. [CSS] SASS/SCSS SASS is a Syntactically Awesome Style Sheets. It makes CSS to a programming language. SCSS is a Sassy CSS. Currently, the SCSS's syntax is mainly used. Although there are other projects with similar functions, SCSS is recently a trend to use as a standard. In this posting, I will explain the usage of the SCSS. I'll post how to compile SCSS and use it in the projects next time. You can use it in .. 2020. 9. 6. [CSS] Gridbox Grid layout enables an author to align elements into columns and rows. Sometimes flexbox is hard to construct the layout we want. If you use a gridbox, you can easily make a layout like a table. Let's make a default code. 1 2 3 4 5 .container { width: 600px; height: 600px; border: 3px solid black; display: grid; } .box { width: 100px; height: 100px; font-size: 30px; display: flex; justify-conten.. 2020. 9. 3. [HTML] Emmet Emmet is a web-developer's toolkit that can greatly improve HTML and CSS workflow. Most of the editors already have the Emmet plug-in. I'm using the VSCode, and it has this feature. So, we don't need anything. Just enjoy it! Note Before explaining emmet syntax, let me explain a few things first. If you input the Emmet syntax, the VSCode will notice it to you. You have to press or key at this tim.. 2020. 9. 2. [React] useState Hooks Overview useState Hooks is used when managing a state value of React component. State value can be understood as something like a local variable of React component. Therefore, even if the same component is used, the internal state value is managed separately for each component. const [value, setValue] = useState(initialValue); The syntax is like the above code. The useState Hooks returns state v.. 2020. 9. 2. [React] prop-types prop-types is the official react tool, runtime type checking for React props and similar objects. But, I think if you need this feature, TypeScript is a better choice. Installation You can install prop-types through yarn or npm. $ yarn add -D prop-types $ npm i -D prop-types Usage Example prop-types helps to improve readability and ease maintenance by clearly setting the information of type as t.. 2020. 9. 2. [JavaScript] Object Destructuring Object destructuring is a grammar in which multiple properties of an object can be easily assigned as variables. Unordered Assignment const obj = { width: 20, height: 30 }; const { height, width } = obj; console.log(`width: ${width}, height: ${height}`); //=> Result // width: 20, height: 30 Aliasing const obj = { width: 20, height: 30 }; const { width: w, height: h } = obj; console.log(`width: $.. 2020. 9. 2. [JavaScript] Array Destructuring Array destructuring is a grammar in which multiple values of an array can be easily assigned as variables. Ordered Assignment const arr = [1, 2]; const [a, b] = arr; console.log(`a: ${a}, b: ${b}`); //=> Result // a: 1, b: 2 Default Value const arr = [1]; const [a = 10, b = 20] = arr; console.log(`a: ${a}, b: ${b}`); //=> Result // a: 1, b: 20 The arr has one element, but it tries to assign two .. 2020. 9. 2. 이전 1 ··· 32 33 34 35 36 37 38 다음
