이번 프로젝트는 아래 해커톤 광고가 있길래 시작하기로 하였다.
일단 참가비는 안내고 있다. 나중에 신청해도 될 것 같아서... 왠만하면 신청 할 생각이다.
https://hackathon.nomadcoders.co/
Nomad Coders Hackathon
소정의 참가비를 내고, 참가신청서를 작성하면 됩니다. 이 후 참가자들이 참여할 수 있는 슬랙채널, 중간점검 모임(2월 22일) 및 데모데이(4월 4일) 세부 내용들을 이메일로 안내드립니다. 참가신청서 작성참가비 납부참가 확정 후 개별/팀별 안내 이메일 발송슬랙. 오프라인 모임. 데모데이 참여
hackathon.nomadcoders.co
클론 코딩할 사이트는 아래이다.
Goodreads
Discover and share books you love on Goodreads, the world's largest site for readers and book recommendations!
www.goodreads.com
미국의 책버전 왓챠라고 생각하면 된다. 도서추천하는 홈페이지고 얼마전에 아마존에 매각되었다.
오후 12시 경
먼저 프론트는 TypeScript + Next로 진행하기로 하였다. 나한테는 엄청 큰 모험이기도 하다. 모바일 퍼스트로 만들것이다.
일단 시작은 create react-app을 타입스크립트 버전으로 설치한다.
yarn create next-app --example with-typescript korean-goodreads
ㅎ NextPage라는 타입이 있는데, 이건 Next.js에서 만든 타입이다. (https://github.com/zeit/next.js/blob/56c1392bd65f1c0e897e8c50afdaebb307d955a7/packages/next/types/index.d.ts)
여기에서
NextPage<P = {}, IP = P> = NextComponentType<NextPageContext, IP, P>
이렇게 되어있는 타입스크립트 문법을 모르는데 찾을 예정
제네릭 문법이다. 근데 범위가 광범위 해서 패스.
오후 1시 13분 경
pages에서 _app.tsx을 기준으로 다시 프로젝트를 잡고 있는데 메인 함수에서 인자로 받아오는 부분에서 자꾸 오류가 났다.
ts 2339 오류였는데 아래 링크를 보고 해결했다.
How to fix Binding element 'children' implicitly has an 'any' type.ts(7031)?
I'm missing something here with the validation how to add types validation? Having error "element 'children' implicitly has an 'any' type". import * as React from 'react'; import Button from './St...
stackoverflow.com
interface를 설정해주고 그 안에 Component가 받아오는 타입을 설정해주었다. 나는 NextPage 타입으로 설정해줌.
오후 1시 18분 경
이제 헤더와 푸터를 LayOut에 구현해 볼 것이다.
일단 난 SCSS를 사용할 것이기 때문에 설치를 한다. 미리 찾아보니 다 내용이 있다.
https://this-programmer.com/entry/nextjs%EC%97%90%EC%84%9C-sass%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
next.js에서 sass사용하기
next.js에서 sass사용하기 react에서 썼던 것처럼 당연히 될 줄 알았는데 이게 웬걸 오류가 뜬다. 해서 찾아보니 방법이 다 있더라. $ npm install --save @zeit/next-sass node-sass //npm $ yarn add @zeit/next..
this-programmer.com
위 내용대로 하니 적용이 손쉽게 되었다.
이제 헤더와 푸터를 디자인 해보자.
오후 1시 46분
goodreads 홈페이지의 모바일 버전을 확인해보았다. 크게 튀지 않는 단순한 헤더와 푸터인 듯 하다. 푸터는 일단 내가 따로 적용할 정보가 없으니 놔두기로 하고 헤더를 구현하기로 한다.
react-icons가 필요할 것 같아서 설치를 했다.
이름을 goodreads 대신 뭘로 할까 고민이네. 일단 나중에 생각하고 톤앤매너는 어떻게 가져가지..
오후 2시 21분
헤더 만드는 중. 왼쪽과 오른쪽 요소의 넓이를 다르게 해도 항상 가운데 유지할 수 있는 방법은 없나.
오후 2시 51분
중간에 10분 정도 쉬고 왔다. SCSS의 전역 변수 기능을 사용해서 대표 컬러를 지정해 놓을 생각이다.
오후 3시 18분
푸터 만드는 중. 딱히 넣을 게 없어서 깃헙 주소랑 이메일 연동되게 만드는 중
메일 보내는 거는
<Link href="mailto:awer000@naver.com">
mailto 프로토콜을 이용한다.
& + & { margin } 이게 왜 안먹히지
오후 3시 28분
헤더 아래에 올렸다 내렸다 할때 사라지는 메뉴 개발 시작
메뉴 이름 옆에 svg 컴포넌트 붙으면 글씨가 살짝 내려가는데 이건 어떻게 처리를 해야할까
오후 4시 20분
Headroom.js 컴포넌트 이용해서 헤더가 스크롤에 따라 사라졌다 나타났다 하는 기능 구현.
문서 자세히 안읽어봐서 겁나삽질함. 영어라도 이악물고 읽자.
https://kyleamathews.github.io/react-headroom/
React Headroom
Code on Github React Headroom is a React Component to hide/show your header on scroll. The header on this site is a living example. When you scroll down, it slides out of view and slides back in when scrolling up. Fixed headers are nice for persistent navi
kyleamathews.github.io
오후 4시 36분.
이제 헤더와 푸터가 모양이 갖춰졌으니 본문 내용을 만들어보고자 한다.
크게 로그인 / 로그아웃 때의 화면이 다른데, 일단 로그아웃시 그냥 메인페이지를 만들어 보고자 한다.
이번달 신간 등 서점 사이트 들어가서 어떤게 있나 확인해보고 메인 화면을 구성할 예정이다.
알라딘 api
http://blog.aladin.co.kr/openapi/category/29154402?communitytype=MyPaper
[OpenAPI님의 서재] "책과 통하는 블로그, 알라딘 서재!"
요청 방법 요청 URL : http://www.aladin.co.kr/ttb/api/ItemLookUp.aspx 요청 URL샘플 : http://www.aladin.co.kr/ttb/api/ItemLookUp.aspx?ttbkey=TTBKey&itemIdType=ISBN13&ItemId=도서의ISBN&output=xml "상품 조회 응답(Reponse) 결과값"의 스펙은 "검색 응답(Reponse) 결과값"과 동일한 결과에 단순히 부가정보가 추가되어지는
blog.aladin.co.kr
카카오 도서 api
https://developers.kakao.com/docs/restapi/search#%EC%B1%85-%EA%B2%80%EC%83%89
Kakao Developers_
더 나은 세상을 꿈꾸고 그것을 현실로 만드는 이를 위하여 카카오에서 앱 개발 플랫폼 서비스를 시작합니다.
developers.kakao.com
일단 오늘은 여기까지 하고 내일은 mock 데이터와 swiper를 통해 메인 화면을 만들어야겠다.
'개발일지' 카테고리의 다른 글
| [한국의 Goodreads 개발하기] Day 6. 프론트엔드 배포해보기 (0) | 2020.02.06 |
|---|---|
| [한국의 Goodreads 개발하기] Day 5. 책 정보 페이지 개발 (0) | 2020.02.05 |
| [한국의 Goodreads 개발하기] Day 4. 프리티어 적용 (0) | 2020.02.04 |
| [한국의 Goodreads 개발하기] Day 3. redux-saga 와 react 연동 (0) | 2020.02.03 |
| [한국의 Goodreads 개발하기] Day 2. 메인 화면 개발 (0) | 2020.02.02 |
