<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>growgrow_up.log</title>
        <link>https://velog.io/</link>
        <description>자라나라 나무나무</description>
        <lastBuildDate>Tue, 15 Jul 2025 12:49:20 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>growgrow_up.log</title>
            <url>https://velog.velcdn.com/images/growgrow_up/profile/1d9d0ffd-e66e-4705-a866-9a9a4919eee8/social_profile.jpeg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. growgrow_up.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/growgrow_up" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[싱글톤 패턴 ]]></title>
            <link>https://velog.io/@growgrow_up/%EC%8B%B1%EA%B8%80%ED%86%A4-%ED%8C%A8%ED%84%B4</link>
            <guid>https://velog.io/@growgrow_up/%EC%8B%B1%EA%B8%80%ED%86%A4-%ED%8C%A8%ED%84%B4</guid>
            <pubDate>Tue, 15 Jul 2025 12:49:20 GMT</pubDate>
            <description><![CDATA[<h3 id="싱글톤-패턴singleton-pattern">싱글톤 패턴(Singleton Pattern)</h3>
<blockquote>
<p>싱글톤 패턴은 객체 지향 프로그래밍에서 특정 클래스가 단 하나만의 인스턴스를 생성하여 사용하기 위한 패턴</p>
</blockquote>
<h4 id="싱글톤-패턴의-기본-구현"><strong>싱글톤 패턴의 기본 구현</strong></h4>
<p><img src="https://velog.velcdn.com/images/growgrow_up/post/19d5b11d-abed-4f96-8766-33db9921ca7c/image.png" alt=""></p>
<pre><code>public class Singleton {
    // 정적 참조 변수(싱글톤 객체를 담을 변수)
    private static Singleton singletonObject;

    // private 생성자
    private Singleton() {
    }

    // getInstance()
    public static Singleton getInstance() {
        if (singletonObject == null) {
            singletonObject = new Singleton();
        }

        return singletonObject;
    }
}</code></pre><ul>
<li>클라이언트는 getInstance() 메서드를 통해 싱글톤 인스턴스를 얻을 수 있다.</li>
<li>getInstance() 메서드 내부에는 instance가 null이면 생성하고, null이 아니면 instance를 반환한다.</li>
<li>단 하나만의 객체를 생성하여 사용할 수 있도록 한다.</li>
</ul>
<h4 id="싱글톤-패턴의-단점">싱글톤 패턴의 단점</h4>
<p><strong>1. 모듈간 의존성이 높아진다.</strong>
    대부분의 싱글톤을 이용하는 경우 인터페이스가 아닌 클래스의 객체를 미리 생성하고 정적 메소드를 이용해 사용하기 때문에 클래스 사이에 강한 의존성과 높은 결합이 생기게 된다.
즉, 하나의 싱글톤 클래스를 여러 모듈들이 공유를 하니까, 만일 싱글톤의 인스턴스가 변경되면 이를 참조하는 모듈들도 수정이 필요하게 된다.</p>
<p><strong>2. S.O.L.I.D 원칙에 위배되는 사례가 많다.</strong>
우선 싱글톤 인스턴스 자체가 하나만 생성하기 때문에 여러가지 책임을 지니게 되는 경우가 많아 단일 책임 원칙(SRP)를 위반하기도 하고, 싱글톤 인스턴스가 혼자 너무 많은 일을 하거나, 많은 데이터를 공유시키면 다른 클래스들 간의 결합도가 높아지게 되어 개방-폐쇄 원칙(OCP)에도 위배된다.</p>
<p><strong>3. TDD 단위 테스트에 애로사항이 있음</strong>
    단위 테스트를 할때, 단위 테스트는 테스트가 서로 독립적이어야 하며 테스트를 어떤 순서로든 실행 할 수 있어야 하는데, 싱글톤 인스턴스는 자원을 공유하고 있기 때문에, 테스트가 결함없이 수행되려면 매번 인스턴스의 상태를 초기화시켜주어야 한다. 
    그렇지 않으면 어플리케이션 전역에서 상태를 공유하기 때문에 테스트가 온전하게 수행되지 못할 수도 있다.</p>
<hr>
<h4 id="싱글톤-패턴의-종류-및-권장코드-예제">싱글톤 패턴의 종류 및 권장코드 예제</h4>
<p>싱글톤 패턴의 방법은 7가지가 존재한다.</p>
<ol>
<li>Eager Initialization</li>
<li>Static block initialization</li>
<li>Lazy initialization</li>
<li>Thread safe initialization</li>
<li>Double-Checked Locking</li>
<li><strong>Bill Pugh Solution</strong></li>
<li><strong>Enum 이용</strong></li>
</ol>
<p>대표적으로 많이 사용되고, 추천 방법인 Bill Pugh Solution 과 Enum 이용 예제를 보겠다.</p>
<h4 id="bill-pugh-solution">Bill Pugh Solution</h4>
<blockquote>
<p>private static inner class를 사용하여 Thread Safe한 싱글톤 패턴을 구현하는 방법</p>
</blockquote>
<pre><code>public class Singleton {

    private Singleton() {
    }

    private static class SingletonHolder {
        private static final Singleton SINGLETON_OBJECT = new Singleton();
    }

    public static Singleton getInstance() {
        return SingletonHolder.SINGLETON_OBJECT;
    }
}</code></pre><h4 id="enum">Enum</h4>
<blockquote>
<p>enum 내에서 상수 뿐만 아니라, 변수나 메서드를 선언해 사용이 가능하기 때문에, 이를 이용해 싱글톤 클래스 처럼 응용이 가능</p>
</blockquote>
<pre><code>enum SingletonEnum {
    INSTANCE;

    private final Client dbClient;

    SingletonEnum() {
        dbClient = Database.getClient();
    }

    public static SingletonEnum getInstance() {
        return INSTANCE;
    }

    public Client getClient() {
        return dbClient;
    }
}

public class Main {
    public static void main(String[] args) {
        SingletonEnum singleton = SingletonEnum.getInstance();
        singleton.getClient();
    }
}</code></pre><p>출처: <a href="https://ittrue.tistory.com/563">https://ittrue.tistory.com/563</a> [IT is True:티스토리]
출처: <a href="https://inpa.tistory.com/entry/GOF-%F0%9F%92%A0-%EC%8B%B1%EA%B8%80%ED%86%A4Singleton-%ED%8C%A8%ED%84%B4-%EA%BC%BC%EA%BC%BC%ED%95%98%EA%B2%8C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90">https://inpa.tistory.com/entry/GOF-💠-싱글톤Singleton-패턴-꼼꼼하게-알아보자</a> [Inpa Dev 👨‍💻:티스토리]</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[컴파일러와 인터프리터]]></title>
            <link>https://velog.io/@growgrow_up/TIL-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EC%99%80-%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0</link>
            <guid>https://velog.io/@growgrow_up/TIL-%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC%EC%99%80-%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0</guid>
            <pubDate>Wed, 14 May 2025 11:07:50 GMT</pubDate>
            <description><![CDATA[<h3 id="컴파일러와-인터프리터">컴파일러와 인터프리터</h3>
<blockquote>
<p>프로그래밍 언어로 작성된 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정에 관여하는 프로그램</p>
</blockquote>
<p>기계어
: 컴퓨터(CPU)가 별다른 해석(컴파일) 없이 읽을 수 있는 프로그래밍 언어
0과 1 (이진수)로 표현된다.</p>
<h4 id="컴파일러">컴파일러</h4>
<ul>
<li>전체 변환 : 소스 코드의 전체를 읽어서 한번에 기계어로 변환
변환 과정을 거친 후, 생성된 기계어 코드를 실행</li>
<li>속도 : 컴파일 과정은 시간이 걸리지만, 변환된 코드는 직접 실행되기 때문에 시간은 빠르다.</li>
<li>Ex) C, C++, Go, Rust 등</li>
<li>단점 : 수정이 용이하지 않다.
수정 사항이 발생하면 다시 컴파일을 해야 되는데, 작은 프로그램일 경우에는 문제가 되지 않지만 컴파일이 몇 시간씩 걸리는 덩치 큰 프로그램에서는 문제가 된다. 
특히 수정 사항이 빈번하게 발생할 경우에는 큰 문제가 된다. 
이 때문에 수정 사항이 빈번하게 발생할 것 같은 부분은 인터프리터를 쓰는 방법으로 따로 빼 두는 기법을 많이 사용한다.</li>
</ul>
<h4 id="인터프리터">인터프리터</h4>
<ul>
<li>한 줄씩 변환 : 소스 코드를 한 줄 씩 읽어가며 바로 기계어로 변환하고 실행</li>
<li>속도 : 컴파일 단계가 없어 초기 시작은 빠르지만, 전체 코드 실행 시간은 컴파일러를 사용할 때보다 느릴 수 있다.
왜냐하면 코드를 실행할 때마다 변환 과정을 거치기 때문</li>
<li>Ex) Python</li>
</ul>
<h4 id="공통점">공통점</h4>
<blockquote>
<p>고수준의 언어를 기계어로 변환한다.</p>
</blockquote>
<p>참고자료 : <a href="https://namu.wiki/w/%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0">https://namu.wiki/w/%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0</a>
<a href="https://namu.wiki/w/%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC">https://namu.wiki/w/%EC%BB%B4%ED%8C%8C%EC%9D%BC%EB%9F%AC</a>
<a href="https://jhyonhyon.tistory.com/18">https://jhyonhyon.tistory.com/18</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 코딩 기초 트레이닝 Day1]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%BD%94%EB%94%A9-%EA%B8%B0%EC%B4%88-%ED%8A%B8%EB%A0%88%EC%9D%B4%EB%8B%9D-Day1</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%BD%94%EB%94%A9-%EA%B8%B0%EC%B4%88-%ED%8A%B8%EB%A0%88%EC%9D%B4%EB%8B%9D-Day1</guid>
            <pubDate>Sat, 03 May 2025 08:24:51 GMT</pubDate>
            <description><![CDATA[<h2 id="1-문자열-출력하기">1. 문자열 출력하기</h2>
<p>문제 설명
문자열 str이 주어질 때, str을 출력하는 코드를 작성해 보세요.</p>
<p>제한사항</p>
<ul>
<li>1 ≤ str의 길이 ≤ 1,000,000</li>
<li>str에는 공백이 없으며, 첫째 줄에 한 줄로만 주어집니다.</li>
</ul>
<p>[입력 #1]
HelloWorld!</p>
<p>[출력 #1]
HelloWorld!</p>
<hr>
<h4 id="나의-풀이">[나의 풀이]</h4>
<pre><code>const readline = require(&quot;readline&quot;);
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

rl.on(&quot;line&quot;, (str) =&gt; {
      console.log(str);
    rl.close();
});
</code></pre><h2 id="2-a와-b-출력하기">2. a와 b 출력하기</h2>
<p>문제 설명
정수 a와 b가 주어집니다. 각 수를 입력받아 입출력 예와 같은 형식으로 출력하는 코드를 작성해 보세요.</p>
<p>제한사항</p>
<ul>
<li>-100,000 ≤ a, b ≤ 100,000</li>
</ul>
<p>[입력 #1]
4 5</p>
<p>[출력 #1]
a = 4
b = 5</p>
<hr>
<h4 id="나의-풀이-1">[나의 풀이]</h4>
<p>입력값이 &quot;4 5&quot; 
그렇기 때문에 4와 5를 먼저 분리하는 작업을 해야한다.
그래서 빈 배열 arr를 만들어서 &quot;4 5&quot;를 띄어쓰기로 분리해준다. 
그럼 arr = [ &#39;4&#39;, &#39;5&#39; ]가 된다.
출력값 
a = 4
b = 5
가 되기 위해선 문자인 &#39;4&#39;,&#39;5&#39;를 숫자로 변환해주어야 한다.
그렇기 때문에 Number를 사용하여 숫자로 변환하고``를 활용하여 그대로 적용해준다.</p>
<pre><code>const readline = require(&#39;readline&#39;);
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let arr = [];

rl.on(&quot;line&quot;, (line) =&gt; {
    arr = line.split(&#39; &#39;);
    rl.close();
}).on(&#39;close&#39;, () =&gt; {
    console.log(`a = ${Number(arr[0])}\nb = ${Number(arr[1])}`);
    process.exit();
});</code></pre><h2 id="3문자열-반복해서-출력하기">3.문자열 반복해서 출력하기</h2>
<p>문제 설명
문자열 str과 정수 n이 주어집니다.
str이 n번 반복된 문자열을 만들어 출력하는 코드를 작성해 보세요.</p>
<p>제한사항</p>
<ul>
<li>1 ≤ str의 길이 ≤ 10</li>
<li>1 ≤ n ≤ 5</li>
</ul>
<p>입력 #1
string 5</p>
<p>출력 #1
stringstringstringstringstring</p>
<hr>
<h4 id="나의-풀이-2">[나의 풀이]</h4>
<p>2번을 풀이했을 때와 마찬가지로 처음에 arr이라는 빈 배열에 split으로 쪼개서 string과 5를 분리한다.
처음에는 배열 초기화를 하고 싶었지만 방법을 찾지 못했다. 
최대한 내 머릿속에서 나온 콘솔 값은
[string, 5, Nan, Nan, Nan, Nan, Nan]이었다.
방법을 찾아보다가 reapeat이라는 메서드가 있는 걸 알아내서 문제를 풀었고 결론은 성공했다. 
결과값을 보여주기 위해 하나의 빈 배열을 더 만들었는데 그렇게 하고 싶지 않았지만 더이상의 방법을 모르겠어서 아래와 같이 했다.
하지만 조금 아쉬운 부분이 있어서 다른 풀이를 참고한 부분도 같이 적어보겠다. </p>
<pre><code>const readline = require(&#39;readline&#39;);
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let arr = [];
let arr1=[];

rl.on(&#39;line&#39;, (str) =&gt; {
    arr = str.split(&#39; &#39;);
    rl. close();
}).on(&#39;close&#39;, () =&gt; {
    arr1= arr[0].repeat(Number(arr[1]));
    console.log(arr1);
    process.exit();
});

// 내가 원하는 결과
let input = [];

rl.on(&#39;line&#39;, function (line) {
    input = line.split(&#39; &#39;);
}).on(&#39;close&#39;, function () {
    str = input[0];
    n = Number(input[1]);
    console.log(str.repeat(n));
});</code></pre><h2 id="4-대소문자-바꿔서-출력하기">4. 대소문자 바꿔서 출력하기</h2>
<p>문제 설명
영어 알파벳으로 이루어진 문자열 str이 주어집니다. 각 알파벳을 대문자는 소문자로 소문자는 대문자로 변환해서 출력하는 코드를 작성해 보세요.</p>
<p>제한사항</p>
<ul>
<li>1 ≤ str의 길이 ≤ 20<ul>
<li>str은 알파벳으로 이루어진 문자열입니다.</li>
</ul>
</li>
</ul>
<p>입력 #1
aBcDeFg</p>
<p>출력 #1
AbCdEfG</p>
<h4 id="나의-풀이-3">[나의 풀이]</h4>
<p>for 반복문을 이용해 문제를 풀었다. 
반복문과 메서드를 사용해서 문제를 풀어야 하는것 까진 인지했지만 메서드가 기억이 나지 않아 mdn을 참고했고, 누적하는 방식을 이용하여 빈 문자열을 하나씩 채워나갔다. 
마지막에 console.log 부분에 return을 넣었다가 결과가 안나왔다. </p>
<blockquote>
<h4 id="consolelog와-return의-차이">console.log와 return의 차이</h4>
<p>console.log()는 이전에 정의된 모든 종류의 변수를 인쇄하거나 사용자에게 표시해야 하는 메시지를 인쇄하는 데 사용되는 JavaScript의 함수 
return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환
결괏값을 저장(호출 지점으로 반환)을 하지만 출력(호출)을 하진 않는다.</p>
</blockquote>
<p>return을 해도 답이 나오지 않았던 이유는 return은 출력을 하지 않기 때문이다.....</p>
<pre><code>const readline = require(&#39;readline&#39;);
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let answer = &#39;&#39;;

rl.on(&#39;line&#39;, (str) =&gt; {
    for(let i=0; i &lt; str.length; i++) {
            if(str[i] === str[i].toUpperCase()) {
            answer += str[i].toLowerCase();
       } 
        else {
            answer += str[i].toUpperCase();
        }
    }
     console.log(answer);
})</code></pre><h2 id="5-특수문자-출력하기">5. 특수문자 출력하기</h2>
<p>문제 설명
다음과 같이 출력하도록 코드를 작성해 주세요.</p>
<p>출력 예시
!@#$%^&amp;*(&#39;&quot;&lt;&gt;?:;</p>
<h4 id="나의-풀이-4">[나의 풀이]</h4>
<p>`` 방법 외에는 생각이 나지 않아 찾아보았다. </p>
<ul>
<li>작은따옴표와 역슬래시 문자는 이스케이프(escape) 시퀀스로 처리해야 합니다. </li>
<li>즉, 작은따옴표는 &#39;로, 역슬래시는 \로 표기해야 합니다. 그렇지 않으면 문법 오류가 발생합니다.</li>
</ul>
<p>역슬래시 부분을 \\로 변경하여 출력할 수 있었다.</p>
<pre><code>const readline = require(&#39;readline&#39;);
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.on(&#39;close&#39;, function () {
    console.log(`!@#$%^&amp;*(\\&#39;&quot;&lt;&gt;?:;`);
});</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[TIL] 객체(Object)]]></title>
            <link>https://velog.io/@growgrow_up/TIL-%EA%B0%9D%EC%B2%B4</link>
            <guid>https://velog.io/@growgrow_up/TIL-%EA%B0%9D%EC%B2%B4</guid>
            <pubDate>Mon, 28 Apr 2025 15:42:17 GMT</pubDate>
            <description><![CDATA[<h3 id="객체object">객체(Object)</h3>
<blockquote>
<p> 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 
따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.</p>
</blockquote>
<h3 id="프로퍼티property">프로퍼티(Property)</h3>
<blockquote>
<p>프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다.</p>
</blockquote>
<p>프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
프로퍼티 값 : 모든 값</p>
<p>특징</p>
<ul>
<li>프로퍼티 키에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. </li>
<li>이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. </li>
<li>배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.</li>
</ul>
<h3 id="객체-생성방법">객체 생성방법</h3>
<h4 id="객체--리터럴">객체  리터럴</h4>
<ul>
<li>중괄호({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할 수 있다. </li>
<li>{} 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.</li>
</ul>
<pre><code>let emptyObject = {};
console.log(typeof emptyObject); // object (빈 객체)

let person = {
  name: &#39;Jeong&#39;,
  gender: &#39;female&#39;,
  sayHello: function () {
    console.log(&#39;Hi! My name is &#39; + this.name);
  }
};

console.log(typeof person); // object
console.log(person); // {name: &quot;Jeong&quot;, gender: &quot;female&quot;, sayHello: ƒ}

person.sayHello(); // Hi! My name is Jeong</code></pre><h4 id="object-생성자-함수">Object 생성자 함수</h4>
<p>특징</p>
<ul>
<li>new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다. </li>
<li>빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다.</li>
<li>생성자(constructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다. </li>
<li>생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다. </li>
<li>자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date, RegExp 등의 빌트인 생성자 함수를 제공한다. </li>
<li>일반 함수와 생성자 함수를 구분하기 위해 생성자 함수의 이름은 파스칼 케이스(PascalCase)를 사용하는 것이 일반적이다.</li>
</ul>
<pre><code> // 빈 객체의 생성 == Object 생성자 함수
let person = new Object();

// 프로퍼티 추가
person.name = &#39;Jeong&#39;;
person.gender = &#39;female&#39;;

// 메소드 추가
person.sayHello = function () {
  console.log(&#39;Hi! My name is &#39; + this.name);
};

console.log(typeof person); // object
console.log(person); // {name: &quot;Jeong&quot;, gender: &quot;female&quot;, sayHello: ƒ}

person.sayHello(); // Hi! My name is Jeong</code></pre><h4 id="생성자-함수">생성자 함수</h4>
<p>생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.</p>
<pre><code>// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log(&#39;Hi! My name is &#39; + this.name);
  };
}

// 인스턴스의 생성
var person1 = new Person(&#39;Lee&#39;, &#39;male&#39;);
var person2 = new Person(&#39;Kim&#39;, &#39;female&#39;);

console.log(&#39;person1: &#39;, typeof person1);
console.log(&#39;person2: &#39;, typeof person2);
console.log(&#39;person1: &#39;, person1);
console.log(&#39;person2: &#39;, person2);

person1.sayHello(); // Hi! My name is Lee
person2.sayHello(); // Hi!, My name is Kim</code></pre><p>출처 : <a href="https://poiemaweb.com/js-object">https://poiemaweb.com/js-object</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[개인프로젝트] coffee]]></title>
            <link>https://velog.io/@growgrow_up/%EA%B0%9C%EC%9D%B8%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8coffee</link>
            <guid>https://velog.io/@growgrow_up/%EA%B0%9C%EC%9D%B8%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8coffee</guid>
            <pubDate>Wed, 09 Apr 2025 13:50:31 GMT</pubDate>
            <description><![CDATA[<p>기획 : 나
아이디어 : 나</p>
<p>포트폴리오를 만들다보니 내가 이 코드를 어떻게 만들었는지,
사람들에게 설명할 내용조차 머릿속에 남아 있지 않다는 생각이 들었다.</p>
<p>자기소개서랑 포트폴리오를 만든다고 보낸 시간이 언 4개월째...
코드를 짜는 감각이 무뎌지는게 무서워서 cs공부하면서 코딩테스트도 준비하면서 만들어볼 개인 프로젝트를 소개합니다.</p>
<p>가제 : coffee</p>
<p>구글에 냅다 개인포트폴리오 아이디어를 쳐보니 
여러 글 중에 자신이 관심을 가지고 좋아하는 것을 만들어보라는 글을 보았기에 
커피를 업으로 삼았던자의 커피에 미련이 남아 만드는 개인 포트폴리오 &#39;coffee&#39;를 만들어 보겠습니다.</p>
<p>기한은 죽어도 3개월 안에 피땀눈물을 다 갈아서 만들어 보겠습니다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[API]]></title>
            <link>https://velog.io/@growgrow_up/TIL-API</link>
            <guid>https://velog.io/@growgrow_up/TIL-API</guid>
            <pubDate>Tue, 18 Feb 2025 13:20:43 GMT</pubDate>
            <description><![CDATA[<h2 id="apiapplication-programming-interface">API(Application Programming Interface)</h2>
<blockquote>
<p>둘 이상의 컴퓨터 프로그램이 서로 통신하는 방법이자 컴퓨터 사이에 있는 인터페이스</p>
</blockquote>
<p>인터페이스?
서로 다른 시스템 간의 통신을 돕는 중간 역할</p>
<h4 id="api-작동방식">API 작동방식</h4>
<p><img src="https://velog.velcdn.com/images/growgrow_up/post/967378c2-ea33-476d-8f63-3af4c6a805d2/image.png" alt=""></p>
<p>1️⃣ 클라이언트(웹, 모바일 앱)가 API를 호출
2️⃣ 서버(API 제공자)가 요청을 처리
3️⃣ 서버가 JSON 또는 XML 형식의 응답을 반환
4️⃣ 클라이언트가 응답 데이터를 활용하여 화면에 표시</p>
<hr>
<h4 id="api의-장점">API의 장점</h4>
<table>
<thead>
<tr>
<th>장점</th>
<th>설명</th>
</tr>
</thead>
<tbody><tr>
<td><strong>코드 재사용성</strong></td>
<td>같은 API를 여러 프로젝트에서 재사용 가능</td>
</tr>
<tr>
<td><strong>개발 속도 향상</strong></td>
<td>기존 API를 활용하여 빠르게 기능 추가 가능</td>
</tr>
<tr>
<td><strong>확장성</strong></td>
<td>다양한 플랫폼(웹, 모바일)에서 활용 가능</td>
</tr>
<tr>
<td><strong>데이터 교환 용이</strong></td>
<td>서로 다른 시스템 간 데이터 연동 가능</td>
</tr>
<tr>
<td><strong>유지보수 용이</strong></td>
<td>클라이언트-서버 분리로 독립적인 업데이트 가능</td>
</tr>
<tr>
<td><strong>보안 강화</strong></td>
<td>OAuth, JWT 등으로 인증 보안 적용 가능</td>
</tr>
<tr>
<td><strong>자동화 가능</strong></td>
<td>API를 활용하여 업무 자동화 가능</td>
</tr>
</tbody></table>
<hr>
<h4 id="rest-api의-특징">REST API의 특징</h4>
<ul>
<li>HTTP 프로토콜 사용 (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>)</li>
<li>JSON 형식의 데이터 교환 (XML도 가능)</li>
<li>자원(Resource)를 엔드포인트로 제공 (<code>/users</code>, <code>/products</code> 등)</li>
</ul>
<h4 id="rest-api를-사용해야-하는-이유">REST API를 사용해야 하는 이유</h4>
<blockquote>
<p>REST API는 웹 기반 시스템에서 데이터를 주고받는 표준적인 방식</p>
</blockquote>
<table>
<thead>
<tr>
<th>이유</th>
<th>설명</th>
</tr>
</thead>
<tbody><tr>
<td><strong>웹 친화적</strong></td>
<td>HTTP 표준을 사용하여 간편한 데이터 전송 가능</td>
</tr>
<tr>
<td><strong>클라이언트-서버 분리</strong></td>
<td>프론트엔드와 백엔드가 독립적으로 개발 가능</td>
</tr>
<tr>
<td><strong>데이터 경량화</strong></td>
<td>JSON을 사용하여 가볍고 빠른 데이터 교환 가능</td>
</tr>
<tr>
<td><strong>확장성</strong></td>
<td>새로운 기능 추가 시 기존 API와 충돌 없이 확장 가능</td>
</tr>
<tr>
<td><strong>보안 강화</strong></td>
<td>OAuth, JWT 등 다양한 인증 방식 적용 가능</td>
</tr>
<tr>
<td><strong>캐싱 가능</strong></td>
<td>GET 요청을 캐싱하여 성능 최적화 가능</td>
</tr>
<tr>
<td><strong>1. 클라이언트-서버 분리 (Separation of Concerns)</strong></td>
<td></td>
</tr>
<tr>
<td>프론트엔드(React, Vue.js 등)와 백엔드(Java, Node.js 등)를 완전히 분리하여 개발 가능</td>
<td></td>
</tr>
<tr>
<td>서로 독립적으로 개발되므로 유지보수가 편리함<br></td>
<td></td>
</tr>
<tr>
<td><strong>2. HTTP 프로토콜 기반 (웹 친화적)</strong></td>
<td></td>
</tr>
<tr>
<td>HTTP 요청 메서드 (GET, POST, PUT, DELETE) 를 활용하여 CRUD 작업을 명확하게 수행 가능</td>
<td></td>
</tr>
<tr>
<td>REST API는 브라우저, 모바일 앱 등 어떤 클라이언트에서도 쉽게 호출 가능<br></td>
<td></td>
</tr>
<tr>
<td><strong>3. JSON 형식으로 가볍고 빠른 데이터 교환</strong></td>
<td></td>
</tr>
<tr>
<td>JSON은 텍스트 기반 데이터 형식으로 가볍고 읽기 쉬움</td>
<td></td>
</tr>
<tr>
<td>XML보다 전송 속도가 빠르고 파싱하기 쉬움</td>
<td></td>
</tr>
<tr>
<td>REST API는 JSON을 기본으로 사용하여 웹과 모바일 앱 개발에 적합<br></td>
<td></td>
</tr>
<tr>
<td><strong>4. 확장성과 유연성 (Scalability)</strong></td>
<td></td>
</tr>
<tr>
<td>RESTful 설계를 따르면 새로운 기능을 추가할 때도 기존 API를 변경하지 않고 확장 가능</td>
<td></td>
</tr>
<tr>
<td>예: /users API에 새로운 필드를 추가해도 기존 클라이언트는 문제없이 동작<br></td>
<td></td>
</tr>
<tr>
<td><strong>5. 캐싱(Caching)을 활용한 성능 최적화</strong></td>
<td></td>
</tr>
<tr>
<td>GET 요청은 캐싱이 가능하여 서버 부하를 줄이고 응답 속도를 개선 가능</td>
<td></td>
</tr>
<tr>
<td>예: 클라이언트가 동일한 데이터를 여러 번 요청해도, 캐시된 응답을 사용할 수 있음<br></td>
<td></td>
</tr>
<tr>
<td><strong>6. 인증과 보안이 용이</strong></td>
<td></td>
</tr>
<tr>
<td>REST API는 OAuth, JWT, API Key 등을 활용한 보안 인증을 쉽게 적용 가능</td>
<td></td>
</tr>
<tr>
<td>HTTPS를 사용하면 데이터를 암호화하여 보안성이 강화됨</td>
<td></td>
</tr>
</tbody></table>
<hr>
<h4 id="restful과-rest-api의-관계">RESTful과 REST API의 관계</h4>
<blockquote>
<p>REST API는 RESTful 원칙을 따르는 API를 의미</p>
</blockquote>
<p>RESTful 하게 만든다는 것은?
REST의 원칙을 잘 준수하는 API를 의미</p>
<h4 id="rest-api-vs-restful의-차이">REST API vs RESTful의 차이</h4>
<table>
<thead>
<tr>
<th>개념</th>
<th>설명</th>
</tr>
</thead>
<tbody><tr>
<td><strong>REST (Representational State Transfer)</strong></td>
<td>웹에서 데이터를 주고받는 아키텍처 스타일</td>
</tr>
<tr>
<td><strong>REST API</strong></td>
<td>REST 원칙을 따르는 API</td>
</tr>
<tr>
<td><strong>RESTful</strong></td>
<td>REST 원칙을 잘 지키고 있는 상태</td>
</tr>
</tbody></table>
<h4 id="restful-api의-핵심-원칙">RESTful API의 핵심 원칙</h4>
<table>
<thead>
<tr>
<th>원칙</th>
<th>설명</th>
</tr>
</thead>
<tbody><tr>
<td><strong>1. 클라이언트-서버 분리</strong></td>
<td>클라이언트(프론트)와 서버(백엔드)를 분리</td>
</tr>
<tr>
<td><strong>2. 무상태성 (Stateless)</strong></td>
<td>서버가 클라이언트 상태 정보를 저장하지 않음</td>
</tr>
<tr>
<td><strong>3. 캐시 가능 (Cacheable)</strong></td>
<td>HTTP 캐싱을 활용하여 성능 최적화</td>
</tr>
<tr>
<td><strong>4. 계층적 시스템 (Layered System)</strong></td>
<td>API가 여러 계층을 통해 요청을 처리할 수 있어야 함</td>
</tr>
<tr>
<td><strong>5. 일관된 인터페이스 (Uniform Interface)</strong></td>
<td>RESTful API는 자원을 명확한 URL로 표현해야 함</td>
</tr>
</tbody></table>
<br>

<p> RESTful하지 않은 API (잘못된 방식)</p>
<pre><code>GET /getUserData?id=123  (❌ URL에 동사를 사용함)
POST /createUser  (❌ 동사 사용)
DELETE /deleteUser?id=123  (❌ 동사 사용)</code></pre><p>RESTful API (올바른 방식)</p>
<pre><code>GET /users/123   (✅ 특정 사용자 정보 조회)
POST /users      (✅ 새로운 사용자 추가)
PUT /users/123   (✅ 사용자 정보 수정)
DELETE /users/123  (✅ 사용자 삭제)</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[XML]]></title>
            <link>https://velog.io/@growgrow_up/TIL-XML</link>
            <guid>https://velog.io/@growgrow_up/TIL-XML</guid>
            <pubDate>Tue, 18 Feb 2025 11:07:49 GMT</pubDate>
            <description><![CDATA[<h2 id="xml">XML</h2>
<blockquote>
<p>데이터를 저장하고 전송하기 위한 마크업 언어</p>
</blockquote>
<p>마크업 형태?
마크업은 태그 등을 이용하여 문서나 데이터의 구조를 나타내는 방법</p>
<h3 id="xml과-html의-차이">XML과 HTML의 차이</h3>
<ul>
<li><p>XML은 데이터 저장 및 전송을 위한 형식이고, HTML은 웹 페이지를 구조화하는 데 사용</p>
</li>
<li><p>XML은 태그를 직접 정의할 수 있지만, HTML은 정해진 태그만 사용할 수 있음</p>
</li>
<li><p>XML은 문법이 엄격, HTML은 브라우저가 알아서 처리 가능<br/><br/></p>
<table>
<thead>
<tr>
<th align="center">구분</th>
<th align="center">XML(eXtensible Markup Language)</th>
<th align="center">HTML (HyperText Markup Language)</th>
</tr>
</thead>
<tbody><tr>
<td align="center">목적</td>
<td align="center">데이터 저장 및 전송</td>
<td align="center">웹 페이지 구조 및 콘텐츠 표시</td>
</tr>
<tr>
<td align="center">역할</td>
<td align="center">데이터 교환을 위한 마크업 언어</td>
<td align="center">웹 문서를 표시하는 마크업 언어</td>
</tr>
<tr>
<td align="center">태그 사용</td>
<td align="center">사용자가 직접 정의 가능</td>
<td align="center">미리 정의된 태그 사용 (<code>&lt;p&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;h1&gt;</code> 등)</td>
</tr>
<tr>
<td align="center">문법 규칙</td>
<td align="center">엄격한 문법을 따름 (태그는 반드시 닫아야 함)</td>
<td align="center">문법이 다소 유연함 (일부 태그는 닫지 않아도 작동)</td>
</tr>
<tr>
<td align="center">확장성</td>
<td align="center">사용자가 원하는 태그를 정의하여 확장 가능</td>
<td align="center">브라우저에서 지원하는 태그만 사용 가능</td>
</tr>
</tbody></table>
</li>
</ul>
<hr>
<h4 id="예제코드">예제코드</h4>
<pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;library&gt;
    &lt;book id=&quot;101&quot;&gt;
        &lt;title&gt;XML 기초&lt;/title&gt;
        &lt;author&gt;홍길동&lt;/author&gt;
        &lt;year&gt;2025&lt;/year&gt;
        &lt;price currency=&quot;KRW&quot;&gt;15000&lt;/price&gt;
    &lt;/book&gt;

    &lt;book id=&quot;102&quot;&gt;
        &lt;title&gt;Javascript 프로그래밍&lt;/title&gt;
        &lt;author&gt;&lt;/author&gt;
        &lt;year&gt;2024&lt;/year&gt;
        &lt;price currency=&quot;USD&quot;&gt;25.99&lt;/price&gt;
    &lt;/book&gt;

    &lt;book id=&quot;103&quot;&gt;
        &lt;title&gt;웹 개발과 HTML&lt;/title&gt;
        &lt;author&gt;강민수&lt;/author&gt;
        &lt;year&gt;2022&lt;/year&gt;
        &lt;price currency=&quot;EUR&quot;&gt;20.00&lt;/price&gt;
    &lt;/book&gt;
&lt;/library&gt;</code></pre><h4 id="xml-코드-설명">XML 코드 설명</h4>
<ol>
<li>XML 선언
XML 버전: 1.0
문자 인코딩: UTF-8 (한글, 영어 등 다양한 문자 지원)<pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</code></pre></li>
<li>루트 요소 (<code>&lt;library&gt;</code>)
모든 도서 정보를 감싸는 최상위 요소<pre><code>&lt;library&gt; ... &lt;/library&gt;</code></pre></li>
<li>요소와 속성
<code>&lt;book&gt;</code> 요소는 각 책을 나타내며, id 속성을 가짐.
<code>&lt;title&gt;</code>, <code>&lt;author&gt;</code>, <code>&lt;year&gt;</code>, <code>&lt;price&gt;</code> 같은 요소들이 포함됨.</li>
</ol>
<pre><code>&lt;book id=&quot;101&quot;&gt;
    &lt;title&gt;XML 기초&lt;/title&gt;
    &lt;author&gt;홍길동&lt;/author&gt;
    &lt;year&gt;2023&lt;/year&gt;
    &lt;price currency=&quot;KRW&quot;&gt;15000&lt;/price&gt;
&lt;/book&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[TIL] JSON ]]></title>
            <link>https://velog.io/@growgrow_up/JSON</link>
            <guid>https://velog.io/@growgrow_up/JSON</guid>
            <pubDate>Tue, 18 Feb 2025 10:24:38 GMT</pubDate>
            <description><![CDATA[<h2 id="json">JSON</h2>
<blockquote>
<p>Javacsript 객체 문법으로 여러 언어에서 데이터 교환형식으로 쓰이며, 객체 문법 외에도 배열, 문자열도 표현가능</p>
</blockquote>
<h3 id="객체object-타입">객체(Object) 타입</h3>
<blockquote>
<p>{} (중괄호)로 감싸며, 키(Key)와 값(Value)로 구성됨
이미 존재하는 키를 중복선언하면 나중에 선언한 해당 키에 대응한 값이 덮어쓰이게 된다.</p>
</blockquote>
<pre><code>// 중복인 경우 나중에 선언한 kim으로 덮어쓰인다.
{
    &quot;name&quot; : &quot;jeong&quot;,
    &quot;name&quot; : &quot;kim&quot;
}</code></pre><h4 id="1-json-객체-object-타입-예제">1. JSON 객체 (Object) 타입 예제</h4>
<pre><code>{
  &quot;name&quot;: &quot;홍길동&quot;,
  &quot;age&quot;: 30,
  &quot;email&quot;: &quot;hong@example.com&quot;,
  &quot;address&quot;: {
    &quot;city&quot;: &quot;서울&quot;,
    &quot;zip&quot;: &quot;12345&quot;
  }
}</code></pre><h4 id="1-1-접근-방법">1-1. 접근 방법</h4>
<pre><code>const data = {
  name: &quot;홍길동&quot;,
  age: 30,
  email: &quot;hong@example.com&quot;,
  address: {
    city: &quot;서울&quot;,
    zip: &quot;12345&quot;
  }
};

// 객체의 속성 접근
console.log(data.name);        // 홍길동
console.log(data.age);         // 30
console.log(data.email);       // hong@example.com

// 중첩된 객체 접근
console.log(data.address.city); // 서울
console.log(data.address.zip);  // 12345</code></pre><h3 id="배열array-타입">배열(Array) 타입</h3>
<blockquote>
<p><code>[]</code> (대괄호)로 감싸며, 여러 개의 값을 포함할 수 있음</p>
</blockquote>
<h4 id="2-json-배열-array-타입-예제">2. JSON 배열 (Array) 타입 예제</h4>
<pre><code>{
  &quot;users&quot;: [
    { &quot;id&quot;: 1, &quot;name&quot;: &quot;김철수&quot;, &quot;email&quot;: &quot;kim@example.com&quot; },
    { &quot;id&quot;: 2, &quot;name&quot;: &quot;이영희&quot;, &quot;email&quot;: &quot;lee@example.com&quot; },
    { &quot;id&quot;: 3, &quot;name&quot;: &quot;박민수&quot;, &quot;email&quot;: &quot;park@example.com&quot; }
  ]
}</code></pre><h4 id="2-2-접근방법">2-2. 접근방법</h4>
<pre><code>const data = {
  users: [
    { id: 1, name: &quot;김철수&quot;, email: &quot;kim@example.com&quot; },
    { id: 2, name: &quot;이영희&quot;, email: &quot;lee@example.com&quot; },
    { id: 3, name: &quot;박민수&quot;, email: &quot;park@example.com&quot; }
  ]
};

// 배열의 특정 요소 접근
console.log(data.users[0].name);  // 김철수
console.log(data.users[1].email); // lee@example.com

/* 출력 결과:
ID: 1, 이름: 김철수, 이메일: kim@example.com
ID: 2, 이름: 이영희, 이메일: lee@example.com
ID: 3, 이름: 박민수, 이메일: park@example.com
*/</code></pre><h4 id="3-json-객체--배열-혼합-예제">3. JSON 객체 + 배열 혼합 예제</h4>
<pre><code>{
  &quot;company&quot;: &quot;GreenTech&quot;,
  &quot;employees&quot;: [
    { &quot;id&quot;: 101, &quot;name&quot;: &quot;최민호&quot;, &quot;position&quot;: &quot;Backend Developer&quot; },
    { &quot;id&quot;: 102, &quot;name&quot;: &quot;강지훈&quot;, &quot;position&quot;: &quot;Frontend Developer&quot; },
    { &quot;id&quot;: 103, &quot;name&quot;: &quot;윤서연&quot;, &quot;position&quot;: &quot;UI/UX Designer&quot; }
  ]
}</code></pre><h4 id="3-1-접근방법">3-1. 접근방법</h4>
<pre><code>const companyData = {
  company: &quot;GreenTech&quot;,
  employees: [
    { id: 101, name: &quot;최민호&quot;, position: &quot;Backend Developer&quot; },
    { id: 102, name: &quot;강지훈&quot;, position: &quot;Frontend Developer&quot; },
    { id: 103, name: &quot;윤서연&quot;, position: &quot;UI/UX Designer&quot; }
  ]
};

// 회사명 출력
console.log(companyData.company); // GreenTech

// 특정 직원 정보 출력
console.log(companyData.employees[1].name);     // 강지훈
console.log(companyData.employees[1].position); // Frontend Developer

// 전체 직원 목록 출력
companyData.employees.forEach(emp =&gt; {
  console.log(`${emp.id}: ${emp.name} - ${emp.position}`);
});</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 외계어 사전]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%99%B8%EA%B3%84%EC%96%B4-%EC%82%AC%EC%A0%84</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%99%B8%EA%B3%84%EC%96%B4-%EC%82%AC%EC%A0%84</guid>
            <pubDate>Mon, 06 Nov 2023 09:55:00 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/a8cf24c1-1622-4171-833d-f786217581bb/image.png" alt=""></p>
<h4 id="나의-풀이">나의 풀이</h4>
<pre><code>function solution(spell, dic) {
    let arr = [];
    for(let i=0; i &lt; dic.length; i++) {
        let subArr = [];
        for(let j=0; j &lt; spell.length; j++) {
            subArr.push(dic[i].includes(spell[j]));
        }
        arr.push(subArr);
    }
   return arr.some(subArr =&gt; subArr.every(Boolean)) ? 1 : 2;
}</code></pre><p>많은 예시를 보고 만들어 낸 알고리즘이다.
for문을 두번 사용했다.
dic의 배열을 돌고 spell을 배열을 돌면서 spell의 인수들이 포함되어 있는지를 indcludes() 메서드를 이용하여 subArr에 넣어주었다.
새로 알게된 some() 메서드는 조건이 맞으면 true 아니면 false를 반환한다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 영어가 싫어요]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%98%81%EC%96%B4%EA%B0%80-%EC%8B%AB%EC%96%B4%EC%9A%94</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%98%81%EC%96%B4%EA%B0%80-%EC%8B%AB%EC%96%B4%EC%9A%94</guid>
            <pubDate>Fri, 03 Nov 2023 12:58:50 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/04660e48-2bba-43ac-85ad-9737c5720b38/image.png" alt=""></p>
<h4 id="나의-풀이">나의 풀이</h4>
<pre><code>function solution(numbers) {
    let num = [ &quot;zero&quot;, &quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;, &quot;five&quot;, &quot;six&quot;, &quot;seven&quot;, &quot;eight&quot;, &quot;nine&quot; ];

    num.forEach((str, idx) =&gt; {
        // console.log(str);
        // console.log(idx);
        numbers = numbers.replaceAll(str, idx);
    });
    return Number(numbers); 
}</code></pre><p>먼저, numbers에 &quot;zero&quot;, &quot;one&quot;, &quot;two&quot;, &quot;three&quot;, &quot;four&quot;, &quot;five&quot;, &quot;six&quot;, &quot;seven&quot;, &quot;eight&quot;, &quot;nine&quot; 값들이 공백 없이 조합되어 있다는 말에서 힌트를 하나 얻었다.
이 숫자들을 배열에 담아 반복문을 돌려야 겠다.
forEach를 선택한 이유는 배열에 0이 들어가 있는데 forEach의 idx를 통해서 쉽게 숫자와 문자를 연결 할 수 있기 때문이다.</p>
<p>알아보기 쉽게 str과 idx를 콘솔에 찍어보았다.
<img src="https://velog.velcdn.com/images/growgrow_up/post/1a7f09ac-f8bb-47ea-84fe-f423acb4a6db/image.png" alt=""></p>
<p>replaceAll 이라는 메서드를 이용해서 str을 idx로 바꿔서 배열에 넣을 수 있도록 하였고 
문자를 숫자로 변환하여 return 할 수 있도록 만들었다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 잘라서 배열로 저장하기
]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%9E%98%EB%9D%BC%EC%84%9C-%EB%B0%B0%EC%97%B4%EB%A1%9C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%9E%98%EB%9D%BC%EC%84%9C-%EB%B0%B0%EC%97%B4%EB%A1%9C-%EC%A0%80%EC%9E%A5%ED%95%98%EA%B8%B0</guid>
            <pubDate>Wed, 01 Nov 2023 02:52:11 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/200ebadb-4126-4d3a-b310-18ad63d5f847/image.png" alt=""></p>
<h4 id="나의-풀이">나의 풀이</h4>
<pre><code>function solution(my_str, n) {
    let answer = [];
    let arr = my_str.split(&#39;&#39;);
    for(let i=0; i &lt; arr.length; i++) {

        answer.push(arr.splice(0,n).join(&quot;&quot;));
        console.log(answer);
    }
    return answer;
}</code></pre><p>프로그래머스에 저장된 2개의 테스트 케이스에는 통과가 떴는데 막상 제출 하니까 오답률이 62.5가 나오는 알고리즘 이었다.
테스트 케이스를 1개 더 추가해서 문제점이 무엇인지 알아보았다.
<img src="https://velog.velcdn.com/images/growgrow_up/post/94ee61af-4b25-43b6-b6b0-e500ed731f8c/image.png" alt=""></p>
<p>내가 짠 알고리즘은 n개의 개수대로 나누었을 때 남은 갯수가 n개 보다 작으면 날려버리는 것이었다...</p>
<p>다른 풀이를 참고하여 for문을 while문으로 바꾸었고 최종적으로 통과 되었다.</p>
<h4 id="남의-풀이">남의 풀이</h4>
<pre><code>function solution(my_str, n) {
    let answer = [];
    let arr = my_str.split(&#39;&#39;);
      while(arr.length &gt; 0){
        answer.push(arr.splice(0,n).join(&quot;&quot;));
    }
    return answer;
}</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 숨어있는 숫자의 덧셈 (2)]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%88%A8%EC%96%B4%EC%9E%88%EB%8A%94-%EC%88%AB%EC%9E%90%EC%9D%98-%EB%8D%A7%EC%85%88-2</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%88%A8%EC%96%B4%EC%9E%88%EB%8A%94-%EC%88%AB%EC%9E%90%EC%9D%98-%EB%8D%A7%EC%85%88-2</guid>
            <pubDate>Sun, 15 Oct 2023 14:38:49 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/90d94914-105c-44ab-82cf-2d71f9eda09a/image.png" alt=""></p>
<h4 id="남의-풀이">남의 풀이</h4>
<pre><code>function solution(my_string) {
    let sum = 0;
    let new_string = my_string.replace(/[A-z]/g, &quot; &quot;).split(&#39; &#39;);;
    console.log(new_string);
    for (let i = 0; i &lt; new_string.length; i++) {
        if (!isNaN(new_string[i])) {
        sum += Number(new_string[i]);
        }
    }
    return sum;
}</code></pre><p>정규식과 replace매서드와 split매서드를 이용한다.
/[A-z]/g 라는 정규식은 대,소문자라는 정규식입니다.
split을 적용하기 전 콘솔입니다.
<img src="https://velog.velcdn.com/images/growgrow_up/post/7774e5ae-356d-428e-baa9-4df7298f6274/image.png" alt="">
출력된 부분을 보면 문자가 있던 부분에 빈칸으로 처리된 것으 볼 수 있습니다.
split(&#39;&#39;)이라는 메서드를 적용하면 배열로 바뀌게 됩니다.
<img src="https://velog.velcdn.com/images/growgrow_up/post/5ebcdceb-930d-4fa7-8c49-310f6f20cbae/image.png" alt=""></p>
<p>반복문을 사용하여 숫자인 것들만 sum에 누적으로 더하기 계산을 해줍니다. 이때 배열 안에 숫자들이 문자로 되어있기 때문에 Number(new_string[i])으로 숫자로 바꿔준 다음 sum에 더해줍니다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[npm으로 react-typescript설치부터 git 연결 까지]]></title>
            <link>https://velog.io/@growgrow_up/npm%EC%9C%BC%EB%A1%9C-react-typescript%EC%84%A4%EC%B9%98%EB%B6%80%ED%84%B0-git-%EC%97%B0%EA%B2%B0-%EA%B9%8C%EC%A7%80</link>
            <guid>https://velog.io/@growgrow_up/npm%EC%9C%BC%EB%A1%9C-react-typescript%EC%84%A4%EC%B9%98%EB%B6%80%ED%84%B0-git-%EC%97%B0%EA%B2%B0-%EA%B9%8C%EC%A7%80</guid>
            <pubDate>Fri, 13 Oct 2023 10:25:52 GMT</pubDate>
            <description><![CDATA[<ol>
<li>터미널에서 create-react-app typescript 설치를 해준다.
바탕화면에 프로젝트 폴더를 만들어서 그 폴더 안에 설치를 할 것이다.</li>
</ol>
<blockquote>
<p>cd Desktop (바탕화면으로 이동)
npx create-react-app 본인 파일이름 --template typescript</p>
</blockquote>
<p>파일을 만든 뒤 vscode로 파일을 열어보면 
<img src="https://velog.velcdn.com/images/growgrow_up/post/642a9d99-ef66-467e-b61a-960ab5123786/image.png" alt="">
이와같은 파일들이 만들어져 있을 것이다.</p>
<ol start="2">
<li>git 연결 <blockquote>
<p>git init
git git branch -M main
git remote add origin &quot;repo 주소&quot;</p>
</blockquote>
</li>
</ol>
<p>github 들어가면 repository가 생성되어 있을 것이다. </p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 문자열 정렬하기(2)]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B02</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B02</guid>
            <pubDate>Mon, 02 Oct 2023 10:53:09 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/2fe22532-3b95-446c-adf5-17dfdda286e3/image.png" alt=""></p>
<h4 id="나의-풀이">나의 풀이</h4>
<pre><code>function solution(my_string) {
    let arr = my_string.toLowerCase();
    let sorting = [...arr].sort();
    let answer = sorting.join(&#39;&#39;);
    return answer;
}</code></pre><p>한줄로 간단하게 하는 방식을 찾아냈다.
사실 나도 이렇게 하고싶었는데 배열로 먼저 만들고 sort한 다음 toLowerCase()메소드 순서대로 하니까 에러가 나서 중도포기 했었는데 문자열 소문자로 변경한 것을 배열로 만들면 됐다!</p>
<h4 id="남의-풀이">남의 풀이</h4>
<pre><code>function solution(s) {
    return [...s.toLowerCase()].sort().join(&#39;&#39;)
}</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 배열 회전시키기]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EB%B0%B0%EC%97%B4-%ED%9A%8C%EC%A0%84%EC%8B%9C%ED%82%A4%EA%B8%B0</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EB%B0%B0%EC%97%B4-%ED%9A%8C%EC%A0%84%EC%8B%9C%ED%82%A4%EA%B8%B0</guid>
            <pubDate>Sat, 23 Sep 2023 12:58:21 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/c112a4aa-807c-48f2-a9c4-eef0cac79d28/image.png" alt=""></p>
<h4 id="나의-풀이">나의 풀이</h4>
<pre><code>function solution(numbers, direction) {
    if(direction === &#39;right&#39;) {
    // 배열의 마지막 요소를 맨 앞쪽에 추가
        numbers.unshift(numbers.pop());
    } else {
    // 배열의 첫번째 요소를 제거하고 push로 배열 뒤쪽으로 추가
        numbers.push(numbers.shift());
    }
    return numbers;
}</code></pre><blockquote>
<h4 id="arrayunshift">Array.unshift()</h4>
<p>: 새로운 요소를 배열의 맨 앞쪽에 추가</p>
</blockquote>
<blockquote>
<h4 id="arraypop">Array.pop()</h4>
<p>배열에서 마지막 요소를 제거</p>
</blockquote>
<blockquote>
<h4 id="arrayshift">Array.shift()</h4>
<p>: 배열에서 첫번째 요소 제거</p>
</blockquote>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 인덱스 바꾸기]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%9D%B8%EB%8D%B1%EC%8A%A4-%EB%B0%94%EA%BE%B8%EA%B8%B0</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%9D%B8%EB%8D%B1%EC%8A%A4-%EB%B0%94%EA%BE%B8%EA%B8%B0</guid>
            <pubDate>Wed, 20 Sep 2023 10:33:15 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/3df9fc83-4f01-495c-95d9-dec2f158490b/image.png" alt=""></p>
<h4 id="나의-풀이">나의 풀이</h4>
<p>문자열의 위치를 바꾸기 위해선 문자열을 배열로 바꿔야 한다는 것도 splice를 사용해서 삭제하고 바꿀 수 있다는 것 까지는 알아냈다.
하지만 아무리 생각해도 교차해서는 어떻게 바꿀 수 있을지 몰랐다.</p>
<h4 id="남의-풀이">남의 풀이</h4>
<pre><code>function solution(my_string, num1, num2) {
    let str = [...my_string];
    str.splice(num1, 1, my_string[num2]);
    str.splice(num2, 1, my_string[num1]);
    console.log(str);
    return str.join(&#39;&#39;);
}</code></pre><p>먼저 문자열을 구조분해 할당을 통해서 배열에 넣어준다.
splice(시작, 제거할 요소의 수, 추가할 요소)
시작 요소부터 num1을 넣어서 바로 삭제할 요소를 넣어준다. 
당연히 1개를 삭제할 것이기 때문에 제거할 요소의 수는 1이고, 추가할 요소는 my_string[num2]로 바로 지정해준다.</p>
<p><img src="https://velog.velcdn.com/images/growgrow_up/post/806bcca1-d190-477c-b312-256420e49a72/image.png" alt=""></p>
<p>마지막에 join으로 합쳐주는 이유는 배열에서 splice를 통해서 바꾸다 보면 낱개로 분리되어 있기 때문에 다시 합쳐주는 작업이 필요하다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 제곱수 판별]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%A0%9C%EA%B3%B1%EC%88%98-%ED%8C%90%EB%B3%84</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%A0%9C%EA%B3%B1%EC%88%98-%ED%8C%90%EB%B3%84</guid>
            <pubDate>Wed, 30 Aug 2023 07:36:01 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/e963dd16-afc0-4240-a88a-a647b693c11a/image.png" alt=""></p>
<h4 id="나의-풀이의-문제점">나의 풀이의 문제점</h4>
<pre><code>function solution(n) {
    for(let i=1; i &lt; n; i++) {
        if(n % i === 0) {
            return 1;
        } return 2;
    }
}</code></pre><p><img src="https://velog.velcdn.com/images/growgrow_up/post/a4ec1ee1-9092-4117-a964-91388e0c140d/image.png" alt=""></p>
<p>먼저 제곱수의 특징에 대해서 알아봤다. 
제곱수의 특징은 <strong>약수가 홀수개</strong> 라는 것이다.
제곱수가 되면 나머지가 0이 될거라는 생각이 들어 n % i를 해보니 홀수도 나머지가 0이 될 수 있다는 것을 인지하였다.
찾아보다가 제곱근을 이용하여 제곱수를 계산하는 방법도 있다고 해서 다른사람들의 풀이를 찾아봤다.</p>
<hr>
<h4 id="다른사람-풀이1">다른사람 풀이(1)</h4>
<pre><code>function solution(n) {
  return Number.isInteger(Math.sqrt(n)) ? 1 : 2;
}</code></pre><blockquote>
<p>Math.sqrt()는 제곱근을 반환한다.</p>
</blockquote>
<pre><code> Math.sqrt(9); // 3
 Math.sqrt(2); // 1.414213562373095
 Math.sqrt(1); // 1
 Math.sqrt(0); // 0
 Math.sqrt(-1); // NaN
</code></pre><p>isInteger로 정수값을 판별하는 이유는 위와같이 Math.sqrt()가 실수도 반환하기 때문이다. </p>
<h4 id="다른사람-풀이2">다른사람 풀이(2)</h4>
<pre><code>function solution(n) {
    for (let i=0; i*i &lt;= n; i++) {
        if (i*i === n) return 1
    }
    return 2;
}</code></pre><p>제곱근이기 때문에 조건문에 i * i === n를 사용해봤었는데 이것 또한 여러 경우의 수에 맞는 알고리즘이 아니었다.
for문의 조건을 i * i &lt;= n으로 하게되면 i의 범위가 현저히 작아지고 그 안에서 최소공배수를 찾아나갈 수 있다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 숨어있는 숫자의 덧셈(1)]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%88%A8%EC%96%B4%EC%9E%88%EB%8A%94-%EC%88%AB%EC%9E%90%EC%9D%98-%EB%8D%A7%EC%85%881</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%88%A8%EC%96%B4%EC%9E%88%EB%8A%94-%EC%88%AB%EC%9E%90%EC%9D%98-%EB%8D%A7%EC%85%881</guid>
            <pubDate>Tue, 29 Aug 2023 09:48:42 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/10c6d914-6b65-49fa-96af-6e5bd1dc4ef1/image.png" alt=""></p>
<h4 id="남의-풀이1">남의 풀이(1)</h4>
<pre><code>function solution(my_string) {
    let sum = 0;
    for (let i = 0; i &lt; my_string.length; i++) {
        if (isNaN(my_string[i]) === false) {
            sum += Number(my_string[i])
        } 
    } return sum;
}</code></pre><h4 id="남의-풀이2">남의 풀이(2)</h4>
<pre><code>function solution(my_string) {
  const num = my_string.split(&quot;&quot;);
  let result = 0;

  for(let i = 0; i &lt; num.length; i++){
    if(Number(num[i])) result += Number(num[i])
  }
  return result;
}</code></pre><hr>
<p>split 메서드를 이용하여 배열을 자르는 것 까지는 생각해 냈고 isNaN을 이용하여 배열이 숫자가 아닌 경우 false를 출력하는 것도 알게 되었다. 
마지막 배열 안의 문자로 된 문자열들을 어떻게 숫자로 판별하는지 까지 생각을 하지 못했다. </p>
<p>(1)풀이 에서는 배열을 쪼갤 필요 없이 for로 배열을 훑으면서 조건으로 isNaN 메서드를 사용했을 때, false가 나온 경우 숫자로 변환해서 sum에 누적으로 더할 수 있도록 만든 알고리즘이다.</p>
<p>(2)풀이 에서는 내가 처음 생각한대로 split을 이용하여 배열을 쪼갰고 반복문의 조건을 바로 숫자로 변환해서 숫자인 객체들을 누적하여 결과를 return 하도록 만들었다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 세균 증식]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%84%B8%EA%B7%A0-%EC%A6%9D%EC%8B%9D</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%84%B8%EA%B7%A0-%EC%A6%9D%EC%8B%9D</guid>
            <pubDate>Sat, 26 Aug 2023 13:54:48 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/5e7c3795-1ede-409f-b998-e18375cf4736/image.png" alt=""></p>
<h4 id="나의-풀이">나의 풀이</h4>
<pre><code>function solution(n, t) {
    for ( let i = 1; i &lt;= t; i++ ) {
    ??????
  }
    return;
}</code></pre><h4 id="다른사람의-풀이">다른사람의 풀이</h4>
<pre><code>function solution(n, t) {
    for ( let i = 1; i &lt;= t; i++ ) {
    n *= 2;
  }
    return n;
}</code></pre><p>누적된 덧셈 계산에 +=를 이용하여 알고리즘은 많이 풀어봤었는데 곱하기도 누적계산을 할 수 있다는 것은 몰랐다.
for문을 이용해서 문제를 풀어야 겠다는 방식까지 잘 접근 했었는데 아쉽게도 끝까지 다 풀지 못했다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[프로그래머스] 옷가게 할인받기]]></title>
            <link>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%98%B7%EA%B0%80%EA%B2%8C-%ED%95%A0%EC%9D%B8%EB%B0%9B%EA%B8%B0</link>
            <guid>https://velog.io/@growgrow_up/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%98%B7%EA%B0%80%EA%B2%8C-%ED%95%A0%EC%9D%B8%EB%B0%9B%EA%B8%B0</guid>
            <pubDate>Fri, 18 Aug 2023 10:29:46 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/growgrow_up/post/d1e77675-d1e6-4b2f-840a-4903723b8bab/image.png" alt=""></p>
<h4 id="나의-풀이">나의 풀이</h4>
<pre><code>function solution(price) {
    if(price &gt;= 500000) {
        return Math.floor(price * 0.8);
    } else if(price &gt;= 300000) {
        return Math.floor(price * 0.9);
    } else if(price &gt;= 100000) {
        return Math.floor(price * 0.95);
    } else return price
}</code></pre><p>처음에 계속 undefinde가 떠서 이유를 모르겠어서 다른 사람들이 쓴 코드들을 찾아봤다.
첫 if문의 조건을 10만원으로 했던 것이었다.
그렇게 되면 50만원 이상도 10만원이기 때문에 할인이 5%밖에 할인이 되지 않는다.
그렇기 때문에 제일 큰 금액의 할인율 부터 조건을 걸어야 한다.
마지막으로 생각지도 못한 실수 였는데 금액을 단위로 끊어서 100,000 이렇게 적었더니 안됐던 거였다.
숫자를 고치니까 잘 작동이 됐다...</p>
]]></description>
        </item>
    </channel>
</rss>