뉴히의 개발 로그

유튜브 공식 문서 https://developers.google.com/youtube/iframe_api_reference?hl=ko 유튜브 영상을 Youtube API로 동영상을 아주 쉽게 내 사이트에 넣을 수 있다. 1. 라이브러리 설치 npm i react-youtube 2. 사용 방법 2-1) JavaScript import React from 'react'; import YouTube from 'react-youtube'; class Example extends React.Component { render() { const opts = { height: '390', width: '640', playerVars: { 'autoplay': 1, //자동재생 'rel': 0, 'showinfo': 0..

GET 방식의 개념 GET은 요청하는 데이터가 HTTP URL의 일부로 포함되어 전송됩니다. 일반적으로 조회 작업에 사용됩니다. GET 요청 GET은 불필요한 요청을 제한하기 위해 요청이 캐시 될 수 있습니다. 파라미터에 내용이 노출되기 때문에 민감한 데이터를 다룰 때 GET 요청을 사용해서는 안 됩니다. GET 요청은 브라우저 기록에 남습니다. GET 요청을 북마크에 추가할 수 있습니다. GET 요청에는 데이터 길이에 대한 제한이 있습니다. Get 요청은 성공 시, 200(Ok) HTTP 응답 코드를 XML, JSON뿐만 아니라 여러 데이터(html, txt 등..), 여러 형식의 데이터와 함께 반환합니다. GET을 통해 서버에 리소스를 요청할 때 웹 캐시가 요청을 가로채 서버로부터 리소스를 다시 다운..

브라우저는 사용자가 확인하려고자 하는 웹페이지를 서버에 요청해서 응답을 받아 동기적으로 HTML+CSS, javascript 언어를 해석해서 내용을 화면에 보여줍니다. 브라우저는 HTML과 CSS 파일 파싱하여 각 DOM Tree, CSSOM Tree를 만듭니다. → 두 파싱 TREE를 결합하여 Rendering Tree생성 → 각 노드의 위치와 크기를 계산 → 각 노드를 화면상의실제 필셀로 변환하고 레이어를 만듭니다. 그리고 화면에 보여줍니다. 이로써 화면에서 웹페이지를 볼 수 있습니다. NAVER D2 https://d2.naver.com/helloworld/59361 https://poiemaweb.com/js-browser https://bbangson.tistory.com/87

오류 1 react-dom.development.js:86 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 함수형 컴포넌트가 직접적으로 ref를 사용할 수 없다는 것을 나타냅니다. ref를 사용하려면 함수형 컴포넌트를 React.forwardRef()로 감싸야 합니다. 예를 들어, ProfilesCard 컴포넌트를 React.forwardRef()로 래핑하여 ref를 사용할 수 있게 만들 수 있습니다. const ProfilesCard = ({ tutor }: pageProps) => {} ==> const Profiles..

'{ created_at: string; id: string; matching: boolean | null; status: string | null; tutor_id: string | null; user_id: string | null; }' 형식에 'filter' 속성이 없습니다. 비동기 방식때문에 데이터가 불려오기전에 렌더링되기때문에!!! 에러가 먼저뜨고 다음번 렌더링 시에 제대로 불러온다. if (!tutor || !review) { return null; } 이렇게 넣어주면 오류해결 또는 배열과 단일의 경우 오류도 타입맞추기가 힘들다 const matching = match.match || []; console.log(matching); // 받은 요청 내역 const matchingData = ..

분명 코드도 맞은거같고 데이터 값이 불려는 오는데 계속 초기값만 불려오는.. useEffect(() => { getUser(); dispatch(setUser(user)); }, []); useEffect(() => { getUser(); // 데이터 로드 완료 시 dispatch를 사용하여 Redux 상태 업데이트 if (user) { dispatch(setUser(user)); // setUser 액션을 통해 데이터를 Redux 상태에 업데이트 } }, [user, dispatch]); 그것은 바로 실행시점? 때문 위 코드에서 중요한 부분은 useEffect 내에서 데이터 로드가 완료되었을 때 dispatch(setUser(userData))를 호출하는 부분. 이렇게 하면 데이터 로드와 Redux 상..

useEffect는 컴포넌트가mount, update, unmount 될때 실행된다. useEffect에 전달하는 콜백함수도 return을 가질 수 있는데 이return에 함수를 전달 할 수 있고 이를 클린업 함수라고 한다. 클린업 함수는 컴포넌트가 unmount될때 실행된다. 클린업 함수가 실행된 후 update되면서 mount를 실행한다. 즉, 컴포넌트는 리렌더링 될 때, 재평가 → 언마운트 → 업데이트 순으로 진행된다. 의존성 배열을 비워둘 경우 unmount는 실행되지 않는다. 매우 정리가 잘된글이 있어 링크남긴다 https://choyeon-dev.tistory.com/entry/React-useEffect-%EC%8B%A4%ED%96%89-%EC%8B%9C%EC%A0%90-%EC%A7%9A%E..

'string | null' 형식은 'string | undefined' 형식에 할당할 수 없습니다. 'null' 형식은 'string | undefined' 형식에 할당할 수 없습니다.ts(2322)index.d.ts(2276, 9): 필요한 형식은 여기에서 'DetailedHTMLProps' 형식에 선언된 'src' 속성에서 가져옵니다. (property) React.ImgHTMLAttributes.src?: string | undefined 문제 보기 (+F8)빠른 수정을 사용할 수 없음 import한 이미지가 아닌 이미지 주소를 넣으려니 타입 오류가 발생했다. 유형 할당(type assignment) 에러이다. 이미지 속성의 타입 정보들을 보니 interface ImgHTMLAttributes e..