오즈코딩스쿨 초격차캠프 백엔드 7일차

✅ 1. 시멘틱 마크업이란?

시멘틱 마크업은 웹 문서의 구조와 의미를 명확하게 표현하기 위해 사용되는 HTML(하이퍼텍스트 마크업 언어) 태그를 의미합니다. 이것은 컨텐츠의 의미와 역할을 설명하고 검색 엔진 및 웹 브라우저에게 더 많은 정보를 제공합니다.

시멘틱 마크업의 목표는 다음과 같습니다.

1. 의미 부여: 각각의 태그는 특정한 의미를 가지며, 문서의 구조를 나타냅니다. 예를 들어, <header>, <nav>, <article>, <section>, <footer> 등의 시멘틱 태그를 사용하여 각 부분의 역할을 명시적으로 표현할 수 있습니다.

2. SEO (검색 엔진 최적화): 검색 엔진은 웹 페이지의 콘텐츠를 이해하기 위해 HTML 구조를 분석합니다. 시멘틱 마크업을 사용하면 검색 엔진이 페이지의 내용을 더 잘 이해하고 적절한 순위를 매길 수 있습니다.

3. 접근성 향상: 시각 장애인이나 다른 특수한 상황에서 웹 페이지를 사용하는 사람들을 위해 의미 있는 태그를 사용함으로써 웹 페이지의 접근성을 향상시킬 수 있습니다. 스크린 리더와 같은 보조 기술이 웹 페이지를 더 잘 이해하고 해석할 수 있습니다.

4. 유지보수 용이성: 시멘틱 마크업을 사용하면 문서의 구조가 명확해지므로 다른 개발자들이 코드를 이해하고 유지보수하기가 쉬워집니다.

시멘틱 마크업을 잘 활용하면 웹 페이지가 보다 의미 있는 정보를 갖게 되어 사용자에게 더 나은 경험을 제공할 수 있습니다.

- What is a semantic markup?

Semantic markup refers to the use of HTML tags to convey meaning and structure to the content of a web document. In the context of web development, HTML (Hypertext Markup Language) is used to create the structure of web pages, and semantic markup involves choosing HTML tags that accurately reflect the meaning of the content they enclose.

Semantic markup is essential for several reasons:

1. Meaning and Structure: Semantic HTML tags provide a clear structure to the content, making it more understandable for both developers and browsers. Tags like <header>, <nav>, <article>, <section>, and <footer> convey the specific roles of different parts of a web page.

2. Search Engine Optimization (SEO): Search engines use the HTML structure to understand the content of a web page. Semantic markup can enhance a page's search engine ranking by providing more meaningful information about the content.

3. Accessibility: Semantic markup improves accessibility for people with disabilities, such as those using screen readers. Clear and meaningful tags help assistive technologies interpret and convey the content to users.

4. Consistency and Maintainability: Semantic HTML makes code more readable and maintainable. When developers use tags that accurately represent the content, it becomes easier for others (or even the original developer) to understand and update the code.

Examples of semantic tags include:

• <header>: Represents the header of a section or page.
• <nav>: Defines a navigation menu.
• <article>: Represents an independent, self-contained piece of content.
• <section>: Defines a section of a document.
• <footer>: Represents the footer of a section or page.

In contrast, non-semantic markup might use generic tags like <div> and <span> without conveying specific information about the content's meaning or structure. Using semantic markup is considered a best practice in web development for creating well-organized, accessible, and search engine-friendly websites.

✅ 2. Flex vs Gird 차이점

Flexbox (플렉스박스)와 Grid (CSS 그리드 레이아웃)는 모두 CSS에서 웹 페이지의 레이아웃을 더 효율적이고 반응형으로 디자인하는 데 사용되는 레이아웃 모델입니다. 그러나 각각은 다른 목적으로 사용되며 다른 상황에서 적합합니다. 간단한 비교를 살펴보겠습니다.

Flexbox:

1. 일차원 레이아웃: Flexbox는 한 방향(가로 또는 세로)의 레이아웃에 적합하도록 설계되었습니다. 주로 한 방향으로 항목을 배치하는 데 사용됩니다.

2. 콘텐츠 순서: Flexbox는 HTML에서의 소스 순서와 관계없이 항목의 순서를 쉽게 변경할 수 있습니다. order 속성을 사용하여 이를 구현할 수 있습니다.

3. 정렬: Flexbox는 항목을 컨테이너 내에서 가로 및 세로로 쉽게 정렬할 수 있는 강력한 기능을 제공합니다.

4. 반응형 디자인: Flexbox는 반응형 및 유연한 레이아웃을 만드는 데 효과적이며 특히 네비게이션 바, 사이드바 및 카드 레이아웃과 같은 구성 요소에 적합합니다.

5. 브라우저 지원: 좋은 브라우저 지원을 갖추고 있으며 작은 규모의 레이아웃에 적합합니다.

Grid:

1. 이차원 레이아웃: Grid는 행과 열을 모두 정의할 수 있는 이차원 레이아웃에 적합하게 설계되었습니다. 이로써 복잡한 레이아웃을 만들 수 있습니다.

2. 정렬과 간격: Grid는 행과 열에서 항목의 정확한 배치를 제공합니다. 쉽게 거터를 생성하고 간격을 조절할 수 있습니다.

3. 반응형 디자인: Grid는 행과 열 양쪽에서 항목을 정렬해야 하는 복잡한 레이아웃에서 강력합니다.

4. 암시적 및 명시적 그리드: Grid는 암시적 및 명시적 그리드 정의를 모두 허용합니다. 명시적으로 행과 열의 수를 지정할 수도 있고, 내용에 따라 동적으로 행과 열을 생성할 수도 있습니다.

5. 브라우저 지원: Grid는 모던 브라우저에서 지원되며 복잡한 구조가 필요한 대규모 레이아웃에 적합합니다.

어떤 상황에서 어떤 것을 사용해야 할까요?

• Flexbox: 한 방향(가로 또는 세로)의 레이아웃, 네비게이션 메뉴, 목록, 가로 또는 세로로 간단한 요소를 배치할 때 사용합니다.

• Grid: 행과 열 모두를 다루는 이차원 레이아웃, 전반적인 페이지 레이아웃, 복잡한 양식 또는 행과 열을 정확하게 제어해야 하는 어떤 디자인에서도 사용할 수 있습니다.

많은 경우, 하나의 디자인 내에서 Flexbox와 Grid를 조합하여 각 레이아웃 모델의 강점을 활용합니다. 이 두 레이아웃 모델은 상호 배타적이지 않으며 함께 사용하여 견고하고 반응형 레이아웃을 만들 수 있습니다.

- Flex vs Gird

Flexbox (Flexible Box Layout) and Grid (CSS Grid Layout) are both layout models in CSS that enable more efficient and responsive design for web pages. However, they serve different purposes and are used in different scenarios. Here's a brief comparison:

Flexbox:

1. One-Dimensional Layout: Flexbox is designed for one-dimensional layout, either in a row or a column. It's particularly useful for laying out items in a single direction.

2. Content Order: Flexbox allows for easy reordering of elements regardless of their source order in the HTML. This is achieved using the order property.

3. Alignment: It provides powerful alignment capabilities, allowing you to align items both horizontally and vertically within a container.

4. Responsive Design: Flexbox is great for building responsive and flexible layouts, especially for components like navigation bars, sidebars, and card-based layouts.

5. Browser Support: It has good browser support and is well-suited for smaller-scale layouts.

Grid:

1. Two-Dimensional Layout: Grid is designed for two-dimensional layout, allowing you to define both rows and columns. This makes it ideal for complex layouts.

2. Alignment and Spacing: Grid provides precise control over the placement of items in both rows and columns. It allows you to create gutters and control spacing easily.

3. Responsive Design: Grid is powerful for creating responsive designs, especially for large-scale layouts, where you need to align items in both rows and columns.

4. Implicit and Explicit Grids: Grid allows for both implicit and explicit grid definitions. You can define a grid explicitly by specifying the number of rows and columns, or it can create rows and columns dynamically based on the content.

5. Browser Support: Grid is supported in modern browsers and is suitable for larger-scale layouts where a more complex structure is required.

When to Use Which:

• Flexbox: Use when dealing with one-dimensional layouts, like navigation menus, lists, and simple arrangements of elements in a row or column.

• Grid: Use when dealing with two-dimensional layouts, such as overall page layout, complex forms, or any design where precise control over both rows and columns is necessary.

In many cases, a combination of both Flexbox and Grid is used within a single design to take advantage of the strengths of each layout model. They are not mutually exclusive and can complement each other in building robust and responsive layouts.

✅ 3. HTTP vs HTTPS 차이점

HTTP(하이퍼텍스트 전송 프로토콜)와 HTTPS(하이퍼텍스트 전송 프로토콜 보안)는 모두 인터넷을 통해 데이터를 전송하는 데 사용되는 프로토콜입니다. 그러나 이 둘은 주로 보안 면에서 차이가 있습니다.

HTTP (하이퍼텍스트 전송 프로토콜):

1. 보안: HTTP는 보안이 적용되지 않은 상태로 데이터를 전송합니다. 사용자의 웹 브라우저와 웹 사이트 간에 전송되는 데이터가 암호화되지 않아 공격자에 의해 가로채일 수 있습니다. 특히 로그인 자격 증명이나 개인 정보와 같은 민감한 정보가 전송될 때 보안의 취약점이 될 수 있습니다.

2. 사용: HTTP는 주로 보안이 크게 중요하지 않은 정보성 웹사이트나 민감한 사용자 데이터가 전송되지 않는 콘텐츠에서 사용됩니다.

3. 포트: HTTP는 일반적으로 80번 포트를 사용합니다.

HTTPS (하이퍼텍스트 전송 프로토콜 보안):

1. 보안: HTTPS는 HTTP의 안전한 버전입니다. SSL(보안 소켓 레이어)/TLS(전송 계층 보안) 프로토콜을 사용하여 사용자의 브라우저와 웹 사이트 간의 데이터를 암호화합니다. 이러한 암호화를 통해 제3자가 데이터를 쉽게 읽거나 조작할 수 없습니다.

2. 사용: HTTPS는 민감한 정보, 예를 들면 로그인 자격 증명, 개인 정보, 금융 거래와 관련된 웹사이트에서 필수적입니다. 데이터의 무결성과 기밀성을 보호하는 안전한 연결을 제공합니다.

3. 인증: HTTPS는 SSL/TLS 인증을 통해 사용자가 신뢰할 수 있는 웹 사이트에 연결되고 있는지 확인합니다.

4. 포트: HTTPS는 일반적으로 443번 포트를 사용합니다.

주요 차이:

• 암호화: 주된 차이는 데이터의 암호화에 있습니다. HTTPS는 SSL/TLS를 사용하여 데이터를 전송 중에 보호하여 안전하고 개인적인 통신 채널을 제공합니다.

• 보안: 민감한 정보가 관련된 웹사이트에서는 HTTP보다 HTTPS가 훨씬 안전하게 데이터를 전송합니다.

• 인증: HTTPS는 SSL/TLS 인증을 통해 사용자가 신뢰할 수 있는 웹 사이트에 연결되어 있는지 확인합니다.

요약하면 HTTP는 일반적인 웹 브라우징에 적합하지만, 민감한 정보를 다루는 웹사이트에서는 HTTPS가 보안과 개인 정보 보호를 위한 표준으로 간주됩니다. 현재는 대부분의 사용자 데이터를 다루는 웹사이트가 HTTPS를 사용하여 사용자의 보안과 개인 정보를 보호하고 있습니다.

- HTTP vs HTTPS

HTTP (Hypertext Transfer Protocol) and HTTPS (Hypertext Transfer Protocol Secure) are both protocols used for transmitting data over the internet. However, they differ in terms of security.

HTTP (Hypertext Transfer Protocol):

1. Security: HTTP is not secure. The data transferred between the user's web browser and the website is not encrypted, making it susceptible to interception by attackers. This lack of security poses a risk, especially when sensitive information is being transmitted, such as login credentials or personal details.

2. Usage: HTTP is commonly used for transmitting information on websites where security is not a critical concern. For example, informational websites or content that doesn't involve sensitive user data might use HTTP.

3. Port: HTTP typically uses port 80.

HTTPS (Hypertext Transfer Protocol Secure):

1. Security: HTTPS is a secure version of HTTP. It encrypts the data transmitted between the user's browser and the website using SSL/TLS (Secure Sockets Layer/Transport Layer Security) protocols. This encryption ensures that even if a third party intercepts the data, they cannot easily read or manipulate it.

2. Usage: HTTPS is essential for websites that handle sensitive information, such as login credentials, personal details, or financial transactions. It provides a secure connection, protecting the integrity and confidentiality of the data.

3. Authentication: HTTPS provides authentication, ensuring that users are connecting to the legitimate website and not a malicious one. This is achieved through the use of SSL/TLS certificates.

4. Port: HTTPS typically uses port 443.

Key Differences:

• Encryption: The primary difference lies in the encryption of data. HTTPS uses SSL/TLS to encrypt data during transmission, providing a secure and private communication channel.

• Security: HTTPS is considered more secure than HTTP, especially when dealing with sensitive information.

• Authentication: HTTPS provides authentication through SSL/TLS certificates, ensuring that users are connecting to a legitimate and trusted website.

In summary, while HTTP is suitable for general web browsing, HTTPS is crucial for websites that handle sensitive information. It adds an extra layer of security by encrypting data and authenticating the website, making it a standard for secure communication on the internet. Nowadays, most websites that handle user data use HTTPS to ensure the security and privacy of their users.

✅ 4. 쿠키란?

쿠키(Cookie)는 웹 브라우저에 저장되는 작은 데이터 조각으로, 웹 사이트와 브라우저 간에 정보를 교환하는 데 사용됩니다. 주로 사용자의 웹 경험을 개선하고 사용자를 식별하며 상태 정보를 유지하는 데 활용됩니다.

쿠키는 일반적으로 다음과 같은 목적으로 사용됩니다:

1. 세션 관리: 쿠키를 사용하여 웹 사이트는 사용자의 세션을 추적하고 유지할 수 있습니다. 세션 쿠키는 사용자가 웹 사이트를 방문하는 동안에만 유효하며, 브라우저를 닫으면 삭제됩니다.

2. 개인화: 사용자에 대한 정보를 기반으로 웹 사이트를 개인화하는 데 사용될 수 있습니다. 예를 들어, 사용자의 언어 설정이나 사용자가 이전에 방문한 페이지 등을 기억할 수 있습니다.

3. 트래킹 및 분석: 쿠키는 사용자의 활동을 추적하고 웹 사이트의 트래픽을 분석하는 데 사용됩니다. 이는 마케팅 및 사용자 경험 개선을 위해 활용될 수 있습니다.

4. 인증 정보 저장: 사용자가 로그인한 상태를 유지하거나 인증 관련 정보를 저장하는 데 사용됩니다.

쿠키는 클라이언트 측에서 저장되기 때문에 보안 상의 이유로 민감한 정보(비밀번호 등)를 저장하는 데는 적합하지 않습니다. 대신, 세션 쿠키와 같이 인증 토큰이나 세션 ID와 같은 식별자를 저장하고, 서버 측에서 해당 정보를 안전하게 처리하는 것이 일반적입니다.

웹 브라우저는 쿠키에 대한 설정을 사용자가 제어할 수 있도록 하고 있으며, 사용자는 필요에 따라 쿠키를 삭제하거나 비활성화할 수 있습니다. 이러한 기능을 통해 사용자는 개인 정보 보호에 대한 통제를 유지할 수 있습니다.

- What are cookies

A cookie is a small piece of data that a website stores on a user's computer or mobile device through their web browser. Cookies are used to remember information about the user's preferences, actions, and settings, and they play a crucial role in enhancing the user experience on the web. Cookies are created and maintained by web servers and can be sent back and forth between the server and the user's browser as the user interacts with a website.

Key points about cookies include:

1. Data Storage: Cookies store small amounts of data, typically in the form of key-value pairs. The data can include information such as user preferences, login credentials, and tracking information.

2. Session and Persistent Cookies: Session cookies are temporary and are deleted when the user closes their browser. Persistent cookies remain on the user's device for a specified period or until manually deleted. Persistent cookies are often used for tasks like remembering login information.

3. Purpose: Cookies serve various purposes, including session management, personalization, tracking and analytics, and authentication. They help websites remember user preferences and settings, provide personalized content, and track user behavior for statistical analysis.

4. First-Party and Third-Party Cookies: First-party cookies are set by the website the user is currently visiting. Third-party cookies are set by domains other than the one the user is visiting, often by third-party services such as advertisers or analytics providers.

5. Security and Privacy: While cookies are essential for many web functionalities, concerns about privacy and security have led to the development of regulations and browser features that give users control over cookie usage. Users can configure their browsers to block or delete cookies, and websites are encouraged to provide clear information about their cookie practices in privacy policies.

Cookies are an integral part of web technology, enabling websites to remember user preferences and provide a more personalized and efficient browsing experience. However, the responsible use of cookies and respect for user privacy are essential considerations for website developers and businesses.

✅ 5. SPA란?

SPA는 "Single Page Application"의 약자로, 단일 페이지 응용 프로그램을 나타냅니다. SPA는 전통적인 다중 페이지 웹 애플리케이션과는 달리, 하나의 HTML 페이지를 로드한 후에 동적으로 페이지의 내용을 업데이트하는 방식으로 동작합니다.

SPA의 주요 특징은 다음과 같습니다:

1. 단일 페이지 로드: 최초에 한 번만 전체 페이지를 로드하고 이후에는 페이지 전환이 발생해도 새로운 페이지를 서버에서 가져오지 않습니다. 대신, 필요한 데이터를 비동기적으로 로드하여 현재 페이지의 일부분만 업데이트합니다.

2. 동적 업데이트: 사용자가 애플리케이션에서 다른 섹션 또는 페이지로 이동할 때, 페이지가 다시 로드되지 않고 동적으로 업데이트됩니다. 이는 사용자 경험을 향상시키고 빠른 응답성을 제공합니다.

3. SPA 프레임워크 및 라이브러리: 대표적인 SPA 프레임워크로는 Angular, React, Vue.js 등이 있습니다. 이러한 프레임워크와 라이브러리는 SPA 개발을 간편하게 만들어주고 상태 관리, 라우팅, 컴포넌트 기반 아키텍처 등을 제공합니다.

4. API 통신: SPA는 서버에서 필요한 데이터를 JSON 또는 XML 형식의 API를 통해 비동기적으로 가져와서 동적으로 페이지를 업데이트합니다. 이는 웹 애플리케이션이 더욱 효율적으로 동작하도록 합니다.

5. 뒤로 가기와 브라우저 히스토리: SPA는 뒤로 가기와 브라우저 히스토리 관리를 위해 자체적으로 라우팅을 처리하거나 브라우저 히스토리 API를 사용합니다.

SPA의 장점으로는 사용자 경험이 향상되고 더 빠른 성능을 제공할 수 있다는 점이 있습니다. 그러나 초기 로딩 시에 모든 리소스를 한 번에 다운로드해야 하고, 검색 엔진 최적화에 대한 일부 고려사항이 있을 수 있습니다. 최근에는 SSR(Server-Side Rendering)와 CSR(Client-Side Rendering)를 결합하는 방법 등으로 이러한 문제를 극복하는 시도가 있습니다.

- What is SPA

SPA stands for "Single Page Application." It is a type of web application or website architecture where the entire application or site is contained within a single HTML page. Unlike traditional multi-page applications, where each interaction with the user typically involves loading a new page from the server, SPAs load only once, and subsequent interactions dynamically update the content on the page without requiring a full page reload.

Key features of Single Page Applications include:

1. Single Page Load: SPAs load a single HTML page initially, and subsequent content updates are handled dynamically through JavaScript, typically in response to user interactions.

2. Dynamic Updates: Instead of loading entirely new pages, SPAs update the content dynamically within the existing page. This is achieved using AJAX (Asynchronous JavaScript and XML) or more modern techniques like Fetch API.

3. Client-Side Routing: SPAs often use client-side routing to manage navigation without making additional requests to the server. This is done using JavaScript to manipulate the browser's URL and update the content on the page accordingly.

4. Improved User Experience: SPAs can provide a smoother and more responsive user experience since they avoid the delays associated with full page reloads. This can lead to a more app-like feel for web applications.

5. SPA Frameworks and Libraries: Popular JavaScript frameworks and libraries, such as React, Angular, and Vue.js, are commonly used to build SPAs. These tools provide a structured way to manage the application's state, handle routing, and update the user interface efficiently.

6. API Communication: SPAs often communicate with the server through APIs (Application Programming Interfaces) to fetch and send data asynchronously. This allows SPAs to update their content without requiring a full page reload.

While SPAs offer benefits such as a smoother user experience and improved performance, they also come with challenges, such as initial load times and potential SEO (Search Engine Optimization) issues. Developers often use techniques like code splitting, lazy loading, and server-side rendering to mitigate these challenges and make SPAs more efficient and search engine-friendly.