CSS? SCSS?

웹 퍼블리싱에 있어서, HTML 다음으로 가장많이 쓰인다고 생각되는게 있다면 CSS가 아닐까 싶다. 왜냐하면 CSS는 HTML과 함께 웹 페이지를 구성하는 가장 중요한것 중에 하나이기 때문이다.

Cascading Style Sheet의 약자로 이름에서 알 수 있듯이 웹 페이지의 스타일시트 즉, 시각적인 표현을 담당하는 스타일시트 언어이다. (프로그래밍 언어는 아니다.)

Cascading(계단식 진행)으로 진행되기에 상위요소의 스타일이 하위요소에 상속되면서 스타일값이 적용되는 구조를 가지고 있다.

css 작성 이미지

위에서부터 부모요소의 스타일값이 잡히고, 하위요소로 내려오면서 부모요소 즉, 상위요소의 스타일값이 하위요소로 상속되면서 계단식으로 스타일값이 적용된다.

CSS를 사용하다보면 부모요소부터 자식요소로 점점 내려갈때마다 클래스명을 점점 늘려가면서 작성하게 되는데 하위요소로 내려갈때마다 늘어지는 클래스명이 부담될때가 있다. 그런 부담을 덜어줄수있는게 SCSS라는 CSS와는 결이 같으면서도 약간 다른 스타일시트 언어다.

SCSS or SASS

SCSS 또는 SASS라고 불리는데 SASS는 Syntactically Awesome Style Sheets (문법적으로 굉장한 스타일 시트) SCSS는 Sassy CSS (개쩌는 스타일 시트) 의 각각 줄임말로 둘 다 별의미는 없고 멋진CSS다라고 생각하면 된다. 둘 다 문법만 약간 다르고 동작은 똑같고, SCSS가 더 많이 쓰인다.

그러면 CSS의 부담감을 어떻게 덜어주는지 SCSS와 CSS를 비교해보자면,

왼쪽이 SCSS이고, 오른쪽이 CSS인데 SCSS는 CSS과 다르게 여러요소들을 부모, 자식요소의 관계에 맞게 들여쓰는 방법인데 이를 중첩(Nesting)한다고 한다.

SCSS의 좋은 점 3가지

• 중첩(Nesting)을 함으로써 CSS보다 좀 더 간결하게 스타일코드 작성이 가능하다.
• 들여쓰기 때문에 부모, 자식요소간에 계층 구조를 파악하기 수월하다.
• vscode에서 HTML처럼 긴 코드들을 접고 펴고가 가능해서 CSS에서의 스크롤압박이 상대적으로 덜하다.

const products = [
  { id: 1, name: "노트북", price: 1200000, category: "전자제품" },
  { id: 2, name: "헤드폰", price: 300000, category: "전자제품" },
  { id: 3, name: "책상", price: 450000, category: "가구" },
  { id: 4, name: "의자", price: 150000, category: "가구" },
  { id: 5, name: "마우스", price: 50000, category: "전자제품" },
  { id: 6, name: "키보드", price: 100000, category: "전자제품" },
  { id: 7, name: "책장", price: 350000, category: "가구" }
];

// 문제: forEach 메소드를 사용해서 "가구"카테고리 상품들의 평균 가격을 계산하여 출력하세요.

이런식으로 forEach 메소드를 공부하기 위해서 클로드를 통해 forEach를 활용해서 풀어볼 문제를 구했고, 자바스크립트가 아직 익숙하지 않았던 터라 헷갈렸어서 풀이도 구했었다.

let furnitureCount = 0;    // 카테고리가 "가구"인 제품의 갯수(초기값)
let furnitureTotal = 0; // 카테고리가 "가구"인 제품의 총 가격(초기값)
products.forEach(product => {    // products 배열 순회
  if(product.category === "가구") {
    furnitureTotal += product.price; // "가구" 제품 총 가격을 누적하고 할당.
    furnitureCount++; // "가구" 제품을 찾을 시 count를 세고 값 할당.
  }
});

let furnitureAvg = furnitureCount > 0 ? furnitureTotal / furnitureCount : 0;
//             ※※※※여기서 의문이 들었다. 왜 삼항연산자를 쎴을까?※※※※

console.log(`가구 평균 가격: ${furnitureAvg}원`);

let furnitureAvg = furnitureCount > 0 ? furnitureTotal / furnitureCount : 0;

해석하면 가구 개수가 0보다 높으면, 가구의 총 가격을 가구 개수만큼 나누고 아니면 0을 반환

이렇게 일텐데. 첨에는 그냥 나누면 되지 않을까 싶어서 클로드에게 물어봤더니, "'0으로 나누기' 오류를 방지하기 위해서 입니다." 즉, 만약에 products에 가구 카테고리가 없게 되면 furnitureCount가 0이 되고 furnitureTotal과 나누면 오류가 생길수도 있다는 거다. 0으로 나누는 것은 JavaScript에서 Infinity라는 특수 값이 반환되는 거고 이후 계산에서 예상치 못한 결과가 나올 수 있기 때문에 지금 같이 우연히 0으로 나누게 되는 상황이 생길때는 삼항연산자나 if문 같은걸 통해서 "가구가 없습니다"라는 메시지를 주거나 아예 가격을 0으로 표시하는 방법이 괜찮은 방법이라고 한다.

<이런 방어적 프로그래밍은 예외 상황에 대비하여 프로그램이 안정적으로 동작하게 하는 좋은 습관입니다>이라고 말을 덧붙였는데

그러고 보니까 예외처리라고 하는 것도 프로그램의 예외 상황에 대비하는 건데 둘이 무슨차이인지 갑자기 궁금해졌다.

오늘은 이 둘을 비교해보려고 한다.

방어적 프로그래밍

코드가 예상치 못한 상황에서도 안정적으로 작동하도록 설계하는 접근 방식

• 잠재적인 문제를 미리 예측하고 방지하는 데 중점을 둔다.
• 입력 유효성 검사, 범위 검사, null 체크 등을 적극적으로 사용함.
• "실패할 수 있는 모든 것은 실패할 것"이라는 가정하에 코드를 작성.

예외처리

프로그램 실행 중 발생하는 예외적인 상황을 처리하는 메커니즘

• 오류가 발생했을 때 프로그램의 흐름을 제어한다.
• try-catch 블록과 같은 구문을 사용하여 예외를 포착하고 처리한다.
• 이미 발생한 오류에 대응하는 방식이다.

이 둘을 얼핏보면 마치 방어적 프로그래밍은 "문제가 생기게 될 원인을 원천 차단" 이거고, 예외처리는 "문제는 얼마든지 생기니까 생겼을 때를 대비하자" 이거 같다.

마치 MBTI로 치면 방어적 프로그래밍은 J성향같고 예외처리는 P성향같은 느낌 자세히 보니 성향이 다르다. 더 구체적인 차이점을 정리해 보면,

• 방어적 프로그래밍은 문제 발생 전에 예방하고, 예외처리는 문제 발생 후 대응
• 방어적 프로그래밍은 코드 설계 철학이고, 예외처리는 특정 기술/메커니즘
• 방어적 프로그래밍은 오류 발생 가능성을 최소화, 예외처리는 오류 발생 시 적절히 처리하는 것

근데 잘 보면 방어적 프로그래밍은 입력 유효성 검사, 범위 검사, null 체크같이 검수를 하는 성격을 띄고 있고, 예외 처리는 try-catch-finally같은 구문을 사용하는거라 fetch를 쓸 때 오류발생 시 대체를 하는 성격을 띄고 있다. 둘 다 오류에 대비하는 공통점이 있지만 성향과 성격 둘 다 다른걸 알 수 있다.

그렇다는건 두 접근 방식을 함께 사용하는게 오류에 대비하는 가장 효과적인 방법이다.

앞으로 자바스크립트를 사용하면서 어떤 부분이 방어적 프로그램이고, 예외 처리로 썼는지 차근차근 사용해보면서 포스팅해보려고 한다.

let name = "minsu"; // name이 변수명, "minsu"가 변수값.
let country = "korea"; // country이 변수명, "korea"가 변수값.

변수의 특징

• 변수에 값을 지정하는 것을 할당이라고 한다.
• 해당 변수의 값을 읽어들이는 것을 참조라고 한다.
• 메모리상에 존재하며 식별되는 이름이라 다른 말로는 식별자라고 불리며, 이 식별자는 정해진 네이밍 규칙을 따라 선언을 통해 식별자의 존재를 알린다.
• 변수명을 지정하기전 꼭 var, let, const같은 키워드를 먼저 작성해야한다.

네이밍 규칙

• $, _ 이 두 가지의 특수문자로만 먼저 시작해서 네이밍을 할 수 있다.
• 숫자도 포함 할 수 있지만, 먼저 시작해서 네이밍을 할 수 없다.
• 예약어로 네이밍할 수 없다.
• 될 수 있으면 변수명은 변수가 가지고 있는 의미에 맞게 명확히 네이밍해야 한다.

  let $fruit = "apple"; // 가능
  let _fruit = "orange"; // 가능
  let fruit1 = "grape"; // 가능
  let 1fruit = "pear"; // 불가능

변수 키워드 특징

• var : 전역스코프이자 함수스코프인 특성을 띄는 키워드로써 재선언, 재할당이 되지만 이것으로 문제가 되어 최근에는 사용빈도가 적다.
• let : 블록스코프로 재할당은 되지만 재선언은 불가능하다. 많이 쓰이는 키워드이다.
• const : 블록스코프로 재선언, 재할당은 불가능하다. const는 let, var와 다르게 재할당이 불가능해서 재할당이 금지된 변수인 상수에도 쓰인다. 꼭 선언과 동시에 할당해줘야 하고 초기화해야 한다. const에 할당된 객체는 값을 변경할 수 있다.

  var a = 123; // 123

var a = 123; var a = 456; // 456 재선언 O

var a = 123; a = 789; // 789 재할당 O

let b = 123; // 123

let b = 123; let b = 456; // syntax error 재선언 X

let b = 123; b = 789; // 재할당 O

const c = 123; // 123

const c = 123; const c = 456; // syntax error 재선언 X

const c = 123; c = 789; // syntax error 재할당 X ```

[출처] - https://survey.stackoverflow.co/2024/technology#most-popular-technologies-database-prof

리액트는 프론트엔드 개발 업계에서 정말 높은 점유율을 자랑하는 도구로써 수많은 업체에서 사용할정도로 많은 사랑을 받고 있다. 그러면 도대체 어떤 이유로 리액트라고 하는 라이브러리가 많은곳에서 사용되고 있고 있는지 궁금해지게 된다. 지금부터 리액트를 많이 사용하고 사랑받고 있는지 알아보자.

리액트의 특징

1. 컴포넌트화 시킨다.

2. JSX를 사용한다.

3. VDOM(가상돔)의 활용.

솔직하게 말하자면 리액트를 아직 완벽하게 알지 못하지만 제대로 알지못하는 시점에서 리액트에 대해서 뭉뚱그려서라도 알고 있는건

리액트는 JSX를 통해 쉽게 작성할수 있고 컴포넌트화 해서 재사용성이 뚜렷하며 VDOM을 활용해 불필요한 DOM조직을 줄여 성능을 최적화 시켜준다.

이런부분들 때문에 개발자 입장에서도 유지보수하기 편하고 사용자 입장에서도 해당 웹페이지를 좀 더 쾌적하게 사용할 수 있다고 생각한다.

위에 세가지 말고도 다양한 플러그인을 가져와서 활용할 수 있거나, HOOK을 사용해서 좀더 간편하게 로직을 사용할 수 있다든지 하는 장점들이 있지만 개인적으로 느끼기에는 위에 세가지가 리액트를 사용하는 이유이지 않을까 싶다.

1. 컴포넌트화

먼저 리액트의 장점 중 하나인 컴포넌트는 웹페이지의 UI를 구성함에 있어서 어디에서든 재사용이 가능한 예를들어 하나의 블록이나 벽돌을 생각하면 될거같다. 여러 곳에서 재사용을 할 수 있기 때문에 웹페이지의 UI를 관리하거나 업데이트를 하기 수월하다.

컴포넌트는 자체적인 상태와 로직을 가질 수 있는데 이런 컴포넌트들은 독립성을 띄고 있어서 코드의 중복성을 예방할 수 있고 컴포넌트에서 필요한 인터페이스들을 가져올수 있기 때문에 실용성이 있다.

2. JSX

JSX란 JavaScript(JS) + XML(X)의 약자이고 XML이 HTML과 다르지만 HTML처럼 태그를 사용하기 때문에 쉽게 말하자면 자바스크립트를 HTML처럼 태그를 사용해서 정의한다고 생각하면 된다. 태그를 사용하기 때문에 개발자입장에서는 좀더 직관적으로 코드를 작성할 수 있게 하며, 특히 컴포넌트를 만들때 유용하게 사용 할 수 있다.

3. VDOM(가상돔)

가상돔은 DOM이긴 하지만 말 그대로 실제로 존재하진 않고 DOM을 가져오기 이전에 DOM의 복사본을 가져와 변경하고자하는 UI를 해당 복사본에 적용시켜주고 적용된 복사본 즉, 가상돔을 실제 DOM과 비교해 필요한 변경사항만 DOM에 적용시켜주는 역할을 한다.

DOM을 조작하는건 컴퓨터에게 있어서 부담이 매우 큰 작업인데 가상돔으로 인해서 불필요한 DOM의 조작을 줄여주기 때문에 유지보수에도 용이하고 사용자입장에서도 성능 최적화로 인하여 편리한 사용감을 줄수 있다.

리액트는 이 밖에도 처음에 말한것처럼 다양한 장점들이 있기에 2013년에 나온이후 지금까지 쭉 많은 업체와 개발자들에게 많은 활용과 사랑을 받을 자격이 있는 좋은 라이브러리인거 같다.