<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>dev_miiing</title>
        <link>https://velog.io/</link>
        <description>Hi</description>
        <lastBuildDate>Mon, 11 Nov 2024 08:28:03 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>dev_miiing</title>
            <url>https://velog.velcdn.com/images/dev_miiing/profile/294fbae5-bf52-4141-ab4f-0c542ab3db85/image.jpg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. dev_miiing. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/dev_miiing" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[type script & ES6 공부 정리]]></title>
            <link>https://velog.io/@dev_miiing/type-script-ES6-%EA%B3%B5%EB%B6%80-%EC%A0%95%EB%A6%AC</link>
            <guid>https://velog.io/@dev_miiing/type-script-ES6-%EA%B3%B5%EB%B6%80-%EC%A0%95%EB%A6%AC</guid>
            <pubDate>Mon, 11 Nov 2024 08:28:03 GMT</pubDate>
            <description><![CDATA[<p>2024-11-11
오늘 공부한 내용을 정리해보자.
크게 세가지를 했다.</p>
<ol>
<li>react 개발환경 설정</li>
<li>type script 개념</li>
<li>es6(async) 개념</li>
</ol>
<p>다 너무 생소한 개념들이라 정리 안하면 까먹을 것 같다.</p>
<h1 id="react-개발환경-셋팅">REACT 개발환경 셋팅</h1>
<p>우선 리액트 실습환경을 만들기 위해서는 반드시 node.js가 설치되어있어야 한다.
Visual Studio Code 에디터도 필수</p>
<p><a href="https://nodejs.org/en">https://nodejs.org/en</a></p>
<p>nodejs는 위 사이트에 들어가서 다운로드 받으면 된다.
난 모두 이미 설치되어있어서 이 부분은 패스...</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/3ee9220a-7772-44f4-8159-4066f0225490/image.PNG" alt="">
(설치 유무 확인 방법 ↑)</p>
<p>간편하게 바탕화면에 폴더를 생성해보자
바탕화면 아무 곳에다 &#39;shift+우클릭&#39; &gt; &#39;여기에 powershell창 열기&#39;</p>
<p>npx create-react-app 테스트폴더명
<img src="https://velog.velcdn.com/images/dev_miiing/post/4aae7b4e-f5b0-42c1-8616-2879181dc1e9/image.PNG" alt="">
(파워셀 화면 ↑)</p>
<p>폴더 만들었으면 VScode에서 오픈폴더 &gt; 테스트폴더명 클릭
<img src="https://velog.velcdn.com/images/dev_miiing/post/887ae699-4a8e-4bec-b12b-6f2dcff1dc65/image.PNG" alt=""></p>
<p>이렇게 실습환경 셋팅은 완료
리액트는 오늘은 셋팅까지만 하는걸로🤟</p>
<h1 id="typescript-기초">TypeScript 기초</h1>
<p>바탕화면에 typeScript 실습용 폴더를 하나 만들고 vscode에서 열어보자.
index.ts, tsconfig.json 두 파일을 만들고
tsconfig.json엔 아래처럼 기본값 간단하게 입력만
(tsconfig.json 파일은 TypeScript 컴파일러(tsc)가 코드를 어떻게 컴파일할지 설정하는 파일)</p>
<pre><code>{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es5&quot;,
    &quot;module&quot;: &quot;commonjs&quot;
  }
}</code></pre><blockquote>
<p><strong>TypeScript란?</strong>
JavaScrip 더 엄격하게 관리할 수 있게 해주는 프로그래밍 언어
JavaScript는 타입에 자유로워서 어떤 타입의 값이든 할당할 수 있지만, TypeScript는 타입을 엄격하게 체크하여 타입 안정성을 높이고 개발 중 발생할 수 있는 오류를 사전에 방지</p>
</blockquote>
<p>예시를 들어보자
<img src="https://velog.velcdn.com/images/dev_miiing/post/9cfe16b6-9f9f-4eff-b99d-4a382cd3d0d1/image.PNG" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/1a211131-3f40-434a-86e0-57bfa3a45b7e/image.PNG" alt="">
이렇게 string으로 선언해놓고 숫자를 할당하려고 하면 오류가 나는데 어디에서 왜 오류가 났는지 상세히 알려준다</p>
<p>js에서는 어떻게 돌아가는지 확인하기 위해 터미널에 아래 명령어를 쳐보자</p>
<p>(터미널 단축키는 shift+ctrl+` )</p>
<h3 id="tsc--w">tsc -w</h3>
<p>· TypeScript 파일을 JavaScript 파일로 컴파일하는 명령어
· TypeScript 파일(.ts)을 JavaScript 파일(.js)로 변환
· 정리히면, TypeScript 파일을 컴파일해서 JavaScript 파일 생성해줌
<img src="https://velog.velcdn.com/images/dev_miiing/post/e13d98fe-ead9-423a-8a6b-612de5133da8/image.PNG" alt="">
아, 만약에 이 단계에서 명령어를 쳤는데 권한 어쩌고 오류가 발생한다면 아래와 같이 해보자
<img src="https://velog.velcdn.com/images/dev_miiing/post/bf412297-752f-41a9-b565-8bc16ad71f97/image.png" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/15c0c8db-d01a-4223-aa6a-28a6bd0de9d4/image.PNG" alt="">
.js 파일이 만들어졌고 .ts와는 다르게 오류가 발생하지 않는 것을 확인할 수 있다.
자 이제 TypeScript에 대해 조금 감이 생겼으니, 실습을 더 해보자
<img src="https://velog.velcdn.com/images/dev_miiing/post/c3ec32c9-eac2-4aaa-baff-367d2fa1d1d6/image.PNG" alt="">
위 예시 중 &#39;이름&#39;을 보면 string | number 이렇게 선언을 하면 두 가지 타입을 다 받을 수 있게 되어있다.</p>
<blockquote>
<p><strong>string | number</strong>
&#39;이름&#39; 변수의 타입을 string 또는 number로 지정
| (또는) 연산자를 사용해 여러 타입 허용 가능
즉, 이 변수에는 string 타입이나 number 타입 중 어느 한 타입의 값을 할당할 수 있다.</p>
</blockquote>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/e3c8d137-ed1d-4509-b3a8-cda4c59ceda8/image.PNG" alt="">
타입은 키가 4가지가 있지만 &#39;하나없는객체&#39;를 보면 키가 3가지만 있다
그럼에도 오류가 안나는 이유는 키4를 선언할때 준 설정들 덕분이다.</p>
<blockquote>
<p><strong>키4 속성의 세부 설명</strong>
· 키4?: ?는 선택적(optional) 속성을 의미. 키4가 있어도 없어도 된다.
· number[]: 키4의 값으로 숫자 배열만 허용
· | undefined: 키4가 undefined가 될 수도 있음을 허용</p>
</blockquote>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/3c0b76d5-bf3c-497f-b52f-860ffcd76734/image.PNG" alt="">
위처럼 상속도 가능하다.</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/120100be-4693-4dd5-bf93-e804338f9bf5/image.PNG" alt="">
함수의 return값으로 문자열을 주었으니 &#39;함수객체2&#39;처럼 number를 return하려고 하면 에러가 난다</p>
<h1 id="es6">ES6</h1>
<p>ES6는 ECMAScript 2015(또는 ECMAScript 6)라는 JavaScript의 새로운 버전 이름이다.
ES6에서 도입된 주요 기능들로는 let, const, 화살표 함수, Promise(비동기 작업을 쉽게 다룰 수 있도록 도와주는 객체)등이 있다.</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/eece8b9b-3861-43ed-9b94-ab31a6ed9ee6/image.PNG" alt="">
oldVersion과 literals을 보자.
말그대로 옛날에 사용하는 방식처럼 콘솔을 찍을 수도 있겠지만, 커서를 두고 `을 누르면 ${}이 인식되며 이렇게 값을 넣는 것이 더 편리하다.</p>
<p>그 외에도 화살표함수는 원라인 함수처럼 한줄로 표현이 가능하다.</p>
<p>오브젝트 객체처럼 기존에는 속성에 접근하려면 다음과 같이 &#39;오브젝트.이름&#39;처럼 객체를 통해 직접 접근해야했다.
ES6의 기능 중 하나인 <strong>객체 구조 분해 할당(destructuring assignment)</strong>을 이용하면 객체에서 특정 속성을 변수로 쉽게 추출할 수 있게 해준다.
더 간결해지고 코드의 가독성이 높아진다.</p>
<p>그 다음 배열을 살펴보자. const [사과, 바나나, ...파인애플] = 배열; 이 부분, 이를 배열 구조 분해 할당이라고 한다.
&#39;배열&#39;의 첫 번째와 두 번째 요소를 각각 사과, 바나나라는 변수에 할당하고, 나머지 요소들을 파인애플이라는 변수에 배열 형태로 할당한다.
나머지 연산자(...)는 배열의 나머지 요소를 모두 모아 하나의 배열로 할당한다.
여기서는 [3, 4, 5, 6, 7]이 파인애플에 배열로 저장된다.
이름은 아무거나 과일 이름으로 정했지만 이름이 무엇이든 배열의 순서대로 저장된다.
배열 구조 분해 할당에서는 순서를 건너뛸 수 없다. 순서에 기반해 구조 분해 할당이 이뤄지기 때문이다.
만약 빈자리를 사용해 특정 요소를 무시하려면</p>
<pre><code>const 배열 = [1, 2, 3, 4, 5];
const [ , 두번째, , 네번째] = 배열;

console.log(두번째); // 2
console.log(네번째); // 4</code></pre><p>이런 식으로 해야하기에 제한이 심하다.</p>
<p>객체 구조 분해 할당과 배열 구조 분해 할당 개념에 대해 한번 더 정리하고 가자.</p>
<blockquote>
<p><strong>객체 구조 분해 할당 (Destructuring Assignment for Objects)</strong>
 객체의 속성 값을 쉽게 변수에 추출할 수 있도록 해줌.</p>
</blockquote>
<pre><code>const 오브젝트 = { 속성1: 값1, 속성2: 값2 };
const { 속성1, 속성2 } = 오브젝트;</code></pre><blockquote>
<p><strong>배열 구조 분해 할당 (Destructuring Assignment for Arrays)</strong>
배열의 요소를 순서대로 변수에 할당해줌.</p>
</blockquote>
<pre><code>const 배열 = [값1, 값2, 값3];
const [변수1, 변수2, 변수3] = 배열;</code></pre><p>나머지 연산자 ...을 사용해 배열의 나머지 요소를 하나의 배열로 저장 가능
<img src="https://velog.velcdn.com/images/dev_miiing/post/213e70e3-0863-4de8-b0b8-373573002631/image.PNG" alt="">
let new오브젝트 = { ...오브젝트 };는 나머지 연산자 (...)를 사용해 오브젝트의 모든 속성을 펼쳐 {}안에 넣는다. 기존 오브젝트 객체와 동일한 속성을 가진 new 오브젝트 객체가 생성된다.
let new배열 = [...배열];도 마찬가지
원본 배열을 변경하지 않고 새로운 배열을 만들 수 있다.
이렇게 새롭게 복사하는 이유는 원시 데이터와 참조형 데이터의 저장 방식 차이 때문이다.
원시데이터는 변수에 값 자체가 저장되며, 참조형 데이터 타입은 변수에 주소(참조값)가 저장된다.
나머지 연산자를 사용해 복사하는 것은 참조형 데이터의 참조값을 공유하지 않고 새로운 복사본을 생성하여, 원본을 안전하게 보호하고 독립적으로 수정할 수 있게 해준다.</p>
<blockquote>
<p>** .map() 메서드**
.map() 메서드는 배열의 각 요소를 변환하여 새로운 배열을 반환.
즉, 새로운 배열이 저장된 return값 존재.
(위 예시처럼 return이 없을 경우 undefined 배열)
<strong>.forEach() 메서드</strong>
배열의 각 요소에 대해 단순히 반복 작업 수행.
각 요소를 순회하며 특정 작업을 수행할 뿐, 새로운 배열을 반환하지 않는다.</p>
</blockquote>
<p>비동기 처리와 관련있는 promise, async/await에 대해 실습해보자.
우선 promise.js의 이름으로 만든 테스트 파일을 보며 promise를 실습해보자.
<img src="https://velog.velcdn.com/images/dev_miiing/post/8704b169-95a9-4e6e-ae1f-24b4ed97bcd2/image.PNG" alt="">
promiseTest 변수에 new Promise((resolve, reject) =&gt; { } 함수를 할당했다.
이 함수는 promise객체를 생성하고 인자로 resolve와 reject(promise생성자 내부에 내장된 함수들) 두개의 콜백 함수를 받는 쪽으로 전달한다.
즉 비동기 작업 결과에 따라 호출될 수 있도록 마련된 함수인 것이며 <strong>콜백함수로서의 resolve와 reject</strong>를 더 알아보자.</p>
<blockquote>
<p><strong>· resolve</strong>: 비동기 작업이 성공적으로 완료되었을 때 호출할 함수. 작업이 성공했을 때 Promise의 상태를 &quot;fulfilled&quot;(성공)로 변경하며, resolve()에 전달된 값은 .then()으로 연결된 후속 작업으로 전달됨.
<strong>· reject</strong>: 비동기 작업이 실패했을 때 호출할 함수. Promise의 상태를 &quot;rejected&quot;(실패)로 변경하며, reject()에 전달된 값은 .catch()로 연결된 후속 작업으로 전달됨.</p>
</blockquote>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/45258ccb-3b06-4639-876d-ad03640839c9/image.png" alt="">
프로미스 처리 흐름 - 출처 : MDN</p>
<p>pending 상태는 promise 객체의 고유한 특징 중 하나이다. _<strong>비동기 작업의 결과가 아직 결정되지 않은 상태 즉, 대기 상태</strong>_라고 보면 된다.
비동기 작업을 수행하는 동안 작업의 결과가 어떻게 될지 모르기 때문에, 이후에 발생할 성공(resolve)이나 실패(reject) 상태 전환을 기다리는 단계인 것이다.</p>
<p>비동기 작업을 처리하는 promise.
이 promise를 좀 더 직관적이고 읽기 쉽게 만들어주는 async/await에 대해 알아보자.</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/8498cf10-19b0-4195-b417-dd9d4eff02bb/image.PNG" alt="">
여기서의 promiseTest는 promiseTest라는 이름의 함수를 선언하고 promise를 반환하게 한다.</p>
<p>async 키워드로 비동기 함수를 정의하고, await 키워드로 Promise가 완료될 때까지 기다리며 resolve가 호출되면 비동기함수에 성공 값이 할당되고, reject가 호출되면 catch 구문으로 넘어간다. Promise가 실패할 경우 에러가 이 구문에서 처리된다.</p>
<p>위에서 살펴본  promise.js 파일의 Promise와 거의 동일하나, promise.js에서는  .then()과 .catch()를 사용해 Promise를 처리하지만, async_await.js에서는 async/await와 try/catch로 처리한다.
async/await 방식은 동기적인 코드처럼 작성할 수 있어 가독성이 좋다고 한다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[SQLD 1일의 전사 성공 BUT 비추 후기]]></title>
            <link>https://velog.io/@dev_miiing/SQLD-1%EC%9D%BC%EC%9D%98-%EC%A0%84%EC%82%AC-%EB%B9%84%EC%B6%94-%ED%9B%84%EA%B8%B0</link>
            <guid>https://velog.io/@dev_miiing/SQLD-1%EC%9D%BC%EC%9D%98-%EC%A0%84%EC%82%AC-%EB%B9%84%EC%B6%94-%ED%9B%84%EA%B8%B0</guid>
            <pubDate>Fri, 27 Sep 2024 09:09:26 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/4d388741-74d1-4788-970e-f3dfba224906/image.png" alt=""></p>
<p>회사 + 방통대 + 여러 자격증 동시 준비 +
잠은 포기해도 노는 건 절대 포기 못함
의 바쁜 시즌 속 SQLD 시험이 잇엇습니다..</p>
<p>선택과 집중을 위해
①자격증이 나오는거여야함
②CS 관련 공부여야함
③실무에 도움되어야함
이 세가지가 아니면 우선순위에서 배제했는데</p>
<p>SQLD는 정처기가 있다면 그다지 메리트가 없는 자격증이라 생각했고, 실무나 학교 공부에 도움되는지 모르겠어서 이걸 따야겠다는 생각은 안했었어요
그런데 SQLD 따고 2년 뒤 갱신하면 만료기간없이 쭉- 쓸 수 있다길래
일단 원서접수는 해놨었음</p>
<p>이때 합격후기들 찾아보니 노랭이랑 유튜브에 무슨 선생님 유명하다고는 했는데, 책을 살려면 이때 샀어야했는데 결국 한권도 안 샀었어용ㅠㅠ</p>
<p>모 그렇게 잊고살다가 시험일이 다가옴</p>
<p>시험장소 어디었는지도 기억이 안나서 접수내역을 찾아보니...
<img src="https://velog.velcdn.com/images/dev_miiing/post/8f3f8a2f-a923-4333-8fb2-4555146d5f52/image.png" alt=""></p>
<p>5만원이나 하는 시험이엇다고??
깜짝 놀라서 1트에 합격해야겠다고..이틀전날 결심함..^^</p>
<p>저처럼 욕심은 있어서 신청해놨다가, 현생에 치여서 뒷전으로 미뤄두고,, 직전에 금액보고 놀라서 모든 수단과 방법을 동원하여 1트에 합격해야겠다고 결심하신 분들께
제 1일의 전사 성공후기를 들려드릴게요...</p>
<p>정석으로 개념을 제대로 이해하면서 공부하고싶다 하시는 분은 뒤로가기를 눌러주세요..
저처럼 공부하면 남는게 없어요..
<img src="https://velog.velcdn.com/images/dev_miiing/post/7c7c3821-b78c-4397-8ed8-21a61ff0f64b/image.jpg" alt="">
하나도 없어요 정말 비추해요...</p>
<p>딱 과락 면하고(40점 이상) 평균 60점을 맞추기 위한 공부..^^</p>
<h2 id="직장인-1일의-전사-매우-주관적인-후기">직장인 1일의 전사 매우 주관적인 후기</h2>
<p>우선 저는 올해 정처기 준비중이었어서 3월인가 4월에 필기를 합격한 상태였어요
정처기는 몇년전에 NCS기준으로 개편된건 아시죠? 그래서 나중에 시험 준비 미리 댕겨서 한다 생각하고 이때 꼼꼼하게 봐두긴했어요</p>
<p>무튼 SQLD가 난이도있는 시험은 아니니 반년전 기억을 더듬어가며 어떠케든 합격은 되지 않을까 싶긴했어요</p>
<p>무튼 벼락치기 전 제 상태는 노랭이 이런 유명한 시험 관련 책은 한권도 못 삿고, 정처기 필기 과목 중에 SQL이 있어 겸사겸사 아주 기본적인 개념은 있던 상태였어요</p>
<p>명령문 풀로 쓰라고 하면 못 쓰지만 SELECT문이나 UPDATE문이 무엇을 하는지는 아는정도..?
아예 SELECT문도 모르겠다 하는 쌩노베이스 아닌 이상은 괜춘할듯..</p>
<p>왜 이렇게 서론이 길지
무튼 기본적인 개념은 있다는 전제하에</p>
<p>1)토요일 시험이더라고요? 금요일 퇴근 후 편의점에 들러 핫식스를 삽니다
그리고 시험장소와 가장 가까운 스터디카페를 가서 12시간+4시간 총 16시간을 끊어요
즉 <strong>밤샘</strong>하라는 소리..8ㅅ8</p>
<p>2)sqld가 24년도에 개정되었다곤 하는데 크게 변한건 없는거 같아 24년 이전에 누군가 요약정리해서 올려준 파일을 줍줍해 이것만 <strong>3회독</strong> 봅니다</p>
<p><a href="https://drive.google.com/file/d/14c7loXc1rjxEcVBp7UKWDq2NOzN-mE6P/view?pli=1">https://drive.google.com/file/d/14c7loXc1rjxEcVBp7UKWDq2NOzN-mE6P/view?pli=1</a></p>
<p>3)유튜브에 강의가 많던데 벼락치기인 저는 24년도 기준 핵심요약과 최근 기출문제풀이 강의만 돌려봐야겠다 싶어서
<a href="https://www.youtube.com/@hdatalab">https://www.youtube.com/@hdatalab</a>
이 쌤을 선택해서 들었어요
<img src="https://velog.velcdn.com/images/dev_miiing/post/8a9f4b51-cfe9-402e-a76f-94f602412aa4/image.png" alt="">
여기서 첫번째 재생목록인 <strong>SQLD_NEW</strong>만 여러번 돌려봤습니다</p>
<p>처음에 1.8배속에서 2배속으로 보고
그 다음에 너무 쉬운 문제나 너무 어려운 문제들 스킵해가면서 2.5배속에서 3배속으로 봤어요</p>
<p>혹시 유튜브 배속 조절을 어떻게 하는지 궁금한 분이 계실까봐 링크 남겨요</p>
<p><a href="https://chromewebstore.google.com/detail/video-speed-control/aejbmaihhlajphnlcdbojkjbdckkfdki?authuser=0&amp;utm_source=app-launcher">https://chromewebstore.google.com/detail/video-speed-control/aejbmaihhlajphnlcdbojkjbdckkfdki?authuser=0&amp;utm_source=app-launcher</a></p>
<p>저는 평소에 인강 2배속은 기본으로 해놓고 듣는 도파민에 중독된 사람이라..
<em><del>(네 저는 칭구들이랑 대화할때도 말 좀 느리게 하는 애 잇으면 &#39;미안한데 1.5배속으로 해줄수잇어?&#39; 하는 소시오패스입니다)</del></em></p>
<p>이 방법이 진짜 1도 도움 안되고 이러케할바엔 그냥 최소 3일전부터 보겠다 이 미친사람아 하실 수도 잇어요
그냥 이런 사람도 있다는 정도로만 참고하시고 정 급하신 도파민 중독자분들만 저처럼 함 해보세요..
운이 좋으시다면 60은 넘을거에요 ㅠㅠ</p>
<p>다시 한번 말하지만 이건 비추후기입니다
시간은 없고 마음은 급한 분들께 최대한의 효율을 드리고자 하는..</p>
<p>그럼 20000</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/b5f101bb-cf04-42b2-af7d-b078a6c4eed2/image.jpg" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/912fd79c-fb7a-49ad-9e46-7f1697758985/image.png" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[🚀 웹 개발의 기초, JSP 처리 과정🌐]]></title>
            <link>https://velog.io/@dev_miiing/%EC%9B%B9-%EA%B0%9C%EB%B0%9C%EC%9D%98-%EA%B8%B0%EC%B4%88-JSP-%EC%B2%98%EB%A6%AC-%EA%B3%BC%EC%A0%95</link>
            <guid>https://velog.io/@dev_miiing/%EC%9B%B9-%EA%B0%9C%EB%B0%9C%EC%9D%98-%EA%B8%B0%EC%B4%88-JSP-%EC%B2%98%EB%A6%AC-%EA%B3%BC%EC%A0%95</guid>
            <pubDate>Tue, 13 Aug 2024 16:52:50 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/5973335e-604b-46ae-b5d6-2d96b6463630/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/a5792cdd-8664-4b0a-ad4a-05a8b981964d/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/b161800f-0594-4cd1-aada-8b8d9e75580f/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/0c155cd7-21cf-4a0e-9957-b8c416ab7dfd/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/6417b538-200f-4fed-bef3-39bed34ee2f5/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/37c6aaa4-9240-49a8-b9f4-a75a93d21758/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/eeeb9dff-cfbb-442d-b351-455ec7bb8b90/image.png" alt=""></p>
<h1 id="jsp-처리-과정">JSP 처리 과정</h1>
<p>① URL 입력
사용자가 브라우저에 URL을 입력하고, 이동 버튼을 누릅니다.</p>
<p>② IP 주소로 변환
도메인 네임 서버(DNS)가 입력한 도메인(URL)을 IP 주소로 변환합니다.</p>
<p>③ JSP 페이지 요청
브라우저가 IP 주소와 포트 번호를 통해 서버에 요청을 보냅니다.</p>
<p>④ 요청 분석 및 전달
웹 서버가 JSP 파일을 JSP/서블릿 컨테이너로 전달합니다.
(JSP 파일은 이 단계에서 서블릿으로 변환됩니다.)</p>
<p>⑤ 컴파일
JSP 파일이 서블릿(자바 파일)으로 변환됩니다. 그런 다음 이 자바 파일이 컴파일되어 클래스 파일(.class)로 변환됩니다.
(필요한 경우, 이 과정에서 데이터베이스와의 연동도 처리됩니다.)</p>
<p>⑥ 서블릿 로딩
생성된 클래스 파일이 서블릿 컨테이너에 적재됩니다.</p>
<p>⑦ 실행 결과 전송
서블릿이 HTML을 생성하고, 이를 웹 서버가 클라이언트에게 전송합니다.</p>
<p>⑧ 결과 페이지(HTML) 전송
클라이언트 브라우저가 HTML을 받아 화면에 표시합니다.</p>
<p>⑨ HTML 분석 및 화면 구성
브라우저가 HTML 태그를 분석하여, 최종 화면을 사용자에게 보여줍니다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[Window 객체(feat.JS)]]></title>
            <link>https://velog.io/@dev_miiing/Window-%EA%B0%9D%EC%B2%B4feat.JS</link>
            <guid>https://velog.io/@dev_miiing/Window-%EA%B0%9D%EC%B2%B4feat.JS</guid>
            <pubDate>Tue, 30 Jul 2024 07:35:05 GMT</pubDate>
            <description><![CDATA[<p>alert나 confirm 함수를 쓸때 앞에 window가 생략되어있단 사실, 알고계셨나요?
일단 난 몰랐음ㅠ</p>
<p>회사에서 뭐 확인해보라해서 찾다가 알게된 window객체</p>
<p>기초개념이 너무 부족하다
구멍이 슝슝 뚫려있어서 밑빠진 독에 물 붓는 느낌인 요즘..
반복&amp;복습만이 살 길!!
<img src="https://velog.velcdn.com/images/dev_miiing/post/31cbd6ae-3a79-4987-aa5a-c4f473600f2f/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/9129d0cc-a7c9-40b0-ae6c-4c2a5e6d5eea/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/fcfded9f-d4f2-4d41-baad-7cb7b9cae766/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/6a7cb1fb-232c-4ecf-89cd-a884cdb8e557/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/531cd7b1-c302-4117-9a39-3a3ee7c188ba/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/528c66d5-fd37-4716-a04b-d710c1b7deb6/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/97b90fc3-d972-4e7f-87b7-b308c5d31e40/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/e855af4e-a5b6-48c2-8435-324e4cc4d628/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/521dfe14-6ef7-46db-9564-9549babb365f/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/4378950a-3b23-40dd-9916-a684dbb3909a/image.png" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[REACT 쌩기초 (3)]]></title>
            <link>https://velog.io/@dev_miiing/REACT-%EC%8C%A9%EA%B8%B0%EC%B4%88-3-qkhik2k7</link>
            <guid>https://velog.io/@dev_miiing/REACT-%EC%8C%A9%EA%B8%B0%EC%B4%88-3-qkhik2k7</guid>
            <pubDate>Tue, 07 Nov 2023 02:28:56 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/f9e1c1b9-642b-4e48-b772-55c13d93bc98/image.jpg" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/19e05ce0-be53-401e-bf19-0214df65c3f4/image.jpg" alt=""></p>
<p>state의 형태인 let [a,b] = useState(’초기값’), 이 꼴은 js의 Destructuring문법에서 따왔다고 한다. 나온 김에 참고용으로 정리해본다.</p>
<p>※참고용
JS에서 Destructuring 문법이란? 객체나 배열을 분해하여 그 요소들을 개별 변수에 할당하는 문법.
변수를 더 간결하게 정의하고 데이터를 추출할 수 있다. 중괄호 &#39;{}&#39;를 사용해 객체의 속성을 추출하고 새로운 변수에 할당함</p>
<p>let num = [1, 2];
let a = num[0];
let b = num[1]; 이렇게 쓸 수 있지만
let [a, b] = [1, 2]; 이렇게 오른쪽과 왼쪽의 형태를 맞춰주면 array 안에 있는 자료들을 각각 변수로 빼주는 문법이라 함</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/aa9f6793-361e-4753-bf08-ce03ac21de20/image.jpg" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/8bfdfb56-7343-44fb-a189-b155345d530a/image.jpg" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/51f7ab3a-aa8a-48d6-be08-5d9e85970890/image.jpg" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/d854e69f-8add-4185-a7cf-2677142b4a86/image.jpg" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/601fcf16-ed2d-4e2e-a554-f22a4833cec6/image.jpg" alt=""></p>
<p>카드뉴스에 추가는 못했지만, map도 알아두자..html 반복생성하려면 map() 쓰면된다!!
JS에선 모든 array 뒤에 map 붙일 수 있는데 콜백함수도 써야함
[어레이].map(function(){})
왼쪽 array 자료만큼 내부코드 실행, return을 array에 담아줌, function(a,i)처럼 파라미터 2개까지 작명 가능</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[PHP 실습 - 코드 작성부터 공유까지(VS Code, Git)]]></title>
            <link>https://velog.io/@dev_miiing/PHP-%EC%8B%A4%EC%8A%B5-%EC%BD%94%EB%93%9C%EC%9E%91%EC%84%B1%EB%B6%80%ED%84%B0%EA%B3%B5%EC%9C%A0%EA%B9%8C%EC%A7%80</link>
            <guid>https://velog.io/@dev_miiing/PHP-%EC%8B%A4%EC%8A%B5-%EC%BD%94%EB%93%9C%EC%9E%91%EC%84%B1%EB%B6%80%ED%84%B0%EA%B3%B5%EC%9C%A0%EA%B9%8C%EC%A7%80</guid>
            <pubDate>Tue, 07 Nov 2023 00:43:42 GMT</pubDate>
            <description><![CDATA[<p>vscode로 php공부를 하려고 생각해보니 하는 김에 git에 올려 잔디 좀 심어야겠더라고요🌱</p>
<p>부캠에서 프로젝트를 한번 해봤어서 대충 큰 흐름은 알지만 나는 아직 쭈구리+쌩초보니까 나온김에 간단하게 핵심만 정리해봅시다</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/6d6f6be1-8d1a-4171-b7c9-066fd4d309ba/image.png" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/8c03a322-ad21-4396-b51f-1597c416dacb/image.png" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/bd9fead3-a822-4515-ae74-2a25e9670098/image.png" alt=""></p>
<p>①git init: 특정 디렉토리를 Git 저장소로 초기화하며, 이 과정에서 .git 디렉토리가 생성되어 Git에 의해 관리되는 모든 정보가 여기에 저장됩니다.</p>
<p>②git remote add origin [URL]: 원격 저장소를 추가합니다. 여기서 origin은 원격 저장소의 기본 이름이고, [URL]은 원격 저장소의 주소입니다.</p>
<p>③git add [파일명]: 하나 또는 여러 변경된 파일을 스테이징 영역에 추가합니다.</p>
<p>④git commit -m &quot;커밋 메시지&quot;: 스테이징 영역에 있는 변경사항을 로컬 저장소에 커밋합니다.</p>
<p>⑤git push origin main: 로컬 저장소의 커밋을 원격 저장소(GitHub)에 업로드합니다. 여기서 main은 커밋을 푸시할 브랜치의 이름입니다.</p>
<p>원격 저장소에서 최신 커밋을 로컬로 가져와 현재 브랜치와 병합하는 pull(fetch+merge) 등은 협업 시 중요한 개념들이지만 나 혼자 공유용으로 하는거니 걍 이정도만 알아둡시다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[PHP AtoZ ]]></title>
            <link>https://velog.io/@dev_miiing/PHP-AtoZ</link>
            <guid>https://velog.io/@dev_miiing/PHP-AtoZ</guid>
            <pubDate>Mon, 06 Nov 2023 12:43:32 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/6b411191-7d1f-4e54-a556-116f7197daaa/image.png" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/401dddca-75aa-4ddf-85a8-0c7f071c4cd8/image.png" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/da8e3761-e51d-4e10-bdfc-fbb437f1144a/image.png" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/ae8bdcc1-aeab-4b44-a823-52fa111dbd92/image.png" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/6961f45a-a17e-4428-b0fa-05bfd8b64756/image.png" alt="">
주석 해제한 확장 기능들의 각 목적을 간단히 정리해봄..
extension=curl //웹 요청을 실행하기 위한 라이브러리
extension=ftp //FTP 프로토콜을 사용해 파일을 전송하거나 FTP 서버와 통신 수행
extension=fileinfo //파일의 타입·인코딩 결정(파일 업로드에 유용)
extension=mbstring //다양한 문자 인코딩 지원하는 문자열 관련 처리(다국어 사이트를 만들 때 필수)
extension=mysqli //MySQL과 통신을 위한 확장 기능(PHP에서 MySQL 사용하려면 활성화해야함)
extension=openssl //보안 연결을 위해 SSL과 TLS프로토콜 사용할 수 있게 해줌. HTTPS 요청을 처리하거나 암호화된 데이터를 송수신할 때 필요
<img src="https://velog.velcdn.com/images/dev_miiing/post/947f3cf4-198e-42b7-a33e-5b35619f3583/image.png" alt=""></p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/656d4800-6c73-414b-bc4b-87fec8b68403/image.png" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[JavaScript Array Methods Visualised👀✨]]></title>
            <link>https://velog.io/@dev_miiing/JavaScript-Array-Methods-Visualised</link>
            <guid>https://velog.io/@dev_miiing/JavaScript-Array-Methods-Visualised</guid>
            <pubDate>Tue, 26 Sep 2023 06:50:31 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/53bda5de-0413-4802-b989-290d82072697/image.jpg" alt=""></p>
<h2 id="push">#push</h2>
<p>push()
push(element1)
push(element1, element2)
push(element1, element2, /* …, */ elementN)
▶The element(s) to add to the end of the array.</p>
<h2 id="unshift">#unshift</h2>
<p>unshift()
unshift(element1)
unshift(element1, element2)
unshift(element1, element2, /* …, */ elementN)
▶The element(s) to add to the front of the array.</p>
<h2 id="pop">#pop</h2>
<p>pop()
▶Parameters : None
Return value : The removed element from the array; &#39;undefined&#39; if the array is empty
[The pop() method of Array instances removes ✔️the last element✔️ from an array and returns that element. This method changes the length of the array.]</p>
<h2 id="shift">#shift</h2>
<p>shift()
▶Parameters : None
Return value : The removed element from the array; undefined if the array is empty
[The shift() method of Array instances removes ✔️the first element✔️ from an array and returns that removed element. This method changes the length of the array.]</p>
<h2 id="map">#map</h2>
<p>map(callbackFn)
map(callbackFn, thisArg)
▶The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/5e5efe19-fded-4527-823e-6e65f5f99834/image.jpg" alt=""></p>
<h2 id="filter">#filter</h2>
<p>filter(callbackFn)
filter(callbackFn, thisArg)
▶The filter() method of Array instances creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.</p>
<h2 id="fill">#fill</h2>
<p>fill(value)
fill(value, start)
fill(value, start, end)
▶The fill() method of Array instances changes all elements within a range of indices in an array to a static value. It returns the modified array.
Value to fill the array with.
Zero-based index at which to start filling, converted to an integer.</p>
<h2 id="slice">#slice</h2>
<p>slice()
slice(start)
slice(start, end)
▶The slice() method of Array instances returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.</p>
<h2 id="concat">#concat</h2>
<p>concat()
concat(value1)
concat(value1, value2)
concat(value1, value2, /* …, */ valueN)
▶The concat() method of Array instances is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.</p>
<h2 id="flat">#flat</h2>
<p>flat()
flat(depth)
▶The flat() method of Array instances creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/2561180d-b549-4f55-89f7-fddebc1dc6b6/image.jpg" alt=""></p>
<h2 id="find">#find</h2>
<p>find(callbackFn)
find(callbackFn, thisArg)
▶The find() method of Array instances returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.</p>
<h2 id="findindexof">#findIndexOf</h2>
<p>findIndex(callbackFn)
findIndex(callbackFn, thisArg)
▶The findIndex() method of Array instances returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.</p>
<h2 id="some">#some</h2>
<p>some(callbackFn)
some(callbackFn, thisArg)
▶The some() method of Array instances tests whether ✔️at least one element✔️ in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false.</p>
<h2 id="every">#every</h2>
<p>every(callbackFn)
every(callbackFn, thisArg)
▶The every() method of Array instances tests whether ✔️all elements✔️ in the array pass the test implemented by the provided function. It returns a Boolean value.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[REACT 쌩기초 (3)]]></title>
            <link>https://velog.io/@dev_miiing/REACT-%EC%8C%A9%EA%B8%B0%EC%B4%88-3</link>
            <guid>https://velog.io/@dev_miiing/REACT-%EC%8C%A9%EA%B8%B0%EC%B4%88-3</guid>
            <pubDate>Fri, 22 Sep 2023 08:34:28 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/376d6291-8961-4f69-8a0e-64ebec72861e/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/aee37838-3ced-4341-843b-90cc79284ac2/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/1be28cff-d5f0-448e-934d-ed41004b0adf/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/5396b329-c7bb-433c-a26b-671377a63b89/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/94c9f299-139f-4dd6-aaa2-547dd04be3f7/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/40ee620a-210a-43ec-b1d9-58a636de03f1/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/4e3bf34f-9aab-4695-a96a-2f46d52e9963/image.jpg" alt=""></p>
<p>state의 형태인 let [a,b] = useState(’초기값’),
이 꼴은 js의 Destructuring문법에서 따왔다고 한다.
나온 김에 참고용으로 정리해본다.</p>
<p>※참고용
JS에서 Destructuring 문법이란?
객체나 배열을 분해하여 그 요소들을 개별 변수에 할당하는 문법.
변수를 더 간결하게 정의하고 데이터를 추출할 수 있다.
중괄호 &#39;{}&#39;를 사용해 객체의 속성을 추출하고 새로운 변수에 할당함</p>
<p>let num = [1, 2];
let a = num[0];
let b = num[1]; 이렇게 쓸 수 있지만
let [a, b] = [1, 2]; 이렇게 오른쪽과 왼쪽의 형태를 맞춰주면
array 안에 있는 자료들을 각각 변수로 빼주는 문법이라 함</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[Git Bash 오류 정리]]></title>
            <link>https://velog.io/@dev_miiing/Git-Bash-%EC%98%A4%EB%A5%98-%EC%A0%95%EB%A6%AC</link>
            <guid>https://velog.io/@dev_miiing/Git-Bash-%EC%98%A4%EB%A5%98-%EC%A0%95%EB%A6%AC</guid>
            <pubDate>Fri, 04 Aug 2023 05:43:05 GMT</pubDate>
            <description><![CDATA[<h3 id="git-클론-관련">git 클론 관련</h3>
<p><strong>명령어 순서</strong>
$ git remote add origin
$ git status
$ git add .
$ git commit -m &quot;커밋 로그&quot;
$ git remote -v
$ git push origin master(main)</p>
<p><strong>질문:</strong>
$ git add .명령어에 대해, 꼭 띄어쓰기 해야해?
<strong>답변:</strong>
git add . 명령어는 현재 디렉토리 내의 모든 변경 사항을 Staging Area에 추가하는 데 사용됩니다.
.은 현재 디렉토리를 의미하며, add와 . 사이의 공백은 필수입니다.
공백은 git add 명령과 인자인 현재 디렉토리를 구분하는 역할을 합니다.</p>
<p>따라서 git add .와 같이 공백을 포함하여 작성해야 합니다.
git add.와 같이 공백이 없는 형식으로 사용하면 제대로 작동하지 않으며 오류가 발생할 수 있습니다.</p>
<p>현재 디렉토리와 그 하위 디렉토리의 모든 변경 사항을 Staging Area에 올바르게 추가하려면 항상 git add .와 같이 공백을 사용하시기 바랍니다.</p>
<p><img src="https://velog.velcdn.com/images/dev_miiing/post/90fc7a18-5578-4e8c-9db2-f10b6fed14d0/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/97b8e2f1-4d39-4d78-ba85-c9a39828261c/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/9f897e08-b6d3-4cf5-9a4b-620b83bfd705/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/8c20497c-3220-4de3-8691-45c48a304c18/image.jpg" alt=""></p>
<p><strong>첫번째 git init오류</strong>
git init 명령어는 로컬 디렉토리를 Git 저장소로 초기화하는 명령어입니다.</p>
<p>만약 이미 다른 프로젝트의 클론을 받아온 상태이고 그 안에 .git 디렉토리가 있을 경우, 새로운 저장소로 만들기 위해 git init을 실행할 필요는 없습니다.</p>
<p>이미 클론한 프로젝트의 디렉토리 자체가 로컬 저장소로 인식되고 있습니다.</p>
<p>⇒이 경우 git init안해도 됨. 오히려 이걸 해서 git이 또 생겨서 저렇게 오류난듯</p>
<p>dobby안에 있는 .git삭제하고 했다가 오류 대잔치나고 싹 다 삭제하고 다시 차근차근 해봄</p>
<p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e545c7be-fae0-4fe8-bc29-0fb0826008f5/20230803_180310.png" alt="20230803_180310.png"></p>
<p>저장소에서 클론한 &quot;DobbyIsFree&quot; 폴더를 사용하고자 하는 것이기에 git init명령은 실행하지 않았으나,</p>
<p>git init는 안했지만 그럼에도 git add하면 오류가 났다</p>
<p>근데 아까랑은 다른, dobby 폴더 안에 다른 git 저장소가 중첩된 상태인데, 이 상태에서 원격저장소에 푸쉬하려하니 오류가 나는거</p>
<p>&quot;dobby&quot; 폴더 안에 있는 <strong><code>.git</code></strong> 디렉토리를 삭제해야 합니다. 이를 통해 중첩된 Git 저장소를 제거하고, &quot;dobby&quot; 폴더의 내용만 남기면 됩니다</p>
<p>(아까 삭제했다가 오류 대잔치….뒤에 곧 삭제하겠지만 여기서 도비 안이 git을 삭제했는데 아까 같은 오류가 안난걸보니 뭐 git init은 안하는게 맞긴한가보다,,)</p>
<p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c5f7a4f4-b4a0-45c0-b37c-a9972a2c4916/20230803_180450.png" alt="20230803_180450.png"></p>
<p>첫번째 경로 오류</p>
<p>$ cd /Desktop/Dobby Project/dobby
bash: cd: too many arguments</p>
<p>⇒공백이 포함된 경로로 이동할 때에는 경로를 큰 따옴표(&quot;)로 감싸주어야 합니다.</p>
<p>두번째 경로 오류
$ cd &quot;/Desktop/Dobby Project&quot;
bash: cd: /Desktop/Dobby Project: No such file or directory</p>
<p>⇒&quot;Dobby Project&quot; 폴더의 루트 디렉토리로 이동합니다. 경로를 정확하게 입력해주세요. 예를 들어, &quot;Desktop/Dobby Project&quot; 폴더가 바탕화면(Desktop)에 있는 경우 다음과 같이 입력하셔야 합니다
cd &quot;/c/Users/leemi/Desktop/Dobby Project”</p>
<p>경로 오류는 더 이상 없었고, add .도 잘됨</p>
<p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/48ac39c0-0e84-45b4-b045-affb2fb00786/20230803_180711.png" alt="20230803_180711.png"></p>
<p>순서래도 push origin main을 했으나 또 오류</p>
<p>블로그에서 알려줬던</p>
<p>$ git commit -m &quot;commit log&quot;</p>
<p>$ git remote -v</p>
<p>$ git push origin master(main)</p>
<p>이 순서에서 remote -v를 안해서 그런건가? 물어봤는데</p>
<p>“기본적으로 <strong><code>git push</code></strong> 명령어를 사용하실 때, 반드시 <strong><code>-u</code></strong> 또는 <strong><code>--set-upstream</code></strong> 옵션을 사용하여 푸시해야 할 브랜치를 설정해주어야 합니다. 이렇게 하지 않으면 이후에 <strong><code>git push</code></strong>를 실행할 때마다 브랜치 이름을 명시해야 합니다.</p>
<p>하지만 최근 버전의 Git에서는 <strong><code>git push</code></strong> 명령에 <strong><code>-u</code></strong> 옵션을 주지 않더라도 자동으로 upstream 브랜치를 설정하는 기능이 추가되어서, 최초 한 번만 명시적으로 <strong><code>-u</code></strong> 옵션을 주지 않고 푸시하면 이후에는 자동으로 설정됩니다.</p>
<p>따라서, 명시적으로 <strong><code>git remote -v</code></strong> 명령을 사용하여 원격 저장소 주소를 확인하는 것은 더이상 필요하지 않습니다. 이미 <strong><code>git push</code></strong>를 사용하여 원격 저장소 주소를 설정했기 때문에 다음부터는 <strong><code>-u</code></strong> 옵션 없이 <strong><code>git push</code></strong>만 실행하셔도 원격 저장소로 푸시가 가능합니다.</p>
<pre><code class="language-ruby">$ git add .
$ git commit -m &quot;commit log&quot;
$ git push origin main</code></pre>
<p>위의 명령어들을 순서대로 실행하시면, 변경 사항을 스테이징 영역에 추가하고 커밋을 생성한 후 원격 저장소인 &quot;origin&quot;의 &quot;main&quot; 브랜치로 푸시하게 됩니다. <strong><code>git remote -v</code></strong> 명령어는 이제 더이상 사용할 필요가 없습니다.”</p>
<p>그렇다함 ㅇㅇ 세상 좋아졌네</p>
<p>무튼</p>
<p>이 오류는 다른 원격 저장소나 다른 사용자가 같은 브랜치에 푸시를 해서 발생한 것으로 보입니다. 이럴 때에는 먼저 원격 저장소의 변경 사항을 로컬로 가져와서 통합한 후에 다시 푸시해야 합니다.</p>
<p>원격 저장소의 변경 사항을 로컬로 가져옵니다. <strong><code>git pull origin main</code></strong> 명령을 실행하면 됩니다. 이때, 만약 로컬에서 변경한 내용이 있을 경우에는 먼저 커밋을 진행하시는 것이 좋습니다.</p>
<p>git pull origin main</p>
<p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/df2cd30a-9a2e-4bb1-b218-1e8a2eeb095c/20230803_181131.png" alt="20230803_181131.png"></p>
<p>얘 말대로 pull했는데 오류가 남ㅋ</p>
<p>해당 오류는 원격 저장소와 로컬 저장소의 commit 기록이 상이하여, 서로의 commit 기록을 병합할 수 없다는 내용입니다. 이런 경우 <strong><code>git pull</code></strong> 명령을 사용할 때 <strong><code>--allow-unrelated-histories</code></strong> 옵션을 추가하여 병합을 허용하면 됩니다.</p>
<p>다음과 같이 진행해보세요:</p>
<pre><code class="language-css">git pull origin main --allow-unrelated-histories</code></pre>
<p>하니까 이상한 창 나옴</p>
<p>Git에서 병합(merge) 작업을 진행할 때, 커밋 메시지를 작성하도록 하는 에디터 창이라 함..</p>
<p>딱히 작성할 메시지는 없어서 <strong><code>Esc</code></strong> 키를 눌러 입력모드 빠져나온 후 <strong><code>:q!</code></strong> 입력해서 강제종료함(만약 메시지 쓸거면 i 눌러서 쓰고  <strong><code>Esc</code></strong> 키를 눌러<strong><code>:wq</code></strong>를 입력하여 Vim 에디터를 저장하고 종료 )</p>
<p>무튼 빠져나온 후 </p>
<p><img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9431978b-3a1a-404a-a938-e7b3ae266906/20230803_181518.png" alt="20230803_181518.png"></p>
<p>마지막 단계인 push 했더니 제대로 됨</p>
<p>근데 git가보니 예전 버전ㅋ</p>
<p>하 씨발..아무래도 계정 문제인듯 하다</p>
<hr>
<hr>
<h1 id="warning-adding-embedded-git-repository">warning: adding embedded git repository</h1>
<p>$ git add .
이건 뭐 별건 없고 .은 현재 디렉토리를 의미, add와 . 사이의 공백은 필수라 (공백은 git add 명령과 현재 디렉토리를 구분하는 역할)
유의해서 치면 됨</p>
<p>gpt 왈 &#39;폴더 안에 있는 .git 디렉토리 삭제해야 함. 중첩된 Git 저장소 제거하고, 폴더의 내용만 남기면 됨&#39;</p>
<h1 id="too-many-arguments--no-such-file-or-directory">too many arguments / No such file or directory</h1>
<p>삭제하려고 보니 경로 오류
컴퓨터 이 자식은 참 유두리가 없다. 눈치챙겨</p>
<p>bash: cd: too many arguments 공백 포함된 경로엔 큰 따옴표로 감싸주기 /
No such file or directory 폴더가 바탕화면(Desktop)에 있는 경우, cd &quot;/Desktop/Dobby Project&quot;이 아니라 cd &quot;/c/Users/leemi/Desktop/Project” 이런 식으로 써줘야함
무튼 찾아서 $ rm -rf &quot;project/ .git&quot;써서 지움</p>
<p>오류 해결 후 이제 끝이다 하면서 친 $ git push origin main
역시나 오류가ㅎ
다른 원격 저장소나 다른 사용자가 같은 브랜치에 푸시를 해서 발생한 것으로 보입니다. 이럴 때에는 먼저 원격 저장소의 변경 사항을 로컬로 가져와서 통합한 후에 다시 푸시해야 합니다.</p>
<p>git pull origin main
했는데 또 오류</p>
<p>뭐 대강 원격 저장소와 로컬 저장소의 commit 기록이 상이하여, 서로의 commit 기록을 병합할 수 없다는 내용
뒤에 명령어 더 추가해서
git pull origin main --allow-unrelated-histories
치니까 Git에서 병합(merge) 작업을 진행할 때, 커밋 메시지를 작성하도록 하는 에디터 창 나옴
Esc 키를 눌러 입력모드 빠져나온 후 :q! 입력해서 강제종료함(만약 메시지 쓸거면 i 눌러서 쓰고  Esc 키를 눌러:wq를 입력하여 Vim 에디터를 저장하고 종료 )</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[REACT 쌩기초 (2)]]></title>
            <link>https://velog.io/@dev_miiing/REACT-%EC%8C%A9%EA%B8%B0%EC%B4%88-2</link>
            <guid>https://velog.io/@dev_miiing/REACT-%EC%8C%A9%EA%B8%B0%EC%B4%88-2</guid>
            <pubDate>Wed, 02 Aug 2023 13:44:10 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/b2eb4891-879d-4898-9b25-2dac6c45397e/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/b2ac13a4-b0a0-481e-8781-7e3f51890803/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/c423d8f9-3b9e-4cc8-8180-c2df2597c207/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/d5aeeb02-2af9-443a-bb43-d39ef82852bd/image.jpg" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[REACT 쌩기초 (1)]]></title>
            <link>https://velog.io/@dev_miiing/REACT-%EC%8C%A9%EA%B8%B0%EC%B4%88-1</link>
            <guid>https://velog.io/@dev_miiing/REACT-%EC%8C%A9%EA%B8%B0%EC%B4%88-1</guid>
            <pubDate>Sun, 30 Jul 2023 08:36:00 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/75671b5b-dbff-4eff-a6d6-eda3a714da6f/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/65b540e0-87a8-4aa1-becf-8d83c37ea27f/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/a1fa7230-be7b-4326-9d3d-bf94f3562ac4/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/2c10c096-7753-4c05-8ba5-314ccd1aedc6/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/c713495b-385d-46e5-86d3-75188f63fb18/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/bb8153ad-4547-4847-bb13-a93ab9dfcac9/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/03dc5dd0-1dd3-450b-9377-6ca96bd026e0/image.jpg" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[공통키와 공개]]></title>
            <link>https://velog.io/@dev_miiing/%EA%B3%B5%ED%86%B5%ED%82%A4%EC%99%80-%EA%B3%B5%EA%B0%9C</link>
            <guid>https://velog.io/@dev_miiing/%EA%B3%B5%ED%86%B5%ED%82%A4%EC%99%80-%EA%B3%B5%EA%B0%9C</guid>
            <pubDate>Wed, 19 Jul 2023 17:04:07 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/ed365cc0-7413-4a01-8f61-f93d91c57f5d/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/9b7d3c38-dc9e-4ee1-8702-e3141e9559bc/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/6050b396-3875-4f8f-b536-33aef91b3926/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/98bfbf4f-bdf2-4d81-b7fb-370a9211d9fc/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/7a1e0904-49b3-45d5-8889-c9296667c97a/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/5180ce70-dca8-413e-9435-e327dca2293f/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/a422fd9b-ef59-40c1-ac02-10cff6a8b5db/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/4ef5f11c-b2c4-4b8b-9372-4ed776e3763e/image.jpg" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/b59943b8-3e04-4bb5-bc2f-4693d94c3a37/image.jpg" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[OSI 7 Layer & TCP/IP]]></title>
            <link>https://velog.io/@dev_miiing/OSI-7-Layer-TCPIP</link>
            <guid>https://velog.io/@dev_miiing/OSI-7-Layer-TCPIP</guid>
            <pubDate>Wed, 19 Jul 2023 17:00:07 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/bb1fffc6-44f9-44ab-b606-0e7477f51581/image.jpg" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[해시함수]]></title>
            <link>https://velog.io/@dev_miiing/%ED%95%B4%EC%8B%9C%ED%95%A8%EC%88%98</link>
            <guid>https://velog.io/@dev_miiing/%ED%95%B4%EC%8B%9C%ED%95%A8%EC%88%98</guid>
            <pubDate>Wed, 19 Jul 2023 16:58:06 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/dev_miiing/post/65bb9d8e-2273-4378-a991-ea108468a630/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/e0d8beff-7696-49b1-972e-1d21e9e3778c/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/65ac6389-ca1c-4a8c-8cd6-b5a1d276c4a4/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/4c64c148-2b0d-4d82-bf0f-36f64766ed27/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/0109d80d-f8f3-4e2d-994c-ee901e193aa4/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/2ab9d331-b70e-45d2-a5e5-6c426261104c/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/2abad8f7-f68f-465d-8472-12ac1d7bf97d/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/81b97bf1-98b9-41fb-98dc-03e72bf4d906/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_miiing/post/6a6a1f21-b391-478a-b162-45088860bea3/image.png" alt=""></p>
<h2 id="메시지-다이제스트">메시지 다이제스트</h2>
<p>메시지 다이제스트는 일종의 데이터에 대한 요약 정보로, 해시 함수 혹은 다이제스트 함수를 통해 생성되며 동일한 문서에 대해서는 같은 결과가 만들어지기 때문에 위변조 확인 등에 주로 활용된다</p>
<h2 id="해시">해시</h2>
<p>해시(hash)는 특수한 알고리즘을 사용해 데이터를 요약하는 것이다</p>
]]></description>
        </item>
    </channel>
</rss>