V1-V1: React 및 Airtable API를 사용하여 포트폴리오 웹 사이트 만들기

2019년 7월에 저는 출장 갈 때 개인 사이트를 만들었습니다.그것은 며칠 안에 간단한 HTML과 CSS, 그리고 상당히 괜찮은 시각 디자인을 조합한 것이다.현재 저는 취업 시장에 진출하여 마침내 전문적인 발전을 모색하기 시작했습니다. 저는 더 많은 활력으로 제 투자조합 사이트를 다시 만들고 싶습니다.
나는 이것에 대해 몇 가지 요구가 있다.

MVP부터 시작하여 이를 바탕으로 발전할 것

사이트나 블로그 작성자가 아닌 코드로 작성해야 한다

가능한 한 적은 코드로 새 프로젝트를 추가할 수 있도록 모듈화되어야 한다

사이트 자체에 내 항목의 간단한 목록을 포함해야 한다

가장 가치 있는 선수

나의 수요집이 생겨서 나는 MVP 제품을 만들기 시작했다.이 사이트는 나의 프로젝트 리스트가 될 것이기 때문에 MVP도 내가 인터넷에 공개한 프로젝트의 간단한 리스트이다.에어테이블로 이거 할게요.Check out the MVP here .

Airtable의 가장 큰 장점은 기초 중의 모든 작업표와 보기를 위해 어떻게 독특한 API 문서를 자동으로 생성하는가이다.이것은 이 사이트가 모듈화 개념에 들어가는 완벽한 발판이다. 나는 어떤 코드도 필요로 하지 않고 새로운 투자조합 항목을 추가할 필요가 없다.

React web app

React에서 인코딩하는 것을 좋아합니다.나는 구성 요소의 모듈화 본질이 직관적이라는 것을 발견했다.나는 이전에 React for Smashesque.com 를 사용해서 매우 즐겁게 놀았기 때문에 다시 그것을 사용했다.Bootstrap은 제가 선택한 예쁜 사이트를 통합하는 프레임워크이기 때문에 저도 그것을 사용했습니다.

Airtable 의 모듈식 목록 사용

Using Context API in React (Hooks and Classes)에 실린 글의 도움으로 저는 Axios와 Airtable API를 사용하여 MVP Airtable에서 제가 선택한 보기와 그 중의 모든 줄, 필드와 내용을 얻었습니다.나의 실현은 좀 혼란스럽지만, 그것은 성공했기 때문에 문제없다.
나는 Entry Context부터 시작한다.API 호출을 실행하고 스프레드시트 객체의 컨텍스트 상태를 포함하는 js를 작성합니다.

    import React, { Component } from 'react'
    import axios from 'axios'
    export const EntryContext = React.createContext()
    class EntryContextProvider extends Component {
        state = {
            entries: []
        }
        componentDidMount() {
            const fetchData = () => {
                axios
                    .get('https://api.airtable.com/v0/appeDXIgWSt9xRB6n/
                    Portfolio%20Entries?api_key=[MY_API_KEY]')
                    .then(({ data }) => {
                        this.setState({
                            entries: data.records
                        })
                    })
                    .catch(console.log)
            }
            fetchData();
        }
        render() {
            return (
                <EntryContext.Provider value={{ ...this.state }}>
                    {this.props.children}
                </EntryContext.Provider>
            )
        }
    }
    export default EntryContextProvider

다음으로 EntryList라는 구성 요소를 만들었습니다.js는 간단한 HTML 요소에 EntryContextProvider 구성 요소의 상태 데이터를 매핑합니다.

import React from 'react'

const ListEntry = props => {
    const EnEntry = props.entryData.map((entry, key) => {


        return (
            <div>
                <h3>{entry.fields.title}</h3>
                <p>{entry.fields.notes}</p>
                <p><a href={entry.fields.link}>Link</a></p>
            </div>
        )

    })
    return <div>{EnEntry}</div>
}

export default ListEntry

마지막으로 Entries.js라는 페이지를 만들었습니다. 이 페이지는 EntryContextProvider와 ListEntry 구성 요소를 연결하고 간단한 React 방식으로 페이지에 표시합니다.이 경우 사이트 홈페이지에 투자조합 항목 목록으로 표시됩니다.

import React, { Component } from 'react'
import { EntryContext } from '../contexts/EntryContext'
import ListEntry from '../components/EntryList'

class Entries extends Component {

    render() {
        return (
            <EntryContext.Consumer>{(context) => {
                const { entries } = context
                return (
                            <ListEntry entryData={entries} />
                )

            }}
            </EntryContext.Consumer>
        )
    }
}

export default Entries

응용 프로그램 내.js에서 저는 사이트를 Entry Context Provider 구성 요소에 포장합니다. 이 구성 요소는 모든 페이지가 Airtable 상하문에 접근할 수 있도록 합니다.

          <EntryContextProvider>
            <Switch>
              <Route exact path="/" component={Entries} />
            </Switch>
          </EntryContextProvider>

마지막으로, 나는 내가 원하는 결과를 얻었다!내 Airtable 스프레드시트의 모든 포트폴리오 항목에 대한 간단한 목록:

심미적 도전

많은 개발자들이 성과와 프로젝트 목록을 포함하는 가장 적은 사이트를 즐겨 사용한다.흰색과 이모티콘이 모두 유행한다.나는 약간 반항적인 90년대 아이가 되는 것을 좋아한다. 그래서 나는 새로운 모델SEGA MegaDrive Mini website에서 영감을 얻고 그 외관과 일치하려고 한다.불행하게도 역사, 이미지, 주제가 많은 복고 컨트롤러가 90년대 우주선을 함께 보는 데 도움이 된다.만약 이런 것들이 없다면, 결과는 그렇게 고무적이지 않을 것이다.나는 내 투자조합의 어두운 주제가 좀 끌리지 않고 내가 원하는 만큼 우호적이지 않다는 것을 깨달았기 때문에 나는 결국 밝은 주제를 선택했다.나는 문자의 외관을 보존하고 싶어서 스크롤된 배경 격자를 보존하고 메인 용기에 종이 한 장의 외관을 보존했다.이 점에서 나는 모든 항목에 이미지와 이모티콘을 추가하여 모든 항목이 어떤 유형인지 확인하고 스프레드시트에 포함되며 Airtable API로 호출하기로 결정했다.나는 이모티콘이 작품집을 보는 누구에게나 직관적이길 바라지만 이 방면의 결론은 여전히 정설이 없다.일단 모든 것이 정형화되면 나는 결과에 매우 만족한다.

마지막 윤색

내 사이트는 자수성가했기 때문에 나는 그것이 내 작품집의 일부분이라고 생각한다.그러나, 나는 그것이 목록에 추가되고 자신을 가리키는 링크가 있기를 원하지 않는다.그래서 나는 하나를 추가했다❔ 왼쪽 상단의 아이콘이 팝업 창을 터치하여 사이트에 대한 더 많은 정보를 제공합니다.본문도 여기에 추가됩니다.

마지막으로 사이트를 파괴하는 버그가 하나 더 있습니다.스프레드시트의 빈 필드로 인해 전체 Airtable 컨텍스트가 실패하고 웹 페이지가 비어 있습니다.나는 이 문제를 해결하기 위해 매우 기본적인 검증을 추가했지만, 나는 너무 많이 고려하지 않았다. 왜냐하면, 만약에airtable를 관리한다면, 그것은 영원히 빈 필드가 있어서는 안 되기 때문이다.필드에 문제가 있는 경우 올바른 항목을 로드하고 간단한 인라인 오류를 표시해야 합니다.

이것이 바로 나의 V1 서류 가방 사이트다!새 항목을 추가하려면 코드를 완전히 피하기 위해 작업표에 줄을 추가하기만 하면 됩니다.프로젝트 시작부터 제 요구를 살펴보겠습니다.

MVP부터 시작하고 이를 바탕으로✔

사이트나 블로그 작성자가 아니라 코드로 만들어야 한다✔

가능한 한 적은 코드로 새 프로젝트를 추가할 수 있도록 모듈화되어야 한다✔

사이트 자체에 내 항목의 간단한 목록을 포함해야 한다✔

보시다시피 나는 나의 모든 네 가지 요구를 만족시켰다.이것은 위대한 여정이자 재미있는 프로젝트이다.나는 Airtable API, 검증의 중요성과 많은 디자인 괴벽을 배웠다.나는 최종 결과에 대해 매우 만족한다.

다음은 뭐예요?

나는 이 사이트를 좋아한다. 왜냐하면 그것은 가장 간단한 현재를 유지할 가능성이 높기 때문이다.나는 더 많은 전자 표를 사용하여 사이트에 목록을 기반으로 하는 다른 부분인 글, 추천서,cat 사진을 추가할 수 있다...내가 무엇을 추가하든지 간에 나는 아주 적은 코드로 클론 Entries, EntryContextProvider, ListEntry 구성 요소를 완성하고 Airtable API 링크를 바꾸며 내가 원하는 스타일 변경을 할 수 있다.
예를 들어 Airtable는 전체 블로그 게시물에 있어서 결코 이상적이지 않지만, 나는 그것이 할 수 있을지 정말 궁금하다.전체 사이트에 Airtable 백엔드가 있다고 상상해 보시겠어요?이것은 가능하다. 아마도 나는 장래에 이 생각을 섭렵할 것이다.지금, 나는 이 V1 프로젝트의 완성을 상징해서 매우 기쁘다!

보너스

방금 Airtable에 "order"라는 새 필드와 코드 블록을 추가했습니다.이 새 세션이 생겼습니다. Airtable에order 값을 추가하여 목록 항목의 표시 순서를 조정할 수 있습니다!

const { entries } = context
                let sortedEntries = entries.sort(
                    function(a,b){return a.fields.order - b.fields.order})

Check out the live site here
Check out the Airtable backend (MVP) here
Check out my Github here
나 지금 취직 중이야!채팅하고 싶으면 이메일로 보내주세요[email protected]