Sparta Coding Club/React 기초반, 심화반 [항해 99] 6

스파르타 코딩클럽 React 리액트 심화반 3주차 정리 lodash, debounce, throttle, useCallback

lodash - 자바스크릅트 유틸리티 라이브러리 - 배열관리, 모듈화 성능향향 등등 - debounce와 throttle을 제공 debounce & throttle - 둘 다 콜백을 줄여주기위한 용도 debounce 이벤트 요청을 받으면 잠시 기다렸다가 요청을 실행하는데, 실행전에 새로운 요청이 들어오면 이전 요청을 수행하지않고 또 기다렸다가 가장 마지막에 들어온 요청을 수행한다. throttle 일정시간동안 요청 들어온 이벤트의 가장 마지막인 이벤트를 수행한다. useCallback(x, [y]); - 함수를 저장한다. - 컴포넌트가 리랜더링 되어도 일정 조건 아래에 함수가 초기화되지 않는다. - x 는 저장할 함수, y가 변하면 함수가 재선언된다. 예시) > 1000은 밀리초를 의미하며 저 부분으로 ..

스파르타 코딩클럽 React 리액트 심화반 2주차 정리2_파이어베이스를 이용한 계정관리

Firebase Authentication 사용하는 법 프로젝트에 파이어베이스 패키지 설치 yarn add firebase 파이어베이스 콘솔 > 프로젝트 선택 or 생성 > 좌측 메뉴에서 Authentication 클릭 > 시작하기 클릭 원하는 로그인 방법 선택 문서 보고 필요한 코드 가져가기 https://firebase.google.com/docs/auth/web/start?authuser=0 웹사이트에서 Firebase 인증 시작하기 Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기 의견 보내기 웹사이트에서 Firebase 인증 시작하기 Firebase 인증을 사용하면 사용자가 이메일 주소 firebase.google.com 문서를 보면 비밀번호 기반..

스파르타 코딩클럽 React 리액트 심화반 2주차 정리 -Promise, OAuth2.0, JWT, 웹 저장소

자바스크립트는 싱글쓰레드로 동작하는 언어 > 일꾼이 하나라 작업을 하나씩 수행함. 단, 실행환경의 도움을 받기에 비동기적인 동시실행이 가능함. 비동기 작업시 > 콜스텍에 setTimeout 같은게 쌓임 > 콜스텍이 Web API 에게 처리 위임 > Web API가 콜백큐에 콜백함수 넘겨줌 > 콜백큐는 이벤트 루프를 통해서 콜스텍에 콜백함수를 넘겨줌 > 콜스텍이 넘겨받은 콜백함수 처리 콜백 자바스크립트가 비동기처리를 하기위한 패턴 중 하나. *콜백함수가 중첩될수록 관리가 힘들어진다. Promise 비동기 연산이 종료된 이후 결과를 알기위해 사용하는 객체 const promise = new Promise((resolve, reject)=>{ if ( ){ resove("성공") }else{ reject("실..

스파르타 코딩클럽 React 리액트 심화반 1주차 정리 - Javascript

이 글에서 사용하는 모든 A, B, C..a,b,c...는 원하는 값을 넣어서 사용할 수 있다. 정해진 것이 아님. Javascript 변수/상수 변수 (let) : 변하는 값 = 재할당이 가능한 값 상수 (const) : 변하지 않는 값 = 재할당이 불가능한 값 *const로 선언한 객체는 일부 재할당 가능 (자세한건 아래의 객체형 참고.) *var 은 오류 찾기가 힘들어서 es6부터는 보통 let과 const를 사용한다..! 선언하기 let a = 1; 혹은 let a; 선언후 할당하기 a = 1; 가능 불가능 let a = 1; a = 2; let a = 1; let a = 2; scope : 변수가 어디까지 살아있는지의 범위 block-scope..

스파르타 코딩클럽 React 리액트 기초반 4주차 정리 - Keyframes, Firebase 설정부터 연동, 컬랙션 가져오기/추가/수정/삭제까지

Keyframes animation에서 사용하는 속성 중 하나, css 에서 사용하며 styled-component를 통해 js파일에서도 사용 가능하다. CSS 에서의 사용예시 더보기 @keyframes 키프레임이름 { 0%{초기 형태} 50%{변화 중간의 형태} 100%{변화 완료된 형태} } animation : 키프레임이름 1s ease ; styled-component 에서의 사용 예시 더보기 import React from 'react'; import styled, {keyframes} from "styled-components"; function App() { return ( ); } const 키프레임이름 = keyframes` 0%{초기 형태} 50%{변화 중간의 형태} 100%{변화 완료..

스파르타 코딩클럽 React 리액트 기초반 1~3주차 후기

정리보단 후기로 들어오는 사람이 있을거같아서 후기부터 조신하게 적고 정리는 따로 글을 생성하겠습니다.. 리액트를 공부하기위해 필요한 지식은 다음과 같습니다. HTML CSS Javascript (바닐라 = 순수 자바스크립트) "필요한 지식 아무것도 몰라요" 생활코딩의 WEB1부터 듣는걸 추천드립니다. https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 자바스크립트의 경우, es6버전의 자바스크립트에 대해 핥아먹어보는 ..