리액트 10

react-helmet 페이지 제목 설정하기

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

React 2024.11.15

개인 프로젝트 - 메이플 검색 사이트(OPEN API)

넥슨사에서 OPEN API를 공개했다. (사실 시간은 반년 정도 지난 상태다)  필자는 이 OPEN API를 이용하여  한때 열심히 했었던 게임인 "메이플 스토리" 캐릭터 검색 사이트를 만들었다.(리액트를 이용하여 만들었다.) https://www.mezzang.com 메이플 캐릭터 검색 - 메짱 www.mezzang.com  다른 캐릭터 검색 사이트도 많이 나왔고기능적으로도 우수한 사이트가 많지만  나름 열심히 머리 굴려가면서 인게임과 최대한 비슷하게 검색 사이트를 구성해보았다. 다크모드, 라이트모드에 따라 백그라운드 이미지를 다르게 한 것은 참신한 생각이었던 것 같다  프로젝트를 하면서 gpt의 도움도 많이 받고 처음부터 끝까지 디자인, 구성을 생각하느라 많은 난항을 겪었지만  결국 끝까지 가서 완성..

프로젝트 2024.05.16

React-useParams

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

React 2023.10.05

React-속성 전달

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

React 2023.09.15

0.Redux ?

리덕스란 무엇일까 ? 리덕스는 자바스크립트 어플리케이션을 위한 상태 관리 라이브러리 이다. 그 전에, Props와 State에 대해 알아보자 Props Properties의 줄임말. Props는 React 컴포넌트 간에 데이터를 전달하는 메커니즘이다. 상위 구성 요소에서 아래쪽으로 흐른다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. Props는 읽기 전용이며, 자식 컴포넌트에서는 변경할 수 없다. 예시로 .App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 값을 전달해 주고 싶다고 가정해보자 import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default ..

Redux 2023.08.19

React-가상돔

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

React 2023.06.25

React-컴포넌트란?

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

React 2023.06.24

React-리액트란

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

React 2023.06.23

투두 리스트 만들기

아마도 지금이 제일 고비인 것 같다. 투두 리스트를 만들기 위해서는 현재 내가 알고 있는 지식으로는 턱없이 부족한 상태이다.. 하지만 사람은 해야할 때 해내야한다... 무슨 방법을 쓰더라도... 시간을 갈아 넣는 것은 디폴트이다. 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; ..

React 2023.05.26