글쓰기 메뉴

건의사항 반영 - 0922

맥에서 나눔이나 말근(맑은) 고딕 꼴보기 싫다는 말에 반박할 수 없어서 맥에서 "sans-serif" 만으로 설정.

justify 설정을 에디팅 시 끌 수도 없고 케바케로 더럽게 보인다는 점 반박할 수 없어서 수정.

백스페이스로 이전 페이지 이동되버리는 문제... Turbolinks 끔 (아 진짜 터보링크 계륵!)

글 수정 시 완료 버튼에 표기되는 명칭을 "수정 완료"로 변경


이상.


나머지는 또 다음에~ 여러분 안늉~!


다른 글들
0 2

Rails4, MySQL 4바이트 유니코드
(아이폰 특수문자 등의 Emoji) 지원 설정

MySQL의 utf8 문자셋은 3-Byte UTF-8 Unicode Encoding 을 지원하지.
3 bytes 면 사실 대부분의 글자가 다 표현되거든. 한중일, 중동, Latin 및 특수문자 다 포함해서 말이야.
그런데 원래 UTF-8 은 4 bytes 까지 기록할 수 있어. (그보다 더 옛날 스펙은 6 bytes 까지)
하지만 별로 쓸일도 없고 해서 MySQL 같은 몇몇 소프트웨어는 UTF-8 을 3 bytes 까지만 지원하는겨.
꽤 오랫동안 별 문제없었지만 아이폰의 특수문자 - Emoji 가 4 bytes 유니코드라서 이거 지원 안되는 DB에는 데이터가 제대로 안들어가는 문제가 생긴거지.
아이폰 사용자도 많고 이모지 사용도 꽤 잦기 때문에 - 인스타그램 이딴건 글자보다 이모지가 더 많아! - 이제는 우리도 4 bytes 유니코드를 지원해야 하는거지.
지금 서비스에서 이모지가 저장되는지 아닌지는 다음 문장을 복사해서 저장해보면 알 수 있지.
제대로 저장이 안된다면 이제 설정을 시작해보자.
준비물
MySQL 버전 5.5.3 이상!
차사고와 DB 사고는 항상 일어날 수 있지. 한 백번쯤 백업해놔.
1. database.yml 에서 인코딩 등 수정
2. MySQL 인덱스 길이 수정
3. 데이터베이스 재생성 또는 테이블 수정
이제 긴장 좀 때리자.
3-1 디비를 전부 삭제하고 다시 만들어도 되는 경우
3-2 디비 재성성이 불가능한 경우
1) 데이터베이스 수정
2) 테이블 수정
3) 컬럼 수정
3-3 점검걸고 데이터 백업하고 디비 재성성 후 restore
이거 편하긴하겠지만 무슨일이 생겨도 난 책임 못 진다.
진짜 책임 못 진다. 백업 백번하고 로컬 PC랑 다른 서버에 여기저기 보관해라.
뭔지 잘 모르겠으면 그냥 하지마라.
1) 일단 데이터만 백업
2) 디비 재생성
3) 데이터 리스토어
끝!
0 0

Nginx 301 리디렉션 설정

301 리디렉션은 URL 의 영구이전을 의미한다. www.synd.kr 이 synd.kr 로 301 리디렉션 된다면 www.synd.kr 로 인덱싱된 콘텐츠는 모두 synd.kr 로 변경된다는 의미다.
도메인을 이전하거나 선호도메인을 설정하는 경우 이용될 수 있으며 Nginx 환경에서는 아래처럼 같단히 설정할 수 있다.
끝.
1 1
Square

SSL 인증서 설치 및 적용
스마트폰 ssh 접속으로 5분만에 완료?!!?!
그것도 무료??!!?!??!

이건 누구의 얘기도 아닌 제 얘기. 제가 씬디에 https 를 적용하기 않고 버틸 수 있던 합리적(!) 이유들.

하지만 계속 눈에 밟히는....
그리고 괜시리 갖고 싶은 녹색 자물쇠
그리고 오늘.. Let's encrypt 와 EFF 의 Certbot 으로 인증비용없이 뻥안치고 스마트폰으로 5분만에 SSL 도입 끝.
물론 후속 설정들과 이미지, 외부 소스 등에 대한 url 점검과 설정이 필요했지만 이건 레알 신세계.
근데 이거 나만 몰랐어???
불과 몇달전에도 클라한테 인증서 구매시키고 서버세팅했었는데???
블로그 참 열심히 하시는 존경스러운 outsider 님이 2015년에 베타를 경험했던 포스팅은 여기.
이후 EFF 에서 Certbot 에 Apache, Nginx 등의 소프트웨어와 서버 OS 를 플러그인으로 개발하면서 지금은 서버설정까지 Certbot 이 완료시켜주고 있음.
설치는 EFF Certbot 페이지에 가서 자신의 서버와 웹서버를 선택하면 나오는 메뉴얼대로 (대략 5 ~ 7 커맨드) 하면 끝.
난 심지어 지하철에서 스마트폰으로 ssh 연결해서 설정 끝냈음. ㅇㅇ
내 케이스는 nginx / ubunt 14.04 LTS 로 실제 설치 커맨드 히스토리는 아래와 같음. 아래가 전부임.
이렇게 하면 1) 이메일 주소 입력하세요. 2) 이메일 수신 OK? 3) (서버레벨에서 확인된 도메인 중) 어떤 도메인 쓸꺼임? 4) https 만 씀? 80도 같이 씀? 이렇게 4개 물어보고 답하면 된다.
이후에 nginx 에서 http 접속을 https 로 리디렉션 시키던지 Rails 에서 모든 연결에 ssl 을 적용하는 등의 설정을 하면 됨. 이건 별도의 글로 작성.
이제 Let's encrypt 라는 회사를 살짝 알아보자.
리눅스 재단 (Linux Foumdation) 과의 협력프로젝트라고 사이트 상단에 '이미지'가 박혀있는데 어떤 관계인지는 확인하지 못했다.
ISRG 라는 캘리포니아의 기업에서 "HTTP" 보안이 기업들과 사용자들의 비용절감에 직간접적인 도움이 된다는 생각으로 시작했다고한다.
기본적으로 ACME (인증관리자동화환경) 을 보고 있고 실제로 해당 목적을 훌륭하게 수행하는 솔루션이 있다. letsencrypt 에서 개발하다가 현재는 EFF 에서 개발하고 있으며 패키지이름은 Certbot. 인증절차 및 인증서 설치 이후 갱신을 "명령어 하나로" 처리해준다.
SSL CA 로 중요한것은 얼마나 많은 주효한 클라이언트가 이를 인증된 CA 로 받아들이는가 하는 부분인데 해당 목록은 이곳 링크에서 확인할 수 있고 파폭 2.0+, 크롬, 익스 XP3+, 엣지, 안드 2.3.6+, 맥 사파리 4.0+, iOS 사파리 3.1+ 등등 그냥 믿고 사용해도 되는 수준이다.
또 하나는 letsencrypt 의 생존력인데.. 인증서가 무료다보니 기업의 유지가능성도 살펴보는게 좋겠다.
기업 스폰과 기부금으로 운영되는 것으로 보이며 공식홈페이지에서 스폰서들은 소개하고 있다.
문서상으로 년간 30만불(3년유지) 또는 35만불을 지원하는 플래티넘 스폰서는 mozilla, Akamai, SISCO, EFF, OVH, chrome 등의 6개사이고 그 외 IdenTrust,  포드재단, 페이스북, 디지털오션, 볼터, 쇼피파이 등 다수의 스폰서들이 있다.
역시나 결론은 그냥 믿고 쓰면 되겠군이라는 결론 ㅋㅋ
EFF 는 Electronic Frontier Foundation 의 약자로 한국위키 이름이 "전자 프런티어 재단" 이다.

뭔가 틀리진 않았지만 우습달까?
EFF 는 '디지털 월드' 에서 사용자들의 자유를 지키기 위해 1990년 설립된 비영리 재단으로 블루 리본 캠페인도 여기서 시작했다고 한다.
물리적으로는 관계되기 힘든 연결고리 없는 사람들과 조직이 어느날 나에게 직접적으로 혜택을 주는 일들이 많아지는게 참 재밌고 고마울 뿐이다.

진짜 고마우면 Donate! 
Support Let's encrypt
Support EFF Certbot
2 1

우분투 16.04 - 엘라스틱 서치 메모리 설정
Ubuntu 16.04 - Elasticsearch Memory config

AWS 등이나 docker 환경에서 Elasticsearch 를 사용하거나 로그 분석 등 사이즈가 큰 데이터를 다루기 위해 Elasticsearch 를 사용한다면 애초에 "메모리 부족" 으로 JDK 가 안올라가는 그런 황당한 일은 없을게다.
평범한 양의 콘텐츠를 다루는 RDB 의 검색엔진으로 Elasticsearch 를 사용하고 있는데 1기가 메모리에 웹, DB, Elasticsearch 를 모두 올려야하는 상황.
Elasticsearch 구동 시 syslog 에 아래와 같은 에러를 뱉고 당당하게 종료되는 elasticsearch.
Elasticsearch 메모리 설정 관련 검색 시 ES_HEAP_SIZE 환경변수 설정 얘기가 많이 나오는데 (공홈 매치 결과도..) 사용되지 않는 설정값이고 구동 시 xms, xmx (각 최소, 최대) 설정을 해줘야한다.
우분투에서는 아래의 파일에서 관련값을 설정할 수 있다.
두 개의 값이 다르면 성능저하가 생길 수 있다고 한다.
참고로 systemd 환경의 우분투에서 MAX_OPEN_FILES 와 MAX_LOCKED_MEMORY 설정은 elasticsearch.service 파일에서 하는 것이 좋다고 한다.
음... 또 또 참고로 .service 파일에서의 해당 설정 키는 각각 LimitNOFILE 과 LimitMEMLOCK 이다.
음.. 또 참고로 systemd 뒤의 system path 는 해당 서비스가 구동되는 레이어에 관한 정보로 시스템이나 설정마다 다를 수 있다.
0 0

맥 시에라 vi / vim 클립보드 사용하기

1~4 단계의 과정이 필요할 수 있다.
1. ~/.vimrc
아래 내용을 사용자 홈디렉토리 아래 .vimrc 파일에 추가한다 (없으면 만든다)
2. +clipboard 로 컴파일 됐는지 확인한다
clipboard 옵션 없이 컴파일 된 경우

clipboard 옵션이 포함된 경우
2-1. clipboard 옵션이 없는 경우 brew 로 vim 을 설치한다
맥에는 기본으로 vim 이 설치되어 있다.
아래와 같이 brew 로 vim 을 설치하여 시스템 디폴트 vim 교체할 수 있다 (실제로 교체되지는 않고 path 설정 바꿔주는 듯)
3. 어떤 vim 이 호출되는지 확인한다
3-1. /usr/bin/vim 이 잡힌다면 /etc/paths 파일을 수정하여 /usr/local/bin 이 /usr/bin 보다 위에 나오도록 한다
4. 여기까지해도 동작되지 않는다면 
client-server 옵션으로 설치하면 동작하는 경우가 있다고 한다.
4-1. .vimrc 설정
1번의 설정으로 충분하나 아래와 같이 설정할 수 있다 (참조)
1 1

자! 지금 당신은 씬디의 QA!

추석연휴와 2년만에 휴가라는 개인사가 있어서 작업을 적절한 사이즈로 잘라내는데 실패함. 장시간에 걸쳐 작업을 진행하다보니 긴급수정 내용이 수시로 포함되고 개발했던 코드도 시간 지나고 다시 보니 또 수정해야겠고, 수정하고 보니 기존 패턴과 달라서 기존 코드도 부분적으로 리펙토링하고... 이러쿵 저러쿵... 
그래서 이번 업데이트에 내용들이 포함되어 있는지 다 까먹음 ㅇㅇ. 까먹을만큼 자잘한 사이즈긴한데 꽤 중요한 수정들이 있었던게 문제. 그래서 오류가 꽤 있을 수 있으니 이 글을 읽는 당신께서 뭔가 이상한 오류나 버그를 발견하면 갖은 방법으로 이를 알려주기 바람.
애니웨이, 이번 업데이트는 원래 "파일첨부" 였음.
에디터 툴바에 종이클립 모양으로 기능이 추가됐음. 그런데 이거 작업하다보니 에디터에 삽입되는 멀티미디어(사진, 유튜브 영상, 각종 iframe)의 추가적인 콘트롤이 불가피해짐. 특히 씬디에서는 멀티미디어를 수정불가 속성의 figure 태그로 사용하고 있는데 이 때문에 멀티미디어가 위아래로 붙어버리면 그 사이에 라인을 삽입할 수 없거나, 삭제가 어렵고 HTML 레벨에서 깔끔하게 지워지지 않는 등의 문제가 마구마구 발생! 뭐.. 대충 다 때워놨음. 고장난거 있음 알려주기 바람.
그리고 헤더나 인용, 코드 단락의 설정을 단축키로 지정할 수 있도록 했음. 예를 들어 ctrl+h 단축키를 계속해서 누르면 H1, H2, H3, P 순서로 단락 스타일이 변경됨. 단축키는 상단 툴바에 물음표 아이콘으로 확인 할 수 있음. 
아.. 그리고 사진 업로드할 때 orient 정보 있으면 적용되게 수정했고 또 뭐 했더라... 정말 기억안나네... 모르겠다. 끝!
0 0

Rails 모든 연결 SSL 로 변경하기 + Nginx Redirect

Let's encrypt 와 EFF 그리고 여러 스폰서들과 개인기부자들 덕분에 간단하게 SSL 을 적용했으니 이제 모든 http 연결을 ssl 로 돌려보자.
Rails 에서는 Controller 단위에서 force_ssl 을 사용할 수도 있고 보다 와이드하게 전체 설정에서 다룰 수도 있다.
씬디는 https 변경에 다른 별 이슈가 없기때문에 config/environments/production.rb 에 force_ssl 을 설정했다.
이렇게 설정하면 route 룰을 포함해 모두 ssl 연결로 변경된다.
NginX 나 Apache 등을 리버스 프락시로 구성하여 백단에 서버들에게 넘겨준다면 다음의 헤더를 반드시 포함시켜야한다.
Rack 서버는 1) 443 포트로 연결되었는지 2) ENV['HTTPS'] 값이 "on" 인지 3) X-Forwarded-Proto 헤더가 "HTTPS" 인지 3 가지를 보고 판단하기 때문에 리버스 프락시 뒤에 있는 puma 나 unicorn 등은 443 포트가 아닌 다른 포트나 유닉스소켓으로 통신하기 때문에 HTTPS 연결인지 확인하지 못하고 계속 리디렉션 시키게 된다.
NginX 나 Apache 단에서 301 리디렉션으로 연결 프로토콜을 변경할 수도 있겠다.
80 포트를 수신하는 서버 설정을 넣고 해당 설정에서는 http 를 https 로 변경하여 리디렉션시키면 443 을 리스닝하고 있는 아래의 설정이 요청을 수신하게 된다. 
끝.
1 3

가방

가방 들고 다니는거 너무 귀찮다.
옛날 커피숍 "보디가드"에 있던 하이텔 단말기처럼 아무데서나 사용할 수 있는 디바이스들이 있으면 좋겠다.
음.. 환경설정이 너무 오래걸리려나?
음.. 그냥 스마트폰 성능이 좋아지면 끝인가?
으음.. 당분간은 그냥 가방을 들고 다녀야겠군.
으으음.. 나 초딩같다 ㅋㅋㅋ
0 0

[ 글 커미션 ]

Written by. @_writing_seori
01.
저작권은 글쓴이 [@_writing_seori] 에게 있습니다.
- 출처만 밝혀주신다면 상업적 그리고 2차 용도 외에는 가능합니다.
02.
커미션의 예시본.
- 예시본으로 커미션으로 쓴 글들이 사용됩니다.
- 원하지 않는다면 사전에 말씀해주세요. 비밀번호 설정 후 드리겠습니다.
- 이곳에서 작성한 글들이 모두 예시본 입니다.
03.
작성기간.
- 글쓴이는 현재 일을 하고있어 개인적인 업무가 있지 않는한 최대 기간은 일주일 입니다.
- 단, 3000자가 넘어갈 경우에는 3주, 5000자가 넘어갈 경우에는 최대 한 달 입니다.
- 개인적인 일이 생겨 늦어질 시에는 연락을 드립니다.
- But. 연락을 드렸음에도 불구하고 늦어질 시 해당 글의 50% 환불 및 현재까지 쓴 글을 보내드립니다.
-  신청자분의 개인적인 이유로 신청을 넣으신 후 취소는 아직 작성하기 전 이라면 가능하지만 작성하고 있을 시에는 환불이 불가능 합니다.
04.
글자수.
- 공백 미포함 1000자 이상.
- 1000자 당 2,500원 입니다.
- 1000자 이하 글을 원하신다면 가격은 1,500원 입니다.
04-1
추가금.
- 글자수 제한은 없으나 5000자를 초과할 시 1000자 당 +1,000원이 됩니다.
- 내용을 처음부터 끝까지 제가 다 짜야하는 경우 글자수 상관없이 +3000원 입니다.
05.
장르.
- 2D, 2.5D, 3D ALL OK.
- HL, BL, GL, 드림, 자캐, 1차, 2차 전부 가능합니다.
- 캐릭터의 성격 과 말투 그리고 장르를 말씀 주신다면 무엇이든 가능합니다.
- 모르는 장르가 꽤 있어 해당 캐릭터 같지않을 수 있으니 양해바랍니다.
- 19+도 가능하지만 19+ 는 성인 인증을 위하여 신분증 확인이 필수입니다.
06.
문의 및 신청 방법.
@_writing_seori
https://open.kakao.com/me/writingseori
- 트위터 DM 이나 오픈채팅으로 넣어주시면 됩니다.
- 연락 주실 때 연락이 빠른 쪽으로 넣어주시면 감사하겠습니다.
- 추후 신청하시면 연락이 빨리 되시는 쪽이 좋기에.
06-1
입금.
국민은행 사용합니다.
토스 사용 가능합니다.
문상 혹은 상품권 관련 받지 않습니다.
07.
양식.
입금자명 / 원하는 커플링 (장르) 및 소재, 내용 / 시점 / 수위
- 입금자명 은 제게 입금해주시는 성함입니다.
- 자캐의 경우 사진자료를 첨부해주시면 감사하겠습니다.
- 소재 즉 상황은 상세하게 설명해주시면 작성시 막히지 않습니다.
- 시점은 일인칭, 이인칭, 전지적 작가 중에서 골라주시면 됩니다.
- 문의 및 신청 접수 > 입금 > 1차 작성 > 확인 및 수정 > 완성
3 1
Square

earth: windmap
어스 윈드맵으로 황사, 먼지 등 대기 상태 및 예보 보기

오늘은 정말 잠깐 밖에만 나가도 목이 칼칼하더군.
주변에 미세먼지와 황사의 강력한 조합으로 인해 목이 붓는 등 고통받고 계신분들도 꽤 보이고.
이놈의 황사는 언제 걷힐까 싶어 "어스"에 접속. 
은 노란 하늘 ㅋㅋ
저 두꺼운 먼지들이 언제쯤 걷힐까 예보화면을 확인함.
12일이 되면 한국 상공은 꽤나 투명하기에 주변인들에게 "어스"를 보여줬더니 "이게 머여?" 라는 반응.
미세먼지 예보는 앱들 설치 많이 했던데 "어스"는 잘 모르는 모양.
그래서 "어스" 에 대해 짧은 사용법을 작성하기로 함.
어스 윈드맵(earth: windmap)은 일본에 살고 있는 미국인 개발자 Cameron Beccario가 만든 웹사이트로 2013년 12월 11일 오픈했고 윈체스터 대학교에서 열린 The Graphical Web 2014 컨퍼런스에서 개발 배경 등에 대한 발표가 있었다.
일부에서 "어스"를 인디드(Indeed, 취업/채용 사이트)에서 만든 사이트라고 설명하는데 Cameron Beccario 는 위 컨퍼런스에서 개인 공부를 위해 시작한 개인적인 프로젝트였다고 밝혔다. (당시의 직장은 Indeed)
초기버전은 Air와 Ocean 두 개의 모드만 제공했으나 현재 Chem(케미컬)과 Particulates(dust, smoke, soot, clouds) 가 추가되었으며 GMAO/NASA 의 데이터를 사용한다.
대충 설명은 된 것 같고 짧은 사용법을 시작하기전에.. 진심으로 Cameron Beccario 의 수고와 노력에 감사한다.
여러분도 고마운 마음이 생긴다면 글 하단의 링크를 타고 Cameron Beccario 의 트위터에 인사를 남기거나, 어스의 아트웍을 구입해 직접적으로 도움을 줄 수 있다.
"어스" 사이트에 접속하면 기본값으로 설정된 지표면에 불고 있는 바람을 볼 수 있다.
https://earth.nullschool.net

미세먼지 및 대기 중 화학물질(일산화탄소와 이산화탄소, 황산화물)을 확인 하기 위해선 화면 좌하단의 "earth" 메뉴를 클릭해 설정을 변경해야한다.
[미세먼지 및 대기오염 물질 보기 설정] 
Height: Sfc (관측높이는 surface, 지표면으로 설정)
Mode: Chem
Overlay: COsc (일산화탄소)
Overlay: CO2sc (이산화탄소)
Overlay: SO2sm (이산화황)
Mode: Particulates
Overlay: DUex ((미세)먼지 = dust, smoke, soot, clouds 등으로 대기의 광학적 두께를 - 얼마나 불투명한지를 - 표현)
Overlay: SO4ex (황산화물)
[예보 및 지난 데이터 보기]
Control 메뉴
<< : 24시간 이전 데이터 확인
< : 3시간 이전 데이터 확인
> : 3시간 이후 데이터 확인
>> : 24시간 이후 데이터 확인
⊕ : 현재 위치를 중심으로 

Grid : 그리드 표시
▷ : 바람 표시
HD : 고해상도 설정
- 끝 -
https://earth.nullschool.net [어스]
https://twitter.com/cambecc [개발자 트위터]

http://memory.org/point.b/earth.html [아트웍 구매]
https://en.wikipedia.org/wiki/Cameron_Beccario [개발자 위키문서]

https://www.youtube.com/watch?v=QXNODLWhSbw [The Graphical Web 2014 발표]

https://gmao.gsfc.nasa.gov/GEOS/ [GEOS-5 - GMAO / NASA]
3 2

씬디를 만드는 이유 #2

Medium 은 트위터 공동 창업자 중 에반 윌리암스가 만든 글쓰기 플랫폼이지! 2012년도에 오픈했는데 한 2년 묵묵하게 굴러가다가 2014년도부터 한국에도 많이 알려진 것 같아. 요즘은 한국어로 글 등록하는 사람들도 꽤 보이더라고.
글 쓰기 협업툴을 초기 컨셉으로 들고 나왔었는데 - 그래서 단락별로 에디팅이나 코멘트가 잘 기획되어 있지 - 지금은 그것보단 "글 쓰기에만 집중할 수 있는 글 쓰기 플랫폼" 으로 어필되고 있는 것 같아. 물론 사람들이 스킨과 디자인은 잊고 글 쓰기에만 집중할 수 있도록 충분히 아름답고 정리된 디자인을 자랑하지.
기고자와 독자가 충분히 많아지니까 기존 미디어들에서도 미디엄에 채널을 만들어 콘텐츠를 유통시키는 모습도 자주 보이고, 팀이나 브랜드 단위의 채널들이 많이 생기고 콘텐츠 질도 점점 좋아지는 것 같아.
애니웨이, 미디엄에 대한 개인적인 불만이라면 단 하나.. 한국어로 글을 쓸 때 serif 폰트가 설정되어 있는데 이게 보기에 엄청 거시기해. 브라우저 설정에서 폰트를 지정해서 쓰면 되나? 되겠지 뭐.
지저분한 사심을 담백하게 털어놓자면 미디엄 같은 아름다운 플랫폼을 갖고 싶었어. 폰트 설정은 구차한 변명이지. 그냥 내껄 갖고 싶었어! 이게 씬디를 만든 두번째 이유.
2 5

SYND 바란다#2

1. 비공개 글의 경우 메타 로봇 설정으로 noindex 처리 필요
2. 해더스타일을 좀더 쉽게 사용 할수 있게 스타일속성에서 밖으로 나왔으면.
3. 해더 스타일에 따라 자동으로 H* Tag로 마크업 처리 필요