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';" 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/53#entry53comment

부족한 CS지식을 채우고자 책 모던 자바스크립트 Deep Dive를 읽고 있다. 찾아보니 인프런에 관련 무료 강의가 있어 함께 공부한다.
<h3 data-ke-size="size23">들어가며</h3>
자바스크립트는 웬만해서 에러 없이 실행되며, 작은 실수는 알아서 대응해 주는 등, 자바스크립트 엔진 내부에서 암묵적으로 처리해주기도 하는 친절한 언어다. 이러한 자바스크립트의 태생적 특징은 편리한 경우도 있지만, 내부 동작을 이해하기 어렵게 만든다. 프로그래머의 역할은 요구사항을 기반으로 문제를 해결하기 위한 방안을 고안하고 코드로 구현하는 것이다. 구현된 코드는 의도한 대로 정확히 동작해서 문제를 해결해야 한다. 이때 자신이 구현한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측 가능해야 하며, 이를 명확히 설명할 수 있어야 한다. 그러자면 프로그래밍 언어의 기본 개념과 동작 원리를 정확히 이해하는 것이 중요하다. 기본 개념은 문맥에 맞는 정확한 용어를 구사할 수 있는 원동력으로 명확한 의사소통을 가능하게 한다. 또, 동작 원리의 이해는 코드의 동작을 예측 가능하게 하며 코드 독해의 원천이다.&nbsp; 해서 모던 자바스크립트 Deep Dive의 부제는 자바스크립트의 기본 개념과 동작 원리다. 이 밖에도 들어가며에서는 자바스크립트 공부방법으로 기본 개념과 동작 원리에서 코딩 스킬과 프로젝트의 피라미드를 이야기한다. 그러면서 의도적인 연습을 해야한다고 하는데, 이와 관련된 링크는 아래에 첨부하겠다.
<a href="http://www.yes24.com/Product/Goods/92742567" target="_blank" rel="noopener">http://www.yes24.com/Product/Goods/92742567</a>
<figure id="og_1671194609242" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="book" data-og-title="모던 자바스크립트 Deep Dive - YES24" data-og-description="『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드" data-og-host="www.yes24.com" data-og-source-url="http://www.yes24.com/Product/Goods/92742567" data-og-url="http://www.yes24.com/Product/Goods/92742567" data-og-image="https://scrap.kakaocdn.net/dn/bb1iaD/hyQU7Um5OL/21j9ucxQnARiPwnMIXS57K/img.jpg?width=983&amp;height=1200&amp;face=0_0_983_1200,https://scrap.kakaocdn.net/dn/c9J17L/hyQUU1LUXS/HHsn2gEhk7ZIOde3iLH9FK/img.jpg?width=983&amp;height=1200&amp;face=0_0_983_1200,https://scrap.kakaocdn.net/dn/bH0a3b/hyQUYXqxst/LoXLxG4LmskuDLjjxRrwCK/img.jpg?width=983&amp;height=1200&amp;face=0_0_983_1200"><a href="http://www.yes24.com/Product/Goods/92742567" target="_blank" rel="noopener" data-source-url="http://www.yes24.com/Product/Goods/92742567">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bb1iaD/hyQU7Um5OL/21j9ucxQnARiPwnMIXS57K/img.jpg?width=983&amp;height=1200&amp;face=0_0_983_1200,https://scrap.kakaocdn.net/dn/c9J17L/hyQUU1LUXS/HHsn2gEhk7ZIOde3iLH9FK/img.jpg?width=983&amp;height=1200&amp;face=0_0_983_1200,https://scrap.kakaocdn.net/dn/bH0a3b/hyQUYXqxst/LoXLxG4LmskuDLjjxRrwCK/img.jpg?width=983&amp;height=1200&amp;face=0_0_983_1200');">&nbsp;</div>
<div class="og-text">
모던 자바스크립트 Deep Dive - YES24
『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드
www.yes24.com
</div>
</a></figure>
<a href="https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C" target="_blank" rel="noopener">https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C</a>
<figure id="og_1671193392111" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="[무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의" data-og-description="《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!, - 강의 소개 | 인프런..." data-og-host="www.inflearn.com" data-og-source-url="https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C" data-og-url="https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C" data-og-image="https://scrap.kakaocdn.net/dn/bcSj6h/hyQU4pOjEN/0kc598SJCQNvpyP9alaeKK/img.png?width=1200&amp;height=781&amp;face=0_0_1200_781,https://scrap.kakaocdn.net/dn/tPhuM/hyQUZPz9fC/6HTCy13ideOOAG5tHINLKK/img.png?width=1200&amp;height=781&amp;face=0_0_1200_781,https://scrap.kakaocdn.net/dn/bwEB2I/hyQUZhHCDU/mpry56YN3pkYYBpC21sqQk/img.png?width=1000&amp;height=400&amp;face=0_0_1000_400"><a href="https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C" target="_blank" rel="noopener" data-source-url="https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bcSj6h/hyQU4pOjEN/0kc598SJCQNvpyP9alaeKK/img.png?width=1200&amp;height=781&amp;face=0_0_1200_781,https://scrap.kakaocdn.net/dn/tPhuM/hyQUZPz9fC/6HTCy13ideOOAG5tHINLKK/img.png?width=1200&amp;height=781&amp;face=0_0_1200_781,https://scrap.kakaocdn.net/dn/bwEB2I/hyQUZhHCDU/mpry56YN3pkYYBpC21sqQk/img.png?width=1000&amp;height=400&amp;face=0_0_1000_400');">&nbsp;</div>
<div class="og-text">
[무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의
《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!, - 강의 소개 | 인프런...
www.inflearn.com
</div>
</a></figure>
<a href="https://coachround.com/deliberate-practice/" target="_blank" rel="noopener">https://coachround.com/deliberate-practice/</a>
<figure id="og_1671194631452" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="activity" data-og-title="&lsquo;의도적인 연습&rsquo;이란? (안젤라 덕워스) | 코치라운드" data-og-description="&lsquo;의도적인 연습deliberate practice&rsquo;은 1만시간의 법칙을 처음 말한 앤더스 에릭슨 박사가 모든 분야의 전문가들에게서 공통적으로 발견한 &lsquo;전문성을 위한 필수요소&rsquo;입니다. 당연히 운동선수도" data-og-host="coachround.com" data-og-source-url="https://coachround.com/deliberate-practice/" data-og-url="https://coachround.com/deliberate-practice/" data-og-image="https://scrap.kakaocdn.net/dn/G0Lsf/hyQU7NCi0N/xbhGNwaAVpC7iJl8rPNBd0/img.jpg?width=1024&amp;height=576&amp;face=0_0_1024_576,https://scrap.kakaocdn.net/dn/cryYPT/hyQURYiqmv/nWB3TgflKk5BZ97EVPTY7k/img.jpg?width=825&amp;height=404&amp;face=492_122_528_161,https://scrap.kakaocdn.net/dn/ck4wuN/hyQU0uaC4R/uvaIvqZtyFHKUGksgYoHhK/img.jpg?width=825&amp;height=404&amp;face=492_122_528_161"><a href="https://coachround.com/deliberate-practice/" target="_blank" rel="noopener" data-source-url="https://coachround.com/deliberate-practice/">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/G0Lsf/hyQU7NCi0N/xbhGNwaAVpC7iJl8rPNBd0/img.jpg?width=1024&amp;height=576&amp;face=0_0_1024_576,https://scrap.kakaocdn.net/dn/cryYPT/hyQURYiqmv/nWB3TgflKk5BZ97EVPTY7k/img.jpg?width=825&amp;height=404&amp;face=492_122_528_161,https://scrap.kakaocdn.net/dn/ck4wuN/hyQU0uaC4R/uvaIvqZtyFHKUGksgYoHhK/img.jpg?width=825&amp;height=404&amp;face=492_122_528_161');">&nbsp;</div>
<div class="og-text">
&lsquo;의도적인 연습&rsquo;이란? (안젤라 덕워스) | 코치라운드
&lsquo;의도적인 연습deliberate practice&rsquo;은 1만시간의 법칙을 처음 말한 앤더스 에릭슨 박사가 모든 분야의 전문가들에게서 공통적으로 발견한 &lsquo;전문성을 위한 필수요소&rsquo;입니다. 당연히 운동선수도
coachround.com
</div>
</a></figure>
&nbsp;

모던 자바스크립트 Deep Dive 스터디

https://ananas.tistory.com/52#entry52comment

디자인 패턴에 대해 자세히 설명해주는 사이트를 발견해 정리해보고자 한다. <a href="https://refactoring.guru/ko/design-patterns/what-is-pattern">https://refactoring.guru/ko/design-patterns/what-is-pattern</a>
<figure id="og_1670994809007" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="디자인 패턴이란?" data-og-description="디자인 패턴이란? 디자인 패턴은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 전형적인 해결책입니다. 이는 코드에서 반복되는 디자인 문제들을 해결하기 위해 맞춤화할 수 있는 " data-og-host="refactoring.guru" data-og-source-url="https://refactoring.guru/ko/design-patterns/what-is-pattern" data-og-url="https://refactoring.guru/ko/design-patterns/what-is-pattern" data-og-image="https://scrap.kakaocdn.net/dn/fylzP/hyQTBt2Yki/o82PkiJGkf2RzYkXvwpPoK/img.png?width=200&amp;height=242&amp;face=0_0_200_242"><a href="https://refactoring.guru/ko/design-patterns/what-is-pattern" target="_blank" rel="noopener" data-source-url="https://refactoring.guru/ko/design-patterns/what-is-pattern">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/fylzP/hyQTBt2Yki/o82PkiJGkf2RzYkXvwpPoK/img.png?width=200&amp;height=242&amp;face=0_0_200_242');">&nbsp;</div>
<div class="og-text">
디자인 패턴이란?
디자인 패턴이란? 디자인 패턴은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 전형적인 해결책입니다. 이는 코드에서 반복되는 디자인 문제들을 해결하기 위해 맞춤화할 수 있는
refactoring.guru
</div>
</a></figure>
<h3 data-ke-size="size23">&nbsp;</h3>
<h3 data-ke-size="size23">디자인 패턴이란?</h3>
디자인 패턴은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 전형적인 해결책이다. 이는 코드에서 반복되는 디자인 문제들을 해결하기 위해 맞춤화할 수 있는 미리 만들어진 청사진과 비슷하다. 표준화된 라이브러리들이나 함수들을 코드에 복사해 사용하는 것처럼 패턴들을 붙여넣기식으로 사용할 수 없습니다. 패턴은 재사용할 수 있는 코드 조각이 아니라 특정 문제를 해결하는 방식을 알려주는 일반적인 개념이다. 패턴은 알고리즘과 자주 혼동되는데, 두 개념 모두 알려진 문제에 대한 일반적인 해결책을 설명하기 때문이다. 알고리즘은 어떤 목표를 달성하기 위해 따라야 할 명확한 일련의 절차를 정의하지만, 패턴은 해결책에 대한 더 상위 수준의 설명이다. 디자인 패턴은 객체 지향 설계의 일반적인 문제들에 대한 일반적인 해결책입니다. 같은 해결책이 다양한 프로젝트에서 계속해서 반복적으로 사용된다면, 결국 누군가 그것에 이름을 붙여 개념을 자세히 설명하게 되는데, 디자인 패턴은 이렇게 발견된다. 이 개념은 에릭 감마, 존 블리시디스, 랄프 존슨, 리처드 헬름이라는 4명의 작가에 의해 정리되었다. 1994년, 이들은 "디자인 패턴: 재사용성을 지닌 객체지향 소프트웨어의 핵심 요소"라는 책을 발간하였고, 거기서 디자인 패턴의 개념을 프로그래밍에 적용하였다. 이 책은 다양한 객체 지향 디자인 관련 문제를 해결하는 23가지 패턴을 소개한다.
<h3 data-ke-size="size23">왜 패턴을 배워야 하나?</h3>
디자인 패턴은 소프트웨어 디자인의 일반적인 문제들에 대해 시도되고 검증된 해결책들을 모은 것이다. 이러한 문제들을 다루지 않더라도 패턴을 알고 있으면 객체 지향 디자인의 원칙들을 사용해 많은 종류의 문제를 해결하는 방법을 배울 수 있다. 디자인 패턴은 동료간의 더 효율적인 의사소통에 필요한 공통 언어를 정의한다. 예를 들어 '그 문제에 싱글턴을 사용하세요'라고 한다면, 모두가 무슨 뜻인지 알아들을 수 있으며 싱글턴 패턴에 포함된 개념들을 설명할 필요도 없다.
<h3 data-ke-size="size23">패터에 대한 비판</h3>
약한 프로그래밍 언어를 위한 클루지로 작동한다. 일반적으로 패턴의 필요성은 개발자가 추상화 수준이 부족한 프로그래밍 언어나 기술을 선택했을 때 발생한다. 이 경우 패턴은 약한 프로그래밍 언어에 필요한 초능력을 부여하는 클루지​(문제의 어지럽고 임시변통의 그러나 효과적인 해결책)​로 작동할 수 있다. 
비효율적인 해결책 패턴은 이미 널리 사용되는 문제 해결 방식의 체계호를 시도한다. 많은 사람이 이렇게 통합된 패턴들을 도그마처럼 신봉하여 패턴을 프로젝트 맥락에 따라 적용하는게 아닌 문자 그대로 구현하게 된다.
부당한 사용 많은 초보자들은 패턴을 갓 배운 후, 더 간단한 코드로도 문제 해결할 수 있는 상황에서 패턴을 적용하려 한다.
<h3 data-ke-size="size23">패턴의 분류</h3>
디자인 패턴은 복잡성, 상세도 및 설계 중인 전체 시스템에 대한 적용 범위에 따라 분류된다. 필자는 도로 건설에 비유하는 걸 좋아하는데, 교차로를 더 안전하게 만들기 위해 신호등을 설치하거나 보행자를 위한 지하도가 있는 전체 다층 인터체인지를 구축하는 작업에 비유할 수 있다. 가장 기본적인 하위 설계 패턴을 이디엄이라고 한다. 일반적으로 이디엄은 단일 프로그래밍 언어에만 적용할 수 있습니다. 아키텍처 패턴은 상위 설계 패턴이며 가장 보편적으로 사용된다. 개발자들은 거의 모든 언어로 아키텍처 패턴들을 구현할 수 있으며 다른 패턴들과 달리 애플리케이션 전체의 구조​(아키텍처)​를 설계하는 데 사용할 수 있다.

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';" width="436" height="388" data-origin-width="914" data-origin-height="814"/><figcaption>이벤트 버블링</figcaption>
</figure>

<pre id="code_1670989282899" 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';" 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';" 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';" 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/48#entry48comment

MacOS가 업데이트 되었습니다. 그런줄도 모르고 살다가 방금 설치했는데요.
그러고 나자&nbsp;missing xcrn 에러를 만났습니다. VSCode에서 깃이 없다고 다시 설치하래요.... 후아...
git을 다시 설치를 해도, sudo를 아무리 입력해도 error메세지만 남긴 채 내 품에서 git이 떠나버렸다니... 이러한 메세지만 남기고 아아 님은 갔습니다.
<pre id="code_1667404187570" class="bash" data-ke-language="bash" data-ke-type="codeblock"><code>xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun</code></pre>
&nbsp;
missing xcrun 에러, 찾아보니 MacOS가 새로운 버전으로 업데이트 될 때마다 있었던 일이더라고요. xcode-select명령으로 CommandLineTools(command line developer tools)를 설치해서 쉽게 해결할 수 있었습니다.
<pre id="code_1667404336179" class="bash" data-ke-language="bash" data-ke-type="codeblock"><code>$ xcode-select --install</code></pre>
&nbsp;
다시 돌아온 깃! 외에도 개발 관련 도구들에 missing xcrun 에러가 발생하면 위의 명령어로 해결할 수 있습니다!
<pre id="code_1667404791867" class="bash" data-ke-language="bash" data-ke-type="codeblock"><code>$ git
usage: git [-v | --version] [-h | --help] [-C &lt;path&gt;] [-c &lt;name&gt;=&lt;value&gt;]
 [--exec-path[=&lt;path&gt;]] [--html-path] [--man-path] [--info-path]
 [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare]
 [--git-dir=&lt;path&gt;] [--work-tree=&lt;path&gt;] [--namespace=&lt;name&gt;]
 [--super-prefix=&lt;path&gt;] [--config-env=&lt;name&gt;=&lt;envvar&gt;]
 &lt;command&gt; [&lt;args&gt;]</code></pre>
&nbsp;
&nbsp;
&nbsp;
<a href="https://www.hahwul.com/2019/11/18/how-to-fix-xcrun-error-after-macos-update/" target="_blank" rel="noopener">참조</a>
<figure id="og_1667405121280" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Mac 업그레이드 후 xcrun: error: invalid active developer path 에러 해결하기" data-og-description="MacOS 업그레이드 시 어김없이 발생하는 문제가 하나 있습니다 바로 개발 관련 도구 사용 시 대다수가 발생하는 missing xcrun 에러인데요." data-og-host="www.hahwul.com" data-og-source-url="https://www.hahwul.com/2019/11/18/how-to-fix-xcrun-error-after-macos-update/" data-og-url="https://www.hahwul.com/2019/11/18/how-to-fix-xcrun-error-after-macos-update/" data-og-image="https://scrap.kakaocdn.net/dn/5lzNj/hyQqUBvmDP/wql2jYBkYCa2p2DRi0EA3K/img.jpg?width=1920&amp;height=1080&amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/PYLMn/hyQqYYcbgM/JBO96d3vBYuGFJ97M8yQdK/img.jpg?width=1920&amp;height=1080&amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/ZVCsm/hyQqU2y4IA/yvb2Jk8hl9lcQWBBpAJcL0/img.png?width=1258&amp;height=418&amp;face=0_0_1258_418"><a href="https://www.hahwul.com/2019/11/18/how-to-fix-xcrun-error-after-macos-update/" target="_blank" rel="noopener" data-source-url="https://www.hahwul.com/2019/11/18/how-to-fix-xcrun-error-after-macos-update/">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/5lzNj/hyQqUBvmDP/wql2jYBkYCa2p2DRi0EA3K/img.jpg?width=1920&amp;height=1080&amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/PYLMn/hyQqYYcbgM/JBO96d3vBYuGFJ97M8yQdK/img.jpg?width=1920&amp;height=1080&amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/ZVCsm/hyQqU2y4IA/yvb2Jk8hl9lcQWBBpAJcL0/img.png?width=1258&amp;height=418&amp;face=0_0_1258_418');">&nbsp;</div>
<div class="og-text">
Mac 업그레이드 후 xcrun: error: invalid active developer path 에러 해결하기
MacOS 업그레이드 시 어김없이 발생하는 문제가 하나 있습니다 바로 개발 관련 도구 사용 시 대다수가 발생하는 missing xcrun 에러인데요.
www.hahwul.com
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/47#entry47comment

입사 동기가 비동기 로직에 promise all을 사용하여 한꺼번에 받아야 할 api 요청들을 병렬로 처리하도록 로직을 수정하였다. 오... 속도 개선에 효과가 있었다. 나도 다음에 써먹어봐야겠다.
<a href="https://merrily-code.tistory.com/214">https://merrily-code.tistory.com/214</a>
<figure id="og_1659320261383" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Promise.all 로 비동기 로직 개선하기" data-og-description="아주 오랜 옛날부터, 전설로 내려오는 코드가 있습니다. (3학년 1학기에 수행했던 산학프로젝트 코드입니다.) 이 코드는 간단한 그룹 매칭 서비스에서 그룹을 생성하는 역할인데요, 여러 비동기 " data-og-host="merrily-code.tistory.com" data-og-source-url="https://merrily-code.tistory.com/214" data-og-url="https://merrily-code.tistory.com/214" data-og-image="https://scrap.kakaocdn.net/dn/1Bils/hyPf5Suin7/M3VWod6q3Bk0vocy6WIU2K/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/bAS064/hyPf2Bsyeg/uA0Y3DmnQuqfOrua1hrUYK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/Ds6lI/hyPf2g98l8/qa0dMXIXGXyHvX1HDhOiw0/img.png?width=934&amp;height=1058&amp;face=0_0_934_1058"><a href="https://merrily-code.tistory.com/214" target="_blank" rel="noopener" data-source-url="https://merrily-code.tistory.com/214">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/1Bils/hyPf5Suin7/M3VWod6q3Bk0vocy6WIU2K/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/bAS064/hyPf2Bsyeg/uA0Y3DmnQuqfOrua1hrUYK/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/Ds6lI/hyPf2g98l8/qa0dMXIXGXyHvX1HDhOiw0/img.png?width=934&amp;height=1058&amp;face=0_0_934_1058');">&nbsp;</div>
<div class="og-text">
Promise.all 로 비동기 로직 개선하기
아주 오랜 옛날부터, 전설로 내려오는 코드가 있습니다. (3학년 1학기에 수행했던 산학프로젝트 코드입니다.) 이 코드는 간단한 그룹 매칭 서비스에서 그룹을 생성하는 역할인데요, 여러 비동기
merrily-code.tistory.com
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/46#entry46comment

회사에서 Nuxt.js와 Vue.js를 쓴다고 한다. 빠르게 공부해서 일하자!
 <a href="https://doda.dev/posts/vuejs-lifecycle">https://doda.dev/posts/vuejs-lifecycle</a>
<figure id="og_1658635775314" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Vue.js의 라이프사이클 이해" data-og-description="Vue.js의 라이프사이클을 알아보자" data-og-host="doda.dev" data-og-source-url="https://doda.dev/posts/vuejs-lifecycle" data-og-url="https://doda.dev/posts/vuejs-lifecycle" data-og-image=""><a href="https://doda.dev/posts/vuejs-lifecycle" target="_blank" rel="noopener" data-source-url="https://doda.dev/posts/vuejs-lifecycle">
<div class="og-image" style="background-image: url();">&nbsp;</div>
<div class="og-text">
Vue.js의 라이프사이클 이해
Vue.js의 라이프사이클을 알아보자
doda.dev
</div>
</a></figure>
<a href="https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4" target="_blank" rel="noopener">https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4</a>
<figure id="og_1658635819970" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Vue.js 2.0 라이프사이클 이해하기" data-og-description="최근 사내에서 Vue.js로 프로젝트를 진행하고 있다. 차근차근 꼼꼼히 프레임웤을 이해하며 시작하지 않으니 여러 우여곡절이 많았다. 정리 차원에서 하나씩 포스팅하면 좋을것 같다는 생각을 했" data-og-host="medium.com" data-og-source-url="https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4" data-og-url="https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4" data-og-image="https://scrap.kakaocdn.net/dn/dehqXD/hyPbPHZBef/7wWeftPmqJGSyzjRbLY1Q0/img.png?width=1200&amp;height=2800&amp;face=0_0_1200_2800,https://scrap.kakaocdn.net/dn/n00mA/hyPbT4Ge1g/TdEteG1AQjkHPikpm3Pbk1/img.png?width=1200&amp;height=2800&amp;face=0_0_1200_2800,https://scrap.kakaocdn.net/dn/ckH20z/hyPbNXIoyJ/QQXcrTbCBkwNbBJ7DOTJb0/img.png?width=537&amp;height=629&amp;face=0_0_537_629"><a href="https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4" target="_blank" rel="noopener" data-source-url="https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/dehqXD/hyPbPHZBef/7wWeftPmqJGSyzjRbLY1Q0/img.png?width=1200&amp;height=2800&amp;face=0_0_1200_2800,https://scrap.kakaocdn.net/dn/n00mA/hyPbT4Ge1g/TdEteG1AQjkHPikpm3Pbk1/img.png?width=1200&amp;height=2800&amp;face=0_0_1200_2800,https://scrap.kakaocdn.net/dn/ckH20z/hyPbNXIoyJ/QQXcrTbCBkwNbBJ7DOTJb0/img.png?width=537&amp;height=629&amp;face=0_0_537_629');">&nbsp;</div>
<div class="og-text">
Vue.js 2.0 라이프사이클 이해하기
최근 사내에서 Vue.js로 프로젝트를 진행하고 있다. 차근차근 꼼꼼히 프레임웤을 이해하며 시작하지 않으니 여러 우여곡절이 많았다. 정리 차원에서 하나씩 포스팅하면 좋을것 같다는 생각을 했
medium.com
</div>
</a></figure>
<a href="https://joontae-kim.github.io/2021/03/18/nuxt-lifecycle/" target="_blank" rel="noopener">https://joontae-kim.github.io/2021/03/18/nuxt-lifecycle/</a>
<figure id="og_1658636612376" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Nuxt 라이프사이클" data-og-description="Vue.js를 사용해 웹 어플리케이션 개발할때 라이프사이클에 대한 공부를 제대로 시작하지 고생한 경험이 있는데 Nuxt는 그런 과정을 밟지 않기위해 라이프사이클부터 차근차근 공부해보자. 일단 " data-og-host="joontae-kim.github.io" data-og-source-url="https://joontae-kim.github.io/2021/03/18/nuxt-lifecycle/" data-og-url="https://joontae-kim.github.io/2021/03/18/nuxt-lifecycle/index.html" data-og-image="https://scrap.kakaocdn.net/dn/cBHoX4/hyPbV2vW2M/kcFMk49hMHAISdi1taX4K0/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/dE72S3/hyPbSxVEAh/YPuqznlNF9ESwmPLKZCqlk/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/Vrrh4/hyPbMxKMdm/6YEI1KErp44TWnPYOUTVok/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080"><a href="https://joontae-kim.github.io/2021/03/18/nuxt-lifecycle/" target="_blank" rel="noopener" data-source-url="https://joontae-kim.github.io/2021/03/18/nuxt-lifecycle/">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/cBHoX4/hyPbV2vW2M/kcFMk49hMHAISdi1taX4K0/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/dE72S3/hyPbSxVEAh/YPuqznlNF9ESwmPLKZCqlk/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080,https://scrap.kakaocdn.net/dn/Vrrh4/hyPbMxKMdm/6YEI1KErp44TWnPYOUTVok/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080');">&nbsp;</div>
<div class="og-text">
Nuxt 라이프사이클
Vue.js를 사용해 웹 어플리케이션 개발할때 라이프사이클에 대한 공부를 제대로 시작하지 고생한 경험이 있는데 Nuxt는 그런 과정을 밟지 않기위해 라이프사이클부터 차근차근 공부해보자. 일단
joontae-kim.github.io
</div>
</a></figure>
<a href="https://maxkim-j.github.io/posts/nuxt-ssr" target="_blank" rel="noopener">https://maxkim-j.github.io/posts/nuxt-ssr</a>
<figure id="og_1658637545578" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="Nuxt로 살펴보는 서버사이드 렌더링의 핵심" data-og-description="SSR 라이브러리의 프리렌더링, 하이드레이션을 알아봅니다." data-og-host="maxkim-j.github.io" data-og-source-url="https://maxkim-j.github.io/posts/nuxt-ssr" data-og-url="https://maxkim-j.github.io/posts/nuxt-ssr" data-og-image="https://scrap.kakaocdn.net/dn/0YWIq/hyPbQz8KZW/KxPPZlQjZiXtuWRSxTt5b0/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/JHiGR/hyPbQ7Y54x/rVN2pnF4weH5cKxfOtkfC0/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/bhoT23/hyPbQNGEZ5/lkxlbYkaPt8USjvPpAmuJ1/img.png?width=2488&amp;height=3517&amp;face=0_0_2488_3517"><a href="https://maxkim-j.github.io/posts/nuxt-ssr" target="_blank" rel="noopener" data-source-url="https://maxkim-j.github.io/posts/nuxt-ssr">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/0YWIq/hyPbQz8KZW/KxPPZlQjZiXtuWRSxTt5b0/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/JHiGR/hyPbQ7Y54x/rVN2pnF4weH5cKxfOtkfC0/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/bhoT23/hyPbQNGEZ5/lkxlbYkaPt8USjvPpAmuJ1/img.png?width=2488&amp;height=3517&amp;face=0_0_2488_3517');">&nbsp;</div>
<div class="og-text">
Nuxt로 살펴보는 서버사이드 렌더링의 핵심
SSR 라이브러리의 프리렌더링, 하이드레이션을 알아봅니다.
maxkim-j.github.io
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/44#entry44comment

뷰를 학습해보려고 설치하는데 오류란 오류를 전부 격었다...
우선 node의 문제인줄 알고 지웠다 까는데에서도 문제가 발생했다. 여러 블로그를 다 참고했지만 잘 되지 않다가 아래 블로그를 따라하니 다행히 노드를 잘 지우고 다시 설치했다.
<a href="https://2dowon.netlify.app/etc/nodejs-delete-and-install/" target="_blank" rel="noopener">https://2dowon.netlify.app/etc/nodejs-delete-and-install/</a>
<figure id="og_1655887755608" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="node.js 재설치 및 node install 권한 오류(MAC)" data-og-description="어느 순간부터 이상하게 을 이용해 설치하는 것들이 제대로 설치는 되었지만, version을 확인하려고 하면 나오지 않는 문제가 발생했다. 처음에는 환경변수의 문제라고 생각하고 환경변수를 다시" data-og-host="2dowon.netlify.app" data-og-source-url="https://2dowon.netlify.app/etc/nodejs-delete-and-install/" data-og-url="https://2dowon.netlify.app/etc/nodejs-delete-and-install/" data-og-image="https://scrap.kakaocdn.net/dn/bg12Xy/hyORNvM8mW/rZq04fJOO2NiA0gxySQV80/img.png?width=673&amp;height=383&amp;face=0_0_673_383"><a href="https://2dowon.netlify.app/etc/nodejs-delete-and-install/" target="_blank" rel="noopener" data-source-url="https://2dowon.netlify.app/etc/nodejs-delete-and-install/">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bg12Xy/hyORNvM8mW/rZq04fJOO2NiA0gxySQV80/img.png?width=673&amp;height=383&amp;face=0_0_673_383');">&nbsp;</div>
<div class="og-text">
node.js 재설치 및 node install 권한 오류(MAC)
어느 순간부터 이상하게 을 이용해 설치하는 것들이 제대로 설치는 되었지만, version을 확인하려고 하면 나오지 않는 문제가 발생했다. 처음에는 환경변수의 문제라고 생각하고 환경변수를 다시
2dowon.netlify.app
</div>
</a></figure>
다음은.. 뷰...VUE....
yarn도 깔아보고 복작복작 했지만 결국 뷰 설치 명령어 앞에 sudo를 붙여 권한 문제를 해결하고 설치 됐다.
설치방법은 아래 블로그를 참고했다.
<a href="https://any-ting.tistory.com/38" target="_blank" rel="noopener">https://any-ting.tistory.com/38</a>
<figure id="og_1655887865663" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="[Vue] Mac Vue.js 개발환경 설정" data-og-description="- 개요 안녕하세요. 이번 시간에는 Web Front 3 대장 Vue.js 개발환경 설정해 보겠습니다. 참고로 Vue CLI를 활용해서 설치하겠습니다. :) - VS Code 설치 개발 환경 IDE는 VS Code를 사용하겠습니다. 본인 PC OS" data-og-host="any-ting.tistory.com" data-og-source-url="https://any-ting.tistory.com/38" data-og-url="https://any-ting.tistory.com/38" data-og-image="https://scrap.kakaocdn.net/dn/bAGUNM/hyORIBftOg/1viTXUD12WTBBkj5FPgIM1/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/blh6U2/hyOQnyI3Hs/Y9tjJMrfsmHm1XCVfC2VWk/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/jGUiL/hyORGwFbnj/njd0M2bsqKbwykJV8JYXSk/img.png?width=661&amp;height=300&amp;face=0_0_661_300"><a href="https://any-ting.tistory.com/38" target="_blank" rel="noopener" data-source-url="https://any-ting.tistory.com/38">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bAGUNM/hyORIBftOg/1viTXUD12WTBBkj5FPgIM1/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/blh6U2/hyOQnyI3Hs/Y9tjJMrfsmHm1XCVfC2VWk/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/jGUiL/hyORGwFbnj/njd0M2bsqKbwykJV8JYXSk/img.png?width=661&amp;height=300&amp;face=0_0_661_300');">&nbsp;</div>
<div class="og-text">
[Vue] Mac Vue.js 개발환경 설정
- 개요 안녕하세요. 이번 시간에는 Web Front 3 대장 Vue.js 개발환경 설정해 보겠습니다. 참고로 Vue CLI를 활용해서 설치하겠습니다. :) - VS Code 설치 개발 환경 IDE는 VS Code를 사용하겠습니다. 본인 PC OS
any-ting.tistory.com
</div>
</a></figure>
&nbsp;
맥은 항상 느끼는 거지만 권한 문제가 늘 큰 산이다. 엄지 검지 지문 등록하고 비밀번호 매번 넣어도 주인도 못 알아본다. 그래도 바이러스나 여러 보안 문제에서 안전하다는게 장점이지만 요즘은 글쎄? 한글 호환도 그렇고 뭔가 까다로운 고양이랑 작업하는 기분이다...

맥에서 뷰 설치하기 feat. 맥 권한... 주인 좀 알아봐라...

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"><iframe src="https://www.youtube.com/embed/TlRkmSEMV6w" width="480" height="360" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;

https://ananas.tistory.com/42#entry42comment

<pre id="code_1655538748458" class="sql" data-ke-language="sql" data-ke-type="codeblock"><code># USE
USE world; # db명

# 테이블 보기
SHOW TABLES;
SHOW TABLE STATUS; # 테이블 속성

# 테이블 열 확인
DESCRIBE city;
DESC city;

# 테이블 열 추출
SELECT * FROM city; # 전체
SELECT Name FROM city;

# WHERE
SELECT *
FROM city
WHERE Population &gt; 100000;

# 관계 연산자
SELECT *
FROM city
WHERE Population &gt; 100000 
AND Population &lt; 200000;

# BETWEEN...AND 사이 값
SELECT *
FROM city
WHERE Population BETWEEN 100000 AND 200000;

# IN 이산 값
SELECT *
FROM city
WHERE Name IN('Seoul', 'New York', 'Tokyo');

# LIKE
SELECT *
FROM city
WHERE CountryCode LIKE 'KO_'; # _는 한글자 매치

SELECT *
FROM city
WHERE CountryCode LIKE 'K %'; # % 무엇이든 허용

# Sub Query
SELECT *
FROM city
WHERE CountryCode = (	SELECT CountryCode
 	FROM city
 	WHERE Name = 'Seoul'	);</code></pre>

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/40#entry40comment

<pre id="code_1655532535299" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 모듈 가져오기
const readline = require('readline');

// readline 모듈을 이용해 입출력을 위한 인터페이스 객체 생성
const rl = readline.createInterface({
	input: process.stdin,
 output: process.stdout,
});

// rl 변수
rl.on('line', (line) =&gt; {
	// 한 줄씩 입력받은 후 실행할 코드
 // 입력된 값은 line에 저장
 
 rl.close(); // 필수 close가 없으면 입력을 무한히 받는다
});

rl.on('close', () =&gt; {
	// 입력이 끝난 후 실행할 코드
 process.exit();
});</code></pre>
<pre id="code_1655532636479" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 한 줄 입력받기
const readline = require('readline');

const rl = readline.createInterface({
	input: process.stdin,
 output: process.stdout,
});

rl.on('line', (line) =&gt; { 
	console.log('input: ', line);
 rl.close();
}).on('close', () =&gt; {
 process.exit();
});</code></pre>
<pre id="code_1655534464817" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 공백 기준으로 값 입력받기
const readline = require('readline');

const rl = readline.createInterface({
	input: process.stdin,
 output: process.stdout,
});

let input = [];

rl.on('line', (line) =&gt; {
	input = line.split(' ').map(el =&gt; parseInt(el)); // 1 2 3 4
 rl.close();
});

rl.on('close', () =&gt; {
	input.forEach(el =&gt; {
 	console.log(el);
 })
 process.exit();
});

// 입력
// 1 2 3

// 출력
// 1
// 2
// 3</code></pre>
<pre id="code_1655534724925" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 여러 줄 입력받기
const rl = readline.createInterface({
	input: process.stdin,
 output: process.stout,
});

let input = [];

rl.on('line', (line) =&gt; {
	input.push(line);
});

rl.on('close', () =&gt; {
	console.log(input);
 process.exit();
});

// 입력
// 1
// 2
// a
// b

// 출력
// ['1', '2', 'a', 'b']

// 입력 종료는 ctrl + c</code></pre>
<pre id="code_1655534991836" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 공백이 포함된 문자 여러 줄 입력받기
const readline = require('readline');

const rl = readline.createInterface({
	input: process.stdin,
 output: process.stdout,
});

let input = [];

rl.on('line', (line) =&gt; {
	input.push(line.split(' ').map(el =&gt; parseInt(el)));
});

rl.on('close', () =&gt; {
	console.log(input);
 process.exit();
});

// 입력
// 1 2 3
// 4 5 6

// 출력
// [[1, 2, 3], [4, 5, 6]]</code></pre>
<a href="https://yoon-dumbo.tistory.com/entry/NODEJS-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%ED%92%80%EB%95%8C-%EC%9E%85%EB%A0%A5%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95" target="_blank" rel="noopener">https://yoon-dumbo.tistory.com/entry/NODEJS-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%ED%92%80%EB%95%8C-%EC%9E%85%EB%A0%A5%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95</a>
<figure id="og_1655536772759" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="NODE.JS 기반으로 알고리즘 풀때 입력받는 방법" data-og-description="서론 알고리즘 사이트는 여러가지가 있는데 프로그래머스 나 leetCode와 같은 사이트는 자동으로 입력을 처리해주고 함수내 알고리즘 코드만 작성하면 되는거라 입력받는 것에 대한 고민은 따로 " data-og-host="yoon-dumbo.tistory.com" data-og-source-url="https://yoon-dumbo.tistory.com/entry/NODEJS-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%ED%92%80%EB%95%8C-%EC%9E%85%EB%A0%A5%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95" data-og-url="https://yoon-dumbo.tistory.com/entry/NODEJS-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%ED%92%80%EB%95%8C-%EC%9E%85%EB%A0%A5%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95" data-og-image="https://scrap.kakaocdn.net/dn/YepgS/hyONF0lFnb/Kc5O1T4MP8FlJRWA8CI1h0/img.png?width=800&amp;height=474&amp;face=0_0_800_474,https://scrap.kakaocdn.net/dn/5qNHj/hyONKtPQOz/R7kR0rkVnEZISKLyQbVBD0/img.png?width=800&amp;height=474&amp;face=0_0_800_474"><a href="https://yoon-dumbo.tistory.com/entry/NODEJS-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%ED%92%80%EB%95%8C-%EC%9E%85%EB%A0%A5%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95" target="_blank" rel="noopener" data-source-url="https://yoon-dumbo.tistory.com/entry/NODEJS-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%ED%92%80%EB%95%8C-%EC%9E%85%EB%A0%A5%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/YepgS/hyONF0lFnb/Kc5O1T4MP8FlJRWA8CI1h0/img.png?width=800&amp;height=474&amp;face=0_0_800_474,https://scrap.kakaocdn.net/dn/5qNHj/hyONKtPQOz/R7kR0rkVnEZISKLyQbVBD0/img.png?width=800&amp;height=474&amp;face=0_0_800_474');">&nbsp;</div>
<div class="og-text">
NODE.JS 기반으로 알고리즘 풀때 입력받는 방법
서론 알고리즘 사이트는 여러가지가 있는데 프로그래머스 나 leetCode와 같은 사이트는 자동으로 입력을 처리해주고 함수내 알고리즘 코드만 작성하면 되는거라 입력받는 것에 대한 고민은 따로
yoon-dumbo.tistory.com
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/39#entry39comment

https://ananas.tistory.com/38#entry38comment

리액트에 타입스크립트를 적용해보자.
<pre id="code_1654740853922" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>$ npx create-react-app ts-react-tutorial --typescript

$ npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom</code></pre>
위의 명령어는 리액트 파일 생성시 타입스크립트를 적용하는 거고, 아래 명령어는 이미 생성된 리액트 파일에 타입스크립트를 적용하는 거다.
타입스크립트 확장자는 js -&gt; tx / jsx -&gt; tsx 로 설정한다.
리액트는 jsx를 반환하는 컴포넌트일 때 tsx로, 아니면 ts로 변환한다.
이후 적용방식은 아래 글들을 참고했다.
대부분 interface를 활용해 객체타입을 캡슐화하는데 초점이 맞춰져 있다.
타입스크립트는 확실히 js 나 리액트에서 데이터의 안전성에 많이 활용되는 듯 싶다.
<a href="https://react.vlpt.us/using-typescript/02-ts-react-basic.html" target="_blank" rel="noopener">https://react.vlpt.us/using-typescript/02-ts-react-basic.html</a>
<figure id="og_1654741590930" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="2. 리액트 컴포넌트 타입스크립트로 작성하기 &middot; GitBook" data-og-description="2. 리액트 컴포넌트 타입스크립트로 작성하기 이번 섹션에서는 리액트 컴포넌트를 타입스크립트로 작성하는 방법을 알아보도록 하겠습니다. 프로젝트 생성 우선, 타입스크립트를 사용하는 리" data-og-host="react.vlpt.us" data-og-source-url="https://react.vlpt.us/using-typescript/02-ts-react-basic.html" data-og-url="https://react.vlpt.us/using-typescript/02-ts-react-basic.html" data-og-image="https://scrap.kakaocdn.net/dn/d6nTce/hyOIcQaa6B/gZrkYpQ8K3Ah6jv9ooA5b0/img.png?width=1831&amp;height=634&amp;face=0_0_1831_634,https://scrap.kakaocdn.net/dn/9QhkB/hyOGYsp571/PHZZiRn3OkcoQ2npDfgXQK/img.png?width=1150&amp;height=951&amp;face=0_0_1150_951,https://scrap.kakaocdn.net/dn/bzm0np/hyOIe8hlwF/JJwvFnIJaZC1hsv6GKC3YK/img.png?width=1150&amp;height=951&amp;face=0_0_1150_951"><a href="https://react.vlpt.us/using-typescript/02-ts-react-basic.html" target="_blank" rel="noopener" data-source-url="https://react.vlpt.us/using-typescript/02-ts-react-basic.html">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/d6nTce/hyOIcQaa6B/gZrkYpQ8K3Ah6jv9ooA5b0/img.png?width=1831&amp;height=634&amp;face=0_0_1831_634,https://scrap.kakaocdn.net/dn/9QhkB/hyOGYsp571/PHZZiRn3OkcoQ2npDfgXQK/img.png?width=1150&amp;height=951&amp;face=0_0_1150_951,https://scrap.kakaocdn.net/dn/bzm0np/hyOIe8hlwF/JJwvFnIJaZC1hsv6GKC3YK/img.png?width=1150&amp;height=951&amp;face=0_0_1150_951');">&nbsp;</div>
<div class="og-text">
2. 리액트 컴포넌트 타입스크립트로 작성하기 &middot; GitBook
2. 리액트 컴포넌트 타입스크립트로 작성하기 이번 섹션에서는 리액트 컴포넌트를 타입스크립트로 작성하는 방법을 알아보도록 하겠습니다. 프로젝트 생성 우선, 타입스크립트를 사용하는 리
react.vlpt.us
</div>
</a></figure>
<a href="https://www.youtube.com/watch?v=g-kauNOTVRY&amp;list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&amp;index=17">https://www.youtube.com/watch?v=g-kauNOTVRY&amp;list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&amp;index=17</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=g-kauNOTVRY" data-video-thumbnail="https://scrap.kakaocdn.net/dn/dpZ5a6/hyOIfMTelE/tOJuOv8aoWcH171SRF81g0/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/g-kauNOTVRY" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
<a href="https://kyounghwan01.github.io/blog/TS/React/convert-js-to-ts/" target="_blank" rel="noopener">https://kyounghwan01.github.io/blog/TS/React/convert-js-to-ts/</a>
<figure id="og_1654743108257" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="How to Migrate a React App to TypeScript" data-og-description="How to Migrate a React App to TypeScript" data-og-host="kyounghwan01.github.io" data-og-source-url="https://kyounghwan01.github.io/blog/TS/React/convert-js-to-ts/" data-og-url="https://kyounghwan01.github.io/blog/TS/React/convert-js-to-ts/" data-og-image="https://scrap.kakaocdn.net/dn/wMQV5/hyOG3tQB9X/SVzeb1VKVGhJAIey5OZkbk/img.png?width=460&amp;height=460&amp;face=0_0_460_460"><a href="https://kyounghwan01.github.io/blog/TS/React/convert-js-to-ts/" target="_blank" rel="noopener" data-source-url="https://kyounghwan01.github.io/blog/TS/React/convert-js-to-ts/">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/wMQV5/hyOG3tQB9X/SVzeb1VKVGhJAIey5OZkbk/img.png?width=460&amp;height=460&amp;face=0_0_460_460');">&nbsp;</div>
<div class="og-text">
How to Migrate a React App to TypeScript
How to Migrate a React App to TypeScript
kyounghwan01.github.io
</div>
</a></figure>
&nbsp;
이후 컨포넌트 생성은 아래와 같다.
<pre id="code_1654744142772" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>const App: React.FC = ()=&gt;{
 return (
 &lt;&gt;
 &lt;Header/&gt;
 &lt;Home/&gt;
 &lt;Footer/&gt;
 &lt;/&gt;
 );
}</code></pre>
이때 한가지 의문점이 생겼는데 컨포넌트를 선언문으로 생성한다는 점, 그리고 그 안에 들어가는 다른 컨포넌트를 아래 줄에 적어도 호이스팅 된다는 점이었다. (띠용!)
물론 ts를 적용하더라도 얼마든지 표현식으로 할 수 있지만 TDZ(Temporal Dead Zone)를 유의해야 한다.
참고
<a href="https://velog.io/@jjunyjjuny/React-%ED%95%A8%EC%88%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A0%EC%96%B8%EB%AC%B8-vs-%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%80-%EC%B7%A8%ED%96%A5-%EC%B0%A8%EC%9D%B4%EC%9D%BC%EA%B9%8C" target="_blank" rel="noopener">https://velog.io/@jjunyjjuny/React-%ED%95%A8%EC%88%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A0%EC%96%B8%EB%AC%B8-vs-%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%80-%EC%B7%A8%ED%96%A5-%EC%B0%A8%EC%9D%B4%EC%9D%BC%EA%B9%8C</a>
<figure id="og_1654744570574" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="[ React ] 함수 컴포넌트, 선언문 vs 표현식은 취향 차이일까?" data-og-description="React의 컴포넌트 함수를 선언하는 두 가지 방법." data-og-host="velog.io" data-og-source-url="https://velog.io/@jjunyjjuny/React-%ED%95%A8%EC%88%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A0%EC%96%B8%EB%AC%B8-vs-%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%80-%EC%B7%A8%ED%96%A5-%EC%B0%A8%EC%9D%B4%EC%9D%BC%EA%B9%8C" data-og-url="https://velog.io/@jjunyjjuny/React-함수-컴포넌트-선언문-vs-표현식은-취향-차이일까" data-og-image="https://scrap.kakaocdn.net/dn/bzLcPj/hyOIk1LKkT/OofTLGwUpKNqwpikhEoDr0/img.png?width=700&amp;height=350&amp;face=0_0_700_350,https://scrap.kakaocdn.net/dn/c41CaG/hyOIhxcucJ/qQ32Cyj7KyjESXflG4k4X0/img.png?width=700&amp;height=350&amp;face=0_0_700_350,https://scrap.kakaocdn.net/dn/Vahyz/hyOImFgWfj/uGxlylUoBHmVB3Ve6vlcx0/img.png?width=1295&amp;height=744&amp;face=0_0_1295_744"><a href="https://velog.io/@jjunyjjuny/React-%ED%95%A8%EC%88%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A0%EC%96%B8%EB%AC%B8-vs-%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%80-%EC%B7%A8%ED%96%A5-%EC%B0%A8%EC%9D%B4%EC%9D%BC%EA%B9%8C" target="_blank" rel="noopener" data-source-url="https://velog.io/@jjunyjjuny/React-%ED%95%A8%EC%88%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%84%A0%EC%96%B8%EB%AC%B8-vs-%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%80-%EC%B7%A8%ED%96%A5-%EC%B0%A8%EC%9D%B4%EC%9D%BC%EA%B9%8C">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bzLcPj/hyOIk1LKkT/OofTLGwUpKNqwpikhEoDr0/img.png?width=700&amp;height=350&amp;face=0_0_700_350,https://scrap.kakaocdn.net/dn/c41CaG/hyOIhxcucJ/qQ32Cyj7KyjESXflG4k4X0/img.png?width=700&amp;height=350&amp;face=0_0_700_350,https://scrap.kakaocdn.net/dn/Vahyz/hyOImFgWfj/uGxlylUoBHmVB3Ve6vlcx0/img.png?width=1295&amp;height=744&amp;face=0_0_1295_744');">&nbsp;</div>
<div class="og-text">
[ React ] 함수 컴포넌트, 선언문 vs 표현식은 취향 차이일까?
React의 컴포넌트 함수를 선언하는 두 가지 방법.
velog.io
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/37#entry37comment

<pre id="code_1654410005885" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 유틸리티 타입

interface User {
 id: number;
 name: string;
 age?: number;
 gender?: 'm' | 'f';
}

type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'

const uk: UserKey = 'name'; // key값 중 하나 입력!

// partial&lt;T&gt;
let admin1: Partial&lt;User&gt; = {
 id: 1,
 name: 'Bob',
 age: 10,
 // 모든 key? 상태
 // job: "student", 없는 key error
};

// Required&lt;T&gt;
let admin2: Required&lt;User&gt; = {
 id: 2,
 name: 'Tom',
 age: 10,
 gender: 'f',
 // ?가 필수 프로퍼티가 됨
};

// Readonly&lt;T&gt;
let admin3: Readonly&lt;User&gt; = {
 id: 3,
 name: 'Kate',
 age: 10,
 gender: 'm',
};

// admin3.id = 4; error 수정 불가

//Record&lt;K, T&gt; K는 key!
function isValid(user: User) {
 const result: Record&lt;keyof User, boolean&gt; = {
 id: user.id &gt; 0,
 name: user.name !== '',
 age: user.age &gt; 0,
 gender: user.gender === 'm',
 };
 return result;
}

type Grade = '1' | '2' | '3' | '4';
type Score = 'A' | 'B' | 'C' | 'D' | 'F';

const score: Record&lt;Grade, Score&gt; = {
 1: 'A',
 2: 'B',
 3: 'C',
 4: 'F',
};

// Pick&lt;T, K&gt;
const customer1: Pick&lt;User, "id" | "name"&gt; = {
 // 필수
 id: 1,
 name: "Shin",
}

// Pick&lt;T, K&gt;
const customer2: Omit&lt;User, "age" | "gender"&gt; = {
 // 제외
 id: 1,
 name: "Shin",
}

// Exclude&lt;T1, T2&gt;
type T1 = string | number;
type T2 = Exclude&lt;T1, number | boolean&gt;; // string

// NonNullable&lt;Type&gt; undefined도 제외
type T3 = string | number | null | undefined;
type T4 = NonNullable&lt;T3&gt;; // string | number

// 그 외 유틸리티는 공식문서 참고!</code></pre>
<a href="https://www.youtube.com/watch?v=IeXZo-JXJjc&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=8">https://www.youtube.com/watch?v=IeXZo-JXJjc&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=8</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=IeXZo-JXJjc" data-video-thumbnail="https://scrap.kakaocdn.net/dn/cu9i8O/hyOEa7tAjj/sBq4wMSsGzcxWXzw9TuQ70/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"><iframe src="https://www.youtube.com/embed/IeXZo-JXJjc" width="480" height="360" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;

Typescript 배우기 8 (유틸리티 타입)

https://ananas.tistory.com/36#entry36comment

<pre id="code_1654408268737" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// Generic

// 함수
// function getSize(arr:number[] | string[] | boolean[] | object[]):number {
// return arr.length;
// }
function getSize&lt;T&gt;(arr: T[]) {
 // &lt;T&gt; 타입파라미터 어떤 타입이든 전달받아서 사용
 return arr.length;
}

const arr1 = [1, 2, 3];
getSize&lt;number&gt;(arr1); // 3

const arr2 = ['a', 'b', 'c'];
getSize&lt;string&gt;(arr2); // 3

const arr3 = [true, false, true];
getSize&lt;boolean&gt;(arr3); // 3

const arr4 = [{}, {}, { name: 'Tim' }];
getSize(arr4); // 3

// 클래스
interface Service&lt;T&gt; {
 name: string;
 price: number;
 option: T;
}

const s1: Service&lt;object&gt; = {
 // 객체 내 속성이 정해져 있다면
 // &lt;{color:string, coupon: boolean}&gt;
 name: 's1',
 price: 10000,
 option: {
 color: 'red',
 coupon: false,
 },
};

const s2: Service&lt;string&gt; = {
 name: 's2',
 price: 10000,
 option: 'good',
};

interface Book {
 price: number;
}

const book: Book = { price: 4000 };

function showName&lt;T extends { name: string }&gt;(data: T): string {
 return data.name;
}

showName(s1);
showName(s2);
// showName(book);
// name이 없는 매개변수가 오면 error</code></pre>
<a href="https://www.youtube.com/watch?v=pReXmUBjU3E&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=7">https://www.youtube.com/watch?v=pReXmUBjU3E&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=7</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=pReXmUBjU3E" data-video-thumbnail="https://scrap.kakaocdn.net/dn/3R0S6/hyOFzkeQfA/SKKR3P3RIaZhQ7UYvKPcK1/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/pReXmUBjU3E" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;

https://ananas.tistory.com/35#entry35comment

<pre id="code_1654406757625" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 클래스
// class Train{
// constructor(color){
// this.color = color;
// }
// start(){
// console.log("start");
// }
// }
// JavaScript에서는 문제없지만 Typescript에서는 타입선언이 안되어 있어 에러

//추상 class
abstract class Train {
 public name: string = 'train';
 // public, private(#), protected
 static wheels = 100;
 constructor(public color: string, name) {
 // public or readonly 변수 앞 선언
 this.color = color;
 this.name = name;
 }
 start() {
 console.log('start');
 console.log(this.name);
 console.log(Train.wheels);
 // static 선언시 this는 error
 }
 abstract doSonthing(): void;
}
// const ktx = new Train('red', 'ktx');
// 추상클래스 선언시 new는 사용 안됨

// 접근 제한자(Access modifier)
// public - 자식 클래스, 클래스 인스턴스 모두 접근 가능
// private - 해당 클래스 내부에서만 접근 가능
// protected - 자식 클래스에서도 접근 가능

class Mugunghwa extends Train {
 constructor(color: string, name) {
 super(color, name);
 }
 showName() {
 console.log(super.name); // error private
 }
 // 상속받은 클래스는 추상메소드를 구체화시켜야함
 doSonthing() {
 console.log('do');
 }
}

const yongsanHang = new Mugunghwa('black', 'yongsan');
console.log(yongsanHang.name); // error protected</code></pre>
<a href="https://www.youtube.com/watch?v=17Oh028Jpis&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=6">https://www.youtube.com/watch?v=17Oh028Jpis&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=6</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=17Oh028Jpis" data-video-thumbnail="https://scrap.kakaocdn.net/dn/dzowJt/hyOEqiaZgv/EFagk3gGuJOUg5Gk7KZ4B1/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/17Oh028Jpis" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
<a href="https://www.youtube.com/watch?v=OpvtD7ELMQo">https://www.youtube.com/watch?v=OpvtD7ELMQo</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=OpvtD7ELMQo" data-video-thumbnail="https://scrap.kakaocdn.net/dn/etyVFG/hyOEhZMRMH/ApHeJqnA14rSIUdN8RH871/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/OpvtD7ELMQo" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;

https://ananas.tistory.com/34#entry34comment

<pre id="code_1654405316394" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 리터럴 타입
const userName1 = 'Bob'; // 문자열 리터럴 타입
// 상수로 정의되어진 타입

let userName2: string | number = 'Tom';
// 변수로 정의하더라도 문자열로 정의되어지면 문자열 변수만 사용가능
// 해서 | 유니온 타입 사용
userName2 = 3; // error

type job = 'police' | 'developer' | 'teacher';

interface User {
 name: string;
 job: job;
}

const user: User = {
 name: 'Bob',
 // job: "student" error
 job: 'police',
};

interface HighSchoolStudent {
 name: number | string;
 grade: 1 | 2 | 3;
}

//유니온 타입
interface Car {
 name: 'car';
 color: string;
 start(): void;
}

interface Mobile {
 name: 'mobile';
 color: string;
 call(): void;
}

function getGift(gift: Car | Mobile) {
 console.log(gift.color);
 // 식별가능한 유니온 타입
 // 동일한 속성의 타입을 다르게해서 구별
 if (gift.name === 'car') {
 gift.start();
 } else {
 gift.call();
 }
}

// Intersection Type
interface Toy {
 name: string;
 color: string;
 price: number;
}

interface Lego {
 name: string;
 bild(): void;
}

const toyLego: Toy &amp; Lego = {
 // 두 인터페이스의 모든 속성 이용
 name: '타요',
 color: 'Red',
 price: 10000,
 bild() {},
};</code></pre>
<a href="https://www.youtube.com/watch?v=QZ8TRIJWCGQ&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=5">https://www.youtube.com/watch?v=QZ8TRIJWCGQ&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=5</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=QZ8TRIJWCGQ" data-video-thumbnail="https://scrap.kakaocdn.net/dn/VfJVh/hyOEiYFSE1/VpXs3mqoGNF02c0BjCvxa1/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/QZ8TRIJWCGQ" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;

Typescript 배우기 5 (리터럴, 유니온/교차 타입)

https://ananas.tistory.com/33#entry33comment

<a href="https://wonit.tistory.com/277" target="_blank" rel="noopener">https://wonit.tistory.com/277</a>
<figure id="og_1652526811035" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="[Linux] 왜 우리는 윈도우 대신 리눅스를 배우고 사용해야 할까? :: 리눅스를 사용해야할 10가지 이" data-og-description="지난 시간 우리는 TUI 환경의 우분투 서버, x windows를 사용하는 우분투 데스크톱, 그리고 우분투 플레이버인 쿠분투를 설치하는 방법에 대해서 알아보았다. 하지만 우리는 의문을 갖는다. 윈도우" data-og-host="wonit.tistory.com" data-og-source-url="https://wonit.tistory.com/277" data-og-url="https://wonit.tistory.com/277" data-og-image="https://scrap.kakaocdn.net/dn/bySZDg/hyOoKOhYH4/AC6ytkhVXN9UiVSZlK2XW1/img.png?width=532&amp;height=224&amp;face=0_0_532_224,https://scrap.kakaocdn.net/dn/gXmJp/hyOoD2D1Xv/KtEETmVQjNgsdJfzF7Vf9k/img.png?width=532&amp;height=224&amp;face=0_0_532_224,https://scrap.kakaocdn.net/dn/tesB8/hyOoF0suqS/rMpJYfDapHyk0KoTQvRexK/img.png?width=702&amp;height=665&amp;face=0_0_702_665"><a href="https://wonit.tistory.com/277" target="_blank" rel="noopener" data-source-url="https://wonit.tistory.com/277">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bySZDg/hyOoKOhYH4/AC6ytkhVXN9UiVSZlK2XW1/img.png?width=532&amp;height=224&amp;face=0_0_532_224,https://scrap.kakaocdn.net/dn/gXmJp/hyOoD2D1Xv/KtEETmVQjNgsdJfzF7Vf9k/img.png?width=532&amp;height=224&amp;face=0_0_532_224,https://scrap.kakaocdn.net/dn/tesB8/hyOoF0suqS/rMpJYfDapHyk0KoTQvRexK/img.png?width=702&amp;height=665&amp;face=0_0_702_665');">&nbsp;</div>
<div class="og-text">
[Linux] 왜 우리는 윈도우 대신 리눅스를 배우고 사용해야 할까? :: 리눅스를 사용해야할 10가지 이
지난 시간 우리는 TUI 환경의 우분투 서버, x windows를 사용하는 우분투 데스크톱, 그리고 우분투 플레이버인 쿠분투를 설치하는 방법에 대해서 알아보았다. 하지만 우리는 의문을 갖는다. 윈도우
wonit.tistory.com
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/32#entry32comment

SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다.
검색 엔진은 웹을&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/Crawler">크롤링&nbsp;(en-US)</a>하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 (전자상거래와 광고라면) 수익으로 연결될 수도 있습니다.
검색 엔진은 일부 SEO 가이드라인을 제공하긴 하지만 대형 검색 엔진의 경우 결과 랭킹은 영업 비밀로 취급합니다. 따라서 SEO는 검색 엔진의 공식 가이드라인에 더해 경험적인 지식, 논문과 특허 등에서 가져온 이론적 지식을 결합한 과정입니다.
SEO는 세 가지 큰 방향으로 나눌 수 있습니다.
- 기술적 : 콘텐츠 마크업을 작성할 때 시맨틱&nbsp;<a href="https://developer.mozilla.org/ko/docs/Glossary/HTML">HTML</a>을 사용하세요. 색인하길 원했던 콘텐츠만 크롤러가 긁어갈 것입니다.
- 콘텐츠 작성 : 방문자층에 맞는 언어로 콘텐츠를 작성하세요. 이미지와 더불어 텍스트를 사용해, 크롤러가 주제를 이해할 수 있도록 도우세요.
- 인기도 : 다른 유명한 사이트에서 여러분의 사이트로 링크를 했다면 더 많은 트래픽을 받습니다.
&nbsp;
<a href="https://developer.mozilla.org/ko/docs/Glossary/SEO" target="_blank" rel="noopener">https://developer.mozilla.org/ko/docs/Glossary/SEO</a>
<figure id="og_1653375826401" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="SEO - 용어 사전 | MDN" data-og-description="SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Glossary/SEO" data-og-url="https://developer.mozilla.org/ko/docs/Glossary/SEO" data-og-image="https://scrap.kakaocdn.net/dn/bESnLI/hyOvIwmaFI/AEZJVik0JglyobGFYG4KoK/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080"><a href="https://developer.mozilla.org/ko/docs/Glossary/SEO" target="_blank" rel="noopener" data-source-url="https://developer.mozilla.org/ko/docs/Glossary/SEO">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bESnLI/hyOvIwmaFI/AEZJVik0JglyobGFYG4KoK/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080');">&nbsp;</div>
<div class="og-text">
SEO - 용어 사전 | MDN
SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다.
developer.mozilla.org
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/31#entry31comment

<a href="https://kyounghwan01.github.io/blog/React/next/basic/#link-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5" target="_blank" rel="noopener">https://kyounghwan01.github.io/blog/React/next/basic/#link-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5</a>
<figure id="og_1653139619698" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="next.js 기본 개념 알아보기" data-og-description="next.js 기본 개념 알아보기, react, seo, ssr" data-og-host="kyounghwan01.github.io" data-og-source-url="https://kyounghwan01.github.io/blog/React/next/basic/#link-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5" data-og-url="https://kyounghwan01.github.io/blog/React/next/basic/" data-og-image="https://scrap.kakaocdn.net/dn/UZA9o/hyOs4fHCXk/nordKG02CbyTkOgwp34GKK/img.png?width=460&amp;height=460&amp;face=0_0_460_460"><a href="https://kyounghwan01.github.io/blog/React/next/basic/#link-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5" target="_blank" rel="noopener" data-source-url="https://kyounghwan01.github.io/blog/React/next/basic/#link-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/UZA9o/hyOs4fHCXk/nordKG02CbyTkOgwp34GKK/img.png?width=460&amp;height=460&amp;face=0_0_460_460');">&nbsp;</div>
<div class="og-text">
next.js 기본 개념 알아보기
next.js 기본 개념 알아보기, react, seo, ssr
kyounghwan01.github.io
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/30#entry30comment

<pre id="code_1652958462675" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 함수

function addNm(num1: number, num2: number): number {
 return num1 + num2;
}

addNm(1, 2);

// 매개변수
function Hello(name: string, age?: number): string {
 // 옵션 매개변수는 필수 매개변수 앞에 오면 안됨!
 // age: number | undefined, name: string 은 가능
 if (age !== undefined) {
 return `Hello, ${name || 'world'}. You are ${age}.`;
 } else {
 return `Hello, ${name || 'world'}`;
 }
 // name이 없을 경우 "world"가 출력되도록 지정했어도 ?를 사용해 보다 명시적으로 표현
 // ? 옵셔널파라미터
}
// function Hello(name = 'world'):string{
// retrun `Hello, ${name}`;
// }
const result = Hello('Sam');
const result2 = Hello('Sam', 30);
// const result3 = Hello(123); // error
console.log(result, result2);

// 나머지 매개변수
function addSome(...nums: number[]) {
 return nums.reduce((result, num) =&gt; result + num, 0);
}

addSome(1, 2, 3, 4, 5); // 15

// This

interface Person {
 name: string;
 age: number;
}

const Sam: Person = {
 name: 'Sam',
 age: 30
};

function showName(this: Person, age: number, gender: 'm' | 'f') {
 console.log(this.name, age, gender);
}

const p = showName.bind(Sam);
p(30, 'm');

// 함수 오버로드
// 전달받은 매개변수의 갯수, 타입에 따라 다른 동작을 하게 하는 것

function Join(name:string, age:number):Person;
function Join(name:string, age:string):string;
function Join(name:string, age:number|string):Person|string{
 if(typeof age === "number"){
 return {name, age};
 }else{
 return "나이는 숫자로 입력해 주세요.";
 }
}

const Tom: Person = Join('Tom', 30);
const Jane: string = Join('Jane', "30");

console.log(Tom, Jane)</code></pre>
<a href="https://www.youtube.com/watch?v=prfgfj03_VA">https://www.youtube.com/watch?v=prfgfj03_VA</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=prfgfj03_VA" data-video-thumbnail="https://scrap.kakaocdn.net/dn/lfsNU/hyOtgefQyA/csarJcsB2299Z4zUTpEQF0/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/prfgfj03_VA" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
<a href="https://yamoo9.gitbook.io/typescript/interface/function-types" target="_blank" rel="noopener">https://yamoo9.gitbook.io/typescript/interface/function-types</a>
<figure id="og_1652958491318" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="인터페이스와 함수타입 - TypeScript Guidebook" data-og-description="인터페이스는 함수 타입도 정의할 수 있습니다. 함수를 할당 받을 변수에 인터페이스를 설정하면 함수 매개변수, 리턴 값 타입을 명시적으로 입력하지 않아도 오류는 발생하지 않습니다. 인터" data-og-host="yamoo9.gitbook.io" data-og-source-url="https://yamoo9.gitbook.io/typescript/interface/function-types" data-og-url="https://yamoo9.gitbook.io/typescript/interface/function-types" data-og-image=""><a href="https://yamoo9.gitbook.io/typescript/interface/function-types" target="_blank" rel="noopener" data-source-url="https://yamoo9.gitbook.io/typescript/interface/function-types">
<div class="og-image" style="background-image: url();">&nbsp;</div>
<div class="og-text">
인터페이스와 함수타입 - TypeScript Guidebook
인터페이스는 함수 타입도 정의할 수 있습니다. 함수를 할당 받을 변수에 인터페이스를 설정하면 함수 매개변수, 리턴 값 타입을 명시적으로 입력하지 않아도 오류는 발생하지 않습니다. 인터
yamoo9.gitbook.io
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/29#entry29comment

<pre id="code_1652954798871" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// 인터페이스

// let user:object;

// user = {
// name : 'xx',
// age : 30
// }
// console.log(user.name) // error
// property를 정의해서 객체를 사용할 때 interface 사용

type Score = 'A' | 'B' | 'C' | 'F';

interface User {
 name: string;
 age: number;
 gender?: string; // 있어도 되고 없어도 되고
 readonly birthYear: number; // 읽기 전용
 [grade: number]: Score; // type을 생성해서 사용할 수 있음
}

let user: User = {
 name: 'xx',
 age: 30,
 birthYear: 2000,
 1: 'A',
 // 2 : 'D' // error 정의되지 않은 Score
};

user.age = 10;
user.gender = 'male';
// user.birthYear = 1990; // error readonly
console.log(user);

// interface 함수

interface Add {
 (num1: number, num2: number): number;
}

const add: Add = function (x, y) {
 return x + y;
};

add(1, 2);
// add(a, 2); // type error

interface isAdult {
 (age: number): boolean;
}

const g: isAdult = (age) =&gt; {
 return age &gt; 19;
};

g(33); // true

// implements
// interface class

interface Car {
 color: string;
 wheels: number;
 start(): void;
}

class Bmw implements Car {
 color;
 wheels = 4;

 constructor(c: string) {
 this.color = c;
 }

 start() {
 console.log('go...');
 }
}

const m = new Bmw('green');
console.log(m)
m.start();


// extend 인터페이스 확장

interface Benz extends Car {
 door: number;
 stop(): void;
}

const benz : Benz = {
 color : 'black',
 wheels : 4,
 start(){
 console.log('do not go')
 },
 door : 5,
 stop(){
 console.log('stop');
 }
}

console.log(benz)

// 복수 확장

interface Toy {
 name: string;
}

interface ToyCar extends Car, Toy {
 price : number
}</code></pre>
<a href="https://www.youtube.com/watch?v=OIMPLNICzoc">https://www.youtube.com/watch?v=OIMPLNICzoc</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=OIMPLNICzoc" data-video-thumbnail="https://scrap.kakaocdn.net/dn/byxhph/hyOs2tvhi9/nIXLmNiRTrQGqSXZe23Ee1/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/OIMPLNICzoc" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
<a href="https://yamoo9.gitbook.io/typescript/interface/extends" target="_blank" rel="noopener">https://yamoo9.gitbook.io/typescript/interface/extends</a>

https://ananas.tistory.com/28#entry28comment

<pre id="code_1652953001066" class="bash" data-ke-language="bash" data-ke-type="codeblock"><code>// index.ts

// string
let car: string = 'bmw';

// number
let age: number = 30;

// boolean
let isAdult: boolean = true;

// Array
let a: number[] = [1, 2, 3];
let a2: Array&lt;number&gt; = [1, 2, 3];

let week1: string[] = ['mon', 'tue', 'wed'];
let week2: Array&lt;string&gt; = ['mon', 'tue', 'wed'];

console.log(age, isAdult, a, a2, week1, week2);

// 튜플 Tuple

let b: [string, number];

b = ['z', 1];
// b = [1, 'z']; error

b[0].toLowerCase();
// b[1].toLowerCase(); error

// void, never
function sayHello(): void {
 // void - 주어진 표현식을 평가하고 undefined를 반환
 console.log('hello');
}

function showError(): never {
 // never - 일반적으로 함수의 리턴 타입으로 사용
 // 함수의 리턴 타입으로 never가 사용될 경우, 항상 오류를 출력하거나 리턴 값을 절대로 내보내지 않음을 의미
 // 이는 무한 루프(loop)에 빠지는 것과 같다

 throw new Error();
}

function infLoop(): never {
 while (true) {
 // do something...
 }
}

// enum

enum Os {
 // enum - 열거형 데이터 타입
 // 멤버라 불리는 명명된 값의 집합을 이루는 자료형으로 기억하기 어려운 숫자 대신 친숙한 이름으로 접근/사용하기 위해 활용할 수 있다
 // 열거된 각 멤버는 별도의 값이 설정되지 않은 경우 기본적으로 0부터 시작
 Window, // (enum member) os.Window = 0
 Ios = 3, // 값을 지정할 경우, 이후 멤버의 값은 +1씩 증가
 Android, // (enum member) os. Android = 4
}

console.log(Os[3]); // Ios
console.log(Os['Window']); // 0

let myOs: Os;
myOs = Os.Window;
// 특정값을 입력하고자 강제하고 싶을 때, 그 값들이 공통점이 있을 때 사용

// null, undefined

let c: null = null;
let d: undefined = undefined;</code></pre>
<a href="https://www.youtube.com/watch?v=70w82P-KiVM">https://www.youtube.com/watch?v=70w82P-KiVM</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=70w82P-KiVM" data-video-thumbnail="https://scrap.kakaocdn.net/dn/cKATtZ/hyOtdaHOKQ/y0u8cKFLS11JsaIcgsv6o1/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/70w82P-KiVM" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
<a href="https://yamoo9.gitbook.io/typescript/types/enum" target="_blank" rel="noopener">https://yamoo9.gitbook.io/typescript/types/enum</a>
<figure id="og_1652953035529" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="enum 타입 - TypeScript Guidebook" data-og-description="enum은 다음과 같은 JavaScript 코드로 컴파일 됩니다. enum 데이터 코드는 멤버는 숫자 또는 데이터 값을 속성으로 하는 객체를 생성하는 코드로 변환됩니다." data-og-host="yamoo9.gitbook.io" data-og-source-url="https://yamoo9.gitbook.io/typescript/types/enum" data-og-url="https://yamoo9.gitbook.io/typescript/types/enum" data-og-image="https://scrap.kakaocdn.net/dn/c6OhZU/hyOsox9G42/AGan0cwACnMU8J92gvl4w1/img.png?width=1384&amp;height=400&amp;face=0_0_1384_400"><a href="https://yamoo9.gitbook.io/typescript/types/enum" target="_blank" rel="noopener" data-source-url="https://yamoo9.gitbook.io/typescript/types/enum">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/c6OhZU/hyOsox9G42/AGan0cwACnMU8J92gvl4w1/img.png?width=1384&amp;height=400&amp;face=0_0_1384_400');">&nbsp;</div>
<div class="og-text">
enum 타입 - TypeScript Guidebook
enum은 다음과 같은 JavaScript 코드로 컴파일 됩니다. enum 데이터 코드는 멤버는 숫자 또는 데이터 값을 속성으로 하는 객체를 생성하는 코드로 변환됩니다.
yamoo9.gitbook.io
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/26#entry26comment

리덕스는 리액트에서 컨포넌트가 많아지고 복잡해지면서 생기는 복잡한 prop를 관리하기 위한 라이브러리/패턴이다.
리덕스를 사용하면 액션시 스토어가 포함된 컨포넌트만 재랜더링 되기 때문에 퍼포먼스면에서 더 효율적이다.
createSrote를 사용하는 과정에서 Reduxjs/toolkit을 권장하고 있기에 밑줄이 계속 발생했다. 아직은 createStore을 사용할 수 있으나, toolkit을 설치 후 configureStore를 사용하거나 legacy_createStore as createStore로 사용해야 함.
<pre id="code_1652432750605" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>import * as React from 'react';
import './style.css';
import { legacy_createStore as createStore } from 'redux';
// reduxjs/toolkit 에서는 configureStore를 추천하지만,
// createStore를 계속 사용하기 위해 legacy_createStore as createStore를 씀
import { Provider, useSelector, useDispatch, connect } from 'react-redux';

function reducer(currentState, action) {
 if (currentState === undefined) {
 return {
 number: 1,
 };
 }
 // 각각의 스테이트 값의 변화를 불변하게 유지해야함.
 const newState = { ...currentState };
 if (action.type === 'PLUS') {
 newState.number++;
 }
 return newState;
}
const store = createStore(reducer);

export default function App() {
 // const [number, setNumber] = React.useState(1);
 return (
 &lt;div id="container"&gt;
 &lt;h1&gt;Root&lt;/h1&gt;
 &lt;div id="grid"&gt;
 &lt;Provider store={store}&gt;
 &lt;Left1 /&gt;
 &lt;Right1 /&gt;
 &lt;/Provider&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}

function Left1(props) {
 return (
 &lt;div&gt;
 &lt;h1&gt;Left1&lt;/h1&gt;
 &lt;Left2 /&gt;
 &lt;/div&gt;
 );
}

function Left2(props) {
 console.log('2');
 return (
 &lt;div&gt;
 &lt;h1&gt;Left2&lt;/h1&gt;
 &lt;Left3 /&gt;
 &lt;/div&gt;
 );
}
// redux를 사용하면 state를 사용하는 넘버만 재랜더링 된다.
// 퍼포먼스면에서 효율적임.
function Left3(props) {
 console.log('3');
 const number = useSelector((state) =&gt; state.number);
 // useSelector는 함수를 인자로 받음
 return (
 &lt;div&gt;
 &lt;h1&gt;Left3 : {number}&lt;/h1&gt;
 &lt;/div&gt;
 );
}

function Right1(props) {
 return (
 &lt;div&gt;
 &lt;h1&gt;Right1&lt;/h1&gt;
 &lt;Right2 /&gt;
 &lt;/div&gt;
 );
}

function Right2(props) {
 return (
 &lt;div&gt;
 &lt;h1&gt;Right2&lt;/h1&gt;
 &lt;Right3 /&gt;
 &lt;/div&gt;
 );
}

function Right3(props) {
 const dispatch = useDispatch();
 return (
 &lt;div&gt;
 &lt;h1&gt;Right3&lt;/h1&gt;
 &lt;input
 type="button"
 value="+"
 onClick={() =&gt; {
 dispatch({ type: 'PLUS' });
 }}
 /&gt;
 &lt;/div&gt;
 );
}
// 부모 자식 컴포넌트가 많아지고 복잡해 질 때, props 관리 또한 복잡해 진다.</code></pre>
<a href="https://stackblitz.com/edit/react-ts-2itycz?embed=1&amp;file=App.tsx">https://stackblitz.com/edit/react-ts-2itycz?embed=1&amp;file=App.tsx</a>&nbsp;
&nbsp;
<figure id="og_1652432333833" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="React Ts (forked) - StackBlitz" data-og-description="" data-og-host="stackblitz.com" data-og-source-url="https://stackblitz.com/edit/react-ts-2itycz?embed=1&amp;file=App.tsx" data-og-url="https://stackblitz.com/edit/react-ts-2itycz?embed=1&amp;file=App.tsx" data-og-image="https://scrap.kakaocdn.net/dn/Tf4Hb/hyOoCBHnPh/iweLxuBIejKKFNPlspeJx0/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800"><a href="https://stackblitz.com/edit/react-ts-2itycz?embed=1&amp;file=App.tsx" target="_blank" rel="noopener" data-source-url="https://stackblitz.com/edit/react-ts-2itycz?embed=1&amp;file=App.tsx">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/Tf4Hb/hyOoCBHnPh/iweLxuBIejKKFNPlspeJx0/img.png?width=1600&amp;height=800&amp;face=0_0_1600_800');">&nbsp;</div>
<div class="og-text">
React Ts (forked) - StackBlitz
&nbsp;
stackblitz.com
</div>
</a></figure>
<a href="https://www.youtube.com/watch?v=yjuwpf7VH74&amp;t=40s">https://www.youtube.com/watch?v=yjuwpf7VH74&amp;t=40s</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=yjuwpf7VH74" data-video-thumbnail="https://scrap.kakaocdn.net/dn/b5gepH/hyOoFLWEGR/OOaV3uqZ3CEKBtwCrYOZ5K/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/yjuwpf7VH74" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;
&nbsp;
&nbsp;
&nbsp;

https://ananas.tistory.com/25#entry25comment

아..튜토리얼이 영어인데 이게 모바일에서 그런지는 모르겠다. 아이패드만 갖고 카페에 온 상황에 타자 치는거는 너무 중노동이니 그냥 영어로 발췌하는 점 양해바람.
<blockquote data-ke-style="style1"> Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion. Redux helps you manage "global" state - state that is needed across many parts of your application. The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected. 
</blockquote>
<pre data-ke-type="codeblock" class="Javascript" data-ke-language="Javascript"><code>// Actions
const addTodoAction = {
&nbsp;&nbsp;type: 'todos/todoAdded',
&nbsp;&nbsp;payload: 'Buy milk'
}

// Action Creators
const addTodo = text =&gt; {
&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;type: 'todos/todoAdded',
&nbsp;&nbsp;&nbsp;&nbsp;payload: text
&nbsp;&nbsp;}
}

// Reducers
const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
&nbsp;&nbsp;// Check to see if the reducer cares about this action
&nbsp;&nbsp;if (action.type === 'counter/increment') {
&nbsp;&nbsp;&nbsp;&nbsp;// If so, make a copy of `state`
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...state,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// and update the copy with the new value
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value: state.value + 1
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
&nbsp;&nbsp;// otherwise return the existing state unchanged
&nbsp;&nbsp;return state
}

// Store
import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())
// {value: 0}

// Dispatch
store.dispatch({ type: 'counter/increment' })

console.log(store.getState())
// {value: 1}

// call action creators to dispatch the right action:
const increment = () =&gt; {
&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;type: 'counter/increment'
&nbsp;&nbsp;}
}

store.dispatch(increment())

console.log(store.getState())
// {value: 2}

// Selectors
const selectCounterValue = state =&gt; state.value

const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2

</code></pre>
<blockquote data-ke-style="style2">
 SUMMARY 
 
 Redux is a library for managing global application state 
 - Redux is typically used with the React-Redux library for integrating Redux and React together 
 - Redux Toolkit is the recommended way to write Redux logic 
 Redux uses a "one-way data flow" app structure 
 - State describes the condition of the app at a point in time, and UI renders based on that state 
 - When something happens in the app: 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The UI dispatches an action 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The store runs the reducers, and the state is updated based on what occurred 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The store notifies the UI that the state has changed 
 - The UI re-renders based on the new state 
 Redux uses several types of code 
 - Actions are plain objects with a type field, and describe "what happened" in the app 
 - Reducers are functions that calculate a new state value based on previous state + an action 
 - A Redux store runs the root reducer whenever an action is dispatched 
</blockquote>
 <a href="https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts" target="_blank">https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts</a>
<figure data-ke-type="opengraph" data-og-title="Redux 핵심, Part 1: Redux Overview and Concepts | Redux" data-ke-align="alignCenter" data-og-description="The official Essentials tutorial for Redux: learn how to use Redux, the right way" data-og-host="ko.redux.js.org" data-og-source-url="https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts" data-og-image="https://scrap.kakaocdn.net/dn/dFVozl/hyOmEgjqJ2/RqVBgW4lDWod1MS2kYkwl0/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600" data-og-url="https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts">
 <a href="https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts" target="_blank" data-source-url="https://ko.redux.js.org/tutorials/essentials/part-1-overview-concepts">
 <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/dFVozl/hyOmEgjqJ2/RqVBgW4lDWod1MS2kYkwl0/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600')"> 
 </div>
 <div class="og-text">
 Redux 핵심, Part 1: Redux Overview and Concepts | Redux
 The official Essentials tutorial for Redux: learn how to use Redux, the right way
 ko.redux.js.org
 </div></a>
</figure>

https://ananas.tistory.com/24#entry24comment

<blockquote data-ke-style="style1"> Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다. 여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작지만(의존 라이브러리 포함 2kB), 사용 가능한 애드온은 매우 많습니다. 기본 예제 여러분의 앱의 상태 전부는 하나의 저장소(store)안에 있는 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(reducers)를 작성해야 합니다. 상태를 바로 변경하는 대신, 액션이라 불리는 평범한 객체를 통해 일어날 변경을 명시합니다. 그리고 각각의 액션이 전체 애플리케이션의 상태를 어떻게 변경할지 결정하는 특별한 함수인 리듀서를 작성합니다. 보통의 Redux 앱에는 하나의 루트 리듀서 함수를 가진 단 하나의 저장소가 있습니다. 앱이 커짐에 따라 루트 리듀서를 상태 트리의 서로 다른 부분에서 개별적으로 동작하는 작은 리듀서들로 나눌 수 있습니다. React 앱을 하나의 루트 컴포넌트에서 시작해서 여러 작은 컴포넌트의 조합으로 바꾸는 것과 동일합니다. 이런 아키텍처가 카운터 앱에서는 너무 과한 것처럼 보이지만, 크고 복잡한 앱에서는 이 패턴의 확장성이 잘 드러납니다. 액션에 따른 모든 변경을 추적할 수 있기 때문에, 매우 강력한 개발자 도구를 가능하게 해주기도 합니다. 여러분은 사용자 세션을 기록한 다음 액션 하나하나를 다시 실행해 볼 수 있습니다. 
</blockquote>
<pre data-ke-type="codeblock" class="Javascript" data-ke-language="Javascript"><code>import { createStore } from 'redux'

/**
 * 이것이 (state, action) =&gt; state 형태의 순수 함수인 리듀서입니다.
 * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다.
 *
 * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도,
 * 심지어 Immutable.js 자료구조일수도 있습니다.&nbsp;&nbsp;오직 중요한 점은 상태 객체를 변경해서는 안되며,
 * 상태가 바뀐다면 새로운 객체를 반환해야 한다는 것입니다.
 *
 * 이 예제에서 우리는 `switch` 구문과 문자열을 썼지만,
 * 여러분의 프로젝트에 맞게
 * (함수 맵 같은) 다른 컨벤션을 따르셔도 좋습니다.
 */
function counter(state = 0, action) {
&nbsp;&nbsp;switch (action.type) {
&nbsp;&nbsp;&nbsp;&nbsp;case 'INCREMENT':
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return state + 1
&nbsp;&nbsp;&nbsp;&nbsp;case 'DECREMENT':
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return state - 1
&nbsp;&nbsp;&nbsp;&nbsp;default:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return state
&nbsp;&nbsp;}
}

// 앱의 상태를 보관하는 Redux 저장소를 만듭니다.
// API로는 { subscribe, dispatch, getState }가 있습니다.
let store = createStore(counter)

// subscribe()를 이용해 상태 변화에 따라 UI가 변경되게 할 수 있습니다.
// 보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다.
// 하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다.

store.subscribe(() =&gt; console.log(store.getState())))

// 내부 상태를 변경하는 유일한 방법은 액션을 보내는 것뿐입니다.
// 액션은 직렬화할수도, 로깅할수도, 저장할수도 있으며 나중에 재실행할수도 있습니다.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1</code></pre>
 <a href="https://ko.redux.js.org/introduction/getting-started/" target="_blank">https://ko.redux.js.org/introduction/getting-started/</a>
<figure data-ke-type="opengraph" data-og-title="Redux 시작하기 | Redux" data-ke-align="alignCenter" data-og-description="소개 > 시작하기: Redux를 배우고 사용하기 위한 자료" data-og-host="ko.redux.js.org" data-og-source-url="https://ko.redux.js.org/introduction/getting-started" data-og-image="https://scrap.kakaocdn.net/dn/cYyhbS/hyOmx9dBGe/qx5KUTziSvtw6W3Lc3tt9K/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600" data-og-url="https://ko.redux.js.org/introduction/getting-started">
 <a href="https://ko.redux.js.org/introduction/getting-started" target="_blank" data-source-url="https://ko.redux.js.org/introduction/getting-started">
 <div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/cYyhbS/hyOmx9dBGe/qx5KUTziSvtw6W3Lc3tt9K/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600')"> 
 </div>
 <div class="og-text">
 Redux 시작하기 | Redux
 소개 &gt; 시작하기: Redux를 배우고 사용하기 위한 자료
 ko.redux.js.org
 </div></a>
</figure>

https://ananas.tistory.com/23#entry23comment

Run-Time Bundle Intergrations
S-spa or Webpack
-&gt; Webpack 5 Module Federation를 활용
webpack이 처리할 수 있는 모든 형태를 Federate할 수 있다.
Any JacaScript Runtiomes(잠재능력)
<a href="https://www.youtube.com/watch?v=0Eq6evGKJ68&amp;t=32s">https://www.youtube.com/watch?v=0Eq6evGKJ68&amp;t=32s</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=0Eq6evGKJ68" data-video-thumbnail="https://scrap.kakaocdn.net/dn/P2pFC/hyOgtkOVIa/HAfLSG0PRXSL5E41hPKi1k/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/0Eq6evGKJ68" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;

https://ananas.tistory.com/22#entry22comment

css 설치
<pre id="code_1651570364157" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>$ npm i -D style-loader css-loader</code></pre>
<pre id="code_1651570569197" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// webpack.config.js

const path = require("path"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 

module.exports = {
	entry : './src/index.js',
 output : { 
 	filename : "main.js",
 path : path.resolve(__dirname, "dist"),
 },
 // 추가내용
 module : {
 	reles : [{
 test : /\.css$/,
 use : ["style-loader", "css-loader"], // use의 배열은 뒤에서부터 적용됨
 }]
 },
 plugins : [
 	new HtmlWebpackPlugin({
 		template : "./index.html",
 	}),
 ],
 devServer : {
 	static : {
 	directory : path.resolve(__dirname, 'dist')
 },
 port : 8080
 }
};</code></pre>
이후 작업 중인 js 파일에 css 파일을 import해준다.
<pre id="code_1651570739195" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>$ npm i -D mini-css-extract-plugin</code></pre>
<pre id="code_1651571050995" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// webpack.config.js

const path = require("path"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	entry : './src/index.js',
 output : { 
 	filename : "main.js",
 path : path.resolve(__dirname, "dist"),
 },
 module : {
 	reles : [{
 test : /\.css$/,
 // use : ["style-loader", "css-loader"], // html 내에 style 태그로 css 생성
 use : [MiniCssExtractPlugin.loader, "css-loader"], 
 // css파일이 생성되고 html에 link 태그로 불러오기, 
 }]
 },
 plugins : [
 	new HtmlWebpackPlugin({
 		template : "./index.html",
 	}),
 new MiniCssExtractPlugin({
 	filename : "common.css", // 만들어질 css 파일이름
 }),
 ],
 devServer : {
 	static : {
 	directory : path.resolve(__dirname, 'dist')
 },
 port : 8080
 }
};</code></pre>
이미지 파일 불러오기
<pre id="code_1651571464224" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>$ npm i -D file-loader</code></pre>
<pre id="code_1651571597298" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// webpack.config.js

const path = require("path"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	entry : './src/index.js',
 output : { 
 	filename : "main.js",
 path : path.resolve(__dirname, "dist"),
 },
 module : {
 	reles : [
 {
 test : /\.css$/,
 use : [MiniCssExtractPlugin.loader, "css-loader"],
 },
 { // 추가내용
 	test : /\.jpg$/,
 use : ["file.loader"]
 }
 ]
 },
 plugins : [
 	new HtmlWebpackPlugin({
 		template : "./index.html",
 	}),
 new MiniCssExtractPlugin({
 	filename : "common.css",
 }),
 ],
 devServer : {
 	static : {
 	directory : path.resolve(__dirname, 'dist')
 },
 port : 8080
 }
};</code></pre>
사용하지 않는 파일 정리해주는 플러그인
<pre id="code_1651571881626" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>$ npm i -D clean-webpack-plugin</code></pre>
<pre id="code_1651572012666" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// webpack.config.js

const path = require("path"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
	entry : './src/index.js',
 output : { 
 	filename : "main.js",
 path : path.resolve(__dirname, "dist"),
 },
 module : {
 	reles : [
 {
 test : /\.css$/,
 use : [MiniCssExtractPlugin.loader, "css-loader"],
 },
 {
 	test : /\.jpg$/,
 use : ["file.loader"]
 }
 ]
 },
 plugins : [
 	new HtmlWebpackPlugin({
 		template : "./index.html",
 	}),
 new MiniCssExtractPlugin({
 	filename : "common.css",
 }),
 new CleanWebpackPlugin
 ],
 devServer : {
 	static : {
 	directory : path.resolve(__dirname, 'dist')
 },
 port : 8080
 }
};</code></pre>

https://ananas.tistory.com/21#entry21comment

<h3 data-ke-size="size23">Webpack 설치</h3>
<pre id="code_1651569200659" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>$ npm init -y
$ npm install webpack webpack-cli --save-dev</code></pre>
webpack.config.js 파일을 생성
<pre id="code_1651568396986" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// webpack.config.js

const path = require("path"); // 노드에서 제공하는 패스모드 활용

module.exports = {
	entry : './src/index.js', // 시작파일
 output : { // 만들어지는 최종파일을 내보내는 옵션
 	filename : "main.js",
 path : path.resolve(__dirname, "dist"), // 폴드 현재경로 하위 -&gt; 폴더명
 },
}</code></pre>
package.json에서 빌드 모드 추가해주기
<pre id="code_1651569223042" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// package.json

"scripts": {
	"build" : "webpack",
}</code></pre>
$ npm run build
여기까지 하면 빌드된 main.js 파일이 dist 폴더에 생성된다.
하지만 배포하기 위해선 index.html 파일이 필요하니 html 플러그인을 설치하겠다.
<pre id="code_1651569249024" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>$ npm i html-webpack-plugin</code></pre>
<pre id="code_1651569162960" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// webpack.config.js

const path = require("path"); // 노드에서 제공하는 패스모드 활용
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 터미널에 설치후 사용

module.exports = {
	entry : './src/index.js', // 시작파일
 output : { // 만들어지는 최종파일을 내보내는 옵션
 	filename : "main.js",
 path : path.resolve(__dirname, "dist"), // 폴드 현재경로 하위 -&amp;gt; 폴더명
 },
 plugins : [new HtmlWebpackPlugin({
 		template : "./index.html",
 	}
 )],
 };</code></pre>
$ npm run build
여기까지 하면 이후 파일을 수정할 때마다 직접 run build를 하고 직접 서버를 띄워야 해서 불편하다.
이때 아래의 명령어를 설치해주면 자동으로 서버를 띄워줘서 편해진다!
<pre id="code_1651569304289" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>$ npm i webpack-dev-server -D</code></pre>
<pre id="code_1651569495899" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// webpack.config.js

const path = require("path"); // 노드에서 제공하는 패스모드 활용
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 터미널에 설치후 사용

module.exports = {
	entry : './src/index.js', // 시작파일
 output : { // 만들어지는 최종파일을 내보내는 옵션
 	filename : "main.js",
 path : path.resolve(__dirname, "dist"), // 폴드 현재경로 하위 -&amp;gt; 폴더명
 },
 plugins : [
 	new HtmlWebpackPlugin({
 		template : "./index.html",
 	}),
 ],
 devServer : {
 	static : {
 	directory : path.resolve(__dirname, 'dist')
 },
 port : 8080
 }
};</code></pre>
<pre id="code_1651569649678" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// package.json

"scripts": {
	"start" : "webpack serve --open --mode=development", 
 // webpack devServer는 개발자 모드에서만 사용가능
	"build" : "webpack --mode=production",
 // 개발모드로 빌드시 코드가 더 복잡하게 나옴. 디버깅하기 좋으나 배포는 프러덕션 모드로 진행
}</code></pre>
&nbsp;
<a href="https://www.youtube.com/watch?v=zal9HVgrMaQ">https://www.youtube.com/watch?v=zal9HVgrMaQ</a>&nbsp;
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=zal9HVgrMaQ" data-video-thumbnail="https://scrap.kakaocdn.net/dn/dpqn0W/hyOgzSOfhW/VpRWIknRfcugMG4hQHKimK/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"><iframe src="https://www.youtube.com/embed/zal9HVgrMaQ" width="480" height="360" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
&nbsp;

https://ananas.tistory.com/20#entry20comment

왜 타입스크립트를 배우는가?
JavaScript는 동적언어로 런타임에 타입이 결정되며 오류를 발견하다.
반면 Java, TypeScript는 정적언어로 컴파일 타임에 타입이 결정되고 오류를 발견한다.
해서 오류를 확인하기 위해 끊임없이 console.log를 찍어보아야하는 자바스크립트의 단점을 보안하기 위해 타입스크립트를 사용한다.
<a href="https://www.youtube.com/watch?v=5oGAkQsGWkc&amp;list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&amp;index=1">코딩앙마의 TypeScript</a>
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=5oGAkQsGWkc" data-video-thumbnail="https://scrap.kakaocdn.net/dn/gb8WX/hyOe6X8xYK/8y5ZqcvfkFAEHwZ9BXJNIK/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/5oGAkQsGWkc" width="860" height="484" frameborder="" allowfullscreen="true"></iframe>
<figcaption></figcaption>
</figure>
모든 프로그래밍 언어에 장단점이 있듯이 자바스크립트도 언어가 잘 정제되기 이전에 서둘러 출시된 문제와 과거 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 좋은 점도, 나쁜 점도 많은 것이 사실이다.
자바스크립트는 C나 Java와 같은 언어와는 구별되는 특성이 있다.
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>Prototype-based Object Oriented Language</li>
<li>Scope와&nbsp;this</li>
<li>동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosely typed) 언어</li>
</ul>
이와 같은 특성은 클래스 기반 객체지향 언어(Java, C++, C# 등)에 익숙한 개발자를 혼란스럽게 하며 코드가 복잡해질 수 있고 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있어 특히 규모가 큰 프로젝트에서는 주의하여야 한다.
이같은 자바스크립트의 태생적 문제를 극복하고자&nbsp;CoffeeScript,&nbsp;Dart,&nbsp;Haxe와 같은&nbsp;AltJS(자바스크립트의 대체 언어)가 등장하였다.
TypeScript 또한 자바스크립트 대체 언어의 하나로써&nbsp;자바스크립트(ES5)의 Superset(상위확장)이다. C#의 창시자인 덴마크 출신 소프트웨어 엔지니어&nbsp;Anders Hejlsberg(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoft에서 2012년 발표한 오픈소스로, 정적 타이핑을 지원하며 ES6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다.
TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있다. 또한, ES6의 새로운 기능들을 사용하기 위해&nbsp;Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있다.
이후&nbsp;ECMAScript의 업그레이드에 따른 새로운 기능을 지속적으로 추가할 예정이여서 매년 업그레이드될 ECMAScript의 표준을 따라갈 수 있는 좋은 수단이 될 것이다.
출처 :&nbsp;<a href="https://poiemaweb.com/typescript-introduction">https://poiemaweb.com/typescript-introduction</a>

https://ananas.tistory.com/19#entry19comment

<a href="https://www.redhat.com/ko/topics/devops/what-is-ci-cd" target="_blank" rel="noopener">https://www.redhat.com/ko/topics/devops/what-is-ci-cd</a>
<figure id="og_1651228401967" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="CI/CD(지속적 통합/지속적 제공): 개념, 방법, 장점, 구현 과정" data-og-description="CI/CD는 애플리케이션의 통합 및 테스트부터 제공 및 배포까지 전체 라이프사이클에서 지속적인 자동화와 모니터링을 제공합니다. 개념, 차이점, 학습방법(인강)을 보세요." data-og-host="www.redhat.com" data-og-source-url="https://www.redhat.com/ko/topics/devops/what-is-ci-cd" data-og-url="https://www.redhat.com/ko/topics/devops/what-is-ci-cd" data-og-image="https://scrap.kakaocdn.net/dn/caU6Y6/hyOduYh3Vw/fKWbp7wwzUjIPcZkQYkXrk/img.png?width=1200&amp;height=675&amp;face=0_0_1200_675,https://scrap.kakaocdn.net/dn/SR1Pi/hyOcCcz1K5/V4juHbmT5MgeUhDnwsa230/img.png?width=826&amp;height=218&amp;face=0_0_826_218"><a href="https://www.redhat.com/ko/topics/devops/what-is-ci-cd" target="_blank" rel="noopener" data-source-url="https://www.redhat.com/ko/topics/devops/what-is-ci-cd">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/caU6Y6/hyOduYh3Vw/fKWbp7wwzUjIPcZkQYkXrk/img.png?width=1200&amp;height=675&amp;face=0_0_1200_675,https://scrap.kakaocdn.net/dn/SR1Pi/hyOcCcz1K5/V4juHbmT5MgeUhDnwsa230/img.png?width=826&amp;height=218&amp;face=0_0_826_218');">&nbsp;</div>
<div class="og-text">
CI/CD(지속적 통합/지속적 제공): 개념, 방법, 장점, 구현 과정
CI/CD는 애플리케이션의 통합 및 테스트부터 제공 및 배포까지 전체 라이프사이클에서 지속적인 자동화와 모니터링을 제공합니다. 개념, 차이점, 학습방법(인강)을 보세요.
www.redhat.com
</div>
</a></figure>
새로운 코드 통합으로 인해 개발 및 운영팀에 발생하는 문제(통합지옥"intergration hell")을 해결하기 위한 솔루션
CI/CD 는 어플리케이션의 통합 및 테스트 단계에서부터 제공 및 배포에 이르는 라이프사이클 전체에 걸쳐 지속적인 자동화와 지속적인 모니터링을 제공
이러한 구축 사례를 일반적으로 "CI/CD 파이프라인"이라 하며 개발 및 운영팀의 애자일방식 협력을 통해 지원
CI(Continuous Integration) 개발자를 위한 자동화 프로세스인 지속적인 통합을 의미
CD(Continuous Delivery or Deployment) 지속적인 서비스 제공 및 지속적인 배포

https://ananas.tistory.com/16#entry16comment

<a href="https://www.redhat.com/ko/topics/api/what-is-a-rest-api" target="_blank" rel="noopener">https://www.redhat.com/ko/topics/api/what-is-a-rest-api</a>
<figure id="og_1649406935685" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="REST API(RESTful API, 레스트풀 API)란 - 서버, 구현, 사용법" data-og-description="REST API(RESTful API)란 REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻합니다. api 서버, rest api 구현 및 사용법을 설명합니다." data-og-host="www.redhat.com" data-og-source-url="https://www.redhat.com/ko/topics/api/what-is-a-rest-api" data-og-url="https://www.redhat.com/ko/topics/api/what-is-a-rest-api" data-og-image="https://scrap.kakaocdn.net/dn/bz0oeb/hyNYChUrlL/D7P2o2sJPkOSU4jKXQNq6k/img.jpg?width=1200&amp;height=675&amp;face=0_0_1200_675,https://scrap.kakaocdn.net/dn/LsRG5/hyNYNKvfro/sMW1DafX7yxrhyu1eCCyNk/img.jpg?width=1200&amp;height=675&amp;face=0_0_1200_675"><a href="https://www.redhat.com/ko/topics/api/what-is-a-rest-api" target="_blank" rel="noopener" data-source-url="https://www.redhat.com/ko/topics/api/what-is-a-rest-api">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bz0oeb/hyNYChUrlL/D7P2o2sJPkOSU4jKXQNq6k/img.jpg?width=1200&amp;height=675&amp;face=0_0_1200_675,https://scrap.kakaocdn.net/dn/LsRG5/hyNYNKvfro/sMW1DafX7yxrhyu1eCCyNk/img.jpg?width=1200&amp;height=675&amp;face=0_0_1200_675');">&nbsp;</div>
<div class="og-text">
REST API(RESTful API, 레스트풀 API)란 - 서버, 구현, 사용법
REST API(RESTful API)란 REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻합니다. api 서버, rest api 구현 및 사용법을 설명합니다.
www.redhat.com
</div>
</a></figure>
<a href="https://meetup.toast.com/posts/92" target="_blank" rel="noopener">​https://meetup.toast.com/posts/92</a>
<figure id="og_1649406899041" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="REST API 제대로 알고 사용하기 : NHN Cloud Meetup" data-og-description="REST API 제대로 알고 사용하기" data-og-host="meetup.toast.com" data-og-source-url="https://meetup.toast.com/posts/92" data-og-url="https://meetup.toast.com/posts/92" data-og-image="https://scrap.kakaocdn.net/dn/be2VO1/hyNYRe4uJt/ItlkGk4oSLbGkUxu5bVGKk/img.png?width=180&amp;height=91&amp;face=0_0_180_91,https://scrap.kakaocdn.net/dn/l9lxD/hyNXuTlZtx/x8nixsoOsjGbnl6s3wkgn1/img.png?width=180&amp;height=91&amp;face=0_0_180_91"><a href="https://meetup.toast.com/posts/92" target="_blank" rel="noopener" data-source-url="https://meetup.toast.com/posts/92">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/be2VO1/hyNYRe4uJt/ItlkGk4oSLbGkUxu5bVGKk/img.png?width=180&amp;height=91&amp;face=0_0_180_91,https://scrap.kakaocdn.net/dn/l9lxD/hyNXuTlZtx/x8nixsoOsjGbnl6s3wkgn1/img.png?width=180&amp;height=91&amp;face=0_0_180_91');">&nbsp;</div>
<div class="og-text">
REST API 제대로 알고 사용하기 : NHN Cloud Meetup
REST API 제대로 알고 사용하기
meetup.toast.com
</div>
</a></figure>
<a href="https://spoqa.github.io/2012/02/27/rest-introduction.html" target="_blank" rel="noopener">https://spoqa.github.io/2012/02/27/rest-introduction.html</a>
&nbsp;

Rest API (Representational State Transfer)

https://ananas.tistory.com/15#entry15comment

<a href="http://clipsoft.co.kr/wp/blog/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98msa-%EA%B0%9C%EB%85%90/" target="_blank" rel="noopener">http://clipsoft.co.kr/wp/blog/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98msa-%EA%B0%9C%EB%85%90/</a>
<figure id="og_1649315827618" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="마이크로서비스 아키텍처(MSA) 개념 소개 - CLIPSOFT" data-og-description="작성자 : 이응호 과장 &nbsp; 마이크로서비스 아키텍처(MSA) 개념 소개 &nbsp; 프리랜서로 일하고 있는 지인이 최근 구직을 하고 있었습니다. 그러면서 하는 말이 요즘 IT업계 구직시장에서 최고의 화두가 M" data-og-host="clipsoft.co.kr" data-og-source-url="http://clipsoft.co.kr/wp/blog/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98msa-%EA%B0%9C%EB%85%90/" data-og-url="http://clipsoft.co.kr/wp/blog/%eb%a7%88%ec%9d%b4%ed%81%ac%eb%a1%9c%ec%84%9c%eb%b9%84%ec%8a%a4-%ec%95%84%ed%82%a4%ed%85%8d%ec%b2%98msa-%ea%b0%9c%eb%85%90/" data-og-image="https://scrap.kakaocdn.net/dn/burSmJ/hyNXxoc0NO/tfnsLlS7JXm3idC9WKszV1/img.png?width=995&amp;height=468&amp;face=0_0_995_468,https://scrap.kakaocdn.net/dn/kS1UP/hyNXjJ8KyZ/D9IXnFSGb8yj0iEIZYlKC0/img.png?width=1050&amp;height=481&amp;face=0_0_1050_481,https://scrap.kakaocdn.net/dn/bAGTJj/hyNXjcjesn/PtVWe72JxKTcH9JBdayxC1/img.png?width=1025&amp;height=455&amp;face=0_0_1025_455"><a href="http://clipsoft.co.kr/wp/blog/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98msa-%EA%B0%9C%EB%85%90/" target="_blank" rel="noopener" data-source-url="http://clipsoft.co.kr/wp/blog/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98msa-%EA%B0%9C%EB%85%90/">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/burSmJ/hyNXxoc0NO/tfnsLlS7JXm3idC9WKszV1/img.png?width=995&amp;height=468&amp;face=0_0_995_468,https://scrap.kakaocdn.net/dn/kS1UP/hyNXjJ8KyZ/D9IXnFSGb8yj0iEIZYlKC0/img.png?width=1050&amp;height=481&amp;face=0_0_1050_481,https://scrap.kakaocdn.net/dn/bAGTJj/hyNXjcjesn/PtVWe72JxKTcH9JBdayxC1/img.png?width=1025&amp;height=455&amp;face=0_0_1025_455');">&nbsp;</div>
<div class="og-text">
마이크로서비스 아키텍처(MSA) 개념 소개 - CLIPSOFT
작성자 : 이응호 과장 &nbsp; 마이크로서비스 아키텍처(MSA) 개념 소개 &nbsp; 프리랜서로 일하고 있는 지인이 최근 구직을 하고 있었습니다. 그러면서 하는 말이 요즘 IT업계 구직시장에서 최고의 화두가 M
clipsoft.co.kr
</div>
</a></figure>
<a href="https://www.samsungsds.com/kr/insights/1239180_4627.html" target="_blank" rel="noopener">https://www.samsungsds.com/kr/insights/1239180_4627.html</a>
<figure id="og_1649315829810" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="서비스 경량화를 위한 MSA 설계 시 고려사항" data-og-description="서비스 경량화를 위한 MSA 설계 시 고려사항" data-og-host="www.samsungsds.com" data-og-source-url="https://www.samsungsds.com/kr/insights/1239180_4627.html" data-og-url="https://www.samsungsds.com/kr/insights/1239180_4627.html" data-og-image="https://scrap.kakaocdn.net/dn/egm9lD/hyNXm7Un9V/2dvPVQ7OX13rNt2weBNMe1/img.jpg?width=900&amp;height=600&amp;face=0_0_900_600,https://scrap.kakaocdn.net/dn/6DYZx/hyNXmGOi3b/mCPdZ1izge2Q3jHFE3mfV0/img.jpg?width=844&amp;height=422&amp;face=0_0_844_422,https://scrap.kakaocdn.net/dn/D2GTA/hyNXwW38ZJ/qWGhkSCpAUl2ywyQXYqWG0/img.jpg?width=844&amp;height=363&amp;face=0_0_844_363"><a href="https://www.samsungsds.com/kr/insights/1239180_4627.html" target="_blank" rel="noopener" data-source-url="https://www.samsungsds.com/kr/insights/1239180_4627.html">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/egm9lD/hyNXm7Un9V/2dvPVQ7OX13rNt2weBNMe1/img.jpg?width=900&amp;height=600&amp;face=0_0_900_600,https://scrap.kakaocdn.net/dn/6DYZx/hyNXmGOi3b/mCPdZ1izge2Q3jHFE3mfV0/img.jpg?width=844&amp;height=422&amp;face=0_0_844_422,https://scrap.kakaocdn.net/dn/D2GTA/hyNXwW38ZJ/qWGhkSCpAUl2ywyQXYqWG0/img.jpg?width=844&amp;height=363&amp;face=0_0_844_363');">&nbsp;</div>
<div class="og-text">
서비스 경량화를 위한 MSA 설계 시 고려사항
서비스 경량화를 위한 MSA 설계 시 고려사항
www.samsungsds.com
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/14#entry14comment

<a href="https://mangkyu.tistory.com/88" target="_blank" rel="noopener">https://mangkyu.tistory.com/88</a>
<figure id="og_1648116177613" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="[기술면접] CS 기술면접 질문 - 프로그래밍 공통 (1/8)" data-og-description="1. 프로그래밍 공통 [ OOP란 ] OOP는 현실 세계를 프로그래밍으로 옮겨와 현실 세계의 사물들을 객체로 보고, 그 객체로부터 개발하고자 하는 특징과 기능을 뽑아와 프로그래밍하는 기법입니다. OOP" data-og-host="mangkyu.tistory.com" data-og-source-url="https://mangkyu.tistory.com/88" data-og-url="https://mangkyu.tistory.com/88" data-og-image="https://scrap.kakaocdn.net/dn/ch94Ei/hyNOwbcXSA/x8rdLMUrlzZHShIfE1giFk/img.png?width=800&amp;height=607&amp;face=0_0_800_607,https://scrap.kakaocdn.net/dn/qlpXo/hyNOwWzIgU/VrQxmQOB3sdtGmeFonP3H1/img.png?width=800&amp;height=607&amp;face=0_0_800_607,https://scrap.kakaocdn.net/dn/bivITv/hyNOuxHakp/pJI2Tek0oSqKK5jTTmAagk/img.png?width=772&amp;height=478&amp;face=0_0_772_478"><a href="https://mangkyu.tistory.com/88" target="_blank" rel="noopener" data-source-url="https://mangkyu.tistory.com/88">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/ch94Ei/hyNOwbcXSA/x8rdLMUrlzZHShIfE1giFk/img.png?width=800&amp;height=607&amp;face=0_0_800_607,https://scrap.kakaocdn.net/dn/qlpXo/hyNOwWzIgU/VrQxmQOB3sdtGmeFonP3H1/img.png?width=800&amp;height=607&amp;face=0_0_800_607,https://scrap.kakaocdn.net/dn/bivITv/hyNOuxHakp/pJI2Tek0oSqKK5jTTmAagk/img.png?width=772&amp;height=478&amp;face=0_0_772_478');">&nbsp;</div>
<div class="og-text">
[기술면접] CS 기술면접 질문 - 프로그래밍 공통 (1/8)
1. 프로그래밍 공통 [ OOP란 ] OOP는 현실 세계를 프로그래밍으로 옮겨와 현실 세계의 사물들을 객체로 보고, 그 객체로부터 개발하고자 하는 특징과 기능을 뽑아와 프로그래밍하는 기법입니다. OOP
mangkyu.tistory.com
</div>
</a></figure>
<a href="https://clelab.io/course/frontend-interview/cs-%EC%A7%80%EC%8B%9D" target="_blank" rel="noopener">https://clelab.io/course/frontend-interview/cs-%EC%A7%80%EC%8B%9D</a>
<figure id="og_1648116979617" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="clelab - 나를 발전시키는 시간" data-og-description="저희는 구글에 널리 퍼져있는 블로그 글을 수집하여 프론트엔드 코스를 만들어주는 서비스를 운영하고 있는 클랩팀 이라고 합니다!" data-og-host="clelab.io" data-og-source-url="https://clelab.io/course/frontend-interview/cs-%EC%A7%80%EC%8B%9D" data-og-url="https://clelab.io/course/frontend-interview/cs-%EC%A7%80%EC%8B%9D" data-og-image="https://scrap.kakaocdn.net/dn/bnwIvz/hyNNillQCT/dhPKJkMPn3XIzLuLjKjP7k/img.png?width=800&amp;height=400&amp;face=0_0_800_400"><a href="https://clelab.io/course/frontend-interview/cs-%EC%A7%80%EC%8B%9D" target="_blank" rel="noopener" data-source-url="https://clelab.io/course/frontend-interview/cs-%EC%A7%80%EC%8B%9D">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/bnwIvz/hyNNillQCT/dhPKJkMPn3XIzLuLjKjP7k/img.png?width=800&amp;height=400&amp;face=0_0_800_400');">&nbsp;</div>
<div class="og-text">
clelab - 나를 발전시키는 시간
저희는 구글에 널리 퍼져있는 블로그 글을 수집하여 프론트엔드 코스를 만들어주는 서비스를 운영하고 있는 클랩팀 이라고 합니다!
clelab.io
</div>
</a></figure>
<a href="https://sunnykim91.tistory.com/121" target="_blank" rel="noopener">https://sunnykim91.tistory.com/121</a>

https://ananas.tistory.com/13#entry13comment

프로그래머스에서 제공하는 코딩 테스트를 풀어보자!
문제는&nbsp;<a href="https://programmers.co.kr/learn/challenges">여기</a>&nbsp;들어가서 확인하면 된다.
<pre id="code_1647508820641" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>function solution(numbers) {
 var answer = 0;
 for(let i=0; i&lt;=9; i++){
 if(!numbers.includes(i)) answer+=i;
 }
 return answer;
}</code></pre>
0부터 9까지의 수에서 numbers 배열에 포함되지 않은 숫자를 찾아서 모두 더한 값을 구하는 문제였습니다.
우선 for문으로 i값을 0부터 9로 돌려주고, 이걸 numbers.includes() 메소드로 비교해 주면 된다.
includes() 메소드는 배열 속에 값이 포함되었는지 비교하여 boolean값을 리턴해준다.
해서 모두 더해주면 끝!

[자바스크립트] 없는 숫자 더하기 - 프로그래머스

https://ananas.tistory.com/12#entry12comment

프로그래머스에서 제공하는 코딩 테스트를 풀어보자!
문제는 <a href="https://programmers.co.kr/learn/challenges" target="_blank" rel="noopener">여기</a> 들어가서 확인하면 된다.
<pre id="code_1647507997005" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>function solution(numbers) {
 let num = []
 for(let i=0; i&lt;numbers.length; i++){
 for(let j = 0; j&lt;numbers.length; j++){
 if( i != j) // 서로 다른 인덱스에 있는 두 개의 수
 num.push(numbers[i]+numbers[j]);
 }
 }
 var answer = [...new Set(num)]
 return answer.sort((a,b)=&gt; a - b)
}</code></pre>
문제를 읽어보면 배열 속에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아야 한다.
때문에 for문을 두번 돌려 각각의 숫자를 numbers 배열의 키값으로 사용하는데, 이때 i와 j가 동일하면 안 된다.
해서 if문을 추가해서 i != J 일 때 값을 받아내거나 아니면 j = i+1로 정의해 동일한 인덱스 값이 되는걸 피해준다.
<pre id="code_1647508673115" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>function solution(numbers) {
 let num = []
 for(let i=0; i&lt;numbers.length; i++){
 for(let j = i+1; j&lt;numbers.length; j++){
 // 서로 다른 인덱스에 있는 두 개의 수
 num.push(numbers[i]+numbers[j])

 }
 }
 var answer = [...new Set(num)]
 return answer.sort((a,b)=&gt; a - b)
}</code></pre>
그렇게 뽑힌 각각의 수를 더해 변수 num에 넣어준다.&nbsp;
마지막에 정렬해주면 끝!

[자바스크립트] 두 개 뽑아서 더하기 - 프로그래머스

https://ananas.tistory.com/10#entry10comment

React의 Life Cycle인 생명주기에 대해서 알아 보자. React에는 Component가 생성 되고 소멸 될 동안 단계별로 Component를 컨트롤 할 수 있도록 여러 메소드들이 있는데 우리는 그 메소드들을 오버라이드 해서 사용 할 수 있다.
<h2 id="the-component-lifecycle" data-ke-size="size26">The Component Lifecycle</h2>
<div>Component 의 Lifecycle 은 크게 이렇게 나누어 살펴 볼 수 있다.</div>
<div>&nbsp;</div>
<h3 data-ke-size="size23">Mounting</h3>
<div>Component의 인스턴스가 생성되고 DOM의 삽입 될때 과정이다. 이 순서대로 진행 된다.</div>
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>constructor()</li>
<li>static getDerivedStateFromProps()</li>
<li>render()</li>
<li>componentDidMount()</li>
</ul>
원래는&nbsp;static getDerivedStateFromProps() 대신 componentWillMount() 가 들어갔지만 지금은 레거시로 간주 되어 사용하지 않는 것을 권장하고 있습니다.&nbsp;
<h3 data-ke-size="size23">Update</h3>
Props 나 State가 변화가 일어났을때 과정이다. 이 순서대로 진행 된다.
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>static getDerivedStateFromProps()</li>
<li>shouldComponentUpdate()</li>
<li>render()</li>
<li>getSnapshotBeforeUpdate()</li>
<li>componentDidUpdate()</li>
</ul>
아래에 있는 메소드 역시 레거시로 간주 하는 메소드들이다.
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>componentWillUpdate()</li>
<li>componentWillReceiveProps()</li>
</ul>
<h3 data-ke-size="size23">Unmounting</h3>
Component가 DOM에서 제거 될 때 호출 되는 메소드이다.
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>componentWillUnmount()</li>
</ul>
<h3 data-ke-size="size23">Error Handling</h3>
Life cycle 메소드나 하위 컴포넌트의 생성자에서 오류가 발생하면 호출 되는 메소드이다.
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>componentDidCatch()</li>
</ul>
&nbsp;
&nbsp;
<a href="https://reactjs.org/docs/react-component.html" target="_blank" rel="noopener">https://reactjs.org/docs/react-component.html</a>
<figure id="og_1671776612191" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="React.Component &ndash; React" data-og-description="A JavaScript library for building user interfaces" data-og-host="reactjs.org" data-og-source-url="https://reactjs.org/docs/react-component.html" data-og-url="https://reactjs.org/docs/react-component.html" data-og-image="https://scrap.kakaocdn.net/dn/cb9RWu/hyQZF4w5Dh/Xcx30LUrMM9VnZbbAQGzl1/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630"><a href="https://reactjs.org/docs/react-component.html" target="_blank" rel="noopener" data-source-url="https://reactjs.org/docs/react-component.html">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/cb9RWu/hyQZF4w5Dh/Xcx30LUrMM9VnZbbAQGzl1/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630');">&nbsp;</div>
<div class="og-text">
React.Component &ndash; React
A JavaScript library for building user interfaces
reactjs.org
</div>
</a></figure>
&nbsp;

https://ananas.tistory.com/9#entry9comment

State 와 Props는 React Component 에서 빠질 수 없는 기본적이면서 중요한 개념이다. 이 두 가지 개념을 이용하여 부모 컴포넌트와 자식 컴포넌트 간 데이터를 전달 하고 컴포넌트의 데이터를 변화 시킨다.
<h3 data-ke-size="size23">Props</h3>
Props 는&nbsp;properties 의 줄임말로&nbsp;Props는 Component 로 데이터를 전달 합니다.&nbsp;
<div>
<div>
<pre id="code_1671775370413" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>function MoviePoster (posterUrl) {
	&lt;img src={posterUrl}/&gt;
	&lt;h6&gt;{posterUrl}&lt;/h6&gt;
}

function App() {
	&lt;div&gt;
		&lt;MoviePoster posterUrl={image_url} title="title"/&gt;
		&lt;h1&gt;Hello movies!&lt;/h1&gt;
		&lt;h6&gt;title&lt;/h6&gt;
	&lt;/div&gt;
}</code></pre>
</div>
<div>&nbsp;</div>
</div>
위 코드와 같이 Props는 데이터를 컴포넌트 간에 전달한다. 여기서 주의 할 점은 Props는 예전에 setProps와 replaceProps로 변경이 가능 했지만 지금은 지원을 하지 않습니다. Props는 단지 데이터를 전달 하기 위해 쓰일 뿐 데이터를 변경 하지는 않습니다 즉, Props가 입력 되면 항상 동일한 출력으로 렌더링 되어야 합니다.
&nbsp;
<h3 data-ke-size="size23">State</h3>
State는 데이터를 유지하고 저장한다. 데이터를 유지한다라는 측면에서 보면 Props와 같아 보이지만, State는 컴포넌트 내에서 생성하고 사용한다. 그리고 데이터를 변경 할 수 있다. 아래 코드는 클릭을 하면&nbsp; 클릭 수를 카운터하는 코드입니다.
<pre id="code_1671775672456" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>class Button extends React.Component {
 constructor() {
 super();
 this.state = {
 count: 0,
 };
 }

 updateCount() {
 this.setState((prevState, props) =&gt; {
 return { count: prevState.count + 1 }
 });
 }

 render() {
 return (&lt;button
 onClick={() =&gt; this.updateCount()}
 &gt;
 Clicked {this.state.count} times
 &lt;/button&gt;);
 }
}</code></pre>
<div>&nbsp;</div>
위 코드를 보면 알 수 있듯 state는 컴포넌트 내에 state = {}와 같이 초기화 할 수 있으며, 중간에 setState()를&nbsp; 사용 하여 업데이트 할 수 있습니다.&nbsp;참고로 this 키워드는 this가 어디에 위치하느냐에 따라 가르키는게 달라지는데 지금 코드상에서는 현재 컴포넌트를 가르키고 있다.&nbsp;
<h3 data-ke-size="size23">State 생성</h3>
<pre id="code_1671775725703" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code> constructor() {
 super();
 this.state = {
 count: 0,
 };
 }</code></pre>
&nbsp;State를 변경 할 수도 있다.
<pre id="code_1671775963250" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code> updateCount() {
 this.setState((prevState, props) =&gt; {
 return { count: prevState.count + 1 }
 });
 }</code></pre>
클릭이 되면 updateCount()가 호출 되고 setState() 를 통해 state가 업데이트 된다. 그리고 state가 업데이트 되면,
<pre id="code_1671776010747" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code> render() {
 return (&lt;button
 onClick={() =&gt; this.updateCount()}
 &gt;
 Clicked {this.state.count} times
 &lt;/button&gt;);
 }</code></pre>
render()가 실행 되면서 다시 렌더링 된다. State가 변화가 일어나면 항상 자동으로 실행되면서 다시 렌더링 된다. 그런데 여기서 두 가지 주의 할 점이 있다.
1. 코드를 보시서 this.state.count = this.state.count + 1; 이렇게 "state를 직접 변경하면 되는거 아니야?" 라고 생각 하실 수 있다. 하지만 이렇게 하게 되면 React는 state의 변화를 감지 하지 못하게 되어 다시 렌더링 하지 않는다. 그렇게 되면 state가 변경 되었다하더라도 화면상으로는 값이 변경 되지 않게 된다.
<pre id="code_1671776184421" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>// DO NOT USE
this.setState({
 count: this.state.count + 1
});</code></pre>
2. 위 코드는 문제가 없는 코드라 느끼실 수 있겠지만 이는 setState()의 비동기 성질을 고려 하지 않았으며,&nbsp;동기화 되지 않은 상태의 데이터를 사용 할 수 있기 때문에 오류를 발생 시킬 수 있다.&nbsp;
&nbsp;
추가적으로 React는&nbsp;Component를 꼭 Class로 만들어야 하는 것은 아니다. Function 을 이용해서도 Component를 만들 수 있다.
&nbsp;
<a href="https://lucybain.com/blog/2016/react-state-vs-pros/" target="_blank" rel="noopener">https://lucybain.com/blog/2016/react-state-vs-pros/</a>

https://ananas.tistory.com/8#entry8comment

리액트는 2013년&nbsp;Facebook 에서 오픈소스로 내놓은 자바스크립트의 라이브러리이다. 기존의 다른 프레임워크들과 다르게 뷰에만 집중한다. 다시 한 번 설명 하면 Angular나 Vue.js 같은 경우는 MVC, MVVM의 패턴을 사용 하지만 React 같은 경우는 다르다. 단순히 뷰만 조작한다. DOM 객체의 이벤트에 대한 반응, 업데이트에만 관심이 있다. React는 왜 라이브러리일까?
<h3 data-ke-size="size23">React 특징</h3>
React의 특징을 알아보면 어떻게 해서 뷰에만 관심이 있다는 건지 DOM 객체 성능이 왜 좋다는 건지 알 수 있다.
<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li>JSX</li>
<li>Virtual DOM</li>
<li>단방향 데이터 흐름</li>
</ul>
<h3 data-ke-size="size23">JSX</h3>
JSX 는 javascript 와 XML 이다. javascript 안에서 마크업 언어를 더 정확히 말하면 React Component 안에서 HTML과 유사한 문법을 사용 할 수 있다. 기존에 자바스크립에서는 DOM 객체를 조작하려면 Document 인터페이스를 사용하거나 Jquery 와 같은 DOM 조작 라이브러리르 사용해야 다소 복잡한 방식으로 DOM을 조작해야만 했다. 그와 반대로 JSX는 HTML 문법과 유사하게 작성해 아주 편하게 DOM 객체를 컨트롤 할 수 있다.
<div>
<div>
<pre id="code_1671774446349" class="javascript" data-ke-language="javascript" data-ke-type="codeblock"><code>function Movie({title, posterUrl}) {
	return (
		&lt;div className="wrap-movie"&gt;
			&lt;div className="box-movie"&gt;
				&lt;MoviePoster poster={posterUrl}/&gt;
			&lt;/div&gt;
			&lt;div className="box-movie"&gt;
				&lt;h1&gt;Hello movies!&lt;/h1&gt;
				&lt;h6&gt;{title}&lt;/h6&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	)
}</code></pre>
</div>
<div>&nbsp;</div>
</div>
위 코드는 React Functional Component로 작성 된 코드다. 저걸 기존 제이쿼리나 Document 인터페이스로 작성 한다면 꽤나 복잡한 코드로 작성 될테다. 저렇게 HTML 문법과 유사하게 작성함으로써 코드 작성도 쉽고 가독성 측면에서도 훨씬 더 좋다는 걸 알 수 있다. 게다가 기존 HTML file처럼 emmet 플러그인도 사용 가능하다.
<h3 data-ke-size="size23">Virtual DOM</h3>
기존 MVC Framework는 DOM 객체에서 데이터의 변화가 감지가 되면 DOM 을 업데이트 한다. 이러한 방식은 브라우저의 리소스를 사용하는 것이기 때문에 성능에 문제가 있을 수 있다. React 는 자체 실행 엔진에서 가상돔을 생성하고 단방향 데이터 흐름으로 인한 데이터 변경에 관련 된 DOM객체만 변경 해주는 식의 알고리즘을 가지고 있다.&nbsp;따라서 브라우저의 리소스를 사용 하지 않고 효율적으로 DOM 객체를 갱신 할 수 있다.
<h3 data-ke-size="size23">단방향 데이터 흐름</h3>
React는 다른 프레임워크와는 다르게 단방향으로 데이터 흐름이 이루어 진다. Angular같은 경는 Controller와 View 사이에서 양방향으로 데이터 통신이 이루어 진다. 따라서 프레임워크가 항상 데이터의 변화를 감지 해야 된다는 부담감이 있다. 변화가 감지 되면 감지가 된 후 DOM을 업데이트 하기 때문에 성능적으로 문제가 있을 수 있다.
하지만 리액트는 데이터가 단방향으로 흐르기 때문에&nbsp; 데이터 변화에 대한 감지를 하지 않는다. 데이터의 변화가 오게 되면 특정 함수을 실행 시킴으로써 DOM을 갱신 한다. 따라서 데이터 변화에 따른 성능 저하가 없어지게 된다.
&nbsp;
<a href="https://trustyoo86.github.io/react/2017/11/18/what-is-react.html" target="_blank" rel="noopener">https://trustyoo86.github.io/react/2017/11/18/what-is-react.html</a>
<figure id="og_1671774726602" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="게으른 개발자 | 게으른 개발자" data-og-description="React 기억법(1) - 리액트가 뭐지? November 18, 2017 이전 블로그에서 다루었던 React에 관련된 내용을 다시 옮깁니다. Facebook에서 만든 오픈소스 라이브러리 &quot;React&quot;에 관하여 포스팅 하고자 합니다. 1. Reac" data-og-host="trustyoo86.github.io" data-og-source-url="https://trustyoo86.github.io/react/2017/11/18/what-is-react.html" data-og-url="https://trustyoo86.github.io/react/2017/11/18/what-is-react.html" data-og-image=""><a href="https://trustyoo86.github.io/react/2017/11/18/what-is-react.html" target="_blank" rel="noopener" data-source-url="https://trustyoo86.github.io/react/2017/11/18/what-is-react.html">
<div class="og-image" style="background-image: url();">&nbsp;</div>
<div class="og-text">
게으른 개발자 | 게으른 개발자
React 기억법(1) - 리액트가 뭐지? November 18, 2017 이전 블로그에서 다루었던 React에 관련된 내용을 다시 옮깁니다. Facebook에서 만든 오픈소스 라이브러리 "React"에 관하여 포스팅 하고자 합니다. 1. Reac
trustyoo86.github.io
</div>
</a></figure>

https://ananas.tistory.com/7#entry7comment

오늘은 다 만든 react 프로젝트를 firebase를 통해 호스팅 해보도록 하자!
우선, Firebase는 구글 소유의 모바일 어플리케이션 개발 플랫폼이다.
쉽게 말해 앱 개발 플렛폼인데, PWA(Progressive web app)도 개발 가능하다.
이를 이용해 react로 만든 내 앱을 호스팅해 배포할 것이다.
준비물 : 작업이 끝난 react project.
(빌드까지 마무리해 배포 버전으로 만들어 둔다.)
그럼 Firebase에 접속한다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.20.58.png" data-origin-width="2090" data-origin-height="2334"><a href="https://firebase.google.com/?hl=ko&amp;amp;amp;amp;gclid=CjwKCAiA9tyQBhAIEiwA6tdCrFiUhRTr01PQwSOGe8wGd2XxXdR8iGaGzWOAK0WwxqU2vLknFP7yyxoCK9EQAvD_BwE&amp;amp;amp;amp;gclsrc=aw.ds" target="_blank"><img src="https://blog.kakaocdn.net/dn/b61DD0/btruaiL7Shp/Hha6BNJwRQpL8SBBnbV3JK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb61DD0%2FbtruaiL7Shp%2FHha6BNJwRQpL8SBBnbV3JK%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';" data-filename="스크린샷 2022-02-24 오후 5.20.58.png" data-origin-width="2090" data-origin-height="2334"/></a><figcaption>이미지를 클릭하면 링크로 이동한다.</figcaption>
</figure>

시작하기 또는 상단 탭에 콘솔로 이동을 클릭한다.
그러면 프로젝트 화면으로 이동되는데 새로운 프로젝트 만들기를 한다.
프로젝트명은 영문으로 정한다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.23.11.png" data-origin-width="2090" data-origin-height="2334"><img src="https://blog.kakaocdn.net/dn/b9OZHw/btruhv4AHEa/PHqE0XVp1KMRySVF5j8Zkk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb9OZHw%2Fbtruhv4AHEa%2FPHqE0XVp1KMRySVF5j8Zkk%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';" data-filename="스크린샷 2022-02-24 오후 5.23.11.png" data-origin-width="2090" data-origin-height="2334"/></figure>

간단한 키워드만 쓰더라도 뒤에 랜덤코드를 붙여주기 때문에 사용 가능하다.
계속 누르면, 애널리틱스 사용 설정이 나오는데 추후에도 추가가능하니 마음대로 한다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.25.18.png" data-origin-width="461" data-origin-height="469"><img src="https://blog.kakaocdn.net/dn/baazAB/btrubttFcBz/Swuir5EJuzRBYr1Y8UgHJ1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbaazAB%2FbtrubttFcBz%2FSwuir5EJuzRBYr1Y8UgHJ1%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';" data-filename="스크린샷 2022-02-24 오후 5.25.18.png" data-origin-width="461" data-origin-height="469"/></figure>

이렇게 프로젝트가 만들어졌으면 계속을 누른다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.26.01.png" data-origin-width="2090" data-origin-height="2334"><img src="https://blog.kakaocdn.net/dn/uiXfu/btruc5FjeKN/8djCNndJBbhHoXkLIvp9v1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuiXfu%2Fbtruc5FjeKN%2F8djCNndJBbhHoXkLIvp9v1%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';" data-filename="스크린샷 2022-02-24 오후 5.26.01.png" data-origin-width="2090" data-origin-height="2334"/></figure>

좌측 메뉴에 Hosting에 들어가 시작하기를 누른다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.28.56.png" data-origin-width="711" data-origin-height="385"><img src="https://blog.kakaocdn.net/dn/bQcAF9/btruefO3A2a/dNHI1K7XPgSkdhfpt8x5t0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQcAF9%2FbtruefO3A2a%2FdNHI1K7XPgSkdhfpt8x5t0%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';" data-filename="스크린샷 2022-02-24 오후 5.28.56.png" data-origin-width="711" data-origin-height="385"/></figure>

firebase-tools를 설치하라고 나오는데... 맥 답게 오류가 난다.
늘 그렇듯 권한 문제다.
당황하지 말고, Firebase CLI 참조에 들어간다.
그러면 OS별 다양한 해결책을 안내해 준다. 감사하다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.31.18.png" data-origin-width="589" data-origin-height="761"><img src="https://blog.kakaocdn.net/dn/pSxS4/btrugRmCbWX/fit512RaLtUyM7yp7l7KOK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpSxS4%2FbtrugRmCbWX%2Ffit512RaLtUyM7yp7l7KOK%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';" data-filename="스크린샷 2022-02-24 오후 5.31.18.png" data-origin-width="589" data-origin-height="761"/></figure>

<pre id="code_1645691541640" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>$ curl -sL https://firebase.tools | bash</code></pre>
그러면 비밀번호를 입력하라고 하는데, 컴퓨터 비밀번호를 입력하면 된다.
설치가 완료 되었다면, 아래 내용을 차례대로 입력한다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.34.47.png" data-origin-width="603" data-origin-height="468"><img src="https://blog.kakaocdn.net/dn/dfdq9f/btruiR7xddZ/CVXzAAKWVOAlTIC2g8T201/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdfdq9f%2FbtruiR7xddZ%2FCVXzAAKWVOAlTIC2g8T201%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';" data-filename="스크린샷 2022-02-24 오후 5.34.47.png" data-origin-width="603" data-origin-height="468"/></figure>

&nbsp;
<pre id="code_1645691763238" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>$ firebase login</code></pre>
Firebase에 로그인하는 건데, google 아이디와 연동하면 쉽게 쓸 수 있다.
<pre id="code_1645691836838" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>$ firebase init</code></pre>
위 명령어를 넣으면 호스팅을 위한 설정이 나온다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.38.39.png" data-origin-width="658" data-origin-height="465"><img src="https://blog.kakaocdn.net/dn/baNv2C/btruedKwTq0/lLDtCOAlnDk9sMqtzv2KM1/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbaNv2C%2FbtruedKwTq0%2FlLDtCOAlnDk9sMqtzv2KM1%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';" data-filename="스크린샷 2022-02-24 오후 5.38.39.png" data-origin-width="658" data-origin-height="465"/></figure>

이렇게 실행되면서 선택지가 나온다.
우리는 호스팅을 할 것이기 때문에 방향키로 Configure&nbsp;files&nbsp;for&nbsp;Firebase&nbsp;Hosting&nbsp;and&nbsp;(optionally)&nbsp;set&nbsp;up&nbsp;GitHu b Action deploys로 이동해 스페이스바로 선택한다.
그리고 엔터!
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.40.52.png" data-origin-width="619" data-origin-height="130"><img src="https://blog.kakaocdn.net/dn/GJB7g/btrt7qRfGFY/C6aivJqkUSHmdZn0NRL0lk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGJB7g%2Fbtrt7qRfGFY%2FC6aivJqkUSHmdZn0NRL0lk%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';" data-filename="스크린샷 2022-02-24 오후 5.40.52.png" data-origin-width="619" data-origin-height="130"/></figure>

프로젝트 셋업이 나오면 기존의 프로젝트를 쓸 지, 새로 만들지 물어보는데 앞서서 이미 프로젝트를 만들었기 때문에 그 프로젝트를 선택해준다.(이미 호스팅 됐던 프로젝트라 자동으로 선택된 모습이다ㅎ..ㅎ)
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.43.19.png" data-origin-width="639" data-origin-height="275"><img src="https://blog.kakaocdn.net/dn/cXALkO/btruh6X7hUO/mAmGKxWzNMK581q9yc4L91/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcXALkO%2Fbtruh6X7hUO%2FmAmGKxWzNMK581q9yc4L91%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';" data-filename="스크린샷 2022-02-24 오후 5.43.19.png" data-origin-width="639" data-origin-height="275"/></figure>

그리고 호스팅 셋업을 물어보는데,
퍼블릭 디렉토리는 react 프로젝트를 배포 버전으로 빌드한 상태이기 때문에, 리액트 프로젝트 폴더 중 build 폴더에 준비가 되어 있을 것이다.
해서 build 라고 입력해 준다.
다음 index.html이 메인 페이지고 이에 서브페이지가 모두 연동된 단일 앱이라면 y를 입력한다.
깃허브 연동은 선택사항이다.
마지막 질문이 중요한다.
File&nbsp;build/index.html&nbsp;already&nbsp;exists.&nbsp;Overwrite?&nbsp;
여기서 y를 선택한다면... firebase에서 주는 디폴트 index.html이 생성된다.
해서 호스팅이 완료되더라도 처음보는 화면을 보게된다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="img1.daumcdn.png" data-origin-width="1280" data-origin-height="1081"><img src="https://blog.kakaocdn.net/dn/cT49AQ/btrugQ2iKas/dDB5fDQmEZvzl7Uew4iTUk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcT49AQ%2FbtrugQ2iKas%2FdDB5fDQmEZvzl7Uew4iTUk%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';" data-filename="img1.daumcdn.png" data-origin-width="1280" data-origin-height="1081"/></figure>

이 화면... 얄미움.
그러니 앱 개발 작업이 완료된 상태라면 File build/index.html already exists. Overwrite? 에 당당하게 No!를 하면 된다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.49.29.png" data-origin-width="680" data-origin-height="186"><img src="https://blog.kakaocdn.net/dn/b7pSnV/btruexO6E6l/z3FKBFDTKGc3oiBAn6LzA0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7pSnV%2FbtruexO6E6l%2Fz3FKBFDTKGc3oiBAn6LzA0%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';" data-filename="스크린샷 2022-02-24 오후 5.49.29.png" data-origin-width="680" data-origin-height="186"/></figure>

<pre id="code_1645692587400" class="html xml" data-ke-language="html" data-ke-type="codeblock"><code>$ firebase deploy</code></pre>
마지막으로 호스팅 명령어를 넣어주면 끝!
&nbsp;
성공!

https://ananas.tistory.com/6#entry6comment

안녕하세요.
오늘은 node.js를 설치해 보겠습니다.
node.js 홈페이지에 접속합니다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 4.58.00.png" data-origin-width="3046" data-origin-height="2334"><img src="https://blog.kakaocdn.net/dn/c04Stq/btruc7p7fak/qyXF6zcARtonQdqh8Chltk/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc04Stq%2Fbtruc7p7fak%2FqyXF6zcARtonQdqh8Chltk%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';" data-filename="스크린샷 2022-02-24 오후 4.58.00.png" data-origin-width="3046" data-origin-height="2334"/></figure>

그럼 기특하게도 알아서 OS를 감지해서 다운로드 페이지를 보여줍니다.
다른 OS 버전을 받고 싶다면 상단의 다운로드 탭에 들어가시면 됩니다.
그러면 여기서 설치하고 싶은 버전을 선택합니다.
차이는 크지 않습니다만 저는 최신형을 선호합니다.
<figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.01.10.png" data-origin-width="732" data-origin-height="556"><img src="https://blog.kakaocdn.net/dn/dFFdwr/btrugQgRH1T/dbXR7hLcY8EzP7bTglmQ5k/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdFFdwr%2FbtrugQgRH1T%2FdbXR7hLcY8EzP7bTglmQ5k%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';" data-filename="스크린샷 2022-02-24 오후 5.01.10.png" data-origin-width="732" data-origin-height="556"/></figure>
<figure class="imageblock alignRight" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.01.53.png" data-origin-width="732" data-origin-height="556"><img src="https://blog.kakaocdn.net/dn/ApXvt/btrub9BJzCz/QxkKLIYWBMJDOGRYUwRLj0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FApXvt%2Fbtrub9BJzCz%2FQxkKLIYWBMJDOGRYUwRLj0%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';" data-filename="스크린샷 2022-02-24 오후 5.01.53.png" data-origin-width="732" data-origin-height="556"/></figure>

이렇게 설치를 다했다면 잘 됐는지 확인해 봐야겠죠.
터미널을 열어 봅니다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.05.53.png" data-origin-width="697" data-origin-height="483"><img src="https://blog.kakaocdn.net/dn/bqQzh5/btruhu5BN9v/pmIRKU8vsHwNJ2RkKKKIkK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbqQzh5%2Fbtruhu5BN9v%2FpmIRKU8vsHwNJ2RkKKKIkK%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';" data-filename="스크린샷 2022-02-24 오후 5.05.53.png" data-origin-width="697" data-origin-height="483"/></figure>

마지막 설치완료 화면에 써있던 node.js 설치 위치(/usr/local/bin/node)를 터미널에 입력하면 Node.js의 버전을 확인할 수 있다.
<figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-filename="스크린샷 2022-02-24 오후 5.06.41.png" data-origin-width="697" data-origin-height="637"><img src="https://blog.kakaocdn.net/dn/cFhN0d/btrucaHr7gV/N28aJTLmvKKkrGdsv0D9yK/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcFhN0d%2FbtrucaHr7gV%2FN28aJTLmvKKkrGdsv0D9yK%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';" data-filename="스크린샷 2022-02-24 오후 5.06.41.png" data-origin-width="697" data-origin-height="637"/></figure>

마찬가지로 npm 저장 위치(/usr/local/bin/npm)도 터미널에 써서 확인하면 npm 버전과 사용안내가 나온다.
&nbsp;
성공!

https://ananas.tistory.com/5#entry5comment

이전 글에서 css의 가상선택자 selection을 이용해 예제를 만들어 보았습니다.
하지만 css만으로는 다음 드레그 시에 다른 색깔로 변경되지는 않는군요.
그럼 이제 javascript를 이용해야 하는데, css 가상선택자는 js에서 선택자로 잡을 수 없지요...!
해서 js를 찾아봤더니 onselect라는 메소드를 발견했습니다.
그리고 selectStart와 selectEnd라는 기능도 있더군요!
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event">https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event</a>
<figure id="og_1644486585621" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Element: select event - Web APIs | MDN" data-og-description="The select event fires when some text has been selected." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event" data-og-url="https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event" data-og-image="https://scrap.kakaocdn.net/dn/XlCXx/hyNnQU7epI/hpo9IpBEAu0Tg1MG28OpX1/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event" data-source-url="https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/XlCXx/hyNnQU7epI/hpo9IpBEAu0Tg1MG28OpX1/img.png?width=1920&amp;height=1080&amp;face=0_0_1920_1080');">&nbsp;</div>
<div class="og-text">
Element: select event - Web APIs | MDN
The select event fires when some text has been selected.
developer.mozilla.org
</div>
</a></figure>
이걸 이용해 바로 예제 만들어 보았습니다!
<iframe src="https://codepen.io/yuuuk94/embed/WNXjpLd?default-tab=html%2Cresult" width="600" height="300" frameborder="no" scrolling="no" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/yuuuk94/pen/WNXjpLd">
 Untitled</a> by Yuuuk94 (<a href="https://codepen.io/yuuuk94">@yuuuk94</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>

https://ananas.tistory.com/4#entry4comment

<a href="https://us.byhabit.com/" target="_blank" rel="noopener">https://us.byhabit.com/</a>
<figure id="og_1643850389890" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Health By Habit - Home" data-og-description="With the power of habit" data-og-host="us.byhabit.com" data-og-source-url="https://us.byhabit.com/" data-og-url="https://us.byhabit.com/" data-og-image="https://scrap.kakaocdn.net/dn/MvRIP/hyNhNESQL9/d1rUNsflkB2ybKBr3xEy90/img.png?width=800&amp;height=419&amp;face=0_0_800_419"><a href="https://us.byhabit.com/" target="_blank" rel="noopener" data-source-url="https://us.byhabit.com/">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/MvRIP/hyNhNESQL9/d1rUNsflkB2ybKBr3xEy90/img.png?width=800&amp;height=419&amp;face=0_0_800_419');">&nbsp;</div>
<div class="og-text">
Health By Habit - Home
With the power of habit
us.byhabit.com
</div>
</a></figure>
<a href="https://www.codingfactory.net/10859" target="_blank" rel="noopener">https://www.codingfactory.net/10859</a>
<figure id="og_1644483676550" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="article" data-og-title="CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기" data-og-description="웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소&nbsp;::selection입니다. 다음은 텍스트를" data-og-host="www.codingfactory.net" data-og-source-url="https://www.codingfactory.net/10859" data-og-url="https://www.codingfactory.net/10859" data-og-image="https://scrap.kakaocdn.net/dn/mFsD4/hyNnPWbnyq/HlB2qbtKdK5uvosSHRtBEk/img.jpg?width=760&amp;height=400&amp;face=0_0_760_400,https://scrap.kakaocdn.net/dn/bhv8Lb/hyNmKPJiRN/XgIO8NVIU4cxKnBTLHWT8k/img.jpg?width=760&amp;height=400&amp;face=0_0_760_400,https://scrap.kakaocdn.net/dn/btScvA/hyNmxbMMy4/OR2Q9Dkrqxw9EbNI1RVhMK/img.png?width=728&amp;height=383&amp;face=0_0_728_383"><a href="https://www.codingfactory.net/10859" target="_blank" rel="noopener" data-source-url="https://www.codingfactory.net/10859">
<div class="og-image" style="background-image: url('https://scrap.kakaocdn.net/dn/mFsD4/hyNnPWbnyq/HlB2qbtKdK5uvosSHRtBEk/img.jpg?width=760&amp;height=400&amp;face=0_0_760_400,https://scrap.kakaocdn.net/dn/bhv8Lb/hyNmKPJiRN/XgIO8NVIU4cxKnBTLHWT8k/img.jpg?width=760&amp;height=400&amp;face=0_0_760_400,https://scrap.kakaocdn.net/dn/btScvA/hyNmxbMMy4/OR2Q9Dkrqxw9EbNI1RVhMK/img.png?width=728&amp;height=383&amp;face=0_0_728_383');">&nbsp;</div>
<div class="og-text">
CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기
웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소&nbsp;::selection입니다. 다음은 텍스트를
www.codingfactory.net
</div>
</a></figure>
다른 사이트를 둘러보다고 신기한 css 속성을 발견했다.
글자를 드래그시 지정된 색상으로 글자를 선택하고 마우스 클릭을 뗄 때, 한번 더 선택 색상이 변경되는 것이었다.
지정된 색상은 총 세가지로 순차적으로 이벤트에 따라 색상이 보여졌다.
궁금해서 기능을 검색해보니, css에 ::selection이라는 가상선택자를 통해 속성을 제어하더군요!
바로 예제를 만들어 보았습니다.
<iframe src="https://codepen.io/yuuuk94/embed/PoOmpQG?default-tab=html%2Cresult" height="300" frameborder="no" scrolling="no" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/yuuuk94/pen/PoOmpQG">
 Untitled</a> by Yuuuk94 (<a href="https://codepen.io/yuuuk94">@yuuuk94</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe>

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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" 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';" data-filename="스크린샷 2022-01-27 오후 5.44.55.png" data-origin-width="1334" data-origin-height="1167"/></figure>

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

:LOGO

시맨틱 태그(Semantic Tag)

모던 자바스크립트 Deep Dive 스터디

디자인 패턴 - 1