[Windows] USB 3.0 연결 확인 방법

다른 방법보다 이게 제일 확실한 것 같다.

https://www.aida64.com/downloads 에서 AIDA64를 설치한다.

설치 후 실행 화면에서 아래와 같이 “장치” 아래의 “USB 장치”를 선택한다.

그럼 그 오른쪽에 연결된 장치들이 쭉 나타난다. 3.0인지 확인하고 싶은 디바이스를 선택한다. 오른쪽 아래의 현재 속도에 보면 High (2.0) 인지, 혹은 3.0 장치인데 2.0 허브에 물렸는지, 혹은 Super (3.0) 으로 잘 연결되어 있는지가 나타난다.

[Linux] fstab의 구조와 옵션

fstab이란?

fstab은 Linux 시스템의 file system table을 뜻한다. mount를 쉽게 하기 위한 configuration table이다.

fstab의 구조

6개의 항목이 순서대로 구성되어야 한다.

  1. 디바이스 (Device): 보통 mount되는 디바이스의 이름 혹은 UUID이다. 예를 들면, sda1
  2. 마운트 위치 (Mount point): mount될 디렉토리의 위치
  3. 파일 시스템 타입 (File System Type): 사용되는 file system의 type
  4. 옵션 (Options): mount 옵션. 여러개를 쓸 때는 콤마(,)로 구분한다.
  5. 백업 동작 (Backup Operation): 0은 백업하지 않음. 1은 dump로 backup을 할지를 결정. 오래된 backup 방법이라서 0으로 설정해서 사용하지 않도록 한다.
  6. 파일 시스템 체크 순서 (File System Check Order): 0은 fsck로 체크하지 않음. 1은 root file system, 다른 파티션들은 2로 설정되어야 한다. 3, 4, … 로 한다고 해서 순서가 되지 않으므로 순서를 설정하지 않도록 한다. 그냥 다른 모든 파티션은 2이다.

예제

proc            /proc           proc    defaults          0       0
PARTUUID=5e3da3da-01  /boot           vfat    defaults          0       2
PARTUUID=5e3da3da-02  /               ext4    defaults,noatime  0       1
UUID=678dcc13-1b44-4ee8-80cf-7f186587054d       /mnt/NAS        ext4    defaults,noatime,rw     0       2
# a swapfile is not a swap partition, no line here
#   use  dphys-swapfile swap[on|off]  for that

다른 mount 옵션

  • auto / noauto: 부팅 시에 자동으로 mount할지 말지.
  • exec / noexec: 그 파티션이 바이너리를 실행할 수 있는지 아닌지. 보통 보안 목적으로 noexec로 설정된다.
  • ro / rw: ro는 읽기 전용 (read-only), rw는 읽기 쓰기 (read-write)
  • nouser / user: user가 mount권한을 갖을지 말지.
  • atime / noatime / relatime: access time (atime) 을 기록할지 말지. relatime은 access time이 atime data가 마지막으로 update된 (mtime) 이후에 파일이 수정되었을 때, 또는 마지막으로 access된 후 일정 시간 (기본값은 하루)이 지난 후에만 업데이트한다.
  • suid / nosuid: suid와 sgid 비트 동작을 허용할지 말지.
  • dev / nodev: character나 block special device를 interpret할지 말지.
  • defaults: 기본값을 사용. rw, suid, dev, exec, auto, nouser, async 와 같다.

참고 자료

[HTML5&CSS] 미디어 쿼리를 이용한 반응형 웹

Viewport란?

viewport는 사용자의 웹페이지의 보여지는 영역이다. 디바이스에 따라 다르다. 일반적으로 모바일 폰은 컴퓨터 화면보다 작을 것이다.

Responsive Viewport

위처럼 width property로 device-width로 viewport를 셋팅하면 그 디바이스의 해상도에 맞게 보여줄 수 있다. initial-scale은 그 윂페이지의 초기 zoom을 제어한다. 이 값은 별 일 없는 한 1로 하는 것이 좋다. maximum-scale을 1로 셋팅하면 zoom하지 못하게 할 수 있지만 권하지 않는다.

미디어 쿼리 (Media Queries) 이해하기

미디어 쿼리는 CSS3의 핵심 기능이다. @media 로 어떤 조건이 참이 될 때만의 CSS properties를 담는 rule을 사용한다. 디바이스의 screen width와 orientation(portrait 또는 landscape)에 따라 또는 인쇄된 종이에 보여지는 것 조차 display를 바꿀 수 있다.

먼저 breakpoint부터 보자. breakpoint는 디바이스나 웹 브라우저의 width 또는 height에 반응하는 웹페이지의 한 point이다. breakpoint threshold에 다다르면, 다른 스타일을 CSS로 적용할 수 있다.

breakpoint의 추가는 min-width나 max-width 룰을 추가함으로써 할 수 있다. 예를 들어 640px보다 작을 때를 지정하고 싶다면, max-width: 640px 를 쓴다. 반대로 640px 보다 클 때를 지정하고 싶다면, min-width: 640px 를 쓴다.

미디어 쿼리는 @media 뒤에 breakpoint 조건을 쓴 뒤 { } 안에 적용하고 싶은 CSS code를 적으면 된다. 예를 들어, max-width 800px로 screen에 어떤 스타일을 적용하고 싶다면 @media only screen and (max-width: 800px) 그리고 뒤에 { } 를 붙여 그 안에 스타일을 적어주면 된다.

다음 코드는 디바이스 상의 웹페이지가 800 px까지는 p 태그의 글자색을 red로 바꿀 것이다.

@media only screen and (max-width: 800px) {
  p {
    color: red;
  }
}

@media 코드를 각 디바이스에 따라 다르게 아래처럼 적용할 수도 있다. 그러나 브라우저는 로딩 시 width에 따라 css파일을 load하지 않고, width와 상관없이 모든 css파일을 읽어들인다.

<link rel="stylesheet" media="screen and (max-width: 480px)" 
href="mobilephone.css" />
<link rel="stylesheet" media="screen and (min-width: 481px) and 
(max-width: 768px)" href="tabletpc.css" />

Device Orientation에 따른 처리

디바이스의 orientation에 따른 처리를 하고 싶다면, 다음 미디어 쿼리를 사용하면 된다. 아래 코드는 landscape일 때의 rule을 적용할 것이다.

@media (orientation: landscape)

반대로 portrait일 때의 rule은 다음으로 한다.

@media (orientation: portrait)

다음과 같은 코드는 orientation이 landscape일 때만 p.warning을 보인다.

<head>
...
	<style type="text/css">
	p.warning {
		display: none;
		background: red;
		padding: 15px;
		font-size: 30px;
		margin: 0;
	}
	@media (orientation: landscape) {
		p.warning {
			display: block;
		}
	}
	</style>
</head>
<body>
	<p class="warning">이 글은 landscape에서 보여집니다.</p>
</body>

Landscape 혹은 portrait로의 전환을 확인해보고 싶다면 브라우저의 개발자도구에서테스트 가능하다.

여러 개의 미디어 쿼리 합치기

여러 개의 breakpoint로 어떤 스타일을 지정하고 싶다면 콤마(,)를 사용해서 합쳐서 사용할 수 있다. 콤마(,)는 미디어 쿼리를 OR해서 처리한다. 다음 코드는 width 480px 에서 640px 사이, 또는 1024px를 넘어가면 배경색을 green으로 바꾼다.

@media screen and (max-width: 640px) and (min-width: 480px), 
(min-width: 1024px) {
    body {
        background: green;
        }
}

인쇄 시의 스타일 (Print Stylesheets) 지정

CSS3 미디어 쿼리는 해당 페이지를 인쇄할 때의 스타일을 따로 지정할 수 있다. 두가지 방법이 있다.

  1. 따로 분리된 stylesheet를 <link /> 태그를 사용해서 import한다.
  2. 원래 있던 stylesheet 내에 @media 문법으로 인쇄를 위한 스타일을 지정한다.

첫번째 방법의 경우 아래의 코드처럼 import할 수 있다.

<link rel="stylesheet" media="print" href="printstyle.css" />

두번째 방법의 경우 아래처럼 사용하면 인쇄 시에만 적용되어 footer와 aside의 내용을 보이지 않도록 하고, header와 section의 margin과 배경을 조정한다.

@media only print {
    footer, aside {
        display: none;
    }
    header, section {
        margin-right: 0;
        background: transparent;
    }
}

[MySQL] phpmyadmin 설치

raspberry pi에서 설치하는 것을 기준으로 한다.

# apt-get install phpmyadmin

내부 네트워크에서만 접속하게 하고 싶다면, 다음과 같이 한다.

# vi /etc/apache2/conf-enabled/phpmyadmin.conf

아래처럼 Require ip 구문을 추가한다. “::1” 은 local interface, 즉 127.0.0.1과 같다. “192.168.0” 은 192.168.0.x 대역을 말한다.

<Directory /usr/share/phpmyadmin>
    Options SymLinksIfOwnerMatch
    DirectoryIndex index.php
    Require ip 192.168.0
    Require ip ::1

apache2를 reload한다.

# systemctl reload apache2

[WordPress] WordPress를 다른 서버로 이전하기

기존에 쓰던 Raspberry pi 3의 OS 버전 업그레이드를 게을리 했더니 해당 버전이 php5까지만 지원해서 그런가 자꾸 누가 들어온다;; 근래 설치했던 php7을 지원하는 Raspberry pi 4 4GB 모델로 워드프레스 블로그를 이전한다.

워드프레스 컨텐츠 내보내기

wordpress 내보내기 도구로 모든 컨텐츠 내보내기

먼저, 기존 워드프레스에서 wordpress 내보내기 도구를 이용해 모든 컨텐츠를 다운로드 받는다: “대시보드” > “도구” > “내보내기” > “모든 컨텐츠” 선택 후 “내보내기 파일 다운로드”

내보낸 파일에서 site 경로 수정하기 (optional)

여기서 내가 예전에 했던 일로 나만 적용되는 게 있는데, 맨 처음에 티스토리에서 워드프레스로 이전할 때 블로그 도메인 이름을 wp.dasomoli.org로 썼던 적이 있다. 그래서 모든 그 때 이전했던 글들 안의 이미지 경로가 wp.dasomoli.org를 사용한채로 export되었다. 내려받은 xml 파일 안의 모든 “wp.dasomoli.org” 혹은 “wp-dasomoli-org” 를 “blog.dasomoli.org”와 “blog-dasomoli-org”로 바꿔주었다.

미디어 라이브러리 복사해두기

미디어 라이브러리도 옮기기 위해 wp-content 안의 uploads/ 디렉토리를 압축해서 이전할 서버로 복사한다.

/var/www/wordpress/wp-content# tar cvfz uploads.tgz uploads
/var/www/wordpress/wp-content# scp uploads.tgz dasomoli@192.168.0.x:/home/dasomoli/

옮긴 미디어 라이브러리의 이전될 서버에서의 DB 등록을 위해서 “Moving Media Library” 플러그인을 설치한 후, 내보내기 후 json파일을 저장한다.

미디어 라이브러리 json 파일 내의 site 경로 수정하기 (optional)

여기서도 역시 json 파일 내부의 모든 “wp.dasomoli.org”를 “blog.dasomoli.org”로 수정한다.

ads.txt 파일 복사하기 (optional)

ads.txt 파일도 있다면 복사해둔다.

/var/www/wordpress# scp ads.txt dasomoli@192.168.0.x:/home/dasomoli/

https 인증서 관련 파일 복사하기

https를 위한 letsencrypt 관련 파일도 압축해서 옮긴다.

/etc# tar cvfz letsencrypt.tgz letsencrypt
/etc# scp letsencrypt.tgz dasomoli@192.168.0.x:/home/dasomoli/

테마 추가 CSS 백업해두기

사용 중인 테마의 추가 CSS가 있다면, 해당 CSS 코드를 어딘가에 복사해두도록 한다: “테마 디자인” > “테마” > “사용자 정의하기” > “추가 CSS”

위젯 백업해두기

사용 중인 위젯들이 있다면, 해당 텍스트나 링크, 코드 등을 어딘가에 복사해두도록 한다: “테마 디자인” > “위젯”의 “Sidebar”

apache2 설정

새로 옮길 서버의 워드 프레스 경로는 이전 서버와 동일하게 “/var/www/wordpress”로 한다. 다음과 같이 이전 서버에서와 동일한 apache2의 site 설정 파일을 작성한다. https를 위한 Rewrite로 시작하는 마지막쯤의 주석 3줄은 지워도 무방하다.

# vi /etc/apache2/sites-available/blog.dasomoli.org.conf
<VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        ServerName blog.dasomoli.org

        <Directory /var/www/wordpress>
                Options FollowSymLinks
                AllowOverride All
                Require all granted
        </Directory>

        ServerAdmin dasomoli@gmail.com
        DocumentRoot /var/www/wordpress

        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

        ErrorLog ${APACHE_LOG_DIR}/blog_error.log
        CustomLog ${APACHE_LOG_DIR}/blog.access.log combined

        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf
#RewriteEngine on
#RewriteCond %{SERVER_NAME} =blog.dasomoli.org
#RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

wordpress 설치

wordpress 내려받아 압축 해제하기

https://wordpress.org/ 에서 최신 버전의 wordpress의 .tar.gz 파일을 내려받아 새로 설치할 사이트의 /var/www/ 아래에서 압축을 해제한다. 현재는 5.4.1이다.

/var/www# tar xvfz wordpress-5.4.1.tar.gz

ads.txt 복사하기

ads.txt를 복사해온다.

/var/www/wordpress# cp ~dasomoli/ads.txt .

wordpress 디렉토리 아래 파일 owner와 권한 설정하기

/var/www/wordpress 디렉토리와 파일의 owner는 apache2를 실행하는 www-data로, 권한은 디렉토리는 755로, 파일은 644로 설정한다.

/var/www# chown -R www-data:www-data wordpress
/var/www# chmod 755 wordpress
/var/www# cd wordpress
/var/www/wordpress# find . -type d -exec chmod 755 {} \;
/var/www/wordpress# find . -type f -exec chmod 644 {} \;

phpmyadmin 설치

기본적으로 https://wordpress.org/support/article/how-to-install-wordpress/ 의 설치 방법을 따른다. 해당 가이드에서처럼 편의를 위해 phpmyadmin를 설치하자. [MySQL] phpmyadmin 설치 글의 절차를 따른다.

# apt-get install phpmyadmin

phpmyadmin은 내부 네트워크에서만 접속 가능하도록 만들자.

# vi /etc/apache2/conf-enabled/phpmyadmin.conf

아래처럼 Require ip 구문을 추가한다. “::1” 은 local interface, 즉 127.0.0.1과 같다. “192.168.0” 은 192.168.0.x 대역을 말한다.

<Directory /usr/share/phpmyadmin>
    Options SymLinksIfOwnerMatch
    DirectoryIndex index.php
    Require ip 192.168.0
    Require ip ::1

apache2를 reload한다.

# systemctl reload apache2

wordpress가 사용할 database와 user 추가 및 설정하기

phpmyadmin은 phpmyadmin에서 database를 추가하기 위해서 root 사용자로 로그인하려고 할 때 어려움을 겪는다면, [MySQL] phpmyadmin에서 root 사용자 사용 불가 시 사용자 추가 방법을 참고하자. “wordpress” database와 “wordpress” 사용자를 추가한다. “wordpress” 사용자는 “wordpress” database에 모든 권한을 갖도록 설정한다.

apache2에서 wordpress site enable

apache2의 아까 설정했던 site를 enable한다.

# a2ensite blog.dasomoli.org.conf

워드프레스 설치 페이지 접속해 설치하기

워드프레스 설치 URL wp-admin/install.php (예를 들면, http://blog.dasomoli.org/wp-admin/install.php) 에 접속한다. 설치가 끝나면 wp-config.php가 생성될 것이다. 파일 권한 문제가 있어 생성하지 못하는 경우, 브라우저에 나타난 wp-config.php를 복사해서 쉘에서 생성 후 붙여넣기 한다.

미디어 라이브러리 복구하기

아까 복사해뒀던 미디어 라이브러리 압축 파일(uploads.tgz)를 wp-content/ 아래에서 압축 해제한다.

/var/www/wordpress/wp-content# cp ~dasomoli/uploads.tgz .
/var/www/wordpress/wp-content# tar xvfz uploads.tgz

uploads 디렉토리 역시 owner를 www-data로, 디렉토리는 755, 파일은 644로 권한 설정을 해준다.

/var/www/wordpress/wp-content# chown -R www-data:www-data uploads
/var/www/wordpress/wp-content# find . -type d -exec chmod 755 {} \;
/var/www/wordpress/wp-content# find . -type f -exec chmod 644 {} \;

새로 설치한 워드프레스에 접속해서 “Moving Media Library”를 설치한 후, “가져오기”로 json파일을 선택해 미디어 파일들을 DB에 등록한다.

이제 아까 저장해뒀던 모든 contents의 xml 파일을 가져온다. 모두 잘 보이는지 확인한다.

워드프레스 고유 주소 설정 (optional)

나는 티스토리에서 이전할 때 설정했던대로 사용했던 고유주소를 postname으로 설정할 것이다. “대시보드” > “설정” > “고유주소” > “글 이름”을 선택하여 /%postname%/ 가 되도록 만든다.

.htaccess 만들기 (optional)

나의 경우는 무엇때문인지 .htaccess 파일이 생성이 안되었었는데, 이 경우 직접 만들어서 아래 내용을 붙여 넣어주면 된다.

/var/www/wordpress# vi .htaccess
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

파일 owner와 권한주는 것을 잊지 말자.

/var/www/wordpress# chown www-data:www-data .htaccess
/var/www/wordpress# chmod 755 .htaccess

https 설정하기

letsencrypt.tgz을 /etc/에 복사한 후 압축을 해제한다.

/etc# cp ~dasomoli/letsencrypt.tgz .
/etc# tar xvfz letsencrypt.tgz

rewrite 모듈을 enable하고, php-imagick를 설치한다.

# a2enmod rewrite
# apt-get install php-imagick

letsencrypt를 위한 certbot을 설치한후, apache 설정을 위해 실행한다.

# apt-get install python-certbot-apache
# certbot --apache

기존 인증서를 유지하면서 설치하도록 하면 된다.

설치한 워드프레스에 접속해서 “설정” > “일반” > “워드프레스 주소 (URL)”와 “사이트 주소 (URL)”을 https:// 로 바꾼다.

테마 재설치하기

기존에 설치했던 테마를 다시 설치한다. 나는 현재 sparkling 테마를 사용하고 있다.

추가 CSS가 있다면, 다시 설정하자: “테마 디자인” > “테마” > “사용자 정의하기” > “추가 CSS” 에 기존 사이트의 추가 CSS를 복사 붙여넣기.

pre {
	font-family: 'Nanum Gothic Coding', monospace;
	tab-size: 8;
}

.main-content-area {
	width: 100%;
	margin: 0px;
}

@media (min-width:992px) {
  .main-content-inner {
	  width: 70%;
	  margin: 0px;
  }

  .widget-area {
  	width: 30%;
  }
}

위젯 복구하기

아까 백업해두었던 위젯 설정을 다시 설정한다.

[WordPress] 워드프레스 플러그인 수동 설치/업데이트

ftp 서버로 WordPress가 설치된 디렉토리의 권한을 주기 어려운 경우, 혹은 ssh에 딸린 sftp 외에 ftp 운영을 하고 싶지 않은 경우, 수동으로 플러그인을 설치해주어야 한다.

WordPress plugin을 manual로 설치하려면, wordpress plugin 페이지에서 해당 플러그인의 zip 파일을 받아서 자신의 WordPress 디렉토리에서 wp-content/plugins/ 아래로 복사한 후 압축을 해제하면 된다.

예를 들어, akismet을 수동으로 설치하고 싶다면, https://ko.wordpress.org/plugins/akismet/ 에 접속해서 다운로드 버튼을 눌러 최신 akismet.4.1.6.zip 과 같은 파일을 받아 sftp등으로 wp-content/plugins/ 아래에 업로드 한 후, 쉘에서 압축을 unzip 등으로 풀어주면 된다. 플러그인 zip 파일의 경우 풀면 해당 플러그인 디렉토리 명으로 압축이 해제된다.

이후 관리자 페이지에 접속한 후, 플러그인을 보면 압축을 푼 플러그인이 보인다. 활성화를 눌러 주면 된다.