[2023.03.15] 프론트엔드 스쿨 오늘의 TIL

컴포넌트 Components

 

컴포넌트(component)란❓ 

여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위를 말한다.

재사용 가능한 각각 독립된 모듈

웹페이지를 만들기 위해 마크업을 하고, CSS 스타일을 입혀서 사용자에게 보여주는 것도 중요하지만,

개발자 입장에서 중요한 것은 유지보수이다. 유지보수를 잘하려면, 처음에 개발할 때부터 잘 정돈된 코드를 짜는 것이 중요할 것이다. 그렇지 않다면 유지보수하는데 굉장히 오래 걸리고, 시간을 낭비하게 되기 때문이다.

웹페이지의 마크업이나 css 코드들은 몇백줄 몇천줄이 될텐데, 이를 잘 컨트롤 하려면 컴포넌트가 잘 정돈되어 있어야 한다. 중복되는 요소들을 묶어서 컴포넌트로 만들고 필요한 요소마다 사용하게 되면 불필요한 스타일을 불러오지 않으므로
웹페이지의 최적화가 가능해진다. 성능면에서나, 유지보수면에서 컴포넌트의 중요성은 매우 높다고 할 수 있다.

 

공통 스타일(common), 로그인페이지 스타일(login.css)

-공통 스타일 (common.css)

-로그인 페이지 스타일(login.css)

-메인페이지 스타일(main.css)

 

 

 

 

 

 

 

종찬님 특강..!

 

🧑‍💻웹개발 작업 순서

1. 구조짜기
   
   • 전체적인 레이아웃을 먼저 잡는다.
   • 처음부터 디테일을 정하기 보다는, 큰 덩어리를 위주로 마크업 한다!
   • 큰 덩어리 -> 작은 덩어리 순서
2. 스타일 적용하기
   • 콘텐츠 보다는 스타일 먼저!
3. 콘텐츠 넣기
   
   • 최종적으로 콘텐츠가 들어간다.

 

🧑‍💻초기값

• css property value가 지정되어있지 않을 때, 이미 기본적인 값들이 적용되어있다.
  • initial value(초기값) ex)background-color: transparent, width: auto

 

🧑‍💻CSS 방법론

[CSS방법론] SMACSS, BEM, OOCSS | WIT블로그

 

 

느낀점 및 회고

오늘은 외출할 일이 있어서 수업을 꽉 채워서 듣지는 못했다. 그래서 중간에 따라가기가 좀 힘들었다..

눈 깜빡하면 컴포넌트가 만들어져 있었는데 차마 물어보지는 못하고 눈으로 따라가기 바빴다.

그래도 코드를 복붙하는 것 보다는 직접 타이핑 하는 것이 의미가 있다고 생각해서, 깃헙에 커밋된 내용을 그대로 따라쳐보면서 속성이 화면에 어떻게 적용되는지 눈으로 확인하는 재미가 있었다. 

종찬님 특강은 역시 날 실망시키지 않는다. 저번주 금요일에 들었던 내용을 비슷하게 복습한 느낌이었고, 또 내주셨던 과제를 어떻게 풀면 되는지 해법?도 제시해주셨다. 종찬님이 만든 코드를 보고 나니까 내 코드가 얼마나 부족한지 느껴졌다..

또 다른 사람들은 다양한 애니메이션도 넣고 과제를 제출했던데, 다들 참 대단한 것 같다. 나도 다음엔 좀 더 창의적인 접근으로 과제를 풀어봐야 겠다.

화이팅하자..!