TILs

64일차 TIL( cs 기술 면접 스터디 2 / 소셜 로그인(페이스북))

API284 2023. 8. 22. 10:17

컴퓨터는 각 구성항목을 다양하게 배치해서 여러 다양한 형태의 컴퓨터가 될 수 있다.

기본지식 밑바탕이 되는 컴퓨터의 구성부터 알아보자

 

입출력 장치

  • 입력 장치의 종류
    • 키보드, 마우스, 터치스크린, 마이크,  카메라 등..
    • 사용자는 입력 장치들을 통해 컴퓨터에게 명령을 요청하거나 데이터를 입력합니다.
    • 우리는 키보드를 통해 파일에 문자를 입력하도록 명령하고 연산을 작성한뒤 엔터키를 눌러서 연산수행 및 저장을 명령할 수 있습니다.
    • 마우스를 통해 폴더를 열거나 파일 실행하도록 명령하고 컴퓨터 설정을 변경 할 수 있습니다.
  •  컴퓨터가 사용자에게 데이터를 보여주거나 처리결과를 보여주는 창구가 출력 장치 입니다. 푸드트럭으로 비유하자면 메뉴판이나 수령대로 비유할 수 있습니다.

  출력 장치 종류

        모니터, 스피커, 프린터

 

 

CPU의 구성은

산술논리 연산장치(ALU) : 비교, 판단, 연산을 담당.

제어부(CU)와 내부 버스  : 명령어의 해석과 올바른 실행을 위하여 CPU를 내부적으로 제어.

메모리 유닛

레지스터 : 처리할 명령어를 저장합니다.

캐시 메모리(L1) : 처리속도를 높여주는 역할을 합니다. 

 

프로세서에 위치한 고속 메모리로 극히 소량의 데이터나 처리 중인 중간 결과와도 같은 프로세서가 바로 사용할 수 있는 데이터를 담고 있는 영역을 레지스터라고 한다. 용도에 따라 범용 & 특수 목적 레지스터가 구분되는데, 

- 메모리 주소 레지스터: (MAR) : 읽고 쓰기 위한 주기억장치의 주소를 저장한다.
- 프로그램 카운터 (PC) : 다음에 수행할 명령어의 주소를 저장
- 명령어 레지스터 (IR) : 현재 실행 중인 명령어를 저장
- 메모리 버퍼 레지스터 (MBR) : 주기억장치에서 읽어온 데이터나 저장할 테이터를 임시로 저장
- 누산기 (AC, ACCUMULATOR) : 연산 결과를 임시로 저장

 

 

레지스터는 CPU / 캐시메모리(SRAM), 메인 메모리(DRAM) 은 주기억장치 / 하드디스크(HDD)는 보조 기억장치

 

캐시 메모리

PC의 전원이 OFF 하면 지워지게되지만 가장 빠르게 조회할 수 있는 저장공간 !

캐시메모리 = 컴퓨터 시스템 향상을 위해서 CPU와 주기억장치 사이에 있는 아주 작은 비싼 메모리이다

  • CPU 구성중에서 보신 캐시메모리는 L1(레이어1)캐시메모리 이고,
  • 메모리그룹에 속한 CPU와 별개로 구성되어있는 캐시메모리는 L2 캐시메모리, L3 캐시메모리 라고 부른다

 

주 기억장치

주 기억장치는 컴퓨터가 전원이 꺼지면 지워지지만 조금더 빠르게 조회할 수 있는 저장공간 !

  • 메인메모리 = 주기억장치 = RAM
  • RAM은 Random Access Memory의 약자
  • RAM은 DRAM과 SRAM이 있는데 주기억장치는 주로 DRAM을 의미 (SRAM은 캐시나 레지스트리)
  • 컴퓨터의 CPU가 현재 처리중인 데이터나 명령만을 일시적으로 저장하는 휘발성 메모리
    • 전원이 꺼지면 메인 메모리에 저장된 내용들은 모두 사라지기 때문에 컴퓨터가 꺼진 이후에도 데이터를 유지하고 싶을 경우에는 데이터를 하드디스크에 저장해야함 !!!
  • 보조기억장치(하드디스크)보다 접근속도가 빠르다 !
  • 모든 프로그램은 컴퓨터에서 실행되기 위해 메모리의 일부를 사용하게된다
  • HDD - RAM - CPU 와 유사한 방식으로 연산과정의 중간에 위치하는데, 
  • HDD에 비해 월등히 빠른 속도로 CPU가 정보를 원활히 이용할 수 있도록 지향하자 !
  • CPU가 사용하기 좋도록 각종 정보를 임시 저장하는 휘발성 장치다
  • SRAM vs DRAM

 

FACEBOOK Social login

 

https://developers.facebook.com/apps/?show_reminder=true 여기에서 시작하면 된다

 

1. 앱을 생성하고

사용 사례 권한으로 들어가서 E mail 탭에서 추가를 클릭해줘야 한다. (초기에 이걸 안해서 빙글 돌아왔다;;)

 

 

이후에 설정 - 기본 설정 탭으로 들어가서 앱 ID 와 시크릿 코드를 확인한다 (supabase 이용에 필요하다)

 

이후 대시보드 - 제품 설정(빠른 시작은 스킵) - 클라이언트 Oauth 설정에 들어가서 리디렉션URI을 입력해준다

 

 

 

 

Callback URL의 제공하는 주소를 페이스북 리디렉션 URI위치에 복붙해준다.

이어서 client ID / secret 을 이어붙여넣어준다.

 

쉽게 성공

 

  const signInWithFacebook = async (e: React.FormEvent) => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'facebook'
    });
    if (data) alert('로그인이 완료되었습니다');
    console.log(data);
    if (error) console.error('error =>', error);
  };

 

코드 또한 단순하다 역시 provider만 수정해주면 된다.

다만 공식문서만 보고 해야해서 웬만하면 영문으로 번역해서 대조해 보며 진행하는게 좋은 거 같다. 여러모로..

 

이렇게 삼위일체