React (7) 썸네일형 리스트형 React, 절대 경로 설정 (Vite 기준) TypeScript 기준으로 쓰였습니다.1. tsconfig.json Setting혹은 tsconfig.app.json 파일에 설정 baseURL 및 path 설정src 혹은 자신이 원하는 임의의 디렉토리 위치를 설정하면 됩니다. "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] }, }2. vite.config.ts Settingtsconfig.json 뿐만 아니라 번들러 모듈 설정도 필요합니다.만약 WebPack으로 설치하셨다면 webpack.config로 작성하시면 됩니다. (1) vite-tsconfig-paths모듈 설치npm install vite-tsconfig-pathsimport { define.. ReactJS, Reducer useReducer – ReactThe library for web and native user interfacesreact.dev프로토 타입 및 사용법은 위 북마크 참조! Reducer를 언제 왜 사용하는지 알아봅시다. Reducer는 하나의 State에 관련해서 다양한 로직이 있는 경우에 사용합니다. 다음과 같이 To Do 객체에 관 State가 있다고 가정해봅시다. 하나의 State에 Set하는 Event Handler 함수들이 늘어남에 따라 복잡한 로직들이 우후죽순 늘어나게 됩니다. State를 설정할 수 있는 로직들이 쌓이다보면 어디서 state값이 변했는지 알기 어려운 경우가 생기기 마련입니다. 함수 하나를 통해 미리 지정한 인자대로 입력을 받고 State값을 변환하는 것이 Reducer 입니.. React, useState와 state useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook입니다.Referenceimport { useState } from 'react';function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos());배열 구조 분해를 사용하여 [something, setSomething]과 같은 state 변수의 이름을 지정하는 것이 규칙입니다.ParameterinitialState: state의 초기 설정값입니다. 어떤 유형의 값이든 지정할 수 있지만 함수에 대해서는.. React, Component란 Component란 어플리케이션의 재사용 가능한 UI들의 결합체.1. Export Componentexport default function Profile() { return ( )}2. Definite Componentfunction Profile() { return ( )}💡 React 컴포넌트는 일반 JavaScript 함수이지만, 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않습니다! 3. 한 파일에서 여러 컴포넌트를 import 하거나 export 하는 방법하나의 파일에 두 개의 default export를 정의할 수 없습니다.이런 경우 새로운 파일 하나를 더 생성해서 default export를 사용하거나named export를 사용하여 한 파일에서 여러 컴포넌.. React, JSX 문법 JSX는 JavaScript를 확장한 문법입니다. JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다Web이 더욱 interactive해지면서, 로직이 내용(HTML)을 결정하는 경우가 많아졌습니다. 이것이 바로 React에서 렌더링 로직과 마크업이 같은 위치에 함께 있게 된 이유입니다. 💡 JSX와 React는 서로 다른 별개의 개념입니다. 종종 함께 사용되기도 하지만 독립적으로사용할 수도 있습니다. JSX는 확장된 문법이고, React는 JavaScript 라이브러리입니다. Introducing the New JSX Transform – React BlogThis blog site has been archived. Go to react.dev/blog to see t.. JWT, NodeJS와 React를 통해 구현해보기 (1) What is JWTJWT(Jason web token)은 웹에서 특정 정보를 안전하게 사용하기 위한 방법 중 하나입니다. JWT는 JSON 포맷을 사용하여 정보를 주고 받을 수 있으며크게 인증과 교환 두 가지 매커니즘이 있습니다. 일반적으로 로그인 세션을 유지하기 위한 방법으로 사용됩니다.토큰을 통한 인증으로 특정 정보에 접근 및 권한이 주어지게 됩니다.Scenario(1) 사용자가 회원가입된 정보로 Login을 시도 합니다. 이 때 Server는 DB에 저장된 ID 및 PW 정보를 조회합니다.(2) 만약 사용자 정보가 확인되면 SecretKey를 통해 암호화된 Token을 클라이언트에게 발급합니다(이 때 localStorage 혹은 Cookie에 저장하는 다양한 방법이 있습니다)(3) 권한이 필요한 .. React.js, Skeleton Component 구현 서론 React.js를 쓰다보면 비동기 네트워크 요청을 통해 데이터를 받아와 리렌더하는 과정에서 빈 화면이 나와 사용자에게 불편함을 줄 수 있습니다. 렌더링 되는 과정 가운데 뼈대가 되는 UI를 보여주면 어떠한 컨텐츠를 불러오는 중이구나 암시할 수 있어 사용자가 웹사이트를 이탈하는 것을 미연에 방지할 수 있습니다. 이러한 방법은 Youtube, Facebook 등 다양한 굴지의 기업에서 사용됨을 확인할 수 있습니다. Skeleton을 사용하면 무조건 사용자에게 좋은 경험을 줄 수 있을까 생각해봅시다. 무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? | 카카오페이 기술 블로그 카카오페이에서 프론트엔드 개발을 하며 스켈레톤 UI와 사용자 경험 향상에 대해 고민한 내용을 공유합니다. tech... 이전 1 다음
