yh-jeon Full stack

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

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