리액트 프로젝트 생성

❗리액트 프로젝트 생성 전 Node.js 설치 필요❗환경: visual studio code 1. 프로젝트 폴더 생성Open Folder or Clone Git Repository를 통해 프로젝트를 생성할 폴더를 연다. 2. 프로젝트 생성생성된 폴더를 열고 상단 메뉴바에서 Teminal > New Terminal을 선택한다.  아래의 명령어를 입력해 프로젝트를 생성한다.npx create-react-app [프로젝트명] [--template typescript]   3. 프로젝트 실행아래의 명령어를 입력해 프로젝트를 실행한다.cd [프로젝트명]npm start my-react-app/├── node_modules/├── public/│ └── index.html├── src/│ ├── App.ts..

• format_list_bulleted Front-End/React.js
• · 2024. 3. 21.
• textsms

[JS] var, let, const

자바스크립트는 변수를 선언할 때 별도로 자료형 명시하지 않는다.변수에 입력되는 값에 의해 자료형이 판별되기에수나 객체를 선언할 때는 ES5 전에는 「var」라는 키워드를 사용했다.Number ➡️ var int_data = 1;String ➡️ var character1 = 'a';Boolean ➡️ var result2 = true;Array ➡️ var array1 = [1, 2, 3];그러나 「var」 의 문제점을 있어서 이를 보완할 「let」과 「const」키워드가 도입되었다.⚠️  「var」 주의사항1. Function Scope변수를 선언한 함수 내에서만 유효한 함수 스코프를 가지기 때문에 블록 스코프를 무시한다.function exampleScope() { if (true) { var..

• format_list_bulleted Front-End/JavaScript
• · 2024. 2. 22.
• textsms

[JS] JavaScript Engine

자바스크립트 엔진 자비스크립트 작성하고 해석해서 실행하는 것으로 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터다. 자바스크립트 코드를 한줄씩 읽어가며 컴퓨터가 알아들을 수 있는 기계어로 번역하는 것이다. * 프로그램: 특정 작업을 수행하는 명령어들의 집합 * 인터프리터: 코드를 한줄씩 내려가며 명령어 처리 자바스크립트 엔진 원리 엔진은 메모리 힙과 호출 스택으로 구성되어 있다. 호출 스택을 사용하여 실행 중인 코드의 흐름을 알 수 있다. 메모리 힙 - 동적으로 할당된 메모리가 저장되는 공간 - 객체, 함수, 배열 등이 할당 - 메모리는 자동으로 관리 호출 스택 - 함수 호출 관련 정보를 저장하는 공간 - 함수 호출 => 호출 스택에 추가 => 함수 실행 완료 => 호출 스택에서 제거 자바스크립트 ..

• format_list_bulleted Front-End/JavaScript
• · 2023. 10. 23.
• textsms

[JS] ECMAScript

자바스크립트가 나온 이후 인기를 끌자, IE 말고도 다양한 브라우저들이 개별적으로 자바스크립트 문법을 만든다. 그 결과로, 각 브라우저 간 호환성을 위해 개발자들은 많은 고생하게 된다. 자바스크립트를 개발한 넷스케이프 사는 ECMA International(국제 표준화 기구)에 표준화를 요청했고, 1997년 7월에 ECMAScript가 완성된다. ECMAScript ECM-262 기술 규격에 따라 표준화된 스크립트 언어이다. 스크립트 언어는 자바스크립트, 액션 스크립트, J 스크립트 등이 있다. * 스크립트 언어: 컴파일이나 링크 단계 없이 인터프리터에 의해 바로 코드를 실행하는 언어 * 컴파일(소스코드를 0,1로 이루어진 기계어로 번역) * 링크(소스파일, 라이브러리 하나로 병합) * 인터프리터: 소스..

• format_list_bulleted Front-End/JavaScript
• · 2023. 10. 17.
• textsms

Object를 Array로 변환

Tree 형태의 Object를 하나의 Array로 변환하는 함수이다. /* 변환 전 parent : { a : a, children : [{b : b}, {c : c}] } 변환 후 [{a, a}, {b : b}, {c : c}] */ function convertObjectToArray(tree) { const list = []; function pushItem(node) { if (!node) return; node.forEach(item => { list.push(item); const childrenKeyList = Object.keys(item).filter(key => Array.isArray(item[key])); if (childrenKeyList.length > 0) { childrenK..

• format_list_bulleted Front-End/Function
• · 2023. 8. 9.
• textsms

[JS] JavaScript

자바스크립트(Javascript)는 스크립트 언어이자 프로토타입 기반의 프로그래밍 언어이다. HTML은 웹 페이지의 기본 구조를 담당하고, CSS는 디자인을 담당하며, 자바스크립트는 웹 페이지의 동작을 담당한다. 자바스크립트란 프로토타입 기반 객체지향 언어이다.자바와 혼동되는 경우가 많으나 자바는 클래스 기반 객체지향 언어이다.JavaScript와 JAVA의 공통점: 객체지향class Dog { constructor(name) { this.name = name; } bark() { console.log(`${this.name} is barking!`); }}const myDog = new Dog("Buddy");myDog.bark(); //Buddy is b..

• format_list_bulleted Front-End/JavaScript
• · 2023. 5. 31.
• textsms