Project Farmers 요약, 정리 [2019.11]

프로젝트 소개(Notion) 페이지

(발표 ppt, 영상, 서비스 발표)
Github

Farmers / Botanists

◈ 프로젝트 소개 
    초보, 취미활동자가 원하는 조건(기후, 지역)에 따른 작물 추천 앱

    프로젝트명 : Farmers
    포지션 : Front-end
    사용 스택 : React, JavaScript

    담당 파트 : 화면 기획 및 React기반 컴포넌트 구조설계(회원가입, 로그인 전/후 페이지),

                   React-router를 활용한 페이지 구성 및 전환 , AntDesign 활용 컴포넌트 스타일링,

                   작물 검색 기능

 

◈ 처음으로 팀장 역할을 맡은 프로젝트였고, 스스로 느끼기에 보완해야 할 점이 정말 많았다.
    이번 경험을 통하여 팀장의 역할이 어떤 것을 해야 하는 자리인지 배울 수 있었다.

    ⊙ PM(Product Manager)처럼 프로젝트가 나아갈 방향에 대해 설정하고, 프로젝트의 핵심기능
       구현을 목표로 우선순위를 부여하며, 프로젝트의 방향성, 컨셉, 확장에 대해 보다 넓은 시각에서
       지속적으로 고려하고, 팀원들에게 제시하여 논의를 해야 한다.
       다른 팀원들이 보다 코딩 자체에 집중할 수 있도록, 외부와 소통하고 정보를 바로 공지해야 한다.

    ⊙ 원활한 의사소통이 되도록 이끌어야 한다. 미팅 시 팀원 간 의견 교류가 활발할 수 있도록
        분위기를 조성해야 한다.
        또한 논의가 팽팽하여 길어질 경우 적절히 끊어주고, 의견을 모을 방안을
        마련하여 프로젝트의 흐름을 조절해야 한다.

 

    ⊙ 팀 내부 회의, 및 외부 발표자료 등을 ppt 등의 문서로 시각화하여 타인에게 전달할 수 있는
        자료를 미리 준비하고 있어야 한다. 
        시각화된 자료는 회의나 발표 등에 있어 정보를 직관적이고 효율적으로 전달할 수 있는 
        훌륭한 도구이다.
        

    ⊙ 팀원 모두가 해당 프로젝트(서비스)의 전체적인 흐름에 대해 파악하고 있는지 확인하여야 한다.
        의사소통의 문제이기도 한데, 특히나 Remote로 진행된 프로젝트였기 때문에 팀원 개개인이
        전체적인 흐름 파악이 되지 않을 경우 누구도 원하지 않는 기능을 열심히 만드는 불상사가
        생길 수 있다.

 

◎ 화면(UI) 구성과 컴포넌트 구성

    제작할 서비스에 대한 화면 구성을 시각화 도구(Miro)를 사용하여 전체적인 스케치를 진행하였고

    로그인 전/후로 보이는 페이지가 달랐기 때문에 전/후 페이지를 각각 제작하였다.

    페이지 랜더링은 state를 설정해두어 로그인 전/후 Fetch 요청에 따라 state값을 true/false로
    변경해 주어 state별로 다른 페이지가 랜더링 되도록 구성하였다.

    후에 검색 후 화면 랜더링에도 적용하였는데, 이 state값을 변경해 주기 위해 state와 이를 변경해줄
    함수 두 가지를 props로 하위 컴포넌트로 내려주어 해당 부분을 진행하였다.

 

◎ 라우터를 이용한 화면 전환
    라우팅이란 주소(path)에 따라 다른 view를 보여주는 것을 말한다.

    React-router를 활용하여 메인화면, 로그인 화면, 회원가입 화면을 랜더링해 주었다.

    각각 가상의 경로 "/", "/signUp", "/signIn"을 부여하여 화면 전환을 구현하였다.

     

◎ React의 State 활용에 관한 고찰

    처음엔 State 활용을 문자 그대로 '상태'로 받아들이고 true/false 와 같이 흑백 구분의 용도로 밖에
    생각하지 못했었다. 

    그러나 화면 전환에 따른 Fetch 요청과 그 응답으로 받아올 정보들을 랜더링 해 줄 필요가 있었고

    이에 따라 State의 활용에 대해 다시 생각해 볼 수 있었다.

    State에 단순 Boolean값이 아닌 배열, 객체 등의 데이터를 담아주어 하위 컴포넌트에 Props로
    내려주고 이를 활용하여 페이지 전환 후 Props로 내려준 정보를 랜더링 해줄 수 있었다.

    또한 하위 컴포넌트로 내려준 state는 setState 함수로 변경할 수 없었고, 상위 컴포넌트에서 
    setState를 실행하는 함수를 만들어 이 함수를 하위 컴포넌트로 내려주고 state를 변경할 수 있었다.

 

◎ React의 LifeCycle 과 render 함수의 동작시기

    페이지의 랜더링(render함수의 작동시기)은 언제 되는지, 상태 업데이트시 생명주기의

    어떤 함수가 실행되는지에 대한 파악을 해야한다.   

    로그인 후 사용자의 정보를 통한 메인화면 랜더링 과정에서는 로그인 후 화면 랜더링이 끝난 직후
    Fetch 요청을 통해 사용자의 정보를 받아올 수 있도록 componentDidMount 함수 내부에서
    Fetch 요청을 실행하였다.

    어떠한 스택을 사용하던지 해당 스택의 생명주기에 대해서 제대로 파악하는 것이 중요하다.

 

◎ 로그인 등 인증관련, 쿠키(Cookie)를 사용하기 위한 Fetch 요청 옵션에 대하여

    서버에서 토큰을 생성하고, 쿠키에 담아 클라이언트로 응답을 주고 있었다.

    그러나 클라이언트단 Fetch 요청에서는 쿠키를 주고받을 수 없었다.

    쿠키 사용을 위해서는 자격증명(credentials) 옵션을 설정해 주어야하는 문제였다.

    

◎ 엔트 디자인 (CSS Library 의 적용)

    antDesign은 UI Design Language로 리액트와 타입스크립트 기반으로 제작된 UI라이브러리이다.

    각 기능별로 디자인 구성이 되어있는 틀을 가져와 적용하여, 말끔한 CSS 디자인과 더불어

    화면의 빠른 구축이 가능하도록 해주는 것이었다.

    그러나 적용하는 과정이 마냥 순탄하진 않았고, 장점만 있는것도 아니라는 것을 배울 수 있었다.

    첫째로, antDesign에서 제공하는 컴포넌트, 디자인 등의 사용은 antDesignn만의

    규칙을 따라야 했다.
    규칙을 따로 찾아보아야 했기 때문에 시간이 걸리고 번거로웠었다.

    둘째로, 외부 Library 등을 가져와 적용하는 것은 당장에 편할수는 있어도, 제대로 활용하지 못한다면

    사상누각 코드의 원인이 될 수 있다. 기존 틀에서 원하는대로 수정을 하기 힘들뿐더러, 코드를

    확장하고 응용해 나가는 부분에서 문제가 될 수 있다.