<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>코딩입문자 자기개발일지</title>
    <link>https://jugu1523.tistory.com/</link>
    <description>코딩입문 자기개발용 블로그</description>
    <language>ko</language>
    <pubDate>Sat, 13 Jun 2026 21:20:40 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>카를폰</managingEditor>
    <item>
      <title>운영체제</title>
      <link>https://jugu1523.tistory.com/99</link>
      <description>&lt;h3 data-ke-size=&quot;size23&quot;&gt;운영체제란?&lt;/h3&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;컴퓨터는 크게 데이터를 처리하는 물리적 장치인 하드웨어,&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;작업을 지시하는 명령어로 작성된 프로그램인 소프트웨어로 나뉩니다.&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;운영체제는,&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;하드웨어를 효율적으로 사용할 수 있게 관리하는 소프트웨어&lt;/b&gt;입니다.&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;컴퓨터 사용자와 컴퓨터 하드웨어 사이에서 중개자 역할을 해 주는 프로그램입니다.&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size23&quot;&gt;CPU와 GPU&lt;/h3&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;CPU&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Central Processing Unit&lt;/li&gt;
&lt;li&gt;중앙처리장치&lt;/li&gt;
&lt;li&gt;순차적인 작업에 활용&lt;/li&gt;
&lt;li&gt;직렬처리에 최적하된 적은 수의 코어로 구성&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;GPU&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Graphics Processing Unit&lt;/li&gt;
&lt;li&gt;반복적이고 비슷한 대량의 연산 수행 (픽셀로 구성된 영상, 비디오 등을 처리할 때 적합)&lt;/li&gt;
&lt;li&gt;병렬적인 작업에 활용&lt;/li&gt;
&lt;li&gt;병렬처리에 최적화된 수천 개의 코어로 구성&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 id=&quot;주기억장치&quot; style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-size=&quot;size26&quot;&gt;주기억장치&lt;/h2&gt;
&lt;h3 id=&quot;ram&quot; style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-size=&quot;size23&quot;&gt;RAM&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Random Access Memory&lt;/li&gt;
&lt;li&gt;휘발성 메모리 (저장된 정보가 컴퓨터를 재시작하거나 종료할 때 삭제됨)&lt;/li&gt;
&lt;li&gt;데이터를 읽는 속도와 기록하는 속도가 같음 읽기와 쓰기 모두 가능(ROM은 읽기만), 빠르다(ROM에 비해)&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;컴퓨터의 주기억장치, 응용 프로그램 로딩, 데이터 일시 저장등과 같은 곳에 사용됩니다.&lt;/p&gt;
&lt;h3 id=&quot;rom&quot; style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-size=&quot;size23&quot;&gt;ROM&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Read Only Memory&lt;/li&gt;
&lt;li&gt;비휘발성 메모리
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;정보가 칩에 영구 저장&lt;/li&gt;
&lt;li&gt;전원이 끊어져도 기록된 데이터들이 소멸되지 않음&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;(일반적으로) 한번 저장하면 못지우고 계속 사용해야 함&lt;/li&gt;
&lt;li&gt;예) BIOS 창&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;CPU와 메모리간의 접근성에 관한 분류&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;CPU에 가까운 순서대로 &lt;b&gt;CPU(레지스터)&lt;/b&gt; - &lt;b&gt;캐시 메모리&lt;/b&gt; - &lt;b&gt;주 기억 장치&lt;/b&gt; - &lt;b&gt;캐시 메모리&lt;/b&gt; - &lt;b&gt;보조 기억 장치&lt;/b&gt; 로 나눌 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;일반적으로 용량이 작을수록 동작속도가 빠르며, 용략이 커질수록 동작 속도가 느려진다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇기에 속도가 빠를 수록 용량대비 가격이 비싸진다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;CPU에서 계산한 결과가 메모리에 저장된다.&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;CPU는 계산, 메모리는 기억을 담당 하는 것이다.&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;레지스터&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;CPU의 일부로 CPU의 동작 속도와 동기화되어 작동한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt; 사용자가 값을 읽고 쓸 수 있으며 동작 속도가 매우 빠르지만 수십~수백개의 정수형&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;과 실수형 데이터만을 저장할 수 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;&lt;span&gt; &lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;SIMD&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;를 지원하는 CPU는 SIMD 레지스터 역시 따로 제공한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;주 기억 장치 &lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;(Main Memory)&lt;/span&gt; &lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;CPU에서 &lt;b&gt;직접 접근이 가능한 메모리. &lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;이 뜻은 '주기억장치 100번지의 내용을 레지스터 1번에 저장하라', 혹은 '레지스터 1번의 내용을 주기억장치 100번에 덮어써라'와 같은 명령이 가능하다는 뜻이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt; 직접 접근이 가능하지만 상수를 쓰는 것 이외의 연산은 CPU에서 바로 수행할 수 없으며, 메모리의 값을 레지스터로 로드, 연산, 연산 결과 적용의 단계를 거쳐야 한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;CISC CPU에서는 메모리의 값을 직접 변경하는 명령어를 제공하는것처럼 보이지만 내부적으로는 위 단계를 거친다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;보조 기억 장치&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;CPU에서 &lt;b&gt;직접 접근이 불가능한 메모리.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt; 접근하려면 디바이스 드라이버와 시스템 콜을 통하여 기억장치의 특정 위치의 내용을 주기억장치로 로드(Load)한 뒤 읽어야 한다. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;예를 들어 '0번 디스크 8번 트랙 12번 섹터 16번지의 값을 레지스터 1번에 저장하라'와 같은 명령이 불가능하다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt; 해당 내용을 읽으려면 '0번 디스크 8번 트랙 12번 섹터를 주기억장치 1024번지에 로드하라'는 시스템 콜을 먼저 호출한 후 메모리에서 '1024+16번지의 값을 레지스터 1번에 저장하라'와 같은 형태로 접근해야만 한다. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #373a3c; text-align: left;&quot;&gt;CPU의 입장에서 보조기억장치는 여러 종류의 주변장치 중 하나이며 그 중 '저장 기능'을 지니고 있는 장치일 뿐이다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>cs (컴퓨터 사이언스)</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/99</guid>
      <comments>https://jugu1523.tistory.com/99#entry99comment</comments>
      <pubDate>Mon, 6 Nov 2023 16:46:50 +0900</pubDate>
    </item>
    <item>
      <title>프로세스와 스레드</title>
      <link>https://jugu1523.tistory.com/98</link>
      <description>&lt;h3 data-ke-size=&quot;size23&quot;&gt;프로세스란?&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;프로세스(process)란 일반적으로 CPU에 의해 처리되는 사용자 프로그램이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt; 시스템 프로그램 즉&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;b&gt;실행중인 프로그램&lt;/b&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;을 의미하며, 작업(Job), 태스크(Task)라고도 한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;프로그램의 명령어와 정적 데이터가 자원을 할당받고 메모리에 적재되면 프로세스가 된다&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;프로세스의 특징&lt;/h4&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;프로세스는 각각 독립된 영역(Code, Data, Stack, Heap)을 할당 받는다.&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;1. Code(Text) 영역&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;실행 명령을 포함하는 코드가 들어가는 부분이다.&lt;/li&gt;
&lt;li&gt;프로그램을 시작할 대 컴파일한 프로그램(기계어)가 저장되어있으며, 읽기 전용영역으로 변경 시 오류가 발생한다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;2. Data 영역&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;프로그램이 실행될 때 생성, 프로그램이 종료되면 시스템에 반환된다.&lt;/li&gt;
&lt;li&gt;전역변수, 정적변수, 배열, 구조체 등이 저장된다.&lt;/li&gt;
&lt;li&gt;초기화된 데이터는 Data(GVAR)영역에 저장된다.&lt;/li&gt;
&lt;li&gt;초기화 되지 않은 데이터는 BSS영역에 저장된다&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;3. Heep 영역&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;메모리를 동적으로 할당할 때 사용하는 메모리 영역&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;4.Stack 영역&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;프로그램이 자동으로 사용하는 메모리 영역&lt;/li&gt;
&lt;li&gt;함수 호출과 관계되는 지역변수, 매개변수가 저장된다.&lt;/li&gt;
&lt;li&gt;함수 호출시 생성, 함수가 끝나면 반환된다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;멀티 프로세스&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하나의 응용 프로그램을 여러 개의 프로세스로 구성하여 각 프로세스가 하나의 작업을 처리하게 하는 것&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;장점&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1. 여러개의 자식 프로세스가 존재하며, 각각 하나의 작업을 처리하기에 하나의 프로세스에 문제가 발생한다면,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다른프로세스에 영향이 확산되지 않는다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;단점&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1.Context Switching 과정에서 캐시 메모리 초기화 등 무거운 작업이 진행되고 많은 시간이 소모되는 등 오버헤드가 발생한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;2. 프로세스는 독립된 메모리 영역을 가지고 있기때문에, 공유하는 메모리가없다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇기에&amp;nbsp; &lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot;&gt;Context Switching 이 발생하면 캐시에 있는 모든 데이터를 모두 리셋하고 다시 캐시 정보를 불러와야 한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;스레드란?&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;스레드(Thread)란 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;스레드의 특징&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;스레드는 프로세스 내에서 각각 Stack만 할당 받으며, Code, Data, Heap 영역은 공유한다.&lt;/li&gt;
&lt;li&gt;같은 프로세스 안에 있는 여러 스레드들은 같은 Heap을 공유한다.(프로세스는 다른 프로세스의 메모리에 접근 할 수없다.)&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;멀티 스레드&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하나의 프로그램을 여러 개의 스레드로 구성하는 방식이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;장점&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;스레드는 Stack을 제외한 자원들을 공유하는 특징이 있기 때문에 &lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: left;&quot;&gt;Context Switching 시에 캐시 메모리를 비울 필요가 없고 이를 통해서 리소스를 아낄 수 있다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Stack 이외의 메모리를 공유하고 있기 때문에 통신의 부담도 적다.&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;단점&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;내부의 메모리를 공유하고 있기에, 한 프로세스의 스레드에 문제가 발생시 다른 스레드에 문제가 발생 할 수있다.&lt;/li&gt;
&lt;li&gt;같은 데이터를 공유하기때문에 데이터 동기화를 신경쓸 필요가 있다.&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;멀티 프로세스와 멀티 스레드&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;멀티 프로세스는 하나의 스레드에 문제가 발생하더라도, 다른 프로세스에 영향을 끼치지 않는 다는 장점을 가지지만,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;멀티 스레드에 비해 많은 메모리와 CPU시간을 차지한다는 단점을 가진다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;멀티 스레드는 멀티 프로세스보다 적은 메모리 공간을 가지며,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;Context Switching 이 빠르다는 장점이 있지만,&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;하나의 스레드에 문제가 발생하면 다른 스레드에도 문제가 발생 할 수 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;공통점으론 여러 작업을 동시 수행한다는 것이다.&lt;/span&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;적용해야 하는 시스템에 따라 취사 선택을 해야한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h1 id=&quot;3-context-switching&quot; style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;Context Switching&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;Context Switching 이란 하나의 프로세스가 CPU를 사용중인 상태에서 다른 프로세스가 CPU를 사용하도록 하기 위해, 이전의 프로세스의 상태를 보관하고 새로운 프로세스의 상태를 적재하는 작업을 말한다. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #212529; text-align: start;&quot;&gt;한 프로세스의 문맥(상태)은 프로세스 제어 블록(PCB)에 기록되어 있다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>cs (컴퓨터 사이언스)</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/98</guid>
      <comments>https://jugu1523.tistory.com/98#entry98comment</comments>
      <pubDate>Mon, 6 Nov 2023 16:21:29 +0900</pubDate>
    </item>
    <item>
      <title>09-23 Get 요청을 보낼 때 값을 같이 보내기</title>
      <link>https://jugu1523.tistory.com/97</link>
      <description>&lt;h3 data-ke-size=&quot;size23&quot;&gt;문제&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;간단한 검색기능 구현을 하던 중, Get 요청을 보내는데 keyowrd를 넣어 보내고 싶었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;고민&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Get 요청은 무언가 데이터를 보내지 않아, keyword값을 어떻게 보내야 하는 것인가 고민하게 되었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Post 요청으로 Body에 값을 담아 보내면 되었지만, 검색 자체는 db에서 값을 가져오는 것만 하기에 Get요청이 맞는 것이라 생각하였다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;body에 넣어 보낸다면 그것은 Post이지 Get은 아니였기에 고민하게 되었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;해결&amp;nbsp;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Get 요청도 엔드포인트 값으로 요청을 하기 때문에 엔드포인트에 값을 넣어 주는 방법을 찾게되었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #1f1f1f; color: #cccccc; text-align: start;&quot;&gt;http://localhost:3000/api/posts/search&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이러한 엔드포인드에서 keyword를 보내기위해&lt;span style=&quot;background-color: #1f1f1f; color: #cccccc; text-align: start;&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #1f1f1f; color: #cccccc; text-align: start;&quot;&gt;http://localhost:3000/api/posts/search?keyword=${keyowrd}&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;엔드포인트 끝에 ?keyword=${keyword}로 값을 함께 보낼 수 있게 된 것이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>일차 TIL</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/97</guid>
      <comments>https://jugu1523.tistory.com/97#entry97comment</comments>
      <pubDate>Wed, 20 Sep 2023 22:46:59 +0900</pubDate>
    </item>
    <item>
      <title>의존성 주입이란</title>
      <link>https://jugu1523.tistory.com/96</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;background-color: #ffffff; color: #1d1c1d; text-align: left;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;DI(Dipendency Injection, 의존성 주입)&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: #ffffff; color: #1d1c1d; text-align: left;&quot;&gt;의존성 주입(Dependency Injecdtion)이란 하나의 객체가 다른 객체에 의존성을 제공하는 기술. 코드의 결합도를 느슨하게 하고, 객체의 생성과 사용을 분리하여 코드의 가독성과 재사용성을 높여줌.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: #ffffff; color: #1d1c1d; text-align: left;&quot;&gt;의존관계에 있을 때, 의존하는 객체에 변형이 생기거나 다른 객체를 사용해야 하는 경우가 생긴다면 관련 코드를 모두 바꿔야 함. (확장성이 적고, 결합도가 높음)&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: #ffffff; color: #1d1c1d; text-align: left;&quot;&gt;이런 의존관계를 해결하려면 인터페이스를 만들고 그것의 구현체를 만들면서 해결할 수 있음&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: #ffffff; color: #1d1c1d; text-align: left;&quot;&gt;다만 단순히 외부에서 객체를 전달받는 것으로는 의존성 주입이라고 하지 않음. 의존성 주입을 제대로 하기 위해서는 추상화된 객체를 외부에서 받도록 해야 함.&lt;/span&gt;&lt;/p&gt;</description>
      <category>cs (컴퓨터 사이언스)</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/96</guid>
      <comments>https://jugu1523.tistory.com/96#entry96comment</comments>
      <pubDate>Tue, 29 Aug 2023 22:47:23 +0900</pubDate>
    </item>
    <item>
      <title>23-08-28 TIL DTO에서의 null 값 설정</title>
      <link>https://jugu1523.tistory.com/95</link>
      <description>&lt;div style=&quot;background-color: #1f1f1f; color: #cccccc;&quot;&gt;
&lt;div&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;&amp;nbsp; @&lt;/span&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;IsString&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;()&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #9cdcfe;&quot;&gt;name&lt;/span&gt;&lt;span style=&quot;color: #d4d4d4;&quot;&gt;?:&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #4ec9b0;&quot;&gt;string&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이 코드를 사용 하던 중, 수정 기능을 수정을 하게되었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;만약 name 을 입력하지 않는다면 값의 수정을 하고 싶지 않았는데&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;null 값을 설정을 하지 않아 입력을 하지 않았을 경우, dto에서 막혀 코드 자체가 실행되지 않았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그래서 값입력이 없을때, null 값을 설정해 주는 코드로 수정하여 작업을 진행하니 성공하였다.&lt;/p&gt;
&lt;div style=&quot;background-color: #1f1f1f; color: #cccccc;&quot;&gt;
&lt;div&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;&amp;nbsp; @&lt;/span&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;IsString&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;()&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #9cdcfe;&quot;&gt;name&lt;/span&gt;&lt;span style=&quot;color: #d4d4d4;&quot;&gt;?:&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #4ec9b0;&quot;&gt;string = null&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Typescript에선 하나하나 세세하게 타입 설정을 하여 문제를 잡아 내는데,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이러한 초기 설정값을 잘 잡아주는 것이 중요한 것 같다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그리고 수정이 필요할 때, 이렇게 바꿈으로 다른 곳에서 오류가 나지 않는 것인가를 확인하고 고민을 해봐야할 것이다.&lt;/p&gt;</description>
      <category>일차 TIL</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/95</guid>
      <comments>https://jugu1523.tistory.com/95#entry95comment</comments>
      <pubDate>Mon, 28 Aug 2023 23:00:18 +0900</pubDate>
    </item>
    <item>
      <title>브라우저의 작동방식은?</title>
      <link>https://jugu1523.tistory.com/94</link>
      <description>&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;&lt;b data-stringify-type=&quot;bold&quot;&gt;브라우저의 구조&lt;/b&gt;&lt;br /&gt;사용자 인터페이스&lt;br /&gt;주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 활용하는 서비스들 (요청한 페이지를 보여주는 창을 제외한 나머지 부분)브라우저 엔진&lt;br /&gt;사용자 인터페이스와 렌더렝 엔진 사이의 동작 제어렌더링 엔진&lt;br /&gt;요청한 콘텐츠 표시(ex. html요청이 들어오면 html, css 파싱해서 화면에 표시)통신&lt;br /&gt;http 요청과 같은 네트워크 호출에 사용(플랫폼의 독립적인 인터페이스로 구성되어 있음)UI 백엔드&lt;br /&gt;select / input 등 기본적인 위젯을 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.자바스크립트 파서&lt;br /&gt;자바스크립트 코드를 해석하고 실행데이터 저장소&lt;br /&gt;Cookie, Local Storage 등 local에 데이터를 저장하는 영역&lt;b data-stringify-type=&quot;bold&quot;&gt;웹 페이지 렌더링 과정&lt;/b&gt;&lt;br /&gt;URL Entered: 사용자가 웹 브라우저에서 사이트 주소를 입력&lt;br /&gt;DNS Lookup: DNS서버로 접근하여 사이트 주소에 해당되는 Server IP를 획득&lt;br /&gt;Socket Connection: Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결&lt;br /&gt;HTTP Request: Client에서 HTTP Header와 데이터가 서버로 전송&lt;br /&gt;Content Download: 해당 요청이 Server에 도달하면 사용자가 요청한 문서를 다시 웹 브라우저에 전송&lt;br /&gt;Browser Rendering: 전달된 문서를 웹 브라우저의 렌더링엔진에서 파싱이후 렌더링&lt;b data-stringify-type=&quot;bold&quot;&gt;렌더링 엔진 작동 과정&lt;/b&gt;&lt;br /&gt;&lt;b data-stringify-type=&quot;bold&quot;&gt;rendering-flow&lt;/b&gt;&lt;/div&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;DOM Tree 생성&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;CSSOM 생성&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;Render Tree(DOM+COSSOM) 생성&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;Render Tree reflow&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;Render Tree painting&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;1.DOM(Document Object Model) 생성&lt;br /&gt;html파일을 서버로부터 불러오면, html파일을 파싱해서 DOM을 생성한다, html 파일을 파싱하는 도중 script 태그나, stylesheet link를 만나면 잠시 html 파싱을 멈추고 js나 css를 파싱한다.&lt;br /&gt;다음 네 단계를 거쳐서, 트리 구조 모양의 DOM이 생성된다.&lt;/div&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;Conversion(변환) : HTML의 raw bytes(원시 바이트)형태로 서버에서 받아온다. 해당 파일의 인코딩(예:UTF-8)에 따라 문자로 변환한다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;어휘 분석(토큰화) : 브라우저가 변환된 문자열을 HTML5 표준에 따라 고유 토큰으로 변환한다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;구문 분석(렉싱) : 이 토큰들은 다시 각각의 특성과 규칙을 정의한 object(객체) &amp;ldquo;노드&amp;rdquo;로 변환된다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;DOM 생성 : HTML 마크업이 여러 태그 간의 관계를 나타내기 때문에 DOM은 트리 구조를 가진다. 따라서, DOM에 포함된 노드 또한 서로 관계를 가지게 된다. 다시 말해서, 노드의 상대적인 관계를 이용하면, 하나의 노드를 기준으로 모든 노드에 접근할 수 있다.&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;DOM 트리는 마크업과 1:1의 관계를 맺는다.&lt;br /&gt;DOM 트리는 문서 마크업의 속성과 관계를 포함하지만, 렌더링될 때 표시되는 모습에 대해서는 CSSOM이 관여한다.2. CSSOM(CSS Object Model) 생성&lt;/div&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;html 파일을 파싱하던 도중 stylesheet link를 만나면 DOM을 생성할 때 거쳤던 과정을 그대로 CSS에 반복한다. 그 결과로 브라우저가 이해하고 처리할 수 있는 형식(Style Rules)으로 변환된다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;CSSOM 역시 트리 구조를 가지는데, 그 이유는, &amp;lsquo;하향식&amp;rsquo;으로 규칙을 적용하기 때문이다. 루트(body)부터 시작해서, 트리를 만들어 가는 방식이다. 모든 요소의 최종 스타일을 확정할 때 브라우저는 해당 노드에 적용 가능한 가장 일반적인 규칙으로 시작한 후에 더욱 구체적인 규칙을 적용한다.&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;3. Render Tree(DOM + CSSOM)생성 - Attachment&lt;/div&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;DOM 트리의 루트(html)에서 시작해서, 페이지에 표시되는 각각의 노드에 일치하는 CSSOM 규칙을 찾아 붙인다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;이때, 렌더링 트리에는 페이지를 렌더링하는 데 필요한 가시적인 노드만 포함된다. 따라서, 메타 태그나 스크립트 태그 같은 노드나 display : none 으로 스타일이 지정된 노드는 제외된다. 그러나, visibility : hidden 스타일이 적용된 노드는 보이지는 않지만 공간을 차지하므로, 렌더링 트리에 포함된다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;DOM 트리와 렌더 트리의 노드는 서로 1:1로 대응되지 않는다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;DOM 트리의 구성원 가운데 일부 노드(, , 등)는 화면에 표현되는 노드가 아니므로 DOM 트리의 구성원이지만 렌더 트리의 구성원은 아닙니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;4. Layer Tree 생성(모던 브라우저에서 진행)&lt;br /&gt;렌더링에 사용될 최종 Layer들을 계산 해서 생성 하는 과정&lt;br /&gt;레이어가 생성되는 조건&lt;/div&gt;
&lt;ol style=&quot;list-style-type: decimal; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;ordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;페이지에서 root 객체이다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;CSS Position 프로퍼티가 relative or absolute이다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;CSS filter 프로퍼티를 가지고있다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;CSS 3D Transform, animations 프로퍼티를 가지고있다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;canvas나 video 태그 엘리먼트다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;will-change 프로퍼티를 가지고있다.&lt;/li&gt;
&lt;/ol&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;5. Render Tree 배치 - layout(reflow)&lt;/div&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;지금까지의 과정을 요약하면, 브라우저가 화면에 표시할 노드와 해당 노드의 스타일을 계산하면서, 하나의 그룹으로 묶어서 렌더링 트리를 만든 것이다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;reflow는 브라우저가 화면에 그리기 전에, 이 노드들을 정확한 위치와 크기로 나타내기 위해서 계산하는 과정이다. 이때, 모든 상대적인 값(예:%단위)은 절대적인 값(예:px단위)로 변환된다.&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;Render Tree 그리기 - Painting&lt;/div&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;UI 백엔드에서 렌더 트리의 각 노드를 순회하며 각 노드를 화면의 픽셀로 나타내는 작업이다.&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;Composite Layers(모던 브라우저에서 진행)&lt;/div&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;Compositing은 레이어들을 합성하여 1개의 bitmap으로 만드는 과정이다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;각 layer 별로 paint를 한다.&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;ps. 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 파싱한다.&lt;br /&gt;따라서 script 태그나 link 태그를 만나면 HTML파싱이 잠시 중단되고 CSS나 JS파싱이 진행된다.&lt;br /&gt;그러므로 태그 위치에 따라 렌더 블로킹이 발생하여 DOM 생성이 지연될 수 있다.&lt;br /&gt;만약 JS를 비동기적으로 불러오고싶을 때 defer나 async 어트리뷰트를 사용하면 비동기적으로 불러올 수 있다.&lt;/div&gt;</description>
      <category>cs (컴퓨터 사이언스)</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/94</guid>
      <comments>https://jugu1523.tistory.com/94#entry94comment</comments>
      <pubDate>Thu, 24 Aug 2023 22:21:14 +0900</pubDate>
    </item>
    <item>
      <title>http 메소드</title>
      <link>https://jugu1523.tistory.com/93</link>
      <description>&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;GET:&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;1&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;&amp;nbsp;url을 기반으로 데이터를 요구하는 메서드입니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;&amp;nbsp;url을 기반으로 하기 떄문에 길이 제한(2000자 미만)이 있습니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;성공 시 HTTP 상태코드 200을 반환합니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;캐싱이 가능합니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;url을 기반으로 요청하기 때문에 해당 요청의 파라미터가 브라우저 기록에 남습니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;url을 기반으로 요청하기 때문에 요청할 때 ASCII 문자열만을 보낼 수 있습니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;사용자 이름, 비밀번호 등 민감한 정보를 전달할 때 사용하지 않습니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;POST:&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;1&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;url이 아닌 HTTP message body를 통해 데이터를 전달합니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;그렇기 때문에 길이 제한이 없습니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;성공적으로 데이터를 생성할 경우 HTTP 상태코드 201을 반환합니다. (생성하지 않은 경우 200을 반환하기도 합니다.)&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;캐싱이 불가능합니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;url을 기반으로 요청하지 않기 때문에 해당 요청의 파라미터가 브라우저 기록에 남지 않습니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;ASCII 문자열 뿐 아니라 모든 유형의 데이터를 기반으로 요청할 수 있습니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;민감한 정보를 전달할 때 사용합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;PUT:&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;1&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;데이터를 수정할 때 사용합니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;전체 데이터의 교체를 의미합니다. 해당 데이터가 없다면 새로 생성합니다. (실제 작동은 PATCH와 동일하게 작동하지만 구분합니다..)&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;PATCH:&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;1&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;데이터의 일부분만의 교체를 의미합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;DELETE:&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;1&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;데이터를 삭제할 때 사용합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;div style=&quot;background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;HEAD:&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;1&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;GET과 동일하지만 서버에서 Body를 리턴하지 않습니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;응답의 상태코드만 확인할 떄와 같이 Resource를 받지 않고 오직 찾기만 원할 때 사용합니다.(일종의 검사)&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;서버의 응답 헤더를 봄으로써 Resource가 수정되었는지 확인 가능합니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;TRACE:&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;1&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;일종의 검사용 메서드이며, 서버에 도달했을 때 최종 패킷의 요청 패킷 내용을 응답 받을 수 있습니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;요청의 최종 수신자는 반드시 200 응답을 반환해야 합니다.&lt;/li&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;최초의 Client 요청에는 Body가 포함될 수 없습니다.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;0&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;0&quot; data-stringify-border=&quot;0&quot;&gt;OPTION:&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc; background-color: #f8f8f8; color: #1d1c1d; text-align: left;&quot; data-stringify-type=&quot;unordered-list&quot; data-indent=&quot;1&quot; data-border=&quot;0&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot; data-stringify-indent=&quot;1&quot; data-stringify-border=&quot;0&quot;&gt;서버의 지원 가능한 HTTP 메서드와 출처를 응답받아 CORS 정책을 검사하기 위해 사용합니다.&lt;/li&gt;
&lt;/ul&gt;</description>
      <category>cs (컴퓨터 사이언스)</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/93</guid>
      <comments>https://jugu1523.tistory.com/93#entry93comment</comments>
      <pubDate>Wed, 23 Aug 2023 22:12:07 +0900</pubDate>
    </item>
    <item>
      <title>23-08-23 TIL 영상 스트리밍 기초</title>
      <link>https://jugu1523.tistory.com/92</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;이번최종 과제를 진행하며 우리팀은 영상스트리밍서비스를 만들어 보기로 했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;실시간으로 스트리밍을 하는 방법에 대해 고민을 하게 되었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;실시간으로 방송을 내보내주기위해 처음엔 webRTC를 사용하는 방법을 택하여 찾아보았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Web Real-Time Communication의 약자로 웹이나 앱에서 별다른 소프트웨어 없이 카메라, 마이크등을&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;사용하여 실시간 커뮤니케이션을 제공해주는 오픈소스이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;간단히말해서 클라우드와 서버를 연결하는 기존의 방식이아닌&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;클라우드와 클라우드끼리 연결을 해주어 동영상을 송출해 주는 방식인 것이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만 우리팀은, 화상 채팅기능처럼 여러명이 같이 영상을 송출하고 받을 필요가없이&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;한명만이 송출을 하고 나머지인원은 송출한 영상만을 필요로 하기때문에&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이방법에 조금더 적합해보이는 hls를 사용하기로 하였다.&lt;/p&gt;</description>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/92</guid>
      <comments>https://jugu1523.tistory.com/92#entry92comment</comments>
      <pubDate>Wed, 23 Aug 2023 05:52:43 +0900</pubDate>
    </item>
    <item>
      <title>23-08-21 TIL 프론트에서 DB로 배열로 넘겨주는 방법</title>
      <link>https://jugu1523.tistory.com/91</link>
      <description>&lt;h3 data-ke-size=&quot;size23&quot;&gt;문제&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Typescript를 사용하는 도중 배열을 받을 일이 생겼다.&lt;/p&gt;
&lt;div style=&quot;background-color: #1f1f1f; color: #cccccc;&quot;&gt;
&lt;div&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;&amp;nbsp; @&lt;/span&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;IsNotEmpty&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;()&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;&amp;nbsp; @&lt;/span&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;IsArray&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;()&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;&amp;nbsp; &lt;/span&gt;&lt;span style=&quot;color: #9cdcfe;&quot;&gt;categoryIds&lt;/span&gt;&lt;span style=&quot;color: #d4d4d4;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #4ec9b0;&quot;&gt;string&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;[];&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이때 프론트에서 이벤트리스너를 사용하여 그대로 받아온다면, 배열로 인식을 못하고 오류가 생긴다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;(오류는 400으로 지정한 타입에 맞지않는다고 뜸)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div style=&quot;background-color: #1f1f1f; color: #cccccc;&quot;&gt;
&lt;div&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;color: #9cdcfe;&quot;&gt;body&lt;/span&gt;&lt;span style=&quot;color: #9cdcfe;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #9cdcfe;&quot;&gt;JSON&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;stringify&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;({&lt;span style=&quot;background-color: #1f1f1f; color: #9cdcfe; text-align: start;&quot;&gt;categoryIds})&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;를 사용하여 string으로 변환 시켜주어서 보내주는 것만으론 문제가 발생하게 된다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇다면 어떻게 배열로 인식을 하게 해줄 것인가?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;가장먼저 내가 받는 데이터의 형태를 보았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;A, B, C 이런 식으로 , 를 기준으로 배열로 받기로 하였는데&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이것을 그대로 stringify로 보낸다면, 배열로 인식하지 못한다는 것이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그렇다면 내가 배열로 바꾸어서 DB로 보내주면 되는 것이다.&lt;/p&gt;
&lt;div style=&quot;background-color: #1f1f1f; color: #cccccc;&quot;&gt;
&lt;div&gt;&lt;span style=&quot;color: #569cd6;&quot;&gt;const&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #4fc1ff;&quot;&gt;categoryIds&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #d4d4d4;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #4fc1ff;&quot;&gt;CategoryIds&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;split&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;color: #ce9178;&quot;&gt;','&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;map&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;((&lt;/span&gt;&lt;span style=&quot;color: #9cdcfe;&quot;&gt;item&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;) &lt;/span&gt;&lt;span style=&quot;color: #569cd6;&quot;&gt;=&amp;gt;&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;color: #9cdcfe;&quot;&gt;item&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;color: #dcdcaa;&quot;&gt;trim&lt;/span&gt;&lt;span style=&quot;color: #cccccc;&quot;&gt;());&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;split을 사용하여 , 기준으로 분리해주었고, trim()을 사용하여 양끝의 공백이 있을 경우 제거하고&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;새로운 문자열로 반환하게만들어서 넣어주었다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>일차 TIL</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/91</guid>
      <comments>https://jugu1523.tistory.com/91#entry91comment</comments>
      <pubDate>Tue, 22 Aug 2023 02:00:51 +0900</pubDate>
    </item>
    <item>
      <title>RDMNS와 NoSQL</title>
      <link>https://jugu1523.tistory.com/90</link>
      <description>&lt;h3 data-ke-size=&quot;size23&quot;&gt;RDMNS&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;DMNS란&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;DataBase Management System의 약자이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;DataBase는 여러사람에 의해 공유되어 사용될 목적으로 통합관리하는 데이터의 집합&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;R 은 Relational의 약자이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;두개를 합쳐 RDMNS 즉, 관계형 데이터베이스를 뜻한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그리고 이 곳에서 데이터를 활용하기위해 사용하는 언어가 &lt;b&gt;SQL&lt;/b&gt; 이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;RDMNS를 사용하다 보면 스키마라는 것이나오는데&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;데이터베이스를 구성하는 객채(Entity), 속성(Attribute), 관계(Relationship) 및 제약조건 등에&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;관하여 전박적으로 정의한 메타데이터의 집합이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;메타데이터&lt;/b&gt;는 시간이 지남에 따라 많은 양의 데이터를 수집, 저장, 분석할 수 있도록&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;일관된 방식으로 구조화된, 다른 데이터를 설명하는 데이터이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저장방식은 SQL에 의해 저장되며, 정해진 스키마에 따라 데이터를 저장해야한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저장된 데이터간의 관계를 나타내기위해 외래 키(foreign key)라는 것을 사용하는데&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이러한 테이블간의 관계에서 외래 키를 이용한 테이블 간 join이 가능하다는 것이 장점이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만, 스키마 하나의 필드를 수정하면 다른 필드와의 관계를 다시 고려하여야하기때문에&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;데이터베이스를 수정해야할 수도 있는 것이 단점이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;성능을 향상시키는 방법이 Scale-up 만을 지원한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;NoSQL&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Not only SQL 의 약자이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;정해진 스키마가 없어 자유롭게 데이터를 저장할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;RDMNS와 달리 테이블간의 관계를 정의하지 않는 것이 특징이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;테이블간의 관계가 정의되지 않아서 일반적으로 테이블간의 Join이 불가능하다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;RDBMS로는 관리하기 힘든 복잡하고 용량이 큰 데이터를 관리할 수 있도록 등장했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Key-Value Database&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;데이터가 Key와 Value의 쌍으로 저장된다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;key값은 어떠한 형태의 데이터도 담을 수 있다.(이미지, 동영상도 가능하다고 한다.)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;간단한API를 제공하는 만큼 속도가 빠른편이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;하지만 데이터의 중복이 발생할 수있으며,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;중복된 데이터가 변경 될 경우 수정을 모든 컬렉션에서 수행해야한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Scale-up밖에 되지않는 RDBMS대신 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;데이터의 일관성은 포기하더라도&amp;nbsp;&lt;span&gt; 비용을 고려하여 Scale-out을 목표로 등장 하였다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;(NoSQL은 Scale-up도 사용 가능하다.)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;Scale-up&amp;nbsp;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;기존의 서버보다 높은 사양으로 업그레이드 시켜 주는 것이다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;간단한 예로 성능이나 용량증강을 목적으로 하나의 서버에 디스크를 추가하거나,&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;CPU나 메모리를 업그레이드 시키는 것이다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;성능 향상에 한계가 있으며, 향상에 따른 비용부담이 크며,&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;서버 한 대가 부담하는 양이 많아 지는데, 다양한 이유로 서버에 문제가 생길시 큰 타격을 입게된다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;Scale-out&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;장비를 추가해서 서버를 확장하는 방식이다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;기존서버의 용량, 성능의 한계에 도달했을 때, 비슷한 사양의 서버를 연결하여 처리하는 것이다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;처리할 수 있는 데이터 용량이 증가하며, 기존 서버의 부하를 분담해 성능 향상을 기대할 수 있다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;서버를 필요한 만큼 도입하는 방식이므로 확장이 용의하다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;하지만 여러 노드를 연결해 병렬 컴퓨팅 환경을 구성하고 유지하려한다면.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;서버의 수가 늘어날수록 관리가 힘들어지는 것은 당연하다.&lt;/p&gt;</description>
      <category>cs (컴퓨터 사이언스)</category>
      <author>카를폰</author>
      <guid isPermaLink="true">https://jugu1523.tistory.com/90</guid>
      <comments>https://jugu1523.tistory.com/90#entry90comment</comments>
      <pubDate>Wed, 16 Aug 2023 23:21:59 +0900</pubDate>
    </item>
  </channel>
</rss>