[WIL] 2023.08.4주차 | 프론트와 백을 넘나드는 개발자

1. 이번주 한 일

• 08.21
  • [귀농귀농] 메인 화면 템플릿 구성 완료
  • [오늘뭐하니] API 제작 진행
• 08.23
  • [오늘뭐하니] API 설계
• 08.24
  • [오늘뭐하니] API 설계
    • 지역, 카케고리로 해당 콘텐츠 전체를 보여주는 API
    • 특정 컨텐츠의 해시태그를 통해 파티룸을 보여주는 API
    • 특정 컨텐츠의 해시태그를 보여주는 API
• 08.25
  • [귀농귀농] Home page 화면 구성하기
    • 외부 입력 받기 구현
• 08.27
  • [사회리더멘토링] 인형 만들기 완료
  • [귀농귀농] 기획 회의 전달받기
  • [귀농귀농] 프론트 회의
  • [귀농귀농] Home page 화면 구성하기
    • 이미지가 카드 사이즈 넘어가지 않도록 설정하기
    • 더보러가기 위치 조정하기
  • 개강 준비하기 😎

 
 

2. 이번주 학습 내용

(1) Remote SSH 활용방안

지속적으로 Remote 연결이 실패하자, API 개발의 속도가 느려졌다. 이번 프로젝트에서 계속 나타날 문제라는 판단이 들어 환경을 구별하여 진행하기로 결정했다.
개발은 연결하지 않은 환경, 테스트는 연결한 환경에서 작업하기!
바로 테스트를 하지 못하는 문제점이 있지만, 테스트가 되지 않는다고 개발을 멈출 수는 없다.
자세한 과정은 다음과 같다.

1. 로컬에서 작업하기
2. fork한 repository에 push를 하기
3. Remote SSH 연결하기
4. fork한 repository를 pull하기
5. API 테스트 하기

 

(2) API 개발 순서

Route > Dao > Provider > Controller의 순으로 개발을 진행했다.
개발하는 본인이 순서를 정하지 않는다면, API를 작성할 때마다 낭비되는 시간이 발생한다는 것을 느꼈다. Dao부터 작업하고 나서는 그다음 순위가 무엇이었지를 고민하는 과정이 지속적으로 발생했을 때 피로도를 느끼는 것도 문제였기에 순서를 스스로 지정한 것이다.

| Route: 개발 목록 설정
| Dao: DB에서 불러올 요소 설계
| Provider: Dao와 연결
| Controller: Provier와 연결

 

(3) 프론트의 입장에서 백엔드로부터 데이터 받기 전 화면 구성 방안

최종적으로 DB를 백으로부터 받아 진행할 것이기에, 이 데이터를 받는다는 사실을 인지하고 개발에 임해야 한다. 바닥에서부터 모든 것을 만들어내는 프로젝트를 처음 참여했기에, 화면에 요소들을 보여주기 위해 더미 데이터를 모두 적었다. 코드의 길이가 길어질수록 이상함을 느꼈다. 지워질 데이터에 노력을 들이는 과정이 비효율적임을 깨닫고, 협업하는 프론트분에게 DB와 연동하는 것을 고려하는 코드 작성 방법에 대해 물어보았다.
API 문서가 나오기 전, DB를 보고 유추하여 배열로 더미 데이터를 넣어 화면을 구성하는 것이 방법이었다. 추후에 문서가 나오면 수정하는 시간이 줄어든다고 한다!
 

(3-1) API 문서의 중요성

API 문서가 있다면 위의 더미데이터를 넣는 과정이 사라진다. 바로 직접 데이터의 정체를 파악하고 실질적인 데이터를 받는 구조로 개발이 가능하기 때문이다. 백엔드에게 API 문서를 받는 것이 빠르게 일어난다면 개발의 효율이 높아진다는 사실을 알게 되었다. API 문서가 중요했구나!
실제 해커톤에서 백엔드로 참여했을 때, API 문서를 첫 단계에서 설계하고 프론트에게 바로 공유했었다. 공유하는 이유를 알지 못했는데, 프론트 역시 백엔드로부터 받는 데이터의 형태를 알아야 하구나라는 사실을 알게 되었다. 이를 통해 프로세스에 대한 이해를 하게 되었다!
 

(4) 컴포넌트 활용 방법

무조건 하나를 만들어 활용하는 것보다는 적절하게 변형을 주는 것이 효율적이다.
Card 컴포넌트를 만들어서 다 활용하려고 했는데, 쉽지 않았다. CSS에 추가하는 과정이 번거로워지는 경우가 왕왕 발생했기 때문이다. 이를 해결하기 위해 유사한 요소가 있지만 다른 CSS를 적용하는 CardLong 컴포넌트를 만들었다. Card를 어떻게 활용하는지 고민하며 괴로워하는 것보다, 활용을 통해 시간을 절약하는 방법이 더 나은 경우도 있다는 것을 깨달았다. 확실히 개발 분야는 실제로 경험을 해야 자신의 것이 된다는 것을 느낀다. 더 많은 프로젝트 경험이 필요해-!
 
 

3. 이번주 느낀 점

프론트와 백을 넘나드는 개발을 진행했다. 동일한 자바스크립트 언어로 반대의 분야에 있는 모두를 탐색할 수 있던 좋은 기회였다. 프론트는 화면을 구성하는 면에서, 백은 데이터를 전달하는 면에서 재미가 있더군!
이번 학기에는 프론트에 집중해 구현을 해보고자 한다. 강의로 듣던 리액트를 귀농귀농 프로젝트에서 구현을 하며 실력이 늘어나는 것을 느끼고 있다. 이것이 리액트구나!를 느끼고 있다랄까. 우선 재미가 있기에 계속 이 분야를 파보고 싶다. 아무래도 프론트의 매력에 빠진 것 같다.

---