TIL 23.02.09 + 오류

오늘은 기존에 만들었던 agrostates와 서버를 연결하는 작업을 하였다.

 

분명 시간을 들여가면서 했는데, 못했다....!

원래는 react로 리팩토링까지 진행하려했는데, 시간이 부족해서 진행하지 못했다.

 

그래서 구현한 부분과 어떤 부분에서 어려움을 겪었는지 기록하려고 한다.

 

 

우선 아래 코드와 같이,

CRUD에 요청에 대한 응답을 만들어주었다. postman을 이용하여, 잘 작동하는 것을 확인하며 구현하였다.

 

클라이언트와 서버의 연결까지도 원할하였다.

 

dataAPI에 요청에 대한 응답을 받아오는 함수를 작성하고,

그 함수를 이용하여, 받아온 결과를 출력했다. 정보를 잘 받는 것을 보아 클라이언트-서버 연결이 잘 이루어지고 있는 것을 볼 수 있었다.

 

 

문제는 클라이언트단 이었다.

기존의 코드에서는 아래와 같이 화면을 렌더링을 하였는데

const ul = document.querySelector("ul.discussions__container");
render(ul)

 

페이지네이션을 구현하는 과정속에서,

여러함수와 변수들이 섞이면서, 코드가 난잡해졌다.

그래서 어디서부터 코드가 시작되는지를 모르겠고, 기존에는 data를 전역변수로 지정해주었는데

fetch를 도입하니, 비동기적으로 작동하여 data를 받기 전에 전역변수를 참조하는 함수들에  오류가 발생했다.

 

그래서 생각한게, 코드전체를 하나의 함수로 만들어서 동기적으로 작동하게 하면 되지 않을까? 싶어서

아래와 같이 코드를 만들어주었다.

async function App(){
	 const agoraData = await getDiscussions();
     
     ...

}
App()

코드자체는 동기적으로 작성하여 정보를 화면에 잘 받아왔지만, 내부의 페이지네이션 함수에서 오류가 생겨 포기했다.

기존 코드를 너무 엉키게 써놓고 서로 참조하게 만들어서, 이런 결과를 맞이했다.

다른 사람들의 코드를 보니 fetch함수 안에 render()를 넣어 손쉽게 진행햇는데,

페이지네이션 과정에서 render를 수정하면서 전역변수를 참조하게 만들어 하나를 해결하면 또 다른 문제가 생기는(?)

이상한 상황이 발생했다.

 

삽질을 하면서 깨달은 점이 생겼다.

 

1. 코드를 알아볼 수 있게 깔끔하게 짜야 추후에 쉽게 수정이 가능하다.

당시에는 깔끔하게 코드를 작성했다고 생각했지만, 돌아보니 가독성도 엉망이어서, 수정하는데 시간이 너무 오래걸렸다.

 

2. 코드를 구조적으로 짜자

함수끼리 서로 참조하니 위와 같이 웃지 못할 상황이 발생하였다. 역할에 맞게 코드를 짜고 어떻게 흘러가는지를

눈에 보이게 작성해야겠다고 다짐했다. 

 

 

2가지의 사항을 주의하면서

주말안에 빨리 온전히 기능을 구현해보아야겠다...!

 

-끝-