<div id="readability-page-1" class="page"><div data-language="go"><pre><code>func postContents(c echo.Context) (err error) {
 b := new(model.Book)

 if err = c.Bind(b); err != nil {
 return
 }
//... 생략</code></pre></div><div data-language="typescript"><pre><code>// 커스텀 훅. 첫번째 인자는 키값이고 react-query 캐싱을 이용할때 쓰는 것 같다.
export function useSearchBook() {
 return useMutation("searchBook", async (title: string) =&gt; {
 return searchBookByName(title);
 });
}

// App.tsx
//..
const searchMutation = useSearchBook();

//..

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

//..

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

//..

searchMutation.data

//</code></pre></div></div>

flowkater's data;

flowkater

들어가며
이번 주는 집중을 했던 한주 
개발
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 도 있었는데 시간이 좀 지났고 아웃풋에 급하다보니 좀 제대로 정리를 못했다.  꾸준히 쓰려면 평소에 작성을 하고 좀 포맷을 정해야겠다.

tWIL - 20년 12월 3째주

댓글