Ajax는 js를 이용한 비동기 통신으로, 클라이언트 서버 간의 xml(Extensible Markup Language)데이터를 주고받는 기술이다. 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. Ajax 방식을 이용한 웹 API는 XMLHttpRequest 부터 시작하여 fetch를 거쳐 axios까지 다양하다. XMLHttpRequest는 복잡하고 가독성이 떨어지기 때문에 fetch api가 ES6에서부터 표준이 되었는데, 따라서 현재 fetch api는 기본 라이브러리로 따로 설치하지 않고 사용해도 된다. axios는 Node.js에서 XMLHttpRequests를 사용하기 좋게 만들어둔 api이며 따로 설치해주어야 동작한다. TOP Ajax API를 참고하면 더 많은..

ECMAScript 공부 ES5 이전 ES3 (1999) : 정규표현식, try/catch문 string string.length : 길이 속성 string.indexOf(string, [start]) : 해당 글자의 시작 index 위치 반환 string.lastIndexOf(string, [start]) : 해당 글자의 마지막 시작 index 위치 반환 string.search(string) : indexOf와 비슷하지만 정규표현식 사용 x string.slice(index, index2) : index부터 index2-1까지 자르기 음수 index는 뒤에서부터 셈 string.substring(index, index2) : slice와 비슷하지만, 음수 불가 string.substr(index, l..

html2canvas + 이미지 호스팅 *예제는 React Hook 환경에서 진행되었습니다. 결과 table을 이미지로 만들어 공유해야하는 요구사항이 있었다. 요구사항을 수행하기 위해서는 다음과 같은 과제를 순차적으로 해내야한다. html table을 이미지로 만들기 만들어진 이미지를 호스팅하기 호스팅된 이미지를 카카오톡 api를 이용하여 공유하기 차례대로 해보자. html table을 이미지로 만들기 DOM요소를 이미지로 만들 때, html2canvas라는 라이브러리가 주로 쓰인다. import html2canvas from 'html2canvas'; const copyDOM = async () => { window.scrollTo(0, 0); let url = ""; await html2canvas(..

module.exports = { 'parser': '@typescript-eslint/parser', 'plugins': ['@typescript-eslint'], 'env': { 'commonjs': true, 'browser': true, 'es2021': true, 'node' : true }, 'extends': [ 'airbnb', 'airbnb/hooks', 'plugin:@typescript-eslint/recommended' ], 'parserOptions': { 'project': './tsconfig.json', 'ecmaFeatures': { 'jsx': true, }, 'ecmaVersion': 12, 'sourceType': 'module', }, 'rules': { 'inden..

Typescript 참고 : https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html (Typescript 공식 사이트) 배우는 이유 JS에서는 Type이 계속 체크되지 않는다. 1. 이는 암묵적 형변환, hoisting, 복잡성 문제를 일으킬 수 있다. 이러한 코드 상의 예상치 못한 버그를 없애기 위해 typescript를 주로 사용한다. hoisting : 끌어올린다는 뜻. javascript에서 선언문을 끌어올려 코드에서 사용할 때 순서에 상관없이 사용 가능하도록 하는 기술. typescript는 복잡한 예외처리 코드 없이 이를 수행한다. 2. 협업 시에나 추후에 본인이 짠 코드를 보았을 때 타입이 정의되어 있지 않다면 하나..

[2021-03-04 최종 수정] 발단 KOS 프로젝트 진행 중에 상태관리 라이브러리(Redux, Mobx)를 추후 도입하기로 하고, 먼저 MVVM 패턴만 사용하기로 하였다. 하지만 기존에 나와있는 폴더 구조들은 모두 react와 Redux / Mobx 를 연동하여 만들어낸 구조들이었다. 다음은 상태관리 라이브러리를 사용하지 않고 MVVM 패턴을 구현한 사이트이다. https://github.com/davinci2015/react-mvvm-pokemon ( Class 이용 ) https://velog.io/@dlrmsghks7/whatismvvmpattern ( Hook 이용 ) 위의 사이트들에서 제안한 구조를 그림으로 나타내보자. View, View Controller, View Model, Model..

개요 YAML : YAML Ain't Markup Language 재귀를 통해 이름짓기 쿠쿠 기존에는 프로그램의 설정을 저장하고 읽는데에 xml 형식을 써왔다. 하지만 작성이 너무 귀찮아서 다른 방식을 강구하게 되었다. 정보를 저장할 수만 있다면 다른 방식도 가능하다. 그래서 나온게 json 파일 형식이다. json은 객체 형식으로 xml보다는 간편한 작성이 가능하다. 허나 더 쉽게 작성할 수 있는 형식이 바로 YAML 형식이다. YAML은 가독성이 좋아서 JSON에 비해 구조가 복잡하지만 사람이 보기에는 자연스러운 형태이다. 이에 따라 YAML은 설정 파일의 목적으로 많이 쓰이고, JSON은 설정 파일을 제외한 분야에서 모두 널리 쓰이고 있다. 이러한 파일 형식들은 상황마다 필요에 따라서 사용하면 된다..

React Hook React 공식사이트 참조 : https://ko.reactjs.org/docs/hooks-intro.html Hook 소개 Hook은 어떤 것이고 왜 나오게 되었을까? Hook이란? 우선 Hook은 React 16.8 버전에 새로 추가된 최신 기능으로, 클래스형 컴포넌트의 단점을 극복하고자 나온 함수형 컴포넌트에 대한 기능이다. Hook은 함수형 컴포넌트로도 클래스형 컴포넌트의 기능을 사용할 수 있도록 해준다. 함수형 컴포넌트란? // 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render(){ return ( //jsx ); } } export default App; // 함수형..