본문 바로가기

분류 전체보기443

[HTML] HTML의 기초 및 태그 정리 이번 포스팅부터는 이전에 모각소(모여서 각자 소프트웨어) 활동에서 Notion에 정리해두었던 HTML/CSS/JS 내용을 복습할 겸 포스팅을 해보려고 합니다 :) 1) HTML 이란 ? HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지) 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)를 담당하는 언어로써 HTML 태그를 통해 정보를 구조화할 수 있습니다. 💡 메타 데이터(Meta Data)란 ? 데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터 HTML5 문서는 반드시 으로 시작하여 문서 형식(document type)을 HTML5로 지정.. 2023. 2. 20.
[React] react-query의 개념 및 사용법 1) React Query 란 ? React Query는 리액트 애플리케이션에서 서버의 데이터를 조회하거나 캐싱, 업데이트, 에러 처리와 같은 비동기 로직을 지원하는 fetching 라이브러리입니다. Server-side와 Client-side 사이에서 비동기 로직을 보다 쉽게 다루게 해주며 Server State를 관리해줍니다. 리엑트 쿼리는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술입니다. 서버는 클라이언트에게 데이터베이스에 있는 정보를 전달해주는 역할을 하는데요, 여기서 서버는 api 서버, 클라이언트는 웹 브라우저에서 실행되는 우리가 작성한 리액트 앱을 의미합니다. DB에서 가져온 데이터를 클라이언트에서 보여주기 위해 우리는 ajax를 이용하는데요, 이 때 서버에서 .. 2023. 2. 20.
[React-Router-Dom] useMatch Hook에 관하여 import { useMatch } from "react-router-dom"; import styled from "styled-components"; const Tab = styled.span` color: ${(props) => props.isActive ? props.theme.accentColor : props.theme.textColor}; `; const Coin = () => { const matchPriceTab = useMatch("/:coinId/price"); const matchChartTab = useMatch("/:coinId/chart"); return ( Price Chart ) } React-Router v5의 useRouterMatch가 v6로 넘어오면서 useMatch로.. 2023. 2. 19.
[React-Router-Dom] useNavigate()와 useLocation()를 활용한 파라미터 전달 및 취득방법 이번 포스팅에서는 react-router-dom v6 에서 useNavigate()로 페이지를 이동하면서 파라미터를 '전달'하는 방법과 useLocation()로 파라미터를 '취득'하는 방법에 대해 알아보도록 하겠습니다. 1) 페이지 이동 시에 파라미터를 전달하는 방법 import { useNavigate } from 'react-router-dom'; export default function Test() { const navigate = useNavigate(); // 버튼 클릭시 호출 const move = () => { // 두번재 인자의 state 속성에 원하는 파라미터를 넣어준다. (id, job을 넣어봤다) navigate('/test2', { state: { id: 1, job: '개발자'.. 2023. 2. 19.
[백준 14503번] 로봇 청소기 import sys input = sys.stdin.readline from collections import deque #방의 크기 세로(n), 가로(m) n, m = map(int,input().split()) # 칸의 좌표(r,c), 방향(d) r, c, d = map(int,input().split()) # 영역 초기화 area = [[0]*m for _ in range(n)] # 방문 여부 확인 리스트 # visited = [[False]*m for _ in range(n)] count = 0 for i in range(n): area[i] = list(map(int,input().split())) def dfs(x,y,d): global count nx = [0]*4 ny = [0]*4 if .. 2023. 2. 17.
[Typescript] 타입스크립트란 ? 1) Typescript란 ? 타입스크립트는 자바스크립트에 타입(Type)을 부여한 언어, 즉 JavaScript로 컴파일 되는 트랜스파일러입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. TypeScript 파일(ts)은 웹 브라우저에서 바로 해석될 수 없습니다. 브라우저에서 해석 가능한 언어인 JavaScript로 변환되어야 브라우저는 이를 인식하고 해석할 수 있습니다. 즉, TypeScript를 JavaScript로 변환해야 웹 브라우저에서 실행이 가능합니다. 그래서 TypeScript가 JavaScript로 출력 되기에 컴파일러가 아닌, 트렌스파일러(Transpiler)로 불립니다. 그리고 이러한 언어를 메타 언어(Meta Language)라고 부릅니다. 2) 타입스크립트를 사용하는 이유 .. 2023. 2. 16.

티스토리툴바