[현황] 아직 작성중인 글입니다!
프로젝트 레포
프로젝트 기획 - Back to the basics
(작성: 2023.06.25)
길다면 길고, 짧다면 짧았던 9개월의 실무 경험, 그리고 퇴사.
재취업 전까지 개발의 기본기를 공을들여 조금 더 다지고 싶었습니다. HTML, CSS, Javascript, Web API, React 뿐 아니라 개발환경과 개발 전반에 대해서요.
물론 나태함과 좌절 속에서 무기력했던 시간도 많았지만, 수행하는 마음으로 이 프로젝트를 시작합니다. 개발은 운동과 같아서, 꾸준히 하는 것이 곧 실력이 된다는 말을 어디서 들은 것 같아요.
이 프로젝트는
25 Beginner JavaScript Project Ideas에서 영감을 받았습니다.
HTML, CSS, Javascript의 기초를 다지는 프로젝트. 25가지의 JS 미니 프로젝트들을 모은 하나의 페이지를 작성하고, 배포는 github.io 로 수행하는 것까지가 이 프로젝트의 1차 목표입니다.
이번에 저는 많이 사용하던 React, styled-components를 사용하지 않고 모든 것을 내 손으로 직접 작성해 보려고 합니다.
많은 도움을 준 출처
w3c school html tutorial
freecodecamp
많은 분들이 알고 계시겠지만, 기본기를 다질 떄 참 유용한 사이트들입니다.
목적
- HTML 시멘틱 태그를 적절히 사용하고, 각 태그의 속성들을 복습하기
- CSS의 grid, flex를 통한 레이아웃 연습하기. 몰랐던 속성이 있다면 정리해보기
- JS로 DOM을 조작하는 적절한 방법 고민하기
- 브라우저 API들 중, 자주 사용되는 API 연습하고, 정리하기
프로젝트 세팅
HTML formatter with VSCode
여기 친절하게 나와있었어요. 한 번 따라해볼까요? ㅎㅎ
PR Template
기능 중심으로 개발하여, 각 PR은 작은 단위의 기능이 되기를 원합니다. 그러한 이유로 PR 작성이 잦아질 것으로 생각이 되고 있어요. 그렇지만, 매번 다른 양식의 PR이라면, 다른 사람들이 보기에 일관성이 없어보이고, 또 작성자조차도 PR에 많은 시간을 할애하게 될 것입니다. 그런 까닭에 PR Template을 추가해 보도록 하겠습니다.
실무에서도 PR Template을 조금 더 세분화해서 추가했었는데요, Feature, Bug, Hotfix로 추가를 했었습니다.
그렇다면 좋은 PR 이란 무엇일까요?
How to Create a Good Pull Request — with Examples and Templates
좋은 PR은 내가 무엇을 개발했는지 명료하게 읽는이에게 전달할 수 있는 PR이라고 생각합니다.
그러면 어떻게 내 작업을 내 동료에게 명료하게 설명할 수 있을까요? 바로 적절한 순서와 기능으로 분리된 커밋들이 바로 그 역할을 합니다. 아래 첨부한 블로그글에서는 API 로부터 받아온 아티클을 보여주는 페이지를 개발하는 예시를 들었어요. 조금 설명하자면,
(잡담) 컨벤션
컨벤션이라는 말을 많이 들어보셨을텐데요, 쉽게 말해서 개발 과정에서의 약속입니다. 약속의 대상은 변수, 함수 등 각종 네이밍부터 문서화까지 다양하고, 약속의 단위는 해당 코드와 연관된 팀 단위로 설정되는 경우가 많을 듯 합니다.
컨벤션은 개발 시스템이 잘 되어있다고 평가받는 회사(보통 대형 IT기업들) 또는 팀의 컨벤션을 벤치마킹해서 정하는 경우도 있는데, 아무래도 많은 인원들이 오랜 시간 정립해놓은 규칙을 차용하는 것이 대체로 유리하다 생각하기 때문인 것 같아요. 컨벤션을 일일이 정하는 시간이 줄어드니까요 ㅎㅎ.
어떻든 간에, 이 약속이라는 것은 개발과정에서 지키도록 노력해야 합니다.
코드에 대한 약속을 지키면 다음과 같은 이점이 있는 듯 합니다.
- 내 코드를 팀원들이 보기가 쉬워 질 높은 코멘트를 받아 서비스의 완성도를 높일 수 있고, 그 반대로도 마찬가지입니다.
- 신입 개발자가 새로 합류하는 경우에도 더 빠르게 기존 코드를 파악할 수 있어 온보딩 비용이 줄어듭니다.
- 이런 것들이 쌓이고 쌓여 팀 전체의 개발 효율을 높여줍니다.
물론 아직 체계가 정립되는 과정을 겪고 있는 회사라면 컨벤션이 조금 느슨한 면도 있는 것 같습니다. 그럴 때는 내가 주도적으로 컨벤션 관련 건의를 하고, 함께 컨벤션을 정립해가면 되겠네요! ㅎㅎ 생각만해도 정말 뿌듯하겠어요!
Commit Message Practices - 커밋 메시지 컨벤션
흔히들 이런 식으로 커밋 메시지를 작성하라고 배웠었다.
그런데 다른 개발자들도 이렇게 작성할까? 나는 커밋 메시지에 대해 제대로 알고 있는걸까? 라는 생각에 내 장기인 무한검색(a.k.a 삽질)을 시행했다.
feat: Add component ~ 링크-How to Write Better Git Commit Messages – A Step-By-Step Guide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<title>25 Vannilla JS Projects</title>
</head>
<body>
<main class="App">
<a href="./projects/first/first.html">
<div class="project-card">Hello</div>
</a>
<button onclick="alertButton">button</button>
</main>
<script src="./main.js" type="module"></script>
</body>
</html>폰트를 추가해보자
폰트를 미리 설정해놓으면 여러모로 편리하다. styled-components나 MUI를 사용할 때는 글로벌 스타일 컴포넌트로 폰트를 관리했었는데, 바닐라 JS로는 어떻게 폰트를 관리하는 것이 좋을까? 일단 폰트부터 추가해봅시다.
외부 폰트를 추가하는 방법에는
- CDN링크를 html에 직접 삽입하는 방법
- css에서 font-family 로 적용하거나,
- css에서 import 해오는 방법 크게 세 가지가 있습니다.
이 세 가지 중, 저는 첫 번째 방법을 선택했어요. 그 이유는 모든 컴포넌트에서 동일한 폰트를 사용할 예정이기 때문이죠. css파일에서 모든 요소에 적용되게 설정해도 괜찮을 것 같습니다. 각자 관리하기 쉬운 방법으로 진행해보도록 하지요. 단, 위 방법들을 한 번씩 해보고 나서 1번으로 돌아가도록 하곘습니다.
그런데 우리가 폰트를 쓸 때 항상 궁금해하던게 있다.
rem, em 좀 어떻게 해봐…
좋은 글이었으니, 여러분들도 한 번 읽어보시면 좋을 듯 싶습니다.
나는 내 컨텐츠가 브라우저 폰트를 키우더라도 깨지지 않았으면 좋겠다.
구글 Poppins 폰트의 CDN링크를 내 프로젝트에 적용해보자
HTML 속성(attribute) 복습
HTML 속성이란, HTML 요소에 대한 추가적인 정보를 제공하는데 사용됩니다. HTML 요소 별로 고유 속성은 다를 수 있으니, 여러 태그들을 사용해보면서 어떤 속성들이 존재하고, 또 필수인지 알아가면 좋을 듯 합니다.
가령 태그는 하이퍼링크를 정의하는 태그인데요, href 라는 속성에 연결하고 싶은 URL 또는 페이지 링크를 명시해주시면 됩니다.
<a href="www.youtube.com">Visit Youtube</a><img> 태그는 이미지를 HTML 페이지에 엠베드할 때 사용됩니다. 그러면 어떤 이미지를 엠베드할 지 이미지에 대한 경로(절대경로, 상대경로)를 태그에 명시해주어야겠지요? src 속성이 바로 그 역할을 합니다. 재밌는 점은, img 태그는 인라인요소이고, 비어있는 요소이기 때문에, 클로징 태그를 필요로 하지 않고, 저렇게 단독으로 사용됩니다.
<img src="img_girl.jpg"/>그런데 만약 경로가 잘못되었거나, 어떠한 이유로 이미지가 제대로 로드되지 못한다면 어떨까요? 아마 사용자는 원인도 모르고, 어떤 이미지가 있던 자리인지 몰라 답답할 수도 있을겁니다. 그래서 img 태그에는 보통 alt 속성을 함께 명시를 해줍니다. alt 속성은 이미지에 대한 대체(alternative) 텍스트입니다. 강아지 이미지에 대한 alt 문구는 “강아지” 가 좋겠네요 ^^. alt 속성은 사용자가 납득할 정도로 상세하게 적는 편이 개인적으로는 더 좋아 보입니다.
alt 속성은 SEO 측면에서는 크롤러에게 이미지 정보를 알려줄 때 사용되고, 접근성 측면에서는 스크린리더에 이미지 정보를 알려주는 역할을 하기 때문이기도 하지요.
src, alt 속성 외에도 이미지의 크기를 지정하는 width, height 속성들도 있습니다. 당장 VS Code를 열어
! (느낌표) + 탭키를 눌러 기본적인 HTML 문서를 생성하고, Live Server Extension을 설치하여 브라우저에서 직접 태그들을 작성해 보는 것도 참 좋은 방법일 것 같습니다. 저는 게으름이 참 많아서 그냥 눈으로 보고 넘기는 경우가 다반사였는데요, 그러다보니 참 놓치는 부분이 많았다는 것을 이제야 깨달아 아쉬워요. 여러분들은 이 글을 읽는 김에 직접 코드를 짜 보시는 것을 강추드립니다.
HTML Class 복습
클래스를 사용하는법은 아는데, 그러면 어떠한 DOM 요소가 특정 클래스를 가지고 있는지 아닌지를 알 수 있는 방법은 없을까?
element.classList.contains(클래스이름)Check if an Element Contains a Class in JavaScript
잠깐~!!! 멈춰~!!!
여기서 이대로 뒤로가기를 누르면 안됩니다. element.classList 라는 녀석이 무엇인데, 이런 매서드를 가지고 있는지 같이 알아봐야 해요. 이거 알면 다른 친구들한테 자랑할 수 있을테니까요.
Element: classList property - Web APIs | MDN
UI 만들기
메인 페이지에서 만들고자 하는 컴포넌트
상단 네브바
하단 카드 레이아웃 디자인
프로젝트로 만들고자 하는 컴포넌트
heading - with rem
각 헤딩은 기본 사이즈를 가지고 있습니다. 그렇지만, HTML 태그에 style속성, 또는 CSS의 font-size 속성으로 각 헤딩의 사이즈를 재설정할 수 있습니다.
크롬 브라우저 기준으로 기본 폰트 사이즈는 16px 입니다. 그리고 디자인적으로 8의 배수로 폰트 크기가 조절이 되니까, h1은 16px의 2.5배 = 40px = 2.5rem 이런 식으로 계산이 됩니다. 변환이 조금 귀찮지만, rem으로 설정해두는 것이 좋아보입니다. 그래야 사용자가 나중에 브라우저 폰트 사이즈를 바꾸더라도 우리가 만든 페이지의 글씨도 그에 맞춰 크기가 조절될 테니까요.
button
input
form
각 컴포넌트 오른쪽에는 html css js 코드도 넣고 싶다.
card
card carousel
slider
navbar
menu
dropdown menu
modal
modal with varying size
국제화 기능 추가
화이트 테마, 다크 테마 적용
프로젝트 링크로 이어질 카드 UI 가 필요했다
카드는 어떻게 만들 수 있을까
프로젝트 리스트
각 프로젝트에 대한 진행 과정과 회고는 아래 링크에서 확인해보실 수 있습니다.
