똑같은 삽질은 2번 하지 말자

개요 이펙티브 타입스크립트라는 책을 읽고 장별(각각의 장안에 아이템별)로 학습한 내용 정리하기 이 책의 목표: 독자에게 타입스크립트나 자바스크립트를 가르치는 것이 아니라, 초급자나 중급자가 전문가로 발전할 수 있게 돕는 것 프로그래밍에서 어떤 방법을 가르치는게 아니라 어떤 방법을 사용할 때 왜 그래야 하는지를 알려준다. 2장 타입스크립트의 타입 시스템 Item6. 편집기를 사용하여 타입 시스템 탐색하기 우리가 typescript라는 패키지를 설치하면 두가지를 할 수 있는데, 타입스크립트 파일을 자바스크립트로 컴파일하는 tsc를 쓸 수 있다. 단독으로 실행할 수 있는 타입스크립트 서버(tsserver)를 쓸 수 있다. 여기서 타입스크립트 서버란 우리가 사용하는 편집기(VSCode)에서 코드 자동완성, 명세..

개요 여러가지 유용할 듯한 친구들을 기록해두자 1. window width를 반응적으로 캐치해주는 플러그인 import { reactive } from '@nuxtjs/composition-api' export default ({ app }, inject) => { const $window = reactive({ width: 0, }) if (process.browser) { const onResize = () => { $window.width = window.innerWidth } global.addEventListener('resize', onResize) onResize() } inject('window', $window) } 2. 모바일인지 판단해주는 플러그인 import { isMobile } ..

보호되어 있는 글입니다.

개요 React JS 를 공부하면서 기본을 정리해두고자 작성 useReducer? 좀 더 복잡한 state의 관리가 필요할 때 사용되어지는 훅 useReducer 구성요소 state, dispatch, action and reducer function dispatch를 이용해 action을 작동시키고 어떤 action을 취할지는 action의 type or 본인이 원하는대로 reducer function 안에 구별자를 넣어서 구성해 주면 된다. 즉 state의 상태변화는 dispatch -> action -> state변경 순서로 이루어진다. usage import { useEffect, useReducer } from "react"; const DUMMY_DATA = [ { id: "e1", title..

보호되어 있는 글입니다.

개요 협력을 위한 lint나 test를 git hooks과 연결시켜서 자동화를 구현해보자. Git hooks? git hooks는 말 그대로 git의 hook이다. 여기서 hook? 이라는 개념에 대해서 간략하게 언급하자면 소프트웨어 구성 요소 간에 전달되는 함수 호출 이나 메시지 또는 이벤트를 가로채서 구성 요소 의 동작을 변경하거나 확대하는데 사용되는 다양한 기술을 포함합니다. 가로채는 함수 호출, 이벤트 또는 메시지를 처리하는 코드를 hook 라고 합니다. husky? husky는 개발 환경에서 Git hook을 사용하기 편리하게 만들어주는 도구이다. 우선 husky 공식 홈페이지를 참조하며 순서대로 해보자 Husky - Git hooks typicode.github.io npm install hu..

개요 React JS 를 공부하면서 기본을 정리해두고자 작성 React의 effect? side effect? 이 의미를 정의하기 전에 우리가 생각하는 React의 "주 업무"는 무엇일까? 바로 화면에 우리가 만든 UI를 렌더링하고 사용자의 입력에 반응하여 필요할 때 다시 UI를 렌더링 하는것이다. 이를 위해 state를 만들고 props를 받고 이벤트 핸들러를 등록했었는데 그 모든 것은 화면에 "무언가"를 그리고 그 "무언가"하고 유저가 상호작용 할 수 있게 만드는게 리액트의 "주 업무" 였다. 그럼 "리액트의 Side Effects"의 의미를 알 수 있는데 이 "주 업무"이외의 모든것을 뜻한다. 예를 들면 http request나 local Storage에 데이터를 저장한다거나 타이머를 건다거나..등..

보호되어 있는 글입니다.

개요 React JS 를 공부하면서 기본을 정리해두고자 작성 Portal 화면을 만들어나감에 있어 모달같은 UI도 필요한 상황이 있을건데 보통 모달은 모달이 필요한 컴포넌트에서 모달의 상태를 관리해야 하기 때문에 해당 컴포넌트에서 모달을 렌더링하는 경우가 있다. 하지만 모달은 HTML구조상 하위 태그에 있다고 하기 보다는 제일 상위태그들과 같은 계층에 두어야 좀더 올바르다고 말할 수 있다. 그런 상황일때 portal을 이용하면 된다. usage index.html ErrorModal.js import React from 'react'; import ReactDOM from 'react-dom'; import Card from './Card'; import Button from './Button'; imp..

개요 Options API에서 Composition API에 마이그레이션 하는중.. vuex는 어떻게 써야할까? 를 고민하는중에 배웠거나 느꼈던 점들에 대해 적어보고자 한다. 이전번의 포스트에서 vuex-module-decorators로 만들었는데 이번엔 다른 방식으로 해볼려고한다. https://heewon26.tistory.com/378 Composition API를 쓸 때 Vuex는? 개요 Options API에서 Composition API에 마이그레이션 하는중.. vuex는 어떻게 써야할까? 를 고민하는중에 배웠거나 느꼈던 점들에 대해 적어보고자 한다. 헷갈렸던 개념 내가 지금 바꾸려는 환경은 nuxt heewon26.tistory.com 프로젝트 구조 hoge라는 namespace로 모듈이 생..