크리스마스가 지난 오늘은, 오늘의 코딩을 했다 ㅋㅋ
오늘은 팀 프로젝트에서 있었던 내 스스로의 갈등이 있었다
팀원분들께서는 나보다는 프로젝트나 개발, 지식 어떤 부분에서도 나보다 잘 하신다
내가 맡은 Header와 Footer 부분이 많이 부족한데, 어떻게 해야할지 모르겠는 부분이 많았다
부족했던 점은 먼저 Header에 어떤 요소를 넣을지 고민이었다
내가 만든 Header에는 가운데에 큰 로고 '2Code' 가 적힌 버튼만 있었고, 홈화면으로 넘어갈 수 있는 기능이었다
네비게이션 바에 많은 기능을 넣고 싶었으나, 메인페이지나 상세페이지 등에 이미 다른 페이지로 넘어가는 버튼이 있어서 따로 넣을 기능이 없었다
두 번째로 부족했던 점은 Header 디자인에 관한 내용이었다
이 부분은 HTML, CSS 모두 신경써야되는 부분이었는데 사전 지식이 없다보니 많은 서치를 하고, 적용시켜봐도 해결이 어려운 부분이 많았다
다른 팀원들은 더 나아가 많은 기능을 구현하려고 하는데 사소한 부분에서 막히는 내 자신이 부끄러웠다
하지만,
3일차에 낙담할 수 없다 ㅎㅎ
팀원들에게 내 화면과 코드를 공유하며 수정하고 싶은 부분을 피드백 받고, 도움도 받으며 수정을 완료했다
그 결과, 모르던 CSS 방법도 공유받고, 내가 구현하고자 하는 부분도 설명해드리며 원활한 소통을 통해 깔끔한 Header, Footer를 만들 수 있었다
단예로 생각나는 것은 다음과 같다
CSS 를 적용할 때, <div></div> 내의 <li></li> 안에 또 <a class="클래스명">로고</a>를 넣어서
.클래스명 {} 로 적용하려고 했다 그러나 아무리해도 되지 않았다
그럴때는 쓰임이 없는 태그인 <li></li>를 삭제해 보는 것을 추천한다
바로 문제가 해결되었다
우리 팀은 프로젝트를 잘게 나누어 각자 최선을 다했다
그러다보니 만드는 문서 자체의 수가 많아질 수 밖에 없고 비효율적일 수도 있다
그런데 이 문제를 해결해 준 코드가 있다
먼저 문서들을 연결해주는 코드이다
HTML 구조별로 따로 제작해서 동적으로 연결할 수 있었다
그 기능은 다른 팀원분께서 만드신 함수로 할 수 있었다(아래 사진 참고)
이 기능으로 내가 만든 Header 와 Footer 를 모두 붙여넣지 않아도 원하는 모든 파일에 적용할 수 있어서 좋은 코드 절약이라고 생각했다
$("html 내 원하는 위치 id").load("파일명");
두 번째는 CSS 가 겹치는 부분이 많았는데, 그만큼 코드가 중복되어 낭비가 될 수 있었다
또다른 팀원분께서 CSS 들을 문서들에서 분리하여 따로 CSS 파일로 만들어 주셨다
그리고 그 내용을 바로 사용할 수 있어 같은 형식을 유지하며 코드를 절약할 수 있었다
그렇게 하기 위해서 id 와 class 를 통일하는 것은 필수이다
<head></head> 부분에 <link rel="stylesheet" href="파일명"/> 을 통해 문서 외부의 css 파일을 가져올 수 있다
위 사진은 같은 폴더 내의 css 폴더 내의 reset.css 파일과 styles.css 파일을 불러온 것이다
내 코드를 개발하는 것 뿐 아니라, 다른 사람이 만든 코드를 분석하고, 그 위에 또 내 코드를 적용하는 과정에서 내가 생각하지 못한 많은 부분을 배울 수 있는 것 같다
오늘 하루는 큰 교훈을 주는 것 같다
포기하지 않고 직면하고, 노력하면 뭐든지 해결이 가능하다
꼭 이런 방식으로 앞으로의 많은 일정 모두 이겨내 잘 해내고 싶다
'[Kotlin&Spring] 5기 내일배움캠프' 카테고리의 다른 글
| [Kotlin&Spring] 5기 Github PR 과정 더 알아보기 (0) | 2024.12.31 |
|---|---|
| [Kotlin&Spring] 5기 내일배움캠프 Github organization, fork 와 PR 기능 (2) | 2024.12.30 |
| [Kotlin&Spring] 5기 내일배움캠프 firebase, js (2) | 2024.12.27 |
| [Kotlin&Spring] 5기 내일배움캠프 2일차 (2) | 2024.12.24 |
| [Kotlin&Spring] 5기 내일배움캠프 첫날 (0) | 2024.12.23 |
