코딩공부/React(29)
-
리액트 심화반 2주차(3)
Firebase Authentication Autentication 둘러보기 https://firebase.google.com/docs?authuser=0 문서 | Firebase Firebase SDK 참조, 통합 가이드, 샘플 코드, 라이브러리 firebase.google.com 회원가입 구현하기 firebase.js에 만들어둔 auth 가져오기 리덕스에서 signupFB 함수 만들기 auth.createUserWithEmailAndPassword()로 가입 시키기 Signup 컴포넌트에서 signupFB를 호출! 가입한 후, display_name 바로 업데이트하기 사용자 정보 업데이트 후에 메인 페이지로 이동하기 로그인 구현하기 firebase.js에 만들어둔 auth 가져오기 리덕스에서 logi..
2022.02.07 -
리액트 심화반 2주차(2)
토큰 기반 인증 [옛날 이야기 - 세션 기반 인증] 예전에는 사용자의 로그인 상태를 서버가 전부 가지고 있었어요. 서버의 세션에 사용자 정보를 넣고 이 사람이 로그인을 했다 안했다를 전부 기록하고 기억했습니다. 이 세션은 서버의 메모리나 데이터베이스 등에 저장해두는데, 로그인한 사용자가 많아지면 서버에 부하가 많이 오겠죠? 그렇다고 서버를 여러개 놓자니 관리가 까다로워지고요. → 그래서 최근에는 오늘 배울 토큰 기반 인증 방법을 많이 사용해요! OAuth2.0 외부서비스의 인증 및 권한부여를 관리하는 프레임워크입니다! → Open Authentication, Open Authorization라고 해요. (인증과 허가를 포함해요!) OAuth 동작 방식 (간단 ver.) 클라이언트와 서버 사이에 인증(로그..
2022.02.07 -
리액트 심화반 2주차(1)
Promise 자바스크립트는 싱글 쓰레드로 동작하는 언어입니다. (메인 쓰레드 하나와 콜스택 하나로 구성되어 있어요!) 그리고 비동기 작업을 동시에 할 수 있어요. 오잉?🤢 1번에 1개의 작업만 할 수 있는데, 어떻게 동시 실행을 할까요? → 자바스크립트는 코어 엔진만 가지고 돌아가지 않아요! 실행환경(런타임)의 도움을 받아 동시 실행을 합니다. (WebAPI(dom, ajax, setTimeout...), Task Queue, Event Loop 등과 함께 동작합니다.) 콜백이란? 콜백은 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나입니다! 전통적인 콜백 패턴은 일명 콜백 헬로 불리는 엄청난 중첩 문제가 생기기 쉽습니다. e.g) 콜백 헬 꼬리에 꼬리를 무는 비동기 처리가 늘어나면 호출이 계속 ..
2022.02.05 -
리액트 심화반 1주차
기획서 쪼개기 프로토 타입 툴 제플린, XD, 피그마 등등.. https://www.figma.com/file/5GhEvvI68oIM7xOm6p3mIO/%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0?node-id=4%3A185 Figma Created with Figma www.figma.com 컴포넌트 쪼개기 뷰 기준으로 나누기(생긴거 기준, 어떤게 반복된다..라던지) 버튼 하나하나 나누기 큰거에서 작은거로, 작은거에서 큰거로 등등 사람마다 다 다르다! 많이 하다보면 자기만의 방법이 생긴다 자기한테 제일 좋은 방법으로 쓰자
2022.02.05 -
리액트 기초반 4주차
keyframes keyframes는 styled-components안에 이미 들어있습니다! 웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용합니다. transition은 단순한 엘리먼트 상태변화에 쓰기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋아요! Keyframes은 animation에서 사용하는 속성 중 하나랍니다! transition : 일정한 크기로 요소를 크게해줌 animation : 어느정도 크기까지 일정하게 커지다가 확 커짐 애니메이션 속도 조절하는 것이 바로 keyframes 애니메이션의 속성, 규칙 움직이는 동그라미 만들기 import React from 'react'; import './App.css'; // styl..
2022.02.03 -
리액트 기초반 3주차(2)
리덕스 전역상태관리를 위한 전역 상태 저장소 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없어요. 왜냐면 데이터는 부모에서 자식으로 흐르게 하기로 했으니까요.(데이터는 단방향으로!) 리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용합니다! 또, 데이터를 관리하는 로직을 컴포넌트에서 빼면, 컴포넌트는 정말 뷰만 관리할 수 있잖아요! 코드가 깔끔해질테니, 유지보수에도 아주 좋겠죠. 🙂 상태관리 흐름도 (1) 리덕스 Store를 Component에 연결한다. (2) Component에서 상태 변화가 필요할 때 Action을 부른다. (3) Reducer를 통해서 새로운 상태 값을 만들고, (4) 새 상태값을 Store에 저장한다. (5) Component는 새로운 상태값을 받..
2022.02.02