제로베이스 HTML/CSS 미션 회고

Zinny·2023년 4월 11일
0

Zero-base

목록 보기
5/8
post-thumbnail

💡

Todo-list에 있는 대로 따라 하다 보니 어느새 첫 번째 과제를 끝냈다. 사실 저번 주에 끝냈지만, 왠지 제출 전 아쉬워 만지작거리다가 오늘 제출했다. 회고에 앞서서 제로베이스 프론트엔드 스쿨 입과 전 내 백그라운드에 대해서 간단히 적어보겠다! 아마 제로베이스를 들을지 말지 고민하는 분들이 내 블로그를 볼 수도 있을 것 같은데 조금이라도 도움이 됐으면 좋겠다 :)

  1. 타 전공 공대생 (화학계열🧪)
  2. 개발 관련 경험 없음
  3. 배경지식이 아예 없는 것은 아니지만 기초 교양 수준
  4. 1년 전쯤, 개발 분야가 궁금해서 생활코딩 html 학습 경험만 있음

이 정도가 내 배경이다. 컴퓨터 관련 자격증은 컴활 1급뿐인 완전 제로베이스 그 자체였다.

HTML,CSS를 공부하며 느낀 점

html은 생활코딩 유튜브 강의를 들어본 적이 있어서 들으면서 아주 어렵지는 않았다. html 강의가 끝나고 CSS 강의를 한, 두강 정도 들었던 기억이 나는데 classid 개념이 생소해서 .#으로 속성을 주고 싶은 태그를 지정하고 스타일링을 하고... 이런 과정이 헷갈렸던 기억이 났다. 좀 겁을 먹고 css 강의를 들어갔는데 과거에 한 번 고민했던 순간이 있어서 그런지 예상외로 이해가 잘 갔고 내가 스타일링하는 대로 모양이 변하는 걸 보는 게 재밌었다.
또 첫 강의를 실습 강의로 배웠는데 개념을 살짝 정리한 후, 바로 실습을 들어가니 어떤 상황에서 사용하게 되는 개념인지 이해가 잘 돼서 효과적이었던 것 같다.

HTML/CSS 공부하면서 어려웠던 개념과 이유

어려웠던 개념은 html에서는 table 속성을 많이 사용하지 않아서 헷갈릴 때가 있다. 그리고 다양한 타입에 따른 input 요소의 속성들이 좀 기억이 안 날 때가 많다. (mdn 문서와 필기한 내용을 찾아보면 금방 다시 기억이 나니 걱정은 안 된다!)
css에서는 가상 선택자와 가상 요소, 선택자 내용이 어려웠었다. 하지만 실습 강의에서의 반복적인 학습과 또 블로그를 작성하며 공부를 하다 보니 [관련 포스팅] 좀 더 명확하게 개념을 이해할 수 있었다. 그리고 헷갈릴 때 내가 내 말로 정리해둔 글을 찾아볼 수 있어서 블로그 포스팅의 중요성에 대해 또 한 번 느꼈다.
처음에는 구역을 나누는 flex와 grid가 어려웠는데 하다 보니 어려운 영역은 아니었다. 대신 하면 할수록 좀 어려운 부분은 background-image에 관한 부분이다. 특히 가상 요소를 통해서 ::before::after와 함께 사용할 때, position을 top과 left 값으로 조정해서 일일이 맞춰주다 보면 이렇게 하는 게 맞을까? 하는 생각도 들었던 것 같다.

제로베이스 온라인 강의 중 가장 도움이 되었던 강의와 이유

제일 도움이 되었던 강의는 네이버 클론 코딩 강의였다. 유난히 이 강의를 들을 때 괴로웠지만, 성장한다는 느낌을 많이 받을 수 있었던 강의였다. 괴로웠던 이유는 강의 시간이 길기도 했고 그만큼 계속 나도 코드를 따라 작성하고 왜 이렇게 코드를 작성해야 했는지 나름대로 머릿속으로 정리도 해야 했고 알 수 없는 오류가 발생하면 3,4시간동안 오류 해결을 위해 끙끙거리던 시간이 있었기 때문이었다.
scss 컴파일 과정에서 오류가 많았는데, 아무리 저장해도 css로 변환이 안 되는 경우가 자주 있었다. 나름 해결책은 vs code 확장으로 들어가서 다시 로드하거나 창을 닫았다가 다시 열거나 재부팅을 하면 거의 고쳐졌던 것 같다. (속성이 적용이 안 돼서 보면 항상 이 문제였다) 그래서 미션을 할수록 vs code 아래쪽에 컴파일러 확장 프로그램이 잘 실행되고 있는지 확인하는 게 습관이 됐다.👀🔪

나만의 공부 팁

이해가 잘 안된다면 정확하게 짚고 넘어가기! 너무 당연한 이야기지만, 특히 개발 분야에서는 정말 중요하다고 많이 느끼고 있다. 나는 이해가 잘 안 가는 개념이 있다면 mdn 문서를 읽어보고 관련 블로그 글을 많이 찾아본다. 나와 비슷한 고민을 한 사람들이나 고수분들의 글을 아주 많이 찾아볼 수 있다. 또 한 개념을 여러 사람의 말로 들으면 정리 안 됐던 개념들이 점차 정리되는 경험을 많이 했었다.

블로그에 정리하기 아직 많은 글을 정리하지는 않았지만, 한 번 블로그로 정리한 개념은 더 머릿속에 오래 남는 것 같다. 일단 공개적으로 쓰는 글이라 몇 번이고 옳은 정보인지 검증하는 과정을 거치게 되는데 그 과정에서 많은 정보를 얻게 된다. 또 글을 구성할 때, 내가 정확하게 이해하고 어디에 쓰이는 건지 알아야 하므로 이해도가 정말 많이 올라간다.

직접 써보기 혼자 공부를 하다 보면 아무래도 갑자기 드는 의문들이 있을 수 있다. 강사님들에게는 당연해 넘어가는 부분이 나에게는 헷갈리거나 모르는 개념일 수 있는데, 그때 강의에 없는 부분이라도 따로 실험(?)처럼 검증을 해보고 넘어간다. 물론 중요한 부분이 아닐 수도 있지만 이 과정을 통해 그 부분은 좀 더 기억에 오래 남게 된다.

미션을 마치며

처음으로 내 손으로 무언가를 만들어냈다는 것에 엄청난 뿌듯함이 있어서 좋았다. 자기 효능감이 쑥쑥 올라가는 느낌! 미션 1,2를 할 시점에 혼자 펫 프렌즈 클론 코딩을 해보려고 헤더 영역과 내비게이션 영역까지 완료하고 (매우 작은 분량이다) 뭔가 해보려고 하다가 바빠져서 손도 못 대고 있는데, 자바스크립트를 하면서도 까먹지 않기 위해서 아주 잠시라도 조금씩 해보는 연습을 해야겠다는 생각이 든다.
미션을 하면서 생각보다 간단하게 한 적도, 머리를 싸매고 이게 뭐야! 하며 끙끙거린 적도 있지만 중요한 건 끝까지 해냈다는 것! 사실 자바스크립트 배우면서 자바스크립트 미션을 내가 할 수 있을까? 하는 마음과 첫 미션처럼 어떻게든 하게 될 것 같다 하는 마음이 동시에 든다. 아직 pass/ fail 결과가 나온 건 아니지만...
그럼 다시 자바스크립트 공부하러... 🏃‍♀️💨

profile
Studying for Frontend

0개의 댓글