Languages/Javascript

Svelte 그거 좋긴한데, 코드 생태계가 React보다 작아서 스벨트쓰긴 좀 이른 듯? 레딧, 트위터, 유튜브 댓글에 보면 이렇게 써진 글들을 볼 수 있다. 만약 여러 선택지를 주면, 사람들은 짜증 내고 혼란스러워 하고, 하는 소리라곤 "작은 생태계" 밖에 없다. 이게 진짠가? 대부분이 틀렸다. Svelte 생태계는 React 와 비교해도, 절대 작지 않다. Svelte는 UI component 라이브러리 개수가 적다는 말은 사실이지만, SkeletonUI, Flowbite Svelte, Svelte UI, DaisyUI등 충분한 라이브러리를 가지고 있다. 만약 더 많은 UI component 라이브러리를 원한다면, 바로 자신만의 라이브러리를 만들고 배포하면 된다. 그리고, 다른 사람들이 자신만의 라이..

three.js 란? 웹 페이지에서, 3d 모델을 렌더링할 수 있게 해주는 javascript 라이브러리 Three.js – JavaScript 3D Library threejs.org Solid App www.logosevens.com 필요성 3D공간 인테리어, 3D제품 소개 등등 눈에 확띄고, 웹 사이트에서 더 다양한 경험을 할 수 있도록 해줌 ( 진정한 반응형이 되어가는..! ) 아이디어 3D 작업 프로그램의 용량이 높은 것으로 알고 있는데, 웹 사이트에서 3D작업을 진행한다면 더 효율적이지 않을까? 속도가 중요할 것 같다. 일반 사용자들에게 3D작업을 쉽게 해주는 툴? 실시간 동시 3D 작업??? 게임 호텔 내부 공간 확인 가능한 사이트..! 제품 맞춤 생산 사용자가 사이트에서 직접 제품을 바꿔가..

SWC란? 자바스크립트 컴파일러 ( js -> 기계어 ) Babel - javascript기반 (node.js) SWC - Rust기반 필요성 빠르다! ( 갓갓 Rust )

👉 Bun이란? JS, TS 프로젝트를 번들, 트랜스파일, 설치하는 javascript 런타임 ( 실행환경 ) Burn의 특징 Node.js 나 Deno 보다 빠르다. ( 메모리 친화적 ) 👉 설치 // Linux, macOS curl -fsSl https://bun.sh/install | bash JS/TS 파일 실행하기 // test.js console.log("Hello Bun!") // js, ts 실행 명령어 bun run test.js => Hello Bun! React 프로젝트 만들기 bun create react ./프로젝트폴더명 Next 프로젝트 만들기 bun create next ./프로젝트이름 프로젝트 실행하기 // 기존 create-react-app의 npm run start 기능 ..

👉 렉시컬 환경이란? JS에서 실행할 변수와 함수를 프로퍼티로 가지는 객체 ( JS가 실행될때, 처음 만들어진다. ) 렉시컬 환경 사용방식 Javascript가 실행되며, 참조가 필요한 변수와 함수를 Key값을 통해 가져온다. JS 렉시컬 환경의 종류 1. 스크립트 전체 객체 2. 실행중인 함수 객체 3. 코드블록 객체 렉시컬 환경의 구성 환경 레코드 - 모든 지역변수를 프로퍼티로 저장 ( this, 함수 매개변수 등등 ) 외부 렉시컬 환경 - 현재 렉시컬 환경을 감싸고 있는 부모 렉시컬 환경 렉시컬 환경 생성 과정 JS 코드 실행시, 렉시컬 환경 객체 생성 JS 코드에 선언되어 있는 변수들을 "글로벌 레코드"에 저장 함수, 블록 단위로 나누어 "로컬 레코드"를 만들고, 변수를 저장 코드 실행 과정 필요..

👉 화살표 함수란? 다른 곳으로 전달되더라도 컨텍스트( )를 잃지 않도록 만든 함수. 🚩 특징 1. 간단하다 // 기존 함수 사용방식 function(){ ... } // 화살표 함수 사용방식 () => { ... } 2. this가 없다. 화살표 함수는 this가 없고, 만약에 화살표 함수 내부에 this를 사용하려하면, 외부렉시컬환경의 this를 가져온다. 3. arguments가 없다. 모든 인수에 접근할 수 있게 해주는 객체인, arguments를 지원하지 않는다.

👉 this 란? 메서드에게, 자신이 관리해야하는 객체를 알려주는 것 // foo1() 메서드는 cat 객체를 관리해야 하므로, 이때 this로 cat을 전달한다. const cat = { name: 'meow', foo1: function(){ console.log(this.name); } }; this가 필요한 이유 메서드는, 객체 내부의 멤버변수(property)들을 다루기 위해 존재한다. ( 객체 지향 프로그래밍 이므로 ) 그러려면, 자신이 속한 객체에 대한 정보(this)를 알고있어야 한다. this없이, 자신이 속한 객체 정보 전달하기 // this를 사용하지 않고, 자신이 속한 객체를 직접 적어준 경우 let cat = { name: 'meow', foo1: function(){ consol..

this란? 객체의 메서드가, 객체에 저장된 다른 속성에 접근할 수 있도록 하는 메모리주소 (포인터) ( 객체 자신의 메모리 주소 )

null undefined 뜻 비어있음, 알 수 없음, 존재하지 않음 ( null 이 할당되어 있음 ) 값이 할당되지 않음 (null 조차) 역할 비어있거나 알 수 없는 상태를 나타냄 값이 할당되지 않은 변수를 초기화 할때 사용 undefined는 시스템이 변수를 자동으로 초기화 해줄때 사용하고, null은 사용자가 변수가 비어있음을 직접 설정하고자 할때 사용한다.