바벨의 유래바벨(babel)이라는 이름은 고대 '바벨탑' 이야기에서 유래되었어. 이 이야기에서는 전 세계 사람들이 모여서 세상에서 가장 높은 '바벨탑'을 만들려고 했지만, 언어가 달라서 탑을 완성하지 못했지. 프런트엔드 개발에서도 바벨은 서로 다른 언어 규약으로 작성된 파일을 웹 브라우저가 이해할 수 있는 형태로 변환해주는 역할을 해. 자바스크립트 생태계의 큰 변화, ES6 등장자바스크립트는 2009년에 ES5가 출시된 이후로 6년 동안 큰 변화가 없었어. 그러다가 2015년에 ES6(2015)가 등장하면서 자바스크립트 생태계에 큰 변화가 일어났지. ES6는 기존 ES5와 확연히 다른 점이 많아서 새로운 자바스크립트 언어라고 해도 과언이 아니야. 브라우저가 지원을 안하네하지만, ES6가 아무리 훌륭해도 ..

DOM이란?먼저, DOM이 뭔지부터 알아보자. DOM은 Document Object Model의 약자로, 웹 페이지의 구조를 나타내는 방식이야. 쉽게 말해, 우리가 HTML 코드를 작성하면 브라우저는 이를 DOM이라는 형태로 변환해서 내부적으로 관리해. 이런 HTML 코드는 브라우저에서 다음과 같은 트리 구조의 DOM으로 변환돼.여기서 DOM은 브라우저가 HTML 요소들을 객체 형태로 나타낸 거야.이렇게 하면 자바스크립트로 이 요소들에 접근하고 조작할 수 있어.문제점:DOM의 구조가 복잡해질수록, 즉 트리의 깊이가 깊어질수록, 어떤 요소를 변경할 때마다 브라우저가 업데이트해야 하는 부분이 많아져. 이 때문에 성능 문제가 발생할 수 있어. 가상돔(Virtual DOM)이란?리액트는 ..

리액트를 왜 사용할까?리액트는 왜 이렇게 인기가 많을까? 왜 많은 개발자들이 리액트를 사용할까? 가장 인기 있는 프레임워크이기 때문,,리액트는 주간 다운로드 수가 2천만을 넘어갈 정도로 매우 인기가 많아. 특히 국내에서도 많은 기업들이 리액트를 사용하고 있어. Vue.js도 인기가 있지만, 리액트가 더 많은 인지도를 가지고 있지.강력한 커뮤니티와 광범위한 생태계강력한 커뮤니티리액트는 매우 큰 커뮤니티를 가지고 있어. 그래서 풍부한 교육 자료, 튜토리얼, 예제 코드, 라이브러리가 많아. 이 덕분에 리액트를 배우고 문제를 해결하는 데 큰 도움이 돼.광범위한 생태계리액트는 다양한 서드파티 라이브러리와 도구를 지원해. 예를 들어 상태 관리를 위한 Redux, MobX, 스타일링을 위한 Styled-Compone..

본격적으로 리액트를 공부하려고 할 때, 터미널에 가장 먼저 치는 명령어는 npm(yarn) 또는 npx가 포함된 명령어야.그럼 이 npm, yarn, npx가 무엇인지 간단하게 알아보자!NPM (Node Package Manager)NPM은 Node Package Manager의 약자로, Node.js의 기본 패키지 관리자야. Node.js와 함께 설치되고, Node.js 애플리케이션의 종속성을 관리하고 패키지를 설치, 업데이트, 제거하는 데 사용돼.주요 기능패키지 설치:의존성 설치: npm install --save개발 의존성 설치: npm install --save-dev패키지 제거: npm uninstall 패키지 업데이트: npm update 패키지 실행: npm run 글로벌 패키지 설치/제..

안녕 친구들! 요즘 개발자들 사이에서 핫한 **타입스크립트(TypeScript)**가 뭔지 궁금하지 않아?프론트엔드 개발자를 꿈꾼다면 타입스크립트 들어는 봤는데, 몰라서 찾아보다가 들어왔을거라 생각해.프론트개발자를 꿈꾸는 나와 같이 타입스크립트의 매력에 대해 알아보자. 가볍게 즐기면서도 확실하게 이해할 수 있도록 설명해줄게!타입스크립트는 자바스크립트의 슈퍼셋이야. 자바스크립트의 모든 기능을 포함하면서도 강력한 타입 시스템을 추가한 언어지. 덕분에 개발 단계에서 타입 관련 오류를 미리 잡아낼 수 있어서 큰 프로젝트에서도 안정적으로 코드를 관리할 수 있어. 그래서 요즘 개발자들 사이에서 인기가 많지.왜 타입스크립트를 사용해야 할까?1. 오류 감소타입스크립트를 사용하면 자바스크립트의 흔한 문제인 타입 강제 변..

**타입스크립트(TypeScript)**를 VSCode에서 사용하는 방법과, 윈도우 사용자들을 위한 설정 변경 방법을 알아볼게.타입스크립트는 자바스크립트의 슈퍼셋으로, 정적 타입 검사를 추가해서 코드의 품질을 높여주는 언어야. 그럼 시작해볼까?설치타입스크립트를 사용하려면 먼저 타입스크립트와 관련 패키지를 설치해야 해. 터미널에서 아래 명령어를 입력해줘.> npm i typescript> npx tsc -v # 버전 확인> npm i ts-node> npx ts-node -v # 버전 확인더보기🤚🏻npm은 뭐고 npx는 뭐에요? npm: 패키지를 설치하고 관리하는 도구.예: npm install 패키지이름 (패키지 설치)npx: 패키지를 실행하는 도구, 패키지를 설치하지 않고도 일회성으로 실행 가능...

오늘은 웹 페이지에서 일어나는 여러 가지 이벤트에 대해 얘기해볼게.자바스크립트로 페이지를 더 인터랙티브(interactive)하게 만들려면 이벤트를 잘 이해하고 활용하는 게 중요해.이벤트란?**이벤트(event)**란 브라우저에서 발생하는 상호작용을 말해. 예를 들어 사용자가 마우스를 클릭했을 때, 더블 클릭했을 때, 키보드 버튼을 눌렀을 때, 스크롤을 했을 때 등등이 있어. 이런 상호작용이 발생하면 자바스크립트에서는 이벤트가 발생했다고 표현해. 이벤트는 크게 세 가지로 구분할 수 있어:이벤트 타겟(event target),이벤트 타입(event type),이벤트 핸들러(event handler).이벤트 타겟이벤트 타겟은 이벤트가 일어난 문서 객체를 의미해.예를 들어, 버튼을 클릭했다면 그 버튼이 이벤트..

안녕! 반가워, 나는 평범한 컴공 대학생이야.오늘은 웹 개발의 기초 중 하나인 DOM에 대해 알려줄게. 혹시 웹 페이지를 꾸밀 때 HTML과 CSS만 써봤다면, 이제는 자바스크립트를 통해 페이지를 동적으로 제어하는 방법도 알아두면 좋아!이를 위한게 바로 Documents Object Model => DOM이야!DOM이 뭐야?**DOM(Documents Object Model)**은 웹 페이지를 자바스크립트로 제어하기 위한 모델이야. 웹 브라우저에 표시되는 HTML 태그들을 자바스크립트가 이해할 수 있게 객체로 변환한 거라고 생각하면 돼. 이를 통해 자바스크립트가 웹 페이지의 요소들을 선택하고, 수정하고, 삭제할 수 있는 거지.다시 말해서, 웹 브라우저가 HTML 문서를 파싱해서 객체 형태로 변환한 결과물..