TIL

hover 마우스가 해당 요소 위에 있을 때만 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen. active 마우스가 해당 요소를 클릭하는 순간에만 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen. focus 마우스가 해당 요소를 클릭하고 부터 다른 요소를 선택하기 전까지 계속 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen.

api 데이터를 받는데 시간이 오래걸려 loading중일때 보여줄 수 있는 페이지를 구현해야겠다고 생각했다. 기존에는 단순 이미지와 텍스트로 구현을 해두었었는데 너무 대충 만든 사이트라는 느낌을 주고 있는 것 같았다. 그래서 loadingbar를 만들어보자! 라는 생각으로 만들었다 import { useEffect, useState } from 'react'; import styled from 'styled-components'; export default function Loading() { const [filled, setFilled] = useState(0); useEffect(() => { if (filled setFilled((prev) => (pr..

하나씩 비교하면서 정리해 보겠다.. 먼저 tanstack-query에 대해 알아보아야 하지 않겠는가? 1. Tanstack-query 란? 주로 서버 상태를 관리하기 위한 도구로 사용된다. 서버에서 데이터를 가져올때 데이터를 업데이트할 때 데이터를 동기화할 때 발생하는 복잡성을 줄여준다! 이는 API호출을 통해 데이터를 가져오고, 그데이터를 UI에 표기하고자 할 때 매우 유용하다. 2. Tanstack-query 사용하는 이유 ! 💡 자동캐싱 : 데이터를 자동으로 캐시하고, 캐시된 데이터를 재사용함으로써 네트워크 사용을 최적화 하고 사용자 경험 개선 - 설명 : 성공적으로 패치된 데이터를 자동으로 캐시하고, 이를 통해 동일한 쿼리에 대한 중복 요청 방지 - 사용 방법: 지정된 쿼리 키(queryKey) ..

1. 주제 정하기 이번 주제는 Outsourcing 이었다. 그래서 이번 우리조는 YouTube API를 가져와 분석 시트템을 만들고자 했다. 주제: 유튜버 광고 분석서비스(조회 수, 구독자 수, 등 비교) 2. 프레임 만들기 주제를 정하고 나서 프레임을 만들었다. https://www.figma.com/file/QBw7my0Sjp5uJdXKF1wsWS/%EC%95%84%EC%9B%83%EC%86%8C%EC%8B%B1-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-10%EC%A1%B0?type=design&node-id=0-1&mode=design&t=dVvkou9cv3TvIb84-0 3. Router 구조 작성하기 프레임들을 만들었기 때문에 어떤 페이지들이 필요한지 어떤 기능들을 만..

1. 파일과 폴더 만들기 🔥clean code를 합시다 🔥 hooks📁 ㄴuseInput.js custom hook을 만들 때 파일은 js 파일로 만들어주어야 한다. 2. useInput.js 코드 작성하기 import { useState } from "react"; export default function useInput() { const [inputValue, setInputValue] = useState(""); const handInput = (e) => { setInputValue(e.target.value); }; const InitialValue = () => { setInputValue(""); }; return [inputValue, handInput, InitialValue]; } 3..

사용하는 이유 env 사용이유 개발을 하다보면 외부로 알려지면 안되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들이 있습니다. 이러한 값들을 보안이나 유지보수를 용이하게 하기 위해 .env 파일에 환경변수로 만들어 변수를 꺼내와 사용하는 것 입니다. .env 파일 .env 파일은 항상 프로젝트의 최상위 루트에 파일을 만들어 놓아야 합니다. 그리고 깃에 .env 파일이 올라가면 안 되기 때문에 꼭! gitIgnore에 .env를 꼭 추가시켜줍니다!! gitIgnore > .env CRA에서 .env 사용하기 1. 환경변수 작성 create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시하기 때문에 항상 변수명은 RE..

Axios를 사용하는 이유 알고가기 ..❗ Fetch와 Axios 의 장단점 Fetch - 장점 ● 자바스크립트의 내장 API이다. (추가적인 의존성 관리 필요 ❌) ● 가볍다. - 단점 ● 쿠키를 보내거나 받지 않는다. ● 오류처리가 직관적이지 않다. (오류 처리를 위한 추가적인 로직 필요) ●기본적인 기능만 제공. (인터셉터, 타임아웃 설정, 폼데이터 제출 등의 고급 기능 미제공) ● 브라우저 기반 API로 Node.js 서버에서 사용 불가. Axios - 장점 ● 브라우저와 Node.js 모두에서 사용 가능. ● 자동 JSON 데이터 변환 . ● 인터셉터 기능. (요청이나 응답을 가로채어 로직을 추가할 수 있음) ● 타임아웃 설정, 쿠키 전송 등의 고급 설정 지원. - 단점 ● 외부 라이브러리 의존..

.일반적으로 를 사용하는데 가끔 Navigate를 사용하고 싶다는 생각이 들면, 사용 시점과 무관하게 사용을 했는데 문득 궁금해졌다. 어떤 차이점이 있는지? 사용 시점이 있을까? 그래서 갑자기 찾아보았다.. 🤣🤣 목적 사용자가 클릭할 수 있는 하이퍼링크 생성. 페이지를 새로고침하지 않고 애플리케이션 내의 다른 경로로 이동할 수 있다. 장점 ● 선언적 접근 : 와 유사하게 선언적으로 라우팅을 구현할 수 있다. ● 사용용이성 : 링크를 통해 특정 경로로 이동하고자 할때 간단하게 사용할 수 있다. 단점 ● 이벤트 헨들러 내에서 프로그래매틱하게 라우팅을 제어할 수 없다. 즉, 사용자 상호작용 또는 조건에 따라 라우팅을 동적으로 변경하는 것이 어렵다. 🔥와 차이점 - 외부 프로젝..

HTTP란? HyperText Transfer Protocal HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층 프로토콜이다. 쉽게 웹에서 데이터를 주고받기 위핸 프로토콜이라고 생각하면 된다. 1. 작동원리 클라이언트 ↔ 서버 클라이언트가 웹브라우저를 통해 웹페이지에 접근하려 할 때, HTTP요청을 웹서버에 보낸다. 서버는 해당 요청을 처리 후 HTTP 응답으로 결과를 클라이언트에게 전송한다. 2. 주요특징 📌 비연결성(Connectionless) 클라이언트가 요청을 보내고 서버가 응담을 한 후 연결이 바로 종료. 장점 : 효율성이 높다 단점 : 각 요청이 독립적이다. 📌 무상태(Stateless) HTTP는 이전의 요청을 기억하지 않는다. 서버는 요청을 받으면 새로운 것으로 처리하고 ..

json server 1. JSON Server란? 프론트엔드 개발자가 백엔드 없이 RESTful API를 모의할 수 있도록 설계된 도구이다. 실제 서버를 구축하지 않고도 데이터를 생성, 읽기, 업데이트, 삭제 (CRUD) 하는 API를 빠르게 프로토타이핑하고 테스트할 수 있다. JSON Sever는 단순히 JSON파일을 데이터베이스처럼 사용하고, 이 파일에 대한 요청을 처리하기 위해 실제 서버를 에뮬레이트 한다고 한다!! 🔥에뮬레이트 (Emulator) 하나의 시스템이 다른 시스템의 기능을 모방하는 하드웨어나 소프트웨어를 의미 2. 설치 방법 - yarn add json-server - npm install json-server 3. JSON 파일 준비 데이터를 저장할 db.json 파일생성 { "po..