본문으로 건너뛰기
Eunkwang Shin

Eunkwang Shin

Owner

Full Stack JavaScript Developer | Half-time Open Sourcerer.

모든 저자 보기

Vue에서 jquery와 bootstrap 전역으로 사용하기

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

expose-loader의 설치가 필요 없는 방법을 사용해보자

Vuejs-kr에 좋은 내용이 있지만 웹팩을 통해 jquery를 꺼내는 방법이 더 간단하다.

설치​

yarn add jquery bootstrap

설정​

webpack​

build/webpack.base.conf.js
const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery",
      jQuery: "jquery",
    }),
  ],
};

eslint​

.enlintrs.js
module.exports = {
  globals: {
    $: true,
    jQuery: true,
  },
};

연동​

src/main.js
import "bootstrap";

new Vue({});

Top 명령어 단축키

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

top 명령어는 자주 치는 명령어지만 예쁘게 소팅하기란 쉽지 않다.

단축키​

단축키내용
spacebar화면 즉시 업데이트
M현재 상주 메모리 사용량에 따라 분류
T전체 누적 CPU 사용량에 따라 분류
P현재 CPU 사용량(디폴트 값)에 따라 분류
c프로세스 경로 표시
u오로지 한 사용자의 프로세스만 보여줌
f다른 종류의 통계 자료가 나타나도록 선택
?모든 top 명령에 대한 사용법의 개요를 보여준다.

/etc/passwd 파일 구조

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

구조​

로그인명:비빌번호:사용자 ID:그룹 ID:실제 유저명:홈 디렉토리:쉘

  • 예시: root❌0:0:superuser:/root:/bin/bash
  • 주석이나 공백은 허용되지 않는다.

비밀번호 필드​

  • x 표시: 암호화된 비밀번호가 /etc/shadow 파일에 저장되어 있다는 것
  • * 표시: 로그인할 수 없는 사용자
  • 공백: 로그인시 비밀번호가 필요 없음

비밀번호 변경​

  • passwd 명령어는 누구나 알지만
  • vipw 로 /etc/passwd 파일을 통째로 편집 가능

Redis Flush가 안 될 경우 전체 캐시 비우기

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

FLUSH 명령어는 보안상 empty 값으로 대체되어있는 경우가 많은데, 이 경우 전체를 비우는 명령어가 없어서 편법을 써야한다.

해결​

redis-cli -a '비밀번호' KEYS "*" | xargs redis-cli -a '비밀번호' DEL

이 명령은 모든 키 리스트를 가져와 하나씩 지워준다.

Vue multi page app에서 코드가 미리보이는 현상 제거

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

뷰에 데이터가 바인딩 되기전 {{태그}} 구문이 보일 때 다음과 같이 하면 된다.

해결​

v-cloak api에 자세하게 나와있다.

<!-- vue가 바인딩 될 영역에 v-cloak attribute를 추가한다 -->
<div id="vue_area" v-cloak></div>
[v-cloak] {
  display: none;
}

더 멋진 방법​

로딩시에 content 영역에 loading...이라는 문구를 찍어주는 방법으로 여기에 자세히 설명되어있다.

[v-cloak] > * {
  display: none;
}
[v-cloak]::before {
  content: "loading...";
}

Laravel 5.5에 JWT (Json Web Token) Auth 추가하기

· 약 3분
Eunkwang Shin
Eunkwang Shin
Owner

검색해 나온 포스트들은 5.4버전에 대해서만 나와있어서, 5.5에서는 아무짝에 쓸모가 없었다. 라라벨에서 좃인증을 시작해보자.

설치​

jwt-auth​

171103 기준으로 dev-develop 버전의 패키지를 설치해야한다.

composer require tymon/jwt-auth:1.0.0-rc.1

service provider 등록​

config/app.php
<?php

'providers' => [
  ...
  Tymon\JWTAuth\Providers\LaravelServiceProvider::class,
],

'alias' => [
  ...
  'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class
],

설정파일 publish​

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider" --force

secret key 생성​

php artisan jwt:secret

연동​

API Route 설정​

API 가드와 유저 모델을 설정하다.

config/auth.php
<?php
return [
  'defaults' => [
    'guard' => 'api', // 기본 가드를 api로 변경
    'passwords' => 'users',
  ],

  'guards' => [
    ...
    'api' => [
      'driver' => 'jwt', // api 가드를 jwt 인증을 사용
      'provider' => 'users',
    ],
  ],

  'providers' => [
    'users' => [
      'driver' => 'eloquent',
      'model' => App\Models\Member::class, // 유저 모델을 해당 모델로 변경
    ],
  ],
  ...
];

Member Model 설정​

app/Models/Member.php
<?php
...
// jwt를 모델에서 사용하기 위해 추가한다.
use Illuminate\Foundation\Auth\User as Authenticatable;
use Tymon\JWTAuth\Contracts\JWTSubject;
...

class Member extends Authenticatable implements JWTSubject
{
  // 아래 두 메소드가 구현되어야 실행된다.
  public function getJWTIdentifier() {
    return $this->getKey();
  }

  public function getJWTCustomClaims() {
    return [];
  }
}

사용하기​

login​

app/Http/MemberController.php
<?php
public function login(Request $request) {
  $credentials = $this->validate($request, [
    'id' => 'required|string',
    'password' => 'required|string'
  ]);

  if ($token = $this->guard()->attempt($credentials)) {
    return $this->respondWithToken($token);
  }

  return response()->json(['message' => 'Unauthorized'], 401);
}

protected function respondWithToken($token) {
  return response()->json([
    'access_token' => $token,
    'token_type' => 'bearer',
    'expires_in' => $this->guard()->factory()->getTTL() * 60
  ]);
}

public function guard() {
  return Auth::guard();
}

Authorized Routes​

Accept Header​

application/json 로 설정해야 오류가 예쁘게 반환된다.

token 태우기​

## header 이용한 방법
Authorization: Bearer yourtokens...

## Querystring으로도 인증 가능
https://gracefullight.github.io/me?token=yourtokens...

routes​

routes/api.php
Route::group(['middleware' => 'auth:api'], function() {
  Route::get('member/logout', 'MemberController@logout');
  Route::get('member/me', 'MemberController@me');
});

logout​

app/Http/MemberController.php
<?php
public function logout(Request $request) {
  $this->guard()->logout();
  return response(null, 204);
}

refresh​

refresh는 auth:api 미들웨어 없이 처리되어야한다.

app/Http/MemberController.php
<?php
public function refresh() {
  return $this->respondWithToken($this->guard()->refresh());
}

여담​

Expired거나 Unauthoriezed경우 status code로 체크하면 된다. 5.5버전 메뉴얼이 부족하다.

Docker jenkins 설치시 permission 오류

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

run시에 젠킨스가 올라가지 않고 /var/jenkins/home에 파일 퍼미션 오류가 발생할 때 다음과 같이 해결하면 된다.

해결​

마운트한 볼륨에 1000 유저 권한을 준다. (jenkins의 uid는 1000) docker hub에 나와있는 내용이긴 한다.

chown 1000 {볼륨 경로}

AWS Cli S3 파일 업로드

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

웹 상에서 파일을 업로드할 때 md5 checksum 오류가 발생해 파일이 전체가 다 안 올라가는 경우도 있고, 세션이 만료되 올라가는 도중에 끊기기도 하는 것 같다.

업로드 방법​

업로드 할 bucket 의 이름을 조회한다.

aws s3 ls

앞이 복사할 폴더이고 뒤가 파일이 복사될 s3 bucket 경로이다.

aws s3 cp ./ s3://{bucket_name}/{path}/ --recursive --exclude "*.mp4" --acl public-read

mp4 를 제외한 폴더의 모든 하위 파일들을 public-read 권한으로 업로드했다.

옵션 확인​

cli docs에서 디테일한 옵션은 확인 가능하다.