3주간의 우아한테크코스 4기 프리코스 과정이 끝났습니다.
프리코스를 진행하며 학습한 내용들을 정리하고,
혹은 놓쳤던 부분에 대해 추가로 공부하여 보완한 내용들을 포스팅해보고자 합니다.
기능을 구현하기 전에 java-baseball-precourse/README.md 파일에 구현할 기능 목록을 정리해 추가한다.
Git의 커밋 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가한다.
README.md를 상세히 작성하라 미션 저장소의 README.md는 소스코드에 앞서 해당 프로젝트가 어떠한 프로젝트인지 마크다운으로 작성하여 소개하는 문서이다. 해당 프로젝트가 어떠한 프로젝이며, 어떤 기능을 담고 있는지 기술하기 위해서 마크다운문법을 검색해서 학습해보고 적용해 본다.
위 내용은 각각 우아한테크코스 프리코스 요구사항 및 1주차 피드백에 명시된
README.md 관련 내용입니다.
이번 포스팅에서는 더 나은 README.md 파일 작성하기 위한
README.md 파일의 구조와 마크다운 문법에 대해 간략히 정리해보겠습니다.
샘플
언제나 가장 빠르고 효율적인 학습법은 좋은 모델을 찾아 모방하는 것이라고 생각합니다.
좋은 모델을 찾기 위해 readme markdown best practice 등의 검색어로 검색도 하고,
기존에 알고 있는 레포지토리 등을 방문하기도 했습니다.
최종적으로 최근 사내 교육 플랫폼 개발을 위해 사용했던 npm 라이브러리를 모델로 선정했습니다.
링크는 여기입니다. react-sortable-tree
(앞서 commit log 컨벤션 포스팅에서 다뤘던 커밋 메시지 및 CHANGELOG.md 자동 생성 등이
react-sortable-tree 레포지토리에도 적용되어있음을 알 수 있었습니다.)
가장 먼저 이 라이브러리를 통해 무엇을 할 수 있는지,
설치와 빠른 시작을 위해서 무엇을 해야 하는지,
상세 커스터마이징을 위해서 어떤 옵션들이 사용가능한지
순차적으로 가독성 좋게 명시되어 있다는 점에서 선정하게 되었습니다.
구조 분석
react-sortable-tree의 README.md 파일의 크게 세 부분으로 나누어 볼 수 있습니다.
첫째, 대표 이미지와 제목, 뱃지 및 간략한 설명으로 기본 정보를 나타내는 부분
둘째, 오퍼레이션 GIF와 목차를 통해 추가적 정보를 나타내는 부분
셋째, 설치와 사용 방법 및 상세 설명을 나타내는 부분
[ 기본 정보 ]
대표 이미지
제목
구분줄
뱃지
프로젝트 간략 설명
[ 추가 정보 ]
오퍼레이션 GIF
목차
[ 상세 정보 ]
제목
구분줄
간략 설명
코드스니핏 or 표 or ul그러면 이제 세 파트에서 사용된 마크다운 문법을 알아보며
한 파트씩 구현해보도록 하겠습니다.
첫번째, 기본 정보
레포지토리에 처음 들어왔을 때 보게 되는 부분이 바로 이곳입니다.
프로젝트에 대한 개괄적인 정보가 담겨야 하며, 보자마자 어떤 프로젝트인지 파악이 되어야 합니다.
위에서부터 순서대로 내용을 살펴보자면 다음과 같습니다.
프로젝트명과 매칭되는 대표이미지를 최상단에 두어
어떤 프로젝트인지 빠르게 예상하며 문서를 접할 수 있게 했습니다.
프로젝트 제목을 가장 큰 글씨로 추가했고,
구분줄을 준 뒤,
뱃지를 통해 통계적 정보를 가독성 좋게 나타냈으며,
간략한 설명을 더했음을 알 수 있습니다.
그러면 위 내용에서 사용된 마크다운 문법을 활용해 1주차 미션에 제출했던 README.md 파일의
최상단 부를 다시 구성해보겠습니다.
기존에는 제목만 덩그러니 존재했는데요,
이제는 우아한테크코스 대표 이미지가 최상단에 있어서
레포지토리에 진입하자마자 우아한테크코스 관련 레포지토리임을 알 수 있습니다.
또한, 제목도 프리코스 미션임을 명시할 수 있도록 내용을 수정했습니다.
이후에는 뱃지와 인용문구를 추가했습니다.
그러면 여기에 적용된 상세 문법 중 추가로 알게된 내용에 대해 좀 더 알아보겠습니다.
<p align="center">
<img src="./woowacourse.png" alt="우아한테크코스" width="250px">
</p>
# 프리코스 1주차 미션 - 숫자 야구 게임
---
> 우아한테크코스 4기 1주차 미션, 숫자 야구 게임을 구현한 저장소입니다.먼저 이미지입니다.
이미지는 README.md 파일과 같은 경로에 이미지를 추가했기 때문에 주소가 ./로 시작합니다.
width로 크기를 지정하고, 가운데 정렬 속성을 준 p태그로 감싸서 가운데 정렬 처리를 하였습니다.
다음으로 뱃지 추가입니다.
뱃지는 shields.io 에서 제공하는 기능입니다.
https://img.shields.io/badge/{라벨명}-{값}-{색상}.svg위와 같은 주소 형식을 이용해 원하는 형식의 뱃지를 만들 수 있습니다.
프리코스 1주차 과제이고, 테스트를 2개 통과했으며, 버전은 1.0.1 이라는 정보를 담아봤습니다.
두번째, 추가 정보
최상단 기본 정보 이후로는 오퍼레이션 GIF와 목차가 나옵니다.
적절한 라이브러리 탐색을 위해 여러 레포지토리를 다니며 느끼는 건,
오퍼레이션 영상이 있냐 없냐가 사용자에게 큰 경험 차이를 가져온다는 점입니다.
그래서 저도 오퍼레이션을 꼭 추가해야겠다 생각했습니다.
추가 정보 부분에서는 GIF를 생성해서 이미지를 링크로 추가하는 것과,
같은 파일 내의 다른 곳의 링크를 목차에 담아두는 작업만 하면 간단히 완료될 것 같습니다.
<br>
<img src="./operation.gif">
# 목차
- [시작하기](#시작하기)
- [기능 목록](#기능-목록)
- [문제 출제](#문제-출제)
- [문제 풀기](#문제-풀기)
- [정답 이후 처리](#정답-이후-처리)
오퍼레이션 GIF 이미지를 생성해서 첨부하였습니다.
목차는 [링크이름](링크주소) 의 형식으로 목차를 생성하였습니다.
세번째, 상세 정보
상세 정보는 내용은 다르지만 구조는 모두 비슷합니다.
제목, 간략한 설명(생략 가능), 상세 정보입니다.
저는 시작하기에는 코드 스니핏을, 기능 목록에는 ul을 적용해보았습니다.
레포지토리를 Clone 하고 IDE에서 애플리케이션을 실행합니다.
```git
git clone -b as --single-branch https://github.com/hj-rich/java-baseball-precourse
```
---
## 기능 목록
### 문제 출제
- 1부터 9까지 서로 다른 임의의 수로 이루어진 3자리의 수가 생성된다
### 문제 풀기
- `숫자를 입력해주세요 : ` 가 콘솔에 출력된다
- 사용자로부터 서로 다른 3자리의 수를 입력 받는다
- 잘못 입력된 경우 `IllegalArgumentException`을 발생시키고 애플리케이션을 종료시킨다
- 정상 입력된 경우 입력에 따른 결과를 판정한다
- `1볼 1스트라이크` 와 같이 볼과 스트라이크 갯수를 표기한다
- 하나도 맞추지 못했을 때에는 `낫싱` 을 표기한다
### 정답 이후 처리
- 정답을 맞췄을 때에는 `3스트라이크`에 추가로 게임 종료 메시지 출력 및 재시작 분기를 시작한다
완성본
깃허브에 업데이트한 README.md 을 올려두었습니다. 😊
출처
Basic writing and formatting syntax - GitHub Docs
Headings To create a heading, add one to six # symbols before your heading text. The number of # you use will determine the size of the heading. # The largest heading ## The second largest heading ###### The smallest heading Styling text You can indicate e
docs.github.com
'우아한테크코스 4기' 카테고리의 다른 글
| 우아한테크코스 4기 오리엔테이션 (3) | 2022.02.09 |
|---|---|
| 우아한테크코스 웹 백엔드 4기, 화음을 좋아하는 리차드 (0) | 2022.01.20 |
| 우아한테크코스 4기 프리코스 후기 (3) - Github, Git, 과제제출방법 (0) | 2021.12.17 |
| 우아한테크코스 4기 프리코스 후기 (2) - Commit Log 컨벤션 (7) | 2021.12.16 |
| 우아한테크코스 4기 프리코스 후기 (1) - 자바 코딩 컨벤션 (0) | 2021.12.16 |
