정의 1. VPN(Virtual Private Network) - 번역하면 가상 사설 네트워크 - 보통 웹에선 SSL VPN을 통해 사용자가 VPN을 통해 먼저 접속 하게 하고 암호화를 거친뒤 서버로 접속 하게 하는 역할을 한다. 2. VPC(Virtual Private Cloud) - 번역하면 가상 사설 클라우드 - AWS의 EC2(클라우드 컴퓨터)는 각각의 리전(Region)을 갖고 이러한 떨어져있는 EC2들을 묶어 연결해주는 것을 VPC라고 한다. 3. VPS(Virtual Private Server) - 번역하면 가상 사설 서버 - VPC와 비슷하게 보이겠으나, 차이는 클라우드 컴퓨터가 아닌 실제 컴퓨터를 하나의 가상 서버로 연결하는 것을 말한다. 용도 및 특징 1. VPN - 서버를 접근하는 네..
Develop
매우매우매우 간단하고 직관적인 State 관리 라이브러리 recoil를 배워서 정리 State 선언(atoms) 선언 코드 import { atom } from "recoil" export const isDarkAtom = atom ({ key : "isDark", default : false, }) State 불러오기 import { useRecoilValue } from 'recoil'; import { isDarkAtom } from './routes/atoms'; ... const isDark = useRecoilValue(isDarkAtom); ... set함수 불러오기 import { useSetRecoilState } from "recoil"; import { isDarkAtom } from..
공부 중 너무 개쩔어서 정리 url이 다른 tab메뉴 만들기 두개의 tab메뉴가 있고 클릭에 따라 리로드 없이 다른 url과 컨탠츠를 보여주는 페이지 router 설정 /:coinId 자식으로 두개의 컴포넌트 추가 const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "", element: , }, { path: "/:coinId", element: , children: [ { path: "chart", element: , }, { path: "price", element: , } ] } ], } ]) Outlet추가 Tab 메뉴 아래로 Outlet만 추가 하면 끝! {/* 탭메뉴 */} Chart Price {/..
공부 중 많은 데이터들에 대한 TypeScript의 interface 정의방법과 tip 정리 1. API로 받아온 데이터의 Type 정의필요 fetch로 api 받아오기 (코드) ... useEffect(() => { (async() => { const infoData = await ( await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`) ).json(); const priceData = await ( await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`) ).json(); setInfo(infoData); setPrice(priceData); setLoading(false); }) ();..
프로젝트 중 Reset css를 설정 중이였고, 'styled-components'의 'createGlobalStyle' 설정에 'DefaultTheme'을 추가 하는 과정에 생긴 오류를 정리. 코드 및 오류 코드 import { createGlobalStyle } from "styled-components"; export const GlogalStyle = createGlobalStyle` ... body { font-family: 'Gothic A1', sans-serif; background-color: ${(props) => props.theme.bgColor}; } a { text-decoration: none; } ` 에러 문구 ERROR in src/styles/Reset.ts:68:52 T..
모던자바스크립트 Deep Dive를 공부하던 중 ECMAScript라는 용어가 나와 정리하려고 한다. ECMAScript(ES)란? - ECMA(European Computer Manufacturer's Association)는 정보와 통신 시스템을 위한 국제적 표준화 기구 - 최신 ECMA는 Ecma International로 이름을 바꿈 - ECMAScript 는 Ecma International이 ECMA-262 기술규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 - 재밌는건 JavaScript가 먼저 나오고 이를 표준화 하기위해 생겼다고함 ECMAScript와 JavaScript의 관계 ECMAScript는 Script언어를 어떻게 사용해야 하는지 규격을 제시하고 JavaScript는..
