🎨 nomadcode challenge - css
semantic tag
html과 css로만 정적 웹사이트를 구현하면서 그동안 신경쓰지 않았던 시멘틱 태그에 대해 알아보았다.
div나 span에 class, id 명을 쓰는 것보다 header, main, footer와 같이 의미가 담긴 태그를 사용하면 가독성과 웹접근성, SEO 측면에서도 좋다고 한다. 무심코 div와 span을 남발해왔는데 앞으로는 태그 사용시 신경써서 작성할 생각이다.
<nav>태그에 주로 ul과 li를 사용을 많이 한다. 보통 페이지가 전환되거나 변화가 일어나도 자리를 유지하는 특징이 있다.<article>은 다른 페이지 어디에 갖다 놓아도 그 자체로 의미가 있는 완전한 컨텐츠.<article>안에서<section>은 단락 구분을 할 때 사용한다.<section>은 같은 의미를 가진 컨텐츠들을 묶는 역할을 한다. 한 페이지 안에 추천글과 최신글들이 있다면 각각이<section>으로 묶일 수 있다.
grid
웹페이지 중에 가로 사이즈를 줄이면 어느 순간 일렬로 나열된 블럭들이 아래로 차곡차곡 쌓이는 효과를 보이는 걸 보면서 저걸 어떻게 구현하는가 궁금했는데 grid를 사용하면 아주 간단하게 해결된다. 챌린지 하면서 아래 코드를 톡톡히 활용하는 중이다.
grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
코드를 해석하자면 하나의 셀(칸) 가로 크기가 400px 이하로 떨어지기 전까지는 같은 비율(1fr)로 가로화면을 꽉 채우게(auto-fit) 하라. 만약 4개의 셀이 꽉 채우고 있다가 가로 화면을 줄여서 400px보다 작아지게 된다면 2개의 셀이 아래로 내려가 그 상태에서 화면을 꽉 채우는 식으로 작동한다.
react
인프런 - boilerplate
- boilerplate : 한 번 만들어 놓고 매 프로젝트에 가져다 쓸 수 있도록 재사용 가능하게 구현된 하나의 폼(ex. 회원가입, 로그인)
최근에 함수형프로그래밍을 공부하고 boilerplate 강좌를 들으니 하나의 기능을 가진 코드 조각들을 github 같은 저장소에 보관해뒀다가 필요할 때마다 가져다 쓰면 업무 효율성이 높아지겠구나 생각이 들었다.
그동안 dotenv 로 비밀설정값을 감췄다. 강의에서는 config 폴더에 dev.js(개발용 환경설정)와 prod.js(프로덕션용 환경설정)을 두어 NODE_ENV를 조건문으로 두 파일을 선택적으로 export하는 방식도 있다는 것을 알았다.
