1. Markup을 먼저 하자!
애초에 HTML 약자도 Hypertext Markup Language다.
기본적인 화면 구성을 개략적으로 그려야 어떻게 색칠할것인지, 어떤 동작을 할것인지를 정할 수 있다.
1) 화면 도안 그리기
어떤 화면을 만들고싶은지 머릿속으로만 생각하면서 만들다가 나중에 다 까먹은 기억이 있다.
아이패드로든 연습장이든으로 자세하게 안그려도 되니 어떻게 만들지 스케치를 하자.
솔직히 프로젝트를 진행하면서 이러이러하게 만들어달라고 그려다가 주는게 정말 고마웠다.
하지만 이제 내가 스스로 그리려고하니 이거부터 참 어려웠다...ㅠ
2) 코드 입력하기
개략적인 그림을 바탕으로 블록을 하나하나 입력해본다.
쌩 html로 입력할때는 Live Server를 통해 어떻게 출력되는지 보고, React는 뭐 바로바로 나오니까..
차이점은 React는 컴포넌트를 입력해서 본다는정도..?
아직 경험이 많이 없어서 이렇게 느끼는것같다.
3) 샘플 데이터 입력하기
화면이 어케어케 출력되긴 하지만, 어쨌든 왠만한 페이지는 데이터를 출력한다.
즉, 어떻게 데이터가 출력되는지도 확인을 해야한다는 뜻이다.
따라서 출력된 데이터를 어떻게 디자인을 해야할지도 고려를 해야하기 때문에 샘플데이터 입력은 필수!
2. CSS를 적용해보자!
어설프게 출력되긴 하지만 어쨌든 화면에 보인다.
배치를 하고 색깔을 입히면서 변화되는 모습을 시시각각 확인한다.
1) 공통요소부터 먼저 적용하기
각각의 데이터에 색칠을 하는거보다는, 공통적으로 많이 사용되는 부분부터 먼저 적용한다.
* {
box-sizing: border-box;
}
ul {
padding: 0;
}
button {
outline: none;
background: transparent;
border: none;
cursor: pointer;
}
body {
background-color: cornsilk;
text-align: center;
}모든 button은 공통적으로 어떻게 꾸밀것인지, 데이터가 보여지는 body 부분은 색을 어떻게 입히고 데이터를 어떻게 정렬할 것인지 등 CSS 또한 전체적인 틀을 먼저 잡아야한다.
2) 위에서부터 순서대로 적용하기
어쨌든 유지보수를 하려면 개발자가 알아보기 쉽게 코드를 작성해야한다.
CSS 또한 마찬가진데, 출력되는 화면의 요소가 위에서부터 아래로 CSS를 차근차근 작성하는것이 좋다.
class가 header - section(section_table, section_button) - footer 순으로 있다면,
.header, .section, .section_table, .section_button, .footer 순으로 작성해야 나중에 알아보기도 쉽고, 또 계속 코드를 작성하면서 확인하고 수정하기도 편하다.
3) 다양한 사이트를 사용하기
그냥 쌩으로 색깔을 입히고 애니메이션을 적용하기에는 나는 아는것이 너무 없다.
아이콘, 그림자, 그라데이션, 애니메이션 등을 사용할때 유용한 사이트가 많다.
꼭 찾아서 사용법을 익히고, 이를 통해 개발 시간을 줄이자.
CSS Gradieant : 그라데이션
CSS matic : 그라데이션, 그림자, 텍스쳐, 라디우스
html-css-js.com : html/css/js의 각종 효과들
3. 이벤트를 적용하자!
1) 공통적으로 발생하는 이벤트를 먼저 찾기
많은 페이지에서 이벤트가 발생한다.
한꺼번에 다 작성하려하지 말고, 가장 자주 공통적으로 사용되는 이벤트를 찾자.
한번 만들어 놓으면 여러 다른 이벤트에서 자주 사용되기 때문에 일단 마음도 편하고, 빨리 코드를 작성할 수 있다(경험상...)
2) 덩어리가 큰 아이템부터 순서대로 변수 선언하기
이벤트를 만드려면 어쨌든 어떤 한 아이템에 대해 변수를 선언하고, addEventListener를 사용해 이벤트를 추가해야한다. 그리고 아이템 목록에 아이템을 추가하려면 목록에 대한 변수도, 아이템에 대한 변수도 선언해야한다.
이럴때는 덩어리가 큰 아이템을 먼저 찾아서 변수를 선언하면 편하다.(역시 내 경험..)
어쨌든 아이템 리스트에 아이템을 추가해야 하는것이기 때문에, 먼저 아이템 리스트를 먼저 변수 선언을 하고(ItemList), ItemList에 appendChild할 아이템(Item)을 변수로 선언한다면, 조금 더 직관적이고 혼란스럽지 않게 코드를 작성할 수 있었다.
- 아이템 리스트가 가장 크니까 아이템 리스트를 먼저 변수로 선언해야지!
- 리스트에 아이템을 추가하는 함수를 구현해야겠구나!
- 어 그러면 아이템을 만드는 함수를 구현하고, return값을 리스트에 추가하면 되겠구나!
- 이 함수를 동작시킬 이벤트를 만들어서 버튼에 적용해야겠군!
이런식으로 코드를 작성했던것같다ㅋㅋㅋㅋ
3) 핵심기능을 만들고, 부수적인 기능은 차근차근 만들기
아이템을 리스트에 추가해서 스크롤이 생긴다고 가정한다면, 어쨌든 아이템을 추가하는것이 핵심기능이다. 아이템 갯수가 늘어나서 화면이 커지고 스크롤이 밑으로 내려가는걸 해결하는것은 나중에 해야할 일인것이다.
일단 중요한거부터 해결해야지, 아 이거 스크롤 생기는건 또 어떡하지 하다보면 한세월이다...
4) 주석은 간결하게 작성하기
누구나 다 알아봄직한 함수나 변수를 일일히 다 작성하면, 나중에 작성자가 보던 다른 개발자가 보던 주석읽고 코드읽고를 계속 반복해야한다.
즉, 어려운 로직이나 함수가 아니라 쉽고 간결한 부분은 세세하게 작성하지 말고 큼직큼직한 단위로 주석처리를 해도 좋다.
어쨌든 많이 사용해봐야 실력이 늘것같다. 아직은 나도 뭐 만드세요! 하면 뭘해야할지 막막하지만 이렇게 정리해놓아야 앞으로 개발할때 도움이 많이 될것같아서...ㅠㅠ
