Bin's Blog

들어가며 지난주, 난 D사의 면접을 다녀왔다. D사의 면접은 나에게 합불을 떠나서 큰 영감을 줬다. 이제까지 받아보지 못했던 질문들도 많았고, 꼬리 질문도 많았다. 내가 무엇이 부족한지 느낄 수 있는 면접이었다. 돌아보면 준비가 부족했던 것 같아서 많이 아쉬움이 남는다. 그래서 오늘은 제대로 대답하지 못했던 부분은 기본형 데이터와 참조형 데이터에 대해서 살펴보고자 한다. 먼저, 기본형 데이터와 참조형 데이터를 알아보기 전에 데이터 할당에 대해서 잠시 살펴보자. 데이터 할당 기본적으로 데이터 할당은 메모리 공간에서 이루어진다. a라는 변수가 있고 'abc'라는 문자열을 할당하고 싶다면 데이터를 저장하기 위한 별도의 메모리 공간을 확보해서 문자열 'abc'를 저장하고 그 주소를 변수영역에 저장하는 식으로 이..

들어가며 먼저, 왜 이 글을 남기고 싶었는지 이유에 대해서 말하겠다. 자바스크립트의 프레임워크 & 라이브러리(편의상 프레임워크라고 쓰겠다)는 내가 생각한 것보다 많고, 아직도 모르는 게 투성이다. 개발자가 해야 하는 일 중에 하나는 트렌드를 파악해서 새로운 기술을 적용하는 것이라고 생각한다. 하루가 다르게 기술 트렌드는 빠르게 변화하고 있다. 빠르게 바뀌는 생태계에서 Pioneer가 되고 싶다. 오늘은 State of JavaScript의 리포트를 바탕으로 프론트엔드 프레임워크의 트렌드에 대해서 살펴보고 나의 생각을 가미해서 포스팅을 해보겠다. 매년 초 State of JavaScript에서 어떤 프레임워크가 인기가 있는지 조사를 통해서 리포트를 낸다. 아마 2024년 초에 2023년 리포트가 나올 예정..

글의 시작 프로젝트 & 공부하면서 "왜 나는 React를 사용할까?"라는 질문을 스스로에게 던져보았다. 나는 파도에 휩쓸려온 물고기처럼 React가 가장 인기 있는 Front-End의 라이브러리이고, 취업하려면 알아야 한다는 이유 때문이었다. 근데 과연 이렇게 사용의 목적도 모르고 수동적인 자세를 취하는 것이 옳지 않다는 판단을 내리게 됐다. 그래서 오늘부터 React에 대해서 파고드는 시간을 가져보고 싶다. 이 과정을 통해서 내가 당연하게 생각했던 것들에 대해서 의미와 목적을 고민해 보는 시간을 통해서 깊이가 더해지고 시야가 넓어졌으면 좋겠다. React란? 리액트는 자바스크립트 프레임워크인 Angular, Vue와 달리 프레임워크가 아닌 라이브러리이다. React 공식 홈페이지에 React란 "UI(..

들어가며 2022년 글로벌 경기 침체 국면에서, 2023년 국내 게임업계의 성장 키워드는 콘솔 중심의 멀티플랫폼으로 내다보았다. 원래 콘솔은 초기에 매출이 증가하는 반면에, 매출이 꾸준히 지속적으로 발생하기 어려운 단점이 존재했다. 그런데 최근에는 구독 체계 또는 모바일 과금 형태가 콘솔 게임에 적용되기 시작했고, 콘텐츠 다운로드 방식을 의미하는 DLC 체제가 자리 잡으며, 콘솔 역시 멀티플랫폼 형태로 진화하고 있다. 그리고 국내 시장에서 낮아진 시장 규모와 성장률로 인해 국내 게임사들은 점차 글로벌 시장에서 눈을 돌리기 시작했다. 2023년이 2달 밖에 남지 않았다. 2023년 게임회사들은 어떤 방향으로 나아가고 있는지 살펴보고 싶어서 글을 남긴다. 오늘 포스팅에서는 한국 게임회사 3N에 대해서만 살펴..

글의 시작 오늘 다루는 주제는 지난 시간 멀티프로세싱을 다뤘으니, 간단하게 스레드와 멀티스레딩에 대해서 살펴보고 가려고 한다. 자바스크립트를 처음에 공부했을 때 "자바스크립트는 메인 스레드인 이벤트 루프가 싱글 스레드라서 싱글 스레드 언어라고 부른다."라는 말을 자주 들었다. 그럼 스레드가 무엇인지 더 나아가서 멀티스레딩이 무엇인지 알아보면서 궁금증을 해소해 보자. 스레드 스레드는 프로세스의 실행 가능한 가장 작은 단위이다. 프로세스는 여러 스레드를 가질 수 있다. 코드, 데이터, 스택, 힙을 각각 생성하는 프로세스와는 달리 스레드는 코드, 데이터, 힙은 스레드끼리 서로 공유한다. 그 외의 영역은 각각 생성된다. 멀티스레딩 멀티스레딩은 프로세스 내 작업을 여러 개의 스레드, 멀티스레드로 처리하는 기법이며..

글의 시작 오늘 다루는 주제는 내가 실제 면접 때 질문을 받아봤던 내용이다. 요즘에는 함수형 컴포넌트가 사용하기 편해서 클래스형 컴포넌트 보다 더 많이 쓰는 추세라고 한다. 나는 프로젝트 때 함수형 컴포넌트만 다뤄봤다. 그러다 문득 단순한 고민에 빠졌다. "왜 함수형 컴포넌트를 쓰지?" 면접을 준비하고 "리액트를 다루는 기술"이라는 책을 읽게 되면서 클래스형 컴포넌트의 존재에 대해서 처음 알게 됐다. "최소 내가 사용하는 도구의 장단점이나 사용 목적에 대해서는 알아야하지 않을까?"라는 마인드라서, 이번 글을 통해 차이점을 분석하는 시간을 가져보려고 한다. Class component vs Functional component React Component 선언 방식은 크게 두 가지로 나뉜다. 하나는 클래스..

글의 시작 오늘 다루는 주제는 로그인할 때 사용자 인증 방식에 대한 내용이다. 이 내용은 내가 실제 면접 때 질문을 받아봤던 내용이다. 쿠키와 세션만 알고 있었지, JWT와 OAuth 방식에 대해서는 잘 몰랐다. 그래서 이번 포스팅을 통해서 3가지 방법을 비교해 보면서 어떤 장단점들이 존재하는지 동작 방식에 대해서 파헤쳐 본다. 회원기능 동작 방식 예를 들어 게시물들을 로그인한 사람만 볼 수 있게 만든다면 회원기능이 필요한데 어떤 식으로 회원기능을 만들면 될까? 회원가입 유저가 가입하면 아이디/비밀번호를 DB에 저장해 놓는다. 로그인 유저가 로그인시 아이디/비밀번호를 서버로 보낸다. 서버는 DB에 있는 아이디/비밀번호와 유저가 보낸 아이디/비밀번호가 일치하는 경우 입장권을 발급해준다. 로그인이 필요한 서..

글의 시작 오늘 다루는 주제는 웹 브라우저가 어떻게 동작하는지에 대한 내용이다. 자바스크립트의 동작 원리에 대해서 공부하다가 궁금해진 내용이다. 사실 가장 기초가 되면서도 중요한 내용이다. 웹 개발자가 웹 브라우저가 어떻게 동작하는지에 대한 이해도가 있어야 한다고 생각한다. 스스로 이해도를 높이기 위해서 그림을 많이 사용할 예정이다. 🤔 우리가 작성한 코드가 어떻게 브라우저에서 실행되는 걸까? 오늘은 우리가 작성한 코드가 어떻게 웹 브라우저에서 동작하는지 Stack, Queue를 이용해서 살펴보고자 한다. 먼저 다음 코드를 살펴 보자. console.log(1+1) setTimeout(function(){ console.log(2+2)}, 1000) console.log(3+3) 결과값이 어떤 순서로 출..

PCB PCB(Process Control Block)는 운영체제에서 프로세스에 대한 메타데이터를 저장한 "데이터"를 말한다. 프로세스 제어 블록이라고도 한다. 프로세스가 생성되면 운영체제는 해당 PCB를 생성한다. 프로그램이 실행되면 프로세스가 생성되고 프로세스 주소 값들에 앞서 설명한 스택, 힙 등의 구조를 기반으로 메모리가 할당된다. 그리고 이 프로세스의 메타데이터들이 PCB에 저장되어 관리된다. 이는 프로세스의 중요한 정보를 포함하고 있기 때문에 일반 사용자가 접근하지 못하도록 커널 스택의 가장 앞부분에서 관리된다. PCB의 구조 PCB는 프로세스 스케줄링 상태, 프로세스 ID 등의 다음과 같은 정보로 이루어져 있다. 프로세스 스케줄링 상태: "준비", "일시중단"등 프로세스가 CPU에 대한 소유..

글의 시작 오늘 다루는 주제는 내가 코어 자바스크립트를 공부하고, 또 강의를 챙겨보면서 평소해 궁금했던 내용이다. 면접 때도 단골 질문으로 등장한다. 자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 내가 궁금했던 부분은 "왜 자바스크립트가 쓰레기 수집을 하지?", "왜 쓰레기를 수집해야 하는지?" 이런 행동이 어떤 목적과 의미를 지니는지 이번 포스팅을 통해서 파헤쳐 보자. Garbage란? Garbage는 컴퓨터의 메모리에 있지만 앞으로 사용되지 않을 데이터나 객체 또는 메모리 영역을 가리킨다. 모든 컴퓨터 시스템은 제한적인 메모리를 가지고 있고, 대부분의 소프트웨어 garbage를 만들어내기 때문에, 이를 메모리에서 해제하여 다시 사용할 수 있게 해야 한다. 간단한 예시 // user엔..