콛 다이어리

json-server:비동기 프로그래밍 테스트를 위해 만드는 가짜 서버 axios:fetch를 대체하는 라이브러리 TanStack Query:클라이언트 상태, 서버 상태 Zustand:Redux를 대체하는 전역상태 라이브러리 tailwind css:styled-component를 대체하거나 상호 공존하는 방식 반응형 웹:다양한 사용자 환경 (노트북, 모바일, 데스크탑 등)

useEffect:컴포넌트가 렌더링 된 이후마다특정 작업을 수행하게 하는 훅 1. import 해야함2. 어떤 동작에 대한 트리거(trigger)가 존재3. 컴포넌트가 보일 때와 보이지 않을 때,계속 동작을 하기 때문에컴포넌트의 라이프 사이클과 굉장한 밀접한연관이 있음

공부하다보면 사용하는 이유가'간편한 유지보수', '유지보수 하기 편해서'인 것들이 많다. 유지보수가 웹을 계속 보존할 수 있게수선한다는 단어인 것 같은데혹시 내가 놓치고 있는 부분이 있나 싶어서좀 더 알아보았다.사실 여기저기 찾아보았지만 제대로 나오지 않아챗 gpt에 물어본 내용과 섞여있당,, 유지보수의 통상적 의미는기능을 확인하고 서비스를 제공하고장치의 필요한 부분을 수리, 교체, 장비 등을 의미한다. 하지만, 소프트웨어에서는 유지보수는 시스템, 장비, 소프트웨어 또는 인프라가 원활히 작동하도록 정기 점검 및 결함을 수정하는 활동이다.즉, 기계나 프로그램이 잘 작동하도록 점검하고 고치는 일이다. 이를 통해 장비나 시스템의 수명을 연장하고,성능을 최적화하며,예기치 않은 고장이나 오류를 예방할 수 있다. ..

Baas(Backend as a system)클라우드 기반의 백엔드 시스템1. PostgreSQL을 기반으로 하는 Baas 플랫폼2. 실시간으로 데이터 변화를 감지하고반응할 수 있는 기능을 제공3. 관계형 데이터베이스 사용 사용 방법1. 터미널에 yarn add @supabase/supabase-js 입력2. 좌측 메뉴에서 'Table Editor' 선택3. 화면 중앙에 'Create a new table' 클릭4. Enable Row Level Security (RLS): 보안    1) 체크시, 보안 설정5. 컬럼 값 넣고 'save' 버튼 클릭 장점1. 개발 속도 향상2. 간편한 유지보수3. 자동 확장 단점1. 유연성 부족    1) 기능 제한   2) 사전 설정된 구조(슈퍼베이스는 이미 정해진 방..

포켓몬 도감 강의를 보는데설명해주시는 분이처음부터 export defalut를 입력을 하셨다.. 맨 마지막에export default 넘겨주는 친구이렇게 입력하는 방법 아닌가..?해서 튜터님께 가봤는데 마지막 줄에 export default 대체? 그러니까,, export 하는 방법이 두 가지가 있는데한가지 방법은마지막 줄에 export default 넘겨주는 친구이렇게 사용하는 방법이고다른 한가지 방법은포켓몬 도감을 설명해주셨던 분처럼맨 처음부터 사용하는 방법이 있다고 하셨다.  방법이던 상관은 없다고도 하셨다. 클래스에 관한 이야기도 하셨는데클래스를 모르겠어서 귀에 들어오지 않았다.조만간 클래스에 관한 공부도 해야겠다.

1. 함수형 컴포넌트    1) 상태 변경 함수(함수)로 값을 변경시킬 수 있음    2) 함수의 인자(매개변수)에는 현재 state를 가져올 수 있음    3) 중괄호에는 변경할 코드를 입력하면 됨2. 배치 업데이트를 하는 이유    1) 불필요한 리렌더링을 방지하기 위함 (렌더링 최적화)배치 업데이트(Batch Update): 리액트가 더 나은 성능을 위해여러개의 state 업데이트를하나의 리렌더링으로 묶는 것을 의미

Home.jsx에 있는'포켓몬 도감 시작하기' 버튼을 클릭했을 때Dex.jsx 컴포넌트로 이동하는 작업을하고싶었다. 어제 강의를 본걸 기억해서 하려고했는데잘 기억이 안 나서공식문서 보다는 블로그가 더 잘 설명되어있을 것 같다는 생각에여러 블로그를 찾아봤는데 도저히 안 되서결국 다시 강의를 보고 하게 되었다.   App.jsximport { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import Dex from "./pages/Dex";const App = () => {  return (    BrowserRouter>      Routes>        Route path="/" element..

강의를 몇 번이나 되돌리기 했는지찾아본 블로그만 몇 개인지 모르겠다.  라우트(Route):서로 다른 네트워크 간 데이터를 전송하고전송한 데이터를 받는 경로경로, 컴포넌트 및 기타 옵션을 포함하며, 이 배열은 일반적으로 라우터의 설정에서 사용 라우터(Router):라우팅 관련 라이브러리가 많으며사람들이 가장 많이쓰는 라이브러리 라우팅(Routing):엔드 포인트(URI, 경로)의 정의해당 엔드포인트에 대한 클라이언트 요청에애플리케이션이 응답하는 방식 라우츠(Routes):라우터에 등록된 모든 라우트를 나타내는 객체  React Router Dom으로 페이지 이동을 구현하는 방법1. Link 태그HTML의 a 태그와 유사하지만,페이지 전체를 다시 로드하지 않고도클라이언트 측에서 페이지를 전환할 수 있게 해..

강의에서 원장님이 '리팩토링' 이라는단어를 사용하셨다.리팩토링? re - factory  + ing..??도저히 유추가 안 돼서 찾아봤다 리팩토링: '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다.주로 가독성을 높이고 유지보수를 편하게 한다. 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다. 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 바꾸고 개선하는 유지보수 행위이다. 추가로, 프로그램의 구조를 크게 뒤집으면전과 똑같이 프로그램을 돌리기 어렵기 때문에변경 전과 똑같이 돌아간다는 것을 확인하면서개선해 나가야 한다.또, 리팩토링의 주요 핵심은 '자주'이다.모든 로직을 완성한 뒤 리팩토링을 하는 것이 아닌한 로직을 완성한 후 리팩토링을 하는 것이 좋다. 켄트 벡이 제안하는 깔끔하고..

오늘은 좀 빠른 시간에 TIL을 써보려고 한다.잊어버릴까봐,, 배치 업데이트(Batch Update):리액트가 더 나은 성능을 위해여러개의 state 업데이트를 하나의 리렌더링으로 묶는 것 어떤 state를 변경시킬 때 모아서 한꺼번에 처리하는React만의 알고리즘 사용하는 이유1. 불필요한 리렌더링 방지 (렌더링 최적화)  button        onClick={() => {          setCount(count + 1);          setCount(count + 1);          setCount(count + 1);        }}      >        증가      button>나는 분명히 count를 세 번 써줬다. 게다가const [count, setCount] = use..