F.E

[JavaScript] 이터러블(interable), 이터레이터(iterator), 제네레이터(Generator)

이터러블(interable) 이터레이터를 리턴하는 [Symbol.iterator] 메소드를 가지고 있는 자료를 반복할 수 있는 객체다. 우리가 많이 사용하는 배열도 이터러블이며, 이터러블은 for of문으로 순회 할 수 있다. 만약 [Symbol.iterator] 메소드를 제거한다면, for of문으로 순회 할 수 없게 된다. const arr = [1, 2, 3] for(const a of arr) console.log(a) // 1, 2, 3 //[Symbol.iterator]를 없애본다면? arr[Symbol.iterator] = null for(const a of arr) console.log(a) // ERROR 이터레이터(iterator) 이터러블 객체의 [Symbol.iterator] 메소드..

[JavaScript] 정규식에 대해 알아보자

정규식(정규 표현식) 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JavaScript에서는 정규식도 객체이기에, RegExp의 exec 등의 메서드를 사용할 수 있다. 정규 표현식 만들기 const re1 = /ab+c/ const re2 = new RegExp('ab+c') //정규식은 // 안에 찾고자 하는 패턴을 작성하고 여러가지 옵션을 준다. Groups and ranges | 는 또는을 의미한다. const reg = /HI|HELLO/ // HI or HELLO () 는 그룹을 의미한다. const reg1 = /(HI|HELLO) | (BYE)/ // HI거나 HEllO를 찾거나 혹은 BYE const reg2 = /gr(e|a)y/ //grey 혹은 gray 탐색 (?:) 찾지만, 그..

[React] useInput Hook 사용하기

기존의 useState를 이용하는 것이 아닌 useInput이라는 함수를 만들어서 input 상태를 관리한다. import { useState } from "react" const useInput = (init) => { const [item, setItem] = useState(init) onchange = (event) => { setItem(event.target.value) } return { item, onchange } } export default function Counter() { const name = useInput() return ( Enter Your Name Name : {name.item} ) }

[React] useState 사용하기.

useState useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 React Hook이다. useState는 react로부터 import를 하여 사용할 수 있다. const [상태, 상태변경 함수] = useState(초기값)의 형태로 작성을 하게 된다. import {useState} from "react" const [item, setItem] = useState() const [상태, 상태변경 함수] = useState(초기값) useState 비동기 처리 useState의 setState가 비동기로 작동하기에, 가끔 문제가 있을 수도 있다. 그 때는 useState setState를 함수를 이용한다. const [item, setItem] = useState() // 기존 set..

[React] Vite를 이용하여 React 프로젝트 만들기.

Vite 공식 사이트에 좀 더 자세한 설명이 있습니다. Vite Vite 차세대 프런트엔드 개발 툴 당신이 원했던 개발 환경을 시작해보세요. vitejs-kr.github.io NPM을 이용한 Vite Project 생성하기. vite는 14.18.0이상의 Node JS가 필요하다. npm create vite@latest 위의 명령어를 입력하면, 프로젝트 이름, 패키지 이름과 어떤 프레임 워크를 사용할 지 선택하면 된다. 설치가 끝나면 생성한 폴더로 들어가, 필요한 모듈을 설치한다. npm install # npm install만 입력하면 package.json 기준으로 적힌 모듈을 설치한다. 폴더 구조는 React와 비슷하지만 JSX 확장자를 사용한다는 차이가 있다. vite React 실행 npm ..

[JavaScript] Symbol(심볼)

JavaScript는 6개의 원시 타입(Number, String, null, undefined, Boolean, Symbol)과 1개의 객체 타입(Object)를 가지고 있으며, 심볼(Symbol) 타입도 6개의 원시 타입 중 하나로 ES6에서 추가 되었다. Symbol이란? 객체의 속성 키(Property Key)를 고유하게 설정하여, 속성 키의 충돌을 방지하기 위해서 사용된다. Symbol의 생성 Symbol은 함수 Symbol()를 통해 생성한다. const symbol1 = Symbol() const symbol2 = Symbol("Hello") console.log(symbol1) //Symbol() console.log(symbol2) //Symbol(Hello) Symbol은 유일성이 보장..

[JavaScript] 리스트 순회, for문, for of문, for in문, for each문

리스트 순회란 리스트(배열)에 있는 값을 전부 돌린다는 것을 의미한다. 기존의 ES5에서는 for문을 이용한 리스트 순회를 하였지만, ES6가 생기면서 다양한 방법이 생겼다. For 문을 이용한 리스트 순회 가장 기본적인 순회 방법이다. //ES5 var list = [1,2,3,4,5] for (var i = 0; i

[TypeScript] any, unknown, void, never

any any는 TypeScript의 보호장치에서 벗어나고 싶다면 사용하는 자료형이다. 아무 타입이나 될 수 있다. const a : any[] = [1,2,3,4,5] const b : any = true console.log(a+b) // Success "1,2,3,4,5true" unknown unknown은 API에서 응답을 받을 때 등 자료가 어떤 타입이 올 지 모를 때 사용하며, 타입을 먼저 확인해야 사용할 수 있다. let a : unknown const b = a + 1 // Error -> b의 타입이 unknown이라 타입을 확인 할 수 없어 에러 발생 if(typeof a === "number"){ const c = a + 1 // if문에서 타입이 number임을 확인하여 성공 } ..

[TypeScript] ReadOnly : 수정 불가능한 데이터

readonly readonly는 타입 스크립트에서 사용하는 것으로, 선언을 하면 데이터의 수정이 불가능하다. 객체에서의 readonly const person : { readonly name : string, age : number} = { name : "피노", age : 22 } person.age = 23 person.name = "피노2" // Error -> readonly이기에, 수정 불가능 배열에서의 readonly const numbers : readonly number[] = [1,2,3,4] numbers.push(5) // Error -> 배열은 readonly로 수정 불가능

[TypeScript] TypeScript 시작하기 - 자료형

1. 타입 스크립트 타입 스크립트는 변수 뒤에 타입을 지정 할 수 있다. 변수 타입에 맞지 않는 값을 넣으면 에러 발생 const a : string = "Hello World" const b : string = 123 // ERROR! 타입 스크립트의 타입 시스템 number : 숫자 자료형 string : 문자열 자료형 boolean : 참, 거짓 자료형 배열, 객체, 함수 ... const a : string = "Hello world" const b : number = 123 const c : boolean = true const d : string[] = ["a", "b"] const e : {name : string, age : number} = { name : "피노키오", age : 22 ..