콛 다이어리

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..

props 너무 어렵다..친하게 지내고싶다.. 숙련 강의랑 블로그 몇 개를 봤는데 데이터를 던져주는 곳에서는이렇게 하는데,던질 변수명은 내 마음대로 정해도 된다고 한다. 데이터를 잡는 곳에서는{props.잡을 변수명}이렇게 하는데잡을 변수명은 데이터를 던져주는 곳에서 사용한변수명을 사용하면 된다.

올림픽 메달 트레커의 메달 인풋 3개에정규 표현식을 사용하려고 했다.메달 갯수 입력하는 텍스트 박스이기 때문에숫자만 입력할 수 있게 하고싶었다.  정규표현식 (regex):pattern/flag로 표현test(string) 함수는 인자로 전달된 문자열이정규표현식의 패턴과 일치하면 true를 리턴하며그렇지 않으면 false를 리턴 ^ : 문자열의 시작[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|]:한글, 소문자 영어, 대문자 영어, 숫자에 해당하는 문자 1개+: 문자 1개 이상$: 문자열의 끝  1. 숫자만 입력되는 정규식/[^0-9]/gi 2. 영문만 입력되는 정규식/[^a-z]/gi 3. 한글만 입력되는 정규식/[a-z0-9]|[ \[\]{}()?|`~!@#$%^&*-_+=,.;:\"'\\]/g 4. 숫자, ..

알고리즘 한 문제를사흘동안 잡고있는 건아닌 것 같아서다른사람이 푼 문제로 공부를 했다. 분명 자바스크립트로 설정했는데누가 for문 초기 설정을 let없이사용했다.. i=0 이렇게;; 잠이 덜깼나? 싶었는데 아니었고튜터님한테 여쭤봤는데 그냥 찾아봐라하셨다. 찾아보니까let을 안 써도 작동이 된다고 한다.오래 전 자바스크립트 문법과의 호환성을 위해남겨둔 것이라고 하고, 문제가 되지 않는다고 한다.이렇게 쓰면 strict mode에서는 오류가 발생하기 때문에항상 let 을 써주시는 것을 권장한다고 한다.  출처: https://velog.io/@hyungjungson/230523-%EA%B0%9C%EB%B0%9C%EC%9D%BC%EC%A7%80-TIL-for%EB%AC%B8%EC%97%90-let%EC%97%..