yh-jeon Full stack

useState리액트에서 상태 변수를 선언하고 관리하는 데 사용하는 훅입니다.가장 기본이면서도 가장 많이 사용하는 중요한 훅입니다.문법const [state, setState] = useState(initialState);기본 사용법import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me );}😵 꼭 count, set*** 형식의 이름이어야 하나요? 아니에요. 배열의 구조 분해 할당을 떠올려보면 이해하기..

any 타입: 자바스크립트에 존재하는 모든 값을 오류 없이 받을 수 있음. any로 지정한 타입에 임의의 값을 할당하더라도 오류가 발생하지 않습니다.let state: anystate ={value:0}state = 100;state = "hello world!"state.foo.bar = () => console.log("this is any type") 타입이 명시되지 않은 any타입을 변수에 할당하는 것은 지양해햐 할 패턴! type과 interface :객체를 입력할 때는 주로 type과 interface 형태로 지정합니다. 중괄호{}를 사용한 객체 리터럴 방식으로 타입을 매번 일일이 지정하기에 중복되는 요소가 많기에 지정합니다. props  리액트에서 ‘props’는 컴포넌트 간에 데이터를 전달..

Google Fonts 사이트에 들어가서 지정할 폰트를 고른 후에 Get embeded code를 입력하여 장바구니에 들어가고 나서장바구니에서 사용할 폰트를 적용시켜줍니다. 1. nanum pen script 와 black hans sans 글꼴을 지정해 줍니다. 이때 장바구니에서 web을 들어가서 코드를 복사하여 각각 붙여줍니다.css의 경우 css 파일을 디렉터리 내부에 지정하여 작성해 줍니다.  font.css@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap");.nanum-pen-script-regular { font-family: "Nanum Pen Scr..

리액트 컴포넌트리액트는 컴포넌트를 작성할 때 클래스형과 함수형의 두 가지 방식으로 작성할 수 있습니다. 아직까지 두 방식 모두 지원하고 있지만, 공식적으로 리액트에서는 더 이상 클래스 컴포넌트 방식을 사용하지 말기를 권장합니다. 따라서 되도록 클래스 컴포넌트를 배우지 않아도 되지만, 레거시(Legacy) 유지 보수 차원에서 간단하게 살펴봅니다.함수형 컴포넌트와 클래스형 컴포넌트리액트 프로젝트를 초기 생성하면 함수형 컴포넌트 방식으로 코드가 작성되어 있습니다. 해당 코드를 리액트 방식으로 변경하면 아래와 같이 변경할 수 있습니다. 함수형 컴포넌트import { useState } from 'react'import reactLogo from './assets/react.svg'import viteLogo f..

타입스크립트란?타입스크립트는 별도의 새로운 언어가 아니라, 자바스크립트에 타입(type)을 추가한 확장 언어입니다. 새로 배우는 언어가 아니기 때문에 학습 난이도는 높지 않은 편이며, 처음에는 복잡해보이지만, 나중에 가도 복잡합니다.. (쉽게 쉽게 할거면 자바스크립트 쓰자.. 😉)설치타입스크립트로 작성된 코드를 실행하려면 타입스크립트 코드를 자바스크립트 코드로 ‘변환’해주는 작업이 필요합니다. 이러한 변환 작업을 전문 용어로 ‘컴파일(compile)’이라고 합니다. 컴파일을 하기 위해서 여러가지 방법이 있지만, 저희는 Node.js를 이용하는 방법으로 합니다.Step 1실습에 사용할 폴더를 하나 생성하여 비주얼 스튜디오 코드로 열어줍니다.Step 2비주얼 스튜디오 코드의 가장 루트 폴더 경로 내에서 아..

NPM, NPX, YARN, → PNPM, BURN본격적으로 리액트를 공부하려고 할 때, 터미널에 가장 먼저 치는 명령어 형식은 npm(yarn) 또는 npx가 포함된 명령어를 입력하게 됩니다. 이때, npm, yarn, npx는 무엇일까요?NPM(Node Package Manager)NPM은 Node Package Manager의 약자로 Node.js의 기본 패키지 관리자입니다. NPM은 Node.js와 함께 설치되며, Node.js 애플리케이션의 종속성을 관리하고 패키지를 설치, 업데이트, 제거하는 데 사용됩니다.주요기능패키지 설치:dependency에 설치 : npm install —savedevDependency에 설치: npm install —save-dev패키지 제거: npm uninsta..

VSCode Extensions학습 과정에서 유용하게 사용할 수 있는 VSCode 익스텐션을 소개합니다. Material Icon Theme - Philipp KiefVSCode 익스플로러(Explorer) 트리의 아이콘을 아름답게 변경해주는 익스텐션. Material Theme - EquinusocioVSCode 화면 테마 익스텐션 Auto Close Tag - Jun HanHTML 태그의 종료 태그를 자동으로 추가해주는 익스텐션 Auto Rename Tag - Jun Han태그의 이름을 수정하면 종료 태그도 함께 수정하게 해주는 익스텐션 Code Runner - Jun Han자바스크립트 코드를 NodeJS로 실행하게 해주는 익스텐션  ES7+ React/Redux/React-Native snippet..

TypeScript 함수 선언문function 함수 이름(매개변수1: 타입1, 매개변수2: 타입2, ...) : 반환값 타입 { 함수 몸통} 타입스크립트 함수 선언문 예function add(a: number, b: number): number { return a + b} void 타입값을 반환하지 않는 함수는 반환 타입이 void입니다. void타입은 함수 반환 타입으로만 사용합니다.void 타입 예function printMe(name: string, age: number): void { console.log(`name: ${name}, age: ${age}`)} 함수 시그니처함수의 타입을 말합니다.(매개변수1 타입, 매개변수2 타입, ...) => 반환값 타입함수 시그니처 사용 예let pri..

name과 age라는 속성을 가진 클래스 선언class Person1 { name: string age?: number}자바스크립트 & 타입스크립트의 기본 타입유형자바스크립트 타입타입스크립트 타입수 타입Numbernumber불리언 타입Booleanboolean문자열 타입Stringstring객체 타입Objectobject 타입 주석자바스크립트 변수 선언문을 확장하여 타입을 명시합니다. let 변수 이름: 타입 [=초깃값]const 변수 이름: 타입 = 초깃값let n: number = 1let b: boolean = true or falselet s: string = 'hello'let o: object = {} 📌TypeScript는 JavaScript와 다르게 let으로 선언한 변숫값은 타입 주..

📌 소스 코드를 여러 개의 모듈로 분할하면 각각의 모듈에 어떤 내용이 있는지를 서로 알려야 하므로export와 import라는 키워드를 사욯합니다.export는 기능을 제공하는 쪽에서 사용 / import는 다른 모듈의 기능을 이용하는 쪽에서 사용합니다. 심벌이란? ECMAScript 2015부터, symbol 은 number 와 string 과 같은 기본 데이터 타입입니다.symbol 값은 Symbol 생성자를 호출함으로써 생성됩니다.let sym1 = Symbol();let sym2 = Symbol("key"); // 선택적 문자열 키 심벌은 불변하고 유일합니다.let sym2 = Symbol("key");let sym3 = Symbol("key");sym2 === sym3; // false, 심벌..