🌱 엄마의 코딩성장기록 Day 114 - [CSS 독학] 코코아톡 클론코딩: 프렌즈 화면과 BEM 네이밍의 기록

🌙 기억을 더듬어 그리는 나만의 '프렌즈' 화면

오늘은 카카오톡의 메인이라고 할 수 있는 'Friends' 화면을 만들었다.

이제는 강의를 무작정 따라 하기보다, 영상을 멈춰두고 내 기억을 더듬어 구조를 먼저 짜보려 노력한다.

어떤 요소를 div로 묶어야 할지, 어디까지 섹션을 나누어야 효율적일지 고민하는 시간이 길어졌다.

하지만 이 '고민의 시간'이야말로 내가 진짜 코드를 내 것으로 만드는 과정임을 느낀다.

---

🛠️ 완벽보다는 완성을, BEM 네이밍의 무게

오늘의 가장 큰 수확은 BEM(Block Element Modifier) 방식을 끝까지 유지하며 코드를 완성했다는 점이다.

사실 아직도 클래스 이름을 짓는 건 서툴고 어색하다.

• Block: .user-component
• Element: .user-component__avatar, .user-component__title

알림 배지(nav__notification)의 위치가 미세하게 어색해 보이고, 이름 짓기가 버거울 때도 있었지만 예전처럼 중간에 멈추지 않았다.

모양새를 갖춰가는 화면을 보며 '끝까지 해내는 힘'을 길러본다.

---

📈 19강의 용기, 그리고 멈출 줄 아는 연습

전체 40강 중 어느덧 19강. 절반 가까이 왔다는 숫자가 나에게 큰 용기를 준다.

더 달리고 싶은 마음이 굴뚝같지만, 내일의 새벽 운동과 아이들의 등원 미션을 위해 오늘은 여기서 노트북을 덮는다.

내 몸의 신호에 귀를 기울이고, 적당한 때에 멈출 줄 아는 것도 공부만큼이나 중요한 연습이니까.

"오늘도 충분히 잘 해냈다. 내일은 오늘보다 한 줄 더 단단한 코드를 쓸 수 있기를."

 

#노마드코더 #카카오톡클론코딩 #CSS공부 #BEM네이밍 #웹퍼블리싱 #독학개발자 #육아맘코딩 #프렌즈화면 #프론트엔드꿈나무