위 사진에서 서비스클라이언트=React, 서비스서버=DRF이다. Kakao Auth Server는 카카오 서버(내가 만든 서버가 아니다)

전반적인 과정에 대해 알고 싶다면 카카오 developers페이지를 참조해보자. https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#before-you-begin

카카오 로그인 요청

프런트엔드에서 백엔드로 요청을 보낸다. 나는 Auth.js에서(위사진) 카카오톡으로 계속하기 버튼을 누르면 카카오로그인 페이지가 뜨도록 href를 연결해 놓았다. (href가 실제로 작동하도록 하기 위해서는 1단계까지 마무리해야한다. 지금은 카카오로그인페이지가 당연히 안열린다..!)

1단계 - 인가코드 받기

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code

href 과정은는 다음 블로그를 많이 참고했다. https://data-jj.tistory.com/53

oAuth.js를 만들어서 거기에 REST_API_KEY,REDIRECT_URL,KAKAO_AUTH_URL을 저장해 놓았다. 이때 KAKAO_AUTH_URL = https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code이다 (카카오 디벨로퍼즈 요청 sample참조) 참고로 REST_API는 내애플리케이션>{해당프로젝트}>앱설정>요약정보에 있다. REDIRECT_URL은 카카오로그인을 한 후 리다이렉트될 페이지를 뜻한다. 즉 프런트엔드(리액트) 페이지 중에 골라야한다. 나는 REDIRECT_URL로 http://localhost:3000/InfoCollect로 해두었다. (이후 인가코드를 받아올 페이지이다.)

** 이때 내애플리케이션>제품설정>카카오로그인의 맨 하단의 Redirect Url에도 위와 똑같은 http://localhost:3000/InfoCollect를 저장해두어야한다.**

설정이 끝나고 아까 만든 Auth페이지에서 버튼을 클릭하면 다음과 같이 카카오 로그인 창으로 리다이렉트 될것이다!

로그인하고 나면 아까 설정해두었던 REDIRECT_URL로 가질것이다. 이와 함께 인가코드가 올것인데 어디에 있나면..

REDIRECT_URL로 설정해둔 url뒤에 쿼리스트링으로 인가코드가 있는것을 알 수 있다.(이 인가코드는 요청할때마다 바뀌는 값이다.)

1.5단계

인가코드를 받아오기는 했는데 이건 지금 프런트단에 있다. 하지만 인가코드는 어디에 쓰이는지 생각해보면 백엔드가 카카오 서버에게 인가코드를 보내고 카카오서버로부터 토큰을 받아올때 사용된다..

즉 프런트단에 있는 인가코드를 백엔드로 넘겨줘야한다는 뜻...

프런트단 url에 있는 인가코드를 변수에 저장해서 백엔드로 넘겨보자!

인가코드 저장

아까 나는 REDIRECT_URL로 http://localhost:3000/InfoCollect로 해두었다. 이때 컴포넌트가 불려진다. 여기서 다음 코드와 같이 인가코드를 받아서 저장하고 KakaoLogin이라는 컴포넌트로 넘겨주었다.

백엔드로 인가코드 넘기기

Callback컴포넌트로 부터 받은 인가코드를 이용해서 백엔드에 GET요청을 할것이다. 이유는 인가코드를 백엔드로 넘기기 위해서는 url에 쿼리스트링으로 넘겨야한다고 한다. (출처는 https://velog.io/@isabel_noh/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-REST-API 왜 인지는 나도 찾아봐야한다..) http://{서버주소}?code=${code} 형식으로 넘기라고 하니(출처: https://data-jj.tistory.com/53) 나는 http://localhost:8000/api/oauth/kakao/login?code=${CODE}를 axios를 이용해서 get으로 처리했다. (axios과정에서 두번호출되고 400에러 500에러 등등 문제가 많았었다. 내가 프런트엔드는 잘 몰라서..)

이때 django 서버를 확인하면 GET요청이 보내졌을것이다. 장고 views에서 GET요청에 포함되어있는 인가코드를 다음과 같이 분리 저장해야한다.

이렇게 해서 백엔드에 인가코드가 전달/저장 되었다!

이 과정이 자세히 나와있는 문서가 별로 없어서 더 헤멨던것 같다.

2단계 토큰 받기

백엔드에 인가코드가 있으니 남은 작업은 한결 쉬울것이다. https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id={KAKAO_REST_API_KEY}&redirect_uri={KAKAO_REDIRECT_URI}&code={CODE} CODE는 인가코드, KAKAO_REST_API_KEY는 미리 앱에서 받아놓았던 위의 REST_API_KEY와 같은 값이다. KAKAO_REDIRECT_URI는 아까 설정해둔 REDIRECT_URL과 같은!! urldl여야한다!!(중요!! 여기서 많이 헤멨다.) KOE303 에러의 원인이기도 하다.

설명에서는 인가코드를 요청할때 url과 같은 url을 쓰라는데 아까 인가코드 요청코드는 KAKAO_AUTH_URL = https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code이고 여기서 REDIRECT_URL은 http://localhost:3000/InfoCollect이니, KAKAO_REDIRECT_URI도 http://localhost:3000/InfoCollect로 설정해야한다.

여기까지하면 카카오로그인 버튼 누르고 카카오 로그인후 토큰까지 받을 수 있다.

이후 과정은 나중에 이어서..

[참고자료] https://data-jj.tistory.com/53 https://velog.io/@isabel_noh/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-REST-API

프로세스 안에 스레드가 있다라고 느꼈는데 포함관계는 아니고 프로세스 안에 여러개 스레드가 있다라는 관점에서 그렇게 생각했다.

프로세스

예를 들어서 동영상재생 앱이 작동할때를 생각해보자. 이때 앱을 하나 열었으니 프로세스는 하나 실행된다. 만약 같은 앱의 창을 여러개 띄우면 프로세스가 2개 이상, 즉 멀티프로세스라고 할 수 있다.

스레드

프로세스를 앱의 단위, 큰 통이라고 생각할 수 있는 반면 스레드는 그 통안에 존재하는 구성품같다는 생각을 했다.

아까 예로든 동영상 재생 앱으로 돌아가보자. 해당 앱의 기능에는 영상을 보여주는 기능과 함꼐 소리를 들려주는 기능이 있다. 즉 기능이 2개가 있는 것이다.(추가 기능이 있다면 기능은 더 늘어나겠지) 이 기능을 실행시킨다는 말을 다르게 하면 작업을 실행시킨다 라고 할 수 있다.

스레드가 1개라면 한가지 작업이 진행되고 있다는 것이고 스레드가 2개이상, 즉 멀티스레드라면 여러 작업이 실행되고 있다는 뜻이다. 이때 비록 멀티스레드 일지라도 프로세스는 1개이다. 이는 싱글스레드 일때도 마찬가지이다.

즉, 한 프로세스(통)안에 한개 혹은 그이상의 스레드(구성품)이 있다고 할 수 있다.

멀티프로세스

스레드는 싱글스레드가 있고 멀티스레드가 있는데 프로세스는 어떨까? 프로세스도 마찬가지이다. 아까 앱을 하나 열면 프로세스 하나가 실행된다고 했다. 그렇다면 여러개의 앱을 열면? 바로 멀티프로세스인것이다.

예로 동영상앱과 게임앱을 동시에 켜놓았다고 해보자. 동영상앱에는 스레드가 2개가 있고 게임앱은 스레드가 8개라고 해보자. 이는 두개의 프로세스(멀티프로세스) 그리고 각각 2개, 8개의 스레드가 실행되고 있는 상태이다. 두개의 큰 박스가 있고 한 박스에는 실(스레드)가 2개 나머지 박스에는 실이 8개 들어있다고 생각하면 될 것 같다.

*운영체제의 자원은 한정되있다. 따라서 프로세스가 많아지면 한 프로세스당 할당받을 수 있는 양은 자연히 줄 것이다.

그렇다면 프로세스와 스레드의 다른 차이는

이번에는 독립성 오류관점에서 생각해보자.

운영체제라는 것이 있는데 사용자가 앱을 실행하면 프로세스는 운영체제로부터 앱 실행에 필요한 자원인 메모리를 할당받는다. 프로세스는 할당받은 메모리를 프로세스에 포함된 스레드들을 실행시키는데 사용된다. 여기서 스레드 실행은 코드를 수행시킨다는 것을 뜻한다.

멀티프로세스에서 각각의 프로세스는 운영체제에서 할당받은 메모리를 가지고 실행하기에 프로세스끼리는 독립적이다. 즉 하나의 프로세스가 잘못되어도 다른 프로세스에는 영향을 주지 않는다. 이미 할당 받은 자원을 각자 알아서 사용하는 것이기에 서로 독립적이다. 그리고 이러한 프로세스들은 병렬적으로 실행된다. 여러앱을 동시에 쓸 수 있다는 말이다.

(참고로 위처럼 멀티프로세스를 실행하는 것도 멀티태스킹이라고 하지만, 한 프로세스 내에서 멀티스레드를 실행시키는 것도 멀티태스킹이라 한다.)

그렇다면 스레드는 어떨까. 멀티스레드는 한 프로세스에 속해 있다. 같은 자원을 그떄그때 필요에 따라 공유해서 쓰는 것이다. 스레드는 프로세스 내부에서 생성되는 것이기 떄문에 한 스레드에 문제가 생기면 다른 스레드도 종료가 될 수 있다. 왜냐하면 한 프로세스에 문제가 생기면 프로세스 자체가 종료될 수 있는데 그러면 실행되고 있는 모든 스레드가 함꼐 종료되기 때문이다.

위의 예를 대입하자면 동영상앱이 문제가 있어도 게임앱은 이와 관계없이 잘 작동한다.(프로세스끼리는 독립적이다.) 하지만 동영상은 재생은 되고 소리는 안나오는 경우 결국 동영상앱은 작동하지 않는다.(스레드끼리는 영향이 있다. 또한 스레드가 문제가 있으면 프로세스도 종료될 수 있다.)

즉, 프로세스끼리는 독립적이지만 스레드끼리는 서로 영향이 있다.(물론 같은 프로세스의 스레드라는 가정하에)

https://velog.io/@soyoungdl/sh-react-scripts-command-not-found-%EB%A6%AC%EC%95%A1%ED%8A%B8

ls -l <찾은 경로 python 전까지>/python* ls -l /opt/homebrew/bin/python* 에서 원하는 버전이 있는지 확인후

ln -s -f /opt/homebrew/bin/python<원하는버전> /opt/homebrew/bin/python e.g) ln -s -f /opt/homebrew/bin/python3.10 /opt/homebrew/bin/python

터미널 껐다가 켜고 python --version

바뀌지 않았으면

brew unlink python@<끊고싶은버전> e.g) brew unlink python@3.8 brew link --force python@<연결하고싶은버전> e.g) brew link --force python@3.10

여기까지만 해도 되지만 이후에 which python3를 했을때 경로가 약간 달라질 것이기에 다시 복구하기 위해

vi ~/.zshrc 또는 code ~/.zshrc 후자로 하면 vscode에서 열린다 거기서 /opt/homebrew/bin/python3외에 /opt/homebrew/bin/python<원하는버전>인것이 있을것이다. 그거 삭제.

vi ~/.zshrc로 열었다면 새로 삽입하기위해 i를 누르고 원하는 곳에 변화를 준후 esc를 누른후 :wq(저장후 나가기)

변경사항을 반영하기 위해서 source ~/.zshrc 저장하고 다시 which python3해보면 원래 경로가 나올 것이다.

https://clolee.tistory.com/3

터미널 껐다가 다시 킨 후 파이썬 버전 확인

python --version

static이란

static 키워드를 붙이면 class내의 메소드나 프로퍼티가 정적 메소드 / 정적 프로퍼티로 바뀌게 된다. (그렇게 정의 하게 되는 것이다)

예시

class ClassWithStaticMethod {
  static staticProperty = 'someValue';
  static staticMethod() {
    return 'static method has been called.';
  }
  static {
    console.log('Class static initialization block called');
  }
}

console.log(ClassWithStaticMethod.staticProperty);
// output: "someValue"
console.log(ClassWithStaticMethod.staticMethod());
// output: "static method has been called."

정적 메서드와 정적 프로퍼티는 클래스에 종속적이다. 클래스(붕어빵틀)에서 인스턴스(붕어빵)를 생성할 수 있는데 보통 클래스의 메서드와 프로퍼티는 특정 인스턴스와 연결되어있다.

하지만 정적 메서드와 정적 프로퍼티는 클래스와 연결되어있다. 그래서 정적 메소드/프로퍼티는 클래스이름.메소드/프로퍼티 형식으로 사용해야하고 일반 메소드/프로퍼티는 인스턴스 생성후 인스턴스이름.메소드/프로퍼티 형식으로 사용해야한다.

형식 정적 메소드/프로퍼티 : 클래스이름.메소드/프로퍼티 일반 메소드/프로퍼티 : 인스턴스이름.메소드/프로퍼티

예시

//_instructor와 _numbers는 private로 설정해 두어서 
//외부에서 접근이 불가하다.

//클래스이름.정적메소드();          가능
const firstInstructor = Instructor.getInstance();
const secondInstructor = Instructor.getInstance();

//인스턴스.비정적메소드();          가능
firstInstructor.addNumber(1);  
secondInstructor.show();       

//Instructor.addNumber(3);        불가
//Instructor.show();              불가
//firstInstructor.getInstance();  불가

class Instructor {
    private static _instructor :Instructor;
    private _numbers: number[];

    private constructor(numbers:number[]){
        this._numbers = numbers;
    }
    public static getInstance(): Instructor{
        if(this._instructor==null){
            this._instructor = new Instructor([]);
        }
        return this._instructor;
    }
    public addNumber(number:number){
        this._numbers.push(number);
    }
    public show(): void{
        for(const candidate of this._numbers){
            console.log(candidate);
        }
    }
}

const firstInstructor = Instructor.getInstance();
const secondInstructor = Instructor.getInstance();
firstInstructor.addNumber(1);
secondInstructor.show();

//Instructor.addNumber(3);       불가
//Instructor.show();             불가
//firstInstructor.getInstance(); 불가

정적 메소드/프로퍼티 호출

this vs class이름

1. 동일한 클래스 내의 정적 메소드에서 정적메소드를 호출한 경우 => this

예시

class StaticMethodCall {
  static staticMethod() {
    return 'Static method has been called';
  }
  static anotherStaticMethod() {
    return this.staticMethod() + ' from another static method';
  }
}
StaticMethodCall.staticMethod();
// 'Static method has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'

2. 동일한 클래스 내의 constructor를 비롯한 비정적 메소드에서 정적메소드를 호출한 경우 => class이름

예시

class StaticMethodCall {
  constructor() {
    console.log(StaticMethodCall.staticMethod());
    // 'static method has been called.'

    console.log(this.constructor.staticMethod());
    // 'static method has been called.'
  }

  static staticMethod() {
    return 'static method has been called.';
  }
}

3. 보통의 경우인 비정적 메소드에서 비정적 메소드를 호출한 경우 => this

종합 예시

class Bird{
        static readonly _wingNumber : number=2;
        private _species :String;
//비정적에서 비정적 호출
        constructor(species:String){
                this._species = species;
        }
//비정적에서 비정적 호출
        species():String {
                return this._species;
        }
//비정적에서 정적 호출
        wingNumber(): number{
                return Bird._wingNumber;
        }
//정적에서 정적 호출
        static showWingNumber(): number{
                  return this._wingNumber;
        }
}

주의

정적에서 비정적 호출

정적 메서드와 정적 프로퍼티는 인스턴스와는 연결되어 있지 않기에 인스턴스를 만들때 사용되는 클래스의 데이터를 가져오지 못한다.

예시

// 클래스 데이터 접근 예제
class Person {
  constructor() {
    this._name = "내이름은";
  }

  static get name(){
    return this._name
  }

}

// 1. 정적 메서드를 이용해 클래스 데이터 가져오기 - 실패
console.log(Person.name)  // undefined

// 2. 클래스 인스턴스를 선언해 클래스 데이터 가져오기 - 실패
const person = new Person();
console.log(person.name)  // undefined

참고자료 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/static

https://velog.io/@hchayan/1.-JS-static-%ED%82%A4%EC%9B%8C%EB%93%9C

방법

$ git clone -b <branch명> <remote_repo 주소>

branch명은 clone하고자 하는 branch이름

여기서는 feature/responsive

여기서 remote-repo주소란

초록색 Code 버튼 눌렀을때 나오는 주소

또 참고로 git clone할때 인증방법이 바뀌여서 authentication token을 만들어서 사용해야한다.

github token authentication

personal access token 생성방법

앞으로는 github에서 push 등의 작업을 수행할 떄, PW를 입력하라고 뜨면 Personal Access Token을 복사해서 넣으면 된다.

참고자료 https://curryyou.tistory.com/344

atoi 함수란

atoi 함수는 기본적으로 char to int, 문자열을 정수타입으로 바꾸는 함수이다. #include <stdlib.h>를 해야 사용할 수 있다.

#include <stdio.h>
#include <stdlib.h>

int main(){
int num = 0;
char myString[20] = "2019";

printf("string = %s\n",myString);
//2019 출력
num = atoi(myString);
printf("int = %d\n",num);
//2019 출력

char str1[]="testing";
char str2[]="2019";
char str3[]="2021testing";
char str4[]="testing2022";

printf("int = %d\n",atoi(str1));
//0
printf("int = %d\n",atoi(str2));
//2019
printf("int = %d\n",atoi(str3));
//2021
printf("int = %d\n",atoi(str4));
//0
}

atoi("문자") -> 문자가 맨처음 나와서 0 리턴 atoi("숫자") -> 숫자 반환 atoi("숫자 + 문자") -> 문자나오기 전까지 숫자 반환 atoi("문자 + 숫자") -> 문자가 바로 나와서 0리턴

즉 atoi 함수는 매개변수로 들어온 문자열을 앞에서 부터 읽어서 숫자가 아닌 문자가 올떄까지 읽고 숫자로 변환해주는 함수이다.

참고자료 https://blockdmask.tistory.com/331

warning: ignoring return value of ‘realloc’, declared with attribute warn_unused_resul

realloc을 하면 기존보다 더 많은 메모리를 할당받을 때 주소가 바뀌는 경우가 있어서 그 주소값을 다른 곳에 저장하고 다시 사용해야한다고 한다.

https://www.codestudyblog.com/questions/sf/0421201641.html

그래서 storeHere = realloc(str,memorySize); 이런식으로 정의하면 에러가 나지 않는다.

diff -c <파일1> <파일2> 파일1과 파일2에서 다른 줄이 있으면 출력한다.

diff3 <파일1> <파일2> <파일3> 파일 3개를 비교한다.

valgrind ./a.out 메모리 누수가 있는지 알려준다.

1. python version 3.9이상
2. pip version 20.1.1 버전
3. brew install postgresql

다 한후에 시도해보면 될 거다