코린이[코딩 어린이]

HTTP와 HTTPS의 차이점에 대한 내용입니다.

HTTP( Hypertext Transfer Protocol )와 HTTPS( HTTP Secure )는 클라이언트( 일반 웹 브라우저 )와 웹 서버 간의 통신에 사용되는 두 가지 프로토콜입니다. 이는 인터넷을 통해 데이터가 전송되는 방식의 기본이지만 주로 보안 측면에서 다릅니다.

HTTP와 HTTPS의 차이점은 아래와 같습니다.

1. 보안

• HTTP: HTTP는 설계상 안전하지 않습니다. 일반 HTTP를 통해 전송되는 데이터는 일반 텍스트로 전송되기 때문에 악의적인 행위자가 가로채거나 도청하는데 취약합니다. 이러한 보안 부족은 로그인 자격 증명 및 결제 세부 정보와 같은 민감한 정보가 추가 암호화 없이 HTTP를 통해 전송되어서는 안된다는 것을 의미합니다.
• HTTPS: HTTPS는 보안을 위해 설계되었습니다. SSL( Secure Sockets Layer )또는 TLS( Transport Layer Security )와 같은 암호화 프로토콜을 사용하여 클라이언트와 서버간에 교환되는 데이터를 암호화합니다. 이 암호화를 통해 가로채는 경우에도 데이터는 기밀로 유지되며 승인되지 않은 당사자가 쉽게 해독할 수 없습니다.

2. 암호화

• HTTP: HTTP를 통해 전송되는 데이터는 암호화되지 않습니다. 일반 텍스트로 이동하므로 올바른 도구와 액세스 권한이 있는 사람이라면 누구나 쉽게 데이터를 가로채서 읽을 수 있습니다.
• HTTPS: HTTPS는 암호화 알고리즘을 사용하여 데이터를 암호화하여 통신을 위한 보안 채널을 제공합니다. 이 암호화를 통해 악의적인 행위자가 데이터를 가로채더라도 암호 해독 키가 없으면 읽을 수 없습니다.

3. URL 구성표

• HTTP: HTTP를 사용하는 웹사이트의 URL은 'http://'로 시작하고 그 뒤에 도메인 이름이나 IP 주소가 옵니다. ( ex: http://example.com )
• HTTPS: HTTPS를 사용하는 웹사이트의 URL은 "https://"로 시작하고 그 뒤에 도메인 이름이나 IP 주소가 옵니다. ( ex: https://example.com )

4. 포트

• HTTP: 기본적으로 HTTP는 통신에 80포트를 사용합니다.
• HTTPS: 기본적으로 HTTPS는 통신에 443포트를 사용합니다.

5. 인증서

• HTTP: HTTP 웹사이트에는 SSL/TLS 인증서가 필요하지 않습니다. 결과적으로 사용자가 방문하는 웹사이트의 신뢰성을 확인할 수 있는 방법이 없습니다.
• HTTPS: HTTPS 웹사이트에는 신뢰할 수 있는 인증 기관(CA)에서 발급한 SSL/TLS 인증서가 필요합니다. 이 인증서는 사용자가 웹사이트의 신원을 확인하고 암호화된 연결이 안전한지 확인하는 데 도움이 됩니다.

6. 신뢰성

• HTTP: HTTP 웹사이트는 사용자 데이터 및 개인정보 보호 측면에서 신뢰도가 낮습니다. 특히 온라인 쇼핑이나 개인 계정 액세스와 같은 민감한 거래의 경우 더욱 그렇습니다.
• HTTPS: HTTPS 웹사이트는 더 신뢰할 수 있고 안전한 것으로 간주됩니다. 사용자는 브라우저의 주소 표시줄에서 보안 연결과 SSL/TLS 인증서 존재를 나타내는 자물쇠 아이콘을 찾을 수 있습니다.

7. 검색 엔진 순위

• HTTP: Google과 같은 검색 엔진은 안전하고 신뢰할 수 있는 사이트를 우선시하므로 검색 결과에서 HTTP 웹사이트의 순위를 낮게 지정할 수 있습니다.
• HTTPS: HTTPS는 검색 엔진에서 선호되며 이를 사용하는 웹사이트는 검색 순위가 약간 올라갈 수 있습니다.

요약해보자면, HTTP와 HTTPS의 주요 차이점은 보안입니다. HTTPS는 데이터 전송에 암호화 계층을 추가하여 클라이언트와 서버간의 교환되는 데이터의 기밀성과 무결성을 보장합니다. 민감ㅎ한 정보를 보호하고 웹사이트와 사용자 간의 신뢰를 구축하는데 필수적입니다. 결과적으로 HTTPS 채택은 안전한 웹 통신의 표준이 되었으며, 많은 웹사이트가 사용자 보안과 개인정보 보호를 최우선으로 하기위해서 HTTPS로 전환하고 있습니다.

MVVM 모델에 대한 내용입니다.

MVVM( Model-View-ViewModel )의 약자인 MVVM은 프론트엔드 및 사용자 인터페이스 개발에 주로 사용되는 디자인 아키텍처 패턴입니다. MVVM은 종종 Angular, React, Vue와 같은 프레임워크와 연결됩니다. MVC( Model-View-Controller )개념을 기반으로 하며, ViewModel이라는 중간 구성 요소를 도입하여 사용자 인터페이스( View )를 기본 데이터( Model )에서 분리합니다. MVVM은 단일 페이지 애플리케이션( SPA ) 및 웹 개발에서 특히 널리 사용됩니다.

MVVM 모델의분석과 작동 방식

1. 모델 ( Model )

• 모델은 MVC의 모델과 유사하게 애플리케이션의 데이터 및 비즈니스 논리를 나타냅니다.
• 데이터 검색, 데이터 저장, 데이터 처리 및 애플리케이션 규칙 시행을 담당합니다.

2. 보기 ( View )

• 뷰는 MVC와 마찬가지로 사용자 인터페이스(UI)와 프레젠테이션 레이어를 나타냅니다.
• 사용자에게 데이터를 표시하고 사용자 상호 작용을 처리하는 역할을 담당합니다.
• MVVM의 뷰는 React, Vue와 같은 구성 요소 기반 라이브러리 덕분에 재사용성이 뛰어나고 선언적인 경우가 많습니다.

3. 뷰모델 ( ViewModel )

• ViewModel은 MVVM에 도입된 핵심 구성 요소입니다. View와 Model 사이의 중개자 역할을 합니다.
• 뷰가 표시하기 쉬운 형식으로 모델의 데이터를 뷰에 노출하는 역할을 담당합니다.
• ViewModel은 또한 View의 사용자 입력을 처리하고 이를 Model의 작업이나 데이터 변경으로 변환합니다.
• 기본적으로 ViewModel은 뷰에 표시할 데이터를 준비하고 형성하며 모델과 뷰의 상호 작용을 처리합니다.

MVVM의 데이터 흐름과 상호 작용은 일반적으로 아래 단계를 따릅니다.

1. 모델은 애플리케이션의 데이터와 비즈니스 로직을 보유하고 관리합니다.
2. 뷰모델은 모델과 통신하여 데이터를 검색하고 처리하며 프레젠테이션을 준비합니다.
3. 뷰는 뷰모델에 바인딩되어 데이터를 표시하고 사용자가 데이터와 상호 작용할 수 있도록 합니다.
4. 사용자가 뷰와 상호 작용할 때 뷰모델은 사용자의 작업을 수신하고 처리합니다. ( ex: 버튼 클릭 또는 양식에 데이터 입력할 때 )
5. 뷰모델은 사용자의 작업에 따라 모델을 업데이트할 수 있습니다.
6. 모델의 데이터가 변경되면 뷰모델은 뷰에 업데이트 내용을 알리고 뷰는 자동으로 변경사항을 반영합니다.

MVVM은 아래처럼 몇가지 장점을 제공해줍니다.

• 우려사항의 분리: MVVM은 UI( View ), 데이터( Model ) 및 이들을 연결하는 로직( ViewModel )을 명확하게 분리하여 코드 구성 및 유지보수 관리를 보다 용이하게 합니다.
• 테스트 가능성: 뷰모델과 같은 구성 요소는 뷰와 독립적으로 단위 테스트가 가능하므로 애플리케이션이 예상대로 작동하는지 확인하기가 더 쉽습니다.
• 재사용성: 뷰와 뷰모델은 애플리케이션의 여러 부분에서 재사용할 수 있어 코드 재사용성과 일관성을 높일 수 있습니다.
• 선언적 UI: MVVM 프레임워크는 종종 개발자들이 선언 및 구성 요소 기반 방식으로 UI를 생성할 수 있도록 하므로, 보다 유지보수성이 높은 코드로 이어질 수 있습니다.
• 확장성: MVVM은 특히 동적 사용자 인터페이스를 사용하고 실시간 데이터 업데이트가 필요한 복잡한 애플리케이션에 적합하게 확장할 수 있습니다.

MVVM은 최신 웹 애플리케이션을 구축하기 위한 강력한 패턴이지만 구현을 용이하게 하는 도구 및 규칙을 제공하는 특정 프레임워크와 밀접하게 연관되어 있습니다. 자바스크립트에서 MVVM을 사용하는 개발자는 React, Angular, Vue와 같은 라이브러리를 사용하는 경우가 많습니다. 각 라이브러리에는 MVVM패턴을 구현하고 지원하는 각각의 방식을 가지고 있습니다.

MVC모델에 대한 내용입니다.

MVC모델

MVC( Model-View-Controller )는 소프트웨어 개발에서 널리 사용되는 아키텍처 패턴으로, 특히 웹 및 데스크톱 애플리케이션의 상황에서 응용프로그램의 코드를 설계하고 구성하는 구조적인 방법을 제공합니다. MVC는 응용프로그램을 세 개의 상호 연결된 구성요소로 분리하며, 각각은 고유한 책임을 가집니다.

1. 모델 ( Model )

• 모델은 애플리케이션의 데이터와 비즈니스 로직을 나타냅니다.
• 데이터를 관리하고 처리하며 애플리케이션의 규칙과 동작을 적용하는 역할을 담당합니다.
• 데이터 또는 비즈니스 로직에 대한 변경은 모델 내에서 발생합니다.

2. 보기 ( View )

• 뷰는 사용자에게 데이터를 표시하고 사용자 인터페이스( UI )를 렌더링하는 역할을  담당합니다.
• 모델의 변화를 관찰하거나 구독하고 그에 따라 UI를 업데이트합니다.
• 뷰는 일반적으로 수동적이며 애플리케이션 로직을 포함하지 않습니다.

3. 컨트롤러 ( Controller )

• 컨트롤러는 모델과 뷰 사이의 중개자 역할을 합니다.
• 사용자 입력을 받아 모델이나 뷰에 대한 명령으로 반환합니다.
• 컨트롤러는 사용자 상호 작용을 처리하고, 필요한 경우 모델을 업데이트하며, 모델의 변경 사항을 반영하도록 뷰를 업데이트합니다.

MVC 작동 방식

1. 사용자가 버튼을 클릭하거나 데이터를 입력하는 등의 작업을 수행하여 뷰와 상호 작용합니다.
2. 뷰는 사용자 입력을 컨트롤러로 전달합니다.
3. 컨트롤러는 입력을 처리하고, 적절한 조치를 결정하며 그에 따라 모델과 상호 작용합니다.
4. 모델은 데이터를 처리하고 비즈니스 로직을 적용하며 상태를 업데이트할 수 있습니다.
5. 모델은 뷰의 상태가 변경되면 이를 알립니다.
6. 뷰는 모델의 변경 사항을 반영하도록 UI를 업데이트합니다.

MVC 패턴을 사용했을때 이점

• 우려 사항의 분리: MVC는 데이터( 모델 ), 프리젠테이션( 뷰 ) 및 사용자 입력( 컨트롤러 )을 명확하게 분리하여 코드베이스를 더욱 모듈화하고 유지 관리하기 쉽게 만듭니다.
• 재사용성: 구성 요소( 모델, 뷰, 컨트롤러 )는 애플리케이션의 다른 부분에 영향을 주지 않고 재사용하거나 교체할 수 있는 경우가 많습니다.
• 확장성: 관심사를 분리하면 여러 개발자가 서로 다른 구성 요소에 대해 동시에 작업할 수 있으므로 애플리케이션 개발을 더 쉽게 확장할 수 있습니다.
• 테스트 가능성: 각 구성 요소를 독립적으로 테스트할 수 있으므로 단위 테스트 및 품질 보증이 용이합니다.

MVC는 기본 패턴이며 다양한 애플리케이션 개발 요구 사항 및 프레임워크에 맞게 MVVM( Model-View-ViewModel )및 MVP( Model-View-Presenter )와 같은 다양한 변형 및 파생 패턴으로 발전했습니다.

예를 들어 MVVM은 Angular, React 및 Vue.js와 같은 프레임워크를 사용한 프론트 엔드 개발에 일반적으로 사용되는 반면 MVP는 데스크톱 및 모바일 애플리케이션 개발에 사용됩니다.

인터랙티브 디자인 ( Interactive Design, IxD )에 대한 내용입니다.

인터랙티브 디자인( Interactive Design )은 인터랙티브 제품, 시스템 및 서비스의 디자인을 매력적이고 의미 있는 사용자 경험을 창출하는데 초점을 맞춘 종합 분야입니다. 여기에는 사용자 인터페이스 디자인, 사용자 상호 작용, 디지털 및 물리적 환경에서의 전반적인 사용자 여정이 포함됩니다. 인터랙티브 디자인은 사용자가 기술과 상호 작용하는 방식과 디지털 제품 및 서비스를 인식하고 사용하는 방[식을 형성하는데 중요한 역할을 합니다.

인터랙티브 디자인의 주요 내용

1. 사용자 중심 디자인

• 인터랙티브 디자인은 사용자의 요구, 목표 및 행동을 이해하는데 중점을 둡니다. 디자인 결정은 사용자 연구, 페르소나 및 사용자 피드백을 기반으로 합니다.

2. 유용성

• 인터랙티브 디자이너는 사용 및 탐색이 쉬운 제품과 인터페이스를 만드는 것을 목표로 합니다.
• 유용성 테스트 및 사용자 테스트는 유용성 문제를 식별하고 해결하는데 사용되는 일반적인 방법입니다.

3. 기능성

• 디자이너는 대화형 제품과 시스템이 의도한 기능을 효과적으로 수행하는지 확인하는데 중점을 둡니다. 여기에는 사용자 요구에 맞는 특징, 기능 및 상호 작용을 정의하는 것이 포함됩니다.

4. 사용자 인터페이스( UI ) 디자인

• UI 디자인에는 버튼, 메뉴, 양식, 타이포그래피등 인터페이스의 시각적 요소를 만드는 작업이 포함됩니다.
• 시각적으로 즐겁과 직관적인 인터페이스를 만들기 위한 레이아웃, 색상 및 시각적 계층 구조에 대한 고려 사항도 포함되어 있습니다.

5. 정보 아키텍처

• 정보 아키텍처( IA )는 사용자가 쉽게 찾고 이해할 수 있는 방식으로 콘텐츠와 정보를 구성하고 구조화하는 것입니다. 여기에는 탐색 메뉴, 분류 및 콘텐츠 계층 구조 설계가 포함됩니다.

6. 상호 작용 패턴

• 디자이너는 확립된 상호 작용 패턴과 규칙을 사용하여 친숙하고 예측 가능한 사용자 경험을 만듭니다. 일반적인 패턴에는 메뉴, 버튼, 슬라이더 및 제스처가 포함됩니다.

7. 사용자 피드백

• 인터랙티브 디자인에는 피드백 메커니즘이 통합되어 사용자에게 작업 결과를 알리는 경우가 많습니다. 피드백은 시각적(예: 성공 메시지)이거나 청각적(예: 알림 소리)일 수 있습니다.

8. 접근성

• 장애가 있는 사용자가 인터랙티브 제품에 접근할 수 있도록 보장하는 것이 인터랙티브 디자인의 기본 원칙입니다. 여기에는 화면 판독기, 키보드 탐색 및 기타 보조 기술을 위한 설계가 포함됩니다.

9. 프로토타입 제작

• 디자이너는 프로토타입을 사용하여 최종 구현 전에 상호 작용을 테스트하고 개선합니다.
• 프로토타입 제작은 종이 스케치부터 충실도가 높은 대화형 프로토타입까지 다양합니다.

10. 반응형 디자인

• 다양한 디바이스와 화면 크기가 확산되면서 반응형 디자인이 중요해졌습니다. 디자이너는 다양한 플랫폼과 화면 크기에 걸쳐 원활하게 적응하고 작동하는 인터페이스를 만듭니다.

11. 사용자 흐름

• 사용자 흐름 또는 사용자 여정을 매핑하면 디자이너가 사용자가 애플리케이션이나 웹 사이트를 탐색하는 방법을 이해하는 데 도움이 됩니다. 이는 직관적이고 효율적인 경로를 설계하는 데 필수적입니다.

12. 감성 디자인

• 인터랙티브 디자이너는 디자인 선택이 감성에 미치는 영향을 고려합니다.
• 제품의 모양과 느낌은 감정을 불러일으키고 사용자 행동과 참여에 영향을 미칠 수 있습니다.

13. 반복적 디자인

• 인터랙티브 디자인은 반복적인 프로세스입니다.
• 디자이너는 피드백을 수집하고, 개선하고, 디자인을 반복하여 지속적으로 사용자 경험을 향상시킵니다.

14. 테스트 및 평가

• 인터랙티브 디자인에 대한 지속적인 테스트 및 평가는 개선이 필요한 문제와 영역을 식별하는 데 중요합니다.
• A/B 테스트와 사용성 테스트는 일반적인 방법입니다.

인터랙티브 디자인은 웹 디자인, 모바일 앱 개발, 사용자 경험( UX ) 디자인, 인간과 컴퓨터 간의 상호작용 ( HCI ), 제품 디자인 등 다양한 영역에 적용됩니다. 이는 디지털 환경을 형성하는데 중추적인 역할을 하며, 기술이 기능적일 뿐만 아니라 사용자 친화적이고 즐겁게 사용할 수 있도록 보장해줍니다.

SSR ( Server Side Rendering )과 CSR ( Client Side Rendering )의 차이점에 대한 내용입니다.

서버측 렌더링 ( SSR )과 클라이언트측 렌더링 ( CSR )은 웹 애플리케이션에서 웹 콘텐츠를 렌더링하는 두 가지 서로 다른 접근 방식입니다. 이들은 뚜렷한 특성, 장점 및 사용 사례를 가지고 있습니다. 두 가지를 비교하면 아래와 같습니다.

Server Side Rendering ( SSR )

1. 렌더링 프로세스

• SSR은 서버에서 HTML을 생성하고 완전히 렌더링된 HTML 페이지를 클라이언트의 웹 브라우저로 보냅니다.
• 서버는 요청을 처리하고, 데이터베이스나 API에서 데이터를 가져오고, 데이터가 포함된 HTML 템플릿을 렌더링한 다음 전체 HTML 페이지를 클라이언트에 보냅니다.

2. 페이지 로드 시간

• SSR은 일반적으로 브라우저가 완전히 렌더링된 HTML 페이지를 수신하므로 초기 페이지 로드 시간이 더 빨라집니다.
• 이는 검색 엔진이 콘텐츠를 쉽게 색인화할 수 있기 때문에 SEO ( 검색 엔진 최적화 )에 특히 유용합니다.

3. SEO 친화적

• SSR은 검색 엔진이 서버에서 렌더링된 HTML에서 직접 콘텐츠를 크롤링하고 인덱싱할 수 있기 때문에 SEO에 더 적합한 것으로 간주됩니다.

4. 복잡성

• SSR은 데이터 렌더링 및 처리를 위해 서버측 코드가 필요하기 때문에 설정 및 유지보수가 더욱 복잡해질 수 있습니다.

5. 클라이언트 상호 작용

• 초기 HTML이 로드된 후에도 페이지의 대화형 요소는 여전히 클라이언트측 자바스크립트를 사용하여 사용자의 대화를 수행할 수 있으므로 원활한 사용자 환경을 제공할 수 있습니다.

6. 서버 로드

• SSR은 특히 트래픽이 많은 웹 사이트의 경우 서버가 각 사용자 요청에 대한 렌더링을 처리해야 하므로 서버 부하가 더 높을 수 있습니다.

Client-Side Rendering ( CSR )

1. 렌더링 프로세스

• CSR은 최소 HTML 셸을 Javascript 및 CSS파일과 함께 서버에서 로드합니다.
• 클라이언트의 웹 브라우저는 자바스크립트를 실행하여 데이터를 가져오고 페이지 내용을 렌더링하며 상호 작용을 처리합니다. 렌더링은 클라이언트 측에서 수행됩니다.

2. 페이지 로드 시간

• CSR은 브라우저가 콘텐츠를 렌더링하기 전에 자산을 다운로드하고, 자바스크립트를 실행하고, 데이터를 가져와야 하기 때문에 초기 페이지 로드 시간이 느려질 수 있습니다.

3. SEO

• 기존 CSR은 검색 엔진이 자바스크립트를 통해 로드된 콘텐츠를 인덱싱하는데 어려움을 겪을 수 있기 때문에 SEO 친화적이지 않을 수 있습니다. 그러나 단일 페이지를 위한 서버 측 렌더링 SSR ( Single-Page Applications )과 같은 최신 기술은 이러한 문제를 완화합니다.

4. 단순성

• CSR은 클라이언트 측 문제와 서버 측 문제를 분리하기 때문에 설정이 더 간단한 경우가 많습니다. 개발자는 React, Angular, Vue.js와 같은 자바스크립트 프레임워크를 사용하여 풍부한 대화형 애ㅍ플리케이션을 구축하는데 집중 할 수 있습니다.

5. 클라이언트 상호작용

• CSR은 전체 페이지를 다시 로드할 필요 없이 사용자 인터페이스가 자주 변경되는 대화형 웹 애플리케이션에 매우 적합합니다. 초기 자산이 로드되면 원활한 사용자 경험을 제공합니다.

6. 서버 로드

• CSR은 대부분의 렌더링이 클라이언트 측에서 이루어지므로 렌더링을 위한 서버의 부하가 적지만, API나 백엔드 서비스의 경우 데이터 가져오기로 인해 부하가 증가할 수 있습니다.

하이브리드 접근 방식: 일부 웹 개발 방식은 SSR과 CSR의 요소를 결합하여 성능과 사용자 경험을 최적화합니다. 예를 들어 일부 SPA ( Single Page Application )는 후속 상호 작용에 CSR을 사용하는 동시에 SEO 및 로드 시간을 개선하기 위해 초기 페이지 로드에 SSR을 구현할 수 있습니다.

요약해보자면, 서버 측 렌더링 ( SSR )과 클라이언트 측 렌더링 ( CSR )사이의 선택은 성능 목표, SEO 요구 사항, 웹 애플리케이션의 복잡성과 같은 요소에 따라 달라집니다. 두 접근 방식 모두 장단점이 있습니다.

타입스크립트 ( TypeScript )에 대한 내용입니다.

타입스크립트는 선택적인 정적 타이핑 및 기타 기능을 언어에 추가하는 정적으로 유형이 지정된 Javascript의 상위 집합입니다.

Microsoft에서 개발 및 유지 관리하며 웹 개발 세계에서 많은 인기를 얻었습니다.

타입스크립트는 컴파일 타임에 유형 관련 오류를 포착하고, 더 나은 도구를 제공하고 코드 품질과 유지 관리성을 향상시켜 개발 경험을 향상시키는 것을 목표로 합니다.

TypeScript의 주요 기능과 개념

1. 정적 타이핑 ( Static Typing ): 타입스크립트는 정적 타이핑을 도입하여 개발자가 변수, 함수 매개 변수, 반환 값 등에 대한 유형을 정의할 수 있도록 합니다. 이를 통해 개발 프로세스 초기에 유형 관련 오류를 파악할 수 있기 때문에 런타임 오류를 줄일 수 있습니다.

function add (a: number, b: number): number {
    return a + b;
}

const result = add(2, 3); // 5
const invalidResult: string = add(2, 3); // Type Error

2. 유형 추론 ( Type Inference ): 유형 스크립트는 유형 추론을 사용하여 가능할 때마다 자동으로 유형을 결정합니다. 이것은 항상 유형에 명시적으로 주석을 달 필요가 없다는 것을 의미합니다.

유형 스크립트는 종종 코드를 작성하는 방법에 따라 유형을 추론할 수 있습니다.

let name = "Jun" // TypeScript infers `name` as a string

3. 인터페이스 및 클래스 ( Interfaces and Classes ): 타입스크립트는 객체 모양을 정의하고 데이터 및 동작을 캡슐화하기 위한 인터페이스 및 클래스를 지원합니다. 이를 통해 구조화된 데이터 작업 및 객체 지향 코드 작성이 용이합니다.

interface Person {
    name: string;
    age: number;
}

class Student implements Person {
    constructor(public name: string, public age: number) {}
}

const student = new Student("Jun", 25);

4. 열거 ( Enums ): 타입스크립트에는 명명된 상수 값을 정의할 수 있는 Enums가 포함되어 있습니다.

enum Color {
    Red,
    Green,
    Blue
}

const selectedColor: Color = Color.Red;

5. 모듈 ( Modules ): 타입스크립트는 코드를 정리하고 구조화하는 모듈 시스템을 제공합니다. 파일 간의 종속성을 정의하기 위해 Import and Export문을 사용합니다.

// math.ts
export function add (a: number, b: number): number {
    return a + b;
}


// index.ts
import { add } from "./math";
const result = add(2, 3);

6. 타입스크립트 컴파일러 ( TSC: TypeScript Compiler ): 타입스크립트 코드는 타입스크립트 컴파일러를 이용하여 자바스크립트로 변환되며, 이를 통해 모든 자바스크립트 환경에서 실행 가능한 자바스크립트 코드가 생성됩니다.

7. 툴링 지원 ( Tooling Support ): 타입스크립트는 지능적인 코드 완성, 타입 확인 및 생산성을 향상시키는 기타 기능을 제공하는 Visual Studio Code와 같은 코드 편집기를 포함한 뛰어난 툴링 지원을 제공합니다.

8. 커뮤니티 및 라이브러리 ( Community and Libraries ): 타입스크립트는 성장하고 활성화된 커뮤니티를 가지고 있으며, 많은 인기 자바스크립트 라이브러리 및 프레임워크 ( React, Angular )는 타입스크립트를 지원합니다.

9. 호환성 ( Compatibility ): 타입스크립트는 자바스크립트의 상위 집합으로 설계되어 유효한 자바스크립트 코드도 유효한 타입스크립트 코드임을 의미하며, 기존의 자바스크립트 프로젝트에서 타입스크립트를 점진적으로 채택할 수 있습니다.

10. 강력한 유형 ( Strongly Typed ): 타입스크립트는 컴파일 시에 유형 안전성을 강제하므로 더 강력하고 유지 관리 가능한 코드를 제공할 수 있습니다. 그러나 유형을 명시적으로 정의해야 하므로 초기 오버헤드가 추가될 수 있습니다.

타입스크립트는 현대의 웹 개발에서 일반적으로 사용되며, 특히 Type의 안전성, 툴링, 유지보수성이 중요한 대규모 프로젝트에 사용되며, 개발자들이 개발과정 초기에 오류를 발견하고, 보다 예측 가능한 코드를 작성하며, 웹 어플리케이션의 전반적인 품질을 향상시킬 수 있도록 도와줍니다.

타입스크립트를 간단하게 정리해보면, 타입스크립트는 자바스크립트 기반의 언어이며, 자바스크립트의 상위확장버전입니다.

정적타입으로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있으며, 강력한 객체지향 프로그래밍을 지원합니다. ES6의 새로운 기능들을 사용하기 위해 바벨과 같은 변도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행 가능합니다.

명시적인 정적 타입 지정은 코드의 가독성을 높이고 디버깅을 쉽게 해줍니다.

이벤트 캡처링 ( Event Capturing )에 대한 내용입니다.

이벤트 캡처링은 웹 개발에서 DOM( Document Object Model )내의 이벤트 전파의 또 다른 단계입니다.

이벤트 버블링을 보완하여 이벤트가 DOM 트리의 루트에서 타겟 요소로 이동할 때 이벤트를 캡처할 수 있는 방법을 제공합니다.

이벤트 캡처링은 이벤트가 타겟 요소에 도달하기 전에, 버블링 단계가 시작되기 전에 발생합니다.

이벤트 캡처링의 작동 방식

• 이벤트 오리진 ( Event Origin ): 버튼이나 div와 같은 특정 DOM 요소에서 이벤트가 트리거됩니다.
• 이벤트 캡처 단계 ( Event Capture Phase ): 이벤트는 대상 요소에서 시작하여 "버블업"하는 대신 먼저 캡처 단계로 들어가 DOM 트리의 루트에서 대상 요소로이동하여 각 상위 요소를 방문합니다.
• 이벤트 핸들러 ( Event Handlers ): 캡처 단계 동안 DOM 계층의 각 수준에서 요소에 특정 이벤트 유형 ( ex: 클릭 이벤트 핸들러 )에 대해 등록된 이벤트 핸들러가 있는 경우 해당 핸들러가 실행됩니다.
• 이벤트 대상 ( Event Target ): 이벤트가 대상 요소에 도달하면 대상 단계로 들어갑니다. 대상 단계에서는 대상 요소에 대한 이벤트 핸들러가 실행됩니다.
• 이벤트 버블링 단계 ( Event Bubbling Phase ): 이벤트가 캡처 단계를 통과하고 대상 요소에서 처리된 후 표준 이벤트 버블링 단계에서와 같이 DOM 계층 구조를 통해 버블링됩니다.

캡처  단계에 대한 이벤트 리스너를 등록하려면 세 번째 매개 변수가 true로 설정된 addEventListener 메서드를 사용할 수 있습니다.

기본적으로 세 번째 매개 변수는 false이므로 버블링 단계에 대해 이벤트를 등록되어야 함을 나타냅니다.

Javascript 이벤트 캡처의 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="outer">
        <button id="inner">클릭!</button>
    </div>

    <script>
        const outerEle = document.getElementById("outer");
        const innerEle = document.getElementById("inner");

        outerEle.addEventListener("click", function () {
            console.log("Capture Phase - Outer div clicked");
        }, true);

        innerEle.addEventListener("click", function () {
            console.log("Capture Phase - Inner button clicked");
        }, true);
    </script>
</body>
</html>

위 내용은 아래와 같습니다.

• 클릭! 버튼을 클릭하면 버튼 자체에서 클릭 이벤트가 트리거 됩니다.
• 이벤트는 먼저 캡처 단계에 들어가고 버튼과 외부 div 모두 캡처 단계에 등록된 클릭 이벤트 리스너를 갖습니다.
• 결과적으로 캡처 단계 동안 콘솔에 "Capture Phase - Inner button clicked"및 "Capture Phase - Outer div clicked"라는 두 개의 콘솔 메시지가 표시됩니다.
• 캡처 단계가 끝나면 이벤트는 표준 이벤트 전파와 마찬가지로 대상 단계와 버블링 단계로 진행됩니다.

이벤트 캡처링은 웹 개발에서 이벤트 버블링보다 덜 일반적으로 사용되지만 대상 요소에 도달하기 전에 이벤트를 DOM 계층 맨 위에서 가로채려는 시나리오에서는 유용할 수 있습니다. 모든 이벤트가 이벤트 캡처를 지원하는 것은 아닙니다. 일부 이벤트는 버블링 단계를 통해서만 전파됩니다.

이벤트 버블링 ( Event Bubbling )에 대한 내용입니다.

이벤트 버블링은 이벤트가 DOM( Document Object Model )계층을 통해 전파되거나 "버블업"되는 순서를 가리키는 자바스크립트 및 웹 개발의 기본 개념입니다. 이벤트가 DOM요소에서 발생할 때( ex: div 내의 버튼 클릭 이벤트 ) 이벤트는 해당 요소에서 트리거할 뿐만 아니라 상위 요소에서도 트리거되어 문서의 루트까지 전파합니다.

이벤트 버블링의 작동 방식

• 이벤트 오리진 ( Event Origin ): 버튼이나 div와 같은 특정 DOM 요소에서 이벤트가 트리거됩니다.
• 이벤트 전파 ( Event Propagation ): 대상 요소에서 이벤트가 트리거된 후 각 상위 요소를 차례로 방문하여 DOM 계층을 통해 "버블업"하기 시작합니다.
• 이벤트 핸들러 ( Event Handlers ): DOM 계층 구조의 각 수준에서 요소에 특정 이벤트 유형 ( ex: 클릭 이벤트 핸들러 )에 대해 등록된 이벤트 핸들러가 있는 경우 해당 핸들러가 실행됩니다.
• 버블링 계속 ( Continue Bubbling ): 이벤트는 문서의 루트( 일반적으로 html 요소 )에 도달할 때까지 계층 구조를 통해 계속 버블링됩니다.

Javascript 이벤트 버블링의 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="outer">
        <button id="inner">클릭!</button>
    </div>

    <script>
        const outerEle = document.getElementById("outer");
        const innerEle = document.getElementById("inner");

        outerEle.addEventListener("click", function () {
            console.log("Outer DIV 클릭");
        });

        innerEle.addEventListener("click", function () {
            console.log("Inner Button 클릭");
        });
    </script>
</body>
</html>

위 내용은 아래와 같습니다.

• 클릭! 버튼을 클릭하면 버튼 자체에서 클릭 이벤트가 발생하고 이벤트가 외부 div요소까지 버블링됩니다.
• 버튼과 외부 div 모두 클릭 이벤트 리스너가 있으므로 해당 이벤트 핸들러가 실행됩니다.
• 결과적으로 콘솔에 "Inner Button 클릭"과 "Outer DIV 클릭"이라는 두 개의 로그 메시지가 표시됩니다. 이는 이벤트가 DOM 계층 구조의 내부 요소에서 외부 요소로 전파되는 이벤트 버블링을 보여줍니다.

event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="outer">
        <button id="inner">클릭!</button>
    </div>

    <script>
        const outerEle = document.getElementById("outer");
        const innerEle = document.getElementById("inner");

        outerEle.addEventListener("click", function () {
            console.log("Outer DIV 클릭");
        });

        innerEle.addEventListener("click", function () {
            console.log("Inner Button 클릭");

            event.stopPropagation();
        });
    </script>
</body>
</html>

이벤트 버블링을 방지하고 이벤트가 계층 위로 더 이상 전파되지 않도록 하려면 이벤트 핸들러 내의 이벤트 개체에서 stopPropagation() 메서드를 사용할 수 있습니다.

위 내용에서는 Inner Button 클릭만 콘솔에 표시되고, Outer DIV 클릭 콘솔은 나오지 않습니다.

이벤트 버블링은 기본 동작이지만 모든 이벤트가 버블업 되는 것은 아닙니다. ( ex: focus, blur 이벤트는 버블링 되지 않습니다. )

또한 event.preventDefault()를 사용하여 일부 이벤트를 취소할 수 있습니다. 이벤트 버블링을 이해하는 것은 복잡한 웹 응용 프로그램에서 이벤트 처리를 관리하고 이벤트 중심 코드를 최적화하는 데 중요합니다.

Local Storage, Session Storage, Cookies에 대한 내용입니다.

Local Storage와 Session Storage는 웹 브라우저가 제공하는 두 가지 웹 스토리지 옵션으로, 웹 응용 프로그램이 사용자의 장치에 로컬로 데이터를 저장할 수 있도록 합니다. 둘 다 Web Storage API의 일부이며 비슷한 기능을 가지고 있지만 차이점이 있습니다.

Local Storage

• 지속성: 로컬 저장소에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재시작한 후에도 사용자의 장치에 남아 있습니다.
  사용자 또는 웹 응용 프로그램에 의해 명시적으로 지워지지 않는 한 세션 및 브라우저 재시작에 걸쳐 지속됩니다.
• 저장 제한: 로컬 스토리지의 일반적인 저장 제한은 약 5-10MB이지만 브라우저에 따라 제한이 다를 수 있습니다. 따라서 더 긴 기간에 걸쳐 사용 가능한 많은 양의 데이터를 저장하기에 적합합니다.
• 범위: 로컬 스토리지에 저장된 데이터는  동일한 도메인 내의 서로 다른 브라우저 창이나 탭을 통해 액세스할 수 있습니다. 단일 세션에만 국한되지 않습니다.
• 사용 사례: 사용자가 나중에 웹 사이트로 돌아올 때도 데이터를 사용할 수 있기 때문에 리소스 캐싱, 사용자 기본 설정 저장 또는 응용 프로그램 상태 저장에 로컬 스토리지를 사용하는 경우가 많습니다.

Session Storage

• 지속성: 세션 저장소에 저장된 데이터는 한 페이지의 세션 동안에만 사용할 수 있습니다.
  사용자가 브라우저 탭이나 창을 닫으면 바로 삭제됩니다. 세션이나 브라우저 재시작 사이에는 지속되지 않습니다.
• 스토리지 제한: 세션 스토리지는 일반적으로 로컬 스토리지와 동일한 스토리지 제한이 약 5-10MB이므로 단일 세션에 대해 합리적인 양의 데이터를 저장할 수 있습니다.
• 범위: 세션 저장소에 저장된 데이터는 동일한 브라우저 탭이나 창 내에서만 액세스할 수 있으며, 다른 탭이나 창을 통해서나 다른 브라우저 세션 간에는 공유되지 않습니다.
• 사용 사례: 세션 저장소는 사용자가 특정 웹 페이지와 상호 작용하는 동안 짧은시간 동안만 필요한 임시 데이터를 저장하는 데 유용하며, 폼 데이터를 일시적으로 저장하거나 세션 중에 사용자 인증 토큰을 관리하는 등의 작업에 주로 사용됩니다.

사용 사례

// Local Storage
localStorage.setItem("username", "Shiro21");

const username = localStorage.getItem("username");

console.log(username); // Shiro21

// Session Stroage
sessionStorage.setItem("usernick", "Jun");

const usernick = sessionStorage.getItem("usernick");

console.log(usernick); // Jun

로컬 저장소와 세션 저장소 모두 데이터를 키와 값 쌍으로 저장하고 문자열 값만 허용한다는 점에 유의하는 것이 중요합니다.

객체나 배열과 같은 복잡한 데이터 구조를 저장해야 하는 경우 저장하기 전에 JSON으로 직렬화하고 검색할 때 역직렬화해야 합니다.

요약을 하자면, 로컬 저장소와 세션 저장소는 웹 응용 프로그램이 사용자 장치에 데이터를 저장할 수 있도록 하는 브라우저 저장소 옵션입니다.

로컬 저장소는 여러 세션에 걸쳐 지속되며, 세션 저장소는 일시적이며 단일 브라우저 세션에만 적용됩니다. 둘 중 하나를 선택하는 것은 특정 사용 사례와 데이터 저장 요구 사항에 따라 달라집니다.

Cookies

쿠키는 웹 사이트가 사용자의 디바이스에 저장하여 사용자 또는 사용자의 브라우징 활동에 대한 정보를 기억하는 작은 데이터입니다. 쿠키는 사용자 세션 추적, 사용자 선호도 저장, 쇼핑 카트 및 사용자 인증과 같은 기능 구현 등을 포함한 다양한 목적으로 웹 개발에 널리 사용됩니다.

쿠키와 관련된 핵심 내용

1. 목적

• 세션 관리: 쿠키는 일반적으로 사용자 세션을 관리하는 데 사용됩니다. 사용자가 웹 사이트에 로그인하면 방문 중에 사용자를 식별하기 위한 세션 쿠키가 생성되는 경우가 많습니다. 이를 통해 서버는 특정 사용자와 요청을 연결할 수 있습니다.
• 사용자 기본 설정: 쿠키는 사용자 기본 설정 및 언어 기본 설정, 테마 선택 또는 글꼴 크기와 같은 설정을 저장하여 개인화된 브라우징 경험을 제공할 수 있습니다.
• 추적 및 분석 ( Tracking and Analytics ): 쿠키는 사용자의 행동을 추적하고 분석 데이터를 수집하는 데 사용됩니다. 이를 통해 웹 사이트는 사용자가 콘텐츠와 상호 작용하고 개선하는 방법을 이해할 수 있습니다.
• 전자상거래: 쿠키는 전자상거래 웹사이트에 필수적인 것으로 장바구니에 물건을 담아두거나 사용자 로그인 정보를 기억하고 사용자 활동을 추적하여 추천을 받을 수 있습니다.

2. 쿠키 속성

• 이름 - 값 쌍: 쿠키는 이름 - 값 쌍으로 구성되며, 여기서 이름은 쿠키를 식별하는 문자열이고 값은 쿠키와 관련된 데이터입니다.
• 만료 날짜: 쿠키는 사용자의 장치에 저장되는 기간을 결정하는 만료 날짜를 가질 수 있습니다. 세션 쿠키는 일시적이며 브라우저 세션이 끝나면 만료되지만 영구 쿠키는 지정된 기간 동안 지속될 수 있습니다.
• 도메인 및 경로: 쿠키를 웹 사이트의 특정 도메인 및 경로에 적용하도록 설정할 수 있습니다. 이를 통해 웹 사이트 개발자는 HTTP 요청과 함께 쿠키가 전송되는 위치를 제어할 수 있습니다.
• 보안 및 HttpOnly 플래그: 쿠키에는 보안(HTTP) 연결을 통해서만 전송되어야함을 나타내는 "보안" 및 "HttpOnly"와 같은 플래그가 있을 수 있으므로 보안이 강화됩니다.

3. 개인 정보 보호 및 보안

• 쿠키는 서로 다른 웹 사이트에 걸쳐 사용자의 행동을 추적하는 데 사용될 수 있기 때문에 프라이버시에 대한 우려를 불러일으킬 수 있습니다. 이를 해결하기 위해 브라우저는 사용자가 쿠키를 관리하고 차단할 수 있는 옵션을 제공합니다.
• 쿠키에는 자사 쿠키 ( 방문 중인 웹 사이트에서 설정 ), 타사 쿠키 ( 사용자가 현재 방문 중인 도메인이 아닌 다른 도메인에서 설정 ) 등 다양한 유형이 있습니다. 제 3자 쿠키는 개인 정보 보호에 관한 논쟁의 대상이 되어 왔으며 브라우저 제한이 강화되었습니다.

4. 자바스크립트에서 쿠키 접근하기

• 자바스크립트에서는 쿠키를 읽고 수정할 수 있는 document.cookie 속성을 통해 쿠키에 접근할 수 있습니다.

// 쿠키 읽기
const cookieValue = document.cookie.split('; ').find(row => row.startsWith('myCookie=')).split('=')[1];

// 쿠키 설정
document.cookie = 'myCookie=myValue; expires=Wed, 30 Dec 2023 12:00:00 UTC; path=/';

쿠키를 읽고 설정하는 예제

// 쿠키 읽기
const readCookie = (name) => {
  const cookies = document.cookie.split('; ');
  const cookie = cookies.find(row => row.startsWith(`${name}=`));
  if (cookie) {
    return cookie.split('=')[1];
  }
  return null;
};

const myCookieValue = readCookie('myCookie');
if (myCookieValue) {
  console.log(`Value of myCookie: ${myCookieValue}`);
} else {
  console.log('myCookie does not exist or has expired.');
}

// 쿠키 설정
const setCookie = (name, value, expires, path = '/') => {
  const cookie = `${name}=${value}; expires=${expires}; path=${path}`;
  document.cookie = cookie;
};

const expirationDate = new Date('Wed, 30 Dec 2023 12:00:00 UTC').toUTCString();
setCookie('myCookie', 'myValue', expirationDate);

console.log('myCookie has been set.');

5. 저장 제한

• 쿠키에는 크기 제한이 있기 때문에 ( 보통 쿠키당 약 4KB ) 대용량 데이터를 저장하기에 적합하지 않습니다.

6. 대안

• 웹 개발자는 쿠키 외에 위에서 소개드린 Web Storage API의 일부인 Local Storage및 Session Storage와 같은 다른 스토리지 옵션에 액세스 할 수 있으며, 클라이언트 측에서 더 많은 양의 데이터를 저장하는 데 사용됩니다.

요약을 하자면, 쿠키는 웹 사이트가 사용자의 장치에 정보를 저장하기 위해 사용하는 작은 데이터 파일로 웹 사이트가 사용자 선호도를 기억하고 세션을 관리하며 사용자 행동을 추적할 수 있게 해줍니다. 웹 개발에 많은 귀중한 사용 사례가 있지만 개인 정보 보호 문제로 인해 브라우저 제한이 증가하고 특정 작업에 대해 대체 저장 옵션을 사용하는 쪽으로 전환되었습니다.

this란 ?

Javascript에서 tihs 키워드는 현재 실행 컨텍스트에 대한 참조이며 사용 방법과 위치에 따라 달라질 수 있습니다.

this의 정확한 값은 함수를 어떻게 부르느냐에 따라 결정되며, this는 다른 상황에서 다른 객체 또는 값을 나타낼 수 있습니다.

this를 이해하는 것은 Javascript 객체, 함수 및 객체 지향 프로그래밍작업을 할 때 매우 중요합니다.

this의 예시

1. 글로벌 컨텍스트: 함수나 객체 이외의 경우, this는 브라우저 환경에서는 윈도우 객체이고, Node.js에서는 전역 객체를 나타냅니다.

console.log(this === window); // true

2. 함수 컨텍스트: 정규 함수 안에서는 함수를 어떻게 부르느냐에 따라 값이 결정됩니다.

독립 실행형 함수라고 하는 경우 전역 객체를 나타냅니다.

function hello() {
    console.log(this === window); // true
}

hello();

3. 메서드 컨텍스트: 객체 메서드 내부에서 this는 객체 자체를 참조합니다.

const myObj = {
    greet: function () {
        console.log(this === myObj); // true
    }
}

myObj.greet();

4. 생성자 함수: 객체를 생성하는 데 사용되는 생성자 함수 내부에서 this는 새로 생성된 객체의 인스턴스를 참조합니다.

function Person (name) {
    this.name = name;
}

const person1 = new Person("Shiro");

console.log(person1.name); // Shiro

5. 이벤트 핸들러: DOM 조작에 사용되는 것과 같은 이벤트 핸들러 함수에서 this는 이벤트를 트리거한 DOM 요소를 가리키는 경우가 많습니다.

<body>
    <button id="myButton">클릭 딸깍!</button>

    <script>
        const button = document.getElementById("myButton");

        button.addEventListener("click", function () {
            console.log(this === button); // true
        })
    </script>
</body>

6. 화살표 함수: 화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 그 상위 환경에서의 this를 참조하게 됩니다.

const myObj = {
    hello: () => {
        console.log(this === window); // true
    }
}

myObj.hello();

요약을 하자면, Javascript 코드에서 예기치 않은 동작을 방지하기 위해 this가 사용되는 상황을 이해하는 것이 매우 중요합니다.

this의 값은 다양할 수 있기 때문에 함수가 호출되는 방식과 해당 컨텍스트에 주의를 기울이는 것이 필요합니다.