swr은 데이터를 가져오기 위한 React Hooks로, 자세한 내용은 공식문서를 참조.

• dispatch를 사용한 데이터 호출

  useEffect(() => {
    dispatch({
      type: LOAD_FOLLOWERS_PENDING
    });
    dispatch({
      type: LOAD_FOLLOWINGS_PENDING
    });
  }, []);

• swr을 사용한 데이터 호출

  import useSWR from "swr";
  

const fetcher = url => axios.get(url, { withCredentials: true }).then(result => result.data);

const { data: followersData, error: followerError } = useSWR( http://localhost:3065/user/followers, fetcher ); const { data: followingsData, error: followingError } = useSWR( http://localhost:3065/user/followings, fetcher );

```

해당 내용만 비교해보면 그렇게 효율성이 높아 보이지 않지만, 리듀서 파트와 사가 파트의 코드도 swr 코드로 대체할 수 있기 때문에, 리덕스의 액션 지옥에서 구원받을 수 있다.

일단, 코드를 대체하고 서버를 실행해 잘 동작하는지 확인했다.

언제나 그렇듯 오류가 발생했다. 어떤 오류인지 확인해보니 콘솔창에 404 에러가 발생했다.

네트워크 탭을 열어서 확인해보니 정말 404 에러가 확인되었다.

이상하다 싶어 서버 코드를 확인해 보았다.

분명히 팔로잉 목록과 팔로워 목록을 가져오는 라우터가 존재하는데 404 에러가 발생하니 의아했다.

서버쪽 로깅도 확인해 봤으나 404 로그말고는 별다른 오류가 없었다.

구글에 다양한 키워드로 검색해 봤지만, 내가 원하던 내용은 찾을 수 없었다.

마지막 보루로, node 장인 제로초님의 블로그를 확인해보니, 원하던 정보를 얻을 수 있었다.

블로그 내용을 발췌해 보자면, 라우팅을 처리할 때, 특히 엔드포인트가 와일드카드가 사용된다면 순서에 유의해야 한다고 작성되어 있었다.

위의 코드를 살펴봐도, 팔로잉 목록과 팔로워 목록을 가져오는 라우터가 와일드카드가 사용된 라우터들 보다 아래에 있었다.

합리적 의심이 확신이 되었고, 두개의 라우터를 와일드카드가 포함된 라우터보다 상단으로 옮겨주니 정상적으로 목록을 가져올 수 있었다.

미들웨어는 위에서 아래로, 왼쪽에서 오른쪽으로 실행

해당 공식문서를 참고해서 자신의 블로그의 레포지토리를 생성합니다.

공식문서의 5단계를 모두 완성했다면, username.github.io로 접속해 보면 index.html에 입력된 내용을 확인할 수 있을 것이다.

다음으로, 본격적으로 깃헙 블로그의 UI를 위해 jekyll을 세팅하는 작업을 해보자.

맥에 Jekyll 설치하기

Jekyll 공식문서 : 맥에 Jeykill 설치하기

다음 Jekyll 공식문서를 참고하여 Jeykill 설치를 진행합니다.

공식문서를 확인해 보면, homebrew를 통해서 ruby를 설치하고 다음 명령어를 통해서 쉘의 환경 변수 설정을 요구하고 있습니다.

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile

• zsh 설정
  • vim ~/.zshrc 명령어를 통해서 vim 에디터를 통해서 환경 변수를 설정합니다.
  • ~/.bash_profile 대신에 ~/.zsh로 수정해서 저장해 줍니다.

환경 변수 설정을 마치고 공식문서를 참고하여 rbenv 설치를 진행합니다.

rbenv 설치까지 정상적으로 완료했다면, Bundler와 Jekyll을 설치해 줍니다.

jekyll 번들러 설치시 다음과 같이 permission 오류가 발생한다면

sudo gem install jekyll bundler 명령어를 입력해 설치를 진행합니다.

이 모든 설치가 완료되었다면, 깃헙 블로그의 로컬 레포지토리에 저장된 index.html을 삭제합니다.

로컬 레포지토리에서 jekyll new ./ 명령어를 입력하면, 블로그에 사용될 기본 소스코드가 생성됩니다.

bundle exec jekyll serve 명령어를 입력하면 로컬 서버에서 블로그의 기본 틀을 확인할 수 있습니다.

그렇기 때문에, 리눅스에서 IPC를 이해하는 것은 매우 중요하다.

• file

• message queue

  

• shared memory

• pipe

  • fork 시스템콜로 자식 프로세스 생성했을 때, 부모와 자식 프로세스간의 통신
  • fd: 파일 스크립터
  • nbytes: 실제 파일에 사용될 버퍼의 길이

• signal
• semaphore
• socket

해당 오류를 확인해 보면, Request의 경로가 캐릭터가 이스케이프되지 않았다는 것을 확인할 수 있다.

이스케이프가 뭔고 하고 찾아보니, MDN 공식문서에 다음과 같이 기재되어 있었다.

The escape() function computes a new string in which certain characters have been replaced by a hexadecimal escape sequence.

MDN의 정의를 보면, escape 라는것은 컴퓨터가 못알아먹는 언어를 컴퓨터가 알아먹도록 바꿔주는 함수라는 것을 알 수 있었다.

• 에러 코드 (프론트)

• 에러 코드 (백엔드)

에러 코드를 살펴보면, 프론트에서 get 요청을 보내는 엔드포인트에 data를 encode 해주지 않았고, 백엔드에서는 req.params.tag를 decode 해주지 않았다.

다만, URI에서는 일반적인 encode함수를 사용하지 않고, encodeURIComponent라는 함수를 사용한다. decode 역시, decodeURIComponent를 사용하면 컴퓨터가 알 수 있는 언어로 처리해준다.

에러 부분은 캡처를 따지 못했다. 서버에 쉬지 않고 무한 요청을 보내서, 셀프 디도스급 요청에 컴퓨터가 잠깐 먹통이 되어버렸기 때문이다...(이제 바꿀때가 되긴했나보다...)

오류의 원인은 getServerSideProps의 매개변수로 들어간느 context에 리덕스 리듀서에서 createStore로 생성한 store가 들어 있어야 하는데, 이 store가 존재하지 않아서 오류가 생겼던걸로 추측이 되었다.

• 오류에서 사용된 코드

store가 undefined로 콘솔에 찍히니, 리듀서 부분에서 스토어를 잘못 생성했나 싶었는데, 그것도 아니었다.

여기 저기 찾아보다, next-redux-wrapper 모듈의 버전에 관한 글을 보게 되었다.

혹시나 해서, 프로젝트의 package.json을 확인해 보니, 해당 모듈이 7버전인 것을 확인했다.

next-redux-wrapper 공식문서에 들어가보니 7버전에서는 getServerSideProps를 다음과 같이 사용하라고 설명했다.

공식 문서를 참고해서 코드를 수정하니, getServerSideProps가 올바르게 작동했다.

우선, 타입스크립트에서 변수에 타입을 선언하는 가장 기본적인 방법에 대해 살펴보자면,

var 변수명:타입=값

위와 같이, 변수명에 값을 할당해주기 전에, 타입을 정해주면 된다.

Number

• 변수의 타입이 숫자 형태이면 number를 사용해 타입을 지정해준다.

const score: number = 90;

String

• 변수의 타입이 문자 형태이면 string을 사용해 타입을 지정해준다.

const sentence: string = 'Hello, Typescript!';

Boolean

• 변수의 타입이 진위 값인 경우에 boolean을 사용해 타입을 지정해준다.

const isHandsome: boolean = false;

Null & Undefined

• 타입스크립트에서 null과 undefined는 타입스크립트의 환경 설정에 따라 할당이 가능하기 때문에 주류로 사용되는 타입은 아니다.

let u: undefined = undefined;
let n: null = null;

Array

• 자바스크립트의 배열에서는 배열의 요소에 어떤 타입이와도 자유로웠지만, 타입스크립트에서는 배열의 모든 요소가 같은 타입인 것을 지향한다.
• 기본 표현법

// 배열의 모든 요소가 number 타입
const arr: number[] = [1, 2, 3];

• 제네릭 표현법

const arr: Array<number> = [1, 2, 3];

Object

• 원시 타입이 아닌, 나머지 타입들, 즉 참조 타입을 갖는 모든 변수를 object라 함

• 빈 객체

  const obj: object = {};
  const arr: object = [];
  const func: object = function() {};

• 속성과 값이 있는 객체

  const SON: {name: stirng, job: string, joined_club:string} = {
  name: '손흥민',
  job: '축구선수',
  joined_club: '토트넘 핫스퍼'
  }

• 타입의 재사용을 위한 인터페이스 타입

interface Player {
  name: string,
  joined_club: string,
}

const SON: Player = {
  name: "손흥민",
  joined_club: "토트넘 핫스퍼"
}

const KDB: Player = {
  name: "케빈 더 브라위너"
  joined_club: "맨체스터시티"
}

동적, 정적이라는 단어에서 유추할 수 있겠지만, 자바스크립트는 동적타입 언어라 변수를 선언할 때, 어떤 타입이 와도 이해해준다. 예를 들면, 다음과 같이 a 라는 변수에 number 타입의 1을 할당해줘도, string 타입의 '문자'를 할당해줘도, boolean 타입의 true가 할당해줘도 자바스크립트는 이를 너그럽게 이해해 준다.

var a = 1
a = '문자'
a = true

반면에, 이런 부분에 굉장히 민감하다. 타입스크립트는 정적타입의 언어이기 때문에, 변수의 타입을 처음부터 정해주고 시작한다. 다음과 같이 a라는 변수의 타입을 number 타입으로 정해주면 빼도 박도 못하고 숫자만 할당할 수 있다. 만약, number타입으로 타입을 정해주고 string 타입의 value를 할당하려고 하면 타입 오류가 발생할 것이다.

var a: number = 1
a = '오류가 발생'

동적타입은 런타임 환경에서 타입을 알 수 있기 때문에, 코드를 실행해 보기 전까지 타입 오류를 확인하기 어렵다. 반면, 정적타입은 개발을 하면서 타입을 분석하기 때문에, 타입 오류를 바로 바로 확인할 수 있다.

• 자바스크립트

function sum (num1, num2) {
  // 1.javascript가 런타임에 자동으로 실행
  if(typeof num1 !== 'number' || typeof num2 !== 'number') {
    throw new Error();
  }
  return num1 + num2;
}

sum(10, 4678)

• 타입스크립트

function sum(num1: number, num2: number): number {
  return num1 + num2;
}
sum(10, 4678)

다음 코드에서 볼 수 있듯이, 자바스크립트는 sum 이라는 함수의 코드를 실행하면 1번의 코드를 통해서 인자의 타입을 확인하고, number 타입이 아니면 그제서야 오류를 반환한다.

하지만, 타입스크립트는 sum 이라는 함수의 코드를 작성하는 중에, 인자의 타입을 설정을 안해주었거나, 잘못된 타입이 함수 인자로 들어올 경우 강력하게 어필해 자아성찰할 수 있도록 도와준다.

오류 메시지를 통해서 likePost라는 함수에서 data가 undefined로 들어오는 것을 알 수 있었다.

likePost 함수는 saga의 이펙트 함수를 통해서 서버와 통신을 담당하는데, 아무리 찾아봐도 어느 부분에서 잘못된건지 확인이 되질 않았고, 콘솔을 찍어도 오류때문인지 콘솔도 찍히지 않았다.

이렇게 갈피를 잡지 못하고, 리듀서 코드, 서버쪽 코드를 오랜 시간 들여서 확인했다.

어디서도 오타나 잘못된 코드가 입력됐는지 확인이 되지 않아, 클론코딩 강사님께 질문을 했고 다음과 같은 답변을 받게 되었다.

처음에 답변을 봤을때, 이게 무슨 소리인가 싶었다.

x.data에서 x가 갑자기 어디서 튀어나온 것인지 감이 안잡혔다.

답변 내용을 면밀히 곱씹으면서 보고, 코드를 확인해보니 오류가 발생했던 부분에 result.data라고 작성된 부분을 확인하고, result가 x에 해당됨을 인지했다.

에러 메시지에 data가 undefined라고 나와서 data를 콘솔에 찍었었는데, 콘솔에 찍히지 않았던 이유가 data가 result 객체 안에 있던 변수였기 때문이다.

result로 콘솔을 찍어보니, result의 값이 undefined인 것을 확인할 수 있었다.

result는 API 통신으로 서버에서 응답받은 객체를 할당 받는 변수이다.

const result = yield call(likePostAPI, action.data);

이 result값이 undefined라는 것은 API함수에서 반환된 값이 undefined라는 것인데, API 함수를 확인해보니 axios 요청을 return 해주지 않았기 때문에 오류가 발생했음을 알 수 있었다.

해당 API 함수를 다음과 같이 수정해줬다.

function likePostApi(data) {
  return axios.patch(`/post/${data}/like`);
}

이번 오류를 겪으면서, 객관적으로 살펴보지 않았던 점, 이 부분에서는 실수하지 않았을 거라는 안일함과 내 자신에 자만했던 내 모습을 반성하는 시간이 되었다.

다음으로, onClick 이벤트 함수로 사용할 함수를 만들었다.

이 이벤트 함수에서는 setProfileModal을 실행해서 profileModal의 상태값의 반대의 상태값으로 바뀌도록 작성했다.

• setProfileModal(!profileModal)

브라우저에서 모달창이 잘 작동하는지 확인을 해보는데, 모달창이 나타나고 다시 프로필 수정 버튼을 클릭하면, 모달창이 사라져야 하는데 그대로 화면에 남아 있었다.

이벤트 함수가 잘못 작동하는건가 싶어서, 이벤트 함수 내부에서 console.log(profileModal)을 추가해서 해당 상태가 제대로 바뀌는지 확인해봤다.

다시 브라우저에서 콘솔창을 열고 확인해보니, 처음 버튼을 클릭하면, 모달창이 띄워지지만 profileModal의 값은 계속 false라는 것을 확인했다.

문제를 찾기 위해서 코드를 다시 살펴봤는데, 문제점을 찾을 수 있었다.

이벤트 함수의 최적화를 위해서 useCallback 훅함수를 사용했는데, dependency 값으로 빈 배열로 설정해두었다.

dependency 값이 비어있어 profileModal의 값을 캐싱해오지 못했기 때문에, 계속 false를 반환해 제대로 동작하지 않았던 것이다.

해당 dependency 값을 [profileModal]로 수정하니 제대로 작동했다.

_context11.t0.reponse is undefined라는 처음 보는 오류가 로깅되서 당황스러웠다.

어쨋든, 로그인 상태를 유지하기 위해 서버로 GET 요청을 보내는 과정에서 오류가 발생했음을 확인할 수 있어서, 서버 로그를 확인해 보았다.

서버 로그를 확인해 보니, 다음과 같은 에러 메시지를 확인할 수 있었다.

유저 관련 라우터에서 user 데이터가 undefined로 들어가고 있음을 확인했고, 바로 유저 라우터를 확인해봤다.

유저 라우터를 확인해보니, 유저 테이블을 조회하는 조건 부분에서 user.id에 접근할 수 없음을 확인했다.

passport를 통해서 로그인을 유지하게되면, 각 요청마다 deserializeUser 함수가 실행되면서 request에 유저 정보를 생성하기 때문에, req.user로 접근해야 유저의 정보를 확인할 수 있었다.

해당 조건 부분을 id: req.user.id로 수정하니, 유저 정보를 지속적으로 가지고 와서 성공적으로 로그인을 유지할 수 있었다.

에러 메시지를 살펴보니, 테이블에서 조회하는 로직에서 문제가 발생했음을 알았고 findOne 메서드의 아규먼트가 객체 형태이어야 하는데, 객체 형태가 아니라는 것을 알 수 있었다.

• 에러를 발생시킨 코드

• 정상적으로 동작하는 코드

req.body에서 username을 받아서, 이를 통해 유저 테이블을 조회하도록 로직을 설계했었는데

findOne 메서드에서의 option 객체 사용법을 망각하고, username이라는 value값을 그대로

findOne의 아규먼트로 넣어주어서 에러가 발생했던 것이다.where 옵션을 추가해 객체 형태로 넣어주니 에러가 해결되었다.

중요한건 함수의 반환값이 있을 경우 형태가 좀 다르다. 이는 다음과 같다.

func <함수명>(arg1:type, arg2:type,...) -> <return type>{statment}

함수의 반환값이 있는 경우, 반환값의 타입도 설정해주고 이 함수는 반환값이 있다는 표시로 화살표를 사용한다.

그럼, swift에서 함수의 사용 예를 살펴보겠다.

• 이름을 출력하는 함수

  func printName(firstName: String, lastName: String) {
  print("나의 이름은 \(firstName) \(lastName)")
  }
  

printName(firstName: "David", lastName: "Son") printName(firstName: "chris", lastName: "evans")

- 이름을 출력하는 함수 (external name없이 사용)
```swift
func printName(_ firstName: String, _ lastName: String) {
  print("나의 이름은 \(firstName) \(lastName)")
}

printName("David", "Son")
printName("chris", "evans")

• 이름을 반환하는 함수

  func printName(_ firstName: String, _ lastName: String) -> String {
  let fullName = "\(firstName) \(lastName)"
  return fullName
  }
  

let son = printName("David", "Son") let capt = printName("chris", "evans")

print(son) print(capt)

- 파라미터에 기본값을 설정하는 함수
  - `price`에 기본값 1500을 설정, `price`를 인자로 넣어 주지 않으면 기본값으로 함수 실행
```swift
func printTotalPriceWithDefaultValue(price: Int = 1500, count: Int) {
    print("Total Price: \(price * count)")
}

printTotalPriceWithDefaultValue(count: 20)

• overloading: 같은 함수의 이름을 갖지만 인풋과 아웃풋이 다른 경우에 사용
  • nil: 값이 없다는 의미

    func printName(firstName: String, lastName: String) {
    print("나의 이름은 \(firstName) \(lastName)")
    }
    

func printName(firstName: nil, lastName: String) { print("나의 이름은 (lastName)") }

printName(firstName: nil, lastName: "Son") printName(firstName: "chris", lastName: "evans")

- `in-out` 파라미터
  - 파라미터로 들어오는 변수를 함수 내부에서 직접 변경하고 싶은 경우 사용
```swift
var value = 3
func incrementAndPrint(_ value: inout Int) { // parameter는 상수취급되기 때문에, In-out 키워드 사용
    value += 1
    print(value)
}

incrementAndPrint(&value)

• 함수를 파라미터로 받는 경우

  func add(_ a: Int, _ b: Int) -> Int {
    return a + b
  }
  func subtract(_ a: Int, _ b: Int) -> Int {
    return a - b
  }
  func multiple(_ a: Int, _ b: Int) -> Int {
    return a * b
  }
  func divide(_ a: Int, _ b: Int) -> Int {
    return a / b
  }
  

func printResult(_ function:(Int, Int) -> Int, _ a: Int, _ b: Int) { let result = function(a,b) print(result) }

printResult(add, 4, 10) printResult(subtract, 50, 10) printResult(multiple, 3, 5) printResult(devide, 100, 25) ```

SWIFT: 조건문

먼저, Swift에서 조건문이 어떻게 사용되는지 코드 예제를 통해서 살펴보겠다.

• if-else-

var num = 10
if num < 10 {
  print("10보다 작은 수입니다.")
} else {
  print("10보다 크거나 같은 수 입니다.")
}

• switch

  var num = 10
  switch num {
  case _ where num % 2 == 0:
    print("짝수입니다.")
  default:
    print("홀수입니다.")
  }

• 3항연산자

  var num = 10
  var checkEvenNum: String = num % 2 == 0 ? "짝수입니다." : "짝수가 아닙니다."
  var checkOddNum: String = num % 2 != 0 ? "홀수입니다." : "홀수가 아닙니다."

Swift에서 주로 사용되는 조건문 3가지 예제 코드를 살펴보면, 다른 프로그래밍 언어의 조건문과 크게 다르지 않다고 느껴진다.

다만, 생소한 것이라면 where라는 키워드를 사용해서 조건문 안에서 다른 조건을 추가해 줄 수 있다는 것이다.

where 조건절은 반복문에서도 사용이 가능해, 반복문에서도 심심찮게 등장하므로 기억해야할 항목이다.

SWIFT: 반복문

다음으로, swift에서 반복문이 어떻게 사용되는지 코드 예제를 통해서 살펴보겠다.

• for

var sum = 0 
for i in 0...10 {
  sum += i
}
print(sum) // 55

var sum = 0
for i in 0..<10 {
  sum += i
}
print(sum) // 45

swift에서는 0부터 10까지 범위를 ...으로 표시하고 ..<은 0부터 10보다 작은 범위를 나타낸다.

• while

var num = 0
while num < 10 {
  print(num) 
  num += 1
}
print("num = \(num)") // 10

var num = 0
repeat {
  print(num)
  num += 1
} while num < 10
print("num = \(num)")

repeat-while- 문법은 자바스크립트의 do-while- 문법과 동일하게 동작한다.

작업 수행을 먼저하고, 조건을 검사하기 때문에, 조건 검사를 먼저하는 while문과 다르게 동작할 수 있을 여지가 있기 때문에, 이 점을 숙지하고 사용하도록 하자.

더미데이터로 게시물 추가가 잘 되는지 확인하던 도중에 다음 오류가 발생했다.

오류 메시지만 봐도 왜 오류가 발생했는지 알 수 있었다.

immer 라이브러리를 사용해 게시물 reducer 함수를 작성한 부분에서

그 중에서 게시물을 추가하는 로직의 코드에서 오타가 발견됐다.

unshift가 unshif로 작성되어 있었다.

제대로 썻다가 실수로 t만 지워진건지 모르겠지만... 역시 자나 깨나 오타 조심이다.

• 오타 수정 전

• 오타 수정 후

코드 수정 후에는 게시물 추가도 잘 되고, 오류도 사라졌다.

오류를 보면, 서버로부터 데이터를 못가져오는 것을 확인할 수 있었다.

서버 코드를 살펴보니, 로그인 API를 작성한 부분에서 비동기로 처리되는 부분에 await을 사용해주지 않아서 해당 코드가 실행이 되지 않았다.

비밀번호를 제외한 유저 정보를 가져오기 위해서, User테이블에서 findOne 메서드를 사용해서 데이터를 가지고 오도록 코드를 작성했는데, 이 부분이 비동기로 처리됐던 부분인데, await을 사용해주지 않아서 response.data 에 데이터가 빈 객체로 들어간채로 프론트로 넘어가고 있었다.

다음과 같이 await을 추가해주니, 오류가 깔끔하게 해결됐다.

async --- await ---

기본적으로, async/await 문법은 비동기처리를 동기적으로 처리하기 위해서 사용한다. 기존 Promise + then 으로 비동기 로직을 동기적으로 처리하던 방법에서 조금 더 직관적이고 체이닝으로 인한 코드의 길이가 길어지는 단점을 해결할 수 있다.

• 공통된 row 값으로 그룹을 지을 때 사용
• COUNT, MAX, MIN, SUM, AVG와 같은 집계 함수와 자주 사용
• W3S

  SELECT column_name(s)
  FROM table_name
  WHERE condition
  GROUP BY column_name(s)
  ORDER BY column_name(s);

  프로그래머스

  SELECT ANIMAL_TYPE, COUNT(ANIMAL_ID) as 'COUNT' 
  FROM ANIMAL_INS
  WHERE ANIMAL_TYPE = 'Cat' or ANIMAL_TYPE = 'Dog'
  GROUP BY ANIMAL_TYPE
  ORDER BY ANIMAL_TYPE ASC;
  

- 고양이와 개를 그룹화해서 각 동물의 수를 카운트
  - 고양이가 개보다 먼저 조회되도록

SELECT NAME, COUNT(ANIMAL_ID) as 'count' FROM ANIMAL_INS GROUP BY NAME HAVING COUNT(NAME) > 1 ORDER BY NAME ASC;

- 이름이 두 번 이상 사용된 이름과 회수 조회
  - 이름 순으로 정렬
  - HAVING: 집계 함수와 함께 WHERE 구문을 사용할 수 없기 때문에 HAVING 구문을 통해서 조건을 설정

SELECT HOUR(DATETIME) as 'HOUR', COUNT(HOUR(DATETIME)) as 'COUNT' FROM ANIMAL_OUTS WHERE HOUR(DATETIME) between 9 and 20 GROUP BY HOUR ORDER BY HOUR;

- 시간대 별로 입양 시간대와 입양 회수 조회
  - 9시 부터 19시 59분 까지
  - HOUR: HOUR 함수를 사용하면 DATETIME에서 시간대만 추출할 수 있음

SET @hour := -1;

SELECT (@hour := @hour + 1) as HOUR, (SELECT COUNT(*) FROM ANIMAL_OUTS WHERE HOUR(DATETIME) = @hour) as COUNT FROM ANIMAL_OUTS WHERE @hour < 23;

- 시간대 별로 입양 시간대와 입양 회수 조회
  - 0시 부터 23시 59분 까지
  - SET: SQL에서 변수 할당 예약어(@변수명)
  - 1행: 0부터 23까지 시간대를 조회하겠음(재할당: @hour + 1)
  - 2행: 테이블에서 시간대별로 모두 카운트한걸 COUNT라 칭하고 조회하겠음
  - 3행: ANIMAL_OUTS 테이블에서 조회하겠음
  - 4행: @hour는 23보다 작음

오류 코드를 살펴보면, user.js라는 파일에서 문제가 발생한다는 것을 확인할 수 있었다.

user.js는 유저 데이터를 서버로 넘기기 위해서 리덕스 사가를 사용해 코드를 작성했다.

해당 파일을 확인해보니, 다음과 같이 코드가 작성된 것을 발견했다.

사가의 call의 아규먼트로 API를 호출하는 함수를 action.data를 아규먼트로 전해주면서 함수를 바로 실행하도록 코드를 짰기 때문에 오류가 발생한 것으로 추측됐다. (이 부분은 조금 더 학습이 필요해보임_)

구글링 해보니, call 이펙트 함수는 실행 함수와 실행 함수의 아규먼트를 call의 아규먼트로 각각 넣어 줘야 했다.

코드를 다음과 같이 수정해주니, 타입 에러 오류가 깔끔하게 해결되었다.

TypeError: OAuth2Strategy requires a verify callback

• 오류가 발생한 코드

  passport.use(
  new FacebookStrategy({
    // appId와 secretId 발급
    clientID: process.env.FACEBOOK_APPID,
    clientSecret: process.env.FACEBOOK_SECRETCODE,
    callbackURL: `${process.env.SITE_DOMAIN}/auth/facebook/callback`,
    profileFields: ["id", "displayName", "photos", "email"],
  }),
  async (accessToken, refreshToken, profile, done) => {
    console.log(accessToken, refreshToken);
    console.log(profile);
  }
  );
  

router.get("/facebook", passport.authenticate("facebook", { scope: "email" }));

router.get( "/facebook/callback", passport.authenticate("facebook", { successRedirect: "/auth/facebook/success", failureRedirect: "/auth/facebook/fail", }) );

router.get("/facebook/success", (req, res) => { res.send(req.user); });

router.get("/facebook/fail", (req, res) => { res.send("facebook login fail"); });

```

페이스북 로그인 전략이 성공할 경우에 request 유저 정보를 json으로 출력되도록했고

실패하면 facebook login fail 이라는 메시지를 반환하도록 했다.

오류 메시지 상으로는 콜백 URL 문제가 있는거 같아서 여러 가지 시도를 해봤지만

해결이 안되서 해당 오류를 구글링했다.

검색을 통해서 다음 스택오버플로우 질문을 확인할 수 있었다.

해당 페이지에 접속해 답변 내용을 확인해 보았다.

다음과 같이 해당 질문자가 FacebookStrategy의 아규먼트로 객체와 콜백함수를 줘야 하는데,

처음과 같이 객체만 아규먼트로 주고, 콜백함수를 passport.use의 아규먼트로 주었다고 답변을 해줬다.

확인해보니 내가 작성한 코드에서도 같은 실수를 발견할 수 있었다.

긴 삽질의 시간을 갖게될 뻔했는데, 역시 스택오버플로우는 the love이다.

• 먼저 app과 server로 파일을 나누어서
  • app.js 파일은 온전히 application 객체를 만드는데 집중하고
  • server.js 파일은 서버의 실행만 담당하도록 코드를 작성한다.

// app.js
const express = require("express");
const logger = require("morgan");
const cookieParser = require("cookie-parser");

const db = require("./models");

class App {
  constructor() {
    this.app = express();
    this.dbConnection();
    this.setMiddleWare();
    this.getRouting();
  }

  dbConnection() {
    db.sequelize
      .authenticate()
      .then(() => {
        console.log("서버와 연결 성공");
        return db.sequelize.sync();
      })
      .then(() => {
        console.log("Sync 완료");
      })
      .catch((err) => {
        console.error("DB와 연결할 수 없음:", err);
      });
  }

  setMiddleWare() {
    this.app.use(logger("dev"));
    this.app.use(express.json()); 
    this.app.use(express.urlencoded({ extended : true})); 
    this.app.use(cookieParser());
  }

  getRouting() {
    this.app.use(require("./controllers"));
  }
}

module.exports = new App().app;

App.js에서 사용할 모듈들을 require하고

class를 사용해 application 객체를 생성할 준비를 한다.

construct 생성자 함수에 서버 실행 시 사용할 메서드와 application을 초기화한다.

• dbConnection: 서버와 데이터베이스의 연결을 담당하는 메서드
• setMiddleware: application에서 사용할 미들웨어들을 정의하는 메서드
  • 앞으로 사용할 미들웨어 모듈은 이 메서드에서 등록해줘야 함
• getRouting: 분기 처리된 라우팅 미들웨어를 가져오는 메서드

마지막으로 클래스로 정의한 객체를 모듈화 해준다.

함수는 호이스팅이 발생하기 때문에 함수를 호출하는 코드가 함수 선언 코드보다 먼저 나와도 괜찮지만, 클래스로 객체를 생성할 때는 호이스팅이 발생하지 않기 때문에 항상 클래스 선언이 먼저 되어야 한다.

// server.js
const app = require("./app.js");
const port = 3000;

app.listen(port, function () {
  console.log("Express listening on port", port);
});

server.js 파일은 위 코드와 같이 application 서버를 실행하는데만 집중한다.

• 테이블의 해당 컬럼의 최소값을 구할 때 사용

• W3Schools

  SELECT MIN(column_name)
  FROM table_name
  WHERE condition;

• 프로그래머스

  • 출력값: 보호동물 테이블에서 보호소에 가장 최근에 들어온 시간을 조회

    SELECT MAX(DATETIME) FROM ANIMAL_INS

MAX

• 테이블의 해당 컬럼의 최대값을 구할 때 사용

• W3Schools

  SELECT MAX(column_name)
  FROM table_name
  WHERE condition;

• 프로그래머스

  • 출력값: 보호 동물 테이블에서 보호소에 가장 먼저 들어온 시간을 조회

    SELECT MIN(DATETIME) FROM ANIMAL_INS

COUNT

• 테이블의 해당 칼럼의 갯수를 구할 때 사용

• W3Schools

  SELECT COUNT(column_name)
  FROM table_name
  WHERE condition;

• 프로그래머스

  • 보호 동물 테이블에서 보호 중인 동물의 수를 조회

    SELECT COUNT(ANIMAL_TYPE) FROM ANIMAL_INS

DISTINCT

• 테이블의 중복되는 칼럼을 제거할 때 사용

SELECT DISTINCT(column_name)
FROM table_name

• 프로그래머스
  • 보호 동물 테이블에서 이름이 없거나 중복되는 이름을 1개로 통합한 동물 이름의 개수 조회

    SELECT COUNT(DISTINCT(NAME)) FROM ANIMAL_INS
    WHERE NAME IS NOT NULL