본문 바로가기

전체 글

 (47)
Typescript 배우기 2(타입종류) // index.ts // string let car: string = 'bmw'; // number let age: number = 30; // boolean let isAdult: boolean = true; // Array let a: number[] = [1, 2, 3]; let a2: Array = [1, 2, 3]; let week1: string[] = ['mon', 'tue', 'wed']; let week2: Array = ['mon', 'tue', 'wed']; console.log(age, isAdult, a, a2, week1, week2); // 튜플 Tuple let b: [string, number]; b = ['z', 1]; // b = [1, 'z']; error b[0]...
Redux 복습하기 with 생활코딩 3 리덕스는 리액트에서 컨포넌트가 많아지고 복잡해지면서 생기는 복잡한 prop를 관리하기 위한 라이브러리/패턴이다. 리덕스를 사용하면 액션시 스토어가 포함된 컨포넌트만 재랜더링 되기 때문에 퍼포먼스면에서 더 효율적이다. createSrote를 사용하는 과정에서 Reduxjs/toolkit을 권장하고 있기에 밑줄이 계속 발생했다. 아직은 createStore을 사용할 수 있으나, toolkit을 설치 후 configureStore를 사용하거나 legacy_createStore as createStore로 사용해야 함. import * as React from 'react'; import './style.css'; import { legacy_createStore as createStore } from 'red..
Redux 복습 with 공식문서 2 아..튜토리얼이 영어인데 이게 모바일에서 그런지는 모르겠다. 아이패드만 갖고 카페에 온 상황에 타자 치는거는 너무 중노동이니 그냥 영어로 발췌하는 점 양해바람. Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion. Redux helps you manage ..
Redux 복습 with 공식문서 1 Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다. 여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작지만(의존 라이브러리 포함 2kB), 사용 가능한 애드온은 매우 많습니다. 기본 예제 여러분의 앱의 상태 전부는 하나의 저장소(store)안에 있는 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(reduce..
Micro-Frontends 구현 Run-Time Bundle Intergrations S-spa or Webpack -> Webpack 5 Module Federation를 활용 webpack이 처리할 수 있는 모든 형태를 Federate할 수 있다. Any JacaScript Runtiomes(잠재능력) https://www.youtube.com/watch?v=0Eq6evGKJ68&t=32s
Webpack 셋팅하기 2 css 설치 $ npm i -D style-loader css-loader // webpack.config.js const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry : './src/index.js', output : { filename : "main.js", path : path.resolve(__dirname, "dist"), }, // 추가내용 module : { reles : [{ test : /\.css$/, use : ["style-loader", "css-loader"], // use의 배열은 뒤에서부터 적용됨 }] }, plugins : [ n..
Webpack 셋팅하기 1 Webpack 설치 $ npm init -y $ npm install webpack webpack-cli --save-dev webpack.config.js 파일을 생성 // webpack.config.js const path = require("path"); // 노드에서 제공하는 패스모드 활용 module.exports = { entry : './src/index.js', // 시작파일 output : { // 만들어지는 최종파일을 내보내는 옵션 filename : "main.js", path : path.resolve(__dirname, "dist"), // 폴드 현재경로 하위 -> 폴더명 }, } package.json에서 빌드 모드 추가해주기 // package.json "scripts": { ..
TypeScript 배우기 1 왜 타입스크립트를 배우는가? JavaScript는 동적언어로 런타임에 타입이 결정되며 오류를 발견하다. 반면 Java, TypeScript는 정적언어로 컴파일 타임에 타입이 결정되고 오류를 발견한다. 해서 오류를 확인하기 위해 끊임없이 console.log를 찍어보아야하는 자바스크립트의 단점을 보안하기 위해 타입스크립트를 사용한다. 코딩앙마의 TypeScript 모든 프로그래밍 언어에 장단점이 있듯이 자바스크립트도 언어가 잘 정제되기 이전에 서둘러 출시된 문제와 과거 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 좋은 점도, 나쁜 점도 많은 것이 사실이다. 자바스크립트는 C나 Java와 같은 언어와는 구별되는 특성이 있다. Prototype-based Object Ori..
728x90

티스토리툴바