tWIL - 20년 12월 3째주

들어가며

• 이번 주는 집중을 했던 한주

개발

Dame24

• 지난주 생성했던 것을 1차 매듭을 지어보았다. 서비스 요구사항은 스터디 계획을 만들때 자동으로 책의 목차와 쪽수를 가져와서 나눠줘야하는데 내부 테스트용 웹 클라이언트를 하나 만들어보기로 했다.
• 지금 공개되어있는 Open API 중 유일하게 쓸만한게 Naver 책 검색 API라서 지난 주에 Go 서버를 간단히 만진 것과 1차 프로토타입을 만들어보았다.
• 사용한 것

  • Back

    • Golang
      • Go 코딩은 즐겁다.
      • 사실 이번에 작업할때는 문자열 처리 함수를 좀 활용한 것 말고는 Go 자체 코딩은 별로 없다.
      • 대부분 서버며 라우팅이며 스크래핑이며 라이브러리가 해준다.

  • Echo

    • 나는 처음부터 Echo 를 사용했는데, 최근에 예제를 보면서 net/http, gorilla/mux 로 하나하나 붙여가며 작업해본 적이 있어 Echo가 참 좋다.
    • 다만, 공식 가이드 문서가 조금 마음에 안든다.

func postContents(c echo.Context) (err error) {
	b := new(model.Book)
	if err = c.Bind(b); err != nil {
		return
	}

//... 생략

• 재밌는 건 위 handler 코드인데 post로 전송한 Body를 struct 만 잘 정의해주면 c.Bind(b) 에서 바로 매핑을 시켜준다.
• 물론, 파싱해온 결과를 리턴할때는 아래와 같이 디코딩해주었다.

//...

json.NewDecoder(res.Body).Decode(&sr)

//...

• gocolly (goquery 포함)
  • 이 전에도 말했듯 단순 스크래핑에 쓰기엔 좀 과하다고 볼 수도 있다. 다만, 크롤러도 만들어야하기에 사용에 익숙해지면 좋을듯하다.
  • Async(true) 옵션 하나 만으로 병렬처리가 가능한 마법을 느낄 수 있다.
• Front
  • create-react-app + Typescript
    • 기본. 뭐 말이 필요한가..
    • App.tsx 에 다 때려박고 api나 interface 정도만 분리하고 BookCard 컴포넌트가 길어서 분리했다.
  • react-query
    • 이번에 삽질한 의외의 복병…
    • apollo 를 워낙 잘 쓰고 있어서 api end point 가 두개밖에 안되는데 그냥 써보고 싶어서 적용해보았다.
    • typescript 쓰면서 항상 Type 할당이나 반환값에 대해 이해를 잘못해서 해메는 경우가 많았다. 특히 react-query 는 대부분 useQuery 에 대한 기초 예제는 많은데 필요할때 요청하는 useMutation에 대한 예제가 많이 안보였다. 물론 공식문서보고 해결했으나 Typescript는 하면서 조금 삽질을 한 것 같다.
    • 간단히 적자면, axios instance 함수 리턴 data에 타입을 정의해주고 useMutation으로 해당 instance 리턴 함수를 실행하는 커스텀 훅을 만들어주었다. 메인에서 정의하면, mutate() 함수로 요청을 보낼 수 있고 해당 객체의 data에 저장이 되는 형태이다.

// 커스텀 훅. 첫번째 인자는 키값이고 react-query 캐싱을 이용할때 쓰는 것 같다.

export function useSearchBook() {
	return useMutation("searchBook", async (title: string) => {
		return searchBookByName(title);
	});
}

  

// App.tsx

//..

const searchMutation = useSearchBook();
//..

  

const onSubmit = async ({ title }: FormData) => {
	searchInputRef.current?.focus();
	await searchMutation.mutate(title);
};
//..

  

searchMutation.isLoading // 로딩 상태 true/false

//..

  

searchMutation.data

//

• SWR 에 비해 코드를 잘 못찾겠더라.

  • tailwindcss + tailwindui
    • 나의 CSS에 평안을 찾아준 갓윈드css.. UI 라이브러리도 올해 초에 얼리로 구매해놓고 잘 갖다 쓴다.
    • 이번에 v2.0 이 나왔는데 조금 바뀐게 있어서 스타일링에 삽질을 조금했다.

• Deploy

  • 내부 테스트용이다 보니 제일 빠르게 할 수 있는 방법으로 배포를 했다.
  • go 서버는 간만에 Heroku 를 사용해보았고 react는 언제나 그랬듯이 netlify
  • asset 문제인지 초기 로딩이 좀 늦다. 뭐 어차피 프로덕션용은 아니니.

• 결과물

프로젝트

• 스택
  • Go + Echo + gqlgen
  • React + Typescript + apollo
• 주중/주말 내내 매달렸는데 그래도 그럴듯한 아웃풋이 나왔다.
• 관련 스택에 대해서는 천천히 후기를 써볼까 한다. 일단 프로덕션 릴리즈부터..

회고

• 좋았던 점

  • 한 주를 일에 온전히 집중할 수 있었다.

• 아쉬운 점

  • 코로나가 심해짐에 따라 운동도 못하고 업무 때문에 독서나 다른 걸 챙기지 못하고 있다.
  • 원래 달리기를 하려고 했는데 러닝 시작한 이틀째 되는날 무릎통증이 심해서 보니 거위발건염이라는 것이 나에게 왔더라. 달리지 못해 아쉽다.

• 개선할 점

  • 루틴을 다시 짜보고 급하지 않지만 꾸준히 해야할 일들을 챙기자.

여담

• 사실 되게 많은 Input 그리고 그에 따른 Output 도 있었는데 시간이 좀 지났고 아웃풋에 급하다보니 좀 제대로 정리를 못했다. 꾸준히 쓰려면 평소에 작성을 하고 좀 포맷을 정해야겠다.