기초다지기/react14 firebase Auth 1. firebase Auth 란?firebase Authentication 쉽게 사용자 인증을 구현할 수 있도록 돕는 firebase 서비스이메일 및 비밀번호 인증이메일 주소와 비밀번호를 사용하여 가입하고 로그인 가능소셜 로그인구글, 페이스북, 트위터, 깃허브 등고 ㅏ같은 소셜 미디어 계정 사용하여 로그인 가능전화번호 인증전화번호를 통해 인증 코드를 받고 입력하여 로그인 가능인증 정보 안전하게 저장인증 정보 변경시 실시간으로 앱에 업데이트2. 장점편의성firebase SDK를 사용하면 다양한 인증 방법을 간단하게 애플리케이션에 통합클라이언트 사이드 개발에만 집중 소셜 미디어 계정 인증OAuth 2.0과 OpenID Connect 지원각종 소셜 미디어 계정 이용한 인증 쉽게 구현 보안사용자의 비밀번호 안.. 2024. 6. 24. firebase에 대해서 1. firebase 란?구글에서 제공하는 모바일 및 웹 애플리케이션 개발 플랫폼2. 주요 기능Authentication (간편 다중 플랫폼 로그인)다양한 인증 제공자 지원 (구글, 페이스북, 트위터, 깃허브 등) 이메일/ 비밀번호, 전화번호 인증 가능인증 상태를 간편하게 관리할 수 있는 도구 제공Firestore (No SQL 데이터베이스)firebase에서 제공하는 NoSQL 형식의 클라우드 데이터베이스데이터를 json 형식으로 저장하고 실시간 동기화 여러 클라이언트 간 데이터 동기화Storage (사진 및 동영상 저장)사용자 파일 저장 및 공유, 강력 보안구글 클라우드 스토리지 기반의 안전한 파일 저장업로드 / 다운로드 및 파일 메타데이터 Hosting (웹앱 호스팅)정적 및 동적 콘텐츠 모두 호스.. 2024. 6. 18. 타입스크립트 tsconfig 경로 baseUrl 절대경로를 기준으로 하는 기본 디렉터리 지정{ "compilerOptions": { "baseUrl": "./src" }}// 상대 경로 사용import MyComponent from '../../../components/MyComponent';// 절대 경로 사용import MyComponent from '@components/MyComponent';가독성 향상 : 긴 상대 경로 대신 짧고 명확한 경로 사용경로 관리 용이 : 프로젝트 구조가 변경되더라도 baseUrl 설정만 변경하면 되므로 유지보수 용이paths 옵션 파일 내에서 특정 모듈 경로를 별칭으로 설정할 수 있는 옵션긴 상대 결로를 사용하지 않고도 모듈을 쉽게 import 할 수 있다. 코드의 가독성과 유지보수성 향상명.. 2024. 6. 12. component 컴포넌트 1. 컴포넌트란?리액트 앱을 구성하는 최소한의 단위애플리케이션의 구성 요소를 담당하며, 재사용 가능하고 독립적인 단위로 구성클래스 컴포넌트 vs 함수 컴포넌트클래스 : ES6 클래스 사용해서 정의, render() 메서드로 UI 반환, 생명주기 메서드 기능 제공, 상태관리 기능 제공함수 : JavaScript 함수로 정의, JSX 반환, react-hook 사용하여 생명주기 기능 활용2. 장점재사용성컴포넌트는 독립적이고 모듈화된 단위로 작성.필요한 곳에서 쉽게 재사용 가능가독성과 유지보수성UI 구조를 명확하게 파악 가능개별 컴포넌트를 수정하여 유지보수를 용이하게 함효율적 업데이트가상DOM 활용하여 효율적이게 업데이트. 필요한 부분만 다시 렌더링3. BEM 모델BEM (Block Element Modifi.. 2024. 6. 10. next에 대하여 1. next란?React를 기반으로하는 웹 개발 프레임워크React는 UI를 만들기 위한 자바스크립트 라이브러리React는 CSR로 (Client Side Rendering) 서버 화면에 보여줄 수 있는 html 파일을 보내주는게 아니라 처음에는 빈 html 파일을 보여주고 이후에 필요한 리소스들을 다운 받아 보여주기 때문에 초기 로딩속도가 느리고, 처음 빈 html을 보여줘 검색 엔진 최적화 측면에서 불리하다는 문제. 이러한 문제를 해결하기 위해 next.js 탄생 2. 특징사전렌더링(pre-rendering) :next는 기본적으로 빌드시 만든 모든 페이지 미리 렌더링하여 보여줌으로서, 페이지 불러오는 속도가 빨라 SEO(검색엔진최적화)에도 좋음 Search Engine Optimization 검.. 2024. 6. 10. react 주요 개념 1. 컴포넌트 Component리액트 앱을 이루는 최소화 단위, 입력(props)을 받아 출력(Element) 하는 역할재사용 가능, 코드 양 줄임, 개발 시간 줄임, 유지보수 쉬움붕어빵에 비유를 많이 하는데 붕어빵틀이 component, 붕어빵 재료가 props, 최종 나오는 붕어빵이 Element된다. 2. JSXconst element = Hello, world!;javaScript + XML필수 사용은 아니지만 JS 코드 안에서 UI 관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다3. 라이프 사이클리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리라 각 컴포넌트의 수명 주기가 존재한다. 라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것.. 2024. 6. 10. 이전 1 2 3 다음
