상현

개발 덕후

계층 카테고리

계층 카테고리는 사이트를 만들때 기본적으로 많이 사용하는 리스트 형태이다. 가장 쉽게 계층 카테고리를 만드는 방법와 커스텀한 카테고리를 만들 수 있는 방법 알아보기

Today 위젯 구현

📬 무엇을 네이버, 티스토리와 같이 대형 블로그들에 항상 위젯으로있는 투데이 관련 위젯 🤔 왜? 기본적으로 블로그에서 제공해주는 기능이었는데 어떻게 구현할까 궁금하고 직접 해보고싶다. https://github.com/Hansanghyeon/Hansanghyeon/discussions/683 어떻게? 블로그에서 어떻게 방문자에 대한 데이터를 수집하고있나? GA(Google Analytics)로 방문자 데이터를 수집하고있다. 분명 today 위젯으로 방문자 수를 표현할때와 동일한 기능을 GA에서 하고있다고 생각한다. 그렇다면 이것을 활용해서 하는 것이 추후 블로그를 이전하거나 … Continued

composer install 오류 php 버전문제

모던 PHP에서는 PHP의 패키지 매니저인 composer를 사용한다. composer는 PHP의 버전에 따라서 설치할 수 있는지 없는지 결정된다. 특정 패키지는 PHP의 몇 버전이상이어야 한다는 조건이 있다. [문제 발생] 내 서버는 PHP 8.0을 설치할 수 없는데?! 제목 그대로 내 서버는 Synology의 DSM 7.0 버전 DS720+를 사용하고있다.해당 시놀로지는 PHP8.0 패키지를 아직 지원하지 않고있다. 여기서 어떻게 해야할까? 많은 고민을 했다. … Continued

단일 @mixin에서 bootstrap 함수사용 (feat: node-module)

TL;DR 해당 파일만가져오면 @include media-breakpoint-up(sm) 정상적으로 사용가능 🤔 문제발생 accordion.scss라는 파일에서 @include media-breakpoint-up(sm)을 사용할 수 없다. 무엇이 문제일까? 합리적인 의심인 bootstrap 코드를 임포트하지 않아서 생기는 문제같았다. Try1 그럼 main.scss의 최상위에서 bootstrap.scss에서 설정한 것처럼 이렇게 적용했다. 역시 생각대로 bootstrap의 함수를 사용할 수 있게되었다. 하지만 또다른 문제가 생겼다. Try1 – 다른 문제 발생 accordion.scss에서 bootstrap 스타일 코드를 … Continued

Sass에서 조부모 선택하기

중첩된 형식으로 클래스를 작성하는 것은 관심사 분리에 좋은 방법입니다. 해당 .scsss BEM 구문을 사용한다면 &의 사용은 정말 유용합니다. 구성 요소의 CSS 구조를 유지하면서 필요한 경우 대규모 클래스 이름을 쉽게 변경할 수 있습니다. 그렇다면 조부모를 선택하는 방법은? 부모를 선택하는 것은 익숙하게 사용하는 방법이지만 조부모를 선택하는 것을 원할때가 있습니다. 예를 들어 .component:hover로 하위 .component:hover .component_card 이런식으로 구성하고싶을때가 … Continued

Github action ci/cd

퍼블리싱 작업을 할 때 dev repo와 upstream repo 두가지로 관리하게 된다. 그리고 main 브랜치가 머지될 때 버전이 올라가게 정하렸고 버전이 올라갈때 데모 웹페이지의 소스 코드를 업데이트해야한다. 이런 과정은 매우 번거롭다. 신경써야 할 것들도 많고 매번 똑같은 단계이기 때문에 자동화가 필요한 작업이었다. 이 과정을 자동화 한다면 개발하는데 있어서 많은 시간을 절약할 수 있다. 이제 어떻게 자동화를 … Continued

Github fork 저장소 끊어진 fork 다시 연결하기

나는 작업을 할때 Github에서 비공개 저장소를 포크해서 작업을 한다.포크된 저장소(orgin) 원본 저장소(upstream)으로 그러다가 upstream 저장소의 가시성을 바꿔야하는 상황이왔는데 포크 원본 저장소의 상태가 바뀌면 포크한 저장소들은 모두 독립적인 저장소로 변경이 되는 것이다. 이것은 Github 가이드에도 명시되어있었다.업무적으로 어쩔 수 없었는데 결국 공개저장소로 변경한다음 포크연결이 해제된 상태에서 어떻게하면 내가 이 포크를 연결할 수 있을까? 고민을 해봤다. 다시 원본 … Continued

Traefik OAuth

TL;DR 위처럼 설정하면 된다. 실제로 사용한예시 fauth를 미들웨어로 추가하고 해당 미들웨어를 Google OAuth를 적용할 컨테이너의 미들웨어로 추가해주면 된다. 그러면 Google OAuth를 인증받고 해당 라우트로 들어갈 수 있다. issue) White list not working 해당 컨테이너의 옵션으로 white list를 넣어서 원하는 인원만 접속할 수 있게하는 옵션이 있는데 해당 옵션이 재대로 작동하지 않는다. https://github.com/Hansanghyeon/synology-traefik/issues/3 발단 https://github.com/Hansanghyeon/synology-traefik/discussions/2 참고

Traefik 커맨드 config 파일로 구성하기

왜? Traefik을 구성하면서 docker-compose.yaml 내부에서 커맨드라인이 너무나 늘어나는 것이다 그러다 보니까 고민이 되었다. 이렇게 작성하면 내가 나중에 잘 알아볼 수 있을까? 그래서 Traefik의 커맨드 설정을 .toml .yaml로 설정하는 방법이 있어서 이 방법으로 커맨드를 옮기려 한다. Let’s go Configuration Introduction – Traefik 공식 홈페이지에서 이 부분을 살펴보면 configuration File은 설정파일의 이름이 traefik.toml(.yml, .yaml)으로 설정 되어있고 해당 … Continued

Traefik docker-compose example & 다른컨테이너 연결

공식 홈페이지의 Getting started 섹션에 docker-compose.yaml 파일이다. 처음에 의문이 들었는데 8080이 Traefik의 대쉬보드 포트이다. 위 설정만으로도 Traefik이 잘 서비스되고있는 것도 확인했고 이제 내가 운영하고 있는 wordpress 컨테이너 또는 다른 컨테이너를 연결할 차례다. wordpress docker-compose 컨테이너 연결 & 도메인 설정 역방향 프록시로 Traefik에서 wordpress container로 어떻게 연결하는 것인가? 이것은 Traefik이 머신의 /var/run/docker.sock을 사용할 수있게 해줬기 때문에 … Continued