Bin's Blog

들어가며 나는 여지까지 Vue.js, React.js를 사용해서 프로젝트를 한 경험이 있다. 그러다가 새로운 프레임워크를 활용해서 사이드 프로젝트를 하고 싶다는 생각이 들었다. "어떤 프레임워크를 사용할까?" 고민을 하다가 지난번에 JS Framework & Library 트렌드라는 주제로 글을 썼던 당시를 회상했다. 📚지난 글 보기 JS Framework & Library 트렌드 들어가며 먼저, 왜 이 글을 남기고 싶었는지 이유에 대해서 말하겠다. 자바스크립트의 프레임워크 & 라이브러리(편의상 프레임워크라고 쓰겠다)는 내가 생각한 것보다 많고, 아직도 모르는 게 hobin49.tistory.com 내 눈길을 끌었던 프레임워크는 Svelte이었다. 지속적으로 유저들한테 관심을 받고 있고 사용률도 늘어나고..

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

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

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

🤔 this keyword는 어디에 쓰이냐?에 따라서 뜻하는 의미가 달라진다. 확인해보자! 1️⃣ 일반함수 일반(전역)함수에서 쓰면 this는 window를 뜻한다. // 눈에 보이지 않지만 window라는 전역객체가 감싸고 있다. window: { function solution() { console.log(this); } } // window solution() 2️⃣ Strict mode Strict mode에서는 일반함수 안에서 this keyword를 불렀을 때 undefined라는 값으로 지정해준다. 'use strict'; function solution(){ // undefined console.log(this) } solution() 3️⃣ Object내 함수 안에서 this 호출한 자기..

📚 npm과 yarn 👉 npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자다. 👉 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다. 👉 그리고 명령 줄 인터페이스(command-line interface, CLI)를 통해 패키지 설치 및 삭제 뿐만 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있다. 1️⃣ npm 👉 npm은 노드 패키지 매니저(Node Package Manager)의 줄임말로 노드를 설치할 때 자동으로 설치되는 기본 패키지 관리자이다. 크게 두 가지 역할을 수행한다. 1. 첫 번째 역할은 온라인 플랫폼이다. 사람들이 노드 패..

🤔 프로토타입(Prototype)이란? 👉 프로토타입은 쉽게 말해 유전자이다. 👉 예시를 보자 // 부모 클래스 function 기계() { this.q = "strike", this.w = "snowball", } // 부모 클래스에 name 속성 추가 기계.prototype.name = "kim" // 자식 인스턴스 let nunu = new 기계() 👉 nunu라는 instance에는 name이라는 속성이 없다. 오직 부모 클래스에만 존재한다. 근데 nunu.name이라고 접근하면 "kim"이라고 뜬다. 🤔 부모가 가진 속성을 자식에서 사용할 수 있는 이유는 뭘까? 👉 object에서 자료 뽑을 때 일어나는 일이다. 👉 자식이 해당 속성을 가지고 있지 않으면 부모유전자를 살펴본다. 거기에 해당 속성..

🤔 어제 프로젝트를 하다가 발견한 바보같은 실수를 반복하지 않고자 글을 남긴다. Vue.js에서 다른 페이지로 이동하려면 $router.push를 통해서 이동이 가능하다. 여기서 나는 현재 페이지에서 다른 페이지로 이동할 때 현재 페이지에 있는 데이터를 넘겨주고 싶었다. 그래서 아래와 같은 방식으로 코드를 짰다. this.$router.push({ name: "randomanswerdetail", params: { name: message.answer, mbti: message.mbti, user: message.userID, id: message.id, }, }); 그리고 나서, 이동한 페이지에서 message.answer를 수정했다. async completed() { try { if (this.co..

🧐 콜백 함수란? 👉 콜백함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행한다. 👉 쉽게 예를 들어보자, 내가 좋아하는 친구의 생일 파티에 초대를 받았다. 그래서 나는 부모님한테 "친구가 나를 파티에 초대했어, 파티가 끝나면 나를 학교로 데려다 줄 수 있을까?"라고 부탁했다. 여기서 "나를 학교로 데려다 줄 수 있을까?"라는 부탁이 콜백 함수와 비슷하다. 이 상황에서 부모님에게 콜백을 전단했고, 파티가 끝나는 시점은 모르지만, 그 시점이 되면 부모님은 전달한 요청 (나를 학교로 데려다 주는 것)을 수행하게 된다. 👉 콜백 함수는 어떤 이벤트가 발생하거나 특정 작업이 완료되었을 때 실행되어야 하는 함수이다. 콜백 함수는 이벤트나 작업..