ungju 님의 블로그

커밋 내역 유지하면서 레포지토리 통합하기(git subtree)

ungju — Sun, 24 Aug 2025 19:59:56 +0900

문제 발생
해결
모아보기
회고

공부하면서 만든 여러 개의 폴더를 각 git으로 관리하다가 루트폴더를 만들어서 하위폴더로 관리해야하는 상황이 생겼다.

문제 발생

01-folder, 02-folder의 폴더가 각각 레포지토리로 관리되고 있고,
git init을 하지 않은 상태인 03-folder는 root/ 의 하위로 추적 및 관리가 되고 있는 상태였다.

`root`폴더를 원격으로 올리니 `03-folder`만 업데이트되는 문제가 발생!

원하던 폴더 구조와 깃 관리 상태(로컬의 상태와 동일)
root의 하위로 모두 업데이트

─── root/
    ├── 01-folder 
    ├── 02-folder 
    └── 03-folder

문제 발생 상태
로컬에선 위와 같은 구조였는데 원격저장소에 올리니,
root하위로 03-folder 만 올라감 ( ; _ ; )

─── root/ 
    └── 03-folder

─── 01-folder /* 개별 레포지토리로 관리되고 있음. */ 
─── 02-folder /* 개별 레포지토리로 관리되고 있음. */

해결

1️⃣ 새로운 `root-01`폴더 생성

/* root 폴더 생성 */
mkdir root-01

/* root 폴더로 이동 */
cd root-01

2️⃣ 깃 초기화

git init

root-01 초기화 상태 확인!

3️⃣ 가져와야 할 `01-folder`의 각 원격저장소 경로를 remote 등록

remote 주소 등록

git remote add <원격 이름> <원격저장소 URL>

git remote add folder01 <01-folder의 원격저장소 URL>

등록 후 remote 확인

git remote -v

4️⃣ 최신상태 반영하기

git fetch <원격 이름> <브랜치>

git fetch folder01 main

5️⃣ git subtree 명령어로 폴더 구조 통합

git subtree add --prefix=<폴더명> <원격 이름> <브랜치 이름>

git subtree add --prefix=01-folder folder01 main

6️⃣ 통합 후 필요없는 remote 삭제!

통합이 목적이었고, 해당 폴더는 더 이상 업데이트 될 계획이 없기 때문에 지워버렸다.

remote 지우기

git remote remove <원격 경로 이름>

git remote remove folder01

잘 지워졌는지 확인하기!

git remote -v

모아보기

1. 루트 폴더 생성 및 초기화

  mkdir root-01
  cd root-01
  git init

2. 원격 등록 → fetch → subtree 병합 -> (선택) 원격 삭제
(1) 원격 등록

git remote add folder01 <01-folder 원격 URL>

(2) 원격 최신 상태 가져오기

git fetch folder01 main

(3) subtree로 폴더 병합

git subtree add --prefix=01-folder folder01 main

(4) (선택) 원격 삭제

git remote remove folder01

3. `02-folder` 도 똑같이 반복!

캬캬 이러면 커밋 내역과 git graph 이력까지 모두 유지하면서 폴더 구조를 통합할 수 있다!

커밋 내역이 날아갈까봐 안타까웠는데 완저니 성공

‍ 회고

처음부터 폴더구조를 잘 계획했으면 이런 일이 일어나지 않았을 것이다.

평소에는 잘 일어나지 않을 바보같은 상황이었고 , 이런 일이 일어나지 않아야하겠지만!!

덕분에 안전하게 git 내역을 포함해 폴더를 병합하는 방법을 배웠으니 오히려 좋아

CLI 기초 명령어

ungju — Mon, 28 Apr 2025 15:14:36 +0900

CLI 란?

명령줄 인터페이스(CLI, Command Line Interface)라고 하며, 사용자는 키보드를 통해 텍스트 기반 명령어를 입력하고, 시스템은 결과를 텍스트로 반환한다.
쉽게는 파일 편집기에서 파일 생성, 파일 이동, 파일 삭제 등의 작업을 수행하는 것이라고 할 때 시각적으로 파일아이콘을 선택하고 이동, 삭제 시키는 것이 그래픽 유저인터페이스(GUI,Graphic User Interface)를 사용해 상호작용하는 것이고, CLI는 이런 작업들을 명령어로 실행하는 것이라고 볼 수 있다.

대표적인 CLI 프로그램에는 터미널, 명령 프롬프트(cmd), PowerShell, Bash, zsh 등이 있다.

CLI 기본 명령어

1. `현재 경로` 확인

pwd: print working directory

pwd

2. `위치 이동`

cd: change directory

./: 현재 위치
../: 한 단계 상위 폴더 위치
/: 루트 폴더

cd {디렉토리이름}

cd src/components

3. `현재 폴더 안의 목록` 출력

(1) ls: list

현재 폴더 안의 파일과 폴더 목록을 출력한다.

(2) ls -a: list all

현재 폴더 안의 모든 파일과 폴더 목록을 출력한다.
숨김 처리된 것들을 포함해서 모두 보여준다. (e.g. .git 등의 숨김 폴더)

(3) ls -l: list long format

현재 폴더 안의 파일과 폴더의 자세한 정보를 출력한다.

(4) ls -al 또는 ls -la : list all long format

현재 폴더 안의 숨김 처리된 것들을 포함한 모든 파일과 폴더의 자세한 정보를 출력한다.

4. 새 파일 생성

(1) touch {파일명}
새 파일을 생성한다.

(2) touch {파일명} {파일명}

여러 개의 새 파일을 생성한다.

touch index.html shopping.html

(3) echo [내용] > {파일명 및 파일경로/파일명}

새 파일을 생성하며 내용 저장을 저장한다.

*하단에 12번 `echo`명령어 부분 참고

echo '안녕하세요' > text/greeting.txt

text 폴더에 있는 greeting.txt 파일에 '안녕하세요'라는 문자열을 넣으며 파일이 생성된다.

폴더경로에 폴더가 존재하지 않을 경우 오류 출력

5. 새 폴더(디렉토리) 생성

(1) mkdir {폴더명} : make directory

새 폴더를 생성한다.

(2) mkdir {폴더명} {폴더명}

여러 개의 폴더 생성할 때에는 폴더명을 공백으로 연결하여 작성한다.

/* page 폴더와 components 폴더 생성 */
mkdir page components

(3) mkdir -p {폴더명}/{폴더명}

생성할 폴더와 하위 폴더까지 한 번에 생성할 수 있다.

/* `parent` 폴더와 하위 폴더인 `child` 폴더 생성 */
mkdir -p parent/child

-p가 없으면 parent폴더가 없다고 오류가 뜸

6. 파일 삭제

rm {파일명}: remove

rm 만으로는 폴더를 삭제할 수 없다.
폴더는 아래와 같은 방법으로 삭제할 수 있다.

7. 폴더 삭제

(1) rmdir {폴더명} : remove directory

빈 폴더를 삭제하는 방법이다.

단, 해당 폴더 하위에 다른 파일/폴더가 있을 경우 삭제를 실패하며 오류가 발생한다.

(2) rm -r {폴더명}: remove recursive

폴더 하위에 내용물이 있을 경우에는 rm -r 명령어를 실행하여 삭제해야한다.

8. 폴더 및 파일 강제 삭제

rm -rf {폴더명/파일명} : remove recursive -force
폴더나 해당 폴더 하위에 있는 모든 것을 삭제한다.

이 명령어는 주의나 질문없이 **무조건 강제로 삭제해버리니 주의**해서 사용하길 권장!

9. 파일/폴더 복사

cp {파일명} {파일명} : copy

(1) cp {복사할 파일명} {복사본 파일명}

파일의 내용을 새로운 파일로 복사한다.

cp greeting.txt korean_greeting.txt

(2) cp {복사할 파일명} {복사본이 위치할 경로}

다른 폴더로 파일을 복사한다.

greeting.txt파일이 group/ 폴더 안으로 복사된다.

cp greeting.txt group/

(3) cp {복사할 파일명} {복사할 파일명} {복사본이 생성될 위치}
복사할 파일을 공백으로 나열한 후 마지막에 복사본들이 위치할 경로 및 폴더를 입력하면 여러 파일을 한꺼번에 복사할 수 있다.

cp folder01.txt folder02.txt group/

(4) cp -r {복사할 폴더명} {복사본 폴더명}
폴더를 복사할 때는 -r을 함께 작성해야한다.

cp -r folder01 folder02

10. 파일/폴더 이동

mv : move

(1) mv {이동시킬 파일} {이동될 위치 경로}
파일의 위치를 이동시킨다.

mv name.txt dog

name.txt 파일이 dog폴더로 이동된다.

(2) mv {이동시킬 폴더} {이동될 위치 경로}
폴더의 위치를 이동시킨다.

mv dog house

dog폴더를 house폴더 하위로 이동시킨다.

11. 내용 확인

cat : concatenate

파일의 내용물을 확인할 수 있다.

(e.g. greeting.txt파일안에 '안녕하세요'라는 문자가 있을 경우
cat greeting.txt를 실행하면 '안녕하세요'를 화면에 출력한다.)

12. 문자열 출력 및 저장

(1) echo [출력할 내용]
텍스트를 출력한다.

(2) echo [내용] > {파일명 및 파일경로/파일명}
꺽쇠괄호> 1 개

내용을 파일로 저장한다.
파일이 이미 존재할 경우 덮어쓴다.

echo '안녕하세요.' > greeting.txt

text 폴더에 있는 greeting.txt 파일에 '안녕하세요'라는 문자열을 넣으며 파일이 생성된다.

폴더경로에 폴더가 존재하지 않을 경우 오류 출력

(3) echo [내용] >> {파일명 및 파일경로/파일명}
꺽쇠괄호>> 2 개

파일에 내용을 추가한다.
기존의 내용을 덮어쓰지 않고 덧붙여진다.

echo '저희 강아지 연지입니다.' >> greeting.txt

/* greeting.txt */
안녕하세요.
저희 강아지 연지입니다.

[Typescript] 객체 타입

ungju — Sat, 29 Mar 2025 17:54:38 +0900

️ 객체 타입 (Object Types)

1. 객체 타입 (Object Type)

객체 타입은 객체 리터럴 타입으로 지정해준다.

객체 안에 있는 모든 프로퍼티들의 타입을 지정해주는 방법이다.

1️⃣ 타입 위치에 바로 프로퍼티들의 타입을 작성한다.

const yeonji: {
    species: string,
      age: number, 
} = {
    species: "maltese",
      age: 13, 
}

2️⃣ 프로퍼티의 type을 분리한 후 변수에 타입을 지정해준다.

// 객체에 들어갈 프로퍼티들의 타입을 지정해준다. 
type dog = {
    species: string,
      age: number, 
}

// 변수에 객체 리터럴 타입을 지정해준다. 
const yeonji: dog = {
    species: "maltese",
      age: 13, 
}

2. 배열 타입 (Array Type)

배열 타입은 두 가지 방법으로 쓸 수 있다.

1️⃣ 배열 요소들을 나타내는 타입과, 타입 뒤에 []을 쓴다.

// string으로 된 배열을 타입으로 지정했다. 
const myDogs: string[] = ["향기", "연지"];

2️⃣ 제네릭 배열 타입을 사용한다.

const myDog: Array<string> = ["향기", "연지"];

3. 함수 타입 (Function Type)

함수 타입은 파라미터와 반환 타입을 지정해 줄 수 있다.

1️⃣ 매개변수 타입

매개변수 x의 타입, 매개변수 y의 타입을 각각 지정해준다.
(x: number, y: number)

매개변수의 오른쪽엔 함수가 반환할 값의 타입을 지정할 수 있다.
(x: number, y: number): number`

// 함수 선언식
function add(x: number, y: number): number {
    return x + y;
}


// 함수 표현식
let add2 = function(x: number, y: number): number { return x + y };

2️⃣ 반환 타입

매개변수와 반환 사이에 '화살표 표기(=>)'를 사용하여 반환 타입을 작성할 수 있다.

// '=> number'는 변수 add에 들어있는 함수의 타입이 number  
let add: (x: number, y: number) => number =  
// 이 부분의 ':number'은 반환값의 타입  
function(x: number, y: number): number { return x + y; };

함수가 값을 반환하지 않는다면 비워두지 않고 void를 쓴다.

function logMessage(message: string): void {
    console.log(message);
}

[다음] 함수의 매개변수

[Typescript] 원시 타입

ungju — Mon, 24 Feb 2025 00:41:37 +0900

원시 타입 (Primitive Types)

원시 타입은 값이 변경되지 않는 기본적인 타입이다.

값이 변경되지 않는 기본적인 타입
• number, string, boolean
• null, undefined
• bigint, symbol (이 글에선 제외)

1. 문자 타입 (String Type)

string으로 표현한다.

const dog: string = "우리집 막내는 연지다.";

2. 숫자 타입 (Number Type)

number로 표현한다.

const dogAge: number = 13;

3. 불리언 타입 (Boolean Type)

참/거짓(true/false) 값이며, boolean으로 표현한다.

const isFamily: boolean = true;

4. null 타입, undefined 타입

// null
const box1: null = null;

// undefined
const box2: undefined = undefined;

5. 리터럴 타입 (Literal Type)

리터럴 타입은 하나의 값만 가지는 타입이다.
리터럴 타입은 미리 정의된 값만 가질 수 있도록 제한하는 타입이다.

// 타입이 'yeonji'라는 문자이기 때문에 'yeonji'만 할당 가능함. 
const name: "yeonji" = "yeonji";

// 타입이 true이기 때문에 true 값만 할당 가능함. 
const isCute: true = true;

[Typescript] 타입 종류

ungju — Sun, 23 Feb 2025 22:23:35 +0900

타입스크립트(Typescript)란?

타입스크립트는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다. JavaScript에 규칙을 추가해서 더 안전하게 쓸 수 있게 만들어주는 도구라고 보면 된다.

변수나 함수의 타입을 미리 정해서 예상치 못한 에러를 줄일 수 있고, 코드를 작성할 때 자동완성이나 에러 체크 같은 기능 덕분에 훨씬 안정적으로 개발할 수 있다.

1. 타입 애너테이션(Type Annotation)

'annotation'은 '주석을 달다'라는 의미를 가지고 있다.
타입스크립트에서는 변수나 함수의 데이터 타입을 지정할 때 타입 애너테이션(Type Annotation)을 사용한다.

변수나 함수의 타입을 선언할 때 콜론(:) 뒤에 타입을 명시한다.


const 변수: 타입 = ...;

2. 변수 타입 (Variable Types)

변수에는 허용되는 값의 유형을 명확히 정의해야 한다.

변수 타입은 아래와 같이 나뉜다.

원시 타입 (Primitive Type)

값이 변경되지 않는 기본적인 타입
• number, string, boolean
• null, undefined

️ 객체 타입 (Object Type)

참조를 통해 관리되는 데이터 타입
• object, Array, Function
• enum, tuple

특수 타입 (Special Type)

특수한 역할을 하는 타입
• any
• unknown
• never
• void

다음 글들은 원시 타입, 객체 타입, 특수 타입에 대해 작성해보려고 한다.

[2025 1회]정보처리기사 필기 3주만에 합격 후기

ungju — Wed, 12 Feb 2025 15:49:04 +0900

정보처리기사 3주만에 합격하기 후기!!

합격

정보처리기사 필기를 3주정도 준비하고 합격했다.

필기 시험은 2025년 2월 9일 일요일에 봤고,

합격발표는 2025년 3월 12일 수요일이지만!

CBT로 시험을 보고 난 후 가채점 및 합격여부에 합격을 받아 나왔다.

필기를 합격하니까 실기시험을 절대 미루지말고 바로 보라는 주변분들의 말씀을 따라서

바아아아로 실기준비를 해봐야겠다.

정보처리기사 3주만에 합격하기 (+꿀팁)

비전공자라서 프론트엔드 개발 공부를 하면서 데이터의 흐름, 브라우저와 소프트웨어 등에 대한이해부족으로 개발공부에 어려움이 있었다.공부를 막 시작할 즘엔 마냥 처음보는거라 당연히 어

ungju.tistory.com

[2025 1회]정보처리기사 3주만에 합격하기 (+꿀팁)

ungju — Wed, 5 Feb 2025 23:12:35 +0900

비전공자라서 프론트엔드 개발 공부를 하면서 데이터의 흐름, 브라우저와 소프트웨어 등에 대한
이해부족으로 개발공부에 어려움이 있었다.

공부를 막 시작할 즘엔 마냥 처음보는거라 당연히 어렵겠거니 했지만
이후에도 이론들이 제대로 이해가 안되어 휘발되는 상황이 생겼고,
덕분에 컴퓨터공학지식을 공부의 필요성을 느껴서 이론 서적이나 블로그를 찾아보고 조금씩 공부를 하고있었따.

그러던 찰나에 아주 ⭐️실행력 초속 3만km⭐️ 대천재님에게 왕꿀팁을 전수 받고 필기시험 등록함!

정보처리 기사 필기 공부 사이트 모음

1. [영상강의] 길벗시나공 정보처리기사 필기 무료강의

유튜브 시나공채널에서 무료로 볼 수 있는 필기 강의

[시나공 정보처리기사] 필기 토막강의

www.youtube.com

아래 사이트에서도 볼 수 있음.

길벗, 이지톡

IT, 어학, 자기계발, 재테크, 인문, 여행 등 학습과 실용 분야 출판

www.gilbut.co.kr

2. [영상강의] 흥달쌤 정보처리기사 강의

정보처기기사 자격증에 대한 강의들이 이해하기 쉬운 짧고 핵심적인 영상강의라서 많이 보고있음!

흥달쌤

흥달쌤과 함께하는 IT 채널입니다. 정보처리기사 자격증 관련된 강의 및 실무 노하우, 프로그래밍 언어(JAVA, C언어, Python) 특강 등이 진행됩니다. 앞으로 진행 예정인 동영상은 IT 관련된 이야기

www.youtube.com

3. [필기문제집] 최강 자격증 기출문제 전자문제집 CBT

각종 자격증들의 이전 회차 출제문제들을 풀 수 있는 모음 사이트

최강 자격증 기출문제 전자문제집 CBT

전자문제집, CBT, 컴씨비티, 씨비티, 기사, 산업기사, 기능사, 컴활, 컴퓨터활용능력, 1급, 2급, 워드, 정보처리, 전기, 소방, 기계, 사무자동화, 정보기기, 제과, 제빵, 한국사, 공무원, 수능, 필기,

www.comcbt.com

정보처리기사 문제들을 한 회차씩 풀고있다.

풀고싶은 과목만 선택해서 풀 수 도 있고, 시험모드와 연습모드를 선택할 수 있다.

연습모드에는 각 문제 하단에 해설이 같이 나와서 어렵지 않게 준비할 수 있다!

개인적으로 연습모드로 풀 때 문제와 답이 확실하게 이해되고

내용이 시각적으로 바로바로 매치되어서 공부하기 좋았음.

이론으로만 공부하면 집중이 잘 안되고 속도가 많이 더딘편인데,

기출문제를 풀면서 해당 내용에 대해 보충 공부를 하는 방식으로 해서

속도도 붙고 재밌게 공부하는 중이다.

너무 멀고 먼 부분이라 느꼈왔던 CS 공부를 하게 동기부여해준 대천재님께 감사

[Javascript] 자바스크립트 동작원리, 실행 컨텍스트란?

ungju — Tue, 26 Nov 2024 02:53:53 +0900

실행 컨텍스트란?

실행 컨텍스트(Execution Context) 란 자바스크립트에서 코드를 실행하는데 필요한 환경을 제공하며, 모든 실행 순서를 관리하는 영역이다.

실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하도록 스코프를 생성해주며, 코드 실행 순서를 관리한다.
모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

1. 소스코드의 타입

실행 컨텍스트는 다음 세 가지로 나뉜다.

전역 실행 컨텍스트: 자바스크립트 프로그램이 처음 실행되면 생성
함수 실행 컨텍스트: 함수가 호출될 때마다 생성
Eval 실행 컨텍스트: eval() 함수로 실행되는 코드에서 생성(잘 안쓰임)

2. 실행 컨텍스트 생성 및 과정

자바스크립트의 엔진은 모든 코드를 실행하기 전 평가 과정을 거치도록 2단계로 과정을 처리하게 된다.

실행 컨텍스트는 소스코드의 평가와 실행 과정에서 생성된다.

1) 코드 평가
평가가 될 때 실행 컨텍스트가 생성되며 변수, 함수 등의 선언문이 실행되면서 생성된 변수, 함수 식별자 등을 '키(key)'로 스코프(렉시컬 환경의 환경 레코드)에 등록된다.

2) 코드 실행
선언문을 제외한 코드들이 순차적으로 실행된다.
코드 실행에 필요한 정보(변수, 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색하여 얻는다.

3. 실행 컨텍스트 스택과 흐름

실행 컨텍스트 스택

실행 컨텍스트는 스택구조를 통해 형태로 관리된다. 코드가 실행될 때 새로운 컨텍스트가 생성되면 스택의 마지막에 넣고(push), 실행이 끝나면 마지막에 있는 데이터를 먼저 꺼내게 된다(pop).

이는 마지막에 들어간 데이터가 가장 먼저 나오는 LIFO(Last In Fist Out)방식의 자료구조이다.

(이미지에 대한 단계를 이해하기 쉽도록 맥락마다 숫자를 매겼다. 순서를 맞춰가며 읽으면 이해하는데 도움이 될 것이다.)

// 1️⃣
const 변수A = 1;

function 전역함수(){ 
  // 2️⃣
  const 변수B = 2;

  function 중첩함수(){ 
    // 3️⃣
    const 변수C = 3;  

    console.log(변수1 + 변수2 + 변수3);
  }

  지역함수();  
  // 4️⃣
}

전역함수();
// 5️⃣

실행 컨텍스트의 흐름

스택 방식을 토대로 해당 코드를 실행하면 아래와 같은 흐름에 따라 실행 컨텍스트가 동작된다.

1️⃣ 전역 코드를 평가, 실행

전역 코드를 평가하면서 전역 실행 컨텍스트 생성됨.
평가
2-1) 변수A, 전역함수를 전역 실행 컨텍스트에 등록(push)됨.
실행
3-1) 변수A의 값이 할당되고 전역함수 호출.

2️⃣ 전역함수 코드 평가, 실행

전역코드 실행 중 전역함수가 호출되면 전역 코드 실행은 일시정지되고, 코드 제어권이 전역함수내부로 이동
평가
2-1) 전역함수의 실행 컨텍스트를 생성
2-2) 전역함수의 지역변수인 변수B와 중첩함수인 중첩함수가 함수의 실행 컨텍스트에 등록(push)됨.
실행
3-1)변수B의 값이 할당되고, 중첩함수 호출.

3️⃣ 중첩함수 코드 평가, 실행

중첩함수가 호출되면 전역함수실행은 일시정지되며, 코드 제어권이 중첩함수 내부로 이동
평가
2-1)중첩함수의 실행 컨텍스트 생성
2-2) 중첩함수의 지역변수인 변수C가 실행 컨텍스트 스택에 등록(push)
실행
3-1) 변수C의 값이 할당되고, console.log 메서드 호출.
중첩함수종료

4️⃣ 전역함수로 코드 복귀

중첩함수의 실행 컨텍스트를 스택에서 제거(pop)
코드 제어권이 전역함수로 이동
실행할 코드가 없으므로 전역함수종료

5️⃣ 전역 코드 복귀

전역함수의 실행 컨텍스트를 스택에서 제거(pop)
이후 전역 코드도 실행할 코드가 없기 때문에 전역 실행 컨텍스트종료

미니요약

어느 시점에서든 최대 하나의 실행 컨텍스트를 실행하며, 실행 중인 실행 컨텍스트는 스택에서 항상 최상위 요소로 존재한다.(상단 이미지 참고)

현재 실행 중인 컨텍스트와 연관된 실행 코드에서 ➡️ 해당 실행 컨텍스트와 연관되지 않은 실행코드로 전달될 때마다 새로운 실행 컨텍스트가 생성된다.

4. 렉시컬 환경

렉시컬 환경(Lexical Environment)은 스코프를 구분하여 식별자를 등록 및 관리한다.
(1)식별자와 (2)식별자에 바인딩된 값, (3)상위 스코프에 대한 참조를 기록하는 자료구조를 가진 컴포넌트다.

키와 값을 갖는 객체 형태 스코프를 생성하여 (1)식별자와 (2)식별자에 바인딩된 값을 관리한다.

실행 컨텍스트의 구성 컴포넌트

실행 컨텍스트는 (1)Lexical Environment와 (2)Variable Environment로 구성되어있다.

이 두 컴포넌트는 생성 초기에는 같은 렉시컬 환경을 참조하지만, 코드 실행에 따라 값과 참조하는 환경이 달라질 수 있다.

렉시컬 환경의 구성 컴포넌트

실행 컨텍스트의 구성, 렉시컬 환경은 아래와 같이 구성된다.

1) 환경 레코드(Environment Record)
스코프에 포함된 (1)식별자와 (2)그에 바인딩된 값을 프로퍼티로 저장하여 관리하고 있는 저장소다.

2) 외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)
해당 실행 컨텍스트를 생성한 코드를 포함하는 상위 코드의 렉시컬 환경을 가리킨다.
외부 코드에 연결하여 스코프 체인을 구현한다.

미니 요약

실행 컨텍스트의 렉시컬 환경: 식별자, 스코프 관리

실행 컨텍스트 스택: 코드 실행순서 관리

참고
- [모던자바스크립트 Deep Dive](https://www.yes24.com/Product/Goods/92742567)
- [모던 JavaScript 튜토리얼](https://ko.javascript.info/)
- [ECMAScript](https://tc39.es/ecma262)

[자바스크립트 기본] 함수 기초

ungju — Sun, 10 Nov 2024 00:52:04 +0900

함수
첫 번째, 정의와 호출

함수 정의
함수 호출

두 번째, Parameter와 Argument 그리고 기본값(default value)

매개변수(parameter)
전달인자(Argument)
기본값(default value)

세 번째, 반환값(return value)

return

함수

함수는 프로그램을 구성하는 주요 구성 요소(building block)다.
스크립트 작성 시 특정 작업을 코드 블록으로 감싸서 하나의 실행 단위로 정의하고 사용한다.

유사한 동작을 여러 곳에서 사용해야할 때, 불필요한 동작을 여러 번 작성할 필요없이 함수를 호출해 해당 기능을 사용할 수 있다.

내장 함수
브라우저에 기본적으로 내장되어 있어서 함수를 만들지 않더라도 사용할 수 있는 내장함수

alert('알림');
prompt('값 입력');
confirm('확인');
// 외 등등

사용자 정의함수
원하는 함수를 직접 정의하여 사용할 수 있다.

1️⃣ 첫 번째, 정의와 호출

기본적으로 함수를 직접 만들어 사용하기 위해서 함수 정의와 함수 호출이 필요하다.

함수 정의

함수 호출

함수 정의

함수는 함수 정의(function definition)를 통해 생성해준다.

function, 함수 이름, 매개변수(parameter)를 써서 함수를 정의한다.

선언된 함수내부에는 실행될 본문을 넣어준다. (함수 선언문 활용)

function 함수이름(매개변수) {
    // 함수 본문
}


// 예시
function sayHi(){
    alert("Hello");
}

함수 호출

위처럼 작성된 함수를 호출하여 사용할 수 있도록 한다.

함수 이름(식별자) 옆에 소괄호()를 붙여서 호출한다.

함수 이름();

// 예시
sayHi();

이렇게 호출된 함수는 함수의 본문을 실행한다.

미니 요약

함수 정의 및 선언: 함수의 기능을 정의함
함수 호출: 정의된 함수를 사용함

2️⃣ 두 번째, Parameter와 Argument, 그리고 기본값(default value)

함수는 기본적으로 입력(input)과 출력(output)으로 이루어진 동작이다.
그래서 함수의 정의와 호출에 있어서 두 개념은 아주 중요하다.

매개변수(Parameter)

Parameter는 매개변수, 인자라고도 한다.
parameter는 함수가 정의될 때, 소괄호안에 넣어주며 함수가 받을 수 있는 입력받는 변수다.

몇 개의 변수를 받을 건지 자리를 표시해 여러개의 매개변수를 전달할 수 도 있다. 쉼표(,)를 사용해서 나열해주면 된다.

function 함수(매개변수) {
  // 함수 본문
}

// 예시
function sum(x, y){
    return x + y;
}

전달인자(Argument)

Argument는 전달인자, 인수라고도 한다.
Argument는 함수가 실행될 때 parameter자리에 대입되는 실제 값이다.

마찬가지로 몇 개의 값을 전달해 줄지 쉼표(,)로 나열해주면된다.

함수 이름(인수);

// 예시
sum(3, 5);  // 8

함수를 호출할 때 인수값을 넣어주면 매개변수(parameter)를 통해 함수 실행부에 전달된다.
sum이라는 이름의 함수에 3과 5를 인수(argument)로 입력전달해주면 함수의 매개변수 위치로 차례대로 들어가게 되고 각 변수의 위치에서 사용되게 된다.

결과는 x + y 에 3과 5가 들어가서 8의 값을 보여준다.

** 또 다른 예시 **

function greet(name) {  // 매개변수(parameter) -> name
  console.log("Hello, " + name);
}

greet("Alice");  // 전달인자(argument) -> "Alice"

// 출력
// 콘솔창에 -> Hello, Alice 출력

기본값(default value)

함수을 호출할 때 함수에 있는 매개변수(parameter)에 인수(argument)를 전달하지 않으면 기본값으로 undefined 가 된다.

예를 들어 매개변수 2개를 받아야하는 함수에 sum(3) 하나의 인수만 입력하게 되면 첫 번째 매개변수에 해당하는 x에만 3이 할당되고 y에는 undefiend가 할당된다.

// 예시
function sum(x, y){
    return x + y;
}

sum(3)  // NaN

// x -> 3
// y -> undefined

더불어 함수 본문에서 실행되는 x+y의 값에서 y에는 기본값인 undefined가 대입되는데 이는 다른 숫자와 연산할 때 NaN을 발생시킨다.

전달하는 값이 없어도 기본으로 가지는 값을 만들어주기

이런 문제는 각 매개변수의 기본값을 입력해주면 문제 발생을 막을 수 있다.

매개변수에서 y에 0기본값을 주게 되면 인수로 값을 받지 않더라도 기본값 0이 할당된다.

// 예시
function sum(x, y = 0){
    return x + y;
}

sum(3)  // 3

// x -> 3
// y -> 0

미니 요약

매개변수(인자): 함수 정의 시 받는 변수 (parameter)

전달인자(인수): 함수 호출 시 전달되는 실제 값 (argument)

기본값(default value): 인수로 전달받는 값이 없을 때 매개변수에 기본값 설정

3️⃣ 반환값(return value)

return

함수를 사용할 때 결과값을 반환하려면 함수 본문에 return을 통해 값을 반환해야한다.

위에서 사용한 두 함수를 예시로 보겠다.

1번 함수

function greet(name) { 
  console.log("Hello, " + name);
}

greet("Alice");

2번 함수

function sum(x, y){
    return x + y;
}

sum(3,5);

1번 함수에는 return이 없고 2번 함수에는 return이 있다.

➡️ 1번 함수는 실행이 되면 내부에 console.log()를 통해 콘솔창에 출력되지만, 값은 undefined가 반환된다.

➡️ 2번 함수는 8이라는 값이 return을 통해 반환된다.

반환값을 변수에 담아 사용

return이 있는 함수는 호출한 곳으로 값을 반환한다.
이 반환값은 변수에 저장하여 다른 작업에 사용하기도 한다.

const result = sum(3,5);

console.log(result);  // 8

반환값을 변수에 담아 사용하게 되면 아래와 같은 용도와 장점이 있다.

재사용에 용이하다.
- 계산 결과를 여러 곳에 활용해야하는 경우에 함수를 여러번 호출하지 않아도 되어서 유용하다.
가독성, 코드 관리에 좋다.
- 함수의 결과값에 대해 명확한 변수명을 사용하면 의미를 쉽게 파악할 수 있다.

미니 요약

반환값: 함수 호출 시 반환되는 값 (return value)

함수에서 return을 사용하는 것은 필수는 아니지만, 필요에 따라 값을 반환하려면 return을 사용해야한다.

반응형, 아직 Media Query만 쓰시나요? CSS Container Query(컨테이너 쿼리)

ungju — Tue, 5 Nov 2024 01:18:16 +0900

반응형 쿼리, 컨테이너 쿼리(Container Query)

컨테이너 쿼리(Container Query) 라는 반응형 기능이 있다. 공식적으로 지원하기 시작한 것은 오래되지 않은 최신 기술에 속하지만, 어렵지 않게 요소에 맞는 반응형을 구현하기 아주 유용한 기능이다.

미디어 쿼리와 컨테이너 쿼리의 차이점

지금까지 반응형 CSS Query를 사용한다고 하면 미디어 쿼리(Media Query)를 사용했다. 미디어 쿼리란, CSS에서 사용되는 기능으로 보편적으로 뷰포트(viewport), 브라우저 혹은 디바이스 의 크기를 기준으로 그 조건에 맞는 반응형 레이아웃 및 스타일링을 적용하는 기능이다.

반응형 레이아웃과 스타일을 크기 기준으로 적용시킨다는 점과 @규칙(at-rule)을 사용한다는 점에서 미디어쿼리랑 같지만 컨테이너 쿼리는 개별 컨테이너 요소의 크기를 기준으로 변경된다.

	Media Query(미디어 쿼리)	Container Query(컨테이너 쿼리)
변경 기준	viewport size(뷰포트 너비)	inline-size (컨테이너의 가로사이즈, width)

컨테이너 쿼리 특징

두 기능에는 각자 장단점이 있겠지만, 컨테이너 쿼리는 포괄적인 기준인 뷰포트에 너무 의존하지 않고 개별 요소가 각자 크기에 따라 반응할 수 있도록 도와준다. 독립적인 반응형 요소로 만들어주며 레이아웃 뿐만이 아니라 세세한 스타일도 체계적으로 관리가 가능하다는 것이다.

해당 컨테이너가 차지할 수 있는 영역이 더 좁아졌을 때 컨테이너가 포함하고 있는 글자의 크기를 더 작게 만들거나, 글자의 색상을 가독성있게 수정할 수 있다.

Container Query(컨테이너 쿼리) 사용법

1. 컨테이너 요소에 속성 적용

1-1. container-type

컨테이너 쿼리를 적용할 컨테이너 요소에 container-type속성을 적용한다. 이 속성은 해당 요소가 컨테이너 쿼리를 사용할 수 있도록 지정해준다.

`inline-size` container-type으로 지정하여 요소의 inline-size,즉 컨테이너의 너비에 따라 스타일을 적용할 수 있다.

.box-container {
    container-type: inline-size; 
}

1-2. container-name

container-name속성으로 컨테이너 이름을 줘서 컨테이너 쿼리에 연동하여 사용이 가능하다.

.box-container {
    container-type: inline-size; 
    container-name: dengju;
}

2. container query 구문

미디어 쿼리랑 마찬가지로 @규칙(at-rule)을 사용하여 작성한다.

@container (조건부) {
    적용 css
}

/* 컨테이너(box-container)의 크기가 400px 이하일 때 요소의 폰트 크기를 2rem으로 변경 */
/* 기본 사용 */
@container (max-width: 400px) {
    .box {
        font-size: 2rem;
    }
}


/* 컨테이너 이름 사용 */
@container dengju (max-width: 400px) {
    .box {
        font-size: 2rem;
    }
}

조건부는 두 가지 방법으로 작성할 수 있다.

@container dengju (max-width: 400px){}

@container dengju (width < 400px){}

3. 사용방법 종합

.box-container {
    container-type: inline-size; 
    container-name: dengju;
}

.box {
    font-size: 4rem;
}

@container dengju (max-width: 400px) {
    .box {
        font-size: 2rem;
    }
}

.box-container에 container-type: inline-size;와 container-name: dengju;를 적용하여 이 요소를 컨테이너로 설정했다. 이렇게 하면 이 컨테이너의 너비에 따라 내부 요소의 스타일을 조절할 수 있다.
.box의 기본 font-size는 4rem으로 설정했다.
@container dengju (max-width: 400px) 조건부 규칙을 통해 dengju라는 컨테이너의 너비가 400px 이하가 되면 .box의 font-size가 2rem으로 변경된다.

이 설정으로 .box-container의 너비가 400px 이하일 때 .box의 글자 크기가 작아진다.

ungju 님의 블로그

커밋 내역 유지하면서 레포지토리 통합하기(git subtree)

문제 발생

해결

1️⃣ 새로운 root-01폴더 생성

2️⃣ 깃 초기화

3️⃣ 가져와야 할 01-folder의 각 원격저장소 경로를 remote 등록

remote 주소 등록

등록 후 remote 확인

4️⃣ 최신상태 반영하기

5️⃣ git subtree 명령어로 폴더 구조 통합

6️⃣ 통합 후 필요없는 remote 삭제!

모아보기

‍ 회고

CLI 기초 명령어

CLI 란?

CLI 기본 명령어

1. 현재 경로 확인

2. 위치 이동

3. 현재 폴더 안의 목록 출력

4. 새 파일 생성

5. 새 폴더(디렉토리) 생성

6. 파일 삭제

7. 폴더 삭제

8. 폴더 및 파일 강제 삭제

9. 파일/폴더 복사

10. 파일/폴더 이동

11. 내용 확인

12. 문자열 출력 및 저장

[Typescript] 객체 타입

️ 객체 타입 (Object Types)

1. 객체 타입 (Object Type)

2. 배열 타입 (Array Type)

3. 함수 타입 (Function Type)

[Typescript] 원시 타입

원시 타입 (Primitive Types)

1. 문자 타입 (String Type)

2. 숫자 타입 (Number Type)

3. 불리언 타입 (Boolean Type)

4. null 타입, undefined 타입

5. 리터럴 타입 (Literal Type)

[Typescript] 타입 종류

1. 타입 애너테이션(Type Annotation)

2. 변수 타입 (Variable Types)

원시 타입 (Primitive Type)

️ 객체 타입 (Object Type)

특수 타입 (Special Type)

[2025 1회]정보처리기사 필기 3주만에 합격 후기

합격

[2025 1회]정보처리기사 3주만에 합격하기 (+꿀팁)

정보처리 기사 필기 공부 사이트 모음

1. [영상강의] 길벗시나공 정보처리기사 필기 무료강의

2. [영상강의] 흥달쌤 정보처리기사 강의

3. [필기문제집] 최강 자격증 기출문제 전자문제집 CBT

[Javascript] 자바스크립트 동작원리, 실행 컨텍스트란?

실행 컨텍스트란?

1. 소스코드의 타입

2. 실행 컨텍스트 생성 및 과정

3. 실행 컨텍스트 스택과 흐름

실행 컨텍스트 스택

실행 컨텍스트의 흐름

미니요약

4. 렉시컬 환경

실행 컨텍스트의 구성 컴포넌트

렉시컬 환경의 구성 컴포넌트

미니 요약

[자바스크립트 기본] 함수 기초

함수

1️⃣ 첫 번째, 정의와 호출

함수 정의

함수 호출

미니 요약

2️⃣ 두 번째, Parameter와 Argument, 그리고 기본값(default value)

매개변수(Parameter)

전달인자(Argument)

기본값(default value)

전달하는 값이 없어도 기본으로 가지는 값을 만들어주기

미니 요약

3️⃣ 반환값(return value)

return

1️⃣ 새로운 `root-01`폴더 생성

3️⃣ 가져와야 할 `01-folder`의 각 원격저장소 경로를 remote 등록

1. `현재 경로` 확인

2. `위치 이동`

3. `현재 폴더 안의 목록` 출력