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

✅ 1. 반응형웹과 적응형 웹의 차이

반응형 웹 디자인과 적응형 웹 디자인은 둘 다 웹 페이지를 다양한 디바이스와 화면 크기에 대응하도록 하는 목적에서 출발하였지만, 몇 가지 중요한 차이가 있습니다.

1. 정의:

   • 반응형 웹(Responsive Web Design): 반응형 웹은 하나의 웹 사이트를 구축하고, CSS 미디어 쿼리 및 유연한 그리드를 사용하여 화면 크기에 따라 레이아웃과 디자인을 조절하는 기술입니다. 이는 주로 유동형 레이아웃을 사용하며, 모든 디바이스에 대한 일관된 사용자 경험을 제공합니다.
   • 적응형 웹(Adaptive Web Design): 적응형 웹은 여러 개별적인 레이아웃을 만들어, 특정 디바이스나 화면 크기에 최적화된 디자인을 제공합니다. 사용자의 디바이스에 따라 서버에서 적절한 레이아웃을 선택하여 전송하므로, 서버 측에서의 로직이 필요합니다.

2. 레이아웃 구성:

   • 반응형 웹: 일반적으로 유동형 그리드를 사용하며, 모든 화면 크기에 대해 하나의 레이아웃을 유지하면서 해당 크기에 맞게 조절합니다.
   • 적응형 웹: 여러 개의 레이아웃을 디자인하고, 각 디바이스에 따라 가장 적합한 레이아웃을 동적으로 선택하여 표시합니다.

3. 이점과 단점:

   • 반응형 웹: 유지보수가 쉽고, 일관된 사용자 경험을 제공하는 장점이 있습니다. 그러나 모든 디바이스에 대한 최적화된 디자인을 제공하는 데 한계가 있을 수 있습니다.
   • 적응형 웹: 특정 디바이스에 대해 더 정교한 최적화가 가능하나, 여러 레이아웃을 유지보수해야 하고, 새로운 디바이스에 대응하기 위해 추가적인 레이아웃을 만들어야 하는 단점이 있을 수 있습니다.

4. 로드 속도:

   • 반응형 웹: 모든 디바이스에 대한 디자인이 하나의 파일에 포함되므로, 모든 디자인을 다운로드해야 합니다.
   • 적응형 웹: 디바이스에 따라 필요한 디자인만 다운로드하므로 초기 로딩 속도를 향상시킬 수 있습니다.

어떤 방식을 선택할지는 프로젝트의 특정 요구사항, 예산, 유지보수 측면에서 고려되어야 합니다. 일부 프로젝트에서는 반응형과 적응형 디자인의 특징을 혼합하여 사용하기도 합니다.

- Differences between responsive and adaptive web

Responsive web design and adaptive web design are both approaches to make websites accessible and visually appealing across various devices and screen sizes, but they have some key differences:

1. Definition:

   • Responsive Web Design (RWD): Responsive web design involves creating a single website that can adapt its layout and design based on the screen size by using flexible grids and CSS media queries. It aims to provide a consistent user experience across a wide range of devices.
   • Adaptive Web Design (AWD): Adaptive web design, on the other hand, entails creating multiple distinct layouts for various devices. The server detects the type of device accessing the website and sends the appropriate layout to be displayed. Each layout is optimized for a specific device or screen size.

2. Layout Composition:

   • Responsive Web Design: Typically uses a fluid grid layout, adjusting content proportionally to fit different screen sizes while maintaining a single layout.
   • Adaptive Web Design: Involves creating fixed layouts specifically tailored for different devices, and the server selects the appropriate layout based on the device's characteristics.

3. Approach to Images:

   • Responsive Web Design: Utilizes flexible images and CSS media queries to resize and adapt images based on the screen size.
   • Adaptive Web Design: Requires creating different sets of images optimized for each layout, and the server delivers the images tailored to the device requesting them.

4. Flexibility and Maintenance:

   • Responsive Web Design: Offers a more flexible and scalable solution as content adapts dynamically to different screen sizes. It can be easier to maintain since there's only one set of code to manage.
   • Adaptive Web Design: Can be less flexible because it requires designing and maintaining multiple layouts. Changes may need to be applied to each layout individually.

5. Load Speed:

   • Responsive Web Design: The entire codebase, including all styles and resources, is delivered to the device, which may result in larger file sizes.
   • Adaptive Web Design: Only the resources and code specific to the selected layout are delivered, potentially leading to faster load times, especially on mobile devices.

6. Development Complexity:

   • Responsive Web Design: Often considered simpler and more straightforward to implement, making it a popular choice for many projects.
   • Adaptive Web Design: May require more development effort due to the creation and maintenance of multiple layouts.

In summary, responsive web design uses a single flexible layout that adapts to various screen sizes, while adaptive web design involves creating multiple fixed layouts tailored for specific devices and serving the appropriate layout based on device detection. The choice between the two depends on project requirements, priorities, and the desired user experience.

✅ 2. CSS 우선순위

CSS 우선순위는 스타일 규칙이 충돌할 때 어떤 스타일이 우선하여 적용되는지를 결정하는 규칙입니다. 다음은 CSS 우선순위의 일반적인 규칙입니다.

1. !important:

   • !important는 가장 높은 우선순위를 가지며, 스타일 속성 뒤에 붙입니다. 그러나 !important를 남용하면 코드 유지보수가 어려워질 수 있으므로 주의해서 사용해야 합니다.

     div {
       color: red !important;
     }

2. 인라인 스타일 (Inline Styles):

   • HTML 요소에 직접 스타일을 적용한 경우, 해당 스타일은 다른 스타일 규칙을 이기고 우선적으로 적용됩니다.

     <div style="color: blue;">This is a blue text.</div>

3. ID 선택자:

   • ID 선택자는 페이지 내에서 특정 요소를 식별하는 데 사용됩니다. ID 선택자로 지정된 스타일 규칙은 클래스 선택자나 태그 선택자보다 우선합니다.

     #myElement {
       font-size: 18px;
     }

4. 클래스 선택자 및 속성 선택자:

   • 클래스 선택자와 속성 선택자는 여러 요소에 스타일을 적용할 때 사용됩니다. 여러 클래스가 결합되어 사용될 때는 오른쪽에서 왼쪽으로 읽히며, 더 오른쪽에 위치한 선택자가 우선합니다.

     .myClass {
       font-weight: bold;
     }
     
     input[type="text"] {
       width: 200px;
     }

5. 요소(태그) 선택자:

   • 요소 선택자는 특정 HTML 요소에 스타일을 적용할 때 사용됩니다. 일반적인 요소 선택자는 가장 낮은 우선순위를 가집니다.

     p {
       color: green;
     }

6. 상위 요소에 의한 상속:

   • 하위 요소는 부모 요소로부터 스타일을 상속받을 수 있습니다. 그러나 상속된 스타일은 직접 지정된 스타일보다 우선순위가 낮습니다.

CSS 스타일 규칙이 충돌할 경우, 이러한 우선순위 규칙을 이해하여 적절한 스타일이 적용되도록 조절하는 것이 중요합니다. CSS의 우선순위를 파악하면 코드를 더 예측 가능하게 작성할 수 있습니다.

- CSS Priority

CSS priority, often referred to as specificity, determines which styles are applied to an HTML element when conflicting styles are present. The priority is calculated based on the type of selectors and their specificity. Here's a breakdown of how specificity is calculated:

1. Inline Styles:

   • Styles applied directly to an element using the style attribute have the highest specificity.

   • Example:

     <div style="color: red;">This is a red text.</div>

2. ID Selectors:

   • ID selectors have a higher specificity than class selectors or element selectors.

   • Example:

     #myElement {
       font-size: 18px;
     }

3. Class Selectors, Attribute Selectors, and Pseudo-Classes:

   • Class selectors, attribute selectors, and pseudo-classes have the same specificity. Multiple occurrences increase specificity.

   • Example:

     .myClass {
       font-weight: bold;
     }
     
     input[type="text"] {
       width: 200px;
     }

4. Element (Tag) Selectors:

   • Element selectors have the lowest specificity. They apply styles to all instances of that element type.

   • Example:

     p {
       color: green;
     }

5. Combinators and the Universal Selector:

   • Combinators (like descendant, child, adjacent sibling) and the universal selector (*) have no specificity on their own. They inherit the specificity of the most specific selector in the group.

   • Example:

     div p {
       /* Specificity depends on the specificity of div and p */
       color: blue;
     }

To calculate the specificity, you assign a weight to each type of selector: 1 for element selectors, 10 for class selectors, 100 for ID selectors, and so on. The specificity is then represented as a four-part number (e.g., 0-0-1-0 for one ID selector). The more specific selector takes precedence.

If two selectors have the same specificity, the one declared later in the style sheet or the one with a higher source order will take precedence. If specificity is still tied, the rule that is closest to the element in the HTML hierarchy will be applied.

Understanding CSS priority helps developers manage styles effectively and avoid unexpected results when styles conflict.

✅ 3. 프로세스와 스레드

프로세스와 스레드는 모두 컴퓨터에서 동시에 여러 작업을 처리하는 데 사용되는 개념이지만, 그들 간에 중요한 차이가 있습니다.

1. 정의:

   • 프로세스(Process): 운영 체제에서 실행 중인 프로그램의 인스턴스를 나타냅니다. 각 프로세스는 독립적인 메모리 공간을 가지며, 서로 영향을 미치지 않습니다.
   • 스레드(Thread): 하나의 프로세스 내에서 실행되는 작업의 최소 단위입니다. 스레드는 프로세스 내의 공유된 메모리 공간을 사용하며, 같은 프로세스에 속한 다른 스레드들과 데이터를 공유할 수 있습니다.

2. 자원 공유:

   • 프로세스: 독립된 메모리 공간을 가지기 때문에, 프로세스 간에는 직접적인 메모리 공유가 어렵습니다. 프로세스 간 통신(IPC)을 사용하여 데이터를 교환해야 합니다.
   • 스레드: 같은 프로세스 내의 스레드들은 공유된 메모리를 사용하기 때문에, 변수 등의 데이터를 직접 공유할 수 있습니다.

3. 생성 및 소멸 오버헤드:

   • 프로세스: 프로세스 간 전환에는 오버헤드가 큽니다. 새로운 프로세스를 생성하거나 종료하는 데에는 상당한 시간과 자원이 소요됩니다.
   • 스레드: 스레드 간 전환은 프로세스 간 전환보다 효율적이며 오버헤드가 낮습니다. 스레드는 같은 프로세스 내에서 실행되므로, 프로세스 간 전환보다 경량화됩니다.

4. 안전성:

   • 프로세스: 한 프로세스의 오류가 다른 프로세스에 영향을 미치지 않습니다. 프로세스는 독립적이기 때문에 안전성이 높습니다.
   • 스레드: 한 스레드의 오류가 다른 스레드에 영향을 미칠 수 있습니다. 스레드는 같은 프로세스 내에서 실행되지만, 공유된 자원을 사용하기 때문에 동기화에 신경을 써야 합니다.

5. 확장성:

   • 프로세스: 프로세스 간 통신이 필요하므로 병렬 프로세싱이 더 어려울 수 있습니다.
   • 스레드: 공유된 자원을 효율적으로 사용할 수 있기 때문에, 멀티코어 환경에서 병렬성을 확보하기가 더 쉽습니다.

프로세스와 스레드는 각각의 장단점을 가지고 있으며, 어떤 상황에서 사용할지는 프로그램의 목적과 요구사항에 따라 다릅니다.

- Processes and Threads

Processes and threads are fundamental concepts in operating systems and concurrent programming. They represent the basic units of execution, and each has its own characteristics and purposes.

Processes:

1. Definition:

   • A process is an independent program in execution. It has its own memory space, resources, and state.

2. Memory Space:

   • Each process has its own address space, meaning that the memory allocated to a process is isolated from the memory allocated to other processes.

3. Resource Allocation:

   • Processes are allocated system resources such as CPU time, file handles, and network connections. They are independent entities, and communication between processes often involves inter-process communication (IPC).

4. Creation Overhead:

   • Creating a new process typically incurs a higher overhead compared to creating a new thread. Processes may have their own copy of the program code.

5. Isolation:

   • Processes are isolated from each other, providing a higher level of fault tolerance. If one process crashes, it does not affect others.

6. Communication:

   • Processes communicate through mechanisms like message passing or shared memory.

Threads:

1. Definition:

   • A thread is the smallest unit of execution within a process. Threads within the same process share the same resources, such as memory space.

2. Memory Space:

   • Threads within the same process share the same address space and resources. They can directly access the memory of other threads in the same process.

3. Resource Allocation:

   • Threads share resources allocated to the process, which includes file handles, open network connections, and other process-specific resources.

4. Creation Overhead:

   • Creating a new thread has lower overhead compared to creating a new process since threads within a process share the same resources.

5. Isolation:

   • Threads within a process are not fully isolated from each other. If one thread modifies a memory location, the change is immediately visible to other threads in the same process.

6. Communication:

   • Threads within the same process can communicate more easily, as they share the same memory space. However, care must be taken to synchronize access to shared data to avoid race conditions.

Relationship:

• A process can have multiple threads, and these threads share the same resources within the process.
• Processes are independent of each other, while threads within a process share resources and can communicate more easily.

Use Cases:

• Processes:

  • Used for running independent programs or tasks.
  • Provide better fault isolation.
  • Suitable for parallelism on multi-core systems.

• Threads:

  • Used for concurrent execution within a single program.
  • Efficient for tasks that can be parallelized and require shared data.

In summary, processes and threads are essential for concurrent programming, with processes providing better isolation and threads offering more efficient communication and resource sharing within a program. The choice between processes and threads depends on the specific requirements of the application.