제이쿼리의 특성

엘리먼트 선택 및 제어에 용이

$(css 셀렉터).메소드()
ex) . -> class / # -> id

해당 css 셀렉터가 가리키는 모든 엘리먼트에 원하는 메소드(jquery가 제공하는 api)를 동작시킬 수 있습니다. 그리고 모든 제이쿼리 메소드들은 해당 메소드가 동작을 마치고 리턴될 때 자신이 제어했던 엘리먼트를 리턴하기 때문에, 메소드를 연속적으로 꼬리를 무는 것처럼 연결해서 사용할 수 있습니다. 이를 '체인'이라고 부릅니다.

 <ul id="navigation">
      <li class="">test1</li>
      <li class="">test2</li>
      <li class="">test3</li>
      <li class="">test4</li>
      <li class="">test5</li>
    </ul>

    <script type="text/javascript">
      $(".welcome").html("Good morning!");
      $("#navigation li").on("click", function () {
        $("#navigation li").removeClass("selected");
        $(this).addClass("selected");
      });
    </script>

크로스 브라우징 이슈 해결

웹 브라우저에 따라 지원해주는 메소드 및 api가 달라서 발생하는 이슈를 제이쿼리가 알아서 처리해주는 기능이 있습니다.

오늘의 개발지식

스크립트 언어

스크립트 언어는 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 의미합니다. 스크립트 언어는 응용 프로그램과 독립적으로 사용되며, 응용 프로그램을 구성하고 있는 언어와도 다른 언어로 사용되어, 최종 사용자가 응용 프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 도와줍니다.

컴파일 언어

코드가 실행되기 전에, 컴파일러를 거쳐서 기계어로 모두 변환되어 실행되는 프로그래밍 언어입니다. 인터프리터를 거치지 않아도 되기 때문에, 인터프러터 언어보다 속도가 빠른 것이 특징입니다. C언어 계열의 언어들이 여기에 속합니다.

컴파일러

컴파일러는 특정 프로그래밍 언어로 쓰인 소스 파일을 다른 프로그래밍 언어로 바꿔주는 번역기 역할을 합니다. 인터프리터와 대조적으로 컴파일러는 대부분 고급 명령어들을 직접 기계어로 번역합니다.

Compile(컴파일)을 하는 이유

프로그래밍 초기에는 컴퓨터가 바로 인식하는 기계어를 통해서 프로그래밍을 했습니다. 하지만 이런 방식은 생산성, 호환성, 디버깅 등의 거의 모든 면에서 비효율적이었습니다. 따라서 많은 부분이 추상화되어 사람의 언어에 가까운 고수준 언어로 사람이 작성을 하면, 이를 번역기를 통해서 기계어로 번역하여 컴퓨터에게 전달해주는 '컴파일' 과정을 도입하게 된 것입니다. 현재는 프로그램 개발에서 필수적인 개념이 되었습니다.

인터프리터 언어

실행 즉시, 인터프리터를 거쳐서 실행되는 프로그래밍 언어입니다. 인터프리터를 거치는 과정 때문에, 컴파일 언어보다 실행 속도가 조금 느립니다. 대부분의 고급 프로그래밍 언어가 여기에 속합니다. JavaScript, SQL, Python, PHP 등이 있습니다.

인터프리터

프로그래밍 언어의 소스 코드를 바로 실행해주는 컴퓨터 프로그램 또는 환경을 의미합니다. 고급 언어로 작성된 원시코드 명령어들을 한번에 한 줄씩 읽으면서 실행합니다.

인터프리터 언어가 많은 이유

인터프리터 언어는 실행부분을 컴파일 언어로 실행하기 때문에, 프로그래밍 언어를 설계할 때, 원하는 대로 설계하고 구현하기 수월하다고 할 수 있습니다. 실행 시마다 인터프리터를 통해서 소스코드를 한 줄씩 읽으면서 기계어로 번역하는 과정이 필요하기 때문에, 컴파일 언어보다 실행 속도가 느립니다. 하지만 프로그램 수정이 간단하다는 큰 장점이 있습니다.

라이브러리

자주 사용되는 로직의 분류 및 재활용을 위한 코드 모음

scss(Sassy CSS)

css를 편리하게 사용할 수 있도록 추가 기능이 포함된 확장판 스크립트 언어입니다. 중괄호와 세미콜론으로 감싸는 css 형식을 유지하고 있기 때문에, 편리하게 쓸 수 있는 것이 장점입니다. scss는 스크립트 언어이기 때문에, 별도의 컴파일 과정을 통해서 css파일로 변환된 후에 DOM에 적용됩니다. 주요 특징은 다음과 같습니다.

1. 변수 할당 가능합니다.
2. 중첩 기능을 통해 가독성 높였습니다.
3. css 파일을 모듈화해서 분할하고 재사용합니다. -> @use
4. Mixins : parameter를 지정하고 속성을 부여해서 재사용할 수 있습니다. -> @mixin , @include, $theme
5. 속성을 상속받아 사용할 수 있습니다. -> @extend
6. 연산자를 써서 수학적 기능을 활용할 수 있습니다.

BEM 방식

Block, Element, Modifier 의 줄임말로, css를 적용하기 위한 클래스네임을 짓는 방법론입니다. id를 사용하지 않고 class 만을 사용합니다.

'어떤 목적인가'에 따라 이름을 짓습니다. 띄어쓰기가 필요한 두 단어 이상의 이름을 연결할 때는 '-'와 같이 하이픈 하나만 써서 연결합니다.

Block__Element-Element--Modifier

Block

블록은 재사용이 가능한 기능적으로 독립적인 컴포넌트를 의미합니다. 다른 페이지에서도 반복적으로 쓸 수 있는 정도의 독립적인 속성을 가지고 있습니다. 블록은 더 상위의 블록에 포함될 수도 있습니다.

Element

엘리먼트는 블록을 구성하는 단위입니다. 블록과 다르게 소속된 블록에 의존적인 형태를 가지고 있습니다. 볼록 내에서면 의미를 가지고 있습니다.

Modifier

모디파이어는 블록 또는 엘리먼트의 속성을 담당합니다. 변동될 수 있는 속성을 가지고 있는 것에 적용합니다.

참조링크

스크립트 언어
jQuery 생활코딩
scss
css BEM 방법론