[모의 면접] 프레임워크와 라이브러리, CSS, 이벤트 버블링, CORS

• 프레임워크와 라이브러리의 차이점
• CSS, SASS,SCSS
• 이벤트 버블링, 캡쳐링, 위임
• CORS

---

프레임워크와 라이브러리의 차이점

프레임워크

• 애플리케이션의 특정 영역이나 전체 구조를 제공하는 틀
• 개발자는 프레임워크가 제공하는 규칙과 구조에 따라 코드를 작성해야 한다
• 제어의 역전을 제공하며, 프레임워크가 실행 흐름을 제어하고 필요한 기능을 호출한다

라이브러리

• 개발자가 필요한 기능을 사용할 수 있는 도구 모음
• 라이브러리 함수 또는 클래스를 호출해 사용할 수 있다
• 개발자가 직접 코드 흐름을 제어할 수 있다

 

정리

 

프레임워크는 애플리케이션의 구조와 흐름을 제어하여 특정 기능을 제공한다

예를 들어 next.js같이 앱 라우터를 사용함으로 app폴더 내부 page에 자동 라우팅을 사용할 수 있게 하는 것이 구조와 흐름을 제어해 주는 것

라이브러리는 내가 원하는 기능을 사용할 수 있게 해주는 도구 모음으로 비동기함수와 같이 원하는 시점에 데이터를 요청할 수 있게 해 준다

---

제어의 역전 (IOC)
개발자가 아닌, 프레임워크가 직접 구조와 흐름을 관리하는 것
코드의 결합도를 낮추고, 유연성을 높일 수 있다
객체지향 프로그래밍의 경우 
클래스 내부에서 다른 클래스를 직접 생성하고 사용하지만 제어의 역전을 적용하면  외부에서 생성된 객체를 주입받아 사용할 수 있다 이것을 의존성 주입이라 한다

의존성 주입
디자인 패턴 중 하나,
클래스나 모듈이 직접 필요한 객체를 생성하는 것이 아닌, 외부에서 필요한 객체를 주입받아 사용하는 것
각 클래스끼리 결합할 때 독자적으로 사용할 수 있게 클래스끼리 영향을 덜 받기 위해 사용한다

 

의존성 주입에 대한 예시 코드

 

의존성 주입 전

Car 클래스 내에서 직접 Engine 인스턴스(객체)를 생성함으로 Engine에 의존하고 있기 때문에 Engine 클래스의 메서드나 생성자가 변경될 경우 Car 클래스에도 영향을 미칠 수 있다.

class Engine {
    start() {
        console.log("Engine started");
    }
}

class Car {
    constructor() {
        this.engine = new Engine();
    }

    start() {
        this.engine.start();
        console.log("Car started");
    }
}

const myCar = new Car();
myCar.start();

 

 

의존성 주입 후

Car 클래스의 인스턴스를 생성할 때, Engine 인스턴스(객체)를 받아서 사용할 경우 Engine 클래스가 변경돼도  Car 클래스에 영향을 미치지 않는다

class Engine {
    start() {
        console.log("Engine started");
    }
}

class Car {
    constructor(engine) {
        this.engine = engine;
    }

    start() {
        this.engine.start();
        console.log("Car started");
    }
}

const myEngine = new Engine();
const myCar = new Car(myEngine);
myCar.start();

---

CSS, SASS,SCSS

앱 개발에서 스타일을 작성하기 위한 언어

 

CSS

• 웹 페이지 스타일을 정의한다
• 선택자(div)와 속성(id, class)을 사용해 스타일을 지정할 수 있다
• 간단하고 직관적이나, 프로젝트 규모가 클 경우, 유지보수가 어렵다

 

SASS

• css의 확장된 문법을 제공하는 메타언어
• 변수, 중첩 규칙, 믹스인, 상속 기능으로 css코드의 재사용성과 유지보수성을 높인다
• 중괄호{ }와 세미콜론 ; 을 사용하지 않고 들여 쓰기로 구분하며 .sass 확장자를 사용한다

메타언어
다른 언어를 정의하고 확장하는 언어

 

 

SCSS

• SASS의 새로운 버전으로 CSS와 거의 동일한 문법을 사용한다
• 중괄호{ }와 세미콜론 ; 을 사용해 CSS와 같은 형식으로 스타일을 작성할 수 있다
• .css나 .scss 확장자를 사용한다

 

SASS 사용방법 (중괄호와 세미콜론만 추가하면 SCSS 문법)

SASS와 SCSS는 동일한 기능을 제공한다

 

 

1. 변수

변수에 값을 할당하여 사용하는 방법

$primary-color는 변수 선언 후  #3498db라는 색상 값을 할당해  재사용이 가능하다

$primary-color: #3498db

body
  background-color: $primary-color

 

 

2. 중첩 규칙(Nesting Rules)

HTML구조를 반영해 스타일을 그룹화하여 코드 가독성을 높이는 방법

CSS 규칙을 중첩하여 표현함으로 HTML 요소의 계층 구조를 명확하게 표현하고 코드를 보다 읽기 쉽게 만든다

nav
  ul
    list-style-type: none
    margin: 0
    padding: 0

    li
      display: inline-block
      margin-right: 10px

      a
        text-decoration: none
        color: $primary-color

        &:hover
          text-decoration: underline

 

 

3. 믹스인(Mixin)

라벨로 스타일 그룹을 정의하고, 매개변수로 스타일을 지정하는 방법(라벨 이름은 자유롭게 설정가능)

= 또는 @mixin 으로 믹스인 정의

border-radius라는 라벨(속성)을 가지고, $radius라는 매개변수를 받는 스타일 블록.

+ 또는  @include 으로 믹스인을 호출하고 원하는 매개변수를 전달할 수 있다

클래스명 box에 border-radius를 10px 적용한 것

1. @mixin으로 정의하는 방법
@mixin border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -ms-border-radius: $radius
  border-radius: $radius

.box
  @include border-radius(10px)


2. =으로 정의하는 방법
=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -ms-border-radius: $radius
  border-radius: $radius

.box
  +border-radius(10px)

/*
-webkit-border-radius: 웹킷 기반 브라우저에서 사용되는 접두사, 
Safari 및 Chrome과 같은 브라우저에서 사용한다.

-moz-border-radius: 모질라(Firefox) 브라우저를 위한 접두사

-ms-border-radius: 마이크로소프트(Microsoft) 브라우저(예: Internet Explorer)를 위한 접두사

border-radius: 표준 CSS 속성, 위 브라우저들에서 접두사를 사용하지 않는 경우를 대비해 제공한다
*/

 

 

4. 상속(Inheritance)

스타일 규칙을 그룹화하여 속성, 선택자에 그룹화된 css 적용하는 방법

%message-shared는 특정 스타일 규칙을 정의하는 데 사용되는 placeholder(%) (css그룹)

@extend 지시어로 %message-shared를 상속하고 각 클래스에 필요한 추가 스타일을 지정한다.

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend %message-shared
  border-color: green

.error
  @extend %message-shared
  border-color: red

---

이벤트 버블링

• 이벤트가 발생한 요소에서 시작해 부모 요소로 전파되는 현상
• 할아버지 - 아빠 - 손자 요소가 있을 경우, 손자 요소에서 이벤트가 시작되면 상위 요소인 아빠 - 할아버지한테 이벤트가 전파된다

캡쳐링

• 이벤트 버블링의 반대 개념으로, 상위 요소에서 이벤트가 시작돼 하위 요소까지 전파되는 현상
• 캡처링 단계에서 이벤트가 발생한 상위 요소부터 시작해 하위 요소까지 이벤트가 전달된다

위임

• 이벤트가 발생한 요소가 아닌, 그 상위 요소에 이벤트 처리기를 추가해 하위 요소에서 발생한 이벤트를 처리하는 방법
• 리스트 클릭 시 리스트 컨테이너에 이벤트 처리기를 추가하여 각 리스트 고유번호를 전달받음으로 상세페이지로 이동시킨다

이벤트 처리기
특정한 DOM 요소에서 발생하는 이벤트에 대해 실행되는 함수

 

 

정리

 

주로 addEventListener() 웹 API를 이용해 폼 입력이나 버튼 클릭 같은 이벤트를 등록할 수 있다.

브라우저는 이벤트 버블링과 캡쳐링으로 이벤트를 감지하는데, 이벤트 버블링은 하위 요소에서 상위 요소로 이벤트가 전달되는 것이고 캡쳐링은 상위 요소에서 하위 요소로 이벤트가 전달되는 방식이다.

이벤트 위임은 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식.

이벤트 버블링이나 캡쳐링을 방지한 것이 stopPropagation() 메서드이다.

 

 

이벤트 버블링과 캡처링을 통해 할 수 있는 것들

 

이벤트 위임

• 상위 요소에 이벤트 리스너를 추가하여, 여러 하위 요소의 이벤트를 한 곳에서 처리할 수 있기 때문에 동적으로 추가되는 하위 요소에도 이벤트 리스너를 추가할 필요가 없어진다

 

이벤트 전파 제어

• stopPropagation() 메서드를 사용하여 이벤트의 버블링이나 캡처링을 중지함으로 이벤트가 특정 요소까지 전파되지 않도록 제어할 수 있다.

 

생기는 문제

 

1. 이벤트 중첩

• 이벤트가 중첩되어 발생할 수 있다.
• 하위 요소에 이벤트 리스너가 추가되어 있을 때, 상위 요소에도 같은 이벤트 리스너가 추가되어 있으면 불필요한 중복 이벤트가 발생할 수 있다.

2. 이벤트 순서

• 버블링과 캡처링이 동시에 사용될 경우, 이벤트가 전파되는 순서에 따라 다르게 동작할 수 있다.

 

3. 성능 문제

• 이벤트 버블링이나 캡처링을 남용하면 이벤트 핸들러가 불필요하게 많이 호출되어 성능 문제가 발생할 수 있다.( 많은 요소에 대해 이벤트 리스너를 등록할 경우 )

---

CORS (Cross-Origin Resource Sharing)

웹 브라우저에서 다른 도메인, 프로토콜 포트에서 제공하는 소스에 접근할 수 있도록 허용하는 보안 기능

기본적으로 웹 브라우저는 동일 출처 정책을 적용해 같은 출처에서만 리소스를 요청하도록 제한한다

출처란?
프로토코르 도메인 포트번호를 결합한 것

 

Origin(출처)

출처는 URL의 프로토콜(http, https), 도메인, 그리고 포트 번호를 결합한 것

 

• https://example.com:443은 하나의 출처로 간주된다
• http://example.com과 https://example.com은 출처가 동일하지 않음으로 다른 출처이다

 

Same-Origin Policy(동일 출처 정책)

웹 브라우저의 보안 메커니즘으로, 같은 출처에서만 리소스를 요청할 수 있도록 제한한다

• https://example.com에서 로드된 웹 페이지는 https://api.example.com이나 http://example.com와 출처가 다름으로 리소스에 접근할 수 없다

 

CORS 헤더

서버는 특정 HTTP 헤더를 설정해 브라우저가 다른 출처의 리소스를 요청할 수 있도록 허용한다

 

주요 CORS 헤더

• Access-Control-Allow-Origin : 요청을 허용할 출처 지정 *는 모든 출처 허용
• Access-Control-Allow-Methods : 허용할 HTTP 메서드 지정 (예: GET, POST, PUT, DELETE)
• Access-Control-Allow-Headers : 요청에 사용할 수 있는 헤더 지정
• Access-Control-Allow-Credentials : 요청에 자격 증명을 포함할 수 있도록 허용

 

Preflight Request(사전 요청)

브라우저는 실제 요청을 보내기 전에 OPTIONS 메서드를 사용하여 서버에 사전 요청을 보낸다

• 서버는 사전 요청에 대한 응답으로 실제 요청이 허용되는지 여부를 결정하는 CORS 헤더를 포함한다
• 사전 요청은 주로 상태 변경 요청(예: PUT, DELETE)이나 사용자 정의 헤더가 포함된 요청에 사용된다.

 

CORS 작동예시 코드

fetch('https://api.external-service.com/data', {
  method: 'GET',
  credentials: 'include' // 쿠키를 포함한 요청을 허용
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

 

정리

웹 브라우저가 다른 도메인(출처) 자원에 대한 요청을 허용하거나 차단하도록 하는 보안 기능, 다른 도메인에 있는 자원에 안전하게 접근할 수 있도록 한다