리눅스에서 node-sass 설치시 [ user “root” does not have permission to access the dev dir ] 메세지 무한루프 대처 방법

기존에 git에 저장해두었던 gulp 세팅이 되어있던 파일을 불러오는 과정에서 node-sass가 설치 되지 않는 문제가 발생한다.

주로
“user “root” does not have permission to access the dev dir”
라는 문구를 내뱉으며 문제를 일으키는데 아래 화면처럼 계속 권한이 없다는 말만 반복하면서 무한 루프에 빠져버린다. 그래서 권한을 주고 벼라별 짓을 다 해도 몇시간 동안 node-sass 설치에 실패했다.

구글을 아무리 뒤져도 답이 나오질 않아서 한참 해메며 포기할까 싶은 무렵 실낱같은 희망이 되어준 옵션이 하나 나타났다. –unsafe-perm

이를테면 이런식으로 사용하는 것이다.

이 옵션을 주면 위와같이 권한 문제로 무한루프에 빠지는 것을 해결 할 수 있다. 좀처럼 풀리지 않는 문제라 주말 내내 골치 썩고 이제는 포기하고 싶었는데, 자기전에 극적으로 해결이 됐다… 주말이 다 날아갔다는 이야기.ㅋㅋㅋ

추가적으로 node-sass를 설치하는 과정중에 컴파일 하는 과정이 있는데 이럴 경우 컴파일러가 없으면 “make g++ command not found” 오류를 내뿜는다. 이런 경우에는 구글에서 아래와 같은 답을 내어주었다.

sudo apt-get install build-essential g++

여기까지 해주고나니 기나긴 컴파일 과정을 거치고 난 후 정상적으로 모듈이 설치되고 작업환경이 완성됐다.

카페24 SSL 적용 후 외부 이미지 로딩 안되는 문제

카페24 쇼핑몰 솔루션을 이용할 경우 SSL 보안인증서를 신청하면 무료로 설치가 가능합니다 (2018.2.7기준). 90일마다 새로 갱신된다는것을 보니 아마도 let’s encrypt를 이용하는 것으로 추측됩니다. 저도 현재 운영중인 블로그에 그렇게 적용해서 쓰고 있습니다. 참고 : 무료 인증서 설치 포스트

그런데 문제는 예상 밖의 곳에서 터졌습니다. https는 외부에서 끌어오는 이미지도 같은 보안 프로토콜이 적용 되어있어야 정상적으로 표현이 되는데, 현재 회사에서는 외부 이미지 호스팅(http)에서 이미지를 끌어다 쓰고 있다보니 모두 이미지가 정상적으로 노출 되지 않는다는 문제가 있었습니다. 자바스크립트를 통해 들어오는 경로를 모두 강제로 https로 변경해주는 스크립트를 제공하다보니 http://~ 로 불러오는 이미지가 전부 주소가 https:// 로 바뀌는 것이 원인이라는걸 파악했습니다. 통상적으로 보안프로토콜이 적용되는 사이트에서 이미지 소스를 삽입할때 프로토콜을 따로 명시하지 않도록 권고하고 있습니다. 예를 들어서 https://www.example.com/img.jpg 또는 http://www.example.com/img.jpg 라고 명시하지말고 그냥 //www.example.com/img.jpg 라고 명시하는걸 추천하고 있습니다.

하지만 카페24 쇼핑몰 솔루션에서 이미지를 이렇게 삽입할 경우엔 같은 https:// 프로토콜로 자동으로 변환해서 http://로 불러와야할 이미지도 무조건 https://로 붙어서 이미지가 전부 깨지는 겁니다. 잘못된 경로에서 호출하는 결과가 되는것이죠. 그래서 무척 고민하고 어찌할까 골머리를 싸매며 구글의 도움을 청했습니다. 제가 자바스크립트 실력이 미천해서 한참 검색하고 헤매다가 아래 포스팅을 참고하고 힌트를 얻었습니다.

제품 정보에서 상세이미지가 전부 깨지는것이 원인이었기때문에 , 해당 부분만 탐색해서 img 태그에 삽입되는 주소가 http://로 강제 적용해주는 소스를 삽입했습니다. 아래 내용을 보시면 어느정도 참고가 될 것 같습니다.

See the Pen add ‘http:’ script by 배현기 (@illustudio) on CodePen.

모든 이미지가 http://로 적용될 것은 아니기때문에 상세이미지가 표현되는 영역(prd-detail) 내에서만 img 태그를 골라서 http://로 강제 적용해주는 스크립트로 해결 할 수 있었습니다. 하지만, 또 별개의 상황이 벌어질 수 있기 때문에 이것이 완전한 해결책은 아닙니다. 그냥 임시방편 정도로 볼 수 있겠네요. 조금 더 세밀하게 조절하자면, 각각의 이미지 태그에 클래스를 적용해서 특정 클래스의 이미지만 http:// 프로토콜이 적용되는 식으로 스크립트를 바꿔 써도 괜찮을 것같습니다.

,

메이크샵 -> 카페24 쇼핑몰 이전

최근 회사에서 운영중인 메이크샵 솔루션을 카페24로 옮기는 과정을 경험했습니다.  메이크샵도 크게 부족한 솔루션은 아니지만, 운영하시는 분이 카페24가 더 친숙하다고 여기셔서 옮기기로 결정됐고, 저도 솔루션 이전은 처음 경험해본지라 시행착오가 많았습니다.

우선 솔루션을 이전할때 가장 큰 문제는 상품과 회원정보 이전입니다. 이 부분은 다른 분이 진행해주시긴 했지만, 엑셀 데이터를 활용해서 대규모 데이터 처리를 진행하는 것으로 확인됐습니다. 제가 담당했던 부분은 도메인 네임서버 이전건이었는데, 기존에 AWS나 기타 웹호스팅을 이용해서 직접적으로 컨트롤할 수 있었던 것과 달리 솔루션 업체의 가이드를 따라야하다보니 좀 답답한 부분이 많았습니다.

처음에는 포워딩이 아니라 왜 네임서버 이전을 하는가 의문이었는데, 관리의 주체를 아예 해당 솔루션으로 이전해주면 SSL 적용을 해준다는 장점이 있었습니다. 최근 구글에서 검색 우선순위를 SSL을 적용한 사이트에 유리하도록 정책을 펼치고 있기때문에, 가능하면 신청하는 것이 좋습니다. 하지만 프로토콜이 http에서 https로 변경되기때문에 외부 자바스크립트 플러그인을 활용하고 있거나, 네이버 웹마스터 도구, 소셜 로그인 등을 비롯해  html 태그중에 http라고 명시한 부분은 전부 https로 바꿔줘야하기때문에 번거로운 작업 과정이 수반되기는 합니다.

하지만 위와 같이 주소 앞에 “안전함”이라고 노출되는 만큼 사용자에게 보안측면에서 안정감을 줄 수 있다는 장점이 이런 번거로움을 상쇄시켜주는 요소가 될 것이라고 생각됩니다. 다시 본론으로 돌아가 네임서버를 이전하겠다고 신청하는 것 자체는 어렵지 않습니다. 카페24 관리자메뉴에서 해당 부분을 링크를 통해 안내해주고 있으며, 네임서버에 카페24에서 제공하는 내용을 기입하기만 하면 됩니다. 다만 시간이 무척 오래걸립니다. 24~48시간 정도 걸리는데, 저같은 경우엔 48시간이 꼬박 넘은것 같습니다.

개인적으로 웹호스팅이나 AWS와 같은 가상서버를 이용할때는 네임서버를 이전하더라도 간헐적으로 사이트가 접속되는 경우도 있었는데, 이번에는 전혀 접속이 되지 않는다는 것을 확인했습니다. 해당부분에 대해서도 카페24측에서 요청사항을 처리해줄때까지 대기해야하는게 아닌가 싶습니다. 네임서버가 이전되면 작업이 완료되는 것으로 생각합니다만, 그렇지 않습니다. 웹호스팅이나 서버를 직접 관리하는 경우엔 이런 부분을 사용자가 직접 만져줄 수 있지만, 카페24도 그렇고 메이크샵도 해당 부분에 대해서는 고객센터에 1:1 문의로 게시글을 남기는 것이 가장 처리가 빠릅니다.

고객센터에 전화는 하지 않는 것이 좋습니다. 전화받는 직원들이 기술지원 인력들이 아닌 관계로 잘못된 안내를 해줄 가능성이 있습니다. 제가 전화로 한 번, 게시판으로 한 번 문의를 넣었는데, 1:1 문의게시판에서는 즉각적으로 30분 이내에 조치가 이루어졌으나, 전화상으로는 도메인 소유자의 신분증을 보내달라는 잘못된 요청을 받았습니다. 이런 경우엔 가급적 1:1 문의 게시판에 화면 캡쳐를 비롯해 현재 상황을 상세하게 안내하는 것이 빠른 해결책을 얻을 수 있는 방법입니다.

아무튼 이번 경험을 통해 쇼핑몰 솔루션 이전이 무척 번거롭고 시간이 많이 소요되는 작업이라는 것을 경험했습니다. 솔루션을 한번 정하면 이토록 이전하는 것이 어려우니 처음에 잘 선택하는 것이 중요합니다. 개인적으로는 카페24도, 메이크샵도 별로 맘에 안드네요. 고도몰이 최근에 NHN이 인수했던데 어떻게 변했는지 좀 궁금합니다.

나중에 시간을 내서 고도몰 관리자 페이지도 한 번 만져봐야겠네요.

,

css 파일에서 중복된 내용 삭제하기

최근 카페24 스킨을 잘못 구매한 덕분에 쓰레기 치우느라(?) 아주 곤욕입니다. CSS 코드를 중복해서 여러번 불규칙적으로 정의해놓은 덕분에 5000여줄의 코드에서 일일이 찾아 지워주고 나니 1000여줄로 줄어드는 상황에 어이가 없는데, 이게 문제는 카페24 솔루션 특징상 CSS 코드가 수십개는 되는데다 만든 놈이 추가한 파일들도 있다는거죠. 그래서 이런 반복 되는 작업을 어떻게 해결할 수 있을까 고민한 끝에 css-purge라는 tool을 발견했습니다. 15800여줄의 코드를 보고 이건 안되겠다 싶어서 찾게 됐는데 간단하게 1700여줄로 줄여주는걸 보면서 감탄과 동시에 스킨 제작자를 저주하게 되더군요. 물론 완전하진 않습니다. 자동으로 중복된 코드를 지우면서 다이어트 하는 과정에서 불필요하다고 판단되는 것들을 지우다보니 지워선 안될 코드들도 일부 지운게 확인 됐습니다.그럼에도 불구하고 이 툴은 정말 쓸만합니다. 누락된 부분은 찾아서 추가하면 되는데 3군데 정도 누락되서 크게 어려움을 겪지 않고 문제를 해결 할 수 있었습니다. 아래에 관련 링크를 걸어두겠습니다. 저처럼 중복된 정의들을 지우기 위해서 애쓰지 마시고 css-purge로 스트레스를 덜 받으시길 바랍니다. http://rbtech.github.io/css-purge/그리고 추가로 minify된 코드를 해제하는 플러그인도 있더군요 atom 패키지 중에서 atom-beautify 를 이용하면 간단하게 해결 가능합니다. install package를 통해서 설치 가능합니다

블로그 리뉴얼

블로그 리뉴얼

블로그 디자인을 리뉴얼했습니다. 포트폴리오 사이트는 “만든다 만든다”하면서 차일피일 미뤄두고 있습니다. 뭐든지 마음을 먹고 실행에 옮기는데에는 망설임이 많기 마련인데, 가장 큰 문제는 항상 시간에 쫓긴다는것이겠죠. 나름의 우선순위를 정하고 일을 하다보니 미뤄지는 것들이 종종 발생합니다.

여튼 블로그는 가장 많이, 자주 쓰는 공간인데 기본적으로 주어지는 테마를 갖고 쓰다보니 항상 아쉬움이 있었습니다. 이번 기회에 손을 대고 만들기 시작했는데, 대략 6일정도 걸렸네요. 아직 전부 완성된 상태는 아니고, 편의를 제공하는 부분에서 미흡한 부분들이 있습니다. 차근차근 또 작업해서 추가해나가야겠네요.

역시나 이렇게 하나하나 만들다보면 공부하게 되는 것들도 많은 것 같습니다. 이번에는 워드프레스 함수에 대해서도 좀 삽질하면서 공부해보고, 매번 SASS를 사용하기 위해 환경설정을 새로 하는 부담을 덜기 위해서 편리한 프로그램도 찾아서 사용해봤습니다.


스카우트 앱이라고 하는 어플리케이션입니다. 사용방법도 간단하고, sass를 편리하게 쓸 수 있도록 도와주는 susy나 compass와 같은 프레임워크 연동도 손쉽게 해낼 수 있어서 복잡한 환경설정을 하지않아도 바로 사용할 수 있어서 편리합니다. 소스가 수정될때마다 감지해서 자동으로 브라우저를 새로고침해주는 livereload라는 어플리케이션도 있는데, 이건 현재 제대로 동작하지 않는것인지 제가 설정을 잘못한건지 정상작동이 되지 않길래 패스했습니다.

gulp에서 browser sync를 활용하면 되긴합니다만, 브라우저 싱크도 쓰다보면 뭔가 좀 꼬이거나 속도면에서 성에 차지 않는 구석들이 있더군요… 컴이 후져서 그런가


워드프레스 제작사인 Automattic에서 제공하는 스타트테마입니다. 스타트테마는 별도의 자식테마를 만들지 않고, 바로 수정해서 사용하도록 되어있다고 합니다. 지난번에는 underscores 테마에 bootstrap을 입힌 understrap 테마를 사용해봤는데, 확실히 만드는 시간은 단축되는데 부트스트랩을 따로 또 공부해야하는 부담이 있습니다.

반응형 사이트를 만드는데 있어서 편리함을 갖고자 부트스트랩을 사용했었는데, sass 프레임워크 중 레이아웃을 손쉽게 잡아주는 susy를 알고나니 차라리 html에 직접 클래스를 삽입해서 레이아웃을 조절하는 부트스트랩보다는 css 내에서 컨트롤할 수 있는 susy쪽이 낫다는 생각이 들었습니다. breakpoint와 함께쓰면 반응형으로 만들기 편리하다고는 합니다만, 또 공부해야할 것들이 늘어나니, 그냥 한번 써봤던 compass와 susy를 곁들여서 만들었습니다.


이렇게 만들고 나니 여기저기 부족하고 눈에 걸리는 부분들도 많이 생기지만, 만족할때까지 붙잡고 늘어지면 평생 끝나지 않을것 같아서 일단 여기서 1차적으로 마무리 했습니다. 사용하는데 편리하도록 몇가지 기능들도 추가할 예정이긴한데, 확실히 이미지 로딩이 많아지면서 속도가 쳐지는 부분들도 있네요. 최적화에 대한 고민도 같이 해봐야할 것 같다는 생각이 듭니다.

여러모로 공부할게 많네요 ‘ㅁ’