<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>samuel.log</title>
        <link>https://velog.io/</link>
        <description>step by step</description>
        <lastBuildDate>Sun, 28 Jul 2024 01:41:21 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>samuel.log</title>
            <url>https://velog.velcdn.com/images/samuel_/profile/15fa76c0-7277-4b00-9b0e-5e0076102f38/image.jpg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. samuel.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/samuel_" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[perform operation to make empty]]></title>
            <link>https://velog.io/@samuel_/perform-operation-to-make-empty</link>
            <guid>https://velog.io/@samuel_/perform-operation-to-make-empty</guid>
            <pubDate>Sun, 28 Jul 2024 01:41:21 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/samuel_/post/32f11c16-646b-4e90-a8c9-fb844488376c/image.png" alt=""></p>
<p>timed out 해결x 고민해보기</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[Counting Duplicates]]></title>
            <link>https://velog.io/@samuel_/Counting-Duplicates</link>
            <guid>https://velog.io/@samuel_/Counting-Duplicates</guid>
            <pubDate>Wed, 17 Jul 2024 07:56:36 GMT</pubDate>
            <description><![CDATA[<blockquote>
<p>DESCRIPTION:
Count the number of Duplicates
Write a function that will return the count of distinct case-insensitive alphabetic characters and numeric digits that occur more than once in the input string. The input string can be assumed to contain only alphabets (both uppercase and lowercase) and numeric digits.</p>
</blockquote>
<blockquote>
<p>Example
&quot;abcde&quot; -&gt; 0 # no characters repeats more than once
&quot;aabbcde&quot; -&gt; 2 # &#39;a&#39; and &#39;b&#39;
&quot;aabBcde&quot; -&gt; 2 # &#39;a&#39; occurs twice and &#39;b&#39; twice (<code>b</code> and <code>B</code>)
&quot;indivisibility&quot; -&gt; 1 # &#39;i&#39; occurs six times
&quot;Indivisibilities&quot; -&gt; 2 # &#39;i&#39; occurs seven times and &#39;s&#39; occurs twice
&quot;aA11&quot; -&gt; 2 # &#39;a&#39; and &#39;1&#39;
&quot;ABBA&quot; -&gt; 2 # &#39;A&#39; and &#39;B&#39; each occur twice</p>
</blockquote>
<pre><code>function duplicateCount(text){

  text = text.toLowerCase();

  // 각 문자의 출현 횟수를 저장할 객체
  let charCount = {};

  // 중복된 문자의 개수를 세기 위한 변수
  let duplicates = 0;

  // 문자열을 순회하면서 각 문자의 출현 횟수를 센다
  for (let char of text) {
    if (charCount[char]) {
      charCount[char]++;
    } else {
      charCount[char] = 1;
    }
  }

  // 출현 횟수가 2 이상인 문자들을 찾아 개수를 센다
  for (let key in charCount) {
    if (charCount[key] &gt; 1) {
      duplicates++;
    }
  }

  return duplicates;
}</code></pre><p><a href="https://www.codewars.com/kata/54bf1c2cd5b56cc47f0007a1">문제</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[yarn run build 오류 ]]></title>
            <link>https://velog.io/@samuel_/yarn-run-build-%EC%98%A4%EB%A5%98</link>
            <guid>https://velog.io/@samuel_/yarn-run-build-%EC%98%A4%EB%A5%98</guid>
            <pubDate>Sat, 29 Jun 2024 07:33:00 GMT</pubDate>
            <description><![CDATA[<p>vecel 에 배포(github repository deploy )를 했는데 에러가 자꾸 떴다. 
vercel error:Command &quot;yarn run build&quot; exited with 1
이런 에러가 떴는데 검색을 해보니 많은 이유가 있다고 했다.</p>
<blockquote>
<p>종속성문제</p>
</blockquote>
<ul>
<li>패키지설치</li>
<li>종속성 호환성 &gt; package.json확인</li>
</ul>
<blockquote>
<p>캐시 및 설치 문제</p>
</blockquote>
<ul>
<li>yarn cache clean - 캐시정리</li>
<li>노드모듈재설치 yarn.lock , node_modules 삭제 후 yarn install 로 재설치</li>
</ul>
<blockquote>
<p>빌드 스크립트 오류</p>
</blockquote>
<ul>
<li>빌드 스크립트 확인  webpack, Babel 설치되어있는지확인</li>
<li>--환경변수-- </li>
</ul>
<p>등 여러가지 문제가 있었으나 결국엔 컴포넌트 내에 props / children의 타입지정을 안해준경우였다.
타입지정을 하지않았을때 ts는 any타입이라고 암묵적으로 타입을 정하는데 , 이게 build할땐 적용이 안되는건지 뭔지 모르겠다.</p>
<p>tsconfig.json 에서 &quot;noImplicitAny&quot;: false, &lt; 이거를 추가해주면 명시적으로 지정하지않은 타입들에 대해 any타입으로 처리하고 빌드에 문제없게 된다고 한다.
나의 경우 저 부분이 아예 없었고 (true로 처리된다고 한다 chatgpt왈) 그래서 오류가 났던듯 싶다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[group folder]]></title>
            <link>https://velog.io/@samuel_/group-folder</link>
            <guid>https://velog.io/@samuel_/group-folder</guid>
            <pubDate>Thu, 27 Jun 2024 00:42:56 GMT</pubDate>
            <description><![CDATA[<p>폴더를 정리할때 (site)이런식으로 폴더를 만든 후 컴포넌트를 만들면 경로에 영향을 받지않도록 할 수 있음.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[컴포넌트 종류]]></title>
            <link>https://velog.io/@samuel_/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%A2%85%EB%A5%98</link>
            <guid>https://velog.io/@samuel_/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%A2%85%EB%A5%98</guid>
            <pubDate>Wed, 26 Jun 2024 03:23:45 GMT</pubDate>
            <description><![CDATA[<p><a href="https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components">https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#when-to-use-server-and-client-components</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[렌더링종류]]></title>
            <link>https://velog.io/@samuel_/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%A2%85%EB%A5%98</link>
            <guid>https://velog.io/@samuel_/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%A2%85%EB%A5%98</guid>
            <pubDate>Wed, 26 Jun 2024 03:16:53 GMT</pubDate>
            <description><![CDATA[<p><a href="https://chatgpt.com/share/94cc5282-660c-484f-91c6-43e3e7ea4fe1">https://chatgpt.com/share/94cc5282-660c-484f-91c6-43e3e7ea4fe1</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[Html +css +vanilla JS vs React vs NextJS차이점]]></title>
            <link>https://velog.io/@samuel_/Html-css-vanilla-JS-vs-React-vs-NextJS%EC%B0%A8%EC%9D%B4%EC%A0%90</link>
            <guid>https://velog.io/@samuel_/Html-css-vanilla-JS-vs-React-vs-NextJS%EC%B0%A8%EC%9D%B4%EC%A0%90</guid>
            <pubDate>Wed, 26 Jun 2024 03:07:27 GMT</pubDate>
            <description><![CDATA[<ul>
<li><p>html css js :
spa 구축 어렵. (다양한 기능들이 들어가기엔 번거롭다.)
장점: 렌더링이 가장빠름.
단점 : 큰프로젝트는 개발이 어렵다.</p>
</li>
<li><p>React:
SPA
SEO상관없는 인터렉션이 많은 모든웹(어드민 페이지, B2B페이지,지도앱)
결과물 : JS정적 파일
장점 : 웹에서 앱처럼작동하는 UI상호작용가능한 웹개발가능
단점 : SEO불리 및 초기 JS로딩이 느림(빈화면보임 &gt; 스켈레톤UI로 대체)</p>
</li>
</ul>
<p>-NextJS
MPA 
React기반의 ssr및 정적사이트 생성 가능 (프레임워크)
언제사용 : 
SEO 최적화 
초기로딩속도 향상 &gt; B2C
풀스택가능(서버 API, DB조회 등)
결과물 : 서버 APP
단점: 웹+ 서버 전반의 지식 필요.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[vecel배포]]></title>
            <link>https://velog.io/@samuel_/vecel%EB%B0%B0%ED%8F%AC</link>
            <guid>https://velog.io/@samuel_/vecel%EB%B0%B0%ED%8F%AC</guid>
            <pubDate>Wed, 26 Jun 2024 02:54:50 GMT</pubDate>
            <description><![CDATA[<p>ci/cd</p>
<p>ci : Continuous Integration, 지속적 통합 -github,test code</p>
<p>cd : Continuous Deployment, 지속적 배포 next.js 최신버전으로 업데이트 되는 것.</p>
<p>1.vecel : next.js 배포하는 가장 쉬운 방법(SASS)</p>
<p>2.AWS EC2, nextjs github pull &gt; build (EC2 node.js 설치) &gt; start 
  EC2 public IP -&gt; Port 4000 server 실행 -&gt; PortBind 나의 nextjs 접속가능.
3. nextjs &gt; docker image &gt; docker hub push &gt; EC2 &gt; docker image pull &gt; docker run(aws+docker)
4. github push &gt; docker image(CI) &gt; portainer(CD)&gt; docker container run
5. github push &gt; docker image(CI) &gt; k8&#39;s &gt; docker container</p>
<p>추가설명.
<a href="https://chatgpt.com/share/03c4b57b-7bf1-43fd-b696-4bb5166a7f8e">https://chatgpt.com/share/03c4b57b-7bf1-43fd-b696-4bb5166a7f8e</a> </p>
]]></description>
        </item>
        <item>
            <title><![CDATA[github ssh키]]></title>
            <link>https://velog.io/@samuel_/github-ssh%ED%82%A4</link>
            <guid>https://velog.io/@samuel_/github-ssh%ED%82%A4</guid>
            <pubDate>Wed, 26 Jun 2024 02:36:41 GMT</pubDate>
            <description><![CDATA[<p>프로젝트에 들어가기앞서 ssh키가 없어서 생기는 이슈에 대한 해결링크.
<a href="https://velog.io/@snghyun331/Git-Git-%EC%B4%88%EA%B8%B0%EC%84%A4%EC%A0%95-%EB%B0%8F-Github-SSH-Key-%EB%93%B1%EB%A1%9D-Window">https://velog.io/@snghyun331/Git-Git-%EC%B4%88%EA%B8%B0%EC%84%A4%EC%A0%95-%EB%B0%8F-Github-SSH-Key-%EB%93%B1%EB%A1%9D-Window</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[프로그래머스 2의 영역]]></title>
            <link>https://velog.io/@samuel_/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-2%EC%9D%98-%EC%98%81%EC%97%AD</link>
            <guid>https://velog.io/@samuel_/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-2%EC%9D%98-%EC%98%81%EC%97%AD</guid>
            <pubDate>Sat, 13 Apr 2024 13:22:45 GMT</pubDate>
            <description><![CDATA[<p>문제 설명
정수 배열 arr가 주어집니다. 배열 안의 2가 모두 포함된 가장 작은 연속된 부분 배열을 return 하는 solution 함수를 완성해 주세요.</p>
<p>단, arr에 2가 없는 경우 [-1]을 return 합니다.</p>
<p>제한사항
1 ≤ arr의 길이 ≤ 100,000
1 ≤ arr의 원소 ≤ 10
입출력 예
arr    result
[1, 2, 1, 4, 5, 2, 9]    [2, 1, 4, 5, 2]
[1, 2, 1]    [2]
[1, 1, 1]    [-1]
[1, 2, 1, 2, 1, 10, 2, 1]    [2, 1, 2, 1, 10, 2]
입출력 예 설명
입출력 예 #1</p>
<p>2가 있는 인덱스는 1번, 5번 인덱스뿐이므로 1번부터 5번 인덱스까지의 부분 배열인 [2, 1, 4, 5, 2]를 return 합니다.
입출력 예 #2</p>
<p>2가 한 개뿐이므로 [2]를 return 합니다.
입출력 예 #3</p>
<p>2가 배열에 없으므로 [-1]을 return 합니다.
입출력 예 #4</p>
<p>2가 있는 인덱스는 1번, 3번, 6번 인덱스이므로 1번부터 6번 인덱스까지의 부분 배열인 [2, 1, 2, 1, 10, 2]를 return 합니다.
※ 2023년 04월 27일 입출력 예, 입출력 예 설명 및 예시 테스트 케이스가 수정 되었습니다.</p>
<pre><code>function solution(arr) {
    let indices = [];

    // 배열에서 숫자 2가 있는 모든 인덱스를 찾음
    for (let i = 0; i &lt; arr.length; i++) {
        if (arr[i] === 2) {
            indices.push(i);
        }
    }

    // 숫자 2가 없는 경우
    if (indices.length === 0) {
        return [-1];
    }

    // 숫자 2가 있는 경우, 첫 번째와 마지막 인덱스를 사용하여 부분 배열을 추출
    let start = indices[0];
    let end = indices[indices.length - 1];
    return arr.slice(start, end + 1);
}</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[Chatper 40. 이벤트]]></title>
            <link>https://velog.io/@samuel_/Chatper-40.-%EC%9D%B4%EB%B2%A4%ED%8A%B8</link>
            <guid>https://velog.io/@samuel_/Chatper-40.-%EC%9D%B4%EB%B2%A4%ED%8A%B8</guid>
            <pubDate>Tue, 05 Sep 2023 12:46:58 GMT</pubDate>
            <description><![CDATA[<h3 id="401-이벤트-드리븐-프로그래밍">40.1 이벤트 드리븐 프로그래밍</h3>
<blockquote>
<p>클릭, 키보드입력, 마우스 이동등 이 일어나면 브라우저는 이름 감지하여 특정한 타입의 이벤트를 발생.</p>
</blockquote>
<p>이벤트핸들러 - 이벤트 발생시 호출될 함수.
이벤트 핸들러 등록 - 이벤트 발생시 브라우저에게 이벤트 핸들러의 호출을 위임하는 것.</p>
<blockquote>
<h3 id="이벤트-드리븐-프로그래밍">이벤트 드리븐 프로그래밍</h3>
<p>프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식.</p>
</blockquote>
<hr>
<h3 id="402-이벤트-타입">40.2 이벤트 타입</h3>
<p>이벤트 타입은 약 200여가지가 있고, 사용빈도가 높은 이벤트.</p>
<hr>
<h3 id="403-이벤트-핸들러-등록">40.3 이벤트 핸들러 등록</h3>
<h3 id="4031-이벤트-핸들러-어트리뷰트-방식">40.3.1 이벤트 핸들러 어트리뷰트 방식</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;button onclick=&quot;sayHi(&#39;Lee&#39;)&quot;&gt;Click me!&lt;/button&gt;
  &lt;script&gt;
    function sayHi(name) {
      console.log(`Hi! ${name}.`);
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><blockquote>
<p><a href="https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8_%EA%B8%B0%EB%B0%98_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EA%B3%B5%ED%95%99">CBD (Component Based  Development)</a> 이벤트핸들러 어트리뷰트 방식으로 이벤트처리. 관심사 분리를 하지않음</p>
</blockquote>
<pre><code>// 이벤트 핸들러 어트리뷰트 방식
&lt;button onclick=&quot;myFunction()&quot;&gt;클릭하세요&lt;/button&gt;</code></pre><p>이렇게 작성시 문제점 </p>
<blockquote>
<ol>
<li>관심사의 분리가 어려움.</li>
<li>가독성과 유지보수</li>
</ol>
</blockquote>
<p>이를 해결하려면,</p>
<pre><code>&lt;button id=&quot;myButton&quot;&gt;클릭하세요&lt;/button&gt;

//자바스크립트 파일(코드)
function myFunction() {
    alert(&quot;버튼이 클릭되었습니다.&quot;);
}

// 이벤트 핸들러를 할당
document.getElementById(&quot;myButton&quot;).addEventListener(&quot;click&quot;, myFunction);
</code></pre><hr>
<p>CBD에서의 방식.</p>
<pre><code>import React from &#39;react&#39;;
import &#39;./style.css&#39;;

export default function App() {
  const onclickHandler = () =&gt; {
    alert(&#39;클릭되었습니다.&#39;);
  };
  return (
    &lt;div&gt;
      &lt;h1&gt;CBD 방식&lt;/h1&gt;
      &lt;p&gt;
        CBD (Component Based Development) 이벤트핸들러 어트리뷰트 방식으로
        이벤트처리. 관심사 분리를 하지않음
      &lt;/p&gt;
      &lt;button onClick={onclickHandler}&gt;이벤트 핸들러 어트리뷰트 방식.&lt;/button&gt;
    &lt;/div&gt;
  );
}</code></pre><h3 id="4032-이벤트-핸들러-프로퍼티-방식">40.3.2 이벤트 핸들러 프로퍼티 방식</h3>
<p>window 객체와 Document, HtmlElement타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다. </p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;button&gt;Click me!&lt;/button&gt;
  &lt;script&gt;
    const $button = document.querySelector(&#39;button&#39;);

    // 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩
    $button.onclick = function () {
      console.log(&#39;button click&#39;);
    };
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>이벤트 핸들러 프로퍼티 방식은 Html과 js가 섞이는 문제는 해결할 수 있다. 하지만 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점은 존재.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;button&gt;Click me!&lt;/button&gt;
  &lt;script&gt;
    const $button = document.querySelector(&#39;button&#39;);

    // 이벤트 핸들러 프로퍼티 방식은 하나의 이벤트에 하나의 이벤트 핸들러만을 바인딩할 수 있다.
    // 첫 번째로 바인딩된 이벤트 핸들러는 두 번째 바인딩된 이벤트 핸들러에 의해 재할당되어
    // 실행되지 않는다.
    $button.onclick = function () {
      console.log(&#39;Button clicked 1&#39;);
    };

    // 두 번째로 바인딩된 이벤트 핸들러
    $button.onclick = function () {
      console.log(&#39;Button clicked 2&#39;);
    };
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h3 id="4033-addeventlistener-메서드-방식">40.3.3 addEventListener 메서드 방식.</h3>
<p>DOM Level 2 에서 도입된 EventTarget.prototype.addEventListener 메서드를 사용하여 등록할 수 있다.</p>
<p><img src="https://velog.velcdn.com/images/samuel_/post/e6be4db9-cf6f-4b9a-8052-a8fd953bb496/image.png" alt=""></p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;button&gt;Click me!&lt;/button&gt;
  &lt;script&gt;
    const $button = document.querySelector(&#39;button&#39;);

    // 이벤트 핸들러 프로퍼티 방식
    // $button.onclick = function () {
    //   console.log(&#39;button click&#39;);
    // };

    // addEventListener 메서드 방식
    $button.addEventListener(&#39;click&#39;, function () {
      console.log(&#39;button click&#39;);
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;button&gt;Click me!&lt;/button&gt;
  &lt;script&gt;
    const $button = document.querySelector(&#39;button&#39;);

    // 이벤트 핸들러 프로퍼티 방식
    $button.onclick = function () {
      console.log(&#39;[이벤트 핸들러 프로퍼티 방식]button click&#39;);
    };

    // addEventListener 메서드 방식
    $button.addEventListener(&#39;click&#39;, function () {
      console.log(&#39;[addEventListener 메서드 방식]button click&#39;);
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>addEventListener 메서드 방식은 이벤트핸들러 프로퍼티에 바인딩 된 이벤트 핸들러에 아무런영향 x 2개모두 호출됨.</p>
<p>하나이상등록 되고, 순서대로 호출.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;button&gt;Click me!&lt;/button&gt;
  &lt;script&gt;
    const $button = document.querySelector(&#39;button&#39;);

    // addEventListener 메서드는 동일한 요소에서 발생한 동일한 이벤트에 대해
    // 하나 이상의 이벤트 핸들러를 등록할 수 있다.
    $button.addEventListener(&#39;click&#39;, function () {
      console.log(&#39;[1]button click&#39;);
    });

    $button.addEventListener(&#39;click&#39;, function () {
      console.log(&#39;[2]button click&#39;);
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>중복되면 하나의 핸들러만 등록.</p>
<hr>
<h3 id="404-이벤트-핸들러-제거">40.4 이벤트 핸들러 제거</h3>
<p>removeEventListener 와 addEventLister의 인수가 동일해야 제거 가능.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;button&gt;Click me!&lt;/button&gt;
  &lt;script&gt;
    const $button = document.querySelector(&#39;button&#39;);

    const handleClick = () =&gt; console.log(&#39;button click&#39;);

    // 이벤트 핸들러 등록
    $button.addEventListener(&#39;click&#39;, handleClick);

    // 이벤트 핸들러 제거
    // addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에
    // 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다.
    $button.removeEventListener(&#39;click&#39;, handleClick, true); // 실패
    $button.removeEventListener(&#39;click&#39;, handleClick); // 성공
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h3 id="405-이벤트-객체">40.5 이벤트 객체</h3>
<blockquote>
<p>이벤트가 발생하면 이벤트에 관련한 다양항 정보를 담고 있는 이벤트 객체가 동적으로 생성</p>
</blockquote>
<h4 id="생성된-이벤트-객체는-이벤트-핸들러의-첫번째-인수로-전달">생성된 이벤트 객체는 이벤트 핸들러의 첫번째 인수로 전달.</h4>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;p&gt;클릭하세요. 클릭한 곳의 좌표가 표시됩니다.&lt;/p&gt;
  &lt;em class=&quot;message&quot;&gt;&lt;/em&gt;
  &lt;script&gt;
    const $msg = document.querySelector(&#39;.message&#39;);

    // 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
    function showCoords(e) {
      $msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`;
    }

    document.onclick = showCoords;
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><pre><code>function onclick(event) {
  showCoords(event);
}</code></pre><hr>
<h3 id="4051-이벤트-객체의-상속-구조">40.5.1 이벤트 객체의 상속 구조</h3>
<p><img src="https://velog.velcdn.com/images/samuel_/post/33694184-2e97-4561-be94-2e9f0efcbd6a/image.png" alt=""></p>
<h3 id="4052-이벤트-객체의-공통-프로퍼티">40.5.2 이벤트 객체의 공통 프로퍼티</h3>
<blockquote>
<p>이벤트 객체의 공통 프로퍼티
Event 인터페이스, 즉 Event.prototype에 정의되어 있는 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티다. MouseEvent나 KeyboradEvent 등 다른 이벤트들은 각각 이벤트에 맞는 다른 프로퍼티를 가지고 있다.</p>
</blockquote>
<h3 id="공통-프로퍼티----설명----타입">공통 프로퍼티    설명    타입</h3>
<p><img src="https://velog.velcdn.com/images/samuel_/post/38d33186-bc8e-4335-bb0c-0cfb753c940c/image.png" alt=""></p>
<p>체크 박스상태가 변경되면 현재 체크상태를 출력하는 코드</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;input type=&quot;checkbox&quot;&gt;
  &lt;em class=&quot;message&quot;&gt;off&lt;/em&gt;
  &lt;script&gt;
    const $checkbox = document.querySelector(&#39;input[type=checkbox]&#39;);
    const $msg = document.querySelector(&#39;.message&#39;);

    // change 이벤트가 발생하면 Event 타입의 이벤트 객체가 생성된다.
    $checkbox.onchange = e =&gt; {
      console.log(Object.getPrototypeOf(e) === Event.prototype); // true

      // e.target은 change 이벤트를 발생시킨 DOM 요소 $checkbox를 가리키고
      // e.target.checked는 체크박스 요소의 현재 체크 상태를 나타낸다.
      $msg.textContent = e.target.checked ? &#39;on&#39; : &#39;off&#39;;
    };
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h3 id="4053-마우스-정보-취득">40.5.3 마우스 정보 취득</h3>
<blockquote>
<p>마우스 포인터의 좌표정보를 나타내는 프로퍼티 : screenX/Y, clientX/Y, pageX/Y, offsetX/Y
버튼 정보를 나타내는 프로퍼티 : altKey,ctrlKey, shiftKey, button </p>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
    .box {
      width: 100px;
      height: 100px;
      background-color: #fff700;
      border: 5px solid orange;
      cursor: pointer;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
  &lt;script&gt;
    // 드래그 대상 요소
    const $box = document.querySelector(&#39;.box&#39;);

    // 드래그 시작 시점의 마우스 포인터 위치
    const initialMousePos = { x: 0, y: 0 };
    // 오프셋: 이동할 거리
    const offset = { x: 0, y: 0 };

    // mousemove 이벤트 핸들러
    const move = e =&gt; {
      // 오프셋 = 현재(드래그하고 있는 시점) 마우스 포인터 좌표 - 드래그 시작 시점의 마우스 포인터 좌표
      offset.x = e.clientX - initialMousePos.x;
      offset.y = e.clientY - initialMousePos.y;

      // translate3d는 GPU를 사용하므로 absolute의 top, left를 사용하는 것보다 빠르다.
      // top, left는 레이아웃에 영향을 준다.
      $box.style.transform = `translate3d(${offset.x}px, ${offset.y}px, 0)`;
    };

    // mousedown 이벤트가 발생하면 드래그 시작 시점의 마우스 포인터 좌표를 저장한다.
    $box.addEventListener(&#39;mousedown&#39;, e =&gt; {
      // 이동 거리를 계산하기 위해 mousedown 이벤트가 발생(드래그를 시작)하면
      // 드래그 시작 시점의 마우스 포인터 좌표(e.clientX/e.clientY: 뷰포트 상에서 현재
      // 마우스의 포인터 좌표)를 저장해 둔다. 한번 이상 드래그로 이동한 경우 move에서
      // translate3d(${offset.x}px, ${offset.y}px, 0)으로 이동한 상태이므로
      // offset.x와 offset.y를 빼주어야 한다.
      initialMousePos.x = e.clientX - offset.x;
      initialMousePos.y = e.clientY - offset.y;

      // mousedown 이벤트가 발생한 상태에서 mousemove 이벤트가 발생하면
      // box 요소를 이동시킨다.
      document.addEventListener(&#39;mousemove&#39;, move);
    });

    // mouseup 이벤트가 발생하면 mousemove 이벤트를 제거해 이동을 멈춘다.
    document.addEventListener(&#39;mouseup&#39;, () =&gt; {
      document.removeEventListener(&#39;mousemove&#39;, move);
          console.log(initialMousePos.x);
           console.log(initialMousePos.y);
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>참고 및 출처 : <a href="https://velog.io/@niyu/40%EC%9E%A5-%EC%9D%B4%EB%B2%A4%ED%8A%B8">https://velog.io/@niyu/40%EC%9E%A5-%EC%9D%B4%EB%B2%A4%ED%8A%B8</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[codewars 8/22 ]]></title>
            <link>https://velog.io/@samuel_/codewars-822</link>
            <guid>https://velog.io/@samuel_/codewars-822</guid>
            <pubDate>Tue, 22 Aug 2023 14:34:32 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/samuel_/post/2418f622-c5dd-4ca2-a4b9-45715406dd90/image.png" alt=""></p>
<pre><code>function findOutlier(integers){
    const oddNumbers = integers.filter((e)=&gt;e%2!==0);
    const evenNumbers = integers.filter((e)=&gt;e%2===0);

    return oddNumbers.length === 1 ? oddNumbers[0] : evenNumbers[0]; 
}
</code></pre><p>%2 !==0/ %2 ===1 이거로 테스트케이스를 못넘겼었다. 음수를 생각하지 않았기 때문...</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[codewars 8/20]]></title>
            <link>https://velog.io/@samuel_/codewars-820</link>
            <guid>https://velog.io/@samuel_/codewars-820</guid>
            <pubDate>Sun, 20 Aug 2023 13:13:36 GMT</pubDate>
            <description><![CDATA[<p>DESCRIPTION:
Once upon a time, on a way through the old wild mountainous west,…
… a man was given directions to go from one point to another. The directions were &quot;NORTH&quot;, &quot;SOUTH&quot;, &quot;WEST&quot;, &quot;EAST&quot;. Clearly &quot;NORTH&quot; and &quot;SOUTH&quot; are opposite, &quot;WEST&quot; and &quot;EAST&quot; too.</p>
<p>Going to one direction and coming back the opposite direction right away is a needless effort. Since this is the wild west, with dreadful weather and not much water, it&#39;s important to save yourself some energy, otherwise you might die of thirst!</p>
<p>How I crossed a mountainous desert the smart way.
The directions given to the man are, for example, the following (depending on the language):</p>
<p>[&quot;NORTH&quot;, &quot;SOUTH&quot;, &quot;SOUTH&quot;, &quot;EAST&quot;, &quot;WEST&quot;, &quot;NORTH&quot;, &quot;WEST&quot;].
or
{ &quot;NORTH&quot;, &quot;SOUTH&quot;, &quot;SOUTH&quot;, &quot;EAST&quot;, &quot;WEST&quot;, &quot;NORTH&quot;, &quot;WEST&quot; };
or
[North, South, South, East, West, North, West]
You can immediately see that going &quot;NORTH&quot; and immediately &quot;SOUTH&quot; is not reasonable, better stay to the same place! So the task is to give to the man a simplified version of the plan. A better plan in this case is simply:</p>
<p>[&quot;WEST&quot;]
or
{ &quot;WEST&quot; }
or
[West]
Other examples:
In [&quot;NORTH&quot;, &quot;SOUTH&quot;, &quot;EAST&quot;, &quot;WEST&quot;], the direction &quot;NORTH&quot; + &quot;SOUTH&quot; is going north and coming back right away.</p>
<p>The path becomes [&quot;EAST&quot;, &quot;WEST&quot;], now &quot;EAST&quot; and &quot;WEST&quot; annihilate each other, therefore, the final result is [] (nil in Clojure).</p>
<p>In [&quot;NORTH&quot;, &quot;EAST&quot;, &quot;WEST&quot;, &quot;SOUTH&quot;, &quot;WEST&quot;, &quot;WEST&quot;], &quot;NORTH&quot; and &quot;SOUTH&quot; are not directly opposite but they become directly opposite after the reduction of &quot;EAST&quot; and &quot;WEST&quot; so the whole path is reducible to [&quot;WEST&quot;, &quot;WEST&quot;].</p>
<p>Task
Write a function dirReduc which will take an array of strings and returns an array of strings with the needless directions removed (W&lt;-&gt;E or S&lt;-&gt;N side by side).</p>
<p>The Haskell version takes a list of directions with data Direction = North | East | West | South.
The Clojure version returns nil when the path is reduced to nothing.
The Rust version takes a slice of enum Direction {North, East, West, South}.
See more examples in &quot;Sample Tests:&quot;
Notes
Not all paths can be made simpler. The path [&quot;NORTH&quot;, &quot;WEST&quot;, &quot;SOUTH&quot;, &quot;EAST&quot;] is not reducible. &quot;NORTH&quot; and &quot;WEST&quot;, &quot;WEST&quot; and &quot;SOUTH&quot;, &quot;SOUTH&quot; and &quot;EAST&quot; are not directly opposite of each other and can&#39;t become such. Hence the result path is itself : [&quot;NORTH&quot;, &quot;WEST&quot;, &quot;SOUTH&quot;, &quot;EAST&quot;].
if you want to translate, please ask before translating.</p>
<pre><code>function dirReduc(arr) {
    // 빈 배열을 스택으로 활용.
    const stack = [];
    // 방향과 그에 상쇄되는 방향을 매핑한 객체.
    const opposites = { &quot;NORTH&quot;: &quot;SOUTH&quot;, &quot;SOUTH&quot;: &quot;NORTH&quot;, &quot;EAST&quot;: &quot;WEST&quot;, &quot;WEST&quot;: &quot;EAST&quot; };

    // 주어진 방향 배열을 순회.
    for (const direction of arr) {
        // 스택이 비어있지 않고, 현재 방향과 스택의 맨 위에 있는 방향이 상쇄되는 경우
        if (stack.length &gt; 0 &amp;&amp; stack[stack.length - 1] === opposites[direction]) {
            // 스택의 맨 위에 있는 방향을 제거하여 상쇄.
            stack.pop();
        } else {
            // 그렇지 않으면 현재 방향을 스택에 추가.
            stack.push(direction);
        }
    }

    // 상쇄되지 않은 방향들로 이루어진 스택을 반환.
    return stack;
}

</code></pre><p>문제가 장황하지만 결국엔 n s 가 짝이고 e w가 짝이라는 문맥.
이와 비슷한 문제를 풀었는데 codewars에서 풀어본문제 찾아봐야겠다.</p>
<p><a href="https://www.codewars.com/kata/54da539698b8a2ad76000228">비슷한 문제 </a></p>
<blockquote>
<h5 id="근래-블로그-작성이-뜸했는데--그저-푼문제를-블로그에-쓰는게-맞나-라는-생각이-계속들었고현재진행형-블로그의-방향성을-다시한번-생각해봐야-하는-시기인-것-같아-뜸했다-공부는-그래도-꾸준히-하는중1일-1codewars">근래 블로그 작성이 뜸했는데 , 그저 푼문제를 블로그에 쓰는게 맞나 라는 생각이 계속들었고,(현재진행형) 블로그의 방향성을 다시한번 생각해봐야 하는 시기인 것 같아 뜸했다. 공부는 그래도 꾸준히 하는중(+1일 1codewars)</h5>
</blockquote>
]]></description>
        </item>
        <item>
            <title><![CDATA[waveStr // codewars
]]></title>
            <link>https://velog.io/@samuel_/waveStr-codewars</link>
            <guid>https://velog.io/@samuel_/waveStr-codewars</guid>
            <pubDate>Sun, 06 Aug 2023 05:15:07 GMT</pubDate>
            <description><![CDATA[<blockquote>
<p>DESCRIPTION:
Introduction
The wave (known as the Mexican wave in the English-speaking world outside North America) is an example of metachronal rhythm achieved in a packed stadium when successive groups of spectators briefly stand, yell, and raise their arms. Immediately upon stretching to full height, the spectator returns to the usual seated position.</p>
</blockquote>
<blockquote>
<p>The result is a wave of standing spectators that travels through the crowd, even though individual spectators never move away from their seats. In many large arenas the crowd is seated in a contiguous circuit all the way around the sport field, and so the wave is able to travel continuously around the arena; in discontiguous seating arrangements, the wave can instead reflect back and forth through the crowd. When the gap in seating is narrow, the wave can sometimes pass through it. Usually only one wave crest will be present at any given time in an arena, although simultaneous, counter-rotating waves have been produced. (Source Wikipedia)
Task
In this simple Kata your task is to create a function that turns a string into a Mexican Wave. You will be passed a string and you must return that string in an array where an uppercase letter is a person standing up. 
Rules</p>
</blockquote>
<blockquote>
<ol>
<li>The input string will always be lower case but maybe empty.</li>
</ol>
</blockquote>
<blockquote>
<ol start="2">
<li>If the character in the string is whitespace then pass over it as if it was an empty seat
Example
wave(&quot;hello&quot;) =&gt; [&quot;Hello&quot;, &quot;hEllo&quot;, &quot;heLlo&quot;, &quot;helLo&quot;, &quot;hellO&quot;]
Good luck and enjoy!</li>
</ol>
</blockquote>
<pre><code>function wave(str){
    str.toLowerCase();
    let result = [];
    for(let i =0; i &lt; str.length; i++){
        if(str !==&quot;&quot;){
          const waveStr = str.substring(0,i) + str[i].toUpperCase() + str[i+1];
          result.push(waveStr);
        }
      }
      return result;
  }</code></pre><p>처음 접근을 조금 잘못해서 좀 많이 헤맸다.. </p>
<p><a href="https://www.codewars.com/kata/58f5c63f1e26ecda7e000029">추가적인문제풀기</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[getDivisorCnt // codewars]]></title>
            <link>https://velog.io/@samuel_/getDivisorCnt-codewars</link>
            <guid>https://velog.io/@samuel_/getDivisorCnt-codewars</guid>
            <pubDate>Sun, 06 Aug 2023 03:53:37 GMT</pubDate>
            <description><![CDATA[<p>DESCRIPTION:
Count the number of divisors of a positive integer n.</p>
<p>Random tests go up to n = 500000.</p>
<p>Examples (input --&gt; output)
4 --&gt; 3 // we have 3 divisors - 1, 2 and 4
5 --&gt; 2 // we have 2 divisors - 1 and 5
12 --&gt; 6 // we have 6 divisors - 1, 2, 3, 4, 6 and 12
30 --&gt; 8 // we have 8 divisors - 1, 2, 3, 5, 6, 10, 15 and 30
Note you should only return a number, the count of divisors. The numbers between parentheses are shown only for you to see which numbers are counted in each case.</p>
<pre><code>function getDivisorCnt(n){
  let result = [];
  for(let i = 1; i &lt;=n; i++){
      if(Number.isInteger( n / i)) {
          result.push(i);
        }
    }
    return rsult.length;
}</code></pre><p>라고 생각했는데, timeOut이 나버렸다.
O(n)의 복잡도를 갖고 있는데 될줄 알았다..</p>
<pre><code>function getDivisorsCnt(n) {
  let count = 0;
  for (let i = 1; i &lt;= Math.sqrt(n); i++) {
    if (n % i === 0) {
      // i가 약수인 경우
      if (n / i === i) {
        // i가 n의 제곱근인 경우 (예: n이 25일 때, 5 * 5)
        count++;
      } else {
        // i와 n / i가 둘 다 약수인 경우 (예: n이 12일 때, 2 * 6)
        count += 2;
      }
    }
  }
  return count;
}
</code></pre><p>이렇게 작성하면 O(√n) 시간 복잡도의 시간복잡도를 갖는다. </p>
]]></description>
        </item>
        <item>
            <title><![CDATA[BFS
]]></title>
            <link>https://velog.io/@samuel_/BFS</link>
            <guid>https://velog.io/@samuel_/BFS</guid>
            <pubDate>Tue, 01 Aug 2023 13:44:44 GMT</pubDate>
            <description><![CDATA[<p>BFS란 ? (너비 우선 탐색)</p>
<p>그래프 혹은 트리에서 모든 노드를 한번씩 탐색하기 위한 기본적인 방법.</p>
<p>완전 탐색을 수행하기 위해 사용할 수 있는 방법중 하나.</p>
<p>(모든 간선길이가 동일할 때)최단거리를 탐색하기 위한 목적으로 사용할 수 있음.</p>
<p>queue 자료구조를 사용.</p>
<p>기본적으로</p>
<blockquote>
<p>DFS - stack 
BFS - queue</p>
</blockquote>
<h3 id="기본동작-방식">기본동작 방식</h3>
<p>BFS</p>
<blockquote>
<ul>
<li>시작노드를 큐에 넣고 [방문처리]</li>
</ul>
</blockquote>
<ul>
<li>큐에서 원소를 하나씩 꺼내면서 방문하지 않은 인접된 노드가 있는지 확인.
있으면 방문하지 않은 인접노드를 큐에 모두 삽입하고 방문처리.
while문으로 false가 될때까지 반복.</li>
</ul>
<pre><code>// 그래프를 인접 리스트로 표현하는 객체
const graph = {
  A: [&#39;B&#39;, &#39;C&#39;],
  B: [&#39;A&#39;, &#39;D&#39;, &#39;E&#39;],
  C: [&#39;A&#39;, &#39;F&#39;, &#39;G&#39;],
  D: [&#39;B&#39;],
  E: [&#39;B&#39;],
  F: [&#39;C&#39;],
  G: [&#39;C&#39;],
};

// 방문한 노드를 저장하기 위한 Set 객체 생성
const visited = new Set();

// BFS 함수 정의
function bfs(startNode) {
  // 시작 노드를 큐에 추가하고 방문 처리
  const queue = [startNode];
  visited.add(startNode);

  // 큐가 비어있을 때까지 반복
  while (queue.length &gt; 0) {
    // 큐의 맨 앞 노드를 꺼내고 인접 노드들을 확인
    const currentNode = queue.shift();
    console.log(currentNode);

    for (const neighbor of graph[currentNode]) {
      // 방문하지 않은 인접 노드라면 큐에 추가하고 방문 처리
      if (!visited.has(neighbor)) {
        queue.push(neighbor);
        visited.add(neighbor);
      }
    }
  }
}

// 시작 노드를 &#39;A&#39;로 설정하여 BFS 호출
bfs(&#39;A&#39;);
</code></pre><p>DFS 와 BFS 를 봤는데 개념적인 부분보다 문제를 많이 접해봐야 할 것 같다.</p>
<p>github에 알고리즘 적어두고 보기</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[DFS]]></title>
            <link>https://velog.io/@samuel_/DFS</link>
            <guid>https://velog.io/@samuel_/DFS</guid>
            <pubDate>Mon, 31 Jul 2023 12:08:30 GMT</pubDate>
            <description><![CDATA[<blockquote>
<p>탐색이란 많은 양의 데이터중에서 원하는 데이터를 찾는 과정.
대표적인 그래프 탐색 알고리즘으론 DFS / BFS가 있음.</p>
</blockquote>
<h3 id="stack-자료구조">stack 자료구조</h3>
<ul>
<li>FILO 형식(선입 후출)의 자료구조.</li>
</ul>
<pre><code>let stack =[];
 stack.push(1);
 stack.push(2);
 stack.push(3);
 stack.push(4);
 stack.push(5);
 stack.push(6);
 stack.pop();
 stack.push(1);
 stack.push(2);
 stack.pop();
console.log(stack);
let reserve=stack.slice().reverse();
console.log(reserve); //최상단 원소부터 출력 이부분은 [...stack].reverse()로도 할 수 있음.(불변성을 지키기위해 slice()를 사용했기에 스프레드문법으로도 가능)
console.log(stack);</code></pre><p><img src="https://velog.velcdn.com/images/samuel_/post/7145f3b8-ba97-47d1-b13b-be3b62bd2edf/image.png" alt=""></p>
<ol>
<li>재귀적인 방법으로 구현</li>
</ol>
<pre><code>const graph = {
  A: [&#39;B&#39;, &#39;C&#39;],
  B: [&#39;A&#39;, &#39;D&#39;, &#39;E&#39;],
  C: [&#39;A&#39;, &#39;F&#39;, &#39;G&#39;],
  D: [&#39;B&#39;],
  E: [&#39;B&#39;],
  F: [&#39;C&#39;],
  G: [&#39;C&#39;],
};

const visited = new Set();

function dfsRecursive(node) {
  // 현재 노드를 방문 처리
  visited.add(node);

  // 현재 노드를 출력하거나 원하는 작업 수행
  console.log(node);

  // 현재 노드와 인접한 노드들을 순회
  for (const neighbor of graph[node]) {
    // 방문하지 않은 노드라면 재귀적으로 DFS 호출
    if (!visited.has(neighbor)) {
      dfsRecursive(neighbor);
    }
  }
}

// 시작 노드를 &#39;A&#39;로 설정하여 DFS 호출
dfsRecursive(&#39;A&#39;);
</code></pre><p>2.stack 으로 dfs구현</p>
<pre><code>const graph = {
  A: [&#39;B&#39;, &#39;C&#39;],
  B: [&#39;A&#39;, &#39;D&#39;, &#39;E&#39;],
  C: [&#39;A&#39;, &#39;F&#39;, &#39;G&#39;],
  D: [&#39;B&#39;],
  E: [&#39;B&#39;],
  F: [&#39;C&#39;],
  G: [&#39;C&#39;],
};

const visited = new Set();

function dfsIterative(startNode) {
  // 스택을 생성하고 시작 노드를 스택에 넣음
  const stack = [startNode];

  // 스택이 빌 때까지 반복
  while (stack.length &gt; 0) {
    // 스택의 가장 위에 있는 노드를 꺼냄
    const node = stack.pop();

    // 해당 노드가 방문되지 않았을 경우에만 수행
    if (!visited.has(node)) {
      // 현재 노드를 방문 처리
      visited.add(node);

      // 현재 노드를 출력하거나 원하는 작업 수행
      console.log(node);

      // 현재 노드와 인접한 노드들을 순회
      for (const neighbor of graph[node]) {
        // 방문하지 않은 노드라면 스택에 추가
        if (!visited.has(neighbor)) {
          stack.push(neighbor);
        }
      }
    }
  }
}

// 시작 노드를 &#39;A&#39;로 설정하여 DFS 호출
dfsIterative(&#39;A&#39;);

</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[codewars]]></title>
            <link>https://velog.io/@samuel_/codewars</link>
            <guid>https://velog.io/@samuel_/codewars</guid>
            <pubDate>Fri, 28 Jul 2023 13:15:32 GMT</pubDate>
            <description><![CDATA[<h3 id="1">1.</h3>
<p><img src="https://velog.velcdn.com/images/samuel_/post/2223ecc8-2e1a-4127-abde-cfbb21183d80/image.png" alt=""></p>
<pre><code>function likes(names) {

  if(names.length===0){
    return &quot;no one likes this&quot;;
  }
  if(names.length ===1){
    return names[0] + &quot; likes this&quot;
  }else if(names.length ===2){
    return names[0] +&quot; and &quot; +names[1] + &quot; like this&quot;;
  }else if(names.length ===3){
    return names[0] +&quot;, &quot;+ names[1] +&quot; and &quot; +names[2] + &quot; like this&quot;;
  }else{
     return names[0] +&quot;, &quot;+ names[1] +&quot; and &quot; +(names.length-2) +&quot; others&quot;+ &quot; like this&quot;; 
  }
}</code></pre><h3 id="2">2.</h3>
<p><img src="https://velog.velcdn.com/images/samuel_/post/7838db35-907c-4556-beae-ec4c8305f42d/image.png" alt=""></p>
<pre><code>function findnb(m) {
  // 역으로 생각해서 1³ + (n-1)³+(n-2)³+...+n³이런식으로 생각하면 편함.
  let n = 1;
  let total = 0;
  while (total &lt; m) {
    total += Math.pow(n, 3);
    if (total === m) {
      return n;
    }
    n++;
  }
  return -1;
}
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[7.24일 codewars
]]></title>
            <link>https://velog.io/@samuel_/7.24%EC%9D%BC-codewars</link>
            <guid>https://velog.io/@samuel_/7.24%EC%9D%BC-codewars</guid>
            <pubDate>Mon, 24 Jul 2023 14:30:21 GMT</pubDate>
            <description><![CDATA[<h3 id="1-주어진-배열에서-최대-부분합을-구하는-문제">1. 주어진 배열에서 최대 부분합을 구하는 문제.</h3>
<p><img src="https://velog.velcdn.com/images/samuel_/post/02e497e3-ec79-4643-8cbd-6fa3d8b24b73/image.png" alt=""></p>
<pre><code>function maxSequence(arr) {
  let currentSum = 0; // 현재 인덱스에서 끝나는 연속 부분 배열의 합
  let maxSum = 0; // 현재까지의 연속 부분 배열 중 최대 합

  for (let i = 0; i &lt; arr.length; i++) {
    // 배열의 각 요소를 순회하며 최대 부분합을 갱신하는 반복문 시작
    currentSum = Math.max(0, currentSum + arr[i]);
    // 현재 인덱스에서 끝나는 연속 부분 배열의 합은 arr[i]를 더한 값과 0 중에서 더 큰 값을 선택.
    // 만약 currentSum + arr[i]가 0보다 작다면, 새로운 부분 배열을 시작하는 것이 이득이기 때문에 0으로 초기화.
    maxSum = Math.max(maxSum, currentSum);
    // 현재까지의 연속 부분 배열 중 최대 합과 현재 인덱스에서 끝나는 연속 부분 배열의 합 중에서 더 큰 값을 선택하여 maxSum에 저장.
  }

  return maxSum;
  // 최종적으로 전체 배열을 순회하며 구한 최대 부분합을 반환.
}
</code></pre><p>문제를 풀고나서 보니까 카데인 알고리즘과 연관 되어있는걸 알았다.</p>
<p><a href="https://www.youtube.com/watch?v=86CQq3pKSUw">카데인알고리즘</a>을 꽤나 잘 설명한 영상같아 첨부함</p>
<p><a href="https://www.youtube.com/watch?v=WpH0_YzjX78">한국어설명(주니온TV 아무거나연구소)</a> </p>
<p>나에겐 좀 어려웠던 문제</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[7.20 codewars문제]]></title>
            <link>https://velog.io/@samuel_/7.20-codewars%EB%AC%B8%EC%A0%9C</link>
            <guid>https://velog.io/@samuel_/7.20-codewars%EB%AC%B8%EC%A0%9C</guid>
            <pubDate>Thu, 20 Jul 2023 14:48:43 GMT</pubDate>
            <description><![CDATA[<p>피보나치 수열을 이용한 문제라 볼 수 있다.</p>
<blockquote>
<p>// DESCRIPTION:
// The Fibonacci numbers are the numbers in the following integer sequence (Fn):
// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, ...
// such as
// F(n) = F(n-1) + F(n-2) with F(0) = 0 and F(1) = 1.
// Given a number, say prod (for product), we search two Fibonacci numbers F(n) and F(n+1) verifying
// F(n) * F(n+1) = prod.</p>
</blockquote>
<blockquote>
<p>// Your function productFib takes an integer (prod) and returns an array:
// [F(n), F(n+1), true] or {F(n), F(n+1), 1} or (F(n), F(n+1), True)
// depending on the language if F(n) * F(n+1) = prod.</p>
</blockquote>
<blockquote>
<p>// If you don&#39;t find two consecutive F(n) verifying F(n) * F(n+1) = prodyou will return</p>
</blockquote>
<blockquote>
<p>// [F(n), F(n+1), false] or {F(n), F(n+1), 0} or (F(n), F(n+1), False)
// F(n) being the smallest one such as F(n) * F(n+1) &gt; prod.
// Some Examples of Return:
// (depend on the language)
// productFib(714) # should return (21, 34, true),
//                 # since F(8) = 21, F(9) = 34 and 714 = 21 * 34
// productFib(800) # should return (34, 55, false),
//                 # since F(8) = 21, F(9) = 34, F(10) = 55 and 21 * 34 &lt; 800 &lt; 34 * 55
// -----
// productFib(714) # should return [21, 34, true],
// productFib(800) # should return [34, 55, false],
// -----
// productFib(714) # should return {21, 34, 1},
// productFib(800) # should return {34, 55, 0},
// -----
// productFib(714) # should return {21, 34, true},
// productFib(800) # should return {34, 55, false},
// Note:
// You can see examples for your language in &quot;Sample Tests&quot;.</p>
</blockquote>
<p>피보나치 수열은 codewars문제 풀면서 이번으로 세번째 접했는데 , 한번 풀어보니 쉽게 접근이 가능했다. </p>
<h3 id="1-푼방법">1. 푼방법</h3>
<p>피보나치 수열을 만드는 함수를 하나 더만들고, </p>
<pre><code>function Fibonacci(n){
  // 피보나치 수열은 0,1,1 이렇게 시작하기에 0과 1은 그대로 반환
 if (n === 0) return 0;
  if (n === 1) return 1;

  초기값 설정
  let prev = 0;
  let curr = 1;

 for (let i = 2; i &lt;= n; i++) {
    const next = prev + curr;
    prev = curr;
    curr = next;
  }
  return curr;
}

function productFib(prod){
  //피보나치 함수가 2부터 시작하기에
  let n= 2;
  while(true){
    const fn = Fibonacci(n);
    const fn_1 = Fibonacci(n+1);
    const product = fn*fn_1;

    if (prod === product) {
      return [fn, fn_1, true];
    } else if (product &gt; prod) {
      return [fn, fn_1, false];
    }
    n++;
  }
}
console.log(productFib(714)); // [21, 34, true]
console.log(productFib(800)); // [34, 55, false]
console.log(productFib(4895)); //  [55, 89, true]
console.log(productFib(5895)); // [89, 144, false]
console.log(productFib(193864606)); //[10946, 17711, true]
</code></pre>]]></description>
        </item>
    </channel>
</rss>