기존에 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++

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

워드프레스 언더스트랩 – understrap 테마를 이용해서 새로운 테마를 만들고 있습니다. 먼저 언더스트랩 테마에 대해서 간략하게 소개하자면, 워드프레스의 아버지 매트 뮬렌웨그에 의해 설립된 오토매틱에서 제공하는 언더스코어에 부트스트랩을 입힌 테마입니다. 언더스트랩은 자식테마도 미리 준비해두어 더욱 편리하게 사용할 수 있도록 준비해두고 있는데요.

마침 css 전처리기인 sass와 node.js 환경에서 gulp를 통해 scss 컴파일과 브라우저 싱크 – 소스 파일을 변경해서 저장할때마다 브라우저를 자동으로 새로고침해주는 기능을 사용할 수 있도록 제공하고 있어서 해당 기술들을 공부할 겸 실험적으로 만들어보고 있습니다.

저는 지금까지 워드프레스 자식테마를 이용할때는 style.css와 function.php 파일을 복사해두고 주로 css 파일만 수정하는 식으로 사용해왔습니다. 부득이하게 기능적으로 추가/삭제를 할 경우엔 header, sidebar, footer, single.php 파일들을 가져다가 override-덮어 씌우는 식으로 사용했는데 최근 테마들은 partial-부분화를 통해서 구성되다 보니 위에 나열한 php 파일들을 수정해서는 해결이 안되는 상황들이 발생합니다.

single.php안에 구성되는 내용들을 보면 메타 정보나 댓글, 포스트 내용등을 호출할때 해당 파일안에서 모두 함수를 구현해두는게 아니라 1차 하위 템플릿 폴더 (loop-template)안의 content-single.php 파일을 함수를 호출하고 그 안에서 또 별개의 1차 하위폴더(inc)에서  template-tag.php의 함수를 호출해서 불러다 쓰는 경우엔 단순히 하위폴더를 통채로 복사해 가져와서 자식테마에 override – 덮어씌우는 방식으로 진행하려 해도 적용이 되지 않더군요.

그래서 검색을 해보니 국내 사이트에서는 이러한 내용 에 대해서 심도있게 다루고 있는 사이트를 발견하지 못했습니다. 어쩔 수 없이 부족한 영어 실력으로 끙끙대며 찾아보니, 해외사이트에서는 이미 몇 년 전에 공개된 내용들을 보고 해결 할 수 있었습니다.

해법은 생각보다 간단합니다. 이런식으로 함수 부분들을 수정해야할 경우에는 자식테마의 function.php 에 동일한 함수를 재작성/수정을 통해 override 시켜야 내용이 반영됩니다.

이런 방식으로 자식테마의 function.php 파일을 통해 부모테마에서 적용되는 함수를 덮어 씌워버리면 우선권을 갖기때문에 부모테마가 업데이트되더라도 문제가 발생하지 않습니다.

공부해둔 것들을 기록하지 않으면 까먹는 사태가 빈번해서 정리하고 공유할 겸 포스팅하게 됐습니다. 비슷한 문제로 고민하시는 분들에게 도움에 되면 좋겠습니다.