용용it

주인장이 운영 중인 사이트(https://www.mezzang.com/random-class)에서 "랜덤 직업 뽑기" 기능을 만들었는데, 뽑기 버튼을 처음 누르면 이미지 렌더링이 덜 되어 카드의 기본 배경(background)만 잠깐 보이는 문제가 발생했다.한 번 뽑고 나면 모든 이미지가 캐시되면서 이런 문제가 사라졌다.  시도  처음엔 React의 useEffect를 사용해 이미지를 프리로드하는 코드를 작성했다:콘솔 로그를 확인해보니 모든 이미지가 로드 완료되었다고 나오는데도, 왜 첫 뽑기에서 렌더링 오류가 생길까?    일단 프리로드의 한계를 알아보자useEffect에서 new Image()로 프리로드한 방식에는 몇 가지 한계가 있었다.  프리로드의 한계브라우저 캐시에만 저장: new Image()는..

문제 상황 import { ContainerBox } from "../../common/searchCharacter/ContainerBox"; const handleMouseLeave = () => { if (!clicked) { setSelectedItem(null); } }; return ( );}; containerBox 컴포넌트에 onMouseOut 이벤트를 넣어서 컴포넌트를 벗어나면setSelectedItem(null)로 초기화 시키는 작업을 하려고 했는데 전혀 적용이 안되는 문제가 생겼다.    해결 과정 제일 먼저 정공법인 console.log를 사용하여 함수 호출 여부를 확인한다.const handleMouseLeave = () => { conso..

오늘은 React-Helmet에 대해 알아보자 react-helmet은 React에서 HTML의 태그를 쉽게 관리할 수 있게 해주는 오픈 소스 라이브러리이다.주로 웹 애플리케이션의 페이지 제목(title), 메타 태그(meta tags) 등을 동적으로 설정하거나 변경할 때 사용된다. react-helmet 장점SEO(검색 엔진 최적화): 웹사이트의 메타 정보를 동적으로 설정함으로써 검색 엔진이 페이지를 더 잘 인식하도록 도와준다.동적 제목 변경: 페이지마다 제목과 메타 정보를 다르게 설정할 수 있어서, 웹 애플리케이션이 더 유연하게 관리된다.    예시네이버 웹툰으로 예시를 들어보면,각 탭들의 title이 다른 걸 볼 수 있다. 이렇게 되면 사용자 입장에서도 한 눈에 어떤 탭인지 명확하게 알 수 있다...

이 글을 작성하게 된 계기, 최근 api 사이트를 오픈한 이후, 대기업들은 어떤 코드를 사용할까 궁금해서  네이버에서 개발자 도구 => 소스탭에 가서 소스 코드를 보려고 시도해보았다. 하지만 당연하게도 대놓고 소스 코드를 보여줄 바보들은 아니다. 보안 쪽은 무조건적으로 안전을 기원해야 하기 때문에 당연한 조치이다.그러므로 꼭 코드가 노출되지 않게 감추자,  때문에 본인의 사이트의 코드를 보호하도록 하고자 적용했던 과정을 작성한 것이다.   React & windows 기준 소스 코드를 안 보이게 하는 설정 방법  매우 간단하다. package.json 파일을 수정한다. "scripts" 에서 "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts bui..

useParams는 React Router 라이브러리에서 제공되는 훅 중 하나이다. useParams는 동적 경로 매개변수를 컴포넌트에서 읽을 때 사용된다. 동적 경로 매개변수는 URL의 일부로 사용자 정의 데이터를 전달하는 데 사용된다. 예를 들어, 블로그 게시물의 고유 ID나 사용자 프로필의 사용자 이름을 URL에 포함시키는 경우에 유용하다. 딱 내가 필요한 훅이었다. api를 계속 반복해서 member_id 값을 불러오기엔 너무 별로인 것 같고 (최대한 가볍게 만드는 게 좋다고 생각함) 그래서 url에 포함되어있는 member_id 값을 이용하기로 했다. 라우터에는 이렇게 url에 멤버 id 값을 넣어서 페이지를 출력하게 했는데 '/mypage/:member_id' useParams 훅을 사용해서 ..

상황 먼저 보자. 버튼이 있는데 공통된 스타일이 적용되었기 때문에 버튼 컴포넌트를 만들고, 왼쪽의 SettingPassword(왼쪽) 컴포넌트에 텍스트를 입력해서 적용시켜야 하는데 SettingPassword(왼쪽)에 있는 '이 부분' 에 텍스트를 넣어도 적용이 안된다. 왜 ? SettingBtnStyle(오른쪽) 컴포넌트를 보면 구조상 ButtonWrap의 자식인 Button에 있는 '이 부분에' 텍스트를 입력해야하기 때문. 또한, 공통 컴포넌트라서 직접 텍스트를 입력하기엔 무리, 그럼 어떻게 해야하나 ? 속성 전달을 사용하자 props라고도 한다. 정답 먼저 공개. 물론 SettingBtnStyle에 text와 children의 타입을 직접 명시해도 되지만, 나는 타입 파일을 따로 ts 파일로 빼내서..

리액트의 주요 특징 중 하나는 가상돔을 사용하는 것이다. 그럼 가상돔에 대해서 알아보기 전에 가상돔을 왜 사용하는지 알기 위해서 브라우저가 렌더링 하는 과정을 알아보자. 웹 페이지 빌드 과정(Critical Rendering Path, CRP) 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다. 웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰표트에 표시하는 과정이다. DOM tree 생성 : 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정한다. Render tree 생성 : 이 단계는 부라우저가 DOM과 CSSOM을 결합하는 곳이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함한 최종 렌더..

React는 사용자 인터페이스를 만들기 위한 javaScript 라이브러리이다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다. 때문에 웹 앱을 만드는 다른 Tool인 Vue나 Angualar와 비교하게 된다. 가장 큰 차이점은 프레임워크와 라이브러리의 차이이다. Angulalr와 Vue는 프레임워크이며, 리액트는 라이브러리이다. 그러면 여기서 프레임워크와 라이브러리의 차이는 간단하게 말해서 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것이다. 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 또, 리액트를 사용하는 이유는 다음과 같다. - 상대적으로 배우기 쉬운 라이브러리 - 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경 - 많은 기업들의 사용..

아마도 지금이 제일 고비인 것 같다. 투두 리스트를 만들기 위해서는 현재 내가 알고 있는 지식으로는 턱없이 부족한 상태이다.. 하지만 사람은 해야할 때 해내야한다... 무슨 방법을 쓰더라도... 시간을 갈아 넣는 것은 디폴트이다. 1. 리액트 시작. npx create-react-app . 2. 프로젝트 실행 npm start 3. 투두리스트 컴포넌트 생성 src 폴더에 components 폴더 생성이후 TodoList.js 파일 생성. 4. TodoList.js 컴포넌트 코드 작성 import React from 'react'; const TodoList = () => { return ( Todo List {/* 투두리스트 내용을 작성하세요 */} ); } export default TodoList; ..