본문 바로가기

Language & Library31

[TypeScript] 재귀적인 타입 선언 (recursive type) 아래와 같은 재귀적인 데이터 구조를 원했다. const data = [ { label: '기본', value: 'basic' }, { label: '시간', sub: [ { label: '월별', value: 'month' }, { label: '주별', value: 'week' }, { label: '일별', value: 'day' }, ], }, { label: '지역', sub: [ { label: '시별', value: 'si' }, { label: '군/구별', value: 'gun-go' }, { label: '동별', value: 'dong' }, ], }, { label: '유형', value: 'kind' }, ] 이러한 재귀적인 구조에는 아래와 같이 type을 선언해주면 된다. type.. 2020. 12. 10.
[MS-WSUSSS] SOAP Request 앱을 통한 서비스 사용 예제 SOAP API 테스트 환경 준비 본 예제는 Google 확장 앱 중 Boomerang API 라는 Tool을 중심으로 작성되었습니다. Google 확장 앱 설치 링크 : 바로가기 SOAP(Simple Object Access Protocol)는 http 프로토콜으로 XML 기반의 메세지를 주고 받는 프로토콜 입니다. http 요청이 가능하고 SOAP 프로토콜에 대한 이해가 있으면 어떤 Tool에서도 테스트 가능합니다. MS-WSUSSS 프로토콜 실습 예제 프로토콜 사용 Example 참고 링크 : 바로가기 해당 문서에서의 설명은 주요 파라미터만 설명 예정이다. 자세한 내용은 각 Method의 공식 문서를 참조 용어 사전 : 바로가기 Requirement 서비스 명설명서비스 링크 Server Sync W.. 2020. 9. 13.
React의 Virtual DOM(VDOM)과 Diffing 알고리즘 DOM 이란? DOM은 The Document Object Model의 약어로 직역하자면 문서 객체 모델 입니다. 즉, DOM은 HTML을 객체로 표현한 것이며 외부(JavaScript)와 접속할 인터페이스 입니다. html로 작성된 코드는 HTML 파서에 의해서 DOM이라는 객체가 모인 트리로 변환 됩니다. (DOM 트리) Virtual DOM 이란? React 공식 홈페이지에서 Virtual DOM은 아래와 같이 표한하고 있습니다. "UI로 표현될 객체를 가상 메모리에 저장하고 라이브러리에 의해 실제 DOM으로 동기화 하는 개념" 여기서 UI로 표현될 객체는 DOM을 말하며 라이브러리는 VDOM을 랜더링해주는 ReactDOM같은 것을 말합니다. * 참고 : 바로가기 Virtual DOM의 이점 Rea.. 2020. 9. 9.
[JavaScript] Vanilla JS로 React 만들기 시작하기 전에... Vanilla JS로 Virtual DOM을 랜더링 하는 간단한 유사 React를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 글을 보기 전에 Virtual DOM, JSX에 대한 개념을 익히고 읽기를 권장 합니다. 기본 React App 만들기 우측의 결과를 가져오는 React Example App을 작성하였습니다. (github commit 바로가기) JS로 우측 앱을 React의 Virtual DOM을 구현하면서 출력하는 프로그램을 작성해 보겠습니다. React Virtual DOM 분석 위 사진은 React Component를 console.log로 출력한 결과 입니다. 해당 결과를 기반으로 virtualD.. 2020. 9. 9.
[JavaScript] Vanilla JS로 상태 관리 모듈(redux) 만들기 개요 Vanilla JS로 hot한 상태 관리 모듈 redux를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 해당 문서에는 redux의 기본 패턴인 Flux 패턴에 대한 기본적인 개념이 있어야 합니다. 본문 기본 Store 생성 함수 만들기 상태를 관리하는 객체 store를 만들어 줍니다. redux.js에서 기본 store 생성 함수 정의 Reducer 만들기 & Reducer를 통한 상태 업데이트 reducer는 상태를 업데이트 해주는 주최 입니다. dispatch는 store의 상태를 업데이트 하는 주최 입니다. 상태 값의 구독자 등록 함수 & 출판 함수 만들기 subscribe 함수는 상태 값이 업데이트되면 수신할 객체를 등록.. 2020. 9. 4.
[C/C++] Devtoolset으로 최신 컴파일러 적용 방법 제약 조건 CentOS 6 이상 환경 설치 방법 # 1. centos-release-scl 설치 yum --enablerepo=extras install centos-release-scl # 2. 업데이트 yum update # 3. devtoolset-7 설치 yum install -y devtoolset-7 # 4. scl 실행 scl enable devtoolset-7 bash 최신 컴파일러로 전환 # 명시적으로 devtoolset-7 적용 (devtoolset 하위 버전도 적용 가능) source /opt/rh/devtoolset-7/enable Shell 접속 시 자동으로 최신 컴파일러 적용 방법 echo -e "source /opt/rh/devtoolset-7/enable" >> ~/.bashrc 2020. 9. 4.
[PHP] 확장 모듈 빌드 방법 (PHP Extension Module) 사전 제약 조건 PHP가 다운로드 되어있다고 가정 PHP 소스 파일 다운로드 https://www.php.net/downloads 빌드 및 설치 # 디렉토리 이동 {php 빌드 소스 디렉토리}/ext/zip # 설정 파일 준비 (다른 경로 일 수 있음) /usr/local/bin/phpize # 빌드 설정 및 예시 ./configure --with-php-config={php-config 파일 경로} ./configure --with-php-config=/usr/local/bin/php-config # 설치 make && make install # 설치된 링크 확인하여 php.ini 추가 extension=/usr/local/lib/php/extensions/no-debug-non-zts-20090626.. 2020. 9. 4.
[JavaScript] Safari에서 iPad 판단 하는 방법 (UserAgent, Navigator) 이 글로 버그 잡았으면 !!!! 댓글 하트 구독 박으세요 어서 보통 JavaScript에서 접속한 단말의 종류(ex. 데스크탑, 모바일)를 판단하는데 UserAgent라는 값을 참고함. 아니 근데 이런 양아치 애플님들이 작년부터 iPad의 데스크톱화를 말하면서 Safari에서 Mac Desktop 모델들과 같은 UserAgent 값을 보내주기 시작했다. 위와 같이 Google Chrome 착한 친구들은 브라우저에서 알아서 iPad인지 판단해서 User Agent 값을 넣어주더라... iPad Pro's UserAgent by Chrome iPad: CPU OS 13_6 like Mac OS X MacBook Pro's UserAgent by Chrome Macintosh, Intel Mac OS X 10.. 2020. 8. 21.
[JavaScript] clearTimeout / setTimeout 함수와 Singleton 패턴을 이용한 딜레이 함수 구현 개요 JavaScript의 setTimeout 함수를 이용하면 N초 뒤에 callback 함수를 실행 시킬 수 있다. 그런데 이때 기존에 실행된 callback 함수를 취소하고 다시 실행 시키고 싶을때는 어찌해야될까? 아래 예제는 clearTimeout / setTimeout 함수를 이용해서 singleton 패턴으로 중복 없는 delayed callback 함수의 예제이다. 본문 추가적으로 테스트 함수와 사용예제를 추가한 github 링크이다. https://github.com/minemanemo/js-example/tree/master/delayed-function 2020. 8. 21.
"Parsing error: Unexpected token =eslint" 에러 CRA(create-react-app)의 package.json 설정으로 해결 증상 ESLint에서 구문 체크 중 "Parsing error: Unexpected token =eslint" 에러 발생 원인 ESLint가 ES6 ~ 7 파싱할때 위와 같은 문제가 발생할 수 있음. 조치 방법 eslint의 default parser는 Espree 입니다. (Espress는 ES6가 안정화되기 전에 Esprima의 마지막 안정판인 Esprima v1.2.2를 포크해서 시작됨) [https://eslint.org/docs/user-guide/configuring] 따라서 파서를 babel-eslint로 바꿔주면 됩니다. (1) babel-eslint 설치 및 세팅 https://roomedia.tistory.com/entry/%EC%9D%B4%EC%8A%88-9-Parsing-error-.. 2020. 8. 10.
[create-react-app] 다른 host에서 접근하기 (0.0.0.0) node_modules/react-scripts/sripts/start.js를 살펴보면 아래와 같이 되어있어야한다. 예전 버전 create-react-app에는 요런게 없다. JS 문법으로다가 환경 변수 체크해서 없으면 '0.0.0.0' 으로 들어감 근데 요게 예전에는 localhost가 박혀 있었음. (https://github.com/facebook/create-react-app/pull/128/commits/55b93b4002562ccf8fbd6d4034db9bd9a2162a4c) 적용된 create-react-app 버전은 귀찮아서 안찾아봤고 아래와 같이 .env 파일에 HOST 환경 변수를 추가해주면 다른 호스트에서도 접근 가능하다. HOST=0.0.0.0 2020. 5. 18.
create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (3) webpack config 설정하기 const path = require('path'); module.exports = { mode: 'development', // 'production' devtool: 'eval', // hidden-source-map resolve: { extensions: ['.js', '.jsx'], }, // 타겟이 되는 파일 entry: { app: './client', }, // load 할 모듈 module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: { browsers: ['> 1% in KR', 'last 2 chrome.. 2020. 3. 10.

티스토리툴바