이전 포스팅에서 번들러 이야기를 했었는데, 그렇다면 당연히 Babel의 이야기를 안할 수 없습니다. 리액트 쓰다보면 Babel 다들 한번쯤.. 보셨죠? 그럼 가 봅시다 그래서 바벨이 뭔데? 당연히.. Babel이란걸 처음 들어보시는 분들도 있을거라고 다시금 생각하여 간단하게 설명드리자면, 우리가 지금 사용하는 JS를 구형 브라우저에서도 사용할 수 있도록 번역해주는 도구입니다. Babel은 컴파일러다 엥..? JS는 인터프리터 언어인데요..? 라고 하시면, JS에서 JS로 컴파일 해주는 도구입니다. 그럼 이거 왜쓰나요? Legacy 대응 우리가 ES6, ESNext ... 로 부르는 최신 버전들이 있으니 당연히 과거 버전도 있습니다. 과거 버전에서는 최신 버전에서 나온 JS 기능들을 사용할 수 없을거구요,..

React로 프로젝트를 만들다 보면 자주 보는 친구들이있습니다. Webpack, parcel.. 프로젝트를 개발하면서 직접적으로 만질 일이 (아직까지는) 많지 않아서 그냥 지나쳐버리곤 했는데 기초가 부족한 것 같아 차근차근 공부를 시작하니 번들러에 대해서 하나도 알지 못하고 있었던 것 같아, 이번 포스팅을 통해서 해당 개념을 다시금 잡아보려 합니다. 그래서 번들러가 뭔데? 간단하게, 여러 파일들을 하나로 묶어주는 역할을 합니다. 아마, 남자들은 번들이라는 의미를 다른 플랫폼에서 많이들 들어봤겠네요 이거 생각하면 어렵지 않습니다. 여러 파일들을 묶어서(번들로) 관리하게 해주는 도구라고 생각하면 됩니다. 그럼 왜 만들어졌는데? 옛날 웹이야 크기도 작고, 파일도 몇개 되지 않아서 큰 문제가 되지 않았으나 웹이..

업데이트되는건 우리가 하는 게임 버전뿐만이 아니고, 언어도 업데이트되며 지속적으로 기능이 추가된다. 각설하고.. 23년에 새로 생긴 JS의 신 기 능 들에 대해서 알아보도록 하겠다. (해당 글은 이미 유명하신 노마드코더님의 영상을 통해 따로 정리한 글입니다.) Array.toReversed / Array.toSorted / Array.toSpliced 우리가 기존에 사용하던 Array.reverse() / Array.sort() / Array.splice() 가 이미 존재하는데 대체 뭐가 다른건가 ~ 싶을 수 있다. 위에 함수를 써본사람이라면 다 알겠지만 해당 함수들은 원본 배열도 변경시킨다는 특징 또한 가지고있었다. const a = [0, 1, 2]; const b = a.reverse(); cons..

지금까지 공부한 내용들 중에서 자바스크립트의 핵심적인 내용들을 정리할 예정(업데이트 지속적으로 할 예정) 1. 비동기 처리 자바스크립트는 기본적으로 비동기적으로 작동한다. 간단히 요약하자면 동기적 처리는 1의 과정이 끝나야 2의 작업이 시작되는 구조이고 비동기적 처리는 1의 과정의 진행유무와 상관없이 2, 3, 4... 번 작업들이 시작됨을 말한다 자바스크립트는 기본적으로 비동기적으로 실행된다. 그래서 비동기적인게 뭐가 중요하냐? 에 대한 물음에 답을 해보자면 어떤 결과를 바탕으로 실행되어야 하는 작업이 있다면, 아무생각없이 코드를 작성했다면 결과가 나오기 전에 작업이 시작되어 정확하지 않은 결과를 만들어 낼 수도 있다는 것이다. 정확한 결과를 위해 동기적으로 작업을 진행시켜야 하는 경우가 있는데 이 때..