Skip to content

Latest commit

 

History

History
225 lines (162 loc) · 10.3 KB

TIL-220714.md

File metadata and controls

225 lines (162 loc) · 10.3 KB

TODAY

TODOLIST

  • 면접
  • 광고 플랫폼 대시보드 SR 회의
  • 플젝 구현 생각해보기
  • 프로그래머스 알고리즘 문제 1개

오늘 면접을 봤는데, 면접관님이 질문하실때마다 의도하신 바를 머리로는 이해했는데 입은 핀트가 나간 말을 주저리고 있었다. 흑역사 생성. ㅜ 기술 질문을 많이 물어볼거라 생각해 프론트엔드 예상 면접 질문을 달달 외워갔었는데 그런것 보다는 문제에 대해 어떻게 해결하려하는지, 팀원과의 의사소통, 공부는 어떻게 하는지, 사용한 기술에 대한 선택 이유, 인생에서 가장 중요한것 등을 물어보셨다. 평소에 느낀것 기반으로 말은 했는데, 모르겠다.

면접에서 아쉬웠던점을 한 번 생각해보자면,

문제를 해결해 나갈때 공식 문서를 기반으로 블로그도 찾아보고 유투브도 보고 깃허브 검색을 통해 남이 작성한 코드도 참고한다고 어필했어야 했는데 못했다. 회사 업무도 이해하기 위해서 이것 저것 찾아봤었는데, 횡설수설해서 이 부분도 날린것 같다. 그리고 코딩테스트도ㅋㅋㅋ 에휴. 플젝끝나고 풀려고 메모장에 대충 적어놨었는데 이걸 물어볼 줄이야ㅋㅋㅋㅋ 그날 왜 안풀었냐ㅠㅠ 아무튼 일단 끝나서 후련하긴 하다.

아 그리고 오늘 면접에서 생각해볼만한 점이 있었는데

  1. 내가 어떤 방향으로 성장해야하는지에 대한 고민을 했으면 좋겠다고 조언해주셨다. 나만의 로드맵이 없긴하다. 공부를 닥치는대로 하고 있긴하지만 올바른 프엔 개발자로 나아가려면 어떻게 해야하는지 사실 모른다. 그냥 리액트 공부, 자바스크립트 공부 딱 이 정도만 생각했다. 다시 생각해보자.

  2. 그리고 모르는걸 질문받았는데 ‘CSS 방법론’에 대한 질문이었다. 나는 이걸 몰랐고... 궁금해서 찾아봤다.

CSS 방법론

방법론은 어디까지나 방법론이기 때문에 정답은 없다. 프로젝트시 프로젝트에 맞게 협업이 용이하게 사용하는것이 좋다.

CSS 방법론 사용이유

  • 협업 시 사람마다 css를 사용하는 방식이 다 제각각이기 때문에 스타일 정의를 통해 유지보수를 쉽게하고 타인이 작성한 코드를 이해하고 분석하는데 드는 시간을 절감하기 위함이다.

대표적인 3가지 방법론

OCSS(Object Oriented CSS)

BEM(Block Element Modifier)

SMACSS ( Scalable and Modular Architecture for CSS)

OCSS

  • 객체 지향에 따른 설계방식
  • 특징: 구조와 외형을 분리하고 컨테이너와 내용을 분리한다.
  1. 구조와 외형을 분리
  • 구조: width, height, border, padding, margin…
  • 외형: color, border-color, font-color, background-color..
//html
<div class="btn common-skin id">id</div>
<div class="btn common-skin password">password</div>


//css
.btn {공통 스타일 정의}
.common-skin{공통 스타일 정의}
  1. 컨테이너와 내용을 분리 (태그 이름을 직접적으로 집는게 아닌 클래스명을 집어 표현하는것)
  • 위치에 의존하지 않는 스타일 정의
  • 어떤 태그라도 동일한 외형 제공
  • 어디에서나 재사요잉 가능한 클래스 기반 모듈 구축.
//css
나쁜 예
h1 {font-size: 30px}

좋은 예
.sub-title {font-size: 30px}


//html
<h3 class="sub-title">...</h3>
<span class="sub-title">...</span>

장점

  1. 공통된 부분을 정의해서 재사용이 가능
  2. 구조적 상황에 관계없이 동일한 클래스라면 동일한 스타일을 기대할 수 있음
  3. 코드의 재사용으로 코드 양이 줄어듦

단점

  1. 공통된 클래스가 많기 때문에 수정이 발생할 시 멀티 클래스를 사용해야 함.
  2. 멀티 클래스가 많아짐에 따라 유지보수에 어려움
  3. 코드의 가독성이 떨어짐
🚀 멀티 클래스란? 
- 택스트 분류
'이 드라마는 지루한 스토리였어' =>  긍정적인지 부정적인지를 나타내는 분류에서 부정적임을 나타냄
즉, 텍스트 분류란 특정 텍스트가 어느 카테고리에 속하는지 정하는것을 의미함

위의 예시를 통해 긍정/부정을 판단하는 것도 텍스트 분류이지만 위의 예시가 드라마에 관한것인지  영화에
관한 것인지 뮤지컬에 관한것인지에 대한 텍스트 분류도 할 수 있다. 카테고리가 둘 밖에 없다면 이진 분류
(binary classfication) 카테고리가 2 초과인 경우 multi-class 텍스트 분류라고 한다.

BEM(Block Element Modifier)

  • 핵심은 클래스명만 사용가능하고(id안됨, 태그명도 안됨. 만약 태그명에 스타일을 주면 마크업이 수정될 경우 스타일도 다시 손을 봐야한다.(의존적)) __(더블 언더스코어)와 —(더블 하이픈)으로 구분하여 직관적이고 명확하게 한다는게 가장 중요한 핵심이다.
block(전체를 감싸고 있는 블록요소)__element(내부 요소)--modifier(기능/수정)
.header__search p {/*태그 변경시 전체적으로 수정이 발생하여 비효율적 */}
.header__search--form {/* 수저잉 발생해도 무방 */}

  • B (전체를 감싸고 있는 블럭요소)

    • block는 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 지칭(그루핑 요소의 가장 최상위 요소)
    • 헤더, 푸터, 사이드바 그리고 메인 콘텐츠 영역을 가지고 있다고 가정하면, 각각의 영역들이 블록으로 간주
    • 블록 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치
    • 일단 블록으로 정의하면, 블록이 형성한 클래스의 어근을 맨 앞에 붙여 그 블록이 포함하는 요소들의 클래스명을 정함

  • E (Element 요소)

    • 요소(element)는 블록이 포함하고 있는 한 조각, 블록을 구성하는 한 요소 단위
    • 요소는 블록 요소에 대한 자식 요소 개념. 따라서 블록 요소에 의존적
    • 블록(block)는 전체를 말하고 요소들은 그 조각들을 일컫고 각 요소는 두 개의 밑줄 표시(underscore)로 연결하여 블록 다음에 위치
    .block__element {property: value}

.header__logo {property: value}
.header__tagline {property: value}

    • M(속성/수정)

      • modifier은 블록 또는 요소의 속성(속성/수정)
      • 이 속성은 블록 또는 요소의 외관이나 상태를 변화시키는것
      • 클래스명을 지을 때의 목적은 그 요소를 반복하여 재사용할 수 있게 하기 위한 것으로 요소의 스타일이 같은 것이라면 사이트의 다른 영역이라 할지라도 새로운 클래스를 정의하지 않아도 무방
      • 특정 요소의 스타일을 수정할 필요가 있을때 modifier만 활용
      • modifier를 구분해주기 위해 요소 또는 블록 다음에 두 개의 하이픈(- -)을 추가하여 modifier을 표시

      ex) 기본 작성법

      .block--modifier {...}
.block__element--modifier {...}
      • 일반적인 방법
      <form class="site-search full">
    <input type="text" class="field">
    <input type="submit" value ="search" class="button">
</form>

출처: https://whales.tistory.com/2 [허도경, limewhale:티스토리]
      • BEM 방법
      <form class="site-search site-search--full">
    <input type="text" class="site-search__field">
    <input type="submit" value ="search" class="site-search__button">
</form>
출처: https://whales.tistory.com/2 [허도경, limewhale:티스토리]

      장점

      • 마크업 구조를 보지 않아도 클래스명(네임)만으로도 마크업 구조를 쉽게 파악이 가능

      단점

      • 클래스명이 너무나 길어지게됨
      • 기존 BEM으로 마크업을 구성한 상태에서 새롭게 기능이 추가되었을 경우 클래스명 재 수정시 네임명 수정이 불편.

      SMACSS(Scalable and Modular Architecture for CSS)

      CSS에 대한 확장형 모듈식 구조의 형태로 5개의 구분된 카테고리로 CSS 코딩 기법 제시하는방법이다. 어떤 카테고리에 스타일이 속하는지 결정하는데 고민해야함.

      • Base - 기본규칙
        • 각 브라우저의 기본 스타일(default.css, reset.css), 요소 element 스타일의 기본 정의 값
      • Layout - 레이아웃 규칙
        • 큰 틀의 레이아웃, 요소를 배치, 규벌하는데 적용
        • 주요 컴포넌트: header, footer, aside, container, content 등
        • 하위 컴포넌트: list, item, form 등
        • 클래스명은 접수사 i-, layout-명시
      • Module - 모듈 규칙
        • 페이지에서 재사용 가능한 요소: 버튼, 배너, 아이콘, 박스 요소 등
        • 각 모듈은 독립성을 가지게 스타일 선언: 재사요잉 가능하게 id, 태그 선택자는 사용하지 않음
      • State - 상태 규칙
        • 요소의 상태벼놔를 표현하는 요소: 툴팁, 아코디언 등
        • active나 disable등이며 suffix ‘is-’나 ‘s-’를 붙여서 사용
        • 모듈과 레이아웃 모두 적용 가능
      • Theme - 테마 규칙
        • 사용자가 선택 가능하도록 스타일을 재선언하여 사용
        • Theme는 전반적인 Look and feel을 정의하며 suffix ‘theme-’를 붙인다.

    • 클래스명을 통한 예측의 용이성

    • 재사용을 통한 코드의 간결화

    • 확장의 용이성

    • 단점

    • 카테고리를 나누는 기준이 작성사에 따라서 불분명해질 수 있음

    • 코드를 나누어서 작성해야 하기 때문에 CSS를 사용하기 번거로움

    • 잘못 사용하면 오히려 의도와 다르게 더 복잡해지고 번거로워지는 코드

    여러방식으로 사용가능하고 방법론들을 섞어서도 사용한다. 정답은 없다.

    출처: https://whales.tistory.com/33