효니 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  ..

인증 (Authentication)과 인가 (Authorization)란?정보 보안 분야에서 자주 등장하는 두 가지 개념이다.이 두 개념은 시스템 보안의 핵심을 이루며, 사용자와 시스템 간의 상호작용에서 중요한 역할을 한다.   인증 (Authentication)란 무엇인가? 인증이란 사용자가 누구인지 확인하는 과정이다.이는 시스템이 사용자의 신원을 확인하여 시스템에 접근할 수 있는 자격이 있는지 판단한다.사용자 이름과 비밀번호: 가장 일반적인 인증 방법으로, 사용자가 웹사이트에 로그인하기 위해 ID와 PW를 입력생체 인식: 지문, 얼굴, 홍채 인식 등 사용자의 생체 정보를 이용한 인증일회용 코드: 이메일이나 SMS로 전송된 코드, 또는 인증 애플리케이션에서 생성된 코드  인가 (Authorization..

npm이란? npm(Node Package Manager)은 Node.js 환경에서 사용하는 패키지 관리자이다.패키지 관리자는 소프트웨어 패키지(모듈)를 쉽게 설치하고 관리할 수 있도록 도와주는 도구를 말한다.npm을 사용하면 자바스크립트 애플리케이션을 개발할 때 필요한 다양한 오픈 소스 라이브러리와 도구를 쉽게 설치하고 관리할 수 있다.Node.js를 설치하면 npm도 함께 설치된다.   Node.js와 패키지 Node.js: 서버 측에서 JavaScript를 실행할 수 있게 해주는 런타임 환경이다.즉, 브라우저가 아닌 서버에서도 JavaScript 코드를 실행할 수 있게 해 준다. 패키지: 특정 기능을 수행하는 코드 묶음이다.예를 들어, 데이터베이스에 연결하거나 파일 시스템을 조작하는 기능을 제공하..

쿼리 스트링(Query String)이란?쿼리 스트링은 웹 페이지의 URL에서 정보를 전달하기 위해 사용하는 일종의 '문자열'이다.쉽게 말해, 웹 주소(URL)의 일부로, 웹 서버에 전달할 추가적인 데이터를 포함하는 방법이다. URL의 끝에 붙여서 파라미터와 값을 전달할 때 사용한다.   쿼리 스트링의 구성 요소 http://example.com/page?key1=value1&key2=value2여기서 ?는 쿼리 스트링의 시작을 나타내고, &는 여러 파라미터를 구분하는 데 사용된다.  기본 URL 쿼리 스트링이 붙기 전의 URL 부분. 예) https://example.com/page 물음표(?) 쿼리 스트링의 시작을 나타낸다. 파라미터데이터의 키-값 쌍이다. 예) parameter1=value1과 같은..

HTTP 상태 코드란?클라이언트는 웹 브라우저나 앱을 통해 서버에 요청을 보내고,서버는 그 요청에 대해 적절한 응답을 보내는데, 이 응답의 상태를 HTTP 상태 코드로 전달한다.HTTP 상태 코드는 3자리 숫자로 구성되며, 이 숫자는 응답의 상태를 나타낸다.응답은 5개의 그룹으로 나뉜다.  1xx (정보 응답)  요청이 수신되었으며 처리 중이라는 정보를 제공 2xx (성공 응답) 요청이 성공적으로 처리되었음을 나타냄 3xx (리디렉션 메세지) 요청을 완료하기 위해 추가 작업이 필요함을 나타냄 4xx (클라이언트 오류 응답) 요청에 오류가 있어 서버가 요청을 처리할 수 없음을 나타냄 5xx (서버 오류 응답)서버가 요청을 처리하는 동안 오류가 발생했음을 나타냄   1xx (정보 응답)1xx 상태 코드는 요..