콛 다이어리

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

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) 사전 설정된 구조(슈퍼베이스는 이미 정해진 방..

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

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

GlobalStyle- 모든 컴포넌트에 적용해야 할 속성이 존재한다면,전역적으로 지정해주는 스타일  사용법변수 선언→ 백틱(`) 안에 적용받고 싶은 곳 입력ex)const GlobalStyle = createBlobalStyle `          body {       // 모든 컴포넌트에 적용할 속성          }`; export default GlobalStyle   css reset- *크로스 브라우징 이슈를 해결하기 위한 기법(사람마다 쓰는 브라우저가 다르다.누구는 크롬, 누구는 사파리, 누구는 엣지, 파이어폭스...그래서 같은 태그여도 크기가 다르기 때문에그 크기를 맞춰주기 위해 default style을 제공한다.     (*크로스 브라우징 :여러 종류의 웹 브라우저에서 동일한 사용자 ..

태그에 스타일 주는 방법html파일에서 클래스나 아이디를 부여계속 import 해야함유지보수하기 힘듬 style을 사용하여 객체 형태로 부여가독성이 떨어짐 3. css in js모든 파일을 import 해줄 수 있음조건문, 변수 등 다양한 로직을 작성할 수 있음 기본 사용법최상단에 import styled from 'styled-components' 입력→ const 변수 = styled. 표준태그 `      속성: 값;      속성: 값;      속성: 값;    `→ 변수를 표준태그처럼 사용      + 표준태그 말고 함수도 입력할 수도 있다.const 변수 = styled. ('함수')`      속성: 값;      속성: 값;      속성: 값;`