제인의 블로그

하.하하.css파일 짜증난다 style component로 해야댓는데바꾸면서 에러가 뜬다...에러가 뜬다..뜬다..수정을 하면 기능 구현이 안되고이런 썩을 포켓몬 내 상세페이지는 어디갓는데.. 돌려도라.돌려조라.....내놔랑.........그래도 에러는 안뜬다 햇삐 :)  해..햇삐 맞냐고....되물어 보며내일은 삭제버튼도 다시 구현하고~ 포켓몬 추가 버튼누르면 위에 대시보드에 뜨면서 대시보드에 뜬 포켓몬 누르면 상세페이지 넘어가게 여튼 만들어보자공~.~다짐해봅니다 눈누

이렇게 구현완료 일단 css파일로 만들었으니.......내일 또 마저 수정하는걸로 희희....내일 할일 css -> 스타일 컴포넌트로 변경하기...

Supabase와 React를 사용하는 방법React Supabase 1. Supabase 소개와 특징  주요 개념 설명 - Supabase는 오픈 소스 Firebase 대안으로, 데이터베이스, 인증, 스토리지 및 서버리스 함수를 제공하여 빠르게 백엔드 기능을 구현할 수 있도록 합니다. - 특징:   - PostgreSQL 기반 데이터베이스를 사용해 강력하고 확장 가능한 데이터베이스 환경을 제공합니다.   - 실시간 기능: 데이터 변경 사항을 실시간으로 반영합니다.   - 쉽고 빠른 인증: OAuth 제공자와 연동하여 쉽게 인증 기능을 설정할 수 있습니다.   - RESTful API 자동 생성: 데이터베이스 테이블에 REST API와 GraphQL API가 자동으로 생성됩니다. 사용 시나리오 - 스타트..

React Router는 React 애플리케이션에 클라이언트 사이드 라우팅을 제공해 단일 페이지 애플리케이션에서 다중 페이지처럼 사용자에게 다양한 화면을 보여줄 수 있도록 합니다.  React Router  1. React Router의 역할과 필요성  주요 개념 설명 - React Router는 URL을 기반으로 다양한 컴포넌트를 렌더링할 수 있도록 도와줍니다. React는 기본적으로 단일 페이지 애플리케이션(SPA)이지만, React Router를 사용하면 여러 페이지처럼 보이는 UI를 만들 수 있습니다. - 역할과 필요성: 페이지 리로드 없이 URL 변경을 통해 사용자에게 여러 화면을 보여줄 수 있습니다. 라우팅을 통해 UI와 상태를 URL과 동기화하며, URL을 통해 특정 페이지에 직접 접근할 수..

Redux는 복잡한 애플리케이션에서 상태를 보다 체계적으로 관리할 수 있게 해주는 라이브러리입니다.  Redux 1. 상태 관리의 필요성과 Redux 등장 배경 주요 개념 설명 - 상태 관리의 필요성: React 애플리케이션에서 컴포넌트 간 상태가 공유되어야 할 때 props를 통해 전달하거나 Context API를 사용해 데이터를 전달합니다. 그러나 애플리케이션이 복잡해질수록 상태가 여러 컴포넌트에 걸쳐 복잡하게 얽히게 되어 관리가 어려워질 수 있습니다. - Redux의 등장 배경: 애플리케이션 상태를 체계적으로 관리하고, 상태 변경 흐름을 명확하게 하기 위해 Redux가 등장했습니다. Redux는 단일 상태 트리로 전체 애플리케이션 상태를 관리하며, 상태 변경이 예측 가능하게끔 합니다. 사용 시나리오..

1. React 기본 구조와 스타일링 - React의 기본 개념 (컴포넌트 기반, UI 선언적 접근) - JSX의 역할과 기본 문법 - 스타일링 기법 (CSS 모듈, Styled Components, CSS-in-JS) 2. React Hook - Hooks 소개 및 기본 개념 - 주요 Hooks: `useState`, `useEffect`, `useRef`, `useContext` - 커스텀 Hook 만들기 - 실습 예제: 간단한 상태관리 및 효과 처리 3. Redux - 상태관리의 필요성과 Redux 등장 배경 - Redux의 주요 개념: Action, Reducer, Store - Redux Toolkit 소개 및 사용법 - Redux Thunk, 미들웨어 사용법 - 실습 예제: Todo 리스트를 ..

React Hook  1. Hooks 소개 및 기본 개념  주요 개념 설명 - Hooks는 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있도록 하는 기능입니다. 클래스 컴포넌트 대신 함수형 컴포넌트를 더 유연하고 간단하게 사용할 수 있게 해줍니다. - 기본 규칙:    - Hook은 함수형 컴포넌트의 최상위에서만 호출해야 합니다.   - 조건문이나 반복문 내부에서는 Hook을 호출하면 안 됩니다.   - `use`라는 접두어로 시작해야 하며, 함수형 컴포넌트나 커스텀 Hook 내부에서만 사용할 수 있습니다. 사용 시나리오 - 상태 관리: 컴포넌트 내의 상태를 관리할 때 `useState`를 사용합니다. - 라이프사이클 관리: 특정 이벤트나 데이터 변경 시 효과를 주거나, 구독을 관리할 때 `..

React 기본 구조와 스타일링 1. React의 기본 개념  주요 개념 설명 - 컴포넌트 기반 아키텍처: React는 컴포넌트를 사용하여 UI를 만들고 관리합니다. 각 컴포넌트는 독립적이고 재사용 가능한 코드 블록이며, 다른 컴포넌트와 조합하여 전체 애플리케이션의 UI를 구성합니다. - UI 선언적 접근: React는 선언적(Declarative) 방식으로 UI를 정의합니다. 즉, UI가 특정 상태에 대해 어떻게 보여야 하는지를 선언적으로 작성하고, React가 이를 렌더링하고 관리하게 합니다. 사용 시나리오 - 컴포넌트 기반 아키텍처는 애플리케이션의 복잡성을 줄여주며, 특히 재사용 가능한 컴포넌트를 개발할 때 유용합니다. 예를 들어, 버튼, 카드, 모달 창과 같은 UI 요소는 개별 컴포넌트로 만들고,..

Q. 이름이 같은 컴포넌트를 동시에 import 하려면 어떻게 해야 하는지 적어보세요.  A. 이름이 같은 컴포넌트를 동시에 import해야 할 때는 별칭을 사용하여 구분할 수 있습니다. 예를 들어, Button이라는 이름을 가진 컴포넌트가 두 파일에 각각 있을 때, 다음과 같이 as 키워드를 사용하여 별칭을 붙여서 import합니다 :)import { Button as PrimaryButton } from './PrimaryButton';import { Button as SecondaryButton } from './SecondaryButton';  Q. 여러 컴포넌트를 하나의 파일에서 export하는 방법에 대해 적어보세요. A1. named export 파일에서 여러 컴포넌트를 각각 export하고..

Q. ## **Day 3: 메달 집계 수정 및 삭제 기능 구현** ### 1. **메달 집계 업데이트 기능** - 이미 추가된 국가의 메달 수를 수정할 수 있는 기능을 추가합니다. - **구체적인 구현**: - 수정하려는 국가의 데이터를 입력한 후 [업데이트] 버튼을 클릭하면 해당 국가의 메달 수가 변경됩니다. - 입력한 나라 이름을 기반으로 리스트에서 해당 국가를 찾아 수정합니다. ### 2. **메달 집계 삭제 기능** - 각 나라 옆에 삭제 버튼을 추가하여, 클릭 시 해당 국가의 메달 집계가 리스트에서 제거되도록 합니다. - **구체적인 구현**: - filter 메서드를 활용하여 선택된 국가를 제외하고 나머지 국가들로 리스트를 재구성합니다. ### 3. **최종 확인 및 코드 정리** - 작성한 ..