2024. 4. 24. 20:27ㆍ개발자 과정/HTML, CSS, JS
난 또 꾀임에 넘어갔다. 매니저님이 readme는 결국 쓰게 되어있고 기왕 이렇게 된거
이번기회에 템플릿 하나 예쁘게 뽑아보자고 하셔서...
그렇다고 우테코나 기업용 리포지토리에 들어가서 readme만 쪼옥 하고 뽑아오기엔
나만의 깔쌈한 템플릿을 가지고 싶었다.
거기에 나의 닉네임인 "늘푸른"이라고 심볼이 따악 박혀있으면, 얼마나 간지가 넘쳐날까 했다.
ReadMe리포지토리
처음에는 프로젝트 리포에 readme를 그대로 편집하고, 이미지를 넣었는데,
그렇게 하면 커밋로그도 난장판이 되고, 이미지 파일때문에 폴더도 난리가 난다는 피드백을 받았다.
그에 대한 솔루션으로 readme전용 리포를 하나 파서, 거기에 이미지를 몰아넣고, 파일을 편집하면 된다고 하셨다.
이미지는 url로 받아오면 되고, readme를 마음껏 커밋해도 프로젝트에는 로그가 안남으니까,
아주 참신한 방법이라 생각이 되었다.
헤드이미지
https://github.com/kyechan99/capsule-render?tab=readme-ov-file
GitHub - kyechan99/capsule-render: 🌈 Dynamic Coloful Image Render
🌈 Dynamic Coloful Image Render. Contribute to kyechan99/capsule-render development by creating an account on GitHub.
github.com
헤드이미지는 이곳을 통해 제작하였다.
전부 영어로 되어있어 알아먹을 수는 없지만, 똑같은 영어인 코드는 알아먹는 신기한 경험을 했다.
아무튼, 코드를 읽을 줄만 알면 영어설명은 필요없었다.
아이콘
https://www.webfx.com/tools/emoji-cheat-sheet/
Emoji Cheat Sheet
Emoji codes used by GitHub, Basecamp, Slack and other services. Searchable. With emoji meanings.
www.webfx.com
아이콘은 이곳을 이용했다. 원하는 아이콘을 클릭만으로 카피할 수 있어서 아주 쉽게 적용할 수 있었다.
처음엔 아이콘은 그저 꾸미기용이라 생각해 "겉멋?" 이라 생각했는데, 막상 readme가 작성되는 것을 보니,
구간과 구간을 나누는 것에 자연스럽게 구분되도록 인지를 시키는데에 아이콘이 제격이라는 것을 느꼈다.
코드블럭 스타일
```ruby
code
```
```kotlin
code
```
코드블럭을 설정하던 중, ide처럼 가독성이 좋게 컬러를 못넣나싶어 찾아보니,
저렇게 선언 옆에 언어의 이름을 붙이면, 그 언어의 스타일로 코드에 컬러를 넣는다고 하였다.
그렇다면 콘솔창의 결과를 보여주는 코드블럭과, 코드를 보여주는 코드블럭에
색상차이를 둬서, 이를 자연스럽게 구분 할 수 있겠다고 생각이 들었다.
결과
이것으로 나의 심볼이 박힌, 깔쌈하고 멋진 ReadMe 템플릿을 만들었다.
여담
간단한 추상화 클래스 계산기를 만든다는게, 디테일이 쌓이고 쌓여
클래스 구조화, 후위연산 알고리즘, 문자열 파싱 알고리즘이라는 구현 디테일을 넘어
readme 템플릿과 그에 걸맞는 프로젝트 설명이라는 지점까지 도달하게 되었다.
시간이 남는 사람은 호텔예약 프로그램 과제도 해보라고 하던데,
강의수료와 호텔예약프로그램을 전부 하기에는 시간이 부족할거 같다.
'개발자 과정 > HTML, CSS, JS' 카테고리의 다른 글
첫 토이 프로젝트 회고록 (0) | 2024.04.19 |
---|---|
현재화면 스테이터스 저장하기 (0) | 2024.04.16 |
화면크기에 따른 버튼크기 재설정 (0) | 2024.04.16 |
초기화, 동적크기 슬라이드 만들기 (0) | 2024.04.15 |