[Web] HTMLCollection vs NodeList
·
Web
HTMLCollection과 NodeList는 모두 웹 브라우저에서 DOM 요소들을 묶어서 다루는 유사 배열 객체이다. HTMLCollectionhttps://developer.mozilla.org/ko/docs/Web/API/HTMLCollection HTMLCollection - Web API | MDNHTMLCollection은 구성요소를 이름과 인덱스로 동시에 직접 노출합니다. HTML ID는 :와 .을 유효한 문자로 포함할 수 있으므로 속성 접근 시에는 괄호 표기법을 사용해야 합니다. HTMLCollection은 배열 스developer.mozilla.org HTML 요소 노드만 포함하며, DOM에서 실시간으로 변화가 반영되는 Live 객체다. document.getElementById() 와..
[CS] 타입스크립트의 컴파일 과정
·
CS
타입스크립트는 브라우저가 바로 이해할 수 없기 때문에 JS로 변환하는 과정이 필요하다.이 과정에서 타입스크립트 컴파일러(tsc)가 어떻게 코드를 JS로 트랜스파일하고, 타입 검사 및 추론 과정이 어떻게 진행되는지 살펴본다. 1. Scanner (Lexer)연속된 글자인 소스코드를 컴파일러가 이해할 수 있는 의미 단위로 토큰화하는 과정이다.let age: number = 25;이를 토큰화하면 let identifier(age) : number = 25 ; 로 분리된다.토큰 단위로 쪼개면 파서가 구조를 이해하기 쉬워진다. 2. Parser토큰을 AST(추상 구문 트리)로 변환한다.코드 구조를 트리 형태로 표현해 컴파일러가 변수, 함수, 클래스, 표현식 등을 분석할 수 있게 한다.VariableDeclarat..
[CS] 컴파일러와 인터프리터, JIT
·
CS
더보기컴파일러와 인터프리터는 모두 프로그래밍 언어를 실행 가능한 기계어로 번역하는 프로그램이다.컴파일러는 전체 소스코드를 한 번에 미리 번역해 실행 시 프로그램의 속도가 빠르지만, 디버깅이 어렵다.반면 인터프리터는 소스코드를 한 줄씩 중간 코드로 모두 번역한 후 실행하여 디버깅이 용이하지만, 프로그램 실행 속도가 느려질 수 있다. 컴파일러 (Compiler)ex. C, C++장점컴파일이 완료된 실행 파일은 컴퓨터에서 빠르게 실행할 수 있어 효율적이다.기계어로 번역되기 때문에 프로그램 코드가 유출되지 않는다.컴파일 에러와 관련된 에러를 초기에 발견할 수 있다.단점코드를 수정하면 컴파일을 다시 수행해야 한다.소스 파일 전체를 컴파일 해야하므로 용량이 크다. 즉, 수정사항이 빈번이 발생할 경우 문제가 발생할..
[네부캠] 부스트캠프 웹∙모바일 10기 - 챌린지 후기
·
경험들
1. 챌린지 입과 전☑️ 퇴사와 지원작은 스타트업에서 프론트엔드 개발자로 일하고 있었지만, 항상 이 길이 나와 맞는지에 대한 의문이 있었다.회의 시간에는 모르는 용어들이 우루루 쏟아졌고 나는 검색하느라 정신이 없었다. 아무도 나에게 뭐라고 하지 않았지만, 회의가 길어질수록 무너지는 느낌을 받았다.. 백엔드를 이해하는 것은 커녕, 프론트엔드 조차 제대로 알고 있다고 말할 수 없었다. 시간이 갈수록 점점 자신감은 떨어졌고, 세상에 뒤처지는 듯한 불안감이 커졌다. 계속 이렇게 있다가는 존재감 없는 사람이 될 것 같았고, 그게 몹시 두려웠다.나름 자격증도 따고, 프로젝트도 진행하며 노력했지만 회사 일과 병행하기에는 한계가 있었다. 회사 일에만 집중하자니 내 성장을 기대하기 어려운 환경이라 판단했다. 결국 몰래몰..
[CS] Unix와 Linux
·
CS
1. Unix1.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 프로젝트를 꿈꾸고 있었다.하지만 바램과 달리, 너무 많은 기능으로 코드가 복잡했고, 계속..
[CS] Git이란, (+ Gist)
·
CS
GitGit이란, 분산형 버전 관리 시스템(Distributed Version Control System, DVCS) 의 한 종류입니다. 버전 관리 시스템먼저, 버전 관리 시스템(Version Control System, VCS)은 파일(코드)의 변경 이력을 저장하고, 이전 상태로 되돌리거나 변경 사항을 추적할 수 있도록 도와주는 도구입니다.예를 들어, 코드를 과거 버전으로 되돌리거나, 누가/언제/무엇을 변경했는지 확인하거나, 여러 사람이 동시에 작업할 수 있도록 협업을 지원합니다. 중앙형 vs 분산형이러한 버전 관리 시스템은 크게 중앙형(Centralized)과 분산형(Distributed)로 나뉩니다.중앙형분산형SVNGit- 모든 작업 이력(버전 정보)은 서버에만 저장됨- 개발자는 서버에서 최신 버전..
[네부캠] 부스트캠프 웹∙모바일 10기 - 베이직 후기
·
경험들
베이직 과정 1주차첫 날은 OT를 진행하고, 미션이 뒤늦게 공개되었다. 다들 첫 날이라 쉬운 미션이 나왔다고들 하시던데.. 첫 날부터 모든 것을 완벽하게 해야 합격한다는 생각이 강하게 잡혀있었던 나는 21시가 넘어서 미션을 제출했다. 제출하고 둘러보니 내가 너무 오바한 것 같았다 ㅎㅎ. .. 😽그 덕분에! 너무 완벽에만 사로잡혀있으면 안된다는 것을 느꼈다. 미션 수행, 해결에 집중하면 결과물이 있다할지 몰라도 결국 스스로 많은 것을 얻었다고 할 수는 없을 것 같았다. 이걸 첫 날에 깨달은게 정말 정말 다행.. 배움에 초점을 맞추고 내가 왜 베이직 과정에 입과했는지를 떠올리는 연습을 자주 했다. 2주차1주차보다 2주차가 어렵고 그런 건 딱히 없었다. 오히려 2주차 미션이 더 수월했다고 생각하는데 아마도..
[CS] 스택(Stack), 큐(Queue), 덱(Deque)
·
CS
스택 Stack LIFO (Last In First Out), 후입선출 방식의 선형 자료구조이다.가장 마지막에 삽입된 데이터가 가장 먼저 제거된다.주요 연산:push(item) : 데이터를 스택의 맨 위에 삽입pop() : 스택의 맨 위 데이터를 제거 및 반환peek() / top() : 가장 위에 있는 데이터를 제거하지 않고 조회제한 사항: 중간에 있는 데이터를 직접 접근, 수정, 삭제 불가사용 예시:웹 브라우저의 뒤로 가기 기능 (방문 기록이 스택처럼 쌓임)괄호 짝 검사재귀 호출 처리 (함수 호출 스택) 큐 Queue FIFO (First In First Out), 즉 선입선출 방식의 선형 자료구조이다.먼저 들어온 데이터가 먼저 나가며, 한쪽에서는 삽입만, 다른 한쪽에서는 삭제만 수행한다.주요 연산..
[BOJ] 2346번: 풍선 터뜨리기 자바스크립트 풀이 (메모리 초과)
·
Algorithm
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번 풍선을 삭제한다. ..
[BOJ] 22858번: 원상 복구 (small) 자바스크립트 풀이
·
Algorithm
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 rea..