'항해 중' 카테고리의 글 목록 (15 Page)
본문 바로가기

항해 중267

3주차 - Debounce, Throttle 👉 우리가 감사합니다를 검색 할 때, ㄱ, ㅏ, ㅁ, ㅅ, ㅏ 하나하나 입력할 때마다 검색을 새로 하면 (=검색 api를 호출한다고 해봅시다!), 연관 검색어 같은 걸 빨리 바꿔줄 수 있어서 좋죠. 그런데 감사합니다를 빨리 검색한다고 생각해보세요. 1초도 안되는 시간에 이미 감사합까지 쳤다면, ㄱ,ㅏ,ㅁ,..., ㅎ,ㅏ,ㅂ까지 엄청나게 많이 검색을 해야해요. 😢 → 이럴 땐 특정 시간마다 1번씩, 혹은 키보드 입력을 멈췄을 때만 1번 해주는 게 검색 횟수를 줄일 수 있어요! 특히 api를 불러야 할 때는, 순식간에 엄청 많은 서버 요청이 날아가는 걸 막아줄 수 있어요! → 물론 연관검색어 부분의 엄청난 랜더링도 막아줄 수 있겠죠! 이벤트를 관리 할 수 있는 두가지 방법 1) debounce 더보기 👉 이.. 2021. 12. 1.
[TIL] 27일차 3주차 강의 들으면서 진행 했는 데 어느정도 과제에 구현 했는 데 지금 안되고 있는 부분이 1) 수정 할 때 이미지 미리보기 2) 글 작성하기 (글 작성 할 때 undefined?? 에러 뜸) 다시 코드 쳐보니까 갑자기 됐다.. 뭐하자는 거지 내일은 4주차 강의 듣기 전에 3주차 강의에서 기능 부분 정리하고, 4주차 강의 들어야 함 2021. 12. 1.
[TIL] 26일차 오늘 매니저님이랑 면담을 했다. 매니저님 보자마자 "저 못할 것 같아요 너무 어려워요"라고 말했더니 매니저님이 "잘하고 있다고, 열심히 멱살 잡아 끌어 주겠다고 하셨다" 파도가 조금씩 일렁이다가 이번주에 파도가 쎄게 온 것 같다. 차근차근 하다 보면 다 될 것이다. 오늘도 로그인/회원가입 안된다고 모르겠다고 했다가 혼자서 해보니까 어느정도 감이 잡힌 것처럼 어려운 건 익숙하지 않다고 생각 하면서 열심히 해보자 파도도 한번씩 맞아 줘야지 경각심도 생기고 더 열심히 하지!!! 2021. 11. 30.
2주차 - 로그인 유지하기 / 로그아웃 구현하기 / 퀴즈 1. 로그인 유지하기 더보기 👉 이제 쿠키에 로그인 유무를 저장하지 않죠! 파이어베이스 auth를 통해 관리하고 있으니까요. 🙂 그럼, 페이지가 새로고침 되었을 때 로그인은 어떻게 유지하면 좋을까요? - 로그인 시, 세션에 로그인 상태를 기록 하도록 바꿔줍니다. ... import firebase from "firebase/app"; ... const loginFB = (id, pwd) => { return function (dispatch, getState, { history }) { auth.setPersistence(firebase.auth.Auth.Persistence.SESSION).then((res) => { auth .signInWithEmailAndPassword(id, pwd) .then.. 2021. 11. 30.
2주차 - 로그인하기 1. 헤더 분기하고 리덕스 설치하기 더보기 👉 클라이언트의 입장에서 로그인 하기는 사실 별 게 없어요. 우리 서버에 로그인 요청을 보내고, 응답을 받아서 토큰을 저장하면 끝입니다. - 로그인 하고 나면 뭐가 바뀔까?? : 로그인을 하면 가장 먼저 생각 나는 건 헤더 컴포넌트 바뀌는 겁니다. (헤더 컴포넌트 분기하기) import React from "react"; import {Grid, Text, Button} from "../elements"; const Header = (props) => { const [is_login, setIsLogin] = React.useState(false); if(is_login){ return ( 헬로 ); } return ( 헬로 ) } Header.defaultPr.. 2021. 11. 30.
2주차 - 웹 저장소(feat. 토큰) 더보기 Http는 1번 요청을 하고 응답을 받으면 연결이 해제됩니다! 즉, 우리가 access_token을 클라이언트 어딘가에 저장을 해두어야한단 이야기예요! 그럼 이 토큰을 어디에 저장하면 좋을 지, 클라이언트에서 쓸 수 있는 저장소를 알아봅시다. 😉 - 클라이언트 저장소 더보기 클라이언트 저장소 확인하기 개발자도구 → Application 탭 → 좌측 Storage 확인! - 쿠키 : 클라이언트 로컬에 저장되는 key:value 형태의 저장소입니다. 약 4KB 정도 저장 할 수 있습니다. 1) 쿠키 만들기 : 브라우저에서 개발자 도구를 열고 해볼껀데, 이 때 꼭, 어떤 사이트에 접속한 후에 쿠키를 사용 할 수 있습니다. // key는 MY_COOKIE, value는 here, document.cook.. 2021. 11. 30.
2주차 - 토큰 기반 인증(OAuth 2.0, JWT) 더보기 [옛날 이야기 - 세션 기반 인증] 예전에는 사용자의 로그인 상태를 서버가 전부 가지고 있었어요. 서버의 세션에 사용자 정보를 넣고 이 사람이 로그인을 했다 안했다를 전부 기록하고 기억했습니다. 이 세션은 서버의 메모리나 데이터베이스 등에 저장해두는데, 로그인한 사용자가 많아지면 서버에 부하가 많이 오겠죠? 그렇다고 서버를 여러개 놓자니 관리가 까다로워지고요. → 그래서 최근에는 오늘 배울 토큰 기반 인증 방법을 많이 사용해요! - OAuth 2.0 : 외부 서비스의 인증 및 권한 부여를 관리하는 프레임워크입니다. → Open Authentication, Open Authorization라고 해요. (인증과 허가를 포함해요!) 1) OAuth 동작 방식 (간단 ver) 클라이언트와 서버 사이에 인.. 2021. 11. 30.
2주차 - Promise 자바스크립트는 싱글 쓰레드(Single Thread)로 동작하는 언어입니다. (일꾼이 한명이라서 한번에 하나의 작업만 할 수 있다. , 메인 쓰레드 하나, 콜스택 하나로 구성되어 있다.) 그리고 비동기 작업을 동시에 할 수 있습니다. 1번에 1개의 작업만 할 수 있다고 했는 데 어떻게 동시 실행을 하나요?? -> 자바스크립트는 코어 엔진만 가지고 돌아가지 않습니다. 실행 환경(런타임)의 도움을 받아 동시 실행을 할 수 있습니다. (Web API(DOM, Ajax, setTimeout), Task Queue, Event Loop 등과 함께 동작합니다.) - 콜백이란? : 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나입니다. (콜백 함수란? 함수에 인자로 함수를 넣는 것을 말한다.) 전통적인 콜백 패.. 2021. 11. 30.
[TIL] 25일차 오늘은 최소한으로 컴포넌트 쪼개기를 하다가 내 멘탈이 쪼개졌다. 이게 리액트냐 미친 것 같다. 저번주까지는 쉬웠다. 이번주는 내 머리가 아프다. 1주차 강의 듣고, 들은 내용 가지고 과제 틀 잡았다. 내일도 이러면 난 과제 제출 안할지도 모른다. 진심이다 오늘 한 거 결과물 2021. 11. 29.
728x90