<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>saida_saju.log</title>
        <link>https://velog.io/</link>
        <description>배우고 성장하는 중입니다.</description>
        <lastBuildDate>Wed, 31 Dec 2025 04:32:14 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>saida_saju.log</title>
            <url>https://velog.velcdn.com/images/saida_saju/profile/5e18df57-209e-46a7-8a84-400f918aca9d/image.jpeg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. saida_saju.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/saida_saju" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[부산소마고 1학년 회고록]]></title>
            <link>https://velog.io/@saida_saju/%EB%B6%80%EC%82%B0%EC%86%8C%EB%A7%88%EA%B3%A0-1%ED%95%99%EB%85%84-%ED%9A%8C%EA%B3%A0%EB%A1%9D</link>
            <guid>https://velog.io/@saida_saju/%EB%B6%80%EC%82%B0%EC%86%8C%EB%A7%88%EA%B3%A0-1%ED%95%99%EB%85%84-%ED%9A%8C%EA%B3%A0%EB%A1%9D</guid>
            <pubDate>Wed, 31 Dec 2025 04:32:14 GMT</pubDate>
            <description><![CDATA[<p>중학교에 비하면 고등학생이 된 첫 해인 2025년은 1년 내에 크나큰 변화가 있었던 해라고 생각이 든다.</p>
<h2 id="중학교-시절의-나">중학교 시절의 나</h2>
<p>중학교 시절의 나는 정말 학교에서 시키는 것까지만 하는 학생이었던 것 같다. 진로에 대해서도 크게 고민해보지도 않았고, 그렇다고 공부를 열심히 하는 편도 아니었다. </p>
<p>C언어를 배우기 시작한 건 중학교 2학년 무렵의 일이었었다. 나름 어렵지도 않아서 꾸준히 공부해볼 수 있었던 것 같다. 3학년이 되었을 때는 슬슬 고등학교도 선택해야 했었는데 일반고는 가고 싶지 않았었기 때문에 마이스터 인재 전형으로 부산 소마고에 지원하게 되었다. 그렇게 최종적으로 부산 소마고에 입학하게 되었다.
<img src="https://velog.velcdn.com/images/saida_saju/post/0bda6aec-d9fa-4f39-b5ae-5001dd2f257e/image.png" alt=""></p>
<h2 id="입학했을-무렵">입학했을 무렵</h2>
<p>첫 기숙사 생활과 고등학교 생활이 시작되었다. 생각보다 적응하는 건 어렵지 않았고 중학교 때와 다른 생활을 보낸다는 게 설레었기도 했던 것 같다. 하나 힘들었던 점은 집에서 키우던 고양이와 기숙사에 있을 동안은 계속 떨어져 지내야한다는 점이 힘들었었지만 입학식날부터 받은 맥북이 정말 좋았다...</p>
<p>임시반장을 맡고 동아리는 밴드부에 들어갔었다. 열정이 과하기도 했었지만 어떻게해야할지 갈피를 잘 못잡기도 했었던 것 같다.</p>
<h2 id="1학년-수학여행">1학년 수학여행</h2>
<p>우리 학교는 1학년은 서울, 2학년은 미국으로 수학여행에 가게 된다.
한강에서 친구들이랑 자전거도 타고, 경복궁 구경이랑 롯데월드도 놀러갔었다.
<img src="https://velog.velcdn.com/images/saida_saju/post/e5d31c31-2b97-4ab4-a9e5-66919e72ae7f/image.jpeg" alt=""></p>
<p>물론 놀기만 한 건 아니고 서울에 있는 게임 회사에서 데이터 분석도 했었는데 신기했었었다. 롤파크에 가서 구경하기도 했었지만 롤은 해본 적이 없어서 그냥 구경만 했었다.</p>
<h2 id="아이디어톤">아이디어톤</h2>
<p>소마고는 매년 해커톤을 진행한다는 것 같았지만 이번에는 특정 사유로 인해서 아이디어톤으로 하루동안 5개의 SW마이스터고와 네트워킹하는 시간을 가졌었다. 
<img src="https://velog.velcdn.com/images/saida_saju/post/d37a90e6-873d-4495-ac61-2e8e36157cff/image.jpeg" alt="">
디자인 시간에 직접 만들었던 명함으로 다른 학교의 친구들과 명함을 교환했었다.
우리학교를 제외하고는 전부 학교 자체의 틀?이 있었는지 학교 내에서는 비슷한 형식의 명함이었는데 우리 학교는 직접 디자인한 명함을 교환해서 더 특별했던 것 같다.</p>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/c9786bcd-0153-44d3-85c2-c16ad139282c/image.jpeg" alt="">
다른 학교 친구들과 교류하는 활동은 처음이기도 해서 즐거웠던 것 같다. 이번에는 해커톤이 아닌 하루만 진행해서 아이디어에 대해 토론만 하는 아이디어톤을 진행하였지만, 다음 번에는 다른 학교 친구들과 제대로 된 해커톤을 진행할 수 있다면 더 좋았을 것 같다. 아쉬움도 있었지만 좋은 경험 중 하나였다.</p>
<h2 id="여름방학">여름방학</h2>
<p>고등학교의 첫 여름방학은 많은 배움의 기회가 있었었다. </p>
<p>많은 선생님들께서 1학년 여름방학은 엄청엄청 중요하고, 1학기 때 못했어도 여름방학으로 더 잘하게 되는 학생도 있다며 여름방학의 중요성을 엄청나게 강조하셨었다. 그만큼 여름방학이 긴장되기도 하고 아무것도 못하고 끝나는 건 아닌가, 하며 걱정하기도 했었다.</p>
<p>하지만 걱정이 무색하게도 좋은 기회로 2학년 선배님의 멘토링과 전공동아리 방학 인턴으로 선정되어서 방학동안 리액트와 자바, 스프링, 이외 네트워크와 OS같은 CS에 대해서도 방학동안 공부해볼 수 있었다. </p>
<p>한달도 되지 않은 짧은 방학이었지만, 선배님들이 도와주신 덕에 빠른 성장을 겪을 수 있었던 것 같다. 물론 방학동안 엄청난 양의 과제로 방학이 방학이 아닌 것 같기도 했었지만...
<img src="https://velog.velcdn.com/images/saida_saju/post/fb069ce4-1bb7-445f-8245-7e855acfb347/image.jpeg" alt=""></p>
<h2 id="첫-해커톤">첫 해커톤</h2>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/d3c378ca-ed0e-424f-b6f6-c83c343ae259/image.jpeg" alt=""></p>
<p>2학기가 시작되고 나서, 처음으로 대회를 나간다고 할 수 있을 것이다. 마이다스 IT에서 주최한 청춘어람 해커톤이라는 대회에 나가게 되었는데 다른 마이스터고의 1학년 학생과 4명으로 팀을 맺게 되고, 엄청난 운으로 우리팀의 담당 멘토님은 우리학교의 졸업생 선배님이었었다.</p>
<p>bolt라는 ai를 활용하여 바이브 코딩을 통해 완성 결과를 만드는 해커톤이었는데, 자신이 원하는 결과를 만들어내려면 생각보다 프롬프트도 자세하고 세세하게 작성해야 했었다.</p>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/4da2be68-d207-4afd-9f08-eb5c3abd2946/image.jpeg" alt=""></p>
<p>해커톤을 하던 도중 개인 인터뷰를 하기도 했었다. 미리 질문들을 보여주셨는데 6개 중 일부만 질문할거라고 하셨다가 6개 전부 질문해주셔서 당황하기는 했지만, 인터뷰를 하는 활동도 재미있었다. 그리고 해커톤 도중에 마이다스에서 주는 식사와 간식들도 엄청 맛있었다.</p>
<p>수상은 하지 못해서 아쉬웠지만 5개의 팀 중에서 우리팀이 가장 사이도 좋고 즐겁게 해커톤을 진행할 수 있었던 것 같아서 좋은 경험이었다고 생각이 든다. </p>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/34dde0f6-924e-456d-b8bb-9e2fb244f07b/image.jpeg" alt=""></p>
<h2 id="전공동아리-인턴-활동">전공동아리 인턴 활동</h2>
<p>우리 학교는 2학년에 전공동아리라는 활동을 하는데 2학기에 각 전공동아리에는 일부 1학년 학생들을 전공동아리 인턴을 모집하기도 한다.</p>
<p>그중에서 난 파라독스라는 전공동아리에 인턴이 되었고 방학 때 선배들이 알려주셨던 것들을 기반으로 기존 프로젝트에 추가 기능을 담당하게 되었다. 인턴 팀은 프론트 3명과 백엔드 3명이 있었는데 프로젝트 개발은 거의 처음이라서 더 재미있었고 열심히 개발에 참여할 수 있었던 것 같다.</p>
<p>그리고 G-STAR에 하룻동안 부스 운영을 도우며 우리 전공동아리의 프로젝트를 홍보하고 시연해보는 활동도 진행할 수 있었다. 부스 운영은 처음 해보는 거라 실수할까봐 걱정되기도 했지만 선배님들이 잘 해주셔서 문제없이 끝낼 수 있었다.</p>
<h2 id="동계-캠프-해커톤">동계 캠프 해커톤</h2>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/ec1cfdc3-2524-46d9-8036-500adc8d3ab1/image.jpeg" alt=""></p>
<p>12월 29일부터 31일까지 학교에서는 동계캠프로서 해커톤을 진행했었다.
2학년 선배님 2명과 1학년 2명이서 팀을 이루었는데, 디자인과 프론트 역할을 맡게 되었다. 짧은 기간 내에 프로젝트를 완성해내야해서 힘들었지만 빠르고 효율적으로 코드를 짜보는 경험이 즐거웠다.
<img src="https://velog.velcdn.com/images/saida_saju/post/3f1caf35-b183-474a-a68a-337837475573/image.png" alt=""></p>
<h2 id="프로젝트들">프로젝트들...</h2>
<h3 id="quez">QUEZ</h3>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/58aa2c31-c2dd-4a0c-8178-21e3cbba3fdb/image.png" alt=""></p>
<p>QUEZ라는 과학 퀴즈 웹은 팀장과 디자인, 프론트엔드 부분 전체를 맡았다. 디자인 시스템을 직접 정하고 새로운 라이브러리도 사용해보기도 했었다. 처음에는 리액트와 자바스크립트를 사용하며 개발하다가 이후 타입스크립트와 이모션을 사용하는게 더 편하다는 걸 알게되어서 앞서 퍼블리싱 했던 부분을 버리고 새로 시작해서 개발하기도 했었다. </p>
<h3 id="너에게-닿기를">너에게 닿기를</h3>
<p>너에게 닿기를이라는 프로젝트는 말이 아닌 센서를 통해 전하는 진실이라는 주제로 만든 프로젝트이다. 네트워크 방과후 시간에 배운 라즈베리 파이를 이용하여서 프론트엔드와 디자인, 팀장 역할을 맡아서 프로젝트를 진행했었다.
<img src="https://velog.velcdn.com/images/saida_saju/post/1cd29199-0069-42b3-a517-368402fd17dd/image.png" alt="">
상위 6팀에 선정되어서 1학년 앞에서 프로젝트에 대해서 발표하고 시연까지 진행하게 되었는데, 이정도의 사람들 앞에서 발표하는 건 처음이라서 긴장되기도 했고, 시연을 하던 도중에도 테스트할 때 발생하지 않았던 오류들이 다수 발생하여서 정말 울고싶기도 했다.</p>
<p>그렇지만 최종적으로 네트워크 결과물 경진대회에 3위라는 결과를 얻을 수 있었고, 팀원과의 커뮤니케이션이 원활히 진행되고 팀원도 열심히 노력해줬기 때문에 이런 결과를 얻을 수 있었던 거라고 생각한다.</p>
<h2 id="이외">이외</h2>
<h3 id="영어말하기-대회">영어말하기 대회</h3>
<p>영어에 대해서 잘하는 편은 아니라서 수행평가인 100초 영어 말하기도 매번 아쉬운 결과를 받기도 했었다. 그만큼 긴장도 많이 했지만 친구들이랑 함께 열심히 준비한 만큼 최선을 다하려고 했었다.하지만, 내 차례에서 많이 버벅거리고 실수도 많이해서 아쉬웠었다.</p>
<p>최종적으로는 1학년팀 2위라는 결과를 얻게 되었다. 물론 결과는 만족스럽지만 조금 더 잘 했더라면 어떨까하는 생각이 든다. 조금씩 노력하다 보면 어렵다고 생각하는 영어도 점점 발전할 것이라고 생각한다.</p>
<h3 id="밴드부-활동">밴드부 활동</h3>
<p>이번에 처음으로 밴드부에 베이스로 들어오게 되었다. 전공과는 크게 상관 없었지만, 밴드부 부원들과 함께 합주를 하고 학예회 공연이나 버스킹을 하는 활동 등, 즐거운 활동이 많았었다. 그리고 2학기가 되어서는 밴드부 인스타 관리도 맡게 되고 버스킹 홍보 포스터도 만들게 되어서 재미있었다.</p>
<h3 id="마지막으로">마지막으로...</h3>
<p>1년동안 많은 걸 배우고 많은 성장을 이뤘다고 생각한다. 물론 제일 잘한다거나, 엄청 잘한다는 건 아니지만 이번 1년 동안은 내가 가장 열심히 성장하고 노력했던 해인 것 같다. 또 생각보다 많은 프로젝트에 디자인으로 참여를 많이하게 된 것 같았다.</p>
<p>곧 다가오는 겨울 방학에도 Next.js나 LLM, CS 등을 공부해볼 생각이고, 부끄럽지 않은 2학년이 되고 싶다. </p>
<p>열심히 노력해서 2학년이 되었을 때는 더 성장한 내가 되었으면 좋겠다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[C언어] 포인터에 대해서 알아보자]]></title>
            <link>https://velog.io/@saida_saju/C%EC%96%B8%EC%96%B4-%ED%8F%AC%EC%9D%B8%ED%84%B0%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90</link>
            <guid>https://velog.io/@saida_saju/C%EC%96%B8%EC%96%B4-%ED%8F%AC%EC%9D%B8%ED%84%B0%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90</guid>
            <pubDate>Mon, 23 Jun 2025 15:54:04 GMT</pubDate>
            <description><![CDATA[<p>두번째 시험 기간을 맞이하면서, 이해가 잘 되는 것 같다가도 어렵게 느껴지는 포인터에 대해서 다시 한 번 정리해 보기로 했다. 여태까지의 C언어는 그다지 어렵지는 않았었지만, 포인터를 다시 한 번 마주한 이후에는, 헷갈리는 부분이 많아졌다고 생각한다.</p>
<h2 id="🌟-우선-포인터란">🌟 우선 포인터란?</h2>
<p>C언어에서는 메모리 주소를 저장하는 변수인 포인터라는 자료형이 존재한다. 이런 포인터의 역할은 주소 저장을 통해 간접 참조를 하는 것이 특징이다. 예를 들자면,</p>
<pre><code class="language-c">int a = 10;
int *p = &amp;a; 
*p = 11;
printf(&quot;%d %p&quot;, *p, p); // 11, 메모리 주소값 출력</code></pre>
<p>이러한 코드에서, <code>int *p</code>는 포인터 변수이고, 변수 <code>a</code>의 메모리 주소를 저장하고 있다.
<code>*p=11;</code>이라는 코드에서는 <code>p</code>라는 포인터 변수가 변수 <code>a</code>의 메모리 주소를 가리키고 있기 때문에 <code>p</code>자체의 값이 아닌 변수 <code>a</code>의 값이 변하게 된다.</p>
<ul>
<li><code>&amp;</code>: 주소 연산자, 포인터에 주소값을 지정할 때나 <code>scanf</code>와 같은 입력을 받을 때에도 사용한다.</li>
<li><code>*</code>: 선언할 때의 *기호는 해당 변수가 포인터라는 것을 말해주고, 그 이후 변수를 사용하는 도중의 기호는 해당 포인터가 참조하는 주소의 값을 가리킬 때 사용한다.</li>
<li><code>%p</code>: 포인터의 주소값을 나타낼 때 사용하는 서식 문자이다.</li>
</ul>
<p>포인터는 메모리 주소 값을 저장하고 있기 때문에, 포인터가 가리키는 변수의 자료형과 무관하게 항상 4바이트의 크기를 가지고 있다. (32bit 컴퓨터 기준)</p>
<h3 id="️-널-포인터-상수-vs-0">⁉️ 널 포인터 상수 vs &#39;\0&#39;</h3>
<p>포인터 변수를 선언 한 이후에, 값을 할당하지 않으면 쓰레기 값이 들어가지만 안전하게 선언하기 위해서는 int <code>*p=NULL</code>와 같은 NULL값으로 초기화를 시켜줘야한다. 이런 <code>NULL</code>값은 공백문자(<code>&#39;\0&#39;</code>)와 몇 가지의 차이점이 있다.</p>
<p>우선 공백문자는 자료형이 <code>char</code>이며, 문자열의 마지막에 존재한다. 또한 널 포인터 상수와 달리 실제값이 존재한다.
<code>NULL</code>은 널 포인터 상수라고 불리며, 자료형은 <code>void</code>이다. 실제값이 존재하지 않고<code>&lt;stdio.h&gt;</code>와 같은 헤더파일이 존재해야 사용할 수 있다.</p>
<h2 id="🚃-배열과-포인터">🚃 배열과 포인터</h2>
<p>c언어에서 배열의 이름은 배열의 시작 주소를 가리키는 상수 포인터이다.</p>
<pre><code class="language-c">#include &lt;stdio.h&gt;
int main(void)
{
    int a[5]={1, 3, 5};
    if(a==&amp;a[0])
    {
        printf(&quot;True&quot;);
    } else
    {
        printf(&quot;False&quot;);
    }
    return 0;
}</code></pre>
<p>다음과 같은 코드를 실행해보면 결과값은 True가 나오며, 배열과 배열의 첫번째 값의 주소는 같다는 점을 알 수 있다.</p>
<p>포인터와 배열의 차이점은 포인터는 +/-, ++/--와 같은 증감연산자까지 사용이 가능하지만, 배열은 증감연산자를 사용하지 못해서 +/-만 사용할 수 있다. 증감 연산자를 사용할 시에는 원본의 값까지 변하기 때문에 배열에서는 사용할 수 없다.</p>
<p>c언어에서 배열은 row-major방식을 사용하기 때문에, 배열은 서로 이웃해 있다. 이를 이용하여 포인터에 값을 더하면 옆 칸의 값을 참조할 수 있다. 
<img src="https://velog.velcdn.com/images/saida_saju/post/5c66730e-29a9-405d-9c37-d643bbcde6fb/image.jpg" alt="">
위처럼 int배열에서는 각 값의 주소가 4byte씩 차이가 나는데,<code>Arr</code>배열의 첫번째 값의 주소를 가지고 있는 포인터 변수에서 1을 더하면, 1001이 아닌 1003이 된다. 하지만 이는 배열의 자료형에 따라 유동적으로 바뀐다. (만일 char형 배열이였다면 p+1 =&gt; 1001)</p>
<h3 id="🤯-포인터-배열과-배열-포인터">🤯 포인터 배열과 배열 포인터</h3>
<p>포인터 배열과 배열 포인터, 이름부터 서로 비슷하지만 자세히 알아보면 많은 차이점을 알 수 있다.</p>
<p>우선 포인터 배열은 포인터를 모아놓은 배열, 주소값을 모아둔 배열이다. <code>ex) int* num[]={1, 2, 3};</code></p>
<pre><code class="language-c">char *ptr[3]={&quot;dog&quot;, &quot;cat&quot;, &quot;lion&quot;};
printf(&quot;%s\n&quot;, *(ptr+2)); // lion
printf(&quot;%c\n&quot;, *(*(ptr+1)+1); // a</code></pre>
<p>여기서 <code>ptr</code>은 3개의 문자열의 주소를 가리키는 포인터를 담는 배열이다. -&gt; <code>ptr[0]</code>은 dog의 주소, <code>ptr[1]</code>은 cat의 주소... 이런 식으로 주소를 가리키게 된다. </p>
<ul>
<li><code>*(ptr+2)</code>는 배열의 시작인 dog의 주소에서 2를 더해, 3번째 값인 <code>lion</code>이 출력된다.</li>
<li><code>*(*(ptr+1)+1)</code>은 안쪽 괄호에서부터, <code>*(ptr+1)</code>은 cat의 값을 불러오고 그 다음 +1을 하면, cat의 첫번째의 +1한 값이므로 cat의 두번째 글자인 a를 불러온다.</li>
</ul>
<p>이러한 포인터 배열의 장점은 2차원 배열과 달리 필요한 부분만 사용할 수 있어서, 공간 낭비가 줄어든다.</p>
<p>반면에 배열 포인터는 하나의 배열을 가리키는 포인터라고 할 수 있다.</p>
<pre><code class="language-c">int arr[3] = {10, 20, 30};
int (*p)[3]; 
p = &amp;arr;

printf(&quot;(*p)[0] = %d\n&quot;, (*p)[0]); // 10
printf(&quot;(*p)[1] = %d\n&quot;, (*p)[1]); // 20
printf(&quot;(*p)[2] = %d\n&quot;, (*p)[2]); // 30</code></pre>
<p>포인터 <code>p</code>는 <code>arr</code>의 전체 배열을 가리키고 있다.<code>(*p)[0]</code>과 같은 형식을 사용하면 각 배열의 값을 가져올 수 있고, <code>p[0][i]</code>은 <code>(*p)[i]</code>와 같다.</p>
<p>C언어의 핵심이라고 할 수 있는 포인터에 대해서 정리해보았지만, 포인터는 공부하면 공부할 수록 어렵기도 하고 재미있기도 한 것 같다. 그렇기 때문에 오늘도 C언어에 대해서 한 걸음 더 나아갈 수 있었던 것 같다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[React] 리액트를 시작해보자]]></title>
            <link>https://velog.io/@saida_saju/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%8B%9C%EC%9E%91%ED%95%B4%EB%B3%B4%EC%9E%90</link>
            <guid>https://velog.io/@saida_saju/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%8B%9C%EC%9E%91%ED%95%B4%EB%B3%B4%EC%9E%90</guid>
            <pubDate>Sun, 22 Jun 2025 05:07:05 GMT</pubDate>
            <description><![CDATA[<p>리액트에 대해서 리액트는 무엇인지와 어떻게 설치하는지를 공부할 것이다.</p>
<p>우선 리액트는 오픈소스 자바스크립트 라이브러리이다. MPA(Multi Page Application)인 HTML/CSS/JS와 달리, 단일 페이지로 구성된 SPA(Single Page Application) 형식을 지니고 있다. 따라서 반응성이 좋고, UI가 유연하다는 장점이 있다.</p>
<p>또한 리액트는 컴포넌트 기반으로 UI를 독립적인 컴포넌트로 나눠 재사용성이 뛰어나다. 가상돔(virtual DOM)을 사용하므로 실제 DOM 조작을 최소화하여 성능을 최적화한다. 단방향 데이터 흐름으로 데이터 변화를 예측 가능하게 관리한다는 특징들이 있습니다.</p>
<p>리액트 네이티브를 사용하면 모바일 앱 개발도 가능하다. (mac에서는 ios와 안드로이드 개발 모두 가능하다)</p>
<h2 id="리액트-시작하기">리액트 시작하기</h2>
<p>원래 리액트 앱을 실행하기 위해서는 웹팩이나 바벨 같은 것들을 설정해야하기 때문에 시간이 오래 걸렸지만, CRA방식을 사용한다면 바로 시작할 수 있다.</p>
<p>바벨은 일부 브라우저에서는 최신 버전의 자바스크립트 문법을 지원하지 않기 때문에, 최신 버전의 자바스크립트 문법을 구형 브라우저에서도 사용할 수 있도록 변환 해준다. 추가로 웹팩은 복잡한 파일들을 압축해서 최적화해주는 역할을 한다.</p>
<p>우선 리액트를 시작하기 위해서는 node.js를 설치해야한다. 리액트는 프론트엔드 라이브러리이지만, npm을 사용하고, node.js기반의 프로젝트 세팅 도구를 사용하기 때문에 node.js가 필요하다.</p>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/1bc12b2a-1eea-4063-b2d3-2cb311b94572/image.png" alt="">
node.js 설치가 완료된 상태라면, 위와 같이 터미널에서 리액트를 설치할 폴더로 들어간 후에 <code>npx create-react-app [프로젝트 폴더명]</code> 명령어를 통해 설치할 수 있다.</p>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/48861639-9091-4d2d-9d5b-8199b943f998/image.png" alt="">
그 후엔 다음과 같은 파일이 생성되고, 이중에서 <code>src</code>는 소스코드들이 저장되는 폴더이다.</p>
<p><img src="https://velog.velcdn.com/images/saida_saju/post/c17aff3b-1cd2-4f49-9978-b41c3c108c19/image.png" alt=""></p>
<p>그 다음 터미널에서, <code>cd [프로젝트 폴더명]</code> 명령어를 통해 해당 파일 위치로 이동한 다음 <code>npm start</code> 명령어를 입력하면 해당 파일이 실행된다.</p>
<p>여기까지 리액트가 무엇인지와, 리액트를 설치하는 방법과 실행하는 방법을 알아보았다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[JavaScript] var을 사용하지 않는 이유]]></title>
            <link>https://velog.io/@saida_saju/JavaScript-var%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0</link>
            <guid>https://velog.io/@saida_saju/JavaScript-var%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0</guid>
            <pubDate>Sun, 01 Jun 2025 03:59:51 GMT</pubDate>
            <description><![CDATA[<p>자바스크립트에서 변수의 종류로는 var, let, const 세가지가 있지만 실제로 사용하는 것은 let과 const로 두가지밖에 없다. 자바스크립트를 공부하다 보면서, var을 사용하지 않는 이유가 궁금했기 때문에 이에 대해서 정리해 보았다.</p>
<h2 id="️var과-let-const의-차이점">⁉️var과 let, const의 차이점</h2>
<pre><code class="language-javascript">function scopeTest() {
  if (true) {
    var a = &quot;var&quot;;
    let b = &quot;let&quot;;
  }

  console.log(a); // ✅ 출력: &quot;var&quot;
  console.log(b); // ❌ ReferenceError: b is not defined
}

scopeTest();</code></pre>
<p>var은 함수 스코프(function scope)로, 함수 전체에서 접근할 수 있지만 if, for 같은 블록을 구분하지 않는다.
let은 블록 스코프(block scope)로, 해당 블록&#39;{}&#39; 안에서만 접근할 수 있다.</p>
<pre><code class="language-javascript">var name = &quot;자바를 잡아&quot;;
var name = &quot;자바스크립트&quot;; // 기존의 name을 덮어씀
console.log(name); // ✅ 출력: &quot;자바스크립트&quot;

let age = 17;
// let age = 18; // ❌ SyntaxError: Identifier &#39;age&#39; has already been declared</code></pre>
<p>var은 같은 스코프 안에서 변수를 중복 선언하는 것이 가능하지만 let과 const의 경우에는 같은 스코프 안에서 변수 중복 선언이 불가능해서 var에 비해 안전하다. 하지만 의도치않게 변수가 덮어씌여지는 것을 방지하기 위해 var은 사용되지 않는다.</p>
<p>호이스팅 시에 var은 undefined로 초기화 되지만, let과 const의 경우 호이스팅은 되지만 일시적 사각지대로 선언 전에 접근할 시 에러가 발생한다.</p>
<h2 id="☎️-호이스팅">☎️ 호이스팅</h2>
<blockquote>
<p>💡 호이스팅이란 자바스크립트에서 변수나 함수의 선언이 코드 최상단으로 끌어 올리는 현상을 뜻한다.</p>
</blockquote>
<pre><code class="language-javascript">console.log(name); // undefined
var name = &quot;햄스터&quot;;</code></pre>
<p>해당 코드는 변수의 선언이 우선적으로 읽히게 되며, <strong>값을 할당하는 순서</strong>는 그대로 있기 때문에 <code>undefined</code>가 출력된다.</p>
<pre><code class="language-javascript">console.log(age); // ❌ ReferenceError!
let age = 20;</code></pre>
<ul>
<li>let과 const는 호이스팅은 가능하지만, 선언하기 전에는 절대 접근하지 못한다.</li>
<li>선언하기 전, 접근하지 못하는 기간을 <strong>일시적 사각지대(TDZ)</strong>라고 한다.</li>
<li>이 덕분에 const와 let은 var에 비해 엄격하며 실수를 방지에 도움이 된다.</li>
</ul>
<h2 id="🌟-결론">🌟 결론</h2>
<p>let과 const는 스코프, 중복 선언, 호이스팅 측면에서 더 안전하고 직관적이기 때문에, 현재 대부분의 개발자는 var 대신 let과 const만을 사용한다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[JavaScript] 변수와 변수 스코프]]></title>
            <link>https://velog.io/@saida_saju/JavaScript-%EB%B3%80%EC%88%98%EC%99%80-%EC%9E%90%EB%A3%8C%ED%98%95</link>
            <guid>https://velog.io/@saida_saju/JavaScript-%EB%B3%80%EC%88%98%EC%99%80-%EC%9E%90%EB%A3%8C%ED%98%95</guid>
            <pubDate>Sat, 31 May 2025 14:33:01 GMT</pubDate>
            <description><![CDATA[<h1 id="변수">변수</h1>
<blockquote>
<p>💡 JavaScript에서 변수는 값을 저장하는 공간이며, 선언 방식에 따라 값의 변경 여부가 달라진다.</p>
</blockquote>
<h2 id="1-변수의-종류">1. 변수의 종류</h2>
<p>1) <strong>var</strong> - 변경 가능한 값이며, let이 생기면서 사용하지 않게 된다.
2) <strong>let</strong> - var과 같이 변경 가능한 값을 저장하는 변수이다.
3) <strong>const</strong> - 변수에 할당한 값을 변경할 수 없지만, 객체나 배열을 const로 선언한 경우 내부 속성이나 요소는 변경할 수 있다.</p>
<h2 id="2-변수의-선언">2. 변수의 선언</h2>
<pre><code class="language-javascript">let name = &quot;변수&quot;;
console.log(name);</code></pre>
<ul>
<li><code>[변수형] [변수명];</code> 형식으로 변수를 선언할 수 있으며, 선언 한 후 값을 초기화하지 않을 경우에는 초기값으로 undefined가 들어간다.
  하지만 const의 경우, 값을 선언한 이후에 바꿀 수 없기 때문에 값을 초기화하지 않고 변수를 선언할 수 없다.</li>
<li><code>[변수형] [변수명] = [초기화 값];</code>라는 코드로 변수를 선언하면서 값을 초기화할 수 있다.</li>
<li>여기서 <code>console.log();</code>는 브라우저의 개발자 도구인 console창에 소괄호 안의 값을 출력하는 함수이다.</li>
</ul>
<h2 id="3-변수-네이밍-규칙">3. 변수 네이밍 규칙</h2>
<p>javascript에서 변수의 이름을 짓는 규칙으로는 카멜 케이스(camelCase)방식을 주로 사용하는 것이 좋다.</p>
<pre><code class="language-javascript">let testName = &#39;camelCase&#39;;
let test_name = &#39;snake_case&#39;;
let TestName = &#39;PascalCase&#39;;</code></pre>
<p>1) 카멜 케이스 방식은 첫번째 단어를 소문자로 쓴 다음, 다음 단어의 첫번째 글자를 대문자로 작성하는 방식이며, javascript에서 많이 사용되는 방식이다.
2) 스네이크 케이스 방식은 공백 부분을 언더바로 채우는 방식이지만, javascript에서는 거의 사용하지 않는다.
3)파스칼 케이스 방식은 카멜 케이스와 비슷하지만, 첫번째 단어의 첫글자도 대문자를 사용한다. 주로 클래스 이름에서 사용된다.</p>
<h2 id="4-변수-스코프">4. 변수 스코프</h2>
<blockquote>
<p>💡 스코프란 변수와 함수가 접근 가능한 <strong>범위</strong>이다.</p>
</blockquote>
<p><code>var</code>은 함수스코프를 가지며, <code>const</code>와 <code>let</code>은 블록 스코프를 가진다.</p>
<h3 id="🌎전역-스코프global-scope">🌎전역 스코프(Global scope)</h3>
<p>전역 변수로 선언하며, 코드에 어디서든 참조할 수 있다.</p>
<h3 id="📚함수-스코프function-scope">📚함수 스코프(Function scope)</h3>
<p>지역 변수로, 함수 내에서만 사용할 수 있다.</p>
<h3 id="📓블록-스코프block-scope">📓블록 스코프(Block scope)</h3>
<p>let과 const를 활용해 선언된 변수는 블록 레벨 스코프를 가지며, 이는 {중괄호} 내에서만 사용할 수 있다.</p>
<h3 id="⛓️스코프-체인scope-chain">⛓️스코프 체인(Scope chain)</h3>
<pre><code class="language-javascript">function overF() {
  let val = &quot;Hello World&quot;;
  function inF() {
    console.log(val); //내부 함수에서 외부 함수의 변수 접근
  }
}</code></pre>
<p>javascript에서는 함수가 중첩될 수 있으므로 내부 함수는 외부 함수의 변수에 접근할 수 있는데, 이를 스코프 체인이라고 한다.</p>
<h3 id="💔스코프의-주요-규칙">💔스코프의 주요 규칙</h3>
<h4 id="1-안쪽-스코프에서-바깥쪽-스코프에-접근할-수-있지만-반대는-불가능하다">1) 안쪽 스코프에서 바깥쪽 스코프에 접근할 수 있지만, 반대는 불가능하다</h4>
<p>안쪽 스코프에서 선언한 식별자는 바깥쪽에서 접근할 수 없다.
반대로 바깥쪽 스코프에 존재하는 식별자는 안쪽 스코프에서 접근⭕️</p>
<h4 id="2-스코프는-중첩-가능하다">2) 스코프는 중첩 가능하다</h4>
<h4 id="3-전역-스코프와-지역-스코프">3) 전역 스코프와 지역 스코프</h4>
<p>가장 바깥쪽 스코프를 전역 스코프(global scope)라고 하며, 그 이외는 지역 스코프(local scope)라고 한다.</p>
<h4 id="4-지역-변수는-전역-변수보다-우선-순위가-높다">4) 지역 변수는 전역 변수보다 우선 순위가 높다</h4>
<p>전역 스코프에서 선언한 변수는 전역 변수, 지역 스코프에서 선언한 변수는 지역 변수다.
지역 변수는 전역 변수보다 우선 순위가 더 높다</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[CLI 기본 명령어 정리]]></title>
            <link>https://velog.io/@saida_saju/CLI-%EB%AA%85%EB%A0%B9%EC%96%B4-%EC%A0%95%EB%A6%AC</link>
            <guid>https://velog.io/@saida_saju/CLI-%EB%AA%85%EB%A0%B9%EC%96%B4-%EC%A0%95%EB%A6%AC</guid>
            <pubDate>Wed, 09 Apr 2025 14:11:51 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="🍥-clicomand-line-interface">🍥 CLI(Comand-Line Interface)</h2>
<p>CLI는 가상 터미널 또는 터미널을 통해 사용자와 컴퓨터가 상호작용을 하는 방식을 뜻한다. 글자를 이용해서 컴퓨터에 명령을 내리는 형식이다.</p>
</blockquote>
<hr>
<h2 id="cli-기본-명령어">CLI 기본 명령어</h2>
<h3 id="🌟-pwdprint-working-directory">🌟 pwd(print working directory)</h3>
<p>터미널의 현재 위치를 알려주는 명령어, 현재 작업중인 디렉토리의 절대 경로를 출력</p>
<pre><code>pwd</code></pre><p>디렉토리는 컴퓨터에서 파일을 분류하기 위해 사용하는 공간으로 폴더와 같은 역할이다.</p>
<h3 id="🌟ls">🌟ls</h3>
<p>list의 약자, 특정 디렉토리의 포함된 파일이나 하위 디렉토리 리스트를 출력</p>
<pre><code>ls [-옵션]</code></pre><h4 id="💫ls명령어의-옵션">💫ls명령어의 옵션</h4>
<ul>
<li>ls -a : 숨겨진 파일이나 디렉토리를 포함한 모든 리스트를 출력</li>
<li>ls -l : 리스트에 자세한 내용까지 포함하여 출력<em>권한, 하위 파일 수, 크기, 수정일 등</em></li>
<li>ls -R : 하위 디렉토리의 리스트까지 출력</li>
<li>ls -r : 리스트를 내림차순으로 정렬하여 출력</li>
<li>ls -h : 파일 크기를 편리하게 나타내어 출력</li>
<li>ls -S : 리스트를 파일 크기 순으로 정렬하여 출력</li>
</ul>
<p>옵션을 두 개 이상 조합하여 사용할 수 있으며 옵션의 순서는 영향을 끼치지 않는다.</p>
<h3 id="🌟cdchange-directory">🌟cd(change directory)</h3>
<pre><code>cd [파일명]</code></pre><ul>
<li>마우스와 아이콘이 없는 CLI에서 dir와 dir를 이동하는 명령어이다.</li>
</ul>
<p><em>ex) Download라는 폴더로 이동하려면 cd Download라는 명령어를 사용하면 된다.</em></p>
<pre><code>cd ~</code></pre><ul>
<li>&#39;<strong>~</strong>&#39;는 home directory를 뜻하며 cd와 ~사이를 띄워서 입력해야한다.</li>
<li>터미널의 어디에서든 cd ~를 사용하면 home dir로 이동할 수 있다.</li>
<li>cd ~는 cd만 입력해도 정상적으로 실행된다.</li>
</ul>
<pre><code>cd ..</code></pre><ul>
<li>&#39;<strong>..</strong>&#39;은 parent directory를 뜻하며, parent dir은 상위 dir이다.</li>
<li>최상위 dir인 root dir에서는 cd .. 명령어를 입력해도 위치가 바뀌지 않는다.</li>
</ul>
<h4 id="💫-cd-명령어">💫 cd 명령어</h4>
<ul>
<li><strong>cd /</strong> 명령어는 root directory로 이동한다.</li>
<li><strong>cd .</strong>은 현재 dir로 이동하는 명령어이며, file이나 dir을 복사할 때 유용하게 사용된다.</li>
<li>cd 명령어 뒤에 파일의 주소를 복사하여 이동하는 것도 가능하다.</li>
</ul>
<h3 id="🌟mkdirmake-directory">🌟mkdir(make directory)</h3>
<p>디렉토리를 만들 때 사용하는 명령어이다.</p>
<pre><code>mkdr [폴더명, 경로]</code></pre><h4 id="💫옵션">💫옵션</h4>
<ul>
<li>디렉토리 안에 디렉토리를 추가하려면 -p 옵션을 사용한다.</li>
<li>디렉토리에 권한을 추가하려면 -m 옵션을 사용한다.</li>
<li>디렉토리를 생성할 때 메세지를 출력하려면 -v 옵션을 사용한다.</li>
</ul>
<h3 id="🌟-touch">🌟 touch</h3>
<pre><code>touch [파일명]</code></pre><p>새로운 파일을 생성할 수 있으며, 이미 해당 파일명의 파일이 존재할 경우엔 해당 파일의 액세스 시간과 수정 시간을 현재 시간으로 수정한다.</p>
<h4 id="🌟파일이-존재하지-않을-경우-경고-표시">🌟파일이 존재하지 않을 경우 경고 표시</h4>
<pre><code>touch -c [파일명]</code></pre><p>-c 옵션을 사용할 경우엔, 파일이 존재하지 않을 경우 새 파일을 생성하지 않고 경고를 출력한다. 파일을 업데이트 하고 싶을 경우에 사용한다.</p>
<h4 id="💫특정-날짜와-시간으로-수정">💫특정 날짜와 시간으로 수정</h4>
<pre><code>touch -t [[CC]YY]MMDDhhmm [파일명]</code></pre><p>특정 날짜와 시간으로 파일을 수정할 수 있다.</p>
<h4 id="💫여러-개의-파일-생성">💫여러 개의 파일 생성</h4>
<pre><code>touch [파일명1] [파일명2] [파일명3]</code></pre><h3 id="🌟mv">🌟mv</h3>
<pre><code>mv [파일명] [폴더명/파일명]
mv [파일명] [변경될 파일명]</code></pre><p>파일이나 디렉토리의 위치를 옮기거나 이름을 바꿀 때 사용한다.
mv 명령어는 복사가 아니기 때문에 원본 파일은 사라지고 새 위치에서만 존재하게 되며, 이름을 바꾸는 것도 현재의 위치로 옮기는 것으로 처리된다.</p>
<h4 id="💫-옵션">💫 옵션</h4>
<ul>
<li>-i : 같은 이름의 파일이 있으면 덮어쓸지 물어본다.</li>
<li>-f : 강제로 덮어쓰기를 진행한다.</li>
<li>-n : 기존 파일이 있으면 덮어쓰지 않는다.</li>
<li>-v : 무슨 일이 일어나는지 자세히 보여준다. (verbose 모드)</li>
</ul>
<h3 id="🐱catconcatenate">🐱cat(concatenate)</h3>
<pre><code>cat [옵션] [파일명]</code></pre><p>파일 내용을 출력하거나, 여러 파일을 이어붙일 때 사용하는 명령어이다.</p>
<h4 id="1-여러-파일-이어보기">1. 여러 파일 이어보기</h4>
<pre><code>cat test1.txt test2.txt</code></pre><p>test1.txt파일과 test2.txt파일을 이어서 보여준다.</p>
<h4 id="2-파일-합치기">2. 파일 합치기</h4>
<pre><code>cat test1.txt &gt; test2.txt</code></pre><p>두 파일을 합쳐서 test2.txt로 보여준다. 대신 기존의 test1.txt파일은 사라진다.</p>
<h4 id="🐾-옵션">🐾 옵션</h4>
<ul>
<li>-n : 출력되는 줄마다 번호를 붙여준다.</li>
<li>-b : 비어있지 않은 줄에만 번호를 붙여준다.</li>
<li>-E : 줄 끝에  $를 표시해서 줄바꿈을 확인할 수 있다.</li>
<li>-T : tab을 ^I로 변환해서 보여준다.</li>
</ul>
<p>cat은 작은 텍스트 파일을 확인할 때 좋지만, 큰 파일은 빨리 지나가기 때문에 확인하기 힘들다. 이럴 때는 less나 more명령어와 함께 사용하는 것이 좋다.</p>
<h3 id="💾-cpcopy">💾 cp(copy)</h3>
<pre><code>cp [옵션] [원본 대상] [복제될 파일명]</code></pre><p>파일이나 디렉토리를 복사할 때 사용하는 명령어이다.</p>
<h4 id="📼-옵션">📼 옵션</h4>
<ul>
<li>-r, -R : 재귀적으로 디렉토리 전체를 복사한다.</li>
<li>-i : 덮어쓰기 전에 물어본다.</li>
<li>-f : 강제로 덮어쓴다. (force)</li>
<li>-u : 수정된 파일만 복사한다. (update)</li>
<li>-v : 복사 과정 보여주기 (verbose)</li>
<li>-p : 권한, 시간, 정보 유지해서 복사한다.</li>
<li>--parents : 경로 구조를 유지한 채 복사한다.</li>
</ul>
<h3 id="🔧-rmremove">🔧 rm(remove)</h3>
<pre><code>rm [옵션] [파일/디렉토리]</code></pre><p>파일이나 디렉토리를 삭제할 때 사용하는 명령어이다.</p>
<h4 id="🔍-옵션">🔍 옵션</h4>
<ul>
<li>-r : 디렉토리와 그 안에 있는 모든 내용을 삭제한다.</li>
<li>-f : 경고 없이 삭제한다.</li>
<li>-i : 삭제할 때마다 삭제 여부에 대해 물어본다.</li>
<li>-v : 삭제되는 항목을 출력한다. (verbose)</li>
</ul>
<h4 id="💥-자폭-명령어">💥 자폭 명령어</h4>
<pre><code>rm -rf /</code></pre><p>해당 명령어는 시스템 전체 삭제로 사용하지 않는게 좋다.</p>
<h3 id="📂-rmdir">📂 rmdir</h3>
<pre><code>rmdir [옵션] [디렉토리 이름]</code></pre><p>빈 디렉토리를 삭제하는 명령어이며 디렉토리가 안 비어있다면 에러가 발생한다.</p>
<ul>
<li>--ignore-fail-on-non-empty
폴더가 비어있지 않더라도 에러 메세지 없이 종료된다. (삭제❌)</li>
<li>-p : 폴더가 비어있을 경우 상위 폴더까지 삭제한다.</li>
</ul>
<h3 id="☃️--help">☃️ -help</h3>
<pre><code>명령어 --help</code></pre><p>해당 명령어에 대한 설명을 출력한다.
자주 쓰는 옵션 위주로 요약해주기 때문에 더 자세한 정보가 필요할 경우에는 man 명령어를 사용한다.</p>
]]></description>
        </item>
    </channel>
</rss>