뉴히의 개발 로그

쿠키(Cookie), 세션(Session), 웹 스토리지(Web Storage)는 모두 웹 브라우저에서 데이터를 저장하고 관리하기 위한 메커니즘입니다. 그러나 각각의 특징과 사용 용도에 차이가 있습니다. 쿠키 (Cookie): 클라이언트(브라우저)에 작은 데이터 조각을 저장하는 방식입니다. 서버에서 생성하고 클라이언트에 저장되며, 만료 기간을 설정할 수 있습니다. 주로 사용자 인증, 세션 관리, 사용자 기본 설정 등에 활용됩니다. 브라우저마다 저장 가능한 쿠키의 개수와 용량에 제한이 있습니다. 보안상 취약할 수 있으며, 민감한 정보를 저장하기에는 적절하지 않을 수 있습니다. 세션 (Session): 서버에 데이터를 저장하고 클라이언트는 세션 식별자를 쿠키 등으로 전달하여 식별하는 방식입니다. 서버에서 생..

유튜브 공식 문서 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..

최종프로젝트가 2주차가 지났다. 10일정도되었는데 생각보다 기획회의도 길고 수정도 많이되고 고려해야할 부분도 많고 3주란시간이 길것 같았는데 벌써 5일 밖에 안남음! 모두 마지막 프로젝트이다보니 더 욕심이 나고 디테일한 부분까지도 신경을 많이 쓰게 되는것 같다. 욕심은 한가득인데 차암 맘처럼 쉽지않다! 그리고 또한 반복되는 프로젝트인데 계속 나는 오류는 똑같이난다. 똑같은데서 헤메고! 기록을 잘 해두고 오래 찾지 않도록 해야겠다. 새로운 라이브러리들도 사용법을 문서를 잘 읽고 쓰기!

'{ 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 상..