Software Engineer Ethan

ES6 module 시스템이 등장하며 Typescript Namespace 가 현격히 줄어들었지면 Typescript가  ES6 module 등장전에 어떻게 Typescript 코드 재사용을 이루었는지 이해하기 위해 알아보았다.

사용법

먼저 아래와 같은 폴더구조를 가진다고 하자. 

- base-component.ts

- input-component.ts

- utils.ts

base-component.ts 코드

namespace App {
	export abstract class Component { }
}

utils.ts 코드

namespace CommonUtils {
	export class StringUtils { }
}

위의 코드를 보면 Component 클래스는 같은 네임스페이스안에 Util 클래스는 다른 네임스페이스 안에 설정된것을 볼수 있다.

* 참고로 같은 Namespace에 선언되어있더라도 다른파일에서 사용하기 위해서는 내보내는 변수, 클래스, 함수등에 export 키워드를 붙여줘야한다

input-component.ts 코드

/// <reference path="base-component.ts" />
/// <reference path="utils.ts" />

namespace App {

   // 같은 네임스페이스내에 선언된 클래스 사용
   class InputComponent extends Component { }
   
   // 다른 내임스페이스에 선언된 클래스 사용
   CommonUtils.StringUtils.method();
}

사용법은 간단한데 /// <reference path="모듈위치.ts" />

이렇게만 하고 Typescript 기본설정으로 하면 파일들이 제각기 따로 생성되기때문에 각각의 파일들을 따로 불러오지 않는 이상 브라우저에서는 사용할수 없다. 그런 경우애 편의를 위해 한파일로 된 파일을 생성할수 있는데 tsconfig.json 에 outFile 옵션을 활성화 한다. outFile 옵션은 amd 혹은 system 모듈일 경우에만 선택가능하니 용도에 맞게 선택한다

{
    "outFile": "./dist/bundle.js",
    "module": "amd"
}

그리고 HTML 파일에서는 아래 한파일만 불러오면 된다

<script src="dist/bundle.js"></script>

Namespace 의 단점

1. 의존성들이 불러오지 않더라도 오류 메세지를 발생시키지 않고 정상적으로 Javascript 로 Transpile 하는 경우가 생긴다. 이점은 규모가 큰 프론트 엔드 프로젝트가 될수록 치명적 단점으로 작용한다. 

그렇다면 Namespace 와 Modules 중에 어떤것을 선택해서 선택해야 될까? 이점은 Typescript 팀에서 명확히 가이드 라인을 제시해주었는데 아래 공식문서에 따르면 모던 코드들에 대해 ES Module 을 사용할 것을 권장하고 있다.

It is also worth noting that, for Node.js applications, modules are the default and we recommended modules over namespaces in modern code.

운영환경에서 장애가 발생시에 서버내로 직접 접속해서 어플리케이션 로그를 확인해야하는 경우가 생긴다. 물론 정상적인(?) 환경이라면 이미 ELK Stack 같은 Log management tool 이미 설치되어 거기에서 애플리케이션 로그를 확인하면된다. 하지만 간혹해서 서버에 직접 접속하여 로그를 확인하는 경우가 생기는데 그런경우에 유용한툴이 multitail 소개하고자한다.

보통 다중서버에서 애플리케이션 로그를 확인시에 아래와 같은 과정을 거친다

1. ssh sever1

2. tail -f <로그파일 위치> 

다중 터미널 띄어놓고 서버 별로 1, 2번과정 무한반복

이러한 과정을 한번에 해결하는 툴이 multitail 이다. 명령어는 아래와 같다

multitail -l "ssh server1 tail -f 로그 파일 위치위치" -l "ssh server2 tail -f 로그 파일 위치위치"

추가 서버가있을때마다 -l 을 추가해서 계속해서 연결해 주면 된다.

로컬내에서 서로 다른 파일을 확인하고자 하는 경우에는 더 간단한데 아래와 같이 설정해주면된다

multitail 로그파일위치1 로그파일위치2

리눅스 시스템 운영하는 경우에 간혹 서버의 하드웨어 용량 사용량을 수동으로 체크하는 경우가 생기는데 (물론 이에 대해 Monitoring 툴을 설치해서 특정 용량이상이 넘거나면 자동으로 경고메세지를 설정하는게 가장좋다) 가끔 사용하기에 잊어먹는 명령어들을 저장한다.

1. 시스템내 Mount (or 파티션) 별로 용량 보기

df -h

2. 현재 있는 폴더 및 하위 폴더내 파일들 크기

du -h

VCS (Version Control System) 은 과거부터 소스코드 관리를 위해 자주 사용하는 툴이다.

그중 VCS 의 한갈래중 하나인 DVCS (Distributed Version Control System) 에서 가장 대중적으로 사용하는 Git 에서 가장 자주 사용하는 커맨드들을 따로 성리했다

1. git commit --amend

바로 이전 커밋 메세지를 수정하는 경우에 사용

2. git rebase <target_branch>

현재 브랜치를 타켓 브랜치 위로 이동하기 위한 명령어

3. git rebase -i <starting_point>

어느 특정순간부터 현재 커밋시점까지의 GIt 커밋 기록을 수정하고 싶을떄 사용

4. git config --global rerere.enabled true

통일 프로젝트에서 여러 팀원들이 동시에 작업하는 경우에 mergre conflict 가 발생하는 경우가 있다. 이 옵션을 키면 과거에 conflict 를 해결하는 결과물을 git 에서 기억하고 같은 conflict 에 대해 동일하게 적용하여 반복해서 같은 conflict 를 해결해야하는 상황을 피하게 해준다 

Laravel 에서 xdebug 를 통해 디버깅하는 과정을 알아본다.

0. PHP 설치

brew install php71

1. Xdebug 설치 

brew install homebrew/php/<php-version>-xdebug 에서 <php-versino>을 자기에 맞는 php 버전으로 치환 아래는 예제

brew install homebrew/php/php71-xdebug

2. Xdebug 설정 변경하기

맥에서의 위치: /usr/local/etc/php/7.1/conf.d

3. phpstorm run configuraiton 추가

- run configuration 에 들어간후 아래와 같이 PhpWeb Application 을 추가한다

- severs 옆버튼인 ...을 클릭해서 서버를 추가해준다

- + 버튼을 클릭하여 서버를 추가해주고

Host부분을 디버깅하고자 하는 주소를 입력한다

* 주의사항

Use path mappings 를 체크해제한다

Ok를 눌러 돌아온다

4. Phpstorm 의 설정부분에서 Php항목의 Debug 항목을 선택 DBGp Proxy 부분을 아래 스크린샷과 같이 변경. 

IDE key와 Port는 위 Xdebug설정에 맞춰서 입력해주면 된다. 자기 입맛에 맞게 커스터마이즈 하면된다

5. 실제 디버깅하고 싶은 곳에 브레이크 포인트를 설정하고 Debug 버튼을 클릭하면 아래 화면과 같이 해당하는 곳에서 디버거가 멈춰져 있는 것을 확인 가능하다. 

참조: 

1. https://laravel-news.com/xdebug-phpstorm-valet

PHP 프로젝트를 이용할떄 Composr 를 이용해서 본인이 사용한 작성한 클래스를 불러와 사용하는 방법에 대해 서술한다. 

절차:

0. composer 설치및 composer init

1. PSR-4 표준에 맞는 폴더구조로 클래스파일과 함께 생성 (이때 네임스페이스에 주의한다)  

2. composer.json 에 폴더 연결 

"autoload": {
    "classmap": [
        "database"
    ],
    "psr-4": {
        "App\\": "app/"
    }
},
"autoload-dev": {
    "classmap": [
        "tests/TestCase.php",
        "tests/PassportTestCase.php"
    ],
    "psr-4": {
        "Tests\\": "tests/"
    }
},

3. composer auto-dumpload 를 하면 클래스 위치들을 맵핑해주는 파일이 자동 생성된다.

4. 클래스를 사용하고자 하는 파일에서 autoload.php 파일 로드

** 주의점:

1. 클래스명과 파일명이 일치

2.한파일에는 클래스 하나만 존재

예제 파일구조를 본다

src

autoload.php

index.php

Users

User.php

UserDetail.php

index.php 에서 사용하자하면

require("./autoload.php")

- User.php 

<?php namespace Users;

class User { }

- UserDetail.php 

<?php namespace Users;

class UserDetail { }

- index.php

<?php

use Users\User;

$user = new User();

ES5.1

var myobj = (function () {

    // private members

    var name = "my, oh my";

    // implement the public part

    return {

        getName: function () {

            return name;

        }

    };

}());

myobj.getName(); // "my, oh my"



메모리 아끼는법 

function Gadget() {

    // private member

    var name = 'iPod';

    // public function

    this.getName = function () {

        return name;

    };

}

Gadget.prototype = (function () {

    // private member

    var browser = "Mobile Webkit";

    // public prototype members

    return {

        getBrowser: function () {

            return browser;

        }

    };

}());

ES6 

class Gadget {

var name = 'iPod'

getName() {

return name; 

}



static getBrowser() {

  var browser = "Mobile Webkit";

  return browser;

  }

}

ES2021+

class Gadget {

  #name = 'iPod'

  getName() {

  return name; 

  }
}

참조: 

http://www.2ality.com/2016/01/private-data-classes.html

3.x 버전대가 2016년 12월을 기준으로 종료된다기에 기존 3.2.9 버전의 스프링에서 4.x 버전대로 마이그레이션을 시도하였다.

다행히도 기존 진행하는 프로젝트에서 3.x 

Pom.xml 에서 주의해서 

       <properties>
            <java-version>1.8</java-version>
            <org.springframework-version>4.3.5.RELEASE</org.springframework-version>
            <org.springframework-security-version>4.2.0.RELEASE</org.springframework-security-version>
        </properties>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.1</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <!-- MappingJacksonJsonView -->
<!--         <dependency> -->
<!--             <groupId>org.codehaus.jackson</groupId> -->
<!--             <artifactId>jackson-mapper-asl</artifactId> -->
<!--             <version>1.9.13</version> -->
<!--         </dependency> -->
         
<!--         <dependency> -->
<!--             <groupId>org.codehaus.jackson</groupId> -->
<!--             <artifactId>jackson-core-asl</artifactId> -->
<!--             <version>1.9.13</version> -->
<!--         </dependency> -->

다른 Configuration  파일들도 schemaLocation 부분에 수정을 해주었다. xxx-3.0.xsd 로 로된부분을

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:mybatis="http://mybatis.org/schema/mybatis-spring"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
    					http://www.springframework.org/schema/beans/spring-beans.xsd
                        http://www.springframework.org/schema/context 
                        http://www.springframework.org/schema/context/spring-context-3.0.xsd">
        
</beans>

자동으로 인식하도록 숫자부분을 아래와 같이 변경했다.

http://www.springframework.org/schema/context/spring-context.xsd

resources 부분도 아래와 같이 변경했다.

<mvc:resources location="/public/" mapping="public/**"/>
<mvc:resources location="/css/" mapping="css/**"/>
<mvc:resources location="/images/" mapping="images/**"/>
<mvc:resources location="/js/" mapping="js/**"/>

JacksonJsonView를 사용하지 않기때문에 주석처리하였다 사용하기 위해서는 2버전을 사용해야한다.

<!--     <bean id="jsonView" class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" />          -->

이렇게 하여 마이그레이션이 완료되었다.

마이그레이션은 프로젝트 마다 케이스바이 케이스기 떄문에 스프링버전에 의존하는 라이브러리가 없나 살펴보아야한다.

더 자세한 마이그레이션 관련은 아래에 링크된 스프링 공식홈페이지의 깃허브를 참조한다. 

참조:

1. https://github.com/spring-projects/spring-framework/wiki/Migrating-from-earlier-versions-of-the-spring-framework

파이썬 디버깅시 유용하게 사용하는 Ipdb로 디버깅하는 도중 루프안에 같혀 강제 종료해야할 경우 

아래 혹은

import sys
sys.exit()

아래의 방법으로 시도한다 (2.7과 3.5 버전의 경우 현재 확인결과 아래 방법으로 작동되었다)

import os
os._exit(0)

본래 서버 개발자이지만 이번에 양기종 앱을 개발할일이 생겨 하이브리드 어플리케이션을 개발하였는데 앱스토어 관련 삽질을 많이 하게되었다.

최초 앱을 업로드하고 앱스토에 업데이트 버전을 올릴때 주의할점을 이야기해본다. 

처음 업데이트된 Binary 버전을 업데이트하고 앱스토어에서 추가로 업데이트된 버전에 대해 설정을 해주어야했다

기존 안드로이드 구글 플레이스토어처럼 업로드만 하면 자동으로 될거란 생각에 기다리가다가 업데이트가 되지 않길래 

확인해보았더니 아래 화면의 빨간영역의 버튼과 같이 버전추가를 Xcode에서 바이너리 코드 업로드후수동으로 해주어야했다. 

저와같이 처음 앱을 개발하는 분들은 이런삽질을 안하길 바라며 블로깅한다.