전체 글

서론 우연히 커뮤니티에서 HCI라는 용어를 발견하여 조사해 보았다. 구글링을 하면 HCI로 두가지 정도 개념이 나온다. a. HCI(Human Computer Interaction) b. HCI(Hyper converged Infrastructure) 나와 관련 있는 부분은 첫 번째이다. 하지만 궁금해서 두 번째 하이퍼 컨버지드 인프라에 대해서 잠깐 검색해 봤다. * HCI(Hyper converged Infrastructure) - 전통적인 서버와 스토리지의 구성은 3-티어 구조(서버-스토리지-네트워크)로 구성한다. - HCI는 스토리지와 서버를 하나로 묶는 아키택쳐이다. - 이때 외장 스토리지는 서버에 내장된 스토리지를 활용하며 이것을 운용하기 위해 SDS(Software Defind Storage)..

용어 정의 검색 엔진 최적화(Search Engine Optimazation, SEO) - 검색 엔진으로 부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정 검색 엔진 - 웹 사이트를 검색하기 위한 프로그램 - FTP 서버나 웹사이트의 파일 검색 결과를 포함 (React로 만든 홈페이지가 검색앤진에 노출이 잘 안되는 이유인듯?) - 로봇(또는 봇)이라고 불리는 특별한 프로그램을 이용해 웹사이트들에 정보를 자동 수집 크롤링 - 인터넷 상에 많은 웹사이트를 URL 단위로 긁어서 구글 검색 엔진의 데이터 베이스로 모으는 과정 엔덱싱(색인) - 웹페이지에 담긴 정보와 콘텐츠를 파악하여 데이터를 저장 하는 과정 랭킹 - 색인된 웹페이지의 데이터 및 해당 페이지가 생성된 웹사이트의 SEO ..

소속구분 1. 프로젝트 수행사에 소속된 기획자 - SI (System Integration) : 기업이 필요로 하는 정보시스템에 관한 기획부터 개발과 구축, 나아가서는 운영까지 모든 서비스를 제공하는 일 - SM (System Management) : 시스템 운영 업무 - Web agency : SI와 비슷 하지만 웹 전반적인 기획과 디자인적 비중이 큼 2. 인하우스 프로젝트/프로덕트 기획자

매우매우매우 간단하고 직관적인 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); }) ();..