public/index.htmlindex.html을 보면 root라는 id를 가진 div 태그가 있다.이 div태그는 root DOM을 생성하고, src 폴더 내부의 react 코드를 추가해서 DOM Tree를 만든다.src/index.jssrc/index.js 파일에

지금까지 스코프는 변수의 범위라고 알고 있었기 때문에 다 안다고 생각했었다.근데 어떤 자료를 읽다보니 렉시컬 스코프(?) 라는 단어를 보고 다시 공부해야 되곘다 싶어 공부해 봤다...scope의 한국어 뜻은 범위이다뜻 자체로 scope는 변수에 접근할 수 있는 범위이다

nextjs 공부를 시작했는데 노마드코더 nextjs 강의가 무료길래 먼저 실습 해보고 도큐먼트를 살펴보려고 한다.❗️ 강의는 js 강의이지만 나는 ts를 선호하기 때문에 강의 내용을 ts로 정리하려 한다.내가 이해한 바로는 Nextjs는 자기 서버가 있어서 서버사이드

MLP 란 여러 개의 퍼셉트론 뉴런을 여러 층으로 쌓은 다층신경망 구조입력층과 출력층 사이에 하나 이상의 은닉층을 가지고 있는 신경망이다.처음엔 퍼셉트론이라는 이진 분류기가 시작이었다.근데 이 퍼셉트론은 선형분류 밖에 하지 못했다.하지만 선형 분류로는 정확한 분류를 할

비선형분류모델로 많이 사용되는 분류기 중 하나이며 데이터에 대한 분류 이유를 설명할 수 있다는 특징을 가지고 있다. 동일한 데이터 셋에 대해 여러 개의 다른 구조의 트리 모델을 학습시킬 수 있다.의사결정나무 모델을 학습하는 알고리즘. (그리디한 알고리즘)그리디한 알고리

머신러닝에 사용되는 데이터는 그 값이 너무 크거나 작지 않고 적당한 범위 (-1에서 ~ 1사이)에 있어야 모델의 정확도가 높아진다고 알려져있다.값의 범위를 0 ~ 1로 변환시킨다ex) 결과 0 ~ 1로 변환 시킴 -> 중간에 큰 값이 있어도 균일하게 변환됨값의 볌위를

웹팩 > 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하

https://astexplorer.net/ 에 들어가서 @babel/parser로 console.log('abc')에 대해 AST를 만들면 아래와 같다콘솔 로그 코드는 ExpressionStatement 노드로 시작한다.함수 또는 메서드를 호출하는 코드는 C

polyfill 은 충전솜이라는 뜻을 가지고 있다.바벨만 있으면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있을것 같지만 없는 부분도 있기 때문에 이 부족한 부분을 채우기 위해 polyfill을 사용한다.📌 폴리필은 런터임에 기능이 존재하는지 검사해서 기

바벨 설정 파일에서 사용할 수 있는 다양한 속성중에 extends, env, overrides에 대해 알아보려 한다.extends의 뜻처럼 기존 설정을 가져와서 연장하는 것이다.만약 동일한 플러그인이 연장되면 기존 플러그인의 옵션은 현재 플러그인의 옵션으로 덮어써진다아

Babel은 JavaScript 컴파일러입니다.Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 도구 체인입니다. 위 설명은 공식 문서에서 가져온 문장이다

현재까지 프로젝트 진행하면서 성능 최적화까진 필요 없어서 안해봤는데 실전 리액트 프로그래밍 책에 잘 설명되어 있어서 정리해 보려 한다리액트가 실행될 때 가장 많은 CPU 리소스를 사용하는 것은 렌더링이다.리액트의 렌더링 단계를 살펴보면이전 렌더링 결과를 재사용할지 판단

실전 리액트 프로그래밍을 읽으면서 리액트 코드 작성을 할떄 가독성과 생산성을 높여주는 방법을 정리해 보려 한다.책에는 자바스크립트 기준으로 나와있는데 나는 타입스크립트를 사용하기 때문에 내가 사용하던 방법이랑 합쳤다파일의 최상단에는 속성의 타입을 정의한다. 처음 코딩할

Server Side Rendering이란 클라이언트가 매번 서버에게 데이터를 요청하여 서버에서 처리하는 방식서버에서 렌더링 준비를 마친 html 파일과 js 코드를 브라우저에게 넘겨 준 뒤에 브라우저에서 html을 렌더링하고 js 파일을 다운 받아 html 코드와 연

기본적인 hook 사용법은 알기 때문에 좀더 깊게 알아 보려고 한다함수형 컴포넌트에서 state값을 관리하기 위해 사용하는 hook리액트는 상태값 변경을 거의 배치로 처리한다📌 리액트 내부에서 관리하는 이벤트 처리 함수에 대해서만 배치로 처리한다배치는 일을 한번에 모

React는 동작할 때 가상 돔을 이용해서 이전과 이후의 가상 돔을 비교해서 변경된 부분만 실제 돔에 반영한다.❓ 여기서 react가 가상 돔을 뭘 보고 비교할까❗️ 위 사진처럼 돔은 리액트 요소들로 구성된 트리 형태이다 따라서 이 리액트 요소들을 비교해서 달라진 것만

자바스크립트에서는 비동기 처리를 위해 콜백함수를 사용한다 이 콜백 함수의 콜백지옥을 보완하기 위해 프로미스가 생겨났다.❓ 프로미스에대해 공부하다보면 .then() 이것도 프로미스고, .catch()도 프로미스고 반환값도 프로미스고 뭐가 프로미스인지 이해가 잘 안간다.내

면접에서 var 대신 let const를 사용하는 이유가 뭔가요라고 질문 받았을때 당황해서 변수 할당에 대해서만 대답하고 다른 대답은 하지 못했다. 또 언제 면접볼지 모르니 한번 제대로 정리해서 머리속에 집어넣어 보려 한다!ES5까진 변수선언 방식이 var 밖에 없었는

리액트 어플리케이션의 페이지 전환은 SPA(single page spplication)로 구현한다.SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다. 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체

모듈 번들링 -> html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식웹팩은 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어 주는 것이다.웹 페이지 방식이 단일 페이지 어플리케이션으로 전환되면서 한 페이지에 자바스크립트