소소해서 소중한 일상

폼(Form) React form(공식문서) HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에,(= 인풋에 value를 따로 주지 않아도 그 자체로 입력된 값을 알고 있음) React의 다른 DOM 엘리먼트와 다르게 동작한다. 순수한 HTML에서 이 폼은 name을 입력받는다. 제어 컴포넌트 (Controlled Component) class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; // value는 빈값 this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubm..

이벤트(Event) React 이벤트 처리하기(공식문서) https://ko.reactjs.org/docs/handling-events.html 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 엘리먼트에서 이벤트 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. React의 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. //HTML Active Lasers //React Activate Lasers 카멜 케이스 방식으로 만든다.(onClick) 브레이스를({}) 이용해 자바스크립트 함수 자..

Composition component 안에서 component를 모아서 출력하는 것 composition(합성) vs inheritance(상속) 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있다 범용적인 ‘박스’ 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다 function FancyBorder(props) { return {props.children}; } 이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있음 function WelcomeDialog(..

Memoization 메모이제이션 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동인한 계산의 반복 수행의 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. // App.js import "./App.css"; import Memo from "./components/3-8.Memoization/Memo"; function App() { return ( ); } export default App; // Memo.jsx import React, { useState } from "react"; import Comments from "./Comments"; const commentList = [ { title: "comment1", content: ..

DOM 다루기 / Element 생성하기 정리 CodeSandBox : 리액트 맛보기 동안 사용할 도구 Vanilla js Dom : W3Schools / createElement CDN : unpkg React / React-dom : element 생성 / appendChild JSX 와 Babel / JSX 다루기 JSX: React.createElement 표현식 Babel: JavaScript Complier JSX 다루기: spread 연산자 멀티 Element 생성하기 Fragment: React.Frament or Element 찍어내기 Founction: 재사용이 가능한 Element Custom Element: Upper case Children 제한: 없음 JS 와 JSX 섞어쓰기 I..

Webpack 설치하기 npm i -D webpack webpack-cli webpack-dev-server@next "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" } // 변경 webpack.config.js file 생성 entry, output // import const path = require("path"); // export module.exports = { // parcel index.html // 파일을 읽어들이기 시작하는 진입점 설정 entry: "./js/main.js", // 결과물(번들)을 반환하는 설정 output: { // path: path.reso..

Generics, Any 와 차이점 function helloString(message: string): string { return message; } function helloNumber(message: number): number { return message; } // 더 많은 반복된 함수들 function hello(message: any): any { return message; } console.log(hello("soo").length); console.log(hello(31).length); function helloGeneric(message: T): T { return message; } Generics Basic function helloBasic(message: T, comment..

Interfaces function hello1(person: { name: string; age: number }): void { console.log(`안녕하세요 ${person.name}입니다.`); } const p1: { name: string; age: number } = { name: "Mark", age: 39, }; hello1(p1); // { name: string; age: number } 대신 interface Person1 { name: string; age: number; } function hello1(person: Person1): void { console.log(`안녕하세요 ${person.name}입니다.`); } const p1: Person1 = { name: "M..

TypeScript 란 무엇인가 https://www.typescriptlang.org/ TypeScript is JavaScript with syntax for types. By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code Any brower, any OS, anywhere Javascript runs. Entirely Open Source. 타입스크립트는 'Programming Language 언어' 입니다. 타입스크립트는 'Compiled Language' 입니다. 전통적인 Compiled Language 와는 다른 점이 많습니다. 그래서 'Transp..

JS 데이터 MDN 문자 String: 전역 객체는 문자열(문자의 나열)의 생성자입니다. 자주 사용되는 Methods String.prototype.indexOf() indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 - 1을 반환합니다. const result = "Hello world!".indexOf("world"); const result2 = "Hello world!".indexOf("huisu"); console.log(result); // 6 console.log(result2); // -1 length() 메소드는 문자열의 길이를 측정하여 숫자로 반환한다 const str = "01 23"; console.log(..