자라나라 개발머리

프론트엔드 개발 프로젝트를 시작할 때, 프로젝트 초기 설정을 위해 첫 단계로 우린 무엇을 할까요? 저는 Vite를 주로 사용하는데요, 터미널에 Vite의 간단한 명령어 몇 줄로 app을 init 하곤 합니다. Vite를 사용하지 않고 프로젝트를 init 해도 될까요? 우린 왜 Vite와 같은 현대적인 빌드 도구를 사용하는걸까요? 좀 더 자세히 알아봅시다!처음 Vite로 init 시 가장 간단히 눈에 보이는 점: Vite는 프로젝트 초기 구성을 도와준다.Vite는 프로젝트를 초기화할 때 필요한 파일들을 자동으로 생성해준다.예를 들어, package.json 파일, 기본적인 index.html, src/ 폴더와 같은 기본 구조를 만들어준다.만약 React, Vue 프로젝트를 구성한다고 하면, 해당 템플릿을 ..

📖  최근에 실무에서 진행하는 프로젝트의 리액트 마이그레이션을 위해 공부하고 있는데, 같은 가상돔이라는 개념을 쓰면서도 어떤 프레임워크(혹은 라이브러리)냐에 따라 접근 방식이 다를 수 있다는 것을 최근에 알게 되었다. 이번 기회에 가상돔뿐만 아니라 React와 Vue의 가상돔 개념까지도 비교하면서 알아보도록 하자! 브라우저의 렌더링 과정 (Critical Rendering Path)브라우저가 화면을 렌더링하기 위해서는 다음과 같은 단계를 거치게 된다. 1. HTML 을 브라우저가 이해할 수 있도록 DOM(Document Object Model)이라는 일종의 객체(node) 로 변환한다.2. CSS 를 브라우저가 이해할 수 있도록 CSSOM(CSS Object Model) 으로 변환한다.3. 그리고 이 ..

함수형 프로그래밍이란?객체지향과 같이 프로그래밍 코드를 작성하는 하나의 방법론이다.예제를 보면 더 빠르게 이 함수형 프로그래밍이 어떤 모습인지 이해할 수 있다! 아래를 보자.// Non-functionalconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];let filteredArr = [];let sum = 0;for (let i = 0; i  위와 같은 예제를 함수형 프로그래밍으로 바꿔보면...// Functionalconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];console.log( "Result: " + arr .filter(num => num % 2 === 0 && !console.log(num)) .map(num => (cons..

JS 버전별 문법의 차이와 치환 방법💡 현재 ES6를 지원하지 않는 인터넷 익스플로러는 종료되었고, 대부분의 브라우저에서는 자바스크립트 ES6를 지원한다. 그런만큼 ES6부터 등장한 기능들이 많이 사용되고 있다. 대표적으로는 class, promise, 화살표 함수, 스프레드 연산자 등이 있다. 그런데 만약 ES6가 지원되지 않는 환경에서 개발해야할 때, 어떻게 하면 이러한 개념들을 하위 버전으로 치환할 수 있을까? 저번 주제에서 비동기 처리 패턴 역사에 대해 고민하면서 promise와 async-await이 등장하기까지의 과정을 다뤘기 때문에 이번에는 class 문법에 집중해보려고 한다. class를 적용한 코드를 하위 버전으로 치환해야할 경우 어떻게 작성해야 할지에 대해 알아보도록 하겠다.class..

💡 개발 공부를 시작하면서 지금까지 자바와 자바스크립트, 두 개의 프로그래밍 언어를 경험했다. 두 언어는 이름은 비슷하지만 전혀 다른 느낌을 주는데, 자바는 컴파일 언어이자 정적 타입 언어이고, 자바스크립트는 인터프리터 언어이자 동적 타입 언어이기 때문이다. 이번 주제에서는 인터프리터 언어, 컴파일 언어, 타입 언어과 같은 언어적 특징에 대한 개념들을 정리해보고 어떤 차이가 있고 언제 사용하면 좋을지에 대해 다루어 보도록 하겠다. script 언어?스크립트 언어는 기존에 존재하는 어떠한 프로그램을 제어하고 보조하기 위해 쓰이며, 그 프로그램 위에서 구동하는 언어를 말한다.일반적으로 스크립트 언어는 매우 빠르게 작성된 코드를 실행하기 위해 탄생하였기 때문에, 짧은 소스 코드 파일로 상호작용하는데 적합하도..

자바스크립트로 비동기 처리를 할때 promise, async-await 는 이제 빼놓을 수 없게 되었다. 최신 문법이라 간편하게 비동기 처리를 할 수 있어서 사용한다, 라고 넘어가기보다 왜 그렇게 하는지에 대한 질문을 자꾸 던져야 한다.자바스크립트는 왜 비동기 처리를 하는가? 그리고 비동기적 코드를 동기적으로 실행하면 어떤 이점이 있는가?비동기식 코드는 어떤 동작원리에 의해 동기적으로 실행되는건가?이러한 고민들에 대해서 이번 주제와 연결해 보려고 한다. 자바스크립트의 비동기 처리 역사를 짚어보면서 이러한 형태로 발전되기까지 무슨 고민이 있었고 어떤 과정을 거쳤는지 알아보도록 하겠다. 자바스크립트는 싱글 스레드 언어이다. 따라서 기본적으로 코드를 동기적으로(절차적으로) 수행한다.이러한 특징은 치명적인 약점..