효니 TIL

로그인 기능을 구현할 땐 signInWithEmailAndPassword 함수를 사용했지만,회원가입 기능 구현시엔 createUserWithEmailAndPassword 함수를 사용한다. const handleSignUp = async (e) => { e.preventDefault(); try { const userCredential = await createUserWithEmailAndPassword(auth, email, password); alert(`회원가입 성공! ${userCredential.user.email}`); navigate('/'); } catch (error) { switch (error.code) { case 'au..

서버 구현 없이 로그인 기능 구현을 위해 Firebase 사용하기. 1. Firebase 프로젝트 설정먼저, Firebase 프로젝트를 설정하기 위해 Firebase 콘솔(https://console.firebase.google.com/)에 접속하여 새 프로젝트를 생성한다. 2. 웹 앱 등록생성한 프로젝트에서 웹 앱을 추가하고, Firebase SDK 설정 및 구성 스니펫을 복사한다. 3. Firebase Authentication 활성화Firebase 콘솔의 Authentication 탭에서 로그인 방법을 선택하고(왼쪽 메뉴에서 Authentication 선택), 원하는 로그인 방법(예: 이메일/비밀번호, 구글 로그인 등)을 설정한다. 4. Firebase SDK 설치Firebase를 리액트 프로젝트에..

박스를 이용해 동물의 숲 주민 목록을 동물 종류에 따라 필터링해특정 동물 종류를 선택해서 해당하는 주민들만 볼 수 있도록 구현해 봤다. 우선 이전에 생성해 두었던 translations.js에 중복되거나 필요 없는 객체가 있어 수정했다.const speciesKr = { "Alligator": "악어", "Anteater": "개미핥기", "Bear": "곰", "Bear cub": "아기곰", "Bird": "새", "Bull": "황소", "Cat": "고양이", "Chicken": "닭", "Cow": "소", "Deer": "사슴", "Dog": "개", "Duck": "오리", "Eagle": "독수리", "Elephant": "코끼리", "Frog": "개구리", ..

주민의 종류, 성격, 성별 등 번역된 데이터가 없는 속성들은 객체로 만들어서 사용해보려고 한다. translations.js// 종류const speciesKr = { "Alligator": "악어", "Anteater": "개미핥기", "Bear": "곰", "Bear cub": "아기곰", "Bird": "새", "Bull": "황소", "Cat": "고양이", "Cub": "새끼", "Chicken": "닭", "Cow": "소", "Deer": "사슴", "Dog": "개", "Duck": "오리", "Eagle": "독수리", "Elephant": "코끼리", "Frog": "개구리", "Goat": "염소", "Gorilla": "고릴라", "Hamster":..

주민을 불러와 화면에 데이터를 뿌렸을 때 한국어로 번역할 수 있는 방법을 찾아보는 중 npm으로 불러올 수 있는 패키지가 있길래 사용해 보기로 했다. animal crossing github GitHub - Norviah/animal-crossing: A JSON database for Animal Crossing: New Horizons.A JSON database for Animal Crossing: New Horizons. - Norviah/animal-crossinggithub.com해당 깃헙에 있는 translate.json을 활용해 한글화 할 수 있는 방법을 찾아보았다. 먼저 animal-crossing이라는 패키지를 설치하고 해당 패키지를 불러왔다.import { villagers } fro..

동물의 숲 관련 페이지를 만들어 보고 싶어서  API 키를 요청했다.모동숲 관련된 정보들만 우선 만들어보려고 한다.https://api.nookipedia.com/ Nookipedia Animal Crossing APINookipedia API This free RESTful service provides endpoints for retrieving Animal Crossing data pulled from the Nookipedia wiki, the largest community-driven encyclopedia about the series. Built from the ground up using Python, Flask, and nginx, the key beapi.nookipedia.com  ..

React Router 사용 시 라우팅 된 페이지에서 새로고침을 하니 404 오류가 발생했다.서버가 해당 경로를 알지 못하기 때문에 발생하는 오류였다. 이 문제는 Single Page Application (SPA)에서 발생하는 일반적인 문제로,웹 서버가 요청된 URL 경로를 직접 처리하지 않고애플리케이션의 라우팅 시스템이 처리하기 때문이다.  서버 측 라우팅SPA에서는 클라이언트 측에서 JavaScript 라이브러리(예: React Router)가 URL 경로를 관리한다.하지만, 웹 서버는 서버에 존재하지 않는 URL에 대한 요청을 처리하지 못하고 기본적으로 404 오류를 반환한다. 브라우저의 새로고침브라우저에서 새로 고침을 하면 현재 URL이 서버로 요청되고,서버가 해당 URL을 찾을 수 없기 때문에..

github 저장소에 푸시하기 github에서 새로운 repository 생성 (이때 repository 이름은 리액트 폴더 이름과 동일해야 한다.)repository를 생성하면 기존 저장소를 푸시하는 방법이 설명되어 있다.visual studio에서 새 터미널을 열고 npx create-react-app 생성생성한 폴더 열기 (이때 필요 없는 파일들은 삭제 후 커밋해 줘도 된다.)터미널을 열고 git remote add origin https://github.com/(본인 깃헙 아이디)/(저장소 이름).git 입력한다.만약 원격 브랜치인 main이 아니라 로컬 브랜치인 master로 설정되어 있다면,default 브랜치명을 main으로 변경해 주기 위해 git branch -M main명령어를 입력한..

[React] 컴포넌트에 props 전달하기, prop의 기본값 지정하기[React] JSX spread 문법으로 props 전달하기 리액트에서 자식을 JSX로 전달하는 것은 컴포넌트의 재사용성과 유연성을 높이는 중요한 개념입니다. 부모와 자식 컴포넌트리액트 컴포넌트는 계층 구조를 가집니다.부모 컴포넌트는 자식 컴포넌트를 포함할 수 있으며,자식 컴포넌트는 부모 컴포넌트로부터 데이터를 받을 수 있습니다. 자식 컴포넌트를 JSX로 전달부모 컴포넌트에서 자식 컴포넌트를 포함할 때, JSX를 사용하여 자식 컴포넌트를 전달할 수 있습니다. 이때 전달된 자식 컴포넌트는 부모 컴포넌트의 props.children으로 접근할 수 있습니다.function ChildComponent(props) { return ( ..

[React] 컴포넌트에 props 전달하기, prop의 기본값 지정하기  Spread 문법이란?스프레드 연산자(...)는 객체의 모든 프로퍼티를 펼쳐서 사용할 수 있게 해 줍니다.이를 통해 여러 개의 props를 일일이 나열하지 않고도 컴포넌트에 전달할 수 있습니다. // UserProfile 컴포넌트function UserProfile({ name, age, email }) { return ( Name: {name} Age: {age} Email: {email} );}export default UserProfile;import UserProfile from './UserProfile';function App() { const user = { name..