용용it

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

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

상황 재활용 해야하는 컴포넌트가 있는데 /user 에서는 width나 height를 다르게 해야하는 상황이다. 리엑트의 도움을 받자  우선 리액트 hook인 useLocation()를 사용해보자  여기서 pathname은 URL의 경로 부분을 나타낸다.예를 들어, URL이 https://example.com/user 일경우,  pathname은 /user가 된다.만약 https://example.com/user/dragon 일 경우는 ?!pathname은 /users/dragon이 된다.  startsWith는 ?JavaScript에서 문자열이 특정 문자로 시작하는지를 확인할 때 사용하는 메소드이다. 이 메소드는 대소문자를 구분하여 작동하고, 문자열이 지정된 검색 문자열로 시작하는 경우 true를, 그렇..

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 파일로 빼내서..

만약 한 파일에 변수를 모아서 관리를 할 때 스타일드 컴포넌트에 적용시키려면 ? props로 전달, ${(props) => props}

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

리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발하게 되는데 여기서 컴포넌트(Component)는 리액트로 만들어진 앱을 이루는 최소한의 단위이다. 또한 리액트는 여러 컴포넌트 조각으로 되어있다. 예를 들어 하나의 페이지를 리액트로 만든다고 보면, 컴포넌트가 모여서 하나의 페이지를 이루게 되는 것이다. 리액트 컴포넌트에는 두 가지가 있다. 1. 클래스형 컴포넌트 2. 함수형 컴포넌트 원래 리액트로 개발할 때는 클래스 컴포넌트를 이용해서 많이 개발을 했지만, 리액트에서 리액트 hooks 라는 것을 발표한 이후부터는 함수형 컴포넌트를 이용해서 개발을 많이 한다. 이 두 컴포넌트의 차이는 후술할 예정이다.

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