https://tistory1.daumcdn.net/tistory/5040510/attach/84183ede01e04b049854cedefb4deee7

https://ananas.tistory.com/54#entry54comment

<h3 data-ke-size="size23">시맨틱 태그란?</h3>
시맨틱 태그란 의미가 있는 태그이다. header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다.
<h3 data-ke-size="size23">시맨틱 태그를 왜 사용해야 할까?</h3>
<h4 data-ke-size="size20">- 검색엔진 최적화(SEO)</h4>
검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그럴 때, 의미있는 태그를 사용하면 좀 더 정확한 구조로 분석할 수 있도록 도울 수 있다.
<h4 data-ke-size="size20">- 쉬운 소스코드 구조화</h4>
브라우저가 웹 문서의 소스 코드를 보고 어느 부분이 헤더인지, 어느 부분이 본문인지를 쉽게 알아낼 수 있다. 웹 문서를 분석하는 서비스 (ex. 스크린 리더기) 같은 것들이 있을 때 분석하기 용이해진다.
<h4 data-ke-size="size20">- 코드 가독성 향상</h4>
여러 사람과 함께 작업을 할 때, 굳이 클래스를 지정하지 않아도 쉽게 어느 부분이 헤더 영역이고, 본문 영역인지 쉽게 알 수 있다. 그래서 유지보수를 하기도 쉬워진다.
<h2 data-ke-size="size26">시맨틱 태그의 종류</h2>
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="219" data-origin-height="258"><span data-url="https://blog.kakaocdn.net/dn/cGmwTV/btrUuvy9OQi/uiK9WTqsTNKoc7Q6hvDhb1/img.gif" data-phocus="https://blog.kakaocdn.net/dn/cGmwTV/btrUuvy9OQi/uiK9WTqsTNKoc7Q6hvDhb1/img.gif" data-alt="출처: w3school.com"><img src="https://blog.kakaocdn.net/dn/cGmwTV/btrUuvy9OQi/uiK9WTqsTNKoc7Q6hvDhb1/img.gif" srcset="https://blog.kakaocdn.net/dn/cGmwTV/btrUuvy9OQi/uiK9WTqsTNKoc7Q6hvDhb1/img.gif" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="219" height="258" data-origin-width="219" data-origin-height="258"/><figcaption>출처: w3school.com</figcaption>
</figure>

header: 헤더 영역에 사용하는 태그. 로고 등이 들어있다.
nav: 네비게이션 바(메뉴) 영역에 사용하는 태그.
section: article 보다 큰 영역을 나타낼 때 사용하는 태그.
article: 보통 제목 태그와 문단 태그를 포함하며, 개별 콘텐츠에 사용하는 태그.
aside: 사이드 영역에 사용하는 태그. 보통 top버튼이나 본문 영역과 별개의 내용을 포함한다.
footer: 풋터 영역에 사용하는 태그. 회사의 정보 등이 들어있다.

https://ananas.tistory.com/51#entry51comment

<h3 data-ke-size="size23">이벤트 등록</h3>
웹 어플리케이션에서 사용자의 입력을 받기 위해 필요한 기능이다. 대표적으로 addEventListener()는 웹 개발자들이 화면에 동적인 기능을 추가하기 위해 자연스럽게 접하게 디는 기본적인 기능이다.
<pre id="code_1670988902353" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>// 이벤트 등록
&lt;button&gt;add one item&lt;/button&gt;

&lt;script&gt;
 var button = document.querySelector('button');
 button.addEventListener('click', addItem);

 function addItem(event) {
 console.log(event);
 }
&lt;/script&gt;</code></pre>
&nbsp;
<h3 data-ke-size="size23">이벤트 버블링(Event Bubbling)</h3>
특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="914" data-origin-height="814"><img src="https://blog.kakaocdn.net/dn/mQDK7/btrTCfP2YYd/ntz8Ms7PnQxyGGBUIHKbq0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmQDK7%2FbtrTCfP2YYd%2Fntz8Ms7PnQxyGGBUIHKbq0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="436" height="388" data-origin-width="914" data-origin-height="814"/><figcaption>이벤트 버블링</figcaption>
</figure>

<pre id="code_1670989282899" class="xml" data-ke-language="html" data-ke-type="codeblock"><code>// 이벤트 버블링
&lt;body&gt;
	&lt;div class="one"&gt;
		&lt;div class="two"&gt;
			&lt;div class="three"&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;

&lt;script&gt;
 var divs = document.querySelectorAll('div');
 divs.forEach(function(div) {
 div.addEventListener('click', logEvent);
 });

 function logEvent(event) {
 console.log(event.currentTarget.className);
 }
&lt;/script&gt;</code></pre>
위의 예제 코드를 실행하고 &lt;div class="three"&gt;&lt;/div&gt;를 클릭하여 이벤트를 발생시키면 아래와 같은 결과가 콘솔창에 찍힌다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="498" data-origin-height="154"><img src="https://blog.kakaocdn.net/dn/bnBChx/btrTzkrxGyT/LLNMuKh4Jj3mSYAKmFbXwK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbnBChx%2FbtrTzkrxGyT%2FLLNMuKh4Jj3mSYAKmFbXwK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="333" height="103" data-origin-width="498" data-origin-height="154"/></figure>

한 개의 div 태그만 클릭했는데 왜 3개의 이벤트가 발생할까? 그 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. 여기서 주의할 점은 각 태그마다 이벤트가 등록되어 있기 때문에 상위 요소로 이벤트가 전달되는 것이며, 만약 이벤트가 특정 div 태그에만 걸려 있다면 위와 같은 동작 결과는 확인할 수 없다.
&nbsp;
<h3 data-ke-size="size23">이벤트 캡처링(Event Capture)</h3>
이벤트 캡처링은 이벤트 버블링과 반대 방향인 하위 요소로 진행되는 이벤트 전파 방식이다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="918" data-origin-height="840"><span data-url="https://blog.kakaocdn.net/dn/bY2XTu/btrTAbgz8fK/osaRrKxaDkTihqD1eFMovK/img.png" data-phocus="https://blog.kakaocdn.net/dn/bY2XTu/btrTAbgz8fK/osaRrKxaDkTihqD1eFMovK/img.png" data-alt="이벤트 캡처링"><img src="https://blog.kakaocdn.net/dn/bY2XTu/btrTAbgz8fK/osaRrKxaDkTihqD1eFMovK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbY2XTu%2FbtrTAbgz8fK%2FosaRrKxaDkTihqD1eFMovK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="362" height="331" data-origin-width="918" data-origin-height="840"/><figcaption>이벤트 캡처링</figcaption>
</figure>

<pre id="code_1670989762568" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>// 이벤트 캡처링
&lt;body&gt;
	&lt;div class="one"&gt;
		&lt;div class="two"&gt;
			&lt;div class="three"&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;

&lt;script&gt;
 var divs = document.querySelectorAll('div');
 divs.forEach(function(div) {
 div.addEventListener('click', logEvent, {
 capture: true // default 값은 false입니다.
 });
 });

 function logEvent(event) {
 console.log(event.currentTarget.className);
 }
&lt;/script&gt;</code></pre>
addEventListener()&nbsp;API에서 옵션 객체에&nbsp;capture:true를 설정해주면, 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색합니다. 마찬가지로 위이 코드를 실행하고 &lt;div class="three"&gt;&lt;/div&gt;를 클릭하여 이벤트를 발생시키면 아래와 같은 결과가 콘솔창에 찍힌다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="274" data-origin-height="164"><img src="https://blog.kakaocdn.net/dn/csFqqx/btrTChf2NBm/43mOyBpBld13s5lTfesaDk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcsFqqx%2FbtrTChf2NBm%2F43mOyBpBld13s5lTfesaDk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="274" height="164" data-origin-width="274" data-origin-height="164"/></figure>

&nbsp;
<h3 data-ke-size="size23">event.target</h3>
부모의 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있다. 이벤트가 발생한 가장 안쪽의 요소는 target 요소라고 불리고, event.target을 사용해 접근할 수 있다. 이때 event.target은 실제 이벤트가 시작된 &lsquo;타깃&rsquo; 요소이며, 버블링이 진행되어도 변하지 않는다. 반면 this(=event.target)은 &lsquo;현재&rsquo; 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조하는 차이점이 있다.
&nbsp;
<h3 id="eventstoppropagation" data-ke-size="size23">이벤트 전파 막기</h3>
이벤트 전파를 막기 위해서는 이벤트 객체 매서드인 event.stopPropagation()를 사용하면 된다.
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
event.stopImmediatePropagation()
<div>
한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작합니다.
event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못합니다.
버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막으려면&nbsp;event.stopImmediatePropagation()을 사용해야 합니다. 이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않습니다.
</div>
</div>
</div>
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
꼭 필요한 경우를 제외하곤 버블링을 막지 마세요!
<div>
버블링은 유용합니다. 버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지 마세요. 아키텍처를 잘 고려해 진짜 막아야 하는 상황에서만 버블링을 막으세요.
event.stopPropagation()은 추후에 문제가 될 수 있는 상황을 만들어낼 수 있습니다.
문제가 발생할만한 시나리오를 살펴봅시다.
<ol style="list-style-type: disc;" data-ke-list-type="disc">
<li>중첩 메뉴를 만들었다 가정합시다. 각 서브메뉴(submenu)에 해당하는 요소에서 클릭 이벤트를 처리하도록 하고, 상위 메뉴의 클릭 이벤트 핸들러는 동작하지 않도록&nbsp;stopPropagation을 적용합니다.</li>
<li>사람들이 페이지에서 어디를 클릭했는지 등의 행동 패턴을 분석하기 위해, window내에서 발생하는 클릭 이벤트 전부를 감지하기로 결정합니다. 일부 분석 시스템은 그렇게 분석합니다. 이런 분석 시스템의 코드는 클릭 이벤트를 감지하기 위해&nbsp;document.addEventListener('click'&hellip;)을 사용합니다.</li>
<li>stopPropagation로 버블링을 막아놓은 영역에선 분석 시스템의 코드가 동작하지 않기 때문에, 분석이 제대로 되지 않습니다. 안타깝게도&nbsp;stopPropagation을 사용한 영역은 '죽은 영역(dead zone)'이 되어버립니다.</li>
</ol>
이벤트 버블링을 막아야 하는 경우는 거의 없습니다. 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있습니다. 커스텀 이벤트 사용 방법은 추후에 다루겠습니다. 핸들러의&nbsp;event&nbsp;객체에 데이터를 저장해 다른 핸들러에서 읽을 수 있게 하면, 아래쪽에서 무슨 일이 일어나는지를 부모 요소의 핸들러에게 전달할 수 있으므로, 이 방법으로도 이벤트 버블링을 통제할 수 있습니다.
</div>
</div>
</div>
&nbsp;
<h3 id="이벤트-위임---event-delegation" data-ke-size="size23">이벤트 위임 (Event Delegation)</h3>
이벤트 위임은 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식이다. 예를 들어 이벤트가 위임되는 시점의 요소 개수와 이벤트 실행 시점의 요소 개수가 달라 위임 시점에 없었던 요소에 이벤트가 위임되지 않는다면 원하는 요소에 이벤트가 작동되지 않을 수 있다. 이러한 상황을 막기 위해 상위 요소에 이벤트를 부여하여 이벤트를 제어할 수도 있다.
&nbsp;
<a href="https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/" target="_blank" rel="noopener">https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/</a>
<figure id="og_1670989193584" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지" data-og-description="(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다." data-og-host="joshua1988.github.io" data-og-source-url="https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/" data-og-url="https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/" data-og-image="https://scrap.kakaocdn.net/dn/cC4yR9/hyQTIs4cTV/mRpwm66Kku2FLiZpZchaP0/img.png?width=580&amp;height=400&amp;face=0_0_580_400,https://scrap.kakaocdn.net/dn/W4QxO/hyQTJrZFTQ/0eu0hpVJHCS6PuyUb38Qn0/img.png?width=461&amp;height=460&amp;face=0_0_461_460,https://scrap.kakaocdn.net/dn/H99Q5/hyQTHOsKad/OMavOdNzyTARtvdZKmaaK1/img.png?width=918&amp;height=840&amp;face=0_0_918_840"><a href="https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/" target="_blank" rel="noopener" data-source-url="https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/cC4yR9/hyQTIs4cTV/mRpwm66Kku2FLiZpZchaP0/img.png?width=580&amp;height=400&amp;face=0_0_580_400,https://scrap.kakaocdn.net/dn/W4QxO/hyQTJrZFTQ/0eu0hpVJHCS6PuyUb38Qn0/img.png?width=461&amp;height=460&amp;face=0_0_461_460,https://scrap.kakaocdn.net/dn/H99Q5/hyQTHOsKad/OMavOdNzyTARtvdZKmaaK1/img.png?width=918&amp;height=840&amp;face=0_0_918_840');">&nbsp;</div>
<div class="og-text">
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.
joshua1988.github.io
</div>
</a></figure>
&nbsp;
<a href="https://ko.javascript.info/bubbling-and-capturing" target="_blank" rel="noopener">https://ko.javascript.info/bubbling-and-capturing</a>
<figure id="og_1670990106965" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="버블링과 캡처링" data-og-description="" data-og-host="ko.javascript.info" data-og-source-url="https://ko.javascript.info/bubbling-and-capturing" data-og-url="https://ko.javascript.info/bubbling-and-capturing" data-og-image="https://scrap.kakaocdn.net/dn/bAmbsg/hyQTNOGsa4/yZ5JXZqaM8szxKYXcp5X4K/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630,https://scrap.kakaocdn.net/dn/hjZ2x/hyQRRSHydh/Kq9rYsyDZwF3apYqARuDtk/img.png?width=512&amp;height=512&amp;face=0_0_512_512"><a href="https://ko.javascript.info/bubbling-and-capturing" target="_blank" rel="noopener" data-source-url="https://ko.javascript.info/bubbling-and-capturing">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bAmbsg/hyQTNOGsa4/yZ5JXZqaM8szxKYXcp5X4K/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630,https://scrap.kakaocdn.net/dn/hjZ2x/hyQRRSHydh/Kq9rYsyDZwF3apYqARuDtk/img.png?width=512&amp;height=512&amp;face=0_0_512_512');">&nbsp;</div>
<div class="og-text">
버블링과 캡처링
&nbsp;
ko.javascript.info
</div>
</a></figure>
&nbsp;

이벤트 버블링(Event Bubbling)과 캡처링(Event Capture)

https://ananas.tistory.com/49#entry49comment

.gitignore 파일은 Git의 root 디렉토리에 저장되어, Git Repository나 Staging Area에 추가되지 말아야하는 폴더나 파일을 정의하는 파일이다. .gitignore에 정의된 파일이나 폴더는 Staging 되지 않기 때문에 tracking 되지도 않는다. 그래서 git status를 이용했을 때 보이지 않는다.
가끔 .gitignore를 설정해도 작동하지 않을 때가 있다. ignore처리된 파일이 자꾸 changes에 나온다. 이때는 git의 캐시를 삭제하고 커밋, 푸시하면 정리가 된다.
<pre id="code_1667457595879" class="bash" data-ke-language="bash" data-ke-type="codeblock"><code>$ git rm -r --cached .
$ git add .
$ git commit -m "fixed untracked files"</code></pre>
&nbsp;
참조
<a href="https://git-scm.com/docs/gitignore">https://git-scm.com/docs/gitignore</a>
<a href="https://stackoverflow.com/questions/11451535/gitignore-is-ignored-by-git">https://stackoverflow.com/questions/11451535/gitignore-is-ignored-by-git</a>

https://ananas.tistory.com/43#entry43comment

요즘은 웹도 다크모드를 사용하는 사람이 많다. 데스크탑이나 노트북에서는 시스템 내 다크모드 설정을 켜면 되지만, 개발단계에서 간편하게 확인 할 때는 크롬 개발자 모드에 세로 ... 에 들어가서 도구 더보기(more tools)에 렌더링(rendering)을 켜면 css 미디어 기능 prefers-color-scheme로 사용할 수 있다.
다크 모드 개발시에 css에 미디어쿼리로 쉽게 개발 할 수 있다.
<pre id="code_1655812903934" class="css" data-ke-language="css" data-ke-type="codeblock"><code>@media (prefers-color-scheme : dark){
	.nav{
 	background: #000000;
 color: white;
 }
}</code></pre>
&nbsp;
그리고 OS 애니메이션 기능을 꺼두었을 때 적용 방법은 아래와 같다.
<pre id="code_1655813213782" class="css" data-ke-language="css" data-ke-type="codeblock"><code>@media (prefers-reduced-motion){
	css 작성
}</code></pre>
&nbsp;
출처는 코딩애플. 요즘 보고 있는 유튜버인데 너무 재밌고 찰지게 설명 잘해주신다.
<a href="https://www.youtube.com/watch?v=TlRkmSEMV6w">https://www.youtube.com/watch?v=TlRkmSEMV6w</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=TlRkmSEMV6w" data-video-thumbnail="https://scrap.kakaocdn.net/dn/sFHQR/hyOQw2AwP9/kIF84HoOfCeGNc0wacraSk/img.jpg?width=480&amp;height=360&amp;face=0_0_480_360" data-video-width="480" data-video-height="360" data-video-origin-width="480" data-video-origin-height="360" data-ke-mobilestyle="widthContent" data-original-url="" data-video-title=""><iframe src="https://www.youtube.com/embed/TlRkmSEMV6w" width="480" height="360" frameborder="" allowfullscreen="true"></iframe>
<figcaption style="display: none;"></figcaption>
</figure>
&nbsp;

https://ananas.tistory.com/41#entry41comment

가장 널리 사용되고 있는 관계형 데이터베이스 관리 시스템(RDBMS: Relational DBMS) 오픈 소스, 다중 사용자와 다중 스레드를 지원 여러 프로그래밍 언어를 위한 다양한 API 제공 유닉스, 리눅스, 윈도우 등 다양한 운영체제에서 사용할 수 있으며, 특히 PHP와 함께 웹개발에 자주 사용 오픈 소스 라이센스를 따르지만, 상업적 사용시 라이센스 구입 필요
SQL 분류
DML(Data Manipulation Language) 데이터 조작 언어 데이터를 조작(CRUD)할 때 사용되는 언어 DML 구문이 사용되는 대상은 테이블의 행 DML 사용하기 위해서는 꼭 그 이전에 테이블이 정의되어 있어야 함 SQL문 중 SELECT, INSERT, UPDATE, DELETE가 이 구문에 해당 트랜잭션이 발생하는 SQL도 이 DML에 속함 - 테이블의 데이터를 변경할 때 실제 테이블에 완전히 적용하지 않고, 임시로 적용시키는 것 - 취소 가능
DDL (Data Definition Language) 데이터 정의 언어 데이터베이스, 테이블 뷰, 인덱스 등의 데이터베이스 개체를 제어하는 역할 CREATE, DROP, ALTER 구문 DDL은 트랜잭션 발생시키지 않음 ROLLBACK이나 COMMIT사용 불가 DDL문은 실행 즉시 MySQL에 적용
DCL (Data Control Language) 데이터 제어 언어 사용자에게 어떤 권한을 부여하거나 빼앗을 때 주로 사용하는 구문 GRANT/REVOKE/DENY
<a href="https://www.youtube.com/watch?v=vgIc4ctNFbc">https://www.youtube.com/watch?v=vgIc4ctNFbc</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=vgIc4ctNFbc" data-video-thumbnail="https://scrap.kakaocdn.net/dn/Bs7TO/hyONQ0Oziq/eNmQvv3vR6iginSrPKLMvK/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720" data-video-width="860" data-video-height="484" data-video-origin-width="860" data-video-origin-height="484" data-ke-mobilestyle="widthContent"><iframe src="https://www.youtube.com/embed/vgIc4ctNFbc" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;

https://ananas.tistory.com/3#entry3comment

두번째 시련이 찾아왔다.
MySQL 서버에 비밀번호를 걸고 싶은데... 아무리 구글링을 해도 터미널 제어만 나온다.
문제는 터미널에 아무리 mysql을 호출해도 그 녀석의 권한이 없다는 것.
대신 xampp내에서 설정하는 방법을 찾았다!!!
&nbsp;
시작해보자.
&nbsp;
우선 xampp를 실행한다. 서버도 실행한다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-03 오후 3.28.22.png" data-origin-width="782" data-origin-height="590"><img src="https://blog.kakaocdn.net/dn/Edy3o/btrslWQ6jRH/KkM3AxBduxhqyRVekzIYB0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEdy3o%2FbtrslWQ6jRH%2FKkM3AxBduxhqyRVekzIYB0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="782" height="590" data-filename="스크린샷 2022-02-03 오후 3.28.22.png" data-origin-width="782" data-origin-height="590"/></figure>

그리고 브라우저에 localhost/phpmyadmin에 접속한다.
&nbsp;
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-03 오후 3.29.16.png" data-origin-width="2227" data-origin-height="210"><img src="https://blog.kakaocdn.net/dn/bqiEom/btrr9yXSnXP/LxF7k9pcCUckXQ5x0buLXk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbqiEom%2Fbtrr9yXSnXP%2FLxF7k9pcCUckXQ5x0buLXk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2227" height="210" data-filename="스크린샷 2022-02-03 오후 3.29.16.png" data-origin-width="2227" data-origin-height="210"/></figure>

&nbsp;
상단에 보면 사용자 계정이 있다. 들어간다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-03 오후 3.32.08.png" data-origin-width="733" data-origin-height="324"><img src="https://blog.kakaocdn.net/dn/qnMuF/btrr6AaCwo6/oLdolhsckLkPNWbYM3kbm0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqnMuF%2Fbtrr6AaCwo6%2FoLdolhsckLkPNWbYM3kbm0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="733" height="324" data-filename="스크린샷 2022-02-03 오후 3.32.08.png" data-origin-width="733" data-origin-height="324"/></figure>

이렇게 사용자 개요에 테이블이 나오는데 사용자명 root에 호스트명이 localhost에 권한 수정을 누른다.
나는 현재 비밀번호는 설정해둬서 암호란에 예가 나오지만 암호 설정을 안 했다면 아니오가 나올 것이다.
째든 권한 수정에 들어가서 상단에 있는 암호수정/Change password에 들어가 암호를 수정하고 실행버튼을 누르면 1단계가 끝이다.
&nbsp;
다음은 다시 xampp다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-03 오후 3.45.06.png" data-origin-width="782" data-origin-height="590"><img src="https://blog.kakaocdn.net/dn/QtEH9/btrsfRQajhk/bPgtsFAlJYZYgK8Gzp1Qkk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQtEH9%2FbtrsfRQajhk%2FbPgtsFAlJYZYgK8Gzp1Qkk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="782" height="590" data-filename="스크린샷 2022-02-03 오후 3.45.06.png" data-origin-width="782" data-origin-height="590"/></figure>

Open Application Folder를 누른다.
그러면 xamppfiles폴더 안에 phpadmin폴더에 config.inc.php라는 파일이 있다.
바로 옆에 config.sample.inc.php도 있지만 속지 마시고 잘 찾으셔야 한다.
&nbsp;
<h4 data-ke-size="size20">xamppfiles/phpadmin/config.inc.php</h4>
해당 파일을 실행하면 권한을 요청하는데 본인 mac 비밀번호를 넣으면 된다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-03 오후 3.49.47.png" data-origin-width="2452" data-origin-height="2334"><img src="https://blog.kakaocdn.net/dn/kxl39/btrssCYaljb/rJP9pMhoB5VRoPyuokwEVk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fkxl39%2FbtrssCYaljb%2FrJP9pMhoB5VRoPyuokwEVk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2452" height="2334" data-filename="스크린샷 2022-02-03 오후 3.49.47.png" data-origin-width="2452" data-origin-height="2334"/></figure>

나는 비주얼코드 스튜디오를 사용 중이라 이렇게 열렸다.
스크롤을 많이 내릴 것 없이 아래 패스워드 부분 값이 공란인게 보인다.
저 부분에 앞서 phpmyadmin에 넣었던 패스워드를 입력해준다.
중요하다 둘이 다르면 연동이 안된다...;;
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-03 오후 3.53.02.png" data-origin-width="556" data-origin-height="138"><img src="https://blog.kakaocdn.net/dn/cvMClo/btrsfWSam1L/I2zKcsGXoVu0nqHD8FmftK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcvMClo%2FbtrsfWSam1L%2FI2zKcsGXoVu0nqHD8FmftK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="556" height="138" data-filename="스크린샷 2022-02-03 오후 3.53.02.png" data-origin-width="556" data-origin-height="138"/></figure>

그리고 저장하면 권한요청을 하는데 Sudo로 다시 시도...를 누르고 맥 비밀번호를 입력한다.
마지막으로 xampp 서버를 Restart All 하시면 끝!

https://ananas.tistory.com/2#entry2comment

안녕하세요.
오늘은 php를 사용하기에 앞서 Xampp를 설치해 보겠습니다.
제 맥북은 intel이 장착된 구형 15인치 프로 모델입니다. 벌써 5년째 함께하고 있어요... 지겨워...
OS 버전은 현 시각(2022.01.27) macOS Monterey 12.1이니 참고해주세요.
&nbsp;
저도 처음엔 제대로 설치하지 못해서 많이 헤맸습니다만, <a href="https://youtu.be/1GevfhBGGWs" target="_blank" rel="noopener">유튜브에 친절한 영상(링크)</a>이 있어서 보고 참고했습니다!
링크 속 유튜버는 외국분이시고 영어로 설명하지만 얼마나 많이 봤는지 무려 한국어 자막이 있었습니다!
세계로 뻗어나가는 한국인...ㅎ
&nbsp;
그럼 시작하겠습니다!
&nbsp;
<a href="https://www.apachefriends.org/index.html" target="_blank" rel="noopener">우선 Xampp홈페이지에 접속합니다.(링크)</a>
<figure class="imageblock widthContent" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.13.21.png" data-origin-width="2668" data-origin-height="2274"><img src="https://blog.kakaocdn.net/dn/bFAzD5/btrrUOlsUOc/KTLc2Zu3LiKk1ftaRYmpAk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbFAzD5%2FbtrrUOlsUOc%2FKTLc2Zu3LiKk1ftaRYmpAk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2668" height="2274" data-filename="스크린샷 2022-01-27 오후 5.13.21.png" data-origin-width="2668" data-origin-height="2274"/></figure>

상단에 보면 다운로드 탭이 있습니다. 클릭해 들어가시면 아래에 XAMPP for OS X라는 목록이 보입니다.
<figure class="imageblock widthContent" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.15.50.png" data-origin-width="2580" data-origin-height="2186"><img src="https://blog.kakaocdn.net/dn/cWZfhi/btrrTim4ysI/9PKxaFVfo9o5lar5z58FRK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcWZfhi%2FbtrrTim4ysI%2F9PKxaFVfo9o5lar5z58FRK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="2580" height="2186" data-filename="스크린샷 2022-01-27 오후 5.15.50.png" data-origin-width="2580" data-origin-height="2186"/></figure>

여기서 php 최신 사양의 버전을 다운로드하여주세요.
최신 버전의 Xampp는 mariaDB를 지원합니다.
<figure class="imageblock widthContent" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.29.37.png" data-origin-width="1032" data-origin-height="720"><img src="https://blog.kakaocdn.net/dn/biREtN/btrrTjsKVa7/i62NlLoZgLqIZkkwE92U01/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbiREtN%2FbtrrTjsKVa7%2Fi62NlLoZgLqIZkkwE92U01%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1032" height="720" data-filename="스크린샷 2022-01-27 오후 5.29.37.png" data-origin-width="1032" data-origin-height="720"/></figure>

다운을 받으면 당황스럽게도 처음 보는 확장자명의 파일이 있습니다. 누..구..?
압축 폴더 같아서 더블클릭을 하면 무한복제를 하는 이상한 파일... 여기서 포기하시면 안 됩니다.
저도 여기서 다른 파일을 마구 받다가 터미널 제어하는 상황까지 갔다가 왔어요...;;
&nbsp;
쨋든 mac에서 파일을 설치하는 확장자 명은 .dmg이니 당황하지 마시고 저 파일의 확장자 명을 바꿔줍니다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.33.04.png" data-origin-width="372" data-origin-height="346"><img src="https://blog.kakaocdn.net/dn/q0YVk/btrrPWZigUa/TOusB7H7wKD7vfCxCsCX2K/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fq0YVk%2FbtrrPWZigUa%2FTOusB7H7wKD7vfCxCsCX2K%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="372" height="346" data-filename="스크린샷 2022-01-27 오후 5.33.04.png" data-origin-width="372" data-origin-height="346"/></figure>

.dmg 사용을 눌러주세요.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.33.29.png" data-origin-width="1032" data-origin-height="720"><img src="https://blog.kakaocdn.net/dn/bB8oqZ/btrrU9CWNWR/FZXbbkHi7vzMNUHdTN3I40/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbB8oqZ%2FbtrrU9CWNWR%2FFZXbbkHi7vzMNUHdTN3I40%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1032" height="720" data-filename="스크린샷 2022-01-27 오후 5.33.29.png" data-origin-width="1032" data-origin-height="720"/></figure>

그러면 우리가 설치할 수 있는 파일로 대변신!!!
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.34.00.png" data-origin-width="578" data-origin-height="549"><img src="https://blog.kakaocdn.net/dn/boNhYV/btrrQzwm7ni/kBK5mdu7rgJi2o9KE9PKzK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FboNhYV%2FbtrrQzwm7ni%2FkBK5mdu7rgJi2o9KE9PKzK%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="578" height="549" data-filename="스크린샷 2022-01-27 오후 5.34.00.png" data-origin-width="578" data-origin-height="549"/></figure>
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.34.27.png" data-origin-width="1136" data-origin-height="978"><img src="https://blog.kakaocdn.net/dn/ccTCPZ/btrrUsiHQge/RMvWFY1YuzxCQpKhlEi4E1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FccTCPZ%2FbtrrUsiHQge%2FRMvWFY1YuzxCQpKhlEi4E1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1136" height="978" data-filename="스크린샷 2022-01-27 오후 5.34.27.png" data-origin-width="1136" data-origin-height="978"/></figure>

설치는 어려울 게 없습니다. 그냥 next를 믿고 쭉 따라가세요.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.35.25.png" data-origin-width="1032" data-origin-height="720"><img src="https://blog.kakaocdn.net/dn/DK7o3/btrrUsbV8Pf/F9EaGK6xRQpqW0ximFukL1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDK7o3%2FbtrrUsbV8Pf%2FF9EaGK6xRQpqW0ximFukL1%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1032" height="720" data-filename="스크린샷 2022-01-27 오후 5.35.25.png" data-origin-width="1032" data-origin-height="720"/></figure>

그러면 이렇게 Appliction, 응용 프로그램 안에 설치된 Xampp 프로그램과 파일을 만날 수 있습니다.
저는 처음에 Xampp가 macintosh HD 드라이브 바깥에 설치돼서 터미널로 연결해보겠다고 삽질을 했습니다...ㅜ
mac OS는 Apache가 이미 기본으로 깔려있어서 php만 연결하면 되는 줄 알았었지요...
터미널로 찍어봐도 Apache는 잡히고 php는 안 잡히니 속을 수밖에...
&nbsp;
설치를 했다면 잘 되는지 실행해볼까요.
manager-osx를 더블클릭해줍니다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.36.50.png" data-origin-width="782" data-origin-height="590"><img src="https://blog.kakaocdn.net/dn/uDROq/btrrPYiwGZY/hjo6VgR80pqrbXN8acE1f0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuDROq%2FbtrrPYiwGZY%2Fhjo6VgR80pqrbXN8acE1f0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="782" height="590" data-filename="스크린샷 2022-01-27 오후 5.36.50.png" data-origin-width="782" data-origin-height="590"/></figure>

그럼 Xampp가 이렇게 실행됩니다.
상단 탭에 Manage Servers에 들어갑니다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.38.26.png" data-origin-width="782" data-origin-height="590"><img src="https://blog.kakaocdn.net/dn/bIvg7G/btrrQyc9iwW/yncdB8K7oX6dnQLz09wpmk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbIvg7G%2FbtrrQyc9iwW%2FyncdB8K7oX6dnQLz09wpmk%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="782" height="590" data-filename="스크린샷 2022-01-27 오후 5.38.26.png" data-origin-width="782" data-origin-height="590"/></figure>

그럼 이렇게 빨간불이 들어온 내 인생... 이 아닌 상태가 보입니다.
하단의 Start All을 눌러주세요.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.39.21.png" data-origin-width="782" data-origin-height="590"><img src="https://blog.kakaocdn.net/dn/3e25I/btrrWBeph1Q/x3MxW2ejEE3bktPxqc6h30/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3e25I%2FbtrrWBeph1Q%2Fx3MxW2ejEE3bktPxqc6h30%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="782" height="590" data-filename="스크린샷 2022-01-27 오후 5.39.21.png" data-origin-width="782" data-origin-height="590"/></figure>

짜잔!
마지막으로 인터넷 브라우저에서 주소창에 localhost를 입력하세요.
그러면 창에 It works!라는 메신저가 출력되거나 또는 XAMPP/xamppfiles 폴더 안에 HTCDOCS 폴더에 있는 index.php가 실행될 것입니다.
이게 제대로 된다면 Apache가 제대로 작동하고 있다는 뜻입니다.
&nbsp;
&nbsp;
그럼 다시 인터넷 브라우저에 주소창에 localhost/phpmyadmin을 입력합니다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-01-27 오후 5.44.55.png" data-origin-width="1334" data-origin-height="1167"><img src="https://blog.kakaocdn.net/dn/Z1Plz/btrrV9I9DZb/JmKdsat2EGllHw6dztdhm0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZ1Plz%2FbtrrV9I9DZb%2FJmKdsat2EGllHw6dztdhm0%2Fimg.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" loading="lazy" width="1334" height="1167" data-filename="스크린샷 2022-01-27 오후 5.44.55.png" data-origin-width="1334" data-origin-height="1167"/></figure>

이렇게 접속이 되신다면 정상 설치가 된 것입니다!
&nbsp;
다음에는 php를 공부하면서 mac의 파일 확장자 권한 때문에 생긴 대환장 쇼를 알아보도록 할게요~ 안녕!

:LOGO

BLOG POSTS

시맨틱 태그(Semantic Tag)

이벤트 버블링(Event Bubbling)과 캡처링(Event Capture)

.gitignore가 적용되지 않을 때!

다크모드 CSS

MySQL

Mac 맥에서 Xampp MySQL 설정하기