TIL : 다크모드, Flask 서버에서 HTML 내 중복되는 코드 분리

Today, What I learned?

이전부터 내 맥북에만 있었던 소스 트리의 문제가 몇 개 있었는데 관련해서는 따로 포스팅해보려 한다.

미니 프로젝트를 진행하면서 다크 모드를 구현하고, Flask 서버에서 HTML 중복 처리에 관해서 새롭게 알게 되었다.

 

소스트리 문제 해결 포스팅은 아래 에서 볼 수 있다. 👇

[git] 맥북 소스트리 완전 삭제하고 토큰 재설정

 

 

 

다크 모드 구현

완성된 다크 모드 먼저 보기

 

 

다크 모드를 구현하기 위한 과정은 다음과 같다.

1. body 내의 요소들에 dark 클래스를 만든다.

2. 버튼 클릭 시 dark 클래스가 토글 되며 붙었다가 없어질 수 있도록 한다.

바닐라 자바스크립트로도 작성할 수 있지만 이번 프로젝트는 거의 제이쿼리 쓰는 것 같아서..

아마 제이쿼리 쓰는게 마지막이지 않을까 싶다.

텍스트들과 아이콘들이 버튼 클릭 여부에 따라 색상이 변경될 수 있도록 했다.

 

 

 

Flask 서버에서 HTML 내 중복되는 코드 분리하기

메인 페이지의 로고와 아이콘들, 그리고 하단부의 내비게이션은 모든 페이지에서 공통적으로 사용되는 부분이다.

각 파일마다 중복되는 코드를 적기엔 너무 귀찮고... HTML 코드들을 따로 분리하여 include 하기 위한 방법을 찾다가

Flask 서버에서는 아래와 같은 표현으로 include 할 수 있다는 것을 알게 되었다.

 

중복되는 코드를 html 파일에 따로 작성해서

{% include '파일 이름' %} 형식으로 첨부할 수 있다.

이런 식으로 작성하면 페이지마다 중복되는 코드 줄이기 완료!~

 

 

참고한 글

[flask+jinja2] 중복되는 html 처리, {% include %} 사용

 

 

미니 프로젝트 진행 현황

메인 페이지의 애니메이션 작업과 다크 모드 작업이 끝났다.

팀원들이 각자 동일한 레이아웃으로, 스타일은 다르게 구성해본 개인 페이지는 대화를 통해 좋은 부분들을 합치는 것으로 결정!..

피그 잼은 이번에 처음 써보는데 생각보다 더 괜찮은 툴인 듯.. 

 

깃으로 협업하는게 아직은 익숙하지 않지만 부딪혀가며 익숙해지리라 생각한다..!

 

내일도 시행착오가 가득일듯하다.

이제 프로젝트 기간 절반이 훌쩍 지는데 발표까지 힘내자~~