<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en"><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://piemonte93.github.io/feed.xml" rel="self" type="application/atom+xml" /><link href="https://piemonte93.github.io/" rel="alternate" type="text/html" hreflang="en" /><updated>2025-12-09T21:34:31+00:00</updated><id>https://piemonte93.github.io/feed.xml</id><title type="html">DH.Cha</title><subtitle>Hydejack is a boutique Jekyll theme for hackers, nerds, and academics, with a focus on personal sites that are meant to impress.
</subtitle><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><entry><title type="html">변수 총정리 2. Hoisting, 전역변수, 참조</title><link href="https://piemonte93.github.io/frontend/javascript/2025-12-09-javascript-post7/" rel="alternate" type="text/html" title="변수 총정리 2. Hoisting, 전역변수, 참조" /><published>2025-12-09T19:33:53+00:00</published><updated>2025-12-09T19:33:53+00:00</updated><id>https://piemonte93.github.io/frontend/javascript/javascript-post7</id><content type="html" xml:base="https://piemonte93.github.io/frontend/javascript/2025-12-09-javascript-post7/"><![CDATA[<p><br /></p>

<h2 id="자바스크립트-변수-함수의-hoisting-현상"><span style="color:#EBE1AB">자바스크립트 변수, 함수의 Hoisting 현상</span><br /></h2>
<p><br />
자바스크립트는 변수나 함수를 선언하면 Hoisting이라는 현상이 일어난다.<br />
자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석한다.<br />
그게 Hoisting 이다.<br />
<br />
<br />
<br />
예를 들어보자.</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">함수</span><span class="p">()</span> <span class="p">{</span>

    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">이름</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Kim';

}
</span></code></pre></div></div>
<p>이렇게 함수 내에서 변수를 만들었다고 치자.<br />
근데 자바스크립트가 이 코드를 해석하는 순서는 이렇게 된다.<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">함수</span><span class="p">()</span> <span class="p">{</span>

    <span class="kd">var</span> <span class="nx">이름</span><span class="p">;</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">hello</span><span class="dl">'</span><span class="p">);</span>
    <span class="nx">이름</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Kim</span><span class="dl">"</span><span class="p">;</span>

<span class="p">}</span>
</code></pre></div></div>

<p>변수의 <span style="color:#EBE1AB">선언부분</span>을 강제로 변수의 범위 맨 위로 끌고가서 해석하고 지나간다.<br />
우리 눈에 보이진 않지만 자바스크립트는 코드 동작 순서가 이렇다.<br />
암튼 이게 Hoisting 현상이다.<br />
함수를 만들어도 똑같고, 변수를 let, const로 만들어도 똑같다.<br />
<br />
<br />
<br />
그럼 이 코드는 실행결과가 어떻게 될까?<br /></p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>

    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">이름</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">이름</span><span class="p">);</span>

<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>
<p><br /></p>

<details class="highlighter-rouge" style="padding: 10px; border-radius: 6px;">
<summary style="cursor: pointer; font-weight: bold; padding: 5px;">뭘까요</summary>
<div class="highlight"> 
콘솔창에 첫째로는 undefined가 출력되고<br />
둘째로는 Kim이 출력된다.<br />
왜냐면 Hoisting 때문에<br />
<div>

      <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">이름</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">이름</span><span class="p">);</span>
<span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">이름</span><span class="p">);</span>
</code></pre></div>      </div>
    </div>

이런 순서로 코드가 실행되기때문이다.<br />
<br />
undefined라는건 변수가 선언은 되었는데 값을 아무것도 할당하지 않았을 때 undefined가 출력된다.<br />
일종의 자료형같은 것인데 그냥 <span style="color:#EBE1AB">정해지지않은 값</span>이라고 생각하면 된다.<br />
하지만 let,const 변수의 경우 Hoisting이 일어나긴 하는데 약간 이상한 방식으로 일어난다.<br />
그건 연습문제 강의에서 발견할 수 있다.
</div>
</details>

<p><br />
<br />
<br />
<br /></p>

<h2 id="변수-여러개-편리하게-만들기"><span style="color:#EBE1AB">변수 여러개 편리하게 만들기</span><br /></h2>
<p><br />
변수를 콤마로 구분하면 여러개를 동시에 만들 수 있다.<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">이름</span><span class="p">,</span> <span class="nx">나이</span><span class="p">,</span> <span class="nx">성별</span><span class="p">;</span>
</code></pre></div></div>
<p>이렇게 하면 변수가 3개 생성된다. var 키워드 3번 쓰지않아도 되니 코드가 약간 더 줄어든다.<br />
<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">,</span> <span class="nx">나이</span><span class="p">,</span> <span class="nx">성별</span><span class="p">;</span>
</code></pre></div></div>
<p>선언과 동시에 할당도 하고 싶으면 그냥 이렇게 하면 된다.<br />
그냥 var let const 키워드를 여러번 안써도 된다는 장점이 있다.<br />
<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">이름</span><span class="p">,</span>
    <span class="nx">나이</span><span class="p">,</span>
    <span class="nx">성별</span><span class="p">;</span>
</code></pre></div></div>
<p>어떤 놈들은 이렇게도 쓴다.<br />
<br />
<br />
<br />
<br /></p>

<h2 id="전역변수와-변수의-참조"><span style="color:#EBE1AB">전역변수와 변수의 참조</span><br /></h2>
<p><br />
변수는 이런 특징이 있다.<br />
<span style="color:#EBE1AB">바깥에 있는 변수는 안쪽에서 자유롭게 사용가능</span>하다.<br />
이걸 전문 개발자용어로 참조가능하다 라고 한다만 자바스크립트에서는 이 현상을 부르는 다른 말이 있다.<br />
closure라고 한다.<br />
안쪽 바깥쪽이 뭔지 예를 들자면<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">나이</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">함수</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">나이</span><span class="p">);</span>
<span class="p">}</span>

<span class="nx">함수</span><span class="p">();</span>
</code></pre></div></div>

<p>지금 함수(){} 안쪽에서 바깥쪽에 있는 <span style="color:#EBE1AB">나이</span>라는 변수를 가져다 쓸 수 있다는 것이다.<br />
함수(){} 안쪽에 <span style="color:#EBE1AB">나이</span>라는 변수 정의가 있으면 그걸 쓰겠지만<br />
없으면 자연스럽게 바깥에 있는 변수를 가져다 쓴다.(참조한다)<br />
<br />
<br />
<br />
프로그래밍에선 <span style="color:#EBE1AB">전역변수</span>라는게 있다.<br />
모든 함수나 if나 for 내부에서 공통적으로 사용할 수 있는 (참조할 수 있는) 유용한 변수를 뜻한다.<br />
전역변수를 만들어 쓰고싶으면 그냥 script태그 열고 다짜고짜 변수 하나 만들면 된다.<br />
<br /></p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>
    <span class="kd">var</span> <span class="nx">나이</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>

    <span class="kd">function</span> <span class="nx">함수</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">나이</span><span class="p">)</span>
    <span class="p">}</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>
<p>그럼 밑에 나오는 모든 함수, for, if 등에서 전부 나이라는 변수를 사용가능하다.<br />
전역변수 완성!<br />
근데 전역변수는 이상한 특징이 있다.<br />
<br />
<br />
<br />
예전에 window라는 오브젝트가 있다고 배웠다.<br />
window는 자바스크립트 기본함수 보관하는 큰 오브젝트라고 배웠다.<br />
alert, getElementById, console.log 이런 함수들이 다 들어있다.<br />
<br />
진짠지 테스트 해보려면<br />
자바스크립트 기본 함수들을 오브젝트 다룰 때 처럼 window.alert(), window.document.getElementById() 이렇게 사용해봐라.<br />
alert 이런것도 window에 보관된 애들이기 때문에 window.alert(‘안녕’)이렇게 해도 잘 된다.<br />
이게 window 오브젝트의 역할이다. 끝!<br />
<br />
<br />
<br />
근데 <span style="color:#EBE1AB">쌩으로 전역변수를 만들면 window에도 보관</span>이 된다.(let 말고 var 키워드만)<br />
왜 그런지 궁금하면 역시 자바스크립트 만든 사람한테 물어보길 바란다<br /></p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>
    <span class="kd">var</span> <span class="nx">나이</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>

    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">나이</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">나이</span><span class="p">);</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>

<p>나이라는 전역변수를 만들면<br />
<span style="color:#EBE1AB">자동으로 window 오브젝트에 보관</span>이 되었으니깐<br />
신기하게 window.나이를 써도 출력이 됩니다.<br />
(전역함수도 마찬가지로 window에 자동으로 보관된다)<br />
<br />
<br />
그래서 전역변수를 조금 더 엄격하게 관리하거나 구분짓고 싶으면<br />
전역변수를 만들 때와 사용할 때 window를 활용해보아라.<br />
<br /></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">나이</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span> <span class="c1">// 전역변수 만들기</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">나이</span><span class="p">);</span> <span class="c1">// 전역변수 사용하기</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">나이</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span> <span class="c1">// 전역변수 변경하기</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>
<p>이런식으로 사용할 수도 있다.<br />
프로그래밍 엄격히하는걸 좋아하는 변태들이 많이 이용한다.<br />
(node.js 환경에선 window 대체품인 global 이라는 오브젝트가 있다)<br />
<br />
<br />
<br />
<br />
<br /></p>

<h2 id="간단한-연습문제"><span style="color:#EBE1AB">간단한 연습문제</span><br /></h2>
<p><br />
다음 코드를 실행하면 콘솔창에 무엇이 뜰까?<br /></p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>
    
    <span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">let</span> <span class="nx">b</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">b</span><span class="p">);</span>
    <span class="p">}</span>

<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>
<p><br /></p>
<details>
<summary style="cursor: pointer; font-weight: bold; padding: 5px;">답 펼쳐보기 전에 잘 생각해보도록 하자. 함정이 있을 수 있음</summary>

실은 함정없음<br />
b는 2라는 값이 출력된다.<br />
let b = 3; 이 부분은 안쪽 if 내에서만 존재하는 놈이니 바깥의 console.log(b)와는 무관하다.
</details>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="frontend" /><category term="javascript" /><summary type="html"><![CDATA['저번시간까진 선언, 할당, 범위라는 기초 필수 개념을 정리했는데 이번엔 변수의 부가 개념들을 정리해보도록 하자.']]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" /><media:content medium="image" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">변수 총정리 1. var let const와 선언, 할당, 범위</title><link href="https://piemonte93.github.io/frontend/javascript/2025-12-09-javascript-post6/" rel="alternate" type="text/html" title="변수 총정리 1. var let const와 선언, 할당, 범위" /><published>2025-12-09T11:43:53+00:00</published><updated>2025-12-09T11:43:53+00:00</updated><id>https://piemonte93.github.io/frontend/javascript/javascript-post6</id><content type="html" xml:base="https://piemonte93.github.io/frontend/javascript/2025-12-09-javascript-post6/"><![CDATA[<p><br /></p>

<h2 id="자바스크립트-변수는-이렇게-쓴다"><span style="color:#EBE1AB">자바스크립트 변수는 이렇게 쓴다</span><br /></h2>
<p><br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
</code></pre></div></div>
<p><br />
변수는 자료를 임시로 저장하는 공간이다.</p>
<ol>
  <li>var 이라는 키워드 오른쪽에 작명을 하고, 변수에 저장할 자료를 등호로 집어 넣어주면 된다.<br /></li>
  <li>오브젝트, 어레이, 함수 등 모든 자료들을 담을 수 있다.<br /></li>
  <li>그리고 <span style="color:#EBE1AB">var 이름</span>이라는 부분은 선언, <span style="color:#EBE1AB">이름 = kim</span> 이라는 부분은 값 할당이라고 전문 용어로 표현한다. 보통 변수만들 땐 두개를 동시에 사용한다.<br /></li>
  <li>그리고 변수를 만들 땐 var, let, const 라는 3개 키워드를 이용가능하다.<br />
3개 키워드마다 특징이 있다. 변수의 <span style="color:#EBE1AB">선언, 할당, 범위</span>에서 차이가 좀 있는데 같이 알아보도록 하자.<br />
<br />
<br />
<br />
<br /></li>
</ol>

<h2 id="변수의-선언"><span style="color:#EBE1AB">변수의 선언</span><br /></h2>
<p><br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">이름</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">나이</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">성별</span><span class="p">;</span>
</code></pre></div></div>
<p><br />
이렇게 var, let, const 키워드를 이용해 변수를 만들겠다고 선언할 수 있다. (등호는 안써도 변수는 만들어진다)<br />
그런데 var 키워드는 재선언이 가능하고<br />
let, const 키워드는 재선언이 불가능하다.<br />
<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">let</span> <span class="nx">나이</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">나이</span><span class="p">;</span> <span class="c1">//에러</span>

<span class="kd">const</span> <span class="nx">성별</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">여자</span><span class="dl">'</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">성별</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">남자</span><span class="dl">'</span><span class="p">;</span> <span class="c1">//에러</span>
</code></pre></div></div>
<p><br />
let, const로 만들면 이렇게 같은 이름의 변수를 두번 이상 재선언할 수 없다. 에러가 난다.<br />
나중에 변수 이름을 실수로 중복해서 만드는 실수를 방지해주는 고마운 기능이다.<br />
<br />
<br />
<br />
<br /></p>

<h2 id="변수의-값-할당"><span style="color:#EBE1AB">변수의 값 할당</span><br /></h2>
<p><br />
<br />
변수에 값을 할당한다는게 뭔소리냐면<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">이름</span><span class="p">;</span>
<span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
</code></pre></div></div>
<p><br />
▲ 둘째줄에서 이렇게 만들어놓은 변수에 ‘Kim’이라는 값을 집어넣는걸 할당이라고 한다.<br />
<br />
<br />
<br />
할당도 선언과 동시에 할수 있다.<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
</code></pre></div></div>
<p><br />
▲선언과 할당을 동시에 하는 모습이다.<br />
<br />
<br />
<br />
근데 변수를 var, let으로 만들면 재할당이 가능하고 const로 만들면 값 재할당이 불가능하다.<br />
const로 변수 만들면 나중에 등호를 이용해 값 변경하는게 안된다는 소리이다.<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">let</span> <span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Park</span><span class="dl">'</span><span class="p">;</span> <span class="c1">// 가능</span>

<span class="kd">const</span> <span class="nx">나이</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span>
<span class="nx">나이</span> <span class="o">=</span> <span class="mi">40</span><span class="p">;</span> <span class="c1">// 에러</span>
</code></pre></div></div>
<p><br />
const는 애초에 constant의 약자로 바뀌지 않는 일정한 값을 뜻한다.<br />
바뀌면 큰일날 값을 저장하고 싶을 때 사용하면 좋다.<br />
<br />
<br />
<br />
<br /></p>
<ul>
  <li>const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능하다.<br />
<br /></li>
</ul>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">오브젝트</span> <span class="o">=</span> <span class="p">{</span> <span class="na">이름</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span> <span class="p">}</span>
<span class="nx">오브젝트</span><span class="p">.</span><span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Park</span><span class="dl">'</span><span class="p">;</span> <span class="c1">// 가능</span>
</code></pre></div></div>
<p><br />
위의 예제는 엄밀히 말하면 변수를 재할당한게 아니기 때문에 가능하다.<br />
완전 변경불가능한 오브젝트를 만들고 싶다면<br />
Object.freeze()라는 자바스크립트 기본함수가 있다.<br />
Object.freeze() 소괄호에 오브젝트를 담으면 불변의 Object가 완성된다.<br />
(하지만 오브젝트 내의 오브젝트까지 freeze해주진 않는다)<br />
<br />
<br />
<br />
<br />
<br /></p>

<h2 id="변수의-범위"><span style="color:#EBE1AB">변수의 범위</span><br /></h2>
<p><br />
변수를 만들면 존재범위가 있다.<br />
var 변수는 존재범위가 function이다.<br />
let, const 변수는 존재범위가 거의 모든 {중괄호}이다. (for, if, function 등)<br />
<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">함수</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">이름</span><span class="p">);</span> <span class="c1">// 가능</span>
<span class="p">}</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">이름</span><span class="p">);</span> <span class="c1">// 에러</span>
</code></pre></div></div>
<p><br />
▲ 위의 예제처럼 var 변수는 function 내에서 만들면 function 내에서만 쓸 수 있다.<br />
function 바깥에서 부르면 없다고 나온다.<br />
<br />
<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">if</span> <span class="p">(</span> <span class="mi">1</span> <span class="o">==</span> <span class="mi">1</span> <span class="p">)</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">이름</span><span class="p">);</span> <span class="c1">// 가능</span>
<span class="p">}</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">이름</span><span class="p">);</span> <span class="c1">// 에러</span>
</code></pre></div></div>
<p><br />
▲ 위의 예제처럼 let 변수는 {} 중괄호 내에서 만들면 중괄호 내에서만 쓸 수 있다.<br />
중괄호 바깥에서 부르면 없다고 나온다.</p>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="frontend" /><category term="javascript" /><summary type="html"><![CDATA['다시는 문법책 안봐도 될 정도로 변수문법을 정리 해보도록 하자']]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" /><media:content medium="image" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">this &amp;amp; arrow function 연습문제</title><link href="https://piemonte93.github.io/frontend/javascript/2025-12-08-javascript-post5/" rel="alternate" type="text/html" title="this &amp;amp; arrow function 연습문제" /><published>2025-12-08T11:41:04+00:00</published><updated>2025-12-08T11:41:04+00:00</updated><id>https://piemonte93.github.io/frontend/javascript/javascript-post5</id><content type="html" xml:base="https://piemonte93.github.io/frontend/javascript/2025-12-08-javascript-post5/"><![CDATA[<p><br /></p>

<h2 id="1-간단한-메소드-만들기"><span style="color:#EBE1AB">1. 간단한 메소드 만들기</span><br /></h2>

<p><span style="color:#EBE1AB">사람</span>이라는 오브젝트가 하나 있다.<br />
이 오브젝트에 sayHi라는 함수를(메소드를) 하나 추가하고 싶다.<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">사람</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">손흥민</span><span class="dl">'</span><span class="p">,</span>
<span class="p">}</span>

<span class="nx">사람</span><span class="p">.</span><span class="nx">sayHi</span><span class="p">();</span> <span class="c1">// 안녕 나는 손흥민</span>
</code></pre></div></div>

<p><br />
위의 코드처럼 <span style="color:#EBE1AB">사람.sayHi()</span>이라고 작성하면 콘솔창에 <span style="color:#EBE1AB">안녕 나는 손흥민</span>이라는 글자가 나와야한다.<br />
‘손흥민’이라고 이름을 하드코딩해서 출력하기보다는 실제 내 오브젝트에 있는 name에 해당하는 값이 출력되면 참 좋을것 같다.<br />
<span style="color:#EBE1AB">Q. sayHi()라는 함수를 어디서 어떻게 만들면 될까?</span><br /></p>

<details>
<summary>답안</summary>
<div>

    <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">사람</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">손흥민</span><span class="dl">'</span><span class="p">,</span>
    <span class="na">sayHi</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">안녕 나는 </span><span class="dl">'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="nx">사람</span><span class="p">.</span><span class="nx">sayHi</span><span class="p">();</span> <span class="c1">// 안녕 나는 손흥민</span>
</code></pre></div>    </div>

  </div>
</details>

<p><br />
<br />
<br />
<br /></p>

<h2 id="2-오브젝트-내의-데이터를-전부-더해주는-메소드-만들기"><span style="color:#EBE1AB">2. 오브젝트 내의 데이터를 전부 더해주는 메소드 만들기</span><br /></h2>
<p><br />
오브젝트가 하나 있다.<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">자료</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">data</span> <span class="p">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">5</span><span class="p">]</span>
<span class="p">};</span>
</code></pre></div></div>
<p>그런데 이 오브젝트에 <span style="color:#EBE1AB">전부더하기()</span>라는 함수를 하나 만들어서 사용하고 싶다.<br />
<br />
<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">자료</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">data</span> <span class="p">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">5</span><span class="p">]</span>
<span class="p">};</span>
<span class="nx">자료</span><span class="p">.</span><span class="nx">전부더하기</span><span class="p">();</span>
</code></pre></div></div>

<p>위처럼 자료.전부더하기()라고 쓰면 <span style="color:#EBE1AB">자료.data</span> 안에 있는 모든 숫자를 더해서 콘솔창에 출력해주어야 한다.<br />
(아마 15가 뜨겠지?)<br />
<span style="color:#EBE1AB">Q. 어떻게 코드를 짜면 될까?</span><br />
<span style="color:#EBE1AB">조건) 자료 object 중괄호 내에 코드 작성 금지</span><br />
<br /></p>
<details>
<summary>답안</summary>
<div>

    <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">자료</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">data</span> <span class="p">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">5</span><span class="p">]</span>
<span class="p">};</span>

<span class="nx">자료</span><span class="p">.</span><span class="nx">전부더하기</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">합</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">합</span> <span class="o">+=</span> <span class="nx">a</span><span class="p">;</span>
    <span class="p">});</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">합</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">자료</span><span class="p">.</span><span class="nx">전부더하기</span><span class="p">();</span>
</code></pre></div>    </div>
  </div>
<br />
</details>
<p><br />
<br />
<br />
<br /></p>

<h2 id="3-settimeout-이용해보기"><span style="color:#EBE1AB">3. setTimeout 이용해보기</span><br /></h2>
<p><br />
자바스크립트엔 setTimeOut이라는 유용한 함수가 있다.<br />
특정 코드나 함수를 x초 후에 실행하고 싶을 때 사용하는 함수이다.<br />
어떻게 쓰냐면<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">setTimeout</span><span class="p">(</span><span class="nx">콜백함수</span><span class="p">,</span> <span class="nx">ms단위의</span> <span class="nx">시간</span><span class="p">)</span>
</code></pre></div></div>
<p><br />이렇게 쓰면 된다.<br />
<br />
<br />
<br />
예를 들어보면<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">안녕</span><span class="dl">'</span><span class="p">)</span> <span class="p">},</span> <span class="mi">1000</span><span class="p">)</span>
</code></pre></div></div>
<p><br />이렇게 한줄 쓰면 1000ms(1초) 후에 왼쪽에 있는 콜백함수 내의 코드를 실행해 준다.<br />
그럼 1초후에 안녕이 콘솔창에 출력이 된다.<br />
<br />
또는 콜백함수자리에 직접 만든 함수를 넣을 수도 있다.<br />
역시 예를 들어보면<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">함수</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">안녕</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>

<span class="nx">setTimeout</span><span class="p">(</span><span class="nx">함수</span><span class="p">,</span> <span class="mi">1000</span><span class="p">)</span>
</code></pre></div></div>
<p><br />이렇게 콜백함수 대신 내가 미리 만들어놓은 함수의 이름을 적어도 실행된다.<br />
다만 콜백함수자리에 내가 만들어놓은 함수를 입력하고 싶으면 소괄호는 뺴야한다.<br />
setTimeout 개념정리 끝.<br />
<br />
<br />
<br />
<br />
<span style="color:#EBE1AB">본격 문제 들어간다.</span><br />
버튼을 클릭하면 지금 누른 버튼에 담긴 글자를 출력하는 기능을 만들고 싶어서 이렇게 코드를 짰다.<br />
<br />
<br /></p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"버튼"</span><span class="nt">&gt;</span>버튼이에요<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;script&gt;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">버튼</span><span class="dl">'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">)</span>
    <span class="p">});</span>

<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>
<p><br />
그럼 콘솔창에 ‘버튼이에요’라는 글자가 출력되는가? 잘 된다.<br />
<br />
<span style="color:#EBE1AB">Q. 그럼 setTimeout을 이용해서 1초 후에 this.innerHTML을 콘솔창에 출력하고 싶으면 어떻게 코드를 수정해야 할까?</span><br />
1초 후에 ‘버튼이에요’라는 글자가 콘솔창에 등장하면 성공이다.<br />
<br /></p>
<details>
<summary>답안</summary>
<div>

    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"버튼"</span><span class="nt">&gt;</span>버튼이에요<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;script&gt;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">버튼</span><span class="dl">'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">)</span> <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
    <span class="p">});</span>

<span class="nt">&lt;/script&gt;</span>
</code></pre></div>    </div>
    <p><br />
<br />
또는 옛날 스타일로 이렇게도 가능하다.<br />
<br /></p>

    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"버튼"</span><span class="nt">&gt;</span>버튼이에요<span class="nt">&lt;/button&gt;</span>

<span class="nt">&lt;script&gt;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">버튼</span><span class="dl">'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">버튼</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
        <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">버튼</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">)</span> <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
    <span class="p">});</span>

<span class="nt">&lt;/script&gt;</span>
</code></pre></div>    </div>
  </div>
</details>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="frontend" /><category term="javascript" /><summary type="html"><![CDATA['this & arrow function 연습문제 및 해설']]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" /><media:content medium="image" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Arrow function과 그냥 function은 다름</title><link href="https://piemonte93.github.io/frontend/javascript/2025-12-01-javascript-post4/" rel="alternate" type="text/html" title="Arrow function과 그냥 function은 다름" /><published>2025-12-01T18:33:47+00:00</published><updated>2025-12-01T18:33:47+00:00</updated><id>https://piemonte93.github.io/frontend/javascript/javascript-post4</id><content type="html" xml:base="https://piemonte93.github.io/frontend/javascript/2025-12-01-javascript-post4/"><![CDATA[<p><br /></p>

<h2 id="arrow-function-문법"><span style="color:#EBE1AB">Arrow Function 문법</span></h2>

<p>자바스크립트에선 함수를 이런 식으로 만들어서 사용한다.</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="kd">function</span> <span class="nx">예쁜함수</span><span class="p">()</span> <span class="p">{</span>
  <span class="c1">//어쩌구</span>
<span class="p">}</span>

<span class="p">(</span><span class="mi">2</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">예쁜함수</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
  <span class="c1">//어쩌구</span>
<span class="p">}</span>
</code></pre></div></div>

<p>함수는 (1) 또는 (2) 처럼 만들고<br />
<span style="color:#EBE1AB">예쁜함수();</span> 이렇게 함수를 사용한다.<br />
(function 키워드로 시작하는것 말고도 (2)번처럼 변수에다가 함수를 등호=로 집어넣어서 함수를 만들 수 있다.)<br />
<br />
<br />
<br />
<br />
근데 ES6 신문법을 사용하면 함수를 이렇게 만들 수도 있다.</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">예쁜함수</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="c1">//어쩌구</span>
<span class="p">}</span>
</code></pre></div></div>

<p>function이라는 길고 복잡한 키워드 대신에<br />
=&gt; 이런 예쁜 화살표를 사용해서 함수를 만들어내는 신문법이다.<br />
그냥 그런게 있구나 하고 외워가면 된다.<br />
근데 외우기 전에 이 문법의 용도를 아는게 중요하다.<br />
<br />
<br />
<br />
<br />
<span style="color:#EBE1AB">왜 쓰냐면 1. 함수 본연의 기능을 아주 잘 표현하는 문법이다.</span><br />
<br />
혹시 프로그래밍 할 때 function 문법은 왜 사용하는지 아는가?<br />
모른다면 지금 당장 외우길 바란다.<br />
<br /></p>
<ol>
  <li>여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때(그리고 나중에 재사용할 때)<br /></li>
  <li>입출력 기능을 만들 때<br />
이럴 때 함수를 써야 한다. 그래야 좋은 프로그래머가 될 수 있다.<br />
<span style="color:#EBE1AB">그리고 arrow function을 사용하면 함수 본연의 </span><span style="color:red">입출력 기능</span><span style="color:#EBE1AB">을 아주 직관적으로 잘 표현해 준다.</span><br />
<br />
<br /></li>
</ol>

<details>
<summary>입출력 기능이 뭔소리?</summary>
함수가 뭔지부터 보자.<br />
함수는 수학에서 온 개념이다.<br />
원래 함수는 뭐 숫자를 집어넣으면 뭔가 다른 숫자를 배출하는 블랙박스같은 역할을 한다.<br />
<img src="../../../assets/img/img-folder/input_output1.png" />
<br />위 그림처럼 input을 집어넣으면 output을 출력해주는 박스가 바로 함수다.<br />
<br />
실은 함수개념은 중학교 수학시간에 배운다.<br />
<span style="color:#EBE1AB">문제)f(x) = x + 2 이다. 그럼 f(2)는 뭘까?</span><br />
답은 4이다.<br />
<br />
f(x) 이게 함수다.<br />
아까 박스처럼 그림으로 표현하면 이렇다.<br />
<img src="../../../assets/img/img-folder/input_output2.png" />
<br />
위에선 x를 집어넣으면 x + 2 를 출력해주는 함수를 만들어 쓰고 있던 것이다.<br />
<br />
<br />
<br />
그럼 프로그래밍에선 어떨까? 2를 집어넣으면 x + 2를 출력해주는 함수를 어떻게 만들어 쓸까? <br /><br />

<div>
    <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">더해주세요</span><span class="p">(</span><span class="nx">x</span><span class="p">){</span>
 <span class="k">return</span> <span class="nx">x</span> <span class="o">+</span> <span class="mi">2</span>
<span class="p">}</span>
</code></pre></div>    </div>
  </div>
이런 문법을 이용해서 만들어 사용한다.<br />
함수의 소괄호안에는 input역할을 하는 파라미터가 있고<br />
함수내에 return 이라는 것은 output 역할을 하는 키워드이다.<br />
그럼 이제 더해주세요(2); 이렇게 사용하면 4가 이 자리에 남게 되는 것이다.<br />
<span style="color:#EBE1AB">소괄호에 뭔가 집어넣으면 return을 이용해 뭔가 뱉어내는 것</span><br />
이게 바로 함수의 입출력 기능이다.<br />
</details>
<p><br />
<br />
<br />
그래서 arrow function을 쓰면 입출력기능이 쉽고 예쁘게 표현되지 않나.
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">두배만들기</span> <span class="o">=</span> <span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">}</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">두배만들기</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span> <span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">두배만들기</span><span class="p">(</span><span class="mi">8</span><span class="p">)</span> <span class="p">);</span>
</code></pre></div></div>
<p><br />
숫자를 넣으면 2배를 해주는 함수를 하나 만들었다.<br />
함수 표현식 자체가 x가 x * 2가 됩니다~ 라고 말하는것 같은가?<br />
매우 이해하기 쉬워진다.<br />
이게 장점1 이다.<br />
<br />
<br />
<br />
<span style="color:#EBE1AB">왜 쓰냐면 2. 소괄호 생략이 가능하다.</span><br />
<br />
파라미터가 하나라면 소괄호를 생략할 수 있다.<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">두배만들기</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span> <span class="p">}</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">두배만들기</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span> <span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">두배만들기</span><span class="p">(</span><span class="mi">8</span><span class="p">)</span> <span class="p">);</span>
</code></pre></div></div>

<p>이렇게 해도 된다는 소리이다.
<br />
<br />
<br />
<span style="color:#EBE1AB">왜 쓰냐면 3. 중괄호 생략이 가능하다.</span><br />
<br />
중괄호 안에 return 한줄 뿐이라면 중괄호와 return도 생략가능하다.<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">두배만들기</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">두배만들기</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span> <span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">두배만들기</span><span class="p">(</span><span class="mi">8</span><span class="p">)</span> <span class="p">);</span>
</code></pre></div></div>

<p>생략하니 이제 x가 어떻게 변하는 함수인지 <span style="color:red">입출력기능</span>이 바로 한눈에 들어온다.<br />
원래 {} 중괄호 끝날 땐 세미콜론 안쳐도 잘 되는데<br />
생략할 땐 매너있게 세미콜론은 적어주자.<br />
<br />
<br />
<br />
<br /></p>

<h2 id="arrow-function-을-쓰면-내부에서-this값을-쓸-때-밖에-있던-this값을-그대로-사용한다"><span style="color:#EBE1AB">Arrow Function 을 쓰면 내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용한다.</span><br /></h2>
<p><br />
함수를 쓸때…함수가 쓰인 위치에 따라서 내부의 this값이 변한다고 저번시간에 배웠다.<br />
근데 arrow function은 어디서든 쓰든 간에 내부의 this값을 변화시키지 않는다.<br />
그러니깐 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function이라는 함수이다.<br />
(이게 장점 4이자 arrow function을 쓰는 핵심 이유이다.)<br />
<br />
<br />
<br />
예시를 보자.<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">오브젝트1</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">함수</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(){</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="p">}</span>
<span class="p">}</span>

<span class="nx">오브젝트1</span><span class="p">.</span><span class="nx">함수</span><span class="p">()</span>
</code></pre></div></div>
<p>위의 코드는 실행하면 무슨 결과가 나올까?<br />
this값을 출력하라고 한다. this가 뭘까?<br />
함수()를 가지고 있는 오브젝트인 오브젝트1이 콘솔창에 출력될 것이다.<br />
<br />
<br />
<br />
그럼 arrow function을 사용하면 어떻게 될까?<br />
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">오브젝트1</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">함수</span> <span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="p">}</span>
<span class="p">}</span>

<span class="nx">오브젝트1</span><span class="p">.</span><span class="nx">함수</span><span class="p">()</span>
</code></pre></div></div>
<p>위의 코드는 실행하면 무슨 결과가 나올까?<br /></p>

<details>
<summary>안알랴줌</summary>
window라는게 출력된다.<br />
여기선 this가 window다.<br />
<br />
<br />
왜 함수의 주인인 오브젝트1이 출력되지 않나면...<br />
this값은 함수를 만나면 항상 변하는데 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 쓴다.<br />
(오브젝트 밖에 있던 this는 window이다.)<br />
</details>
<p><br />
<br />
왜냐면 arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용하는 함수이기 때문이다.<br />
항상 장점은 아니다. 내가 예측하던 this값과 달라질 수도 있으니 단점이 될 수 있다.<br />
끝이다. 더 알것도 없다.<br />
이제 개발할 때 심심하면 arrow function 열심히 사용하길 바란다.<br />
<br />
하지만 this의 뜻이 달라지는 것 처럼 읿반 function과 용도가 완전 같지 않기 때문에<br />
일반 function을 항상 대체할 수 있는 문법이 아니다. 그것만 주의하자.</p>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="frontend" /><category term="javascript" /><summary type="html"><![CDATA['ES6 문법 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했다. arrow function 이라는 문법인데 이걸 이용하면 함수를 만들 수 있다. 그냥 기존 function () {} 이게 있는데 왜 새로 추가했냐고? 지금부터 알아보도록 하자.']]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" /><media:content medium="image" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">this 키워드를 알아보자 2. event listener와 constructor</title><link href="https://piemonte93.github.io/frontend/javascript/2025-11-29-javascript-post3/" rel="alternate" type="text/html" title="this 키워드를 알아보자 2. event listener와 constructor" /><published>2025-11-29T18:33:47+00:00</published><updated>2025-11-29T18:33:47+00:00</updated><id>https://piemonte93.github.io/frontend/javascript/javascript-post3</id><content type="html" xml:base="https://piemonte93.github.io/frontend/javascript/2025-11-29-javascript-post3/"><![CDATA[<p><br /></p>

<h2 id="3-constructor-안에서-쓰면-constructor로-새로생성-되는-오브젝트를-뜻한다"><span style="color:#EBE1AB">3. constructor 안에서 쓰면 constructor로 새로생성 되는 오브젝트를 뜻한다.</span></h2>

<p>자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우 오브젝트를 복사하는게 아니라 constructor라는걸 만들어서 사용한다. 쉽게 말하면 constructor는 오브젝트 복사해서 생성해주는 기계이다. 기계를 어떻게 만드는지 알아보자.</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">기계</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>이게 기계 만드는 법이다.<br />
함수 문법을 이용해서 만든 후, 안에 this. 어쩌구를 추가해주면 된다.<br />
여기서의 this는 <span style="color:#EBE1AB">기계로부터 새로 생성될 오브젝트</span>들을 의미한다.<br /></p>

<p>그럼 this.이름 = ‘Kim’ 이건 무슨 뜻일까?<br />
새로 생성되는 오브젝트의 이름 key값에 ‘Kim’이라는 value를 집어넣어줘!<br />
라는 뜻 아닐까?<br />
맞다.
<br />
<br /></p>

<p>▼이건 참고로 알아두면 좋은 기계에서 오브젝트 뽑는 법이다.</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">기계</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">이름</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Kim</span><span class="dl">'</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">오브젝트</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">기계</span><span class="p">();</span>
</code></pre></div></div>

<p>이렇게 new 키워드를 이용하면 새로운 오브젝트를 꺼낼 수 있다.<br />
그리고 새로운 오브젝트는 {이름 : ‘Kim’}이라는 값을 가지고 있다.<br />
(this 라는 키워드 덕분에)</p>

<p><br />
<br />
<br />
<br /></p>

<h2 id="4-eventlistener-안에서-쓰면-this는-ecurrenttarget-이라는-의미이다"><span style="color:#EBE1AB">4. eventlistener 안에서 쓰면 this는 e.currentTarget 이라는 의미이다.</span></h2>

<p>이벤트리스너라는 문법 기억하는가?</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">버튼</span><span class="dl">'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
<span class="p">});</span>
</code></pre></div></div>

<p>여기서 this를 소환하면 이것은 바로 e.currentTarget이라는 뜻과 똑같은 의미이다.<br />
<span style="color:#EBE1AB">e.currentTarget은 지금 이벤트가 동작하는 곳</span>을 뜻한다.<br />
매우 간단히 설명하면 지금 addEventListener 부착된 HTML 요소를 뜻한다고 보면 된다.<br />
의심되면 ## <span style="color:#EBE1AB">e.currentTarget, this, document.getElementById(‘버튼’)</span> 이거 세개를 각각 출력해보면 된다.<br />
이게 this의 마지막 뜻이다.
<br />
<br />
<br />
<br />
<br /></p>

<h2 id="case1-이벤트리스너-안에서-콜백함수를-쓴다면-this는"><span style="color:#EBE1AB">case1. 이벤트리스너 안에서 콜백함수를 쓴다면 this는?</span></h2>

<p>이런 코드를 쓴다거 가정해보자.
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">버튼</span><span class="dl">'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">어레이</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">];</span>
    <span class="nx">어레이</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
    <span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>

<p>이벤트리스너 안에서 forEach() 라는 반복문을 사용했다.<br />
forEach() 반복문을 사용할 땐 안에 function(){} 콜백함수를 집어넣어서 사용하게 되어있다. 그래서 넣었다.<br />
<span style="color:#EBE1AB">(* 콜백함수는 그냥 함수 안에 파리미터역할로 들어가는 함수를 뜻한다. 그게 다임)</span><br />
하지만 솔직히 forEach가 무슨 역할을 하는지는 몰라도 이건 알수 있다.
<br /></p>

<p><span style="color:#EBE1AB">Q. 위의 코드에서 this를 출력하면 무엇이 나올까?</span></p>
<blockquote>
  <details>
<summary>뭐가 나오냐면</summary>
<br />
바로 답보지말고 한참동안 생각을 해보도록 하자.<br />
생각이 안나면 지금까지 this의 1,2,3,4번 뜻을 각각 대입해 봐라.<br />
그럼 뭘까.<br />
<br />
4번뜻에 의하면..eventlistener 안에서 쓴건 아니다.<br />
eventlistener 내부는 맞지만 그 안에서 function을 하나 더 만났기 때문에 의미가 변한다.<br />
3번 뜻에 의하면.. constructor는 아닌거 같다.<br />
실은 this의 1번이나 2번 뜻이 맞다.<br />
저렇게 쌩으로 있는 콜백함수는 그냥 일반함수랑 똑같기 때문에 window가 출력된다.<br />
<br />
<br />
this의 값은 this가 어떤 함수안에 들어있는지만 잘 체크하면 바로 알 수 있다.
</details>
</blockquote>

<p><br />
<br />
<br />
<br />
<br /></p>

<h2 id="case2-오브젝트-안에서-콜백함수를-쓴다면-this는"><span style="color:#EBE1AB">case2. 오브젝트 안에서 콜백함수를 쓴다면 this는?</span></h2>
<p><br />
이번엔 이런 코드를 쓴다고 가정해보자
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">오브젝트</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">이름들</span> <span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">김</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">이</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">박</span><span class="dl">'</span><span class="p">];</span>
    <span class="nl">함수</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">오브젝트</span><span class="p">.</span><span class="nx">이름들</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
        <span class="p">});</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<p>오브젝트라는 오브젝트 안에 이름들, 함수라는 자료를 각각 저장했다.<br />
함수라는 자료 안에 forEach 반복문을 돌렸는데,
<br /></p>

<p><span style="color:#EBE1AB">Q. 그럼 여기 안에서의 this값을 출력하면 뭐가 나올까?</span></p>
<blockquote>
  <details>
<summary>뭐가 나오냐면</summary>
역시 잘 대입을 해보면 된다.<br />
this값을 판단할 땐 가장 가까이 있는 함수를 살펴보면 된다.<br />
<br />
forEach()안에 있는 함수에 this가 들어있다.<br />
근데 이 함수는 무슨 뭐 특별한 역할을 하는 함수인가?<br />
아니다. 그냥 일반 함수일 뿐이다.<br />
그래서 이것도 window이다.
<br />
</details>
</blockquote>

<p><br />
그래서 this값을 function을 만날 때마다 바뀔 수 있기 때문에 내가 원하는 this를 쓰기 힘든 경우가 있다. 그럴 땐 함수를 arrow function으로 바꿔보자.
<br /></p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">오브젝트</span> <span class="o">=</span> <span class="p">{</span>
    <span class="na">이름들</span> <span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">김</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">이</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">박</span><span class="dl">'</span><span class="p">];</span>
    <span class="nl">함수</span> <span class="p">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="nx">오브젝트</span><span class="p">.</span><span class="nx">이름들</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
        <span class="p">});</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>

<p>자바스크립트 ES6 문법 중,<br />
function(){} 대신 쓸 수 있는 () =&gt; {} 이라는 arrow function 문법이 있다.<br />
똑같이 함수 만드는 문법이다.<br />
이걸 쓰면 함수 내부의 this 값을 새로 바꿔주지 않기 때문에 this를 사용할 때 유용하다.<br />
심심하면 사용하길 바란다. (아니면 애초에 this 키워드를 쓰지말자)<br />
자세한 arrow function에 관한 내용은 다음에 설명하겠다.</p>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="frontend" /><category term="javascript" /><summary type="html"><![CDATA['저번 시간 this 의미 정리를 하자면 1. 그냥 일반 함수에서 쓰면 window 2. 오브젝트 내의 함수(메소드)에서 쓰면 함수를 동작시키는 오브젝트가 출력된다고 배웠다. 이번엔 다른 this 키워드의 의미들을 알아보자']]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" /><media:content medium="image" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">this 키워드를 알아보자 1. 함수와 Object에서 사용하면?</title><link href="https://piemonte93.github.io/frontend/javascript/2025-11-27-javascript-post2/" rel="alternate" type="text/html" title="this 키워드를 알아보자 1. 함수와 Object에서 사용하면?" /><published>2025-11-27T20:11:47+00:00</published><updated>2025-11-27T20:11:47+00:00</updated><id>https://piemonte93.github.io/frontend/javascript/javascript-post2</id><content type="html" xml:base="https://piemonte93.github.io/frontend/javascript/2025-11-27-javascript-post2/"><![CDATA[<p><br /></p>

<h2 id="1-1-그냥-쓰거나-함수-안에서-쓰면-this는-window를-뜻한다"><span style="color:#EBE1AB">1-1. 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻한다.</span></h2>

<p>그냥 HTML 파일 아무거나 하나 만들고 중간에 <code class="language-plaintext highlighter-rouge">&lt;script&gt;</code>태그 열어서 일단 this라는 키워드를 콘솔창에 출력해보자.</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
</code></pre></div></div>

<p>그러면 this 키워드는 그냥 window {어쩌구} 이런 값이 나온다.</p>

<p>비슷하게 일반 함수 내에서 this라는 값을 불러보면</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">간지나는함수</span><span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">간지나는함수</span><span class="p">();</span>
</code></pre></div></div>

<p>똑같이 this라는 값은 window라고 출력된다.
이것이 this의 첫째 뜻이다. 그냥 window다.</p>

<p><span style="color:#EBE1AB">Q. window가 뭔가요?</span>
<br />
<span style="color:#EBE1AB">A. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체입니다.</span>
<br /></p>

<p>라고 구글검색 번역투로 설명하면 솔직히 이해가 안되니 좀 쉽게 비유해보자면 우리가 쓰는 자바스크립트 함수 document.getElementById(), alert(), console.log()
이런 함수들을 보관하는 보관소이다. 보관소는 특별한건 아니고 그냥 큰(오브젝트)일 뿐이다.</p>

<p>또한 전역변수를 만들었을 때도 이 값을 보관해준다.</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>
  <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">300</span><span class="p">;</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>

<p>이렇게 변수를 큰 공간에 만들면 x라는 변수는 window라는 큰 오브젝트 안에 자동적으로 생성된다. 함수도 마찬가지이다.
아무튼 그냥 보관소이다. 끝!</p>

<p><span style="color:#EBE1AB">*전역변수 : 코드 내 모든 곳에서 참조해서 쓸 수 있는 범용적인, 범위가 넓은 변수입니다. 그냥 script태그 내에 쌩으로 var 변수 하나 만들면 그건 자연스레 전역변수가 됩니다. </span>
<br /></p>

<h2 id="1-2-strict-mode일-때-함수-안에서-쓰면-this는-undefined-이다"><span style="color:#EBE1AB">1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined 이다.</span></h2>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>
  <span class="dl">"</span><span class="s2">use strict</span><span class="dl">"</span><span class="p">;</span>

  <span class="kd">function</span> <span class="nx">간지나는함수</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nx">간지나는함수</span><span class="p">();</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>

<p>IE 10버전 이상에선 ‘use strict’라는 키워드를 페이지 최상단에 추가하면 strict mode로 자바스크립트를 작성가능하다.
strict mode에선 var 키워드 없이 변수를 선언하거나,
변수를 arguments라는 이상한 키워드로 선언하거나 그런 실수를 방지해준다.
strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정해준다.</p>

<h2 id="2-object-자료형-내에-함수들이-있을-수-있는데-거기서-this값은-주인님을-뜻한다"><span style="color:#EBE1AB">2. object 자료형 내에 함수들이 있을 수 있는데 거기서 this값은 ‘주인님’을 뜻한다.</span></h2>

<p>object 자료형에 함수같은거 집어넣을 수 있단걸 아는가?</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">오브젝트1</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">data</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Kim</span><span class="dl">"</span><span class="p">,</span>
  <span class="na">간지함수</span><span class="p">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">간지</span><span class="dl">"</span><span class="p">);</span>
  <span class="p">},</span>
<span class="p">};</span>
</code></pre></div></div>

<p>글자나 숫자 집어넣듯이 오브젝트 내에도 저렇게 함수를 집어넣을 수 있다.
그럼 함수를 어떻게 꺼내쓰냐면</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">오브젝트1</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">data</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Kim</span><span class="dl">"</span><span class="p">,</span>
  <span class="na">간지함수</span><span class="p">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">간지</span><span class="dl">"</span><span class="p">);</span>
  <span class="p">},</span>
<span class="p">};</span>

<span class="nx">오브젝트1</span><span class="p">.</span><span class="nx">간지함수</span><span class="p">();</span>
</code></pre></div></div>

<p>이렇게 쓰면 된다. 그럼 콘솔창에 ‘간지’라는 글자가 출력된다.
오브젝트에 들어가는 함수들을 있어보이는 전문용어로 메소드 method라고 칭한다.</p>

<p>근데 메소드 안에서 this를 쓰면 신기한 값이 나온다. 바로 주인님이라는 값인데</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">오브젝트1</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">data</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Kim</span><span class="dl">"</span><span class="p">,</span>
  <span class="na">간지함수</span><span class="p">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
  <span class="p">},</span>
<span class="p">};</span>

<span class="nx">오브젝트1</span><span class="p">.</span><span class="nx">간지함수</span><span class="p">();</span>
</code></pre></div></div>

<p>간지라는 단어 대신 this라는 키워드를 출력시키면 어떻게 되나?
콘솔창에 {data : ‘Kim’, 간지함수 : f} 뭐 이런 값이 출력되지 않나?
이게 뭐냐면 그냥 방금 만든 오브젝트1이다.
그래서 메소드안에서 this를 쓰면 <span style="color:#EBE1AB">this는 메소드를 가지고 있는 오브젝트</span>를 뜻한다.
쉽게 외우고 싶으면 this는 ‘메소드의 주인님’을 지칭한다.</p>

<p><br />
<br /></p>

<p>그럼 밑의 예제의 this는 무슨 값이 출력될까?</p>

<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">오브젝트2</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">data</span> <span class="p">:</span> <span class="p">{</span>
    <span class="na">간지함수</span> <span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nx">오브젝트2</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">간지함수</span><span class="p">();</span>
</code></pre></div></div>

<p>이런거 그대로 복붙해서 출력해보지말고 미리 생각을 해라.
그러면 머리에 잘 남는다.
생각을 했으면 직접 출력해서 머릿속의 답과 비교해보자.</p>

<blockquote>
  <details>
<summary>답이 무엇이냐면</summary>
별거없고 오브젝트의 메소드안에서 썼을 때 this는 메소드를 담고있는 주인님을 뜻하기 때문에 <br />
간지함수()를 담고있는 주인님인 <span style="color:#EBE1AB">오브젝트2.data</span> 라는게 위의 this랑 동일한 뜻이다. <br />
둘다 각각 출력해보면 된다. 
</details>
</blockquote>

<p><br />
<br /></p>

<h2 id="근데-놀라운-사실은-그냥-this라는-뜻은-2번만-알면-된다"><span style="color:#EBE1AB">근데 놀라운 사실은 그냥 this라는 뜻은 2번만 알면 된다.</span></h2>

<p>1번, 즉 <span style="color:#EBE1AB">“일반 함수 내에서 썼을 때 this는 window입니다”</span> 라는 정의는 굳이 외울 필요가 없다.
왜냐면 2번 뜻을 잘 배웠다면 1번도 자연스레 유추가 가능하다.</p>

<p><br />
<br />
<br />
함수나 변수를 대충 스크립트 태그 안에 만들엇을 때, 함수나 변수는 그냥 만들어지는게 아니다.</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>

  <span class="kd">function</span> <span class="nx">간지나는함수</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">()</span>
  <span class="p">}</span>

<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>

<p>방금 만든 간지나는함수()는 전역변수나 전역함수를 관리하기 위한 window라는 오브젝트에 자동으로 추가가 된다.
왜 그렇냐고?
그건 자바스크립트 만든 사람한테 물어봐라.</p>

<p><br />
<br />
그래서 코드(1) 코드(2) 둘 다 자바스크립트 입장에서 보면 똑같단 이야기이다.</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>

  <span class="p">(</span><span class="mi">1</span><span class="p">)</span>
  <span class="kd">function</span> <span class="nx">간지나는함수</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
  <span class="p">}</span>

  <span class="p">(</span><span class="mi">2</span><span class="p">)</span>
  <span class="nb">window</span><span class="p">.</span><span class="nx">간지나는함수</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">()</span> <span class="p">};</span>

<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>

<p>(2) 문법은 window라는 오브젝트에 함수 자료를 추가하는 문법일 뿐이다. 어려운게 없다.
아무튼 결론은 전역함수 만들거나 전역변수 만들면 저렇게 window{오브젝트} 안에 담긴다는 소리이다.
우리가 일부러 하지 않아도 변수나 함수 쌩으로 만들면 자바스크립트가 자동으로 알아서 window안에 담는다.
(변수 파트에서 window 오브젝트에 대해 잠깐 더 알아볼 예정)
<br />
<br />
<br /></p>

<p>그럼 이제 function 문법의 동작원리 하나를 알았으니 다시 한번 this를 여기서 출력해보자.</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;script&gt;</span>

  <span class="kd">function</span> <span class="nx">간지나는함수</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
  <span class="p">}</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>

<p>여기서 this는 무슨값이 나올까?
this는 아까 2번에 의하면 내 메소드를 포함하고 있는 주인님 오브젝트를 출력시켜 준다고 했다?
<span style="color:#EBE1AB">간지나는함수()</span>를 포함하고 있는 주인님 오브젝트가 무엇일까?</p>

<blockquote>
  <details>
<summary>여기서의 this는 무엇일까?</summary>
안알랴줌 직접 출력해서 보셈 ㅋ
</details>
</blockquote>

<p><br />
그래서 1번 :this를 함수 안에서 썼을 땐 window가 나온다~ 라는건 안외워도 되고
<span style="color:#EBE1AB">2번 : this는 오브젝트 내의 메소드(함수)에서 사용했을 때 메소드의 주인님 오브젝트를 출력해준다~
요것만 외우면 된다.
</span>
<br />
<br />
<br />
근데 난관이 있다. this의 얼탱이없는 3번 4번 뜻도 있기 때문이다.
하지만 뇌용량이 지금 꽉 찼기 때문에 메모리 부족 에러가 날 수 있으니 다음시간에 알아보자.</p>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="frontend" /><category term="javascript" /><summary type="html"><![CDATA['개발하면서 은근 자주 찾아볼 수 있는 this 키워드는 뜻이 매우 다양하다. 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있는데 이번 기회에 총정리해보자.']]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" /><media:content medium="image" url="https://piemonte93.github.io/assets/img/img-folder/js-img.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">SQL로 테이블 만들기 &amp;amp; 데이터 타입</title><link href="https://piemonte93.github.io/database/2025-09-14-database-post2/" rel="alternate" type="text/html" title="SQL로 테이블 만들기 &amp;amp; 데이터 타입" /><published>2025-09-14T03:40:47+00:00</published><updated>2025-09-14T03:40:47+00:00</updated><id>https://piemonte93.github.io/database/database-post2</id><content type="html" xml:base="https://piemonte93.github.io/database/2025-09-14-database-post2/"><![CDATA[<p><br /></p>

<h2 id="key-value-database">Key-Value Database</h2>
<p><img src="/assets/img/img-folder/key-value.png" alt="database image" /><br /></p>

<ul>
  <li>너무 간단해 보여서 쓸모가 없어보이는데 맞다 쓸모가 없다. 서브용 DB로 쓰거나 그게 전부다.</li>
  <li>그런데 Redis라는 특수한 기능을 가진 Key-Value 데이더베이스가 있다.
<img src="/assets/img/img-folder/redis.png" alt="database image" /><br /></li>
  <li>이 친구는 되게 많이쓴다. 데이터를 하드디스크에 저장하지 않고, RAM에 저장을 한다. 왜냐하면 RAM이 하드보다 훨씬 빠르기 때문이다. 물론 하드에 백업은 해둔다. 메인 DB를 두고 사람들이 자주 쓰는 데이터를 redis 에 추가적으로 복사를 해둔다. 그러면 데이터 요청시 메인 DB가 아닌 redis에서 꺼내서 쓰면 속도가 빠르기때문에 효율적이다.</li>
  <li>자주쓰는 데이터 캐싱, 채팅을 위한 pub/sub, 영상 스트리밍, 로그인 기록 저장 등에 활용한다</li>
  <li>요즘은 redis 하나로 모든걸 다 할수 있는 redis 업글버전도 있는거 같은데 아무도 안씀</li>
</ul>

<h2 id="relational-database">Relational Database</h2>
<ul>
  <li>내가 각잡는걸 좋아해서 데이터를 표 형태로 저장하고 싶다? 유구한 역사와 전통의 관계형 데이터베이스를 사용하자.</li>
  <li>럭키 엑셀임</li>
  <li>대량의 데이터를 저장하려면 Oracle, MySQL, PostgreSQL등을 사용하는 경우가 많다.
<img src="/assets/img/img-folder/rdbms.png" alt="database image" /><br /></li>
  <li>다양한곳에서 일반적으로 사용할수 있다보니 데이터베이스 점유율을 보면 상위권은 전부 관계형 DB임
<img src="/assets/img/img-folder/stackoverflow.png" alt="database image" /><br /></li>
  <li>해당 DB에 데이터를 저장하고 싶다? Structed Query Language(SQL)이라는 문법을 이용해야함.</li>
  <li>쉬워서 세살짜리 애들도 할수 있다고 하는데 안쉬운거 보면 세살보다 어린가봄</li>
  <li>관계형 DB에서 광적으로 집착하는게 있는데 정규화이다. 보통 데이터를 정규화해서 저장한다.</li>
  <li>데이터 중복을 너무 싫어해서 데이터가 중복이 된다? 다른 테이블로 다 쪼개버리는 짓을 한다. 이걸 전문용어로 정규화라고 한다.
<img src="/assets/img/img-folder/%EC%A0%95%EA%B7%9C%ED%99%941.png" alt="database image" /><br />
<img src="/assets/img/img-folder/%EC%A0%95%EA%B7%9C%ED%99%942.png" alt="database image" /><br /></li>
  <li>이것때문에 데이터 입출력하는 문법이 거지같이 될떄가 있다.</li>
  <li>기본적으로 트랜잭션 기능을 지원해서 돈 거래와 같은 중요한 기능을 구현하고 싶을때 실패시 롤백도 가능하기에 안전하게 구현이 가능하다.</li>
  <li>그래서 주로 입출력 데이터 속도보다 정확도가 매우 중요하다? 그러면 일반적으로 관계형 데이터베이스를 사용한다.</li>
</ul>

<h2 id="graph-database">Graph Database</h2>
<ul>
  <li>많은 사람들이 관계형 데이터베이스의 이름떄문에 관계를 잘 표현한다고 생각하는데, 실은 관계라는 표현은 수학 용어중에 Relation 이라는 행렬 배울때 쓰는 용어를 그대로 따와 붙인거다.</li>
  <li>관계형 데이터베이스는 관계를 중점으로 다루기엔 어려움이 많다.</li>
  <li>관계를 주로 다루고 싶다? Graph Database를 사용한다.
<img src="../../assets/img/img-folder/graph%20database.png" alt="database image" /><br /></li>
  <li>가장 유명한게 neo4j
<img src="../../assets/img/img-folder/graph%20database2.png" alt="database image" /><br /></li>
  <li>노드라는걸 만들고 노드 안에 데이터들을 저장할 수 있는데, 노드끼리 어떤 관계인지를 기록할 수 있다.</li>
  <li>데이터를 입출력할때는 Graph Query Language (GQL)이라는 언어를 이용한다.</li>
  <li>요거 쓰면 방향도 표현이 가능하다</li>
  <li>이걸 어디에 쓰냐고? 하면 자료간의 관계, 방향같은걸 중점적으로 저장하고 싶을때 사용. 비행기 노선이나, SNS 친구관계, 코로나전염맵, 대기업 같은경우 추천서비스 이런걸 다룰때 Graph Database 를 사용한다</li>
</ul>

<h2 id="document-database">Document Database</h2>
<ul>
  <li>“저는 수포자라서 그래프 싫은데요?”</li>
  <li>일반적인 상황에서 쓰는 DB는 관계형 DB인데 이것보다 조금 더 자유로운게 Document Database이다.</li>
  <li>MongoDB, CouchDB, Firestore 등이 유명함
<img src="../../assets/img/img-folder/document%20database.png" alt="database image" /><br /></li>
  <li>예를들면, Collection이라는 폴더를 만들면 그 안에 document라는 파일들을 만들어서 그 파일안에 JSON 형태로 데이터를 저장할 수 있게 되어있다.</li>
  <li>관계형 DB와 다르게 어떤 데이터를 저장할 지 미리 정의해 둘 필요도 없고, 갑자기 연락처를 추가한다던지 구조가 바뀌어도 문제가 없다.
<img src="../../assets/img/img-folder/document%20database2.png" alt="database image" /><br /></li>
  <li>정규화따윈 하지 않는다. 그래서 데이터 입출력 문법이 훨씬 간단하다. 
<img src="../../assets/img/img-folder/document%20database3.png" alt="database image" /><br /></li>
  <li>대부분 분산을 염두해두고 만든 데이터베이스이기 떄문에 데이터베이스를 분산시키는게 매우 쉽다.</li>
  <li>데이터 입출력이 매우 많은 SNS, 실시간채팅, 게시판, 온라인게임 등에 자주 사용한다.</li>
  <li>분산하면 물론 단점도 있다. DB간의 정확도가 떨어질 수 있다.</li>
</ul>

<h2 id="column-family-database">Column-Family Database</h2>
<ul>
  <li>나는 관계형 DB와 같이 표 형식으로 저장하고 싶은데 좀 유연하게 쓰고싶다? Column-Family Database 쓰면 됨
<img src="/assets/img/img-folder/column-family.png" alt="database image" /><br /></li>
  <li>카산드라, 구글의 BigTable 같은게 있다.
<img src="/assets/img/img-folder/column-family2.png" alt="database image" /><br /></li>
  <li>해당 DB들은 똑같이 테이블을 만들고, row를 여러개 만들고 자유롭게 column을 만들어서 데이터를 기입. 행마다 컬럼이 달라도 아무 문제가 없다.</li>
  <li>데이터 입출력을 할려면 SQL이 아니라 자기들이 만든 언어를 이용해야한다.</li>
  <li>얘네도 정규화따윈 안한다. 데이터 입출력이 매우 쉽다.</li>
  <li>복제, 분산 잘함. 그래서 많은 입출력을 감당해야할 때 얘네를 쓰는 경우가 있다.</li>
  <li>Document Database와 마찬가지로 분산하면 단점으로 데이터 정확도(일관성)이 떨어진다.</li>
  <li>가끔 데이터 저장할 때 시간 기록같은걸 되게 쉽게 해주는 기능이 있어서 시계열 데이터 저장하고 분석할때 이 DB들을 쓰는 경우가 있다. Netflix에서 님 시청기록 이걸로 분석함.</li>
</ul>

<h2 id="search-engine">Search Engine</h2>
<ul>
  <li>검색용 인덱스를 저장하기 위한 데이터베이스도 존재한다.
<img src="../../assets/img/img-folder/search%20engine.png" alt="database image" /><br /></li>
  <li>엘라스틱 서치, 아마존 클라우드서치 등이 있다.</li>
  <li>일반적인 데이터베이스로도 사용이 가능하긴 한데 실제로 그러지는 않음.</li>
  <li>Index 보관용으로 주로 사용함. 인덱스는 데이터의 빠른 검색을 도와주는 색인, 목차라고 생각하면 된다.</li>
  <li>기존 DB에서 데이터를 뽑아서 여기에 저장을 하면, 인덱스를 생성하고 보관해주는 역할을 한다.</li>
  <li>검색 요청이 들어오면 인덱스를 활용해서 자료를 쉽게 검색하게 도와준다.</li>
  <li>실시간 검색어, 추천 검색어, 검색어 오타교정 과 같은 부가적인 기능들도 쉽게 만들 수 있게 해준다.</li>
  <li>검색이 중요한 사이트를 만들때 이런걸 쓴다.
<img src="../../assets/img/img-folder/search%20engine%202.png" alt="database image" /><br />
<img src="../../assets/img/img-folder/search%20engine%203.png" alt="database image" /><br /></li>
</ul>

<h2 id="3줄요약좀">3줄요약좀</h2>
<ul>
  <li>일반적인 용도는 Relations Database, Document Database 둘 중 하나 골라서 쓰면 됨.</li>
  <li>정확도 필요없고 입출력이 너무 많으면 Document Database, 정확도와 일관성이 중요하면 Relations Database가 일반적</li>
  <li>(확장 방법에 따라 아닐 수도 있음 ㅋ)</li>
</ul>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="database" /><summary type="html"><![CDATA['오늘은 테이블 만드는 법 & 데이터 타입을 알아볼텐데 그냥하면 재미가 없으니까 여러분들 이마트에서 일하는 개발자라고 가정하고 이마트에서 파는 상품데이터를 DB에 저장해보자. ']]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://piemonte93.github.io/assets/img/img-folder/database-icon.jpg" /><media:content medium="image" url="https://piemonte93.github.io/assets/img/img-folder/database-icon.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">데이터베이스의 종류</title><link href="https://piemonte93.github.io/database/2025-09-11-database-post1/" rel="alternate" type="text/html" title="데이터베이스의 종류" /><published>2025-09-11T03:40:47+00:00</published><updated>2025-09-11T03:40:47+00:00</updated><id>https://piemonte93.github.io/database/database-post1</id><content type="html" xml:base="https://piemonte93.github.io/database/2025-09-11-database-post1/"><![CDATA[<p><br /></p>

<h2 id="key-value-database">Key-Value Database</h2>
<p><img src="/assets/img/img-folder/key-value.png" alt="database image" /><br /></p>

<ul>
  <li>너무 간단해 보여서 쓸모가 없어보이는데 맞다 쓸모가 없다. 서브용 DB로 쓰거나 그게 전부다.</li>
  <li>그런데 Redis라는 특수한 기능을 가진 Key-Value 데이더베이스가 있다.
<img src="/assets/img/img-folder/redis.png" alt="database image" /><br /></li>
  <li>이 친구는 되게 많이쓴다. 데이터를 하드디스크에 저장하지 않고, RAM에 저장을 한다. 왜냐하면 RAM이 하드보다 훨씬 빠르기 때문이다. 물론 하드에 백업은 해둔다. 메인 DB를 두고 사람들이 자주 쓰는 데이터를 redis 에 추가적으로 복사를 해둔다. 그러면 데이터 요청시 메인 DB가 아닌 redis에서 꺼내서 쓰면 속도가 빠르기때문에 효율적이다.</li>
  <li>자주쓰는 데이터 캐싱, 채팅을 위한 pub/sub, 영상 스트리밍, 로그인 기록 저장 등에 활용한다</li>
  <li>요즘은 redis 하나로 모든걸 다 할수 있는 redis 업글버전도 있는거 같은데 아무도 안씀</li>
</ul>

<h2 id="relational-database">Relational Database</h2>
<ul>
  <li>내가 각잡는걸 좋아해서 데이터를 표 형태로 저장하고 싶다? 유구한 역사와 전통의 관계형 데이터베이스를 사용하자.</li>
  <li>럭키 엑셀임</li>
  <li>대량의 데이터를 저장하려면 Oracle, MySQL, PostgreSQL등을 사용하는 경우가 많다.
<img src="/assets/img/img-folder/rdbms.png" alt="database image" /><br /></li>
  <li>다양한곳에서 일반적으로 사용할수 있다보니 데이터베이스 점유율을 보면 상위권은 전부 관계형 DB임
<img src="/assets/img/img-folder/stackoverflow.png" alt="database image" /><br /></li>
  <li>해당 DB에 데이터를 저장하고 싶다? Structed Query Language(SQL)이라는 문법을 이용해야함.</li>
  <li>쉬워서 세살짜리 애들도 할수 있다고 하는데 안쉬운거 보면 세살보다 어린가봄</li>
  <li>관계형 DB에서 광적으로 집착하는게 있는데 정규화이다. 보통 데이터를 정규화해서 저장한다.</li>
  <li>데이터 중복을 너무 싫어해서 데이터가 중복이 된다? 다른 테이블로 다 쪼개버리는 짓을 한다. 이걸 전문용어로 정규화라고 한다.
<img src="/assets/img/img-folder/%EC%A0%95%EA%B7%9C%ED%99%941.png" alt="database image" /><br />
<img src="/assets/img/img-folder/%EC%A0%95%EA%B7%9C%ED%99%942.png" alt="database image" /><br /></li>
  <li>이것때문에 데이터 입출력하는 문법이 거지같이 될떄가 있다.</li>
  <li>기본적으로 트랜잭션 기능을 지원해서 돈 거래와 같은 중요한 기능을 구현하고 싶을때 실패시 롤백도 가능하기에 안전하게 구현이 가능하다.</li>
  <li>그래서 주로 입출력 데이터 속도보다 정확도가 매우 중요하다? 그러면 일반적으로 관계형 데이터베이스를 사용한다.</li>
</ul>

<h2 id="graph-database">Graph Database</h2>
<ul>
  <li>많은 사람들이 관계형 데이터베이스의 이름떄문에 관계를 잘 표현한다고 생각하는데, 실은 관계라는 표현은 수학 용어중에 Relation 이라는 행렬 배울때 쓰는 용어를 그대로 따와 붙인거다.</li>
  <li>관계형 데이터베이스는 관계를 중점으로 다루기엔 어려움이 많다.</li>
  <li>관계를 주로 다루고 싶다? Graph Database를 사용한다.
<img src="../../assets/img/img-folder/graph%20database.png" alt="database image" /><br /></li>
  <li>가장 유명한게 neo4j
<img src="../../assets/img/img-folder/graph%20database2.png" alt="database image" /><br /></li>
  <li>노드라는걸 만들고 노드 안에 데이터들을 저장할 수 있는데, 노드끼리 어떤 관계인지를 기록할 수 있다.</li>
  <li>데이터를 입출력할때는 Graph Query Language (GQL)이라는 언어를 이용한다.</li>
  <li>요거 쓰면 방향도 표현이 가능하다</li>
  <li>이걸 어디에 쓰냐고? 하면 자료간의 관계, 방향같은걸 중점적으로 저장하고 싶을때 사용. 비행기 노선이나, SNS 친구관계, 코로나전염맵, 대기업 같은경우 추천서비스 이런걸 다룰때 Graph Database 를 사용한다</li>
</ul>

<h2 id="document-database">Document Database</h2>
<ul>
  <li>“저는 수포자라서 그래프 싫은데요?”</li>
  <li>일반적인 상황에서 쓰는 DB는 관계형 DB인데 이것보다 조금 더 자유로운게 Document Database이다.</li>
  <li>MongoDB, CouchDB, Firestore 등이 유명함
<img src="../../assets/img/img-folder/document%20database.png" alt="database image" /><br /></li>
  <li>예를들면, Collection이라는 폴더를 만들면 그 안에 document라는 파일들을 만들어서 그 파일안에 JSON 형태로 데이터를 저장할 수 있게 되어있다.</li>
  <li>관계형 DB와 다르게 어떤 데이터를 저장할 지 미리 정의해 둘 필요도 없고, 갑자기 연락처를 추가한다던지 구조가 바뀌어도 문제가 없다.
<img src="../../assets/img/img-folder/document%20database2.png" alt="database image" /><br /></li>
  <li>정규화따윈 하지 않는다. 그래서 데이터 입출력 문법이 훨씬 간단하다. 
<img src="../../assets/img/img-folder/document%20database3.png" alt="database image" /><br /></li>
  <li>대부분 분산을 염두해두고 만든 데이터베이스이기 떄문에 데이터베이스를 분산시키는게 매우 쉽다.</li>
  <li>데이터 입출력이 매우 많은 SNS, 실시간채팅, 게시판, 온라인게임 등에 자주 사용한다.</li>
  <li>분산하면 물론 단점도 있다. DB간의 정확도가 떨어질 수 있다.</li>
</ul>

<h2 id="column-family-database">Column-Family Database</h2>
<ul>
  <li>나는 관계형 DB와 같이 표 형식으로 저장하고 싶은데 좀 유연하게 쓰고싶다? Column-Family Database 쓰면 됨
<img src="/assets/img/img-folder/column-family.png" alt="database image" /><br /></li>
  <li>카산드라, 구글의 BigTable 같은게 있다.
<img src="/assets/img/img-folder/column-family2.png" alt="database image" /><br /></li>
  <li>해당 DB들은 똑같이 테이블을 만들고, row를 여러개 만들고 자유롭게 column을 만들어서 데이터를 기입. 행마다 컬럼이 달라도 아무 문제가 없다.</li>
  <li>데이터 입출력을 할려면 SQL이 아니라 자기들이 만든 언어를 이용해야한다.</li>
  <li>얘네도 정규화따윈 안한다. 데이터 입출력이 매우 쉽다.</li>
  <li>복제, 분산 잘함. 그래서 많은 입출력을 감당해야할 때 얘네를 쓰는 경우가 있다.</li>
  <li>Document Database와 마찬가지로 분산하면 단점으로 데이터 정확도(일관성)이 떨어진다.</li>
  <li>가끔 데이터 저장할 때 시간 기록같은걸 되게 쉽게 해주는 기능이 있어서 시계열 데이터 저장하고 분석할때 이 DB들을 쓰는 경우가 있다. Netflix에서 님 시청기록 이걸로 분석함.</li>
</ul>

<h2 id="search-engine">Search Engine</h2>
<ul>
  <li>검색용 인덱스를 저장하기 위한 데이터베이스도 존재한다.
<img src="../../assets/img/img-folder/search%20engine.png" alt="database image" /><br /></li>
  <li>엘라스틱 서치, 아마존 클라우드서치 등이 있다.</li>
  <li>일반적인 데이터베이스로도 사용이 가능하긴 한데 실제로 그러지는 않음.</li>
  <li>Index 보관용으로 주로 사용함. 인덱스는 데이터의 빠른 검색을 도와주는 색인, 목차라고 생각하면 된다.</li>
  <li>기존 DB에서 데이터를 뽑아서 여기에 저장을 하면, 인덱스를 생성하고 보관해주는 역할을 한다.</li>
  <li>검색 요청이 들어오면 인덱스를 활용해서 자료를 쉽게 검색하게 도와준다.</li>
  <li>실시간 검색어, 추천 검색어, 검색어 오타교정 과 같은 부가적인 기능들도 쉽게 만들 수 있게 해준다.</li>
  <li>검색이 중요한 사이트를 만들때 이런걸 쓴다.
<img src="../../assets/img/img-folder/search%20engine%202.png" alt="database image" /><br />
<img src="../../assets/img/img-folder/search%20engine%203.png" alt="database image" /><br /></li>
</ul>

<h2 id="3줄요약좀">3줄요약좀</h2>
<ul>
  <li>일반적인 용도는 Relations Database, Document Database 둘 중 하나 골라서 쓰면 됨.</li>
  <li>정확도 필요없고 입출력이 너무 많으면 Document Database, 정확도와 일관성이 중요하면 Relations Database가 일반적</li>
  <li>(확장 방법에 따라 아닐 수도 있음 ㅋ)</li>
</ul>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="database" /><summary type="html"><![CDATA['새로운 서비스를 만들거나 개발자 취업용으로 공부를 하려면 데이터베이스를 하나 골라야 하는데 종류가 너무 많아서 뭘 골라야할지 모르겠다? 이번기회에 다 정리해보자']]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://piemonte93.github.io/assets/img/img-folder/database-icon.jpg" /><media:content medium="image" url="https://piemonte93.github.io/assets/img/img-folder/database-icon.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">기술면접 준비 V2</title><link href="https://piemonte93.github.io/theory/2025-04-15-theory-post2/" rel="alternate" type="text/html" title="기술면접 준비 V2" /><published>2025-04-15T00:32:40+00:00</published><updated>2025-04-15T00:32:40+00:00</updated><id>https://piemonte93.github.io/theory/theory-post2</id><content type="html" xml:base="https://piemonte93.github.io/theory/2025-04-15-theory-post2/"><![CDATA[<hr />

<h2 id="1-プログラミング共通">1. プログラミング共通</h2>

<ul>
  <li>
    <p><strong>Restful APIとは？</strong>
Restful APIとは、Webサービスを構築するための設計原則のセットです。HTTPメソッド（GET, POST, PUT, DELETEなど）を使用してリソースを操作し、ステートレスな通信を行うことを特徴とします。これにより、異なるプラットフォーム間での連携が容易になります。</p>
  </li>
  <li>
    <p><strong>CORS(Cross-Origin Resource Sharing)</strong>
CORSとは、異なるオリジン（ドメイン、プロトコル、ポート番号の組み合わせ）を持つリソースへのアクセスを制限するセキュリティメカニズムです。通常、Webブラウザは同一オリジンポリシーに従い、異なるオリジンからのリクエストをブロックしますが、CORSを設定することで、特定のオリジンからのアクセスを許可できます。</p>
  </li>
  <li>
    <p><strong>手続き型プログラミングとオブジェクト指向プログラミングの違い</strong>
手続き型プログラミングは、一連の処理手順を記述することに焦点を当てます。データと処理は分離されており、プログラムは上から順に実行されます。一方、オブジェクト指向プログラミングは、データ（属性）と処理（メソッド）をまとめた「オブジェクト」を中心にプログラムを構成します。これにより、コードの再利用性、保守性、拡張性が向上します。</p>
  </li>
  <li>
    <p><strong>対称キーと非対称キー暗号化方式</strong>
対称キー暗号化方式では、暗号化と復号化に同じ秘密鍵を使用します。処理速度が速いという利点がありますが、鍵の受け渡しを安全に行う必要があります。一方、非対称キー暗号化方式では、公開鍵と秘密鍵のペアを使用します。公開鍵で暗号化されたデータは、対応する秘密鍵でのみ復号化できます。鍵の受け渡しが容易ですが、処理速度は対称キー方式に比べて遅くなります。</p>
  </li>
  <li>
    <p><strong>TDD(Test Driven Development)の概念</strong>
TDDとは、テスト駆動開発の略で、実装コードを書く前にテストコードを書く開発手法です。具体的には、「レッド（失敗するテストを書く）→グリーン（テストが成功するように実装する）→リファクタリング（コードを改善する）」というサイクルを繰り返します。これにより、品質の高いコードを効率的に開発できます。</p>
  </li>
  <li><strong>テストコードを作成する理由</strong>
テストコードを作成する主な理由は、以下の通りです。
    <ul>
      <li>品質向上: バグを早期に発見し、品質の高いソフトウェアを開発できます。</li>
      <li>リファクタリングの安全性: コードを変更する際に、既存の機能が壊れていないことを確認できます。</li>
      <li>仕様の明確化: テストコードは、コードの動作や期待される振る舞いを明確にする役割も果たします。</li>
      <li>開発効率の向上: テストを自動化することで、手動テストの時間を削減し、開発効率を向上させます。</li>
    </ul>
  </li>
  <li>
    <p><strong>MSA(Microservice Architecture)のメリットとデメリット</strong>
MSAとは、アプリケーションを独立した小さなサービス（マイクロサービス）の集合として構築するアーキテクチャスタイルです。</p>

    <p><strong>メリット:</strong></p>
    <ul>
      <li>技術的多様性: 各サービスは異なる技術スタックで開発・運用できます。</li>
      <li>独立したデプロイ: 各サービスは独立してデプロイできるため、一部の障害が全体に影響を与えにくいです。</li>
      <li>スケーラビリティ: 各サービスは必要に応じて個別にスケールできます。</li>
      <li>開発チームの自律性: 各サービスは独立したチームによって開発・運用できます。</li>
    </ul>

    <p><strong>デメリット:</strong></p>
    <ul>
      <li>複雑性の増加: サービス間の連携や管理が複雑になります。</li>
      <li>ネットワーク遅延: サービス間の通信によるオーバーヘッドが発生する可能性があります。</li>
      <li>分散トレーシングの困難さ: 複数のサービスにまたがる処理の追跡が難しくなります。</li>
      <li>一貫性の維持: 複数のデータベースにまたがるトランザクション管理が複雑になります。</li>
    </ul>
  </li>
  <li>
    <p><strong>最近読んだ技術関連の本の名前と印象深かった部分を話してください</strong>
（例）最近読んだ技術書は「Domain-Driven Design: Tackling Complexity in the Heart of Software」です。特に印象深かったのは、ドメインエキスパートとの協調を通じて、ソフトウェアのモデルを洗練させていくプロセスです。ユビキタス言語の重要性や、境界づけられたコンテキストの概念は、複雑なビジネスロジックを扱う上で非常に役立つと感じました。</p>
  </li>
  <li>
    <p><strong>本人が使用した技術とその理由、代替技術があれば話してください</strong>
（例）私は主にJavaとSpring Frameworkを使用してWebアプリケーション開発を行ってきました。Spring Frameworkを選んだ理由は、DI（依存性注入）やAOP（アスペクト指向プログラミング）などの機能が豊富で、エンタープライズレベルのアプリケーション開発に適していると考えたからです。代替技術としては、軽量なフレームワークであるMicronautやQuarkusなども検討できると思います。これらは起動速度が速く、クラウドネイティブな環境に適していると言われています。</p>
  </li>
  <li>
    <p><strong>ビジネスロジックを作成する際、どのレベルで作成するか、何を重要視するか話してください</strong>
ビジネスロジックを作成する際は、まずビジネス要件を正確に理解することを最も重要視します。その上で、可読性、保守性、拡張性を考慮し、適切なレベルで実装します。具体的には、複雑なロジックはクラスやメソッドに分割し、役割を明確にします。また、テスト容易性を考慮し、外部依存性を少なくするよう心がけます。</p>
  </li>
  <li>
    <p><strong>新規技術を導入した事例があれば話してください</strong>
（例）以前のプロジェクトで、パフォーマンス改善のためにリアクティブプログラミングを取り入れたことがあります。具体的には、JavaのReactorというライブラリを使用して、非同期処理やイベント駆動型の処理を実装しました。これにより、大量のリクエストを効率的に処理できるようになり、アプリケーションの応答性が向上しました。導入にあたっては、チーム内で学習会を実施し、知識の共有を図りました。</p>
  </li>
  <li>
    <p><strong>プロジェクトを進める上で困難だった点があれば説明してください</strong>
（例）以前のプロジェクトでは、レガシーシステムとの連携に苦労しました。既存のシステムの仕様が不明確な部分が多く、連携方式も最新の技術とは異なっていたため、調査に多くの時間を費やしました。最終的には、既存システムの担当者と密に連携を取りながら、段階的に連携処理を実装していくことで解決しました。</p>
  </li>
  <li><strong>今後、積み重ねたり経験したい開発者としてのキャリアがあれば話してください</strong>
今後、私はクラウドネイティブな環境での開発経験を深めたいと考えています。具体的には、KubernetesやDockerなどのコンテナ技術や、AWSやAzureなどのクラウドプラットフォームの知識・スキルを習得したいです。また、技術的な専門性を高めるだけでなく、チームをリードできるようなエンジニアを目指したいと考えています。</li>
</ul>

<h2 id="2-javaプログラミング">2. Javaプログラミング</h2>

<ul>
  <li><strong>Javaメモリ構造</strong>
Javaのメモリ構造は、主に以下の領域に分けられます。
    <ul>
      <li>ヒープ領域: オブジェクトが生成される領域。ガーベジコレクションの対象となります。</li>
      <li>スタック領域: メソッドの呼び出しやローカル変数などが格納される領域。スレッドごとに存在します。</li>
      <li>メソッド領域: クラス情報や静的変数、定数などが格納される領域。</li>
      <li>ネイティブメソッドスタック: Java以外の言語で記述されたネイティブメソッドの実行に使われる領域。</li>
      <li>プログラムカウンタレジスタ: 現在実行中の命令のアドレスを保持する領域。スレッドごとに存在します。</li>
    </ul>
  </li>
  <li><strong>Javaプログラミング言語の主な特徴は？</strong>
Javaの主な特徴は以下の通りです。
    <ul>
      <li>オブジェクト指向: クラスとオブジェクトの概念に基づいたプログラミングが可能です。</li>
      <li>プラットフォーム非依存性: JVM（Java Virtual Machine）上で動作するため、OSに依存しません。「Write Once, Run Anywhere」という特徴を持ちます。</li>
      <li>豊富なAPI: 標準ライブラリが充実しており、様々な機能を利用できます。</li>
      <li>ガーベジコレクション: メモリ管理を自動で行うため、プログラマが明示的にメモリを解放する必要がありません。</li>
      <li>マルチスレッド: 複数の処理を同時に実行するマルチスレッドプログラミングが容易です。</li>
      <li>高いセキュリティ: バイトコード検証などの仕組みにより、セキュリティが高いとされています。</li>
    </ul>
  </li>
  <li><strong>Javaの基本データ型は何がありますか</strong>
Javaの基本データ型は以下の通りです。
    <ul>
      <li>整数型: <code class="language-plaintext highlighter-rouge">byte</code>, <code class="language-plaintext highlighter-rouge">short</code>, <code class="language-plaintext highlighter-rouge">int</code>, <code class="language-plaintext highlighter-rouge">long</code></li>
      <li>浮動小数点型: <code class="language-plaintext highlighter-rouge">float</code>, <code class="language-plaintext highlighter-rouge">double</code></li>
      <li>文字型: <code class="language-plaintext highlighter-rouge">char</code></li>
      <li>論理型: <code class="language-plaintext highlighter-rouge">boolean</code></li>
    </ul>
  </li>
  <li>
    <p><strong>Wrapper Classとは何であり、BoxingとUnBoxingの意味は？</strong>
Wrapper Classとは、基本データ型をオブジェクトとして扱うためのクラスです。例えば、<code class="language-plaintext highlighter-rouge">int</code>型のラッパークラスは<code class="language-plaintext highlighter-rouge">Integer</code>クラスです。</p>

    <ul>
      <li><strong>Boxing:</strong> 基本データ型の値を対応するラッパークラスのインスタンスに変換することです。（例：<code class="language-plaintext highlighter-rouge">Integer i = 10;</code>）</li>
      <li><strong>Unboxing:</strong> ラッパークラスのインスタンスから基本データ型の値を取り出すことです。（例：<code class="language-plaintext highlighter-rouge">int value = i;</code>）</li>
    </ul>

    <p>Java 5以降では、これらの変換は自動的に行われるため、オートボクシング、オートアンボクシングと呼ばれます。</p>
  </li>
  <li>
    <p><strong>リフレクション(Reflection)とは</strong>
リフレクションとは、実行時にクラスやオブジェクトの情報を取得したり、操作したりする機能です。これにより、コンパイル時には不明だったクラスのメソッドを呼び出したり、フィールドの値を変更したりすることができます。柔軟性の高いプログラミングが可能になりますが、パフォーマンスが低下する可能性があるため、注意が必要です。</p>
  </li>
  <li><strong>CheckedExceptionとUnCheckedExceptionの違いは？</strong>
    <ul>
      <li><strong>CheckedException:</strong> コンパイル時に例外処理が必須となる例外です。<code class="language-plaintext highlighter-rouge">IOException</code>や<code class="language-plaintext highlighter-rouge">SQLException</code>などが該当します。これらの例外が発生する可能性のあるコードは、<code class="language-plaintext highlighter-rouge">try-catch</code>ブロックで囲むか、メソッドの<code class="language-plaintext highlighter-rouge">throws</code>句で宣言する必要があります。</li>
      <li><strong>UnCheckedException:</strong> コンパイル時には例外処理が強制されない例外です。<code class="language-plaintext highlighter-rouge">RuntimeException</code>とそのサブクラス（<code class="language-plaintext highlighter-rouge">NullPointerException</code>, <code class="language-plaintext highlighter-rouge">ArrayIndexOutOfBoundsException</code>など）や<code class="language-plaintext highlighter-rouge">Error</code>などが該当します。これらの例外は、プログラマのミスによって発生することが多いため、事前に防ぐことが推奨されます。</li>
    </ul>
  </li>
  <li><strong>オブジェクト指向プログラミングの四つの基本原則は何ですか？</strong>
オブジェクト指向プログラミングの四つの基本原則は以下の通りです。
    <ul>
      <li>抽象化</li>
      <li>カプセル化</li>
      <li>継承</li>
      <li>ポリモーフィズム</li>
    </ul>
  </li>
  <li>
    <p><strong>staticキーワードの使用例とその意味は何ですか？</strong>
<code class="language-plaintext highlighter-rouge">static</code>キーワードは、クラスに属するメンバ（フィールドやメソッド）を定義するために使用されます。</p>

    <p><strong>使用例:</strong></p>
    <ul>
      <li><code class="language-plaintext highlighter-rouge">static int count = 0;</code> (静的フィールド: クラスのすべてのインスタンスで共有される変数)</li>
      <li><code class="language-plaintext highlighter-rouge">static void printMessage(String message) { ... }</code> (静的メソッド: クラスのインスタンスを作成せずに直接呼び出すことができるメソッド)</li>
      <li><code class="language-plaintext highlighter-rouge">static { ... }</code> (静的イニシャライザ: クラスがロードされる際に一度だけ実行されるブロック)</li>
    </ul>

    <p><strong>意味:</strong>
<code class="language-plaintext highlighter-rouge">static</code>メンバは、クラスの個々のインスタンスではなく、クラス自体に関連付けられます。つまり、クラスのすべてのインスタンスで同じ値を共有したり、インスタンスを作成せずにメソッドを呼び出したりすることができます。</p>
  </li>
  <li>
    <p><strong>ガーベジコレクション(Garbage Collection)はどのように動作しますか？</strong>
ガーベジコレクションは、Javaのヒープ領域に存在する不要になったオブジェクト（どの変数からも参照されなくなったオブジェクト）を自動的に解放する仕組みです。具体的な動作はJVMの実装によって異なりますが、一般的には以下の手順で行われます。</p>

    <ol>
      <li><strong>マーキング:</strong> どのオブジェクトがまだ使用されているか（reachable）を識別します。</li>
      <li><strong>スイーピング:</strong> 使用されていないオブジェクト（unreachable）をヒープ領域から削除します。</li>
      <li><strong>コンパクション:</strong> 必要に応じて、断片化したメモリ領域を整理し、連続した空き領域を確保します。</li>
    </ol>

    <p>近年のJVMでは、世代別ガーベジコレクションなどのより高度なアルゴリズムが採用されており、効率的なメモリ管理が行われています。</p>
  </li>
  <li><strong>配列とArrayListの違いは何ですか？</strong></li>
</ul>

<p><img src="/assets/img/img-folder/array-arraylist2.png" alt="Array-Arraylist image" /><br /></p>

<ul>
  <li>
    <p><strong>try-with-resources文はどのような場合に使用されますか？</strong>
<code class="language-plaintext highlighter-rouge">try-with-resources</code>文は、<code class="language-plaintext highlighter-rouge">AutoCloseable</code>インターフェースを実装したリソース（例えば、ファイルストリーム、データベース接続など）を安全に扱うために使用されます。<code class="language-plaintext highlighter-rouge">try</code>ブロックを抜ける際に、リソースの<code class="language-plaintext highlighter-rouge">close()</code>メソッドが自動的に呼び出されるため、明示的にクローズ処理を行う必要がなくなり、リソースリークを防ぐことができます。</p>
  </li>
  <li>
    <p><strong>interfaceとabstract classの違いは何ですか？</strong></p>
  </li>
</ul>

<p><img src="/assets/img/img-folder/abstract-interface2.png" alt="difference interface and abstract image" /><br /></p>

<ul>
  <li><strong>==演算子と.equals()メソッドの違いは何ですか？</strong>
    <ul>
      <li><strong>==演算子:</strong>
        <ul>
          <li>基本データ型の場合：値が等しいかどうかを比較します。</li>
          <li>参照型の場合：メモリ上の参照先（オブジェクトの場所）が同じかどうかを比較します。</li>
        </ul>
      </li>
      <li><strong>.equals()メソッド:</strong>
        <ul>
          <li><code class="language-plaintext highlighter-rouge">Object</code>クラスで定義されており、デフォルトでは<code class="language-plaintext highlighter-rouge">==</code>演算子と同じ動作をします。</li>
          <li>多くのクラス（<code class="language-plaintext highlighter-rouge">String</code>, <code class="language-plaintext highlighter-rouge">Integer</code>など）では、オブジェクトの内容（値）が等しいかどうかを比較するようにオーバーライドされています。</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <p><strong>相続とは何ですか？</strong>
相続とは、既存のクラス（親クラスまたはスーパークラス）の特性（属性やメソッド）を別の新しいクラス（子クラスまたはサブクラス）が受け継ぐことです。これにより、コードの再利用性が高まり、既存の機能を拡張したり、特殊化したりすることができます。</p>
  </li>
  <li><strong>オーバーロードとオーバーライドの違いは何ですか？</strong>
    <ul>
      <li><strong>オーバーロード:</strong> 同じクラス内で、メソッド名が同じで引数の型や数が異なるメソッドを複数定義することです。コンパイラは、呼び出し時の引数の情報に基づいて、適切なメソッドを選択します。</li>
      <li><strong>オーバーライド:</strong> 親クラスから継承したメソッドを、子クラスで同じ名前、同じ引数の型と数で再定義することです。これにより、子クラスは親クラスのメソッドの動作を独自に変更できます。</li>
    </ul>
  </li>
  <li><strong>例外処理でtry, catch, finallyブロックの役割は何ですか？</strong>
    <ul>
      <li><strong>tryブロック:</strong> 例外が発生する可能性のあるコードを記述します。</li>
      <li><strong>catchブロック:</strong> <code class="language-plaintext highlighter-rouge">try</code>ブロック内で発生した特定の例外を捕捉し、その例外に対する処理を記述します。複数の<code class="language-plaintext highlighter-rouge">catch</code>ブロックを記述して、異なる種類の例外を処理できます。</li>
      <li><strong>finallyブロック:</strong> 例外が発生しても、しなくても、必ず実行されるコードを記述します。通常、リソースの解放処理などを行います。</li>
    </ul>
  </li>
  <li><strong>final, finally, finalizeの違いは何ですか？</strong>
    <ul>
      <li><strong>final:</strong>
        <ul>
          <li>クラスに付与された場合：そのクラスは継承できません。</li>
          <li>メソッドに付与された場合：そのメソッドはオーバーライドできません。</li>
          <li>変数に付与された場合：その変数は一度だけ値を代入でき、その後は値を変更できません（定数）。</li>
        </ul>
      </li>
      <li>
        <p><strong>finally:</strong> <code class="language-plaintext highlighter-rouge">try-catch</code>ブロック内で使用され、例外の発生有無にかかわらず、必ず実行される処理を記述するブロックです。</p>
      </li>
      <li><strong>finalize:</strong> <code class="language-plaintext highlighter-rouge">Object</code>クラスで定義されているメソッドで、ガーベジコレクタによってオブジェクトが破棄される直前に一度だけ呼び出されます。ただし、<code class="language-plaintext highlighter-rouge">finalize</code>メソッドの動作は予測不可能であり、非推奨とされています。代わりに、<code class="language-plaintext highlighter-rouge">try-with-resources</code>文や明示的なクローズ処理を使用することが推奨されます。</li>
    </ul>
  </li>
  <li>
    <p><strong>コレクションフレームワークとは何ですか？</strong>
コレクションフレームワークとは、複数のオブジェクトを効率的に格納、管理するためのクラスやインターフェースの集まりです。Javaのコレクションフレームワークは、<code class="language-plaintext highlighter-rouge">List</code>（順序あり、重複あり）、<code class="language-plaintext highlighter-rouge">Set</code>（順序なし、重複なし）、<code class="language-plaintext highlighter-rouge">Map</code>（キーと値のペア）などの主要なインターフェースと、それらを実装する様々なクラス（<code class="language-plaintext highlighter-rouge">ArrayList</code>, <code class="language-plaintext highlighter-rouge">LinkedList</code>, <code class="language-plaintext highlighter-rouge">HashSet</code>, <code class="language-plaintext highlighter-rouge">HashMap</code>など）を提供します。</p>
  </li>
  <li><strong>HashMapとHashTableの違いは何ですか？</strong></li>
</ul>

<p><img src="/assets/img/img-folder/hashmap-hashtable.png" alt="difference HashMap and HashTable image" /><br /></p>

<ul>
  <li>
    <p><strong>同期化(Synchronization)の目的は何ですか？</strong>
同期化の目的は、複数のスレッドが共有リソース（例えば、変数やオブジェクト）に同時にアクセスする際に発生する可能性のある競合状態を防ぎ、データの整合性を保つことです。Javaでは、<code class="language-plaintext highlighter-rouge">synchronized</code>キーワードや<code class="language-plaintext highlighter-rouge">java.util.concurrent</code>パッケージのクラスを使用して同期化を実現します。</p>
  </li>
  <li><strong>ジェネリック(Generic)の利点は何ですか？</strong>
ジェネリックの主な利点は以下の通りです。
    <ul>
      <li>型安全性: コンパイル時に型チェックが行われるため、実行時の<code class="language-plaintext highlighter-rouge">ClassCastException</code>などのエラーを未然に防ぐことができます。</li>
      <li>コードの再利用性: 型パラメータを使用することで、様々な型のオブジェクトを扱うことができる汎用的なクラスやメソッドを作成できます。</li>
      <li>可読性の向上: コードを読む際に、どのような型のオブジェクトを扱っているかが明確になり、可読性が向上します。</li>
    </ul>
  </li>
  <li><strong>同期化ブロック(Synchronized Block)と同期化メソッド(Synchronized Method)の違いは何ですか？</strong>
    <ul>
      <li><strong>同期化メソッド:</strong> メソッド全体を同期化します。メソッドの宣言に<code class="language-plaintext highlighter-rouge">synchronized</code>キーワードを付与します。これにより、そのメソッドを実行できるスレッドは一つだけになります。</li>
      <li><strong>同期化ブロック:</strong> メソッドの一部分だけを同期化します。<code class="language-plaintext highlighter-rouge">synchronized</code>キーワードと同期化対象となるオブジェクト（通常は<code class="language-plaintext highlighter-rouge">this</code>または共有オブジェクト）を指定します。これにより、指定されたオブジェクトに対するロックを取得したスレッドだけが、そのブロック内のコードを実行できます。</li>
    </ul>

    <p>一般的に、同期化ブロックの方が同期化の範囲を限定できるため、パフォーマンスの観点からはより柔軟な制御が可能です。</p>
  </li>
  <li><strong>Java 8で追加されたラムダ式(Lambda Expression)の利点と使用例は何ですか？</strong>
ラムダ式の利点は以下の通りです。
    <ul>
      <li>簡潔なコード: 匿名内部クラスよりも簡潔に記述できます。</li>
      <li>関数型プログラミングのサポート: 関数を第一級オブジェクトとして扱えるようになり、関数型プログラミングのスタイルを取り入れやすくなります。</li>
      <li>並行処理の容易化: ストリームAPIなどと組み合わせて使用することで、並行処理をより簡単に記述できます。</li>
    </ul>

    <p><strong>使用例:</strong></p>
    <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// 匿名内部クラス</span>
<span class="nc">Runnable</span> <span class="n">runnable1</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Runnable</span><span class="o">()</span> <span class="o">{</span>
    <span class="nd">@Override</span>
    <span class="kd">public</span> <span class="kt">void</span> <span class="nf">run</span><span class="o">()</span> <span class="o">{</span>
        <span class="nc">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="s">"Hello from anonymous inner class!"</span><span class="o">);</span>
    <span class="o">}</span>
<span class="o">};</span>

<span class="c1">// ラムダ式</span>
<span class="nc">Runnable</span> <span class="n">runnable2</span> <span class="o">=</span> <span class="o">()</span> <span class="o">-&gt;</span> <span class="nc">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="s">"Hello from lambda expression!"</span><span class="o">);</span>

<span class="n">runnable1</span><span class="o">.</span><span class="na">run</span><span class="o">();</span>
<span class="n">runnable2</span><span class="o">.</span><span class="na">run</span><span class="o">();</span>
</code></pre></div>    </div>
  </li>
  <li><strong>ストリーム(Stream) APIはどのような目的で使用されますか？</strong>
ストリームAPIは、コレクションなどのデータソースに対して、<code class="language-plaintext highlighter-rouge">filter</code>（フィルタリング）、<code class="language-plaintext highlighter-rouge">map</code>（変換）、<code class="language-plaintext highlighter-rouge">reduce</code>（集約）などの操作をパイプライン処理で行うためのAPIです。主な目的は以下の通りです。
    <ul>
      <li>簡潔なコード: 複雑なデータ処理をより簡潔に記述できます。</li>
      <li>高いパフォーマンス: 内部的に最適化されており、並行処理も容易に行えます。</li>
      <li>遅延評価: 終端操作が実行されるまで中間操作は評価されないため、効率的な処理が可能です。</li>
    </ul>
  </li>
  <li>
    <p><strong>Optionalクラスの目的と使用法は何ですか？</strong>
<code class="language-plaintext highlighter-rouge">Optional</code>クラスは、値が存在しない可能性のある変数を扱うためのクラスです。nullチェックを明示的に行う必要がなくなり、<code class="language-plaintext highlighter-rouge">NullPointerException</code>の発生を抑制することができます。</p>

    <p><strong>使用法:</strong></p>
    <ul>
      <li>値が存在する場合：<code class="language-plaintext highlighter-rouge">Optional.of(value)</code></li>
      <li>値が存在しない可能性がある場合：<code class="language-plaintext highlighter-rouge">Optional.ofNullable(value)</code></li>
      <li>空のOptionalオブジェクトを作成する場合：<code class="language-plaintext highlighter-rouge">Optional.empty()</code></li>
    </ul>

    <p>値を取得する際には、<code class="language-plaintext highlighter-rouge">orElse()</code>, <code class="language-plaintext highlighter-rouge">orElseGet()</code>, <code class="language-plaintext highlighter-rouge">orElseThrow()</code>などのメソッドを使用して、値が存在しない場合の処理を指定します。また、<code class="language-plaintext highlighter-rouge">isPresent()</code>メソッドで値が存在するかどうかを確認することもできます。</p>
  </li>
</ul>

<h2 id="3-ネットワーク">3. ネットワーク</h2>

<ul>
  <li>
    <p><strong>HTTPプロトコル</strong>
HTTP（Hypertext Transfer Protocol）は、WebブラウザとWebサーバー間で情報をやり取りするためのプロトコルです。クライアント（通常はWebブラウザ）からのリクエストに応じて、サーバーがHTMLファイルや画像などのリソースをレスポンスとして返します。ステートレスなプロトコルであり、リクエストごとに独立して処理が行われます。</p>
  </li>
  <li>
    <p><strong>HTTPとHTTPSの違い</strong>
HTTPS（Hypertext Transfer Protocol Secure）は、HTTPにSSL/TLS（Secure Sockets Layer/Transport Layer Security）プロトコルを組み合わせて、通信を暗号化することでセキュリティを高めたプロトコルです。これにより、第三者による盗聴や改ざんを防ぐことができます。URLスキームは<code class="language-plaintext highlighter-rouge">http://</code>ではなく<code class="language-plaintext highlighter-rouge">https://</code>で始まり、通常は443番ポートを使用します。</p>
  </li>
  <li>
    <p><strong>クッキーとセッションの違い</strong></p>
  </li>
</ul>

<p><img src="/assets/img/img-folder/cookie-session.png" alt="difference cookie and session image" /><br /></p>

<ul>
  <li><strong>TCPとUDPの違い</strong></li>
</ul>

<p><img src="/assets/img/img-folder/tcp-udp.png" alt="difference TCP and UDP image" /><br /></p>

<ul>
  <li>
    <p><strong>OSI 7階層</strong>
OSI（Open Systems Interconnection）7階層モデルは、ネットワーク通信の機能を7つの階層に分割したモデルです。</p>

    <ol>
      <li>物理層</li>
      <li>データリンク層</li>
      <li>ネットワーク層</li>
      <li>トランスポート層</li>
      <li>セッション層</li>
      <li>プレゼンテーション層</li>
      <li>アプリケーション層</li>
    </ol>
  </li>
  <li><strong>HTTP Methodの種類</strong>
主なHTTPメソッドの種類は以下の通りです。
    <ul>
      <li>GET</li>
      <li>POST</li>
      <li>PUT</li>
      <li>DELETE</li>
      <li>PATCH</li>
      <li>HEAD</li>
      <li>OPTIONS</li>
    </ul>
  </li>
  <li><strong>GETとPOSTの違い</strong></li>
</ul>

<p><img src="/assets/img/img-folder/GET-POST.png" alt="difference GET and POST image" /><br /></p>

<ul>
  <li><strong>セッションベース認証とトークンベース認証の違い</strong></li>
</ul>

<p><img src="/assets/img/img-folder/session-token.png" alt="difference session and token image" /><br /></p>

<ul>
  <li><strong>Statefulなセッションベースの認証方式の欠点</strong>
Statefulなセッションベースの認証方式の主な欠点は以下の通りです。
    <ul>
      <li>スケーラビリティの課題</li>
      <li>サーバーのリソース消費</li>
      <li>ステートフルな依存関係</li>
    </ul>
  </li>
  <li><strong>セッションベース認証とトークンベース認証はどのような場合に適しているか</strong>
    <ul>
      <li><strong>セッションベース認証:</strong> 比較的小規模なアプリケーションや、サーバー側でユーザーの状態を厳密に管理する必要がある場合（例：ECサイトのカート情報など）。ステートレスな構成にする必要がない場合。</li>
      <li><strong>トークンベース認証:</strong> 大規模な分散システムやマイクロサービスアーキテクチャ。モバイルアプリケーションやシングルページアプリケーション（SPA）など、異なるオリジンからのアクセスが多い場合。サーバーのスケーラビリティが重要な場合。</li>
    </ul>
  </li>
  <li>
    <p><strong>JWTとは？</strong>
JWT（JSON Web Token）は、JSON形式で情報を安全に伝送するためのオープンスタンダードです。主に認証や認可のために使用されます。JWTは、ヘッダー（Header）、ペイロード（Payload）、署名（Signature）の3つの部分で構成されており、Base64エンコードされた文字列として表現されます。サーバーは秘密鍵または公開鍵を使用して署名を検証することで、トークンの信頼性を確認できます。</p>
  </li>
  <li><strong>公認IPと私設IPの違い</strong>
    <ul>
      <li><strong>公認IP（グローバルIP）:</strong> インターネット上で一意に識別されるIPアドレスです。インターネットに直接接続されたサーバーやルーターなどに割り当てられます。</li>
      <li><strong>私設IP（ローカルIP）:</strong> 特定のネットワーク内（家庭内LANや企業内LANなど）でのみ有効なIPアドレスです。ルーターなどによってプライベートネットワーク内で重複しないように割り当てられます。私設IPを持つデバイスがインターネットに接続する際には、NAT（Network Address Translation）などの技術によって公認IPに変換されます。</li>
    </ul>
  </li>
</ul>

<h2 id="4-データベース">4. データベース</h2>

<ul>
  <li><strong>データベースの特徴</strong>
データベースの主な特徴は以下の通りです。
    <ul>
      <li>データの永続性</li>
      <li>データの共有性</li>
      <li>データの独立性</li>
      <li>データの整合性</li>
      <li>データの冗長性の排除</li>
      <li>データのセキュリティ</li>
    </ul>
  </li>
  <li><strong>DDL, DML, DCL</strong>
    <ul>
      <li><strong>DDL (Data Definition Language):</strong> データベースの構造を定義するための言語です。<code class="language-plaintext highlighter-rouge">CREATE TABLE</code>, <code class="language-plaintext highlighter-rouge">ALTER TABLE</code>, <code class="language-plaintext highlighter-rouge">DROP TABLE</code>などが含まれます。</li>
      <li><strong>DML (Data Manipulation Language):</strong> データベースに格納されたデータを操作するための言語です。<code class="language-plaintext highlighter-rouge">SELECT</code>, <code class="language-plaintext highlighter-rouge">INSERT</code>, <code class="language-plaintext highlighter-rouge">UPDATE</code>, <code class="language-plaintext highlighter-rouge">DELETE</code>などが含まれます。</li>
      <li><strong>DCL (Data Control Language):</strong> データベースへのアクセス権限を制御するための言語です。<code class="language-plaintext highlighter-rouge">GRANT</code>, <code class="language-plaintext highlighter-rouge">REVOKE</code>などが含まれます。</li>
    </ul>
  </li>
  <li>
    <p><strong>トリガーとは？</strong>
トリガーとは、データベース内の特定のイベント（例えば、テーブルへのINSERT、UPDATE、DELETE操作など）が発生したときに、自動的に実行されるように定義された一連のSQL文です。データの整合性の維持や監査ログの記録などに使用されます。</p>
  </li>
  <li>
    <p><strong>Indexとは？</strong>
Indexとは、データベースのテーブル内の特定の列に対して作成されるデータ構造であり、データの検索速度を向上させるために使用されます。書籍の索引と同様に、Indexを使用することで、データベースはテーブル全体をスキャンする代わりに、Indexを参照して目的のデータを効率的に見つけることができます。ただし、Indexを作成すると、データの書き込み（INSERT, UPDATE, DELETE）処理にオーバーヘッドが発生するため、適切なIndex設計が重要です。</p>
  </li>
  <li>
    <p><strong>SQL Injectionとは？</strong>
SQL Injectionとは、Webアプリケーションなどの入力フォームを通じて、悪意のあるSQLコードをデータベースに注入する攻撃手法です。攻撃者は、意図しないSQLコマンドを実行したり、機密情報を不正に取得したりする可能性があります。対策としては、入力値のサニタイズやプリペアドステートメントの使用などが挙げられます。</p>
  </li>
  <li>
    <p><strong>ORMとは</strong>
ORM（Object-Relational Mapping）とは、オブジェクト指向プログラミング言語とリレーショナルデータベースの間で、データのやり取りを仲介する技術です。ORMを利用することで、開発者はデータベースのテーブルやレコードをオブジェクトとして扱うことができ、SQLを直接記述する手間を減らすことができます。JavaにおけるHibernateやJPA、PythonにおけるDjango ORMなどが代表的なORMフレームワークです。</p>
  </li>
  <li><strong>HavingとWhereの違い</strong>
<code class="language-plaintext highlighter-rouge">WHERE</code>句と<code class="language-plaintext highlighter-rouge">HAVING</code>句はどちらも検索条件を指定するために使用されますが、適用されるタイミングが異なります。
    <ul>
      <li><strong>WHERE句:</strong> グループ化（<code class="language-plaintext highlighter-rouge">GROUP BY</code>句）の前に、個々の行に対して条件を適用します。</li>
      <li><strong>HAVING句:</strong> グループ化（<code class="language-plaintext highlighter-rouge">GROUP BY</code>句）の後に、グループ化された結果に対して条件を適用します。</li>
    </ul>

    <p>つまり、<code class="language-plaintext highlighter-rouge">WHERE</code>句は行を絞り込むために使用し、<code class="language-plaintext highlighter-rouge">HAVING</code>句はグループ化された結果を絞り込むために使用します。</p>
  </li>
</ul>

<h2 id="5-スプリングスプリングブート">5. スプリング、スプリングブート</h2>

<ul>
  <li><strong>WAS(Web Application Server)とWS(Web Server)の違い</strong></li>
</ul>

<p><img src="/assets/img/img-folder/dif-was-ws2.png" alt="difference WAS and WS image" /><br /></p>

<ul>
  <li><strong>Spring Frameworkの特徴</strong>
Spring Frameworkの主な特徴は以下の通りです。
    <ul>
      <li>軽量かつ強力なフレームワーク</li>
      <li>IoC/DIコンテナ</li>
      <li>AOP (Aspect Oriented Programming)</li>
      <li>トランザクション管理</li>
      <li>豊富なモジュール</li>
      <li>テスト容易性</li>
    </ul>
  </li>
  <li><strong>@RequestBody, @RequestParam, @ModelAttributeの違い</strong>
これらのアノテーションは、Spring MVCコントローラーのメソッド引数で使用され、クライアントからのリクエストデータをバインドするために使用されます。
    <ul>
      <li><strong>@RequestBody:</strong> リクエストボディに含まれるJSONやXMLなどのデータをJavaオブジェクトに変換してバインドします。主にPOSTやPUTなどのリクエストで使用されます。</li>
      <li><strong>@RequestParam:</strong> URLのクエリパラメータやフォームデータとして送信されたデータをメソッド引数にバインドします。GETリクエストやフォーム送信などでよく使用されます。</li>
      <li><strong>@ModelAttribute:</strong> フォームデータやURLパラメータなどを、モデル（Modelオブジェクト）に格納し、Viewで利用できるようにします。通常、フォームの送信処理などで使用されます。</li>
    </ul>
  </li>
  <li><strong>Spring BootとSpring Frameworkの違い</strong></li>
</ul>

<p><img src="/assets/img/img-folder/dif-spring-springframework.png" alt="difference Spring Boot and Spring Framework image" /><br /></p>

<p>Spring Bootは、Spring Frameworkの利便性を高め、より簡単にWebアプリケーションやマイクロサービスを開発できるように設計されています。</p>

<ul>
  <li>
    <p><strong>Spring MVCとは？</strong>
Spring MVCは、Spring FrameworkのWebアプリケーション開発モジュールの一つであり、Model-View-Controller（MVC）デザインパターンを実装するためのフレームワークです。DispatcherServletをフロントコントローラーとして、リクエストのルーティング、ハンドラー（コントローラー）の実行、Viewのレンダリングなどを処理します。</p>
  </li>
  <li>
    <p><strong>制御の逆転(IoC, Inversion of Control)</strong>
制御の逆転（IoC）とは、オブジェクトの生成や依存関係の解決といった処理を、従来のプログラムコード内で行うのではなく、外部のコンテナ（Spring Frameworkなど）に委譲する設計原則です。これにより、オブジェクト間の依存関係が疎結合になり、コードの柔軟性、再利用性、テスト容易性が向上します。</p>
  </li>
  <li><strong>スプリングでBeanを登録する方法</strong>
SpringでBeanを登録する主な方法は以下の通りです。
    <ul>
      <li>XML設定 (<code class="language-plaintext highlighter-rouge">applicationContext.xml</code>など)</li>
      <li>アノテーション (<code class="language-plaintext highlighter-rouge">@Component</code>, <code class="language-plaintext highlighter-rouge">@Service</code>, <code class="language-plaintext highlighter-rouge">@Repository</code>, <code class="language-plaintext highlighter-rouge">@Controller</code>など)</li>
      <li>JavaConfig (<code class="language-plaintext highlighter-rouge">@Configuration</code>, <code class="language-plaintext highlighter-rouge">@Bean</code>)</li>
    </ul>
  </li>
  <li><strong>依存性注入(DI, Dependency Injection)の方法</strong>
依存性注入（DI）とは、オブジェクトが使用する他のオブジェクト（依存オブジェクト）を、オブジェクト自身が生成するのではなく、外部から注入（提供）してもらう設計パターンです。Spring Frameworkでは、主に以下の方法でDIを実現します。
    <ul>
      <li>コンストラクタインジェクション</li>
      <li>セッターインジェクション</li>
      <li>フィールドインジェクション</li>
    </ul>
  </li>
  <li>
    <p><strong>観点指向プログラミング(AOP, Aspect Oriented Programming)</strong>
観点指向プログラミング（AOP）とは、アプリケーションの横断的な関心事（例えば、ロギング、セキュリティ、トランザクション管理など）を、コアとなるビジネスロジックから分離して記述するためのプログラミングパラダイムです。Spring AOPでは、アスペクト（横断的な関心事）、アドバイス（具体的な処理）、ポイントカット（アドバイスを適用する場所）などの概念を用いてAOPを実現します。</p>
  </li>
  <li><strong>VO, DAO, DTO</strong>
これらの用語は、Javaのエンタープライズアプリケーション開発でよく使用されるデザインパターンに関連しています。
    <ul>
      <li><strong>VO (Value Object):</strong> 値オブジェクト。エンティティの属性などを表現する不変のオブジェクトです。</li>
      <li><strong>DAO (Data Access Object):</strong> データアクセスオブジェクト。データベースなどのデータソースへのアクセスを担当するオブジェクトです。</li>
      <li><strong>DTO (Data Transfer Object):</strong> データ転送オブジェクト。異なるレイヤー間でデータを転送するために使用されるオブジェクトです。</li>
    </ul>
  </li>
  <li>
    <p><strong>シングルトンパターンとは？</strong>
シングルトンパターンとは、あるクラスのインスタンスが一つしか存在しないことを保証するデザインパターンです。グローバルな設定情報やリソース管理など、アプリケーション全体で唯一のインスタンスが必要な場合に利用されます。Spring Frameworkでは、Beanのデフォルトのスコープはシングルトンです。</p>
  </li>
  <li>
    <p><strong>JPA, MyBatisなどでN+1問題の意味と発生する理由は？</strong>
N+1問題とは、ORM（JPA, MyBatisなど）を使用して関連する複数のエンティティをロードする際に、最初のクエリでN個のエンティティを取得した後、それぞれのエンティティに関連するデータを取得するために追加でN個のクエリが発行されてしまう現象です。</p>

    <p><strong>発生する理由:</strong>
遅延ロード（Lazy Loading）の設定がされている場合に、関連エンティティへのアクセスが発生するたびに、追加のSQLクエリが発行されるためです。</p>

    <p><strong>対策:</strong></p>
    <ul>
      <li>Eager Loading</li>
      <li>Fetch Join</li>
      <li>Batch Fetch</li>
    </ul>
  </li>
</ul>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="theory" /><summary type="html"><![CDATA['일본 기업 기술면접 준비에 관한 정리 V2']]></summary></entry><entry><title type="html">기술면접 준비</title><link href="https://piemonte93.github.io/theory/2025-04-14-theory-post1/" rel="alternate" type="text/html" title="기술면접 준비" /><published>2025-04-14T00:32:40+00:00</published><updated>2025-04-14T00:32:40+00:00</updated><id>https://piemonte93.github.io/theory/theory-post1</id><content type="html" xml:base="https://piemonte93.github.io/theory/2025-04-14-theory-post1/"><![CDATA[<hr />

<h2 id="프로그래밍-공통">프로그래밍 공통</h2>

<h3 id="restful-api란">Restful API란?</h3>
<ul>
  <li>RESTful APIは、REST（Representational State Transfer）アーキテクチャに基づいたAPIです。リソースをURIで識別し、HTTP動詞（GET、POST、PUT、DELETE）を使用してリソースを操作します。ステートレスな通信、クライアントサーバー分離、キャッシュ可能性などの特徴があります。</li>
</ul>

<h3 id="corscross-origin-resource-sharing">CORS(Cross-Origin Resource Sharing)</h3>
<ul>
  <li>CORSは、あるオリジン（ドメイン）で実行中のウェブアプリケーションが、異なるオリジンのリソースにアクセスするための仕組みです。セキュリティ上の理由から、ブラウザは同一オリジンポリシーを実装していますが、CORSはこの制限を安全に緩和します。</li>
</ul>

<h3 id="절차지향-프로그래밍과-객체지향-프로그래밍의-차이">절차지향 프로그래밍과 객체지향 프로그래밍의 차이</h3>
<ul>
  <li>手続き型プログラミングは、プログラムをタスクの論理的な順序として構成し、関数やプロシージャを使用します。一方、オブジェクト指向プログラミングは、データとそれに対する操作をオブジェクトにカプセル化し、継承、多態性、カプセル化を通じて再利用性と保守性を高めます。</li>
</ul>

<h3 id="대칭키와-비대칭키-암호화-방식">대칭키와 비대칭키 암호화 방식</h3>
<ul>
  <li>対称鍵暗号方式は、暗号化と復号化に同じ鍵を使用します。処理が速いですが、鍵の安全な共有が課題です。非対称鍵暗号方式は、公開鍵と秘密鍵のペアを使用し、一方で暗号化したデータは他方でのみ復号できます。鍵配布の問題を解決しますが、計算コストが高いです。</li>
</ul>

<h3 id="tddtest-driven-development의-개념">TDD(Test Driven Development)의 개념</h3>
<ul>
  <li>TDDは、テストを先に書いてから実装を行う開発手法です。「テスト作成→失敗確認→実装→成功確認→リファクタリング」のサイクルを繰り返します。これにより、要件の明確化、バグの早期発見、保守性の向上などの利点があります。</li>
</ul>

<h3 id="테스트-코드를-작성하는-이유">테스트 코드를 작성하는 이유</h3>

<h3 id="msamicroservice-architecture의-장점과-단점">MSA(Microservice Architecture)의 장점과 단점</h3>
<ul>
  <li>長所
    <ol>
      <li>独立した開発・デプロイが可能</li>
      <li>技術スタックの柔軟な選択</li>
      <li>必要なサービスのみスケーリング可能</li>
      <li>障害の影響範囲を局所化</li>
      <li>コードの理解・保守が容易</li>
    </ol>
  </li>
  <li>短所
    <ol>
      <li>分散システム特有の複雑さ</li>
      <li>運用・監視の負担増加</li>
      <li>トランザクション管理が困難</li>
      <li>サービス間通信によるパフォーマンス低下</li>
      <li>適切なサービス境界設計の難しさ</li>
    </ol>
  </li>
</ul>

<h3 id="최근에-읽은-기술-관련-책-이름이-무엇이고-인상-깊었던-부분을-얘기해주세요">최근에 읽은 기술 관련 책 이름이 무엇이고 인상 깊었던 부분을 얘기해주세요</h3>

<h3 id="본인이-사용했던-기술들과-그-기술을-사용했던-이유에-대해-설명하고-대체-기술도-알고-있다면-얘기해주세요">본인이 사용했던 기술들과 그 기술을 사용했던 이유에 대해 설명하고, 대체 기술도 알고 있다면 얘기해주세요</h3>

<h3 id="비즈니스-로직을-작성할-때-어느-수준으로-작성하는지-무엇을-중요하게-생각하는지-얘기해주세요">비즈니스 로직을 작성할 때 어느 수준으로 작성하는지, 무엇을 중요하게 생각하는지 얘기해주세요</h3>

<ol>
  <li>重視すべき点
    <ul>
      <li>可読性と保守性</li>
      <li>ドメイン知識の正確な反映</li>
      <li>責務の明確な分離</li>
      <li>テスト容易性</li>
      <li>セキュリティ確保</li>
    </ul>
  </li>
  <li>実装レベル
    <ul>
      <li>単一責任の原則に従う</li>
      <li>適切な抽象化レベルを維持</li>
      <li>ビジネスルールとシステム処理の分離</li>
      <li>再利用可能なコンポーネント設計</li>
      <li>ビジネスロジックはアプリケーションの中核であり、長期的な価値と変更容易性を念頭に設計すべきです。</li>
    </ul>
  </li>
</ol>

<h3 id="신규-기술을-도입해본-사례가-있으면-얘기해주세요">신규 기술을 도입해본 사례가 있으면 얘기해주세요</h3>

<h3 id="프로젝트를-진행하면서-어려웠던-점이-있었다면-설명해-주세요">프로젝트를 진행하면서 어려웠던 점이 있었다면 설명해 주세요</h3>

<h3 id="앞으로-쌓거나-경험하고-싶은-개발자-커리어가-있다면-얘기해주세요">앞으로 쌓거나 경험하고 싶은 개발자 커리어가 있다면 얘기해주세요</h3>

<h2 id="자바-프로그래밍">자바 프로그래밍</h2>

<h3 id="java-메모리-구조">Java 메모리 구조</h3>
<ul>
  <li>Javaのメモリ構造は主に、ヒープ（オブジェクト格納）、スタック（メソッド呼び出しとローカル変数）、メソッドエリア（クラス情報）、PCレジスタ（実行中の命令アドレス）、ネイティブメソッドスタック（ネイティブコード用）に分かれています。</li>
</ul>

<h3 id="java-프로그래밍-언어의-주요-특징은">Java 프로그래밍 언어의 주요 특징은?</h3>

<ul>
  <li>プラットフォーム独立性：JVMを通じて「Write Once, Run Anywhere」を実現</li>
  <li>オブジェクト指向：カプセル化、継承、多態性をサポート</li>
  <li>自動メモリ管理：ガベージコレクションによるメモリリーク防止</li>
  <li>強力な型システム：コンパイル時の型チェックによる安全性</li>
  <li>マルチスレッド対応：並行処理の組み込みサポート</li>
  <li>セキュリティ機能：サンドボックス実行環境など</li>
  <li>豊富なライブラリ：標準APIと大規模なエコシステム</li>
  <li>堅牢性：例外処理や型安全性による信頼性の高いコード</li>
</ul>

<h3 id="java의-기본-데이터-타입은-무엇이-있나요">Java의 기본 데이터 타입은 무엇이 있나요</h3>
<ul>
  <li>Javaの基本データ型は8つあります：
    <ol>
      <li>整数型：byte（8ビット）、short（16ビット）、int（32ビット）、long（64ビット）</li>
      <li>浮動小数点型：float（32ビット）、double（64ビット）</li>
      <li>文字型：char（16ビット、Unicode）</li>
      <li>論理型：boolean（true/false）</li>
    </ol>
  </li>
</ul>

<h3 id="wrapper-class란-무엇이며-boxing와-unboxing의-의미는">Wrapper Class란 무엇이며, Boxing와 UnBoxing의 의미는?</h3>
<ol>
  <li>ラッパークラス（Wrapper Class）とは：
    <ul>
      <li>Javaのプリミティブ型（int、char、booleanなど）をオブジェクトとして扱うためのクラス</li>
      <li>例：Integer（int）、Character（char）、Boolean（boolean）、Double（double）など</li>
      <li>コレクション、ジェネリクス、nullを扱う場合など、オブジェクトが必要な場面で使用</li>
    </ul>
  </li>
  <li>ボクシング（Boxing）：
    <ul>
      <li>プリミティブ型の値をラッパークラスのオブジェクトに変換する処理</li>
      <li>例：int a = 10; → Integer obj = a;</li>
    </ul>
  </li>
  <li>アンボクシング（Unboxing）：
    <ul>
      <li>ラッパークラスのオブジェクトをプリミティブ型の値に変換する処理</li>
      <li>例：Integer obj = 10; → int a = obj;</li>
    </ul>
  </li>
  <li>オートボクシング/オートアンボクシング：
    <ul>
      <li>Java 5以降で導入された自動変換機能</li>
      <li>明示的な変換コードなしに、コンパイラが自動的に変換を行う</li>
      <li>例：Integer sum = 10 + new Integer(5);（自動的に変換処理が行われる）</li>
    </ul>
  </li>
</ol>

<h3 id="리플렉션reflection이란">리플렉션(Reflection)이란</h3>
<ul>
  <li>リフレクションとは、実行時にプログラムが自分自身のクラス、メソッド、フィールドなどの構造を調査し、操作できる機能です。</li>
</ul>

<ol>
  <li>主な特徴：
    <ul>
      <li>実行時にクラスの情報（メソッド、フィールド、コンストラクタなど）を取得可能</li>
      <li>プライベートメンバーへのアクセスも可能</li>
      <li>クラスをインスタンス化したり、メソッドを動的に実行可能</li>
      <li>アノテーションの情報を取得できる</li>
    </ul>
  </li>
  <li>用途：
    <ul>
      <li>フレームワーク開発（Spring、Hibernateなど）</li>
      <li>プラグイン機構の実装</li>
      <li>シリアライゼーション/デシリアライゼーション</li>
      <li>テストツールやデバッグツール</li>
    </ul>
  </li>
  <li>メリットとデメリット：
    <ul>
      <li>メリット：動的な処理、高い柔軟性、拡張性</li>
      <li>デメリット：パフォーマンスの低下、型安全性の喪失、セキュリティリスク</li>
    </ul>
  </li>
</ol>

<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">Class</span><span class="o">&lt;?&gt;</span> <span class="n">clazz</span> <span class="o">=</span> <span class="nc">MyClass</span><span class="o">.</span><span class="na">class</span><span class="o">;</span>
<span class="nc">Method</span> <span class="n">method</span> <span class="o">=</span> <span class="n">clazz</span><span class="o">.</span><span class="na">getDeclaredMethod</span><span class="o">(</span><span class="s">"privateMethod"</span><span class="o">);</span>
<span class="n">method</span><span class="o">.</span><span class="na">setAccessible</span><span class="o">(</span><span class="kc">true</span><span class="o">);</span>
<span class="n">method</span><span class="o">.</span><span class="na">invoke</span><span class="o">(</span><span class="n">instance</span><span class="o">);</span>
</code></pre></div></div>

<hr />

<h3 id="checkedexception와-uncheckedexception의-차이는">CheckedException와 UnCheckedException의 차이는?</h3>
<ul>
  <li>CheckedException（検査例外）: コンパイル時に検出される例外</li>
  <li>UncheckedException（非検査例外）: 実行時に検出される例外</li>
</ul>

<h3 id="객체-지향-프로그래밍의-네-가지-기본-원칙은-무엇인가">객체 지향 프로그래밍의 네 가지 기본 원칙은 무엇인가?</h3>
<ol>
  <li>カプセル化：データと操作をオブジェクト内に隠蔽</li>
  <li>継承：既存クラスの特性を新しいクラスに引き継ぐ</li>
  <li>多態性：同じインターフェースで異なる実装を提供</li>
  <li>抽象化：複雑さを隠し、本質的な特性だけを表現</li>
</ol>

<h3 id="static-키워드의-사용-예와-그-의미는-무엇인가">static 키워드의 사용 예와 그 의미는 무엇인가?</h3>
<ul>
  <li>staticキーワードは「クラスに属する」という意味を持ち、インスタンス化せずに使用できる要素を定義します。</li>
</ul>

<p>主な使用例と意味</p>
<ol>
  <li>staticフィールド（クラス変数）
    <ul>
      <li>全インスタンスで共有される変数</li>
      <li>インスタンス生成前にメモリ割り当て</li>
      <li>クラス名で直接アクセス可能
        <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code>   <span class="kd">public</span> <span class="kd">class</span> <span class="nc">Counter</span> <span class="o">{</span>
   <span class="kd">public</span> <span class="kd">static</span> <span class="kt">int</span> <span class="n">count</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span>
   <span class="o">}</span>
   <span class="c1">// 使用例: Counter.count++;</span>
</code></pre></div>        </div>
      </li>
    </ul>
  </li>
  <li>staticメソッド（クラスメソッド）
    <ul>
      <li>インスタンス化せずに呼び出し可能</li>
      <li>インスタンス変数やメソッドへの直接アクセス不可</li>
      <li>ユーティリティ関数に適している</li>
    </ul>
  </li>
</ol>

<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <span class="kd">public</span> <span class="kd">static</span> <span class="kt">int</span> <span class="nf">sum</span><span class="o">(</span><span class="kt">int</span> <span class="n">a</span><span class="o">,</span> <span class="kt">int</span> <span class="n">b</span><span class="o">)</span> <span class="o">{</span>
       <span class="k">return</span> <span class="n">a</span> <span class="o">+</span> <span class="n">b</span><span class="o">;</span>
   <span class="o">}</span>
   <span class="c1">// 使用例: int result = MyClass.sum(5, 3);</span>
</code></pre></div></div>
<ol>
  <li>staticブロック
    <ul>
      <li>クラスロード時に一度だけ実行される初期化ブロック</li>
      <li>静的変数の複雑な初期化に使用
        <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="kd">static</span> <span class="o">{</span>
   <span class="c1">// クラスロード時の初期化処理</span>
   <span class="o">}</span>
</code></pre></div>        </div>
      </li>
    </ul>
  </li>
  <li>staticクラス（内部クラス）
    <ul>
      <li>外部クラスのインスタンス化なしで使用できる内部クラス</li>
      <li>外部クラスのインスタンスメンバーにアクセス不可
        <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  <span class="kd">public</span> <span class="kd">static</span> <span class="kd">class</span> <span class="nc">InnerClass</span> <span class="o">{</span>
   <span class="c1">// 実装</span>
   <span class="o">}</span>
</code></pre></div>        </div>
      </li>
    </ul>
  </li>
  <li>staticインポート
    <ul>
      <li>静的メソッド/フィールドをクラス名なしで使用可能に
        <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code>   <span class="kn">import</span> <span class="nn">static</span> <span class="n">java</span><span class="o">.</span><span class="na">lang</span><span class="o">.</span><span class="na">Math</span><span class="o">.</span><span class="na">PI</span><span class="o">;</span>
   <span class="c1">// 使用例: double area = PI * radius * radius;</span>
</code></pre></div>        </div>
      </li>
    </ul>
  </li>
</ol>

<h3 id="가비지-컬렉션garbage-collection-어떻게-작동하는가">가비지 컬렉션(Garbage Collection) 어떻게 작동하는가?</h3>
<ul>
  <li>ガベージコレクション（GC）は、プログラムの実行中に不要になったオブジェクト（メモリ）を自動的に回収する仕組みです。これにより、メモリリークを防ぎ、効率的なメモリ管理が可能になります。</li>
</ul>

<p>代表的なアルゴリズムとしては、以下のようなものがあります：</p>

<ol>
  <li>参照カウント（Reference Counting）
    <ul>
      <li>各オブジェクトに参照されている数を保持し、その数がゼロになった場合、自動的にメモリが解放されます。</li>
    </ul>
  </li>
  <li>トレース方式（Tracing GC）
    <ul>
      <li>よく使われるのは「マークアンドスイープ（Mark and Sweep）」方式です。</li>
    </ul>
  </li>
</ol>

<p>まず、ルート（スタックやグローバル変数など）からアクセス可能なオブジェクトを「マーク」します。</p>

<p>次に、マークされなかったオブジェクトを「スイープ（回収）」します。</p>

<ol>
  <li>世代別GC（Generational GC）
    <ul>
      <li>オブジェクトの寿命に応じて「ヤング世代」「オールド世代」に分け、それぞれに最適な方法でGCを行います。短命なオブジェクトは頻繁に回収され、長寿命なオブジェクトにはあまりGCがかかりません。</li>
    </ul>
  </li>
</ol>

<p>このように、ガベージコレクションはプログラムのパフォーマンスと安定性において非常に重要な役割を果たしています。</p>

<h3 id="배열과-arraylist의-차이점은-무엇인가">배열과 ArrayList의 차이점은 무엇인가?</h3>
<p><img src="/assets/img/img-folder/array-arraylist.png" alt="Array-Arraylist image" /><br /></p>

<h3 id="try-with-resources-문은-어떤-경우에-사용되나">try-with-resources 문은 어떤 경우에 사용되나?</h3>
<ul>
  <li>try-with-resources文は、自動的にリソースをクローズする構文です。ファイルやデータベース接続など、close() メソッドが必要なリソースを扱う際に使います。</li>
</ul>

<ol>
  <li>使用される場面
    <ul>
      <li>ファイルの読み書き（例：FileReader, BufferedWriter）</li>
      <li>データベース接続（例：Connection, PreparedStatement）</li>
      <li>ソケット通信（例：Socket, ServerSocket）</li>
      <li>その他 AutoCloseable インターフェースを実装しているリソース全般</li>
    </ul>
  </li>
</ol>

<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">try</span> <span class="o">(</span><span class="nc">BufferedReader</span> <span class="n">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">BufferedReader</span><span class="o">(</span><span class="k">new</span> <span class="nc">FileReader</span><span class="o">(</span><span class="s">"test.txt"</span><span class="o">)))</span> <span class="o">{</span>
    <span class="nc">String</span> <span class="n">line</span><span class="o">;</span>
    <span class="k">while</span> <span class="o">((</span><span class="n">line</span> <span class="o">=</span> <span class="n">reader</span><span class="o">.</span><span class="na">readLine</span><span class="o">())</span> <span class="o">!=</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span>
        <span class="nc">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="n">line</span><span class="o">);</span>
    <span class="o">}</span>
<span class="o">}</span> <span class="k">catch</span> <span class="o">(</span><span class="nc">IOException</span> <span class="n">e</span><span class="o">)</span> <span class="o">{</span>
    <span class="n">e</span><span class="o">.</span><span class="na">printStackTrace</span><span class="o">();</span>
<span class="o">}</span>
<span class="c1">// readerは自動的にcloseされる</span>
</code></pre></div></div>

<ol>
  <li>メリット
    <ul>
      <li>finallyブロックで明示的にclose()を書く必要がない</li>
      <li>コードが簡潔になる</li>
      <li>リソースリーク（閉じ忘れ）を防げる</li>
    </ul>
  </li>
  <li>注意点
    <ul>
      <li>利用するリソースは AutoCloseable インターフェースを実装している必要がある</li>
      <li>Java 7以降で使用可能</li>
    </ul>
  </li>
</ol>

<h3 id="interface와-abstract-class의-차이점은-무엇인가">interface와 abstract class의 차이점은 무엇인가?</h3>

<p><img src="/assets/img/img-folder/abstract-interface.png" alt="Abstract-Interface Imgae" /><br /></p>

<ul>
  <li>コード例
    <ol>
      <li>インターフェースの例：
        <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">interface</span> <span class="nc">Animal</span> <span class="o">{</span>
  <span class="kt">void</span> <span class="nf">eat</span><span class="o">();</span>  <span class="c1">// 抽象メソッド（実装なし）</span>
<span class="o">}</span>
</code></pre></div>        </div>
      </li>
    </ol>
  </li>
</ul>

<ol>
  <li>抽象クラスの例：
    <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">abstract</span> <span class="kd">class</span> <span class="nc">Animal</span> <span class="o">{</span>
<span class="kt">void</span> <span class="nf">breathe</span><span class="o">()</span> <span class="o">{</span>
    <span class="nc">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="s">"息をする"</span><span class="o">);</span>
<span class="o">}</span>

<span class="kd">abstract</span> <span class="kt">void</span> <span class="nf">eat</span><span class="o">();</span>  <span class="c1">// 抽象メソッド（サブクラスで実装が必要）</span>
<span class="o">}</span>
</code></pre></div>    </div>
  </li>
</ol>

<ul>
  <li>使い分けのポイント
    <ol>
      <li>インターフェース：</li>
    </ol>
    <ul>
      <li>異なるクラスに共通の「機能だけ」を定義したいとき</li>
      <li>例：Comparable, Runnable など</li>
    </ul>
  </li>
</ul>

<ol>
  <li>抽象クラス：
    <ul>
      <li>複数のサブクラスに共通の「状態や処理」を定義したいとき</li>
      <li>例：Animal という抽象クラスに共通動作をまとめる など</li>
    </ul>
  </li>
</ol>

<h3 id="-연산자와-equals-메서드의-차이점은-무엇인가">== 연산자와 .equals() 메서드의 차이점은 무엇인가?</h3>
<p><img src="/assets/img/img-folder/difference-of-equals.png" alt="Difference of equals image" /><br /></p>

<ol>
  <li>🔍例：String の場合
~~~java
String a = new String(“hello”);
String b = new String(“hello”);</li>
</ol>

<p>System.out.println(a == b);        // false（違うインスタンス）
System.out.println(a.equals(b));   // true（文字列の内容が同じ）</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
- a == b → 参照（メモリ上のアドレス）が異なるため false
- a.equals(b) → 文字列の内容が同じなので true

2. 🔍 基本型（プリミティブ型）の場合
~~~java
int x = 5;
int y = 5;
System.out.println(x == y);  // true
</code></pre></div></div>

<ul>
  <li>int や double などの基本型は == で値の比較が可能です</li>
  <li>.equals() は使えません（基本型はオブジェクトではないため）</li>
</ul>

<h3 id="상속이란-무엇인가">상속이란 무엇인가?</h3>

<ul>
  <li>継承（Inheritance）は、オブジェクト指向プログラミングの基本概念の一つで、既存のクラス（親クラス/スーパークラス）の特性（フィールドとメソッド）を新しいクラス（子クラス/サブクラス）に引き継ぐ仕組みです。</li>
</ul>

<ol>
  <li>継承の主な特徴
    <ul>
      <li>コードの再利用性: 親クラスのコードを子クラスで再利用できる</li>
      <li>階層構造: クラス間の「is-a」関係を表現できる</li>
      <li>拡張性: 既存機能を保持しながら新機能を追加可能</li>
      <li>オーバーライド: 親クラスのメソッドを子クラスで再定義可能</li>
    </ul>
  </li>
  <li>
    <p>Java における継承
~~~java
// 親クラス
public class Animal {
 protected String name;</p>

    <p>public void eat() {
     System.out.println(“食べる”);
 }
}</p>
  </li>
</ol>

<p>// 子クラス
public class Dog extends Animal {
    public void bark() {
        System.out.println(“吠える”);
    }</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// オーバーライド
@Override
public void eat() {
    System.out.println("骨を食べる");
} } ~~~
</code></pre></div></div>

<ol>
  <li>継承の種類
    <ul>
      <li>単一継承: Javaでは一つの親クラスのみ継承可能</li>
      <li>多重継承: 複数インターフェースの実装は可能</li>
      <li>多階層継承: 継承の連鎖（A→B→Cなど）</li>
    </ul>
  </li>
  <li>継承の利点と注意点
    <ul>
      <li>利点:</li>
      <li>コード重複の削減</li>
      <li>一貫性のある設計</li>
      <li>柔軟な拡張</li>
      <li>注意点:</li>
      <li>強い結合（親クラス変更の影響大）</li>
      <li>複雑性の増加</li>
      <li>継承の乱用はアンチパターン（継承より合成を検討）</li>
    </ul>
  </li>
</ol>

<h3 id="오버로딩과-오버라이딩의-차이는-무엇인가">오버로딩과 오버라이딩의 차이는 무엇인가?</h3>

<p>オーバーロード（Overloading）とオーバーライド（Overriding）は、オブジェクト指向プログラミングにおける重要な概念で、似た名前ですが全く異なる機能を持っています。</p>

<ol>
  <li>オーバーロード（Overloading）
    <ul>
      <li>オーバーロードは、同じクラス内で同じ名前の関数やメソッドを複数定義することです。ただし、パラメータの数や型が異なります。コンパイラは引数の型や数に基づいて、どのメソッドを呼び出すかを決定します。</li>
    </ul>
  </li>
</ol>

<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nc">Calculator</span> <span class="o">{</span>
    <span class="kt">int</span> <span class="nf">add</span><span class="o">(</span><span class="kt">int</span> <span class="n">a</span><span class="o">,</span> <span class="kt">int</span> <span class="n">b</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">return</span> <span class="n">a</span> <span class="o">+</span> <span class="n">b</span><span class="o">;</span>
    <span class="o">}</span>
    
    <span class="kt">double</span> <span class="nf">add</span><span class="o">(</span><span class="kt">double</span> <span class="n">a</span><span class="o">,</span> <span class="kt">double</span> <span class="n">b</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">return</span> <span class="n">a</span> <span class="o">+</span> <span class="n">b</span><span class="o">;</span>
    <span class="o">}</span>
    
    <span class="kt">int</span> <span class="nf">add</span><span class="o">(</span><span class="kt">int</span> <span class="n">a</span><span class="o">,</span> <span class="kt">int</span> <span class="n">b</span><span class="o">,</span> <span class="kt">int</span> <span class="n">c</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">return</span> <span class="n">a</span> <span class="o">+</span> <span class="n">b</span> <span class="o">+</span> <span class="n">c</span><span class="o">;</span>
    <span class="o">}</span>
<span class="o">}</span>
</code></pre></div></div>

<ol>
  <li>オーバーライド（Overriding）
    <ul>
      <li>オーバーライドは、親クラスで定義されたメソッドを子クラスで再定義することです。メソッド名、パラメータの型と数は同じですが、実装内容が異なります。これにより、多態性（ポリモーフィズム）を実現します。</li>
    </ul>
  </li>
</ol>

<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">class</span> <span class="nc">Animal</span> <span class="o">{</span>
    <span class="kt">void</span> <span class="nf">makeSound</span><span class="o">()</span> <span class="o">{</span>
        <span class="nc">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="s">"動物が鳴きます"</span><span class="o">);</span>
    <span class="o">}</span>
<span class="o">}</span>

<span class="kd">class</span> <span class="nc">Cat</span> <span class="kd">extends</span> <span class="nc">Animal</span> <span class="o">{</span>
    <span class="nd">@Override</span>
    <span class="kt">void</span> <span class="nf">makeSound</span><span class="o">()</span> <span class="o">{</span>
        <span class="nc">System</span><span class="o">.</span><span class="na">out</span><span class="o">.</span><span class="na">println</span><span class="o">(</span><span class="s">"ニャー"</span><span class="o">);</span>
    <span class="o">}</span>
<span class="o">}</span>
</code></pre></div></div>

<p>主な違い</p>

<ol>
  <li>目的：
    <ul>
      <li>オーバーロード：同じ名前で異なる機能を持つメソッドを提供する（関数多重定義）</li>
      <li>オーバーライド：親クラスの実装を子クラスで再定義する（関数再定義）</li>
    </ul>
  </li>
  <li>発生場所：
    <ul>
      <li>オーバーロード：同じクラス内、または親子関係のクラス間</li>
      <li>オーバーライド：必ず継承関係のあるクラス間</li>
    </ul>
  </li>
  <li>シグネチャ：
    <ul>
      <li>オーバーロード：メソッド名は同じだが、パラメータの型または数が異なる</li>
      <li>オーバーライド：メソッド名とパラメータの型・数が完全に同じ</li>
    </ul>
  </li>
  <li>戻り値の型：
    <ul>
      <li>オーバーロード：異なる戻り値の型を持つことができる</li>
      <li>オーバーライド：同じか、より特化した（派生した）型である必要がある</li>
    </ul>
  </li>
</ol>

<h3 id="예외-처리에서-try-catch-finally-블록의-역할은-무엇인가">예외 처리에서 try, catch, finally 블록의 역할은 무엇인가?</h3>

<ul>
  <li>try ブロック：例外が発生する可能性のあるコードを囲みます。</li>
  <li>catch ブロック：try ブロック内で発生した特定の例外をキャッチして処理します。複数の catch ブロックを使用して、異なる種類の例外を処理できます。</li>
  <li>finally ブロック：例外が発生してもしなくても、必ず実行されるコードを含みます。通常、リソースのクリーンアップ（ファイルやデータベース接続を閉じるなど）に使用されます。</li>
</ul>

<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">try</span> <span class="o">{</span>
    <span class="c1">// 例外が発生する可能性のあるコード</span>
<span class="o">}</span> <span class="k">catch</span> <span class="o">(</span><span class="nc">IOException</span> <span class="n">e</span><span class="o">)</span> <span class="o">{</span>
    <span class="c1">// IOException が発生した場合の処理</span>
<span class="o">}</span> <span class="k">catch</span> <span class="o">(</span><span class="nc">Exception</span> <span class="n">e</span><span class="o">)</span> <span class="o">{</span>
    <span class="c1">// その他の例外が発生した場合の処理</span>
<span class="o">}</span> <span class="k">finally</span> <span class="o">{</span>
    <span class="c1">// 必ず実行されるコード</span>
<span class="o">}</span>
</code></pre></div></div>

<h3 id="final-finally-finalize의-차이점은-무엇인가">final, finally, finalize의 차이점은 무엇인가?</h3>
<ul>
  <li>final：変数、メソッド、クラスに使用される修飾子です。</li>
  <li>final 変数：値を変更できません（定数）</li>
  <li>final メソッド：オーバーライドできません</li>
  <li>
    <p>final クラス：継承できません</p>
  </li>
  <li>
    <p>finally：例外処理ブロックの一部で、例外の発生に関係なく実行されます。</p>
  </li>
  <li>finalize：Java のガベージコレクションにおいて、オブジェクトが回収される前に呼び出されるメソッドです。Java 9以降では非推奨とされています。</li>
</ul>

<h3 id="컬렉션-프레임워크란-무엇인가">컬렉션 프레임워크란 무엇인가?</h3>
<p>コレクションフレームワークは、データ構造を実装するクラスとインターフェースの集合です。List、Set、Map、Queue などのデータ構造を提供し、データの格納、アクセス、操作のための統一された方法を提供します。主なインターフェースは以下の通りです：</p>

<ul>
  <li>Collection：基本インターフェース</li>
  <li>List：順序付きコレクション（ArrayList、LinkedList など）</li>
  <li>Set：重複を許さないコレクション（HashSet、TreeSet など）</li>
  <li>Map：キーと値のペアのコレクション（HashMap、TreeMap など）</li>
  <li>Queue：要素を処理する前に保持するコレクション</li>
</ul>

<h3 id="hashmap과-hashtable의-차이점은-무엇인가">HashMap과 HashTable의 차이점은 무엇인가?</h3>

<ol>
  <li>同期化：HashTable はスレッドセーフ（同期化されている）ですが、HashMap はスレッドセーフではありません。</li>
  <li>null 値：HashMap はキーと値に null を許可しますが、HashTable は許可しません。</li>
  <li>パフォーマンス：同期化のため、HashTable は HashMap より遅い傾向があります。</li>
  <li>継承：HashMap は AbstractMap を継承し、HashTable は Dictionary を継承しています。</li>
  <li>イテレーション：HashMap は fail-fast イテレーターを使用しますが、HashTable の Enumeration はそうではありません。</li>
</ol>

<p>現代の Java プログラミングでは、同期化が必要な場合は ConcurrentHashMap を使用することが推奨されています。</p>

<h3 id="동기화synchronization의-목적은-무엇인가">동기화(Synchronization)의 목적은 무엇인가?</h3>
<p>同期化の主な目的は、マルチスレッド環境での共有リソースへの安全なアクセスを保証することです。具体的には：</p>

<ol>
  <li>スレッドの安全性：複数のスレッドが同時に同じリソースにアクセスすることによる競合状態を防ぎます。</li>
  <li>データの整合性：複数のスレッドによるデータ破損を防ぎます。</li>
  <li>可視性：あるスレッドによる変更が他のスレッドに正確に見えるようにします。</li>
  <li>アトミック操作：操作が中断されずに完了することを保証します。</li>
</ol>

<h3 id="제네릭generic의-이점은-무엇인가">제네릭(Generic)의 이점은 무엇인가?</h3>
<ol>
  <li>型安全性：コンパイル時に型チェックを行い、実行時のエラーを減らします。</li>
  <li>キャストの排除：手動のキャストが不要になり、ClassCastException の可能性を減らします。</li>
  <li>コードの再利用性：異なる型で動作する共通のアルゴリズムを実装できます。</li>
  <li>コードの読みやすさ：コードの意図がより明確になります。</li>
  <li>パフォーマンス：実行時のキャストチェックが不要になるため、効率が向上します。</li>
</ol>

<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ジェネリックの例</span>
<span class="kd">public</span> <span class="kd">class</span> <span class="nc">Box</span><span class="o">&lt;</span><span class="no">T</span><span class="o">&gt;</span> <span class="o">{</span>
    <span class="kd">private</span> <span class="no">T</span> <span class="n">content</span><span class="o">;</span>
    
    <span class="kd">public</span> <span class="kt">void</span> <span class="nf">set</span><span class="o">(</span><span class="no">T</span> <span class="n">content</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">this</span><span class="o">.</span><span class="na">content</span> <span class="o">=</span> <span class="n">content</span><span class="o">;</span>
    <span class="o">}</span>
    
    <span class="kd">public</span> <span class="no">T</span> <span class="nf">get</span><span class="o">()</span> <span class="o">{</span>
        <span class="k">return</span> <span class="n">content</span><span class="o">;</span>
    <span class="o">}</span>
<span class="o">}</span>
</code></pre></div></div>

<h3 id="동기화-블록synchronized-block과-동기화-메서드synchronized-method의-차이점은-무엇인가">동기화 블록(Synchronized Block)과 동기화 메서드(Synchronized Method)의 차이점은 무엇인가?</h3>

<ol>
  <li>同期化メソッド：
    <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">synchronized</span> <span class="kt">void</span> <span class="nf">method</span><span class="o">()</span> <span class="o">{</span>
 <span class="c1">// 同期化されたコード</span>
<span class="o">}</span>
</code></pre></div>    </div>
    <ul>
      <li>メソッド全体が同期化されます</li>
      <li>this（インスタンスメソッドの場合）またはクラスオブジェクト（静的メソッドの場合）にロックを取得します</li>
    </ul>
  </li>
  <li>同期化ブロック：
    <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">public</span> <span class="kt">void</span> <span class="nf">method</span><span class="o">()</span> <span class="o">{</span>
 <span class="kd">synchronized</span><span class="o">(</span><span class="n">lockObject</span><span class="o">)</span> <span class="o">{</span>
     <span class="c1">// 同期化されたコード</span>
 <span class="o">}</span>
<span class="o">}</span>
</code></pre></div>    </div>
    <ul>
      <li>コードの特定の部分のみが同期化されます</li>
      <li>指定したオブジェクトにロックを取得します</li>
    </ul>
  </li>
  <li>主な違い：
    <ul>
      <li>粒度：同期化ブロックでは、コードの一部だけを同期化できるため、同期化のオーバーヘッドを減らせます。</li>
      <li>ロックオブジェクト：同期化ブロックでは、任意のオブジェクトをロックとして使用できます。</li>
      <li>パフォーマンス：同期化ブロックは必要な部分だけをロックするため、効率的です。</li>
    </ul>
  </li>
</ol>

<h3 id="java-8에서-추가된-람다-표현식lambda-expression의-장점과-사용-예는-무엇인가">Java 8에서 추가된 람다 표현식(Lambda Expression)의 장점과 사용 예는 무엇인가?</h3>
<ul>
  <li>利点：
    <ol>
      <li>簡潔なコード：匿名クラスよりも短く読みやすいコードになります。</li>
      <li>関数型プログラミング：より宣言的なスタイルのコーディングが可能になります。</li>
      <li>並列処理：Stream API と組み合わせて効率的な並列処理を実装できます。</li>
      <li>遅延実行：処理を必要なときまで遅延させることができます。</li>
      <li>コードの再利用性：関数をオブジェクトとして扱えるため、再利用性が向上します。</li>
    </ol>
  </li>
</ul>

<div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// ラムダ式以前</span>
<span class="nc">Collections</span><span class="o">.</span><span class="na">sort</span><span class="o">(</span><span class="n">list</span><span class="o">,</span> <span class="k">new</span> <span class="nc">Comparator</span><span class="o">&lt;</span><span class="nc">String</span><span class="o">&gt;()</span> <span class="o">{</span>
    <span class="nd">@Override</span>
    <span class="kd">public</span> <span class="kt">int</span> <span class="nf">compare</span><span class="o">(</span><span class="nc">String</span> <span class="n">s1</span><span class="o">,</span> <span class="nc">String</span> <span class="n">s2</span><span class="o">)</span> <span class="o">{</span>
        <span class="k">return</span> <span class="n">s1</span><span class="o">.</span><span class="na">compareTo</span><span class="o">(</span><span class="n">s2</span><span class="o">);</span>
    <span class="o">}</span>
<span class="o">});</span>

<span class="c1">// ラムダ式を使用</span>
<span class="nc">Collections</span><span class="o">.</span><span class="na">sort</span><span class="o">(</span><span class="n">list</span><span class="o">,</span> <span class="o">(</span><span class="n">s1</span><span class="o">,</span> <span class="n">s2</span><span class="o">)</span> <span class="o">-&gt;</span> <span class="n">s1</span><span class="o">.</span><span class="na">compareTo</span><span class="o">(</span><span class="n">s2</span><span class="o">));</span>

<span class="c1">// さらに簡潔に</span>
<span class="nc">Collections</span><span class="o">.</span><span class="na">sort</span><span class="o">(</span><span class="n">list</span><span class="o">,</span> <span class="nl">String:</span><span class="o">:</span><span class="n">compareTo</span><span class="o">);</span>

<span class="c1">// Stream APIとの組み合わせ</span>
<span class="n">list</span><span class="o">.</span><span class="na">stream</span><span class="o">()</span>
    <span class="o">.</span><span class="na">filter</span><span class="o">(</span><span class="n">s</span> <span class="o">-&gt;</span> <span class="n">s</span><span class="o">.</span><span class="na">startsWith</span><span class="o">(</span><span class="s">"A"</span><span class="o">))</span>
    <span class="o">.</span><span class="na">map</span><span class="o">(</span><span class="nl">String:</span><span class="o">:</span><span class="n">toUpperCase</span><span class="o">)</span>
    <span class="o">.</span><span class="na">forEach</span><span class="o">(</span><span class="nc">System</span><span class="o">.</span><span class="na">out</span><span class="o">::</span><span class="n">println</span><span class="o">);</span>
</code></pre></div></div>

<h3 id="스트림stream-api는-어떤-목적으로-사용되나">스트림(Stream) API는 어떤 목적으로 사용되나?</h3>
<p>Stream API は、コレクションのデータを宣言的に処理するために使用されます。主な目的と特徴は：</p>

<ol>
  <li>宣言的プログラミング：「何を」行うかを指定し、「どのように」行うかの詳細は抽象化されます。</li>
  <li>パイプライン処理：複数の操作を連鎖させることができます（filter、map、reduce など）。</li>
  <li>並列処理：parallelStream() を使用して、マルチコアプロセッサでの並列実行が容易になります。</li>
  <li>遅延評価：終端操作が呼び出されるまで処理は実行されません。</li>
  <li>内部反復：外部ループ（for など）の代わりに、内部的にコレクションを反復処理します。
~~~java
List<String> names = Arrays.asList("山田", "田中", "佐藤", "鈴木");</String></li>
</ol>

<p>// 名前を大文字に変換し、「田」を含む名前だけをフィルタリングして表示
names.stream()
    .map(String::toUpperCase)
    .filter(name -&gt; name.contains(“田”))
    .forEach(System.out::println);</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
### Optional 클래스의 목적과 사용법은 무엇인가?

Optional クラスは、null 参照による問題を軽減するためのコンテナオブジェクトです。
- 目的：

 1. NullPointerException の防止：null 参照を明示的に処理することを促します。
 2. より明確なAPI：メソッドが値を返さない可能性があることを明示します。
 3. 機能的な操作：map、filter などの操作を使用して値を変換または処理できます。

- 使用法：
~~~java
// Optional の作成
Optional&lt;String&gt; optional = Optional.of("値");
Optional&lt;String&gt; emptyOptional = Optional.empty();
Optional&lt;String&gt; nullableOptional = Optional.ofNullable(mayBeNullValue);

// 値の取得
String value = optional.get(); // 値がない場合は例外発生
String safeValue = optional.orElse("デフォルト値");
String computedValue = optional.orElseGet(() -&gt; computeValue());
String exceptionValue = optional.orElseThrow(() -&gt; new Exception());

// 条件付き操作
optional.ifPresent(val -&gt; System.out.println(val));

// 値の変換
Optional&lt;Integer&gt; length = optional.map(String::length);

// フィルタリング
Optional&lt;String&gt; filtered = optional.filter(val -&gt; val.length() &gt; 5);
</code></pre></div></div>

<p>Optional は特に、null を返す可能性のあるメソッドの戻り値型として使用すると効果的です。これにより、呼び出し元は値の存在を明示的に確認することが促されます。</p>

<h2 id="네트워크">네트워크</h2>

<h3 id="http-프로토콜">HTTP 프로토콜</h3>

<h3 id="http와-https의-차이점">HTTP와 HTTPS의 차이점</h3>
<ul>
  <li>HTTPは平文でデータを送受信するプロトコルで、セキュリティ保護がありません。HTTPSはSSL/TLSによる暗号化を追加し、通信の機密性、完全性、認証を提供します。HTTPはポート80、HTTPSはポート443を使用します。</li>
</ul>

<h3 id="쿠키와-세션의-차이점">쿠키와 세션의 차이점</h3>
<ul>
  <li>クッキーはクライアント側に保存される小さなデータで、ブラウザがサーバーにリクエストを送る際に一緒に送信されます。セッションはサーバー側でユーザー情報を保持する仕組みで、通常セッションIDをクッキーに保存してユーザーを識別します。</li>
</ul>

<h3 id="tcp와-udp의-차이">TCP와 UDP의 차이</h3>
<ul>
  <li>TCPは接続指向で信頼性の高いプロトコルです。データの順序保証、エラー検出、再送機能があります。UDPは非接続型で信頼性は低いですが、オーバーヘッドが少なく高速です。リアルタイム性が重要な用途（ストリーミング、ゲームなど）に適しています。</li>
</ul>

<h3 id="osi-7-계층">OSI 7 계층</h3>
<p>OSI（Open Systems Interconnection）モデルは、ネットワーク通信のための概念的なフレームワークで、7つの階層に分かれています：</p>

<ol>
  <li>
    <p><strong>物理層（Physical Layer）</strong>：物理的媒体を通じたビットの伝送を担当。ケーブル、コネクタ、電気信号などが含まれます。</p>
  </li>
  <li>
    <p><strong>データリンク層（Data Link Layer）</strong>：隣接するノード間の信頼性のある通信を確立。MACアドレスを使用し、フレームの形成と誤り検出を行います。例：イーサネット、Wi-Fi。</p>
  </li>
  <li>
    <p><strong>ネットワーク層（Network Layer）</strong>：エンドツーエンドの通信経路を確立し、パケットのルーティングを担当。例：IP（インターネットプロトコル）。</p>
  </li>
  <li>
    <p><strong>トランスポート層（Transport Layer）</strong>：データの信頼性のある転送を保証。例：TCP、UDP。</p>
  </li>
  <li>
    <p><strong>セッション層（Session Layer）</strong>：アプリケーション間の通信セッションを確立、管理、終了します。</p>
  </li>
  <li>
    <p><strong>プレゼンテーション層（Presentation Layer）</strong>：データ形式の変換、暗号化、圧縮などを担当。</p>
  </li>
  <li>
    <p><strong>アプリケーション層（Application Layer）</strong>：ユーザーに直接サービスを提供するプロトコルが含まれます。例：HTTP、FTP、SMTP。</p>
  </li>
</ol>

<h3 id="http-method의-종류">HTTP Method의 종류</h3>

<ol>
  <li><strong>GET</strong>：リソースの取得</li>
  <li><strong>POST</strong>：新しいリソースの作成</li>
  <li><strong>PUT</strong>：既存リソースの更新（完全な置き換え）</li>
  <li><strong>DELETE</strong>：リソースの削除</li>
  <li><strong>PATCH</strong>：リソースの部分的な更新</li>
  <li><strong>HEAD</strong>：GETと同様だがレスポンスボディなし（ヘッダーのみ）</li>
  <li><strong>OPTIONS</strong>：サポートされているHTTPメソッドの確認</li>
  <li><strong>TRACE</strong>：リクエストのループバックテスト</li>
  <li><strong>CONNECT</strong>：プロキシを介したトンネル接続の確立</li>
</ol>

<h3 id="get과-post의-차이">GET과 POST의 차이</h3>

<ol>
  <li><strong>データの送信方法</strong>：
    <ul>
      <li>GET：URLのクエリパラメータに含める</li>
      <li>POST：リクエストボディに含める</li>
    </ul>
  </li>
  <li><strong>セキュリティ</strong>：
    <ul>
      <li>GET：パラメータはURLに表示され、ブラウザ履歴に残る</li>
      <li>POST：データはボディに含まれるため、URLには表示されない</li>
    </ul>
  </li>
  <li><strong>データ容量</strong>：
    <ul>
      <li>GET：URLの長さに制限があるため、送信できるデータ量に制限がある</li>
      <li>POST：理論的には制限なし（実際にはサーバー設定による）</li>
    </ul>
  </li>
  <li><strong>キャッシュ</strong>：
    <ul>
      <li>GET：キャッシュ可能</li>
      <li>POST：通常キャッシュされない</li>
    </ul>
  </li>
  <li><strong>冪等性（Idempotency）</strong>：
    <ul>
      <li>GET：冪等（何度実行しても同じ結果）</li>
      <li>POST：非冪等（実行するたびに状態が変わる可能性がある）</li>
    </ul>
  </li>
</ol>

<h3 id="세션-기반-인증과-토큰-기반-인증의-차이점">세션 기반 인증과 토큰 기반 인증의 차이점</h3>

<p><strong>セッション基盤認証</strong>：</p>
<ul>
  <li>サーバーがセッション情報をメモリまたはデータベースに保存</li>
  <li>クライアントはセッションIDをCookieに保存</li>
  <li>リクエストごとにセッションIDを送信し、サーバーで検証</li>
</ul>

<p><strong>トークン基盤認証</strong>：</p>
<ul>
  <li>認証情報をトークン（JWT等）に暗号化して保存</li>
  <li>クライアントがトークンを保持（通常はローカルストレージ）</li>
  <li>サーバーはステートレスで、トークンの署名を検証するのみ</li>
</ul>

<h3 id="stateful한-세션-기반의-인증-방식의-단점">Stateful한 세션 기반의 인증 방식의 단점</h3>

<ol>
  <li>
    <p><strong>スケーラビリティの問題</strong>：サーバーがセッション状態を保持するため、水平スケーリングが困難</p>
  </li>
  <li>
    <p><strong>リソース消費</strong>：多数のユーザーのセッションデータをサーバーで管理すると、メモリ使用量が増加</p>
  </li>
  <li>
    <p><strong>サーバー障害への対応</strong>：サーバーダウン時にセッション情報が失われる可能性</p>
  </li>
  <li>
    <p><strong>CORS（クロスオリジン）の問題</strong>：Cookieベースのため、クロスドメイン認証に制限がある</p>
  </li>
  <li>
    <p><strong>モバイルアプリ互換性</strong>：モバイルアプリでのCookie管理が難しい場合がある</p>
  </li>
</ol>

<h3 id="세션-기반-인증과-토큰-기반-인증은-어느경우에-적합한가">세션 기반 인증과 토큰 기반 인증은 어느경우에 적합한가</h3>

<p><strong>セッション基盤認証に適したケース</strong>：</p>
<ul>
  <li>単一サーバーまたは小規模なシステム</li>
  <li>セキュリティが最重要の場合（トークンの漏洩リスクが高い環境）</li>
  <li>サーバーサイドでのセッション無効化が必要な場合</li>
  <li>従来型のWebアプリケーション</li>
</ul>

<p><strong>トークン基盤認証に適したケース</strong>：</p>
<ul>
  <li>マイクロサービスアーキテクチャ</li>
  <li>分散システム、水平スケーリングが必要な場合</li>
  <li>モバイルアプリケーション</li>
  <li>シングルページアプリケーション（SPA）</li>
  <li>クロスドメインAPIアクセスが必要な場合</li>
</ul>

<h3 id="jwt란">JWT란?</h3>

<p>JWT（JSON Web Token）は、JSON形式でエンティティ間で安全に情報を転送するためのオープンスタンダード（RFC 7519）です。</p>

<p><strong>構造</strong>：</p>
<ol>
  <li><strong>ヘッダー（Header）</strong>：トークンタイプと使用している署名アルゴリズム</li>
  <li><strong>ペイロード（Payload）</strong>：クレーム（ユーザーIDなどの情報）</li>
  <li><strong>署名（Signature）</strong>：ヘッダーとペイロードの整合性を検証するための署名</li>
</ol>

<p><strong>特徴</strong>：</p>
<ul>
  <li>Base64でエンコードされている</li>
  <li>自己完結型（トークン自体に必要な情報が含まれる）</li>
  <li>署名により改ざん検知が可能</li>
  <li>ステートレス認証に適している</li>
  <li>有効期限を設定可能</li>
</ul>

<h3 id="공인-ip와-사설-ip의-차이">공인 IP와 사설 IP의 차이</h3>

<p><strong>パブリックIP</strong>：</p>
<ul>
  <li>インターネット上で一意に識別できるアドレス</li>
  <li>インターネットサービスプロバイダ（ISP）から割り当てられる</li>
  <li>インターネット上で直接アクセス可能</li>
  <li>グローバルに一意で、重複しない</li>
  <li>IPv4の不足により、現在は有限リソース</li>
</ul>

<p><strong>プライベートIP</strong>：</p>
<ul>
  <li>ローカルネットワーク内でのみ使用されるアドレス</li>
  <li>インターネット上では直接ルーティングされない</li>
  <li>異なるローカルネットワークで同じアドレスが使用可能</li>
  <li>RFC 1918で定義された特定の範囲に限定：
    <ul>
      <li>10.0.0.0～10.255.255.255（10.0.0.0/8）</li>
      <li>172.16.0.0～172.31.255.255（172.16.0.0/12）</li>
      <li>192.168.0.0～192.168.255.255（192.168.0.0/16）</li>
    </ul>
  </li>
</ul>

<p><strong>接続方法</strong>：
プライベートIPを持つデバイスがインターネットにアクセスするには、通常はNAT（Network Address Translation）を使用してパブリックIPに変換します。これにより、複数のデバイスが1つのパブリックIPを共有できます。</p>

<h2 id="데이터베이스">데이터베이스</h2>
<h3 id="데이터베이스의-특징">데이터베이스의 특징</h3>
<ul>
  <li>インデックスはデータベースのテーブルに対する検索を高速化するデータ構造です。特定のカラムに対して作成され、B木やハッシュ表などの構造を使ってデータへの効率的なアクセスを提供します。検索速度は向上しますが、挿入・更新操作のオーバーヘッドが増加します。</li>
</ul>

<h3 id="ddl-dml-dcl">DDL, DML, DCL</h3>

<p><strong>DDL（Data Definition Language、データ定義言語）</strong>：
データベースの構造を定義するためのSQL文のセットです。テーブル、ビュー、インデックスなどのデータベースオブジェクトの作成、変更、削除に使用されます。</p>

<p>主なDDLコマンド：</p>
<ul>
  <li>CREATE：データベースオブジェクトを作成</li>
  <li>ALTER：既存のオブジェクトを変更</li>
  <li>DROP：オブジェクトを削除</li>
  <li>TRUNCATE：テーブルのデータを削除（構造は維持）</li>
  <li>RENAME：オブジェクトの名前を変更</li>
</ul>

<p><strong>DML（Data Manipulation Language、データ操作言語）</strong>：
データベース内のデータを操作するためのSQL文のセットです。データの検索、挿入、更新、削除などの操作に使用されます。</p>

<p>主なDMLコマンド：</p>
<ul>
  <li>SELECT：データを検索・取得</li>
  <li>INSERT：新しいデータを挿入</li>
  <li>UPDATE：既存のデータを更新</li>
  <li>DELETE：データを削除</li>
  <li>MERGE：複数の操作（挿入・更新）を一度に実行</li>
</ul>

<p><strong>DCL（Data Control Language、データ制御言語）</strong>：
データベースへのアクセス権限とセキュリティを管理するためのSQL文のセットです。</p>

<p>主なDCLコマンド：</p>
<ul>
  <li>GRANT：権限を付与</li>
  <li>REVOKE：権限を取り消し</li>
  <li>COMMIT：トランザクションを確定</li>
  <li>ROLLBACK：トランザクションを元に戻す</li>
  <li>SAVEPOINT：ロールバックポイントを設定</li>
</ul>

<p>###트리거란?</p>

<p>トリガーは、特定のイベント（データの挿入、更新、削除など）が発生したときに自動的に実行されるデータベースの手続きです。特定の条件が満たされた場合にのみ実行されるように設定することも可能です。</p>

<p><strong>トリガーの主な特徴</strong>：</p>
<ul>
  <li>テーブルやビューにアタッチされる</li>
  <li>INSERT、UPDATE、DELETEなどのDML操作に応答して実行</li>
  <li>BEFORE、AFTER、INSTEADOFなどのタイミングで実行可能</li>
  <li>データの整合性維持、監査ログの作成、複雑なビジネスルールの実装などに使用</li>
</ul>

<p><strong>トリガーの例</strong>（PostgreSQL構文）：</p>
<div class="language-sql highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">CREATE</span> <span class="k">TRIGGER</span> <span class="n">update_timestamp</span>
<span class="k">BEFORE</span> <span class="k">UPDATE</span> <span class="k">ON</span> <span class="n">customers</span>
<span class="k">FOR</span> <span class="k">EACH</span> <span class="k">ROW</span>
<span class="k">EXECUTE</span> <span class="k">FUNCTION</span> <span class="n">update_modified_column</span><span class="p">();</span>
</code></pre></div></div>

<p>この例では、customersテーブルが更新される前に、update_modified_column関数が実行されます。</p>

<h3 id="index란">Index란?</h3>

<p>インデックスは、データベーステーブルのデータ検索を高速化するためのデータ構造です。本の索引と同様に、特定のカラム値に基づいて行を素早く見つけるために使用されます。</p>

<p><strong>インデックスの主な特徴</strong>：</p>
<ul>
  <li>検索速度を大幅に向上（特に大規模テーブル）</li>
  <li>一意性制約の実装に使用可能</li>
  <li>B-Tree、ハッシュ、GiST、GINなど様々な種類がある</li>
  <li>挿入・更新操作のオーバーヘッドが発生</li>
</ul>

<p><strong>インデックスのメリット</strong>：</p>
<ul>
  <li>SELECTクエリのパフォーマンス向上</li>
  <li>WHERE句の条件検索を高速化</li>
  <li>ORDERBYとGROUPBY操作の効率化</li>
  <li>一意性制約（UNIQUEとPRIMARY KEY）の保証</li>
</ul>

<p><strong>インデックスのデメリット</strong>：</p>
<ul>
  <li>追加のディスク容量が必要</li>
  <li>INSERT、UPDATE、DELETEが遅くなる可能性</li>
  <li>頻繁に更新されるテーブルでは維持コストが高い</li>
</ul>

<p><strong>インデックス作成の例</strong>：</p>
<div class="language-sql highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">CREATE</span> <span class="k">INDEX</span> <span class="n">idx_customer_name</span> <span class="k">ON</span> <span class="n">customers</span><span class="p">(</span><span class="n">last_name</span><span class="p">,</span> <span class="n">first_name</span><span class="p">);</span>
</code></pre></div></div>

<p>この例では、customersテーブルのlast_nameとfirst_nameカラムに複合インデックスを作成します。これにより、氏名での検索が高速化されます。</p>

<h3 id="sql-injection란">SQL Injection란?</h3>
<ul>
  <li>SQLインジェクションは、ユーザー入力を適切に検証せずにSQLクエリに組み込むことで発生する攻撃です。攻撃者は悪意のあるSQLコードを注入し、データベースの不正アクセス、データ漏洩、データ破壊などを引き起こす可能性があります。パラメータ化クエリやORMを使用して防止できます。</li>
</ul>

<h3 id="orm-이란">ORM 이란</h3>

<p>ORMとは、<strong>オブジェクト指向プログラミング言語の世界とリレーショナルデータベースの世界の間の橋渡しをする技術</strong>のことです。</p>

<p>具体的には、プログラムの中で扱うオブジェクトと、データベースのテーブルのレコードを対応付けます。これにより、プログラマーはSQLを直接書くことなく、オブジェクトを操作するだけでデータベースの操作（データの取得、登録、更新、削除など）を行うことができます。</p>

<p><strong>ORMの主なメリット:</strong></p>

<ul>
  <li><strong>開発効率の向上:</strong> SQLを書く手間が省け、オブジェクト指向の考え方でデータベース操作を行えるため、開発時間を短縮できます。</li>
  <li><strong>保守性の向上:</strong> SQLがプログラムコードに散らばるのを防ぎ、コードの見通しが良くなります。</li>
  <li><strong>データベースの移植性:</strong> 特定のデータベースに依存しないコードを書くことが容易になります。ORMによっては、設定を変更するだけで異なるデータベースに対応できます。</li>
  <li><strong>セキュリティの向上:</strong> SQLインジェクションなどの脆弱性を防ぐための機能が提供されている場合があります。</li>
  <li><strong>生産性の向上:</strong> ORMフレームワークが、CRUD操作やトランザクション管理などの一般的なデータベース処理を自動化してくれるため、開発者はビジネスロジックに集中できます。</li>
</ul>

<p><strong>代表的な ORM フレームワーク:</strong></p>

<p>様々なプログラミング言語向けに、多くのORMフレームワークが存在します。</p>

<h3 id="having과-where의-차이">Having과 Where의 차이</h3>

<p>HAVING句とWHERE句はどちらもSQLのSELECT文で条件を指定するために使われますが、<strong>適用されるタイミングと対象が異なります</strong>。</p>

<h4 id="where句">WHERE句</h4>

<ul>
  <li><strong>適用タイミング:</strong> データの<strong>グループ化を行う前</strong></li>
  <li><strong>対象:</strong> <strong>個々の行</strong></li>
  <li><strong>役割:</strong> データベースから読み込む行をフィルタリングします。指定した条件に合致する行のみが次の処理（GROUP BYなど）に進みます。</li>
  <li><strong>使用できる条件:</strong> 列の値に対する直接的な条件（例：<code class="language-plaintext highlighter-rouge">age &gt; 20</code>、<code class="language-plaintext highlighter-rouge">name = '山田'</code>）</li>
</ul>

<p><strong>例:</strong></p>

<div class="language-sql highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">SELECT</span> <span class="n">customer_id</span><span class="p">,</span> <span class="k">SUM</span><span class="p">(</span><span class="n">amount</span><span class="p">)</span>
<span class="k">FROM</span> <span class="n">orders</span>
<span class="k">WHERE</span> <span class="n">amount</span> <span class="o">&gt;</span> <span class="mi">1000</span>  <span class="c1">-- 注文金額が1000円より大きい注文のみを対象とする</span>
<span class="k">GROUP</span> <span class="k">BY</span> <span class="n">customer_id</span><span class="p">;</span>
</code></pre></div></div>

<h2 id="스프링-스프링부트">스프링, 스프링부트</h2>

<h3 id="wasweb-application-server와-wsweb-server의-차이">WAS(Web Application Server)와 WS(Web Server)의 차이</h3>

<h4 id="was-web-application-server">WAS (Web Application Server)</h4>

<p>WASは、<strong>Webアプリケーションを実行するためのソフトウェア</strong>です。静的なコンテンツだけでなく、<strong>動的なコンテンツやアプリケーションのロジック</strong>を処理することができます。</p>

<p><strong>主な役割:</strong></p>

<ul>
  <li><strong>動的コンテンツの生成:</strong> データベースとの連携やビジネスロジックの実行を通じて、HTML、XML、JSONなどの動的なコンテンツを生成します。</li>
  <li><strong>Webアプリケーションの実行環境の提供:</strong> サーブレットコンテナなどの実行環境を提供し、Java EE (Jakarta EE) などのWebアプリケーション仕様に基づいたアプリケーションを実行します。</li>
  <li><strong>トランザクション管理、セキュリティ機能の提供:</strong> アプリケーションの信頼性や安全性を高めるための機能を提供します。</li>
  <li><strong>セッション管理:</strong> ユーザーの状態を管理するための機能を提供します。</li>
</ul>

<p><strong>Spring/Spring Bootとの関連:</strong></p>

<p>Spring Bootでは、Tomcat、Jetty、UndertowなどのWASを<strong>組み込み (embedded)</strong> で利用することが一般的です。これにより、開発者は別途WASをインストール・設定する必要なく、Spring Bootアプリケーションを単独で実行できます。また、WARファイルとして外部のWASにデプロイすることも可能です。</p>

<p><strong>代表的なWAS:</strong></p>

<ul>
  <li>Apache Tomcat</li>
  <li>Jetty</li>
  <li>Undertow</li>
  <li>WebLogic Server</li>
  <li>WebSphere Application Server</li>
  <li>JBoss EAP</li>
</ul>

<h4 id="ws-web-server">WS (Web Server)</h4>

<p>WSは、主に<strong>クライアントからのHTTPリクエストを受け付け、静的なコンテンツ（HTMLファイル、CSSファイル、JavaScriptファイル、画像など）をクライアントに配信する</strong>ためのソフトウェアです。</p>

<p><strong>主な役割:</strong></p>

<ul>
  <li><strong>静的コンテンツの配信:</strong> ファイルシステムから要求された静的なファイルをクライアントに送信します。</li>
  <li><strong>HTTPリクエストの処理:</strong> クライアントからのHTTPリクエストを受け付け、適切なレスポンスを返します。</li>
  <li><strong>基本的なセキュリティ機能:</strong> アクセス制御などの基本的なセキュリティ機能を提供します。</li>
</ul>

<p><strong>Spring/Spring Bootとの関連:</strong></p>

<p>Spring Bootアプリケーションは、組み込みWASがWeb Serverの機能も兼ね備えているため、通常はWSを別途用意する必要はありません。ただし、より大規模なシステムや特定の要件がある場合には、NginxやApacheなどのWeb ServerをSpring Bootアプリケーションの前に配置し、ロードバランシングやSSL終端などの目的で利用することがあります。</p>

<p><strong>代表的なWS:</strong></p>

<ul>
  <li>Apache HTTP Server</li>
  <li>Nginx</li>
  <li>Microsoft IIS</li>
</ul>

<h4 id="wasとwsの主な違い">WASとWSの主な違い</h4>

<p><img src="/assets/img/img-folder/dif-was-ws.png" alt="Difference WAS and WS image" /><br /></p>

<h4 id="まとめ">まとめ</h4>

<p>簡単に言えば、<strong>WSは静的なファイルを配信するサーバー</strong>であり、<strong>WASはそれに加えて動的なコンテンツを生成したり、Webアプリケーションを実行したりする機能を持つサーバー</strong>です。Spring Bootでは通常WASを組み込んで利用するため、Web Serverの役割も兼ね備えています。</p>

<h3 id="spring-framework의-특징">Spring Framework의 특징</h3>
<ul>
  <li>Spring Frameworkの主な特徴：
    <ol>
      <li>DI（依存性注入）とIoC（制御の反転）によるコンポーネント管理</li>
      <li>AOP（アスペクト指向プログラミング）によるクロスカッティングコンサーン</li>
      <li>宣言的トランザクション管理</li>
      <li>豊富なモジュール（MVC、Security、Data、Bootなど）</li>
      <li>テスト容易性の向上</li>
      <li>他フレームワークとの統合性</li>
    </ol>
  </li>
</ul>

<h3 id="requestbody-requestparam-modelattirbute의-차이">@RequestBody, @RequestParam, @ModelAttirbute의 차이</h3>

<p><img src="/assets/img/img-folder/dif-annotaion.png" alt="Difference WAS and WS image" /><br /></p>

<h3 id="spring-boot와-spring-framework의-차이점">Spring Boot와 Spring Framework의 차이점</h3>
<ul>
  <li>Spring Bootは、Spring Frameworkの上に構築された拡張で、「設定より規約」の原則に従います。自動設定、組み込みサーバー、スターター依存関係、アクチュエーターなどの機能により、最小限の設定でSpringアプリケーションを素早く構築できます。SpringFrameworkが基盤技術を提供するのに対し、Spring Bootは開発効率と生産性向上に焦点を当てています。</li>
</ul>

<h3 id="spring-mvc란">Spring MVC란?</h3>

<p>Spring MVCは Spring Framework の中核となるモジュールの一つで、<strong>Webアプリケーションを構築するためのフレームワーク</strong>です。モデル・ビュー・コントローラー（MVC）デザインパターンを実装しており、アプリケーションの関心を分離し、開発を効率的に進めることを支援します。</p>

<p><strong>主な構成要素:</strong></p>

<ul>
  <li><strong>DispatcherServlet:</strong> 全ての HTTP リクエストを受け付け、適切なハンドラーに転送するフロントコントローラーの役割を担います。</li>
  <li><strong>Controller:</strong> クライアントからのリクエストを処理し、モデルデータを準備してビューに渡す役割を担います。 <code class="language-plaintext highlighter-rouge">@Controller</code> または <code class="language-plaintext highlighter-rouge">@RestController</code> アノテーションを使用して定義します。</li>
  <li><strong>Model:</strong> アプリケーションのデータを保持するオブジェクトです。コントローラーで生成され、ビューに渡されます。</li>
  <li><strong>ViewResolver:</strong> コントローラーから返されたビュー名を基に、実際のビューオブジェクトを生成する役割を担います。</li>
  <li><strong>HandlerMapping:</strong> 受信したリクエスト URL とマッピングされるコントローラーのメソッドを決定する役割を担います。</li>
</ul>

<p>Spring MVC は、柔軟で拡張性の高い Web アプリケーション開発のための様々な機能を提供します。</p>

<h3 id="제어의-역전ioc-inverion-of-control">제어의 역전(IoC, Inverion of Control)</h3>

<p>制御の反転（IoC）とは、<strong>オブジェクトの生成や依存関係の管理を開発者が直接行うのではなく、フレームワークが代わりに行うデザインパターン</strong>です。従来のプログラミングでは、オブジェクトが自身に必要な依存オブジェクトを生成したり、探したりして使用しますが、IoC ではフレームワーク（例：Spring）がオブジェクトの生成と依存性の注入を管理します。</p>

<p><strong>IoC の利点:</strong></p>

<ul>
  <li><strong>コードの結合度の低下:</strong> オブジェクト間の依存関係が外部から管理されるため、コードの結合度が低くなり、柔軟性が高まります。</li>
  <li><strong>コードの再利用性の向上:</strong> オブジェクトは必要な依存性を外部から注入されるため、様々な環境で再利用しやすくなります。</li>
  <li><strong>テスト容易性の向上:</strong> 依存性を簡単にモックオブジェクトに置き換えることができるため、単体テストが容易になります。</li>
</ul>

<p>Spring Framework は IoC コンテナを提供し、Bean と呼ばれるオブジェクトの生成、ライフサイクル管理、依存性注入などを自動化します。</p>

<h3 id="스프링에서-빈을-등록하는-방법">스프링에서 빈을 등록하는 방법</h3>

<p>Spring で Bean を登録する方法は主に以下の通りです。</p>

<ol>
  <li><strong>コンポーネントスキャン（<code class="language-plaintext highlighter-rouge">@Component</code>, <code class="language-plaintext highlighter-rouge">@Service</code>, <code class="language-plaintext highlighter-rouge">@Repository</code>, <code class="language-plaintext highlighter-rouge">@Controller</code>）:</strong> クラスに <code class="language-plaintext highlighter-rouge">@Component</code> のようなステレオタイプアノテーションを付与し、Spring の設定でコンポーネントスキャンを有効にすると、Spring コンテナが該当クラスを Bean として自動的に登録します。<code class="language-plaintext highlighter-rouge">@Service</code>, <code class="language-plaintext highlighter-rouge">@Repository</code>, <code class="language-plaintext highlighter-rouge">@Controller</code> は <code class="language-plaintext highlighter-rouge">@Component</code> の特殊な形式で、各レイヤーの意味を明確に示します。</li>
  <li><strong><code class="language-plaintext highlighter-rouge">@Bean</code> アノテーション:</strong> <code class="language-plaintext highlighter-rouge">@Configuration</code> アノテーションが付与された設定クラス内で、<code class="language-plaintext highlighter-rouge">@Bean</code> アノテーションを使用して Bean を登録できます。この方法は、外部ライブラリのクラスを Bean として登録したり、Bean の生成ロジックをカスタマイズしたりする場合に便利です。</li>
  <li><strong>XML 設定:</strong> 過去には XML ファイルを使用して Bean を定義する方法が主に使用されていましたが、最近ではアノテーションベースの設定がより多く使用されます。<code class="language-plaintext highlighter-rouge">&lt;bean&gt;</code> タグを使用して Bean を定義し、属性を通じて依存関係を設定できます。</li>
</ol>

<h3 id="의존성-주입di-dependency-injection의-방법">의존성 주입(DI, Dependency Injection)의 방법</h3>

<p>依存性注入（DI）とは、<strong>オブジェクトが必要とする依存性（他のオブジェクト）を、オブジェクト自身が生成したり探したりするのではなく、外部から注入される</strong>という考え方です。Spring では主に以下の方法で依存性が注入されます。</p>

<ol>
  <li><strong>コンストラクタインジェクション（Constructor Injection）:</strong> コンストラクタの引数を通じて依存性を注入する方法です。必須の依存関係を明確に示すことができ、不変性を確保するのに有利です。Spring ではコンストラクタインジェクションを推奨しています。</li>
  <li><strong>セッターインジェクション（Setter Injection）:</strong> セッターメソッドを通じて依存性を注入する方法です。オプションの依存関係を注入したり、オブジェクト生成後に依存関係を変更する必要がある場合に使用されることがあります。</li>
  <li><strong>フィールドインジェクション（Field Injection）:</strong> <code class="language-plaintext highlighter-rouge">@Autowired</code> アノテーションをフィールドに直接付与して依存性を注入する方法です。コードが簡潔になるという利点がありますが、テストが難しく、オブジェクト間の結合度が高くなる可能性があるため、一般的には推奨されません。</li>
</ol>

<p>Spring は IoC コンテナを通じて、これらの依存性注入を自動的に処理します。</p>

<h3 id="관점지향-프로그래밍apo-aspect-oriented-programming">관점지향 프로그래밍(APO, Aspect Oriented Programming)</h3>

<p>観点指向プログラミング（AOP）とは、<strong>アプリケーション全体に共通する関心事（横断的関心事、Cross-cutting Concerns）を、コアとなるビジネスロジックから分離してモジュール化するプログラミングパラダイム</strong>です。ロギング、トランザクション管理、セキュリティなどのように、複数の箇所で繰り返し使用される機能を AOP を通じて効率的に管理できます。</p>

<p><strong>AOP の主要な概念:</strong></p>

<ul>
  <li><strong>Aspect:</strong> 横断的関心事を実装したモジュールです。Spring では、クラスに <code class="language-plaintext highlighter-rouge">@Aspect</code> アノテーションを付与して定義します。</li>
  <li><strong>Advice:</strong> Aspect がいつ、どのような方法でコアロジックに影響を与えるかを定義します。<code class="language-plaintext highlighter-rouge">@Before</code>, <code class="language-plaintext highlighter-rouge">@After</code>, <code class="language-plaintext highlighter-rouge">@Around</code> などのアノテーションを使用してメソッドに適用します。</li>
  <li><strong>Pointcut:</strong> Advice を適用するジョインポイント（Joinpoint）を指定する表現です。</li>
  <li><strong>Joinpoint:</strong> Advice が適用される可能性のある特定の時点を指します。メソッドの実行、例外のスローなどがジョインポイントになり得ます。</li>
</ul>

<p>AOP を使用することで、コードの重複を減らし、コアロジックを変更することなく共通機能を追加したり修正したりできるため、保守性が向上します。</p>

<h3 id="vo-dao-dto">VO, DAO, DTO</h3>

<p>VO、DAO、DTO は、アプリケーションのアーキテクチャにおいて、データを管理し、転送するために使用されるデザインパターンです。</p>

<ul>
  <li><strong>VO (Value Object):</strong> 値を表現する不変のオブジェクトです。主にデータベースのテーブルの 1 行のデータを格納するために使用されます。値そのものを表現することが目的であるため、セッターメソッドを持たないことが多いです。</li>
  <li><strong>DAO (Data Access Object):</strong> データベースとのやり取りを担当するオブジェクトです。データベースへの接続、クエリの実行など、データアクセスに関するロジックをカプセル化し、ビジネスロジックからデータアクセス方法を隠蔽します。</li>
  <li><strong>DTO (Data Transfer Object):</strong> レイヤー間でデータを転送するために使用されるオブジェクトです。例えば、サービスレイヤーからプレゼンテーションレイヤーへデータを渡す際に使用されます。VO とは異なり、可変である場合があり、複数のテーブルのデータを結合したり、特定の画面に必要なデータのみを含んだりすることがあります。</li>
</ul>

<h3 id="싱글톤-패턴이란">싱글톤 패턴이란?</h3>

<p>シングルトンパターンとは、<strong>クラスのインスタンスが一つしか生成されないことを保証し、そのインスタンスへのグローバルなアクセスポイントを提供するデザインパターン</strong>です。アプリケーション内で唯一のインスタンスであるべきオブジェクト（例：設定マネージャー、ロギングオブジェクトなど）を作成する際に使用されます。</p>

<p><strong>シングルトンパターンの実装方法:</strong></p>

<ul>
  <li>private なコンストラクタを使用して、外部からのインスタンス生成を防ぎます。</li>
  <li>static なメンバ変数を通じて、唯一のインスタンスを保持します。</li>
  <li>static なメソッドを通じて、その唯一のインスタンスへのアクセスを提供します。</li>
</ul>

<p>Spring Framework で管理される Bean は、デフォルトでシングルトンスコープを持ちます。つまり、Spring コンテナ内でその Bean のインスタンスは一つだけ生成され、共有されます。</p>

<h3 id="jpa-마이바티스-등에서-n1-문제의-의미와-발생하는-이유는">JPA, 마이바티스 등에서 N+1 문제의 의미와 발생하는 이유는?</h3>

<p>N+1問題とは、ORM（JPA）やデータマッパー（MyBatis）などを使用する際に発生する<strong>パフォーマンス上の問題</strong>です。主に関連エンティティを持つエンティティのリストをフェッチする際に発生し、<strong>1つのメインクエリを実行した後、関連するエンティティをロードするためにN回追加のクエリが実行される現象</strong>を指します。</p>

<p><strong>発生理由:</strong></p>

<ul>
  <li><strong>遅延ロード（Lazy Loading）の設定:</strong> 関連エンティティが必要になったときにのみロードするように遅延ロードが設定されている場合、メインエンティティをロードした後、各メインエンティティに関連するエンティティにアクセスするたびに、追加のクエリが実行されます。</li>
  <li><strong>ORM の動作:</strong> ORM はオブジェクトグラフとしてデータを管理しようとするため、関連データを自動的にロードしようとする場合があります。</li>
</ul>

<p><strong>例（JPAの場合）:</strong></p>

<p>例えば、<code class="language-plaintext highlighter-rouge">Order</code> エンティティと <code class="language-plaintext highlighter-rouge">OrderItem</code> エンティティが一対多の関係を持っているとします。全ての注文をフェッチするクエリを実行した後、各注文に紐づく注文アイテムを遅延ロードでアクセスしようとすると、注文の数だけ追加のクエリが <code class="language-plaintext highlighter-rouge">OrderItem</code> テーブルに対して実行され、合計で N+1 回のクエリが発生します。</p>

<p><strong>解決策:</strong></p>

<ul>
  <li><strong>早期ロード（Eager Loading）:</strong> 関連エンティティをメインクエリの時点で一緒にロードするように設定します。</li>
  <li><strong>Fetch Join/Fetch Select (JPA):</strong> JPQL や Criteria API で Fetch Join または Fetch Select を使用して、必要な関連データを一度のクエリで取得します。</li>
  <li><strong>Batch Size の設定 (MyBatis など):</strong> MyBatis のようなフレームワークでは、一度のクエリで複数の関連データをロードできるように、Batch Size を設定できます。</li>
</ul>

<p>N+1問題はアプリケーションのパフォーマンスに深刻な影響を与える可能性があるため、注意深く管理し、適切な解決策を適用する必要があります。</p>]]></content><author><name>&lt;firstname&gt; &lt;lastname&gt;</name><email>&lt;mail@domain.tld&gt;</email></author><category term="theory" /><summary type="html"><![CDATA['일본 기업 기술면접 준비에 관한 정리']]></summary></entry></feed>