개발일기

1. CSR 대표 React 가 CSR(Client-Side-Rendering) 이다. CSR은 클라이언트(프론트)에서 화면을 구성한다. 2. 동작방식 1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청한다. 2. 서버는 빈 HTML 문서를 전달한다. 3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 다시 JavaScript 파일을 다운로드한다. (이 때 유저는 빈 화면을 보게된다.) 4. JavaScript를 통해 동적으로 페이지를 만들어 브라우저에 띄워준다. 3. 장점 초기 로드만 완료되면 이후 렌더링이 빠르다. 서버에 요청할 것이 거의 없어 서버 부담이 적다. (data 필요할 때만 요청) 4. 단점 SEO에 좋지 않다. (초기 HTML 파일이 비어있기 때문에 봇이 데..

1. useEffect 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 컴포넌트가 mount(화면에 첫 렌더링),update(다시 렌더링),unmount(화면에서 사라질때) 됐을때, 특정 작업을 처리할 수 있다. 2.useEffect 사용 예제 1 import React, { useEffect, useState } from "react"; const App = () => { const [count, setCount] = useState(0); const [name, setName] = useState(""); const handleCountUpdate = () => { setCount(count + 1); }; //렌더링마다 매번 실행됨 - 렌더..

useRef의 기능 두가지 첫번째, 저장 공간으로서의 기능을 한다. 리액트에서 값을 바꾸거나 UI를 렌더링할 때 상태관리(useState)를 한다. useRef는 변수처럼 값을 저장할 필요가 있는 변수로 사용되고, UI에 보일 필요가 없는 경우에 사용된다. 간단하게 예제를 들겠다. 검색을 하는데 같은 검색어를 입력하여 검색할 경우 불필요한 호출이 일어날 수 있다. 그렇기 때문에 useRef를 사용하여 이전에 검색한 값을 prevInputValueRef에 담아주고, 그 값과 동일한 검색어로 검색할 경우 호출이 일어나지 않게 하는 방법이다. const Search = () => { const [inputValue,setInputValue] = useState("") const prevInputValueRef..

내가 찾아본건 다음과 같다. 버튼을 클릭시 이전 페이지로 이동하는 것 react-router-dom의 useNavigate를 사용하여 navigate안에 인덱스 -1을 입력하면 뒤로가기 기능이 구현된다. 그래서 현재 진행중인 프로젝트에 사용해 봤다. 내가 진행중인 프로젝트는 어떤 함수를 실행하고 그 함수가 완료되었을 때 이전페이지로 이동 하도록 했다. PointCharge.tsx callback이라는 함수가 실행되고 결제가 완료되면(success) navigate(-1)를 사용하여 이전페이지로 이동하도록 했다. 안된다. 여기서 navigate(-1)을 사용하는건 뒤로가기 버튼에만 사용해야된다는 걸 알았다. 그래서 다른 방법을 생각해야 되는데 다른 방법을 한 3일은 고민한거 같다. 글을 작성하면서 느끼는 ..

Firebase를 사용하다가 새 프로젝트에서 supabase를 사용하게 되었다. 다른 팀원분들은 다 경험이 있지만, 나만 처음이였다. 공부를 해야했다,, 깊게 사용하지 않았지만 좋은점 1.공식문서 공식문서에서 사용하기 쉽게 설명되어 있고, 명령어도 비교적 쉬운편에 속하는 것 같다. 하지만 나는 아직 이해하지 못했다... 2. primary key(기본키)의 값을 자동 생성 supabase에서 새로운 테이블을 생성할 때 type값에 uuid를 설정해 주면, 코드에서 id값을 넣을 필요 없이 알아서 생성해 준다. 3.Foreign Key(외래키) 링크 버튼을 클릭하면 다른 테이블과 연결할 수 있고, 해당 테이블에서 다른 테이블의 데이터를 가져오는데 편리하다. 4.소셜 로그인 다양한 소셜 로그인을 활용할수 있..

작성하기 버튼을 누르면 input에 들어간 값을 화면에 뿌려 주려고 한다. 그런데 event에도 type이 있어야 된다. 구글에 검색하던 중 onChage에 마우스를 올려보면 힌트를 얻을 수 있다고 나왔다. React.InputHTMLAttributes 먼저 위에 있는 타입을 지정 해 봤다. 위의 타입 유형에 target의 속성이 없다고 나온다. React.ChangeEventHandler 그 아래의 있는 타입을 지정해 봤다. 똑같이 target의 속성이 없다고 나온다. ..... 다시 구글을 검색해 본 결과 React.ChangeEvent Handler를 제외한 ChangeEvent를 사용해야 한다. onSubmit 또한 마우스를 올리면 힌트가 나오는데 React.FormEvent 이것 또한 Handl..

자바스크립트를 배울 때 class를 배우기는 했지만 그 때만 코드를 작성 해보고 한번도 사용한 적이 없다. 그래서 어디에 쓰이고, 어떻게 쓰이는지 모른다. 지금 이 글을 쓰고 있는 지금도 모르지만 일단 타입스크립트class를 하기 전에 공부해 보려고 한다. Class 기본 문법 작성한 코드를 실행해 보면 User라는 이름의 객체가 생성된다. constructor(생성자) constructor를 사용하면 class객체의 초기값을 설정해 줄 수 있다. extends(상속) 새로운 클래스를 만들어 extends를 사용하여 introUser클래스에서 User를 상속 받았기 때문에 this.name과 this.age를 사용 할수 있다. constructor를 사용하여 초기값을 다시 설정해야하는 번거로움을 덜어주는..

자바스크립트 자바스크립트는 포용력이 높아 한개의 변수에 number값을 할당하고, 다시 string값을 할당하면 오류 없이 가장 나중에 할당한 값을 결과 값으로 보여줍니다 let a = 3 a= "가나" console.log(a) // 가나 a= true console.log(a) // true 또한 타입이 맞지 않는 코드를 실행을 하기 전까지 타입에 대한 오류를 확인 할 수 없습니다. 타입스크립트 타입 스크립트를 활용하면 컴파일을 통해 사전 에러를 발견할 수 있습니다. 타입 스크립트를 설치하면 tsc라는 명령어로 타입 스크립트 파일을 컴파일할 수 있습니다. 타입 스크립트가 컴파일된 결과물은 자바스크립트로 출력됩니다. 이때 컴파일 단계에서 문법 에러를 잡을 수 있으므로, 사소한 실수들을 런타임 전에 모두..