성장 중!

[Web] HTMLCollection vs NodeList

zooyaa — Fri, 10 Oct 2025 16:25:05 +0900

HTMLCollection과 NodeList는 모두 웹 브라우저에서 DOM 요소들을 묶어서 다루는 유사 배열 객체이다.

HTMLCollection

https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection

HTMLCollection - Web API | MDN

HTMLCollection은 구성요소를 이름과 인덱스로 동시에 직접 노출합니다. HTML ID는 :와 .을 유효한 문자로 포함할 수 있으므로 속성 접근 시에는 괄호 표기법을 사용해야 합니다. HTMLCollection은 배열 스

developer.mozilla.org

HTML 요소 노드만 포함하며, DOM에서 실시간으로 변화가 반영되는 Live 객체다.

document.getElementById() 와 같은 메서드로 생성된다. 즉, DOM에 새로운 요소가 추가∙삭제되거나 기존 값이 변경되면 이 컬렉션에 바로 반영된다.

예제

document.body.innerHTML = `<p class="text">text</p>`;

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs[0].className); // "text"

paragraphs[0].className = "changed";
console.log(paragraphs[0].className); // "changed"

HTMLCollection은 Live 객체이기 때문에, DOM이 변경되면 자동으로 반영되는 것을 확인할 수 있다.

NodeList

https://developer.mozilla.org/en-US/docs/Web/API/NodeList

NodeList - Web APIs | MDN

Although they are both considered NodeList objects, there are 2 varieties of NodeList: live and static. In most cases, the NodeList is live, which means that changes in the DOM automatically update the collection. For example, Node.childNodes is live: cons

developer.mozilla.org

NodeList는 HTML 요소 뿐만 아니라 텍스트 노드, 주석 등 다양한 노드를 포함할 수 있다.

document.querySelectorAll() 과 같은 메서드로 생성되며, HTMLCollection과 달리 DOM 변경 후에도 변하지 않는 static한 컬렉션이다.

단, childNodes가 만든 NodeList는 예외적으로 Live 컬렉션이다.

예제

document.body.innerHTML = `<p class="text">text</p>`;

const paragraphs = document.querySelectorAll(".text");
console.log(paragraphs.length); // 1

paragraphs[0].className = "changed";
console.log(paragraphs.length); // 1

const updated = document.querySelectorAll(".text");
console.log(updated.length); // 0

paragraphs는 클래스명이 text인 정적 컬렉션이다.

paragraphs의 첫 번째 요소 클래스명을 changed로 변경했지만, NodeList는 정적이므로 변경 후 길이도 1이 된다.

다시 querySelectorAll로 조회하면 새로운 상태가 반영되어 길이가 0으로 반환된다.

[CS] 타입스크립트의 컴파일 과정

zooyaa — Sun, 21 Sep 2025 20:16:39 +0900

타입스크립트는 브라우저가 바로 이해할 수 없기 때문에 JS로 변환하는 과정이 필요하다.
이 과정에서 타입스크립트 컴파일러(tsc)가 어떻게 코드를 JS로 트랜스파일하고, 타입 검사 및 추론 과정이 어떻게 진행되는지 살펴본다.

1. Scanner (Lexer)

연속된 글자인 소스코드를 컴파일러가 이해할 수 있는 의미 단위로 토큰화하는 과정이다.

let age: number = 25;

이를 토큰화하면 let identifier(age) : number = 25 ; 로 분리된다.
토큰 단위로 쪼개면 파서가 구조를 이해하기 쉬워진다.

2. Parser

토큰을 AST(추상 구문 트리)로 변환한다.
코드 구조를 트리 형태로 표현해 컴파일러가 변수, 함수, 클래스, 표현식 등을 분석할 수 있게 한다.

VariableDeclaration
 ├─ name: age
 ├─ type: number
 └─ initializer: 25

3. Binder

Parser에서 완성된 AST를 읽어 타입 검사에 필요한 데이터를 수집하는 과정이다.
AST를 기반으로 Symbol Table을 구성하고, Scope를 관리하는 단계이다. 즉, 타입체크를 하기 전에 이름과 위치, 선언 정보를 미리 정리하는 과정!

Symbol: 변수, 함수, 클래스 등 이름과 관련된 메타 정보
- ex. 변수 이름, 타입, 선언 위치, 스코프 정보 등등...
Scope: 이름이 유효한 범위
- ex. 전역, 함수 내부, 블록 내부 등등 ...

Binder는 AST를 순회하며 각 선언 노드를 발견하면 심볼 테이블에 등록하고, 스코프 계층 구조를 생성한다.

4. Type Checker

Binder와 AST 정보를 이용해 정적 타입 검증을 수행한다. (변수, 함수 호출, 연산 등의 타입 일치 여부를 확인한다.)
타입이 맞지 않으면 컴파일러가 에러를 발생시킨다. TS는 런타임 시점이 아닌 개컴파일 단계에서 타입 오류를 체크하는데, 이 오류 탐지를 수행하는 단계이다.

5. Transpiling (Emitter)

타입체크 결과와 AST를 기반으로, TS 코드를 JS 코드로 변환한다.
타입 정보를 제거하고, 화살표 함수를 일반 함수로 변환하는 둥의 TS 문법을 JS 표준 문법으로 변환한다.

var age = 25;

[CS] 컴파일러와 인터프리터, JIT

zooyaa — Sun, 21 Sep 2025 18:08:27 +0900

컴파일러와 인터프리터는 모두 프로그래밍 언어를 실행 가능한 기계어로 번역하는 프로그램이다.
컴파일러는 전체 소스코드를 한 번에 미리 번역해 실행 시 프로그램의 속도가 빠르지만, 디버깅이 어렵다.
반면 인터프리터는 소스코드를 한 줄씩 중간 코드로 모두 번역한 후 실행하여 디버깅이 용이하지만, 프로그램 실행 속도가 느려질 수 있다.

컴파일러 (Compiler)

ex. C, C++

장점

컴파일이 완료된 실행 파일은 컴퓨터에서 빠르게 실행할 수 있어 효율적이다.
기계어로 번역되기 때문에 프로그램 코드가 유출되지 않는다.
컴파일 에러와 관련된 에러를 초기에 발견할 수 있다.

단점

코드를 수정하면 컴파일을 다시 수행해야 한다.
소스 파일 전체를 컴파일 해야하므로 용량이 크다. 즉, 수정사항이 빈번이 발생할 경우 문제가 발생할 수 있다.
모든 소스 파일을 한 번에 번역하므로 컴파일 시간은 느릴 수 있다.

인터프리터 (Interpreter)

ex. Python, JavaScript

장점

시스템 간의 이식성이 뛰어나다.
→ 실행환경만 있으면 소스코드를 수행하지 않고도 다양한 OS에서 실행할 수 있다.
코드를 수정하면 필요한 부분만 다시 번역하므로 코드 수정에 용이하다.

단점

매번 한 줄 마다 번역과정을 거치므로 프로그램 실행 속도가 느릴 수 있다.
중간 코드로 해석되어 프로그램 코드가 유출될 수 있다.

JIT (Just In Time)

필요한 순간에 컴파일을 실행하는 방식이다.

인터프리터처럼 한 줄씩 실행하지 않고, 중간 코드를 실행 도중에 기계어로 바꾸는 기술이다.

동작흐름

개발자가 소스코드를 작성
인터프리트 or VM이 중간 코드로 변환
JIT 컴파일러가 런타임에 중간 코드를 기계어로 변환
CPU가 빠르게 실행

장점

인터프리터보다 빠르다
인터프리터는 한 줄씩 읽고 해석하는 반면, JIT는 실행 중에 기계어로 번역해놓고 실행하므로 훨씬 빠르다.
컴파일러보다 유연하다
컴파일러: 실행 전에 전체를 번역하고, 실행 파일을 생성하므로 이식성이 떨어진다.
JIT: 실행 중에 번역하므로 여전히 이식성이 유지된다.
최적화가 가능하다
JIT은 실행 시점에 코드를 보면서 자주 실행되는 부분을 최적화할 수 있다.

단점

런타임 시점에 컴파일을 실행하므로, 처음 실행할 때 약간의 지연이 발생할 수 있다.
실행 환경에 JIT 컴파일러가 필요하다.

[네부캠] 부스트캠프 웹∙모바일 10기 - 챌린지 후기

zooyaa — Sun, 17 Aug 2025 23:07:18 +0900

1. 챌린지 입과 전

☑️ 퇴사와 지원

작은 스타트업에서 프론트엔드 개발자로 일하고 있었지만, 항상 이 길이 나와 맞는지에 대한 의문이 있었다.
회의 시간에는 모르는 용어들이 우루루 쏟아졌고 나는 검색하느라 정신이 없었다. 아무도 나에게 뭐라고 하지 않았지만, 회의가 길어질수록 무너지는 느낌을 받았다..

백엔드를 이해하는 것은 커녕, 프론트엔드 조차 제대로 알고 있다고 말할 수 없었다. 시간이 갈수록 점점 자신감은 떨어졌고, 세상에 뒤처지는 듯한 불안감이 커졌다. 계속 이렇게 있다가는 존재감 없는 사람이 될 것 같았고, 그게 몹시 두려웠다.
나름 자격증도 따고, 프로젝트도 진행하며 노력했지만 회사 일과 병행하기에는 한계가 있었다. 회사 일에만 집중하자니 내 성장을 기대하기 어려운 환경이라 판단했다. 결국 몰래몰래 눈여겨보던 부스트캠프에 지원하기로 마음먹었다.!!

주변에 이 사실을 밝히는 건 조심스러웠다. 너무 해보고 싶은 교육이었지만, 다른 사람들에게는 잘 다니던 회사를 관두고 합격할지 모르는 교육에 도전하는 것은 한심하다,,는 시선으로 보일까 두려웠다.

혹시 이 글을 읽는 분들 중에도 비슷하게 생각하실지 모르겠다. 하지만 나는 그냥 회사에서 무의미하게 키보드만 두드리며 살 수는 없었다. 그렇게 살다 보면 삶의 의욕을 잃고, 결국 나 자신을 어디에서도 소개하기 부끄러워질 것 같았다.

나의 첫 일주년 !

불합격하더라도, 지원하고 준비하는 과정에서 분명히 무언가 배울 수 있을 것이라 믿고! 지원을 결심한 지 일주일 만에 사직서를 작성하게 되었다!

회사 분들이 너무 좋으신 분들이여서 퇴사 날에 다같이 응원해주시는데 혼자 감동했던 좋은 기억이 있다 ㅎㅎ ..

☑️ 베이직

베이직은 힘들었다! ..
챌린지가 끝난 시점에서 생각해보면 사실 그닥 힘들지는.. 않았던 것 같기도하다 ㅎㅎ

베이직 후기는 따로 글을 작성했기 때문에 말을 줄여보면 ...

나에게 자신감을 찾아준 시간이었다!
앞서 말했듯, 나는 자신감이 정말정말 부족했다. 그래서 타인에게 내 코드를 보여주는 상황이 너무 싫었다. 하지만 싫다고 피하면 안될 일이라는 것도 잘 알고 있어서 최대한 노력했다.
아무래도 냉철한 지적을 주고받기는 쉽지 않아서 대부분 감사하게도 칭찬이었지만, 설령 형식적인 말이라 하더라도 그런 댓글 하나하나가 너무 소중했고 정말 행복했다.

2. 챌린지에서 얻어가는 것

챌린지는 힘들었다! 진짜 힘들었다!!
그리고 너무너무 잘하고 싶었다.

☑️ 자신감

챌린지에서도 자신감을 쌓을 수 있었다!
미션의 난이도가 높다 보니 슬랙에서 많은 분들이 어려워하시는 것을 볼 수 있었고, 그래서 잘하시는 분들도 어려워하시구나~ 하며 약간의 안심이 됐다.

또 이제는 누군가에게 내 코드를 보여주는 상황이 그리 두렵지만은 않다.
내 코드로 인해 이야깃거리가 나오는게 뿌듯하고, 여러 접근법을 보며 시야를 넓혀가는 과정이 재밌었다. 회사를 다닐 때 성장을 갈망했었는데, 특히 피어피드백 시간에서 내가 성장 중이라는 것을 느낄 수 있었다.

☑️ CS 지식과 학습의 재미

CS를 제대로 공부해본 경험이 없다. 사실 CS의 필요성도 깨닫지 못해서 자격증 취득을 위해 단순 암기만 했다. 그래서 얼마가지 않아 다 잊어버리곤 했다.
하지만 챌린지는 CS 지식을 만들면서 배우게 된다. 러닝바이두잉! 러바두!

이전에는 CS를 접할 때마다 그래서 이걸 어떻게 적용한다는 건지.. 적용하면 뭐가 어떻다는 건지.. 의문만 가득하고 아무것도 와닿지 않았었다. 그런데 챌린지에서는 과제를 직접 해결하는 과정에서 직접 개념을 적용해볼 수 있었다.

특히 테스트코드를 작성해보며 성능을 측정해보는 경험에서 단순히 돌아가는 코드가 아니라 더 나은 코드를 고민하게 되었다.

학습정리 중 재미를 느꼈던 기록

학습을 할 때도 점점 막막함 보다는 재미를 느끼게 됐다. 챌린지 후반부로 가면서 여러 문서에 '재밌다'라는 표현을 유독 많이 썼었다.

내가 즐기면서 학습하는 시간이 늘어남과 동시에 성장하고 있다는 느낌을 진짜 많이 받았다. (그래서 구현 시간이 부족할 때가 많아지기도 했다 .._)

☑️ 설계의 중요성

여태껏 설계라는 단계를 따로 두고 개발을 진행했던 경험이 없었다. 그래서 설계라는 단어가 더 낯설게 느껴졌고, 구체적으로 무엇을 해야하는 단계인지 모호해 초반에는 아예 건너뛰기도 했다.

그러던 중 다른 분의 gist에서 설계 과정을 구체적으로 기록해둔 문서를 보게 되었다. 그 문서를 통해 설계를 어떻게 받아들이고, 어떻게 진행했는지 흐름을 파악할 수 있었다.

그리고 가장 와닿았던 것!

설계는 당연히 변경될 수 있다.

나는 초반에 세운 설계를 끝까지 고수해야 한다는 생각 때문에 오히려 더 어려움을 겪었다. 그런데 동료분의 문서를 보면서 처음 설계는 당연히 틀릴 수 있고, 틀렸다면 바꾸면 된다는 사실을 확실히 깨달았다.

설계란 완벽한 답을 정해놓는 것이 아니라, 방향을 잡는 단계이다.

방향을 잡고 수정하며, 나에게 더 나은 해답을 찾아가는 과정이라는 것을 깨달았다. 설계가 있으면 중간에 길을 잃지 않고, 막혀도 돌아올 수 있다.

어쩌면 내가 어떤 개발을 시작할 때 더 어려움을 느꼈던 이유는 설계를 해보지 않았기 때문이 아닐까 ~!

3. 챌린지를 마무리하며 ~

호기롭게 퇴사를 결정했지만, 항상 마음 한 켠이 찝찝했었는데 완전히 없어졌다.
네부캠을 할 때마다 내가 틀린 선택을 하지 않았다고 해주는 것 같아서 혼자 위로받곤 했다.

내가 조와하는 박명수 아즈씨

멤버십에서도 내가 틀리지 않았다는 것을 보여주지 !!

화이팅 ~ !!

[CS] Unix와 Linux

zooyaa — Sun, 20 Jul 2025 03:09:02 +0900

1. Unix

1.1 유닉스 탄생 배경 ( + C언어의 탄생 ! )

https://joone.net/2017/02/18/%ec%9c%a0%eb%8b%89%ec%8a%a4%ec%99%80-c%ec%96%b8%ec%96%b4/

8. 유닉스와 C언어

1960년대 MIT에서 ITS(Incompatible Timesharing System)가 한창 개발되고 있는 동안, 미 동부의 다른 곳에서도 해커의 기운이 물씬 풍기는 곳이 있었는데, 바로 벨 연구소(AT&T Bell Laboratories)였다. 여기서 앞으

joone.net

미국 AT&T 벨 연구소의 개발자들은 모든 컴퓨터에서 돌아가는 하나의 운영체제를 만들겠다는 Multics 프로젝트를 꿈꾸고 있었다.
하지만 바램과 달리, 너무 많은 기능으로 코드가 복잡했고, 계속되는 일정 지연에 Multics를 포기하게 된다.

이 상황을 아쉬워한 개발자 켄 톰프슨은 Multics의 아이디어를 기반으로, 가볍도 단순한 운영체제를 만들기 위해 동료 데니스 리치와 작은 실험을 시작하게 된다.

그렇게 만들어진게 바로 유닉스!

초기 유닉스는 프로그램 개발을 어셈블리어로만 할 수 있었는데, 어셈블리어는 하드웨어 종속적이라, 다른 컴퓨터로 옮기기가 매우 어려웠다.

켄 톰프슨이 어셈블리어의 불편함을 느껴, 고급언어를 만들기로 결심하는데, 그렇게 만들어진게 B언어!

허나, 그렇게 만들어진 B언어도 인터프리터 기반이라 속도가 느리고, 자료형이 부족해 시스템 개발에 한계가 있었다.
그래서 그의 동료, 데니스 리치가 컴파일러 기반의 C언어를 탄생시킨다!

1.2 유닉스의 특징

초기의 유닉스는 하드웨어 자원이 부족했던 시절에 만들어졌기 때문에, 작고 효율적인 설계를 특징으로 한다.
이후에도 유닉스 계열 운영체제들은 다음과 같은 특징들을 계승해왔다.

멀티태스킹 Multitasking
여러 작업(프로세스)을 동시에 처리할 수 있다.

멀티유저 Multiuser
하나의 컴퓨터를 여러 사용자가 동시에 사용할 수 있다.
서버 환경에서 매우 중요한 개념이다.

계층적 파일 시스템
디렉토리 구조가 트리 형태로 구성되어있다.
루트(/)를 기준으로 정리된 구조는 현대 운영체제 파일 시스템의 기초가 되었다.

장치 독립성
장치도 파일처럼 취급한다.
하드디스크, 프린터, 터미널 등 모든 장치를 파일처럼 다룰 수 있어, 일관된 처리가 가능하다.

셸과 도구 기반 철학
셸(Shell) 이라는 인터페이스를 통해 명령어로 시스템을 제어한다.
하나의 도구는 하나의 일만 잘하라는 철학을 기반으로 한다.
파이프를 사용해 여러 명령어를 조합할 수 있다.

이러한 철학은 이후 Linux, macOS, 도커(Docker), 쿠버네티스(Kubernetes) 같은 현대 기술에도 영향을 미치게된다.

2. Linux

2.1 리눅스 탄생 배경

https://joone.net/2018/09/27/26-%EB%A6%AC%EB%88%85%EC%8A%A4-%EC%9D%B4%EC%95%BC%EA%B8%B0-%EB%A6%AC%EB%88%84%EC%8A%A4-%ED%86%A0%EB%B0%9C%EC%A6%88%EC%9D%98-%EC%96%B4%EB%A6%B0%EC%8B%9C%EC%A0%88/

26. 리눅스 이야기: 리누스 토발즈의 어린시절

오늘날 수 많은 컴퓨터와 여러 장치를 움직이는 리눅스는 1991년 핀란드에 사는 리누스 토발즈라는 대학생이 공개한 운영체제 커널 코드로 시작한다. 리누스의 어린 시절 리누스는 외할아버지

joone.net

리누스 토르발즈는 개인용 컴퓨터에서 돌아가는 유닉스 같은 운영체제가 필요했다.
당시 Minix라는 교육용 유닉스를 사용했지만, 운영체제 교육이 주 목적인 미닉스는 다소 불완전했다. 미닉스는 오픈소스가 아니었다.

자유롭게 수정하거나 배포할 수 없었던 점에 불만을 가진 리누스는 완전히 자유로운 커널을 직접 만들기로 결심했다.

이후 리누스는 직접 만든 운영체제 커널을 일부 사용자들에게 공개하게 되었다.

유닉스는 유료였기 때문에 많은 사람들이 유닉스같은 무료 운영체제를 만들고자 GNU 프로젝트에 참여했다.

이렇게 GNU 프로젝트가 만들어놓은 툴과 리눅스 커널이 합쳐지면서 완전한 운영체제로 성장했다.

2.2 리눅스의 특징

리눅스는 유닉스의 철학을 계승하면서도, 오픈소스 커뮤니티 중심으로 발전해왔다는 점에서 고유한 특징을 가진다.

오픈소스
누구나 소스를 열람, 수정, 배포 가능하다.
이 덕분에 전 세계 개발자들이 함께 개발에 참여할 수 있다.

유닉스 철학 계승
작은 도구들을 조합해 더 큰 기능을 만들어라 : 작은 명령어들을 연결해 복잡한 작업 처리가 가능하다.
텍스트 기반 인터페이스 : 입출력을 텍스트로 처리했다.
bash 셸을 통해 강력한 명령어 조합이 가능하다.

다양한 배포판
우분투(Ubuntu), 페도라(Fedora), 데비안(Debian), 아치(Arch), 칼리(Kali) 등등.. 수많은 변종이 존재한다.
용도에 따라 서버용, 데스크탑용, 임베디드용 등이 존재한다.

뛰어난 안정성과 보안성
서버 운영체제로 가장 많이 사용된다. (웹 서버, 클라우드, 슈퍼 컴퓨터 등)
커널 수준에서 사용자 권한을 엄격히 관리한다.

하드웨어 독립성
다양한 아키텍처에서 구동할 수 있다.

2.3 유닉스와 리눅스의 차이점

리눅스는 유닉스의 철학을 계승하면서도, 여러 측면에서 유닉스와는 차별화된 길을 걷는다.

항목	Unix	Linux
개발 목적	대형 시스템 범용 OS	개인용 컴퓨터에서 사용하기 위한 무료 OS
라이선스	대부분 상업적, 유료	오픈소스, 무료
POSIX 호환성	원조이자 기준	대부분이 호환된다. (POSIX 준수)

유닉스는 닫힌 생태계, 리눅스는 열린 생태계!

2.3.1 POSIX?

POSIX는 Portable Operating System Interface의 약자로, 운영체제 간의 호환성을 보장하기 위해 만들어진 표준 인터페이스이다.

리눅스든, 유닉스든, POSIX 규칙을 지키면

소프트웨어가 큰 수정없이 여러 운영체제에서 돌아갈 수 있다!

즉, 운영체제 세계의 공통 API 규칙집!

POSIX 규정

ls, cd, echo, find등 쉘 명령어의 기본 동작 방식
fork(), exec(), read()등 프로그래밍 인터페이스
파일 권한 및 디렉토리 접근 방식 등
표준 라이브러리 함수

[CS] Git이란, (+ Gist)

zooyaa — Tue, 15 Jul 2025 01:33:49 +0900

Git

Git이란, 분산형 버전 관리 시스템(Distributed Version Control System, DVCS) 의 한 종류입니다.

버전 관리 시스템

먼저, 버전 관리 시스템(Version Control System, VCS)은 파일(코드)의 변경 이력을 저장하고, 이전 상태로 되돌리거나 변경 사항을 추적할 수 있도록 도와주는 도구입니다.

예를 들어, 코드를 과거 버전으로 되돌리거나, 누가/언제/무엇을 변경했는지 확인하거나, 여러 사람이 동시에 작업할 수 있도록 협업을 지원합니다.

중앙형 vs 분산형

이러한 버전 관리 시스템은 크게 중앙형(Centralized)과 분산형(Distributed)로 나뉩니다.

중앙형	분산형
SVN	Git
- 모든 작업 이력(버전 정보)은 서버에만 저장됨 - 개발자는 서버에서 최신 버전만 내려받고 작업 함 - 서버가 고장나면 전체 프로젝트에 영향을 줌	- 모든 개발자가 서버 + 로컬에 전체 이력을 복사해 가짐 - 서버 없이도 혼자 작업, 커밋, 되돌리기 등 대부분이 가능함 - 서버와 동기화하면 협업이 완료됨

위로 알 수 있듯이, 중앙형 VCS과 달리 분산형 VCS는 서버가 고장나도 비교적 안전하며, 오프라인 작업이 더 수월합니다.

만약 Git을 사용하는 팀에서 서버가 터졌다해도, 개발자들의 로컬 저장소에 전체 히스토리가 남아있기 때문에 복구가 가능합니다.

이러한 이유가 분산형 VCS인 Git이 선택받는 이유 중 하나입니다.

Gist

Gist란 Github에서 제공하는 코드 공유 서비스입니다. 하나 또는 여러 개의 파일을 담을 수 있습니다. (폴더 X)

각각의 Gist는 자체 Git 저장소이기 때문에 git clone, commit, push, pull 같은 명령어들을 동일하게 사용 가능합니다.

GitHub vs Gist

깃허브 저장소도 코드 공유가 되는데, 굳이 Gist를 따로 사용하는 이유는?

깃허브는 폴더 구조를 잡고, 설정 파일을 생성하고, ... 등 절차가 무겁습니다. 반면 Gist는 제목, 공유할 부분만 코드 붙여넣기, 공개여부 선택이 끝이므로 '간단한 코드만 공유할 때'에 더 편리합니다.

또한, 같은 페이지에서 바로 댓글로 소통이 가능해, 코드 조각에 대해 토론하거나 피드백을 주고 받기 용이합니다.

[네부캠] 부스트캠프 웹∙모바일 10기 - 베이직 후기

zooyaa — Mon, 14 Jul 2025 02:02:37 +0900

베이직 과정

1주차

첫 날은 OT를 진행하고, 미션이 뒤늦게 공개되었다. 다들 첫 날이라 쉬운 미션이 나왔다고들 하시던데.. 첫 날부터 모든 것을 완벽하게 해야 합격한다는 생각이 강하게 잡혀있었던 나는 21시가 넘어서 미션을 제출했다. 제출하고 둘러보니 내가 너무 오바한 것 같았다 ㅎㅎ. ..

그 덕분에! 너무 완벽에만 사로잡혀있으면 안된다는 것을 느꼈다.

미션 수행, 해결에 집중하면 결과물이 있다할지 몰라도 결국 스스로 많은 것을 얻었다고 할 수는 없을 것 같았다. 이걸 첫 날에 깨달은게 정말 정말 다행.. 배움에 초점을 맞추고 내가 왜 베이직 과정에 입과했는지를 떠올리는 연습을 자주 했다.

2주차

1주차보다 2주차가 어렵고 그런 건 딱히 없었다. 오히려 2주차 미션이 더 수월했다고 생각하는데 아마도 1주차에서 여러모로 힘듦을 경험했기에 2주차가 좀 덜 힘들게 느껴진 것 아닌가싶다.

2주차에 들어서면 네부캠의 학습 방식이 익숙해지고, 왜 이렇게 진행하는지를 점점 깨닫게 된다. 미션을 수행하며 내가 지금 무엇을 모르는지, 그래서 어떤 자료를 찾아봐야하는지를 명확히 알 수 있었다. 내 코드를 남에게 설명하는 방법, 용기를 얻게 된다. 사실 이게 너무 소중한 경험이었다.. 내 코드를 남에게 보여주는 것이 너무 부끄러웠는데 이제 반응이 없으면 너무 속상하닫 !!

문제해결력 테스트

시간 : 14시 ~ 17시 (3시간)
환경 : 프로그래머스
언어 : Javascript - 웹 풀스택 / Kotlin - 안드로이드 / Swift - iOS
구성 : CS 12문제 / 서술형 1문제 / 코드 구현 3문제 (총 16문제, 검색 불가)
난도 : 프로그래머스 Lv1~2 / 백준 실버 ~ 골드

입과 전부터 항상 걱정했었던 문제해결력 테스트! 너무너무 자신이 없었다.

그래서 베이직 입과 전에는 하루에 한 개 이상의 백준 구현 문제를 풀었고, 입과 후에는 하루에 두 개 이상의 프로그래머스 카카오 기출을 풀었다.

정말 놀랍게도 .. !! 시간이 부족해 2.5솔을 했다.. 대박.. 이 때 시험을 치르면서 내가 베이직으로 성장했구나를 제일 실감나게 느꼈다.

문제를 읽자마자 어떤 자료구조를 사용해야할지 알게되었다. 함수형 프로그래밍을 쭉 해왔어서 클래스를 한 번도 사용해본적이 없는데, 문제에서 클래스 구조를 만났다.. 근데 얼떨결에 풀었다..

피어 피드백 시간에 클래스형으로 작성하신 분들의 코드를 몇 번 읽고 따라해봤던게 도움이 된 것 같다.

문제의 구현 난이도가 높다기보다는, 요구사항을 분석하는 난이도가 높았던 것 같다. 프로그래머스 - 카카오 기출과 유사한데, 더 생소한 개념들로 구성되어있어서 문제를 읽는 자체가 힘들었다.

그래도 찬찬히 읽으면 무조건 풀 수 있었다 !

이전 기수의 많은 분들이 베이직 과정이 문제해결력 테스트에 도움이 된다고들 하셔서 베이직의 미션과 유사한 미션이 출제되는 줄 알았다.

허나 !! 베이직에서 미션을 수행하며 복잡한/명확하지 않은 요구사항을 분석하고, 자료구조를 선택하고, 피어 피드백으로 여러 접근 방법을 배우는 그 과정이 너~~무 도움이 되었다.

왜 '코딩테스트'가 아니라, '문제해결력 테스트'인지 단번에 알 수 있었다.

베이직을 마치며, 챌린지 입과까지

베이직 2주 동안 정말 매일같이 열심히 달렸다. 그 덕분에 챌린지 과정에 입과할 수 있었다. ^ㅎㅎ

베이직이 끝나고 입과 메일을 받기 전까지는 쉬면서 생각을 정리하는 시간을 가졌다.

예전엔 어려운 문제를 만나면 아직 나는 이 문제를 풀 레벨이 아니라며 조금 더 쉬운 문제를 찾곤했었는데, 베이직이 끝난 지금 보면 너무 멍청했던 방식이다 ㅎㅎ,,

네부캠은 강의를 하지 않는다.

네부캠은 강의를 해주지 않는다.
대신 미션을 주고, 그걸 스스로의 방식으로 해결해야 한다. 불친절한 것도 같지만, 아마 이게 내가 2주 만에 성장할 수 있었던 핵심 이유가 아닐까 싶다.

미션을 해결하기 위한 최소한의 설명만 제공되기 때문에 오로지 스스로 요구사항을 분석해야한다.

요구사항 분석 - 설계 - 구현으로 미션을 해결하는 그 과정이 시간이 많이 소요되고, 많은 에너지를 소모하게 해서 힘들지만, 정말 딱 힘든만큼 얻어가는 방식이다.

하루종일 혼자 미션을 붙잡고 있는 것 같다가도, 피어 피드백 시간에 다들 얼마나 치열하게 고민했는지를 볼 수 있어서 괜히 함께 하는 느낌이 들었다. 그래서 미션이 너무 어려운 날에도 포기하지 않고 끝까지 해낼 수 있었다.

지속 가능한 개발자

네부캠은 "개발을 잘하게 해준다!"는 느낌보다는 "어떻게 하면 개발을 잘할 수 있을까?"를 스스로 경험하게 해준다.

계속해서 강조되는 "지속 가능한 개발자"라는 말이 조금씩 구체적인 모습으로 자리 잡아가고 있는 것을 느낀다.

챌린지도 화이팅!!! 아좌좌

[CS] 스택(Stack), 큐(Queue), 덱(Deque)

zooyaa — Tue, 8 Jul 2025 15:51:25 +0900

스택 Stack

LIFO (Last In First Out), 후입선출 방식의 선형 자료구조이다.
가장 마지막에 삽입된 데이터가 가장 먼저 제거된다.
주요 연산:
- push(item) : 데이터를 스택의 맨 위에 삽입
- pop() : 스택의 맨 위 데이터를 제거 및 반환
- peek() / top() : 가장 위에 있는 데이터를 제거하지 않고 조회
제한 사항: 중간에 있는 데이터를 직접 접근, 수정, 삭제 불가
사용 예시:
- 웹 브라우저의 뒤로 가기 기능 (방문 기록이 스택처럼 쌓임)
- 괄호 짝 검사
- 재귀 호출 처리 (함수 호출 스택)

큐 Queue

FIFO (First In First Out), 즉 선입선출 방식의 선형 자료구조이다.
먼저 들어온 데이터가 먼저 나가며, 한쪽에서는 삽입만, 다른 한쪽에서는 삭제만 수행한다.
주요 연산:
- enqueue(item) : 데이터를 rear (뒤) 에 삽입
- dequeue() : 데이터를 front (앞) 에서 제거 및 반환
- peek() : 데이터를 제거하지 않고 조회
사용 예시:
- 인쇄 대기열
- BFS (너비 우선 탐색) 알고리즘
- 운영체제의 프로세스 스케줄링

덱 Deque

양쪽에서 삽입과 삭제가 모두 가능한 선형 자료구조. 스택과 큐의 특성을 모두 가진다.
앞(front)과 뒤(rear) 양쪽에서 삽입과 삭제가 가능
주요 연산:
- push_front(item) / push_back(item)
- pop_front() / pop_back()
- peek_front() / peek_back()
사용 예시:
- 슬라이딩 윈도우 최대/최소 문제 (투 포인터 알고리즘과 함께 사용)
- 회전 큐 (예: 요세푸스 문제)
- 양방향 탐색 (양끝 삽입/삭제가 필요할 때)

[BOJ] 2346번: 풍선 터뜨리기 자바스크립트 풀이 (메모리 초과)

zooyaa — Tue, 8 Jul 2025 15:34:25 +0900

1. 문제

https://www.acmicpc.net/problem/2346

2. 풀이과정

의사코드

1. 1번 풍선을 삭제한 후, 3칸 뒤로 이동한다. [1]
2. 4번 풍선을 삭제한 후, 3칸 앞으로 이동한다. [1, 4]
1번이 없으므로 5번으로 이동된다.
3. 5번 풍선을 삭제한 후, 1칸 앞으로 이동한다. [1, 4, 5]
4번이 없으므로 3번으로 이동된다.
4. 3번 풍선을 삭제한 후, 1칸 뒤로 이동한다. [1, 4, 5, 3]
4번이 없으므로 5번으로 이동된다.
5번이 없으므로 1번으로 이동된다.
1번이 없으므로 2번으로 이동된다.
5. 2번 풍선을 삭제한다. [1, 4, 5, 3, 2]

리스트의 앞, 뒤에서 삽입 삭제가 이루어진다. 리스트는 점점 줄어들며 회전한다.

즉, 앞 뒤를 동시에 다뤄야하는 회전 구조로 덱을 사용하는 것이 적합하다 판단했다.

전체코드

const readline = require('readline');

(async () => {
    const rl = readline.createInterface({ input: process.stdin });
    
    const input = [];
    for await (const line of rl) {
        input.push(line.trim());
        if (input.length === 2) rl.close();
    }
    
    class Deque {
        constructor() {
            this.items = {};
            this.front = 0;
            this.rear = 0;
        }
        
        push_front(item) {
            this.front--;
            this.items[this.front] = item;
        }
        push_rear(item) {
            this.items[this.rear] = item;
            this.rear++;
        }
        pop_front() {
            if (this.isEmpty()) return undefined;
            const item = this.items[this.front];
            delete this.items[this.front];
            this.front++;
            return item;
        }
        pop_rear() {
            if (this.isEmpty()) return undefined;
            this.rear--;
            const item = this.items[this.rear];
            delete this.items[this.rear];
            return item;
        }
        isEmpty() {
            return this.size() === 0;
        }
        size() {
            return this.rear - this.front;
        }
    }
    
    const N = Number(input[0]);
    const nums = input[1].split(' ').map(Number);
    
    const deque = new Deque();
    for (let i = 0; i < N; i++) {
        deque.push_rear([i + 1, nums[i]]);
    }
    
    const result = [];
    while (!deque.isEmpty()) {
        const [idx, move] = deque.pop_front();
        result.push(idx);
        
        if (deque.isEmpty()) break;
        
        if (move > 0) {
            for (let i = 0; i < move - 1; i++) {
                deque.push_rear(deque.pop_front());
            }
        } else {
            for (let i = 0; i < -move; i++) {
                deque.push_front(deque.pop_rear());
            }
        }
    }
    
    console.log(result.join(' '));
})();

메모리 초과

백준에서 코드를 제출하면 메모리 초과가 발생한다 ㅜㅜ..

게시판 보면 node.js로 성공한 사람이 거의 없을 정도로 드뭄.. 언어별 메모리 사용이 다르다는데 node.js로 풀기엔 메모리가 너무 작은 것 같다 !!!

[BOJ] 22858번: 원상 복구 (small) 자바스크립트 풀이

zooyaa — Sun, 22 Jun 2025 17:19:26 +0900

1. 문제

https://www.acmicpc.net/problem/22858

2. 풀이과정

의사코드

i = 0, 1, 2, 3, 4
카드 초기 상태 P = [1, 4, 5, 3, 2]
셔플 규칙 D = [4, 3, 1, 2, 5]
셔플 결과 S

[ 셔플 과정 ]
i = 0 -> D[i] = D[0] = 4.
4번째 카드는 인덱스상 P[i - 1] = P[3]이므로, P[3] = 3을 i = 0번째로 이동시킨다.
즉, 셔플 1번 후 S[i] = P[D[i] - 1]이 됨.

셔플이 2번 일어날 때의 결과를 S2라고 한다면,
S2[i] = S[D[i] - 1]이 됨.
이 때, S[D[i] - 1] = P[D[D[i] - 1] - 1]이 됨.
즉, 셔플이 K번 일어날 때마다 D[i] - 1이 중첩된다.

전체코드

const readline = require('readline');

(async () => {
    const rl = readline.createInterface({ input: process.stdin });
    
    const input = [];
    for await (const line of rl) {
        input.push(line.trim());
        if (input.length === 3) rl.close();
    }
    
    const [N, K] = input[0].split(' ').map(Number);
    const S = input[1].split(' ').map(Number);
    const D = input[2].split(' ').map(Number);
    
    let P = Array(N).fill(0);
    for (let i = 0; i < N; i++) {
        let d = i;
        for (let k = 0; k < K; k++) {
          d = D[d] - 1;  
        };
        P[d] = S[i];
    }
    
    console.log(P.join(' '));
})();