개발

- "TypeScript is JavaScript with syntax for types", JavaScript 는 기본적으로 동적 타입의 언어로 대부분의 에러를 코드를 실행했을 때만 확인이 가능하므로 타입체크를 런타임이 아닌 빌드 타임에 정적으로 수행하도록 한다. 타입스크립트는 자바스크립트의 슈퍼셋으로 함수의 변환 타입, 배열, enum 등 기존에는 사용하기 어려웠던 타입 관련 작업을 쉽게 처리하도록 도움을 줌.function test(x, y) { return x / y}test(10, 2) //5test('X', 'Y') // NaN/* type check */function testWithTypeCheck(x, y) { if(typeof x !== 'number' || typeof y !== 'n..

Front-End/TypeScript 2024. 9. 27. 10:33

자바스크립트에서 유일하게 3개의 피연산자를 취할 수 있는 문법. true or false를 판별할 수 있는 조건문, ? 뒤에는 참일 경우 반환값, : 뒤에는 거짓일 경우의 반환할 값. if else의 대체제로 많이 사용하지만 조건 연산자 안에 조건 연산자를 중첩해서 사용할 경우 연산 결과를 쉽게 예측 하기 어렵기 때문에 가급적 사용을 자제해야 함./* 조건문 ? true 일 경우 값 : false 일 경우 값 */const value = 3console.log(value % 3 === 0 ? "참" : "거짓") // 참

Front-End/Javascript 2024. 9. 26. 13:35

JSX 내부에서 배열에서 바로 원하는 JSX를 반환하는 특성으로 인해 map, filter, reduce 이 3개의 메서드가 가장 자주 사용되며, 기존 배열의 값을 유지하며 새로운 값을 생성하기 때문에 안전하게 사용이 가능.map: 인수로 전달 받은 배열과 동일한 길이의 새로운 배열을 반환하는 메서드. 리액트에서는 특정 배열을 기반으로 요소를 반환할 때 자주 사용.const arr = [0 ,1 ,2 ,3 ,4]const doubleArr = arr.map((item) => item * 2) // [0, 2, 4, 6, 8]/* React Ex */const Elements = arr.map((item) => { return {items}}) filter: 콜백 함수를 인수로 받으며 truthy한 경우만..

Front-End/React 2024. 9. 26. 13:25

- 객체의 전개 구문은 순서가 중요함. 작동의 순서차이로 인해 전혀 다른 객체가 될 수 있다.const obj = {a:1, b:2}const obj1 = {c:3, d:4}const newObj = {...obj, ...obj1} // {a:1, b:2, c:3, d:4}const FirObj = {...obj, c: 10} // {a:1, b:2, c:10}const BacObj = {c: 10, ...obj} // {c:10, a:1, b:2} FirObj와 BacObj의 결과값은 다른데, 전개 구문 이후에 값 할당이 있다면 할당한 값이 이전에 전개했던 구문 값을 덮어씌움. 반대의 경우는 전개 구문이 해당 값을 덮어씀. 전개 구문에 있는 값을 덮어쓸 것인지 값을 받아들일지에 따라 순서에 차이가 발생..

Front-End/Javascript 2024. 9. 25. 18:21

전개구문(Spread Syntax)배열이나 객체, 문자열과 같이 순회활 수 있는 값에 대해 전개해 간결하게 사용할 수 있는 구문. 배열의 전개 구문은 ES6(ES2015), 객체의 전개 구문은 ES2018에 선보임. 배열의 전개 구문- 전개 구문 이전에는 배열 간 합성을 하려면 push, concat, split 등의 메서드를 사용했어야 되지만 전개 구문을 통해 간편하게 합성가능.const arr = ['a', 'b']const arr1 = [...arr, 'c', 'd'] // ['a', 'b', 'c', 'd']const copy = arrconst spread = [...arr]arr === copy // true 내용이 아닌 참조를 복사하기 때문에arr === spread // false 값만 복..

Front-End/Javascript 2024. 9. 25. 18:16

- Parser에서 토큰을 트리구조로 변경하게 되며 각 언어로 프로그래밍 된 소스코드는 추상적으로 바뀌게 되고 코드의 구조는 노드로 변경하게 된다. 이러한 노드의 집합으로 만들어진 자료구조를 AST, 추상 구문 트리라 함.- AST explorer 에서 각 Parser에 맞는 추상 구문 트리를 확인할 수 있다.const text = "text test";function testFunc(str) { console.log(str)}testFunc(text) - Javascript, acron 을 선택한 후 위의 예제를 입력하게 되면 아래와 같은 Tree view와 JSON view를 확인 가능하다.{ "type": "Program", "start": 0, "end": 88, "body": [ {..

Front-End/Javascript 2024. 9. 25. 17:28

- 자바스크립트의 컴파일 과정을 살펴보기 전에 컴파일 언어인 C 언어의 컴파일 과정을 알아봄.1. compile 언어의 compile 과정 (EX. C 언어) 1-1. preprocessor (전처리기)  : # 이 앞에오는 소스 코드를 처리하며(preprocessing directives) 주석제거, stdio.h 같은 헤더 파일을 코드 상으로 필요한 내용으로 채워주고 define으로 먼저 정의된 상수를 symbol table에 저장 등 매크로를 확장 및 치환하며 전처리된 코드로 변환. (*.c -> *.i)  1-2. compile  : 전처리된 소스 코드를 어셈블리어 코드로 변환하며 언어의 문법 검사, static 영역의 메모리 할당하며 front-end -> middle-end -> back-en..

Front-End/Javascript 2024. 9. 25. 16:09

const object = { a: 1, b: 2, c: 3, d: 4,}const {a, b, ...rest} = object// a 1// b 2// rest = {c: 3, d: 4}const object1 = { a: 1}const {a1: first} = object1// first: 1- 객체 내부 이름으로 꺼내오며 새로운 이름으로 다시 할당하는 것 가능. /* Example 1 */const object = { a: 1, b: 1}const {a=10, b=10, c=10} = object// a 1// b 1// c 10/* Example 2 */function Sample({a, b}) { return a + b}Sample({a: 3, b: 5}) //8/* Exampl..

Front-End/Javascript 2024. 9. 23. 18:16