전체 글

용어 정의 검색 엔진 최적화(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); }) ();..

프로젝트 중 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..