전체 글

[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..

[Http] HTTP에 대해서 알아보자.

HTTP HyperText Transfer Protocol HTTP의 특징 클라이언트 서버 구조 무상태 프로토콜(Stateless), 비연결성 HTTP 메세지 단순함, 확장 가능 HTTP 버전 HTTP/1.1 : TCP -> 주로 해당 버전 사용 HTTP/2 : TCP HTTP/3 : UDP 1. 클라이언트와 서버 구조 클라이언트와 서버는 요청(Request)과 응답(Response)을 주고 받는다. 클라이언트는 요청을 보내고 응답을 대기하며, 서버는 요청에 대한 결과를 만들어서 응답한다. 2. 무상태 프로토콜(Stateless) 서버가 클라이언트의 상태를 보존하지 않기에, 서버 확장성이 높지만, 클라이언트가 지속적으로 추가 데이터를 전송해야한다. 3. 비연결성 HTTP는 연결을 유지하지 않는 모델로, ..

[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 ..

[인터넷 통신] URI

URI (Uniform Resource Identifier) Uniform : 리소스 식별하는 통일된 방식 Resource : 자원, URI로 식별 가능한 모든 것 Identifier : 다른 항모과 구분하는 데 필요한 정보 URI는 URL과 URN을 모두 포함하지만 주로 URN은 사용이 되지 않는다. URN (Uniform Resource Name) : 리소스에 이름을 부여한다. URL (Uniform Resource Locator) : 리소스가 있는 위치를 지정한다. 프로토콜(https) 호스트명(www.google.com) 포트 번호(443) 패스(/search) 쿼리 파라미터 예시 # 구조 scheme://[userinfo@]host[:port][/path][?query][#fragment] # ..