210329_TIL(Recast.ly-AJAX)

✅Toy 문제 treeBFS

오늘은 BFS 문제였는데 내용이 탐색되는 순서대로 노드의 값이 저장된 배열을 리턴해야 되는 문제였다.

DFS와는 달리 BFS는 너비 우선 탐색이고, 큐로 구현되기 때문에 조금 색달랐다.

너무 어려워서 래퍼런스 코드를 찾아보면서 공부를 했다.

 

✅Recast.ly-AJAX

오늘은 API를 이용해서 검색 기능을 구현하는 것을 배웠다.

비디오 리스트를 클릭하면 그 클릭한 영상을 메인으로 보여주는 식으로 만들었다.

다 만들고나서의 문제점은 검색창에 내가 원하는 입력값을 넣으면 이상한 주제에 영상들이 나온다는 것이었다.

이 부분을 페어 분과 고민하고 고치면서 마무리했다.

버튼을 클릭하면 입력값을 함수로 넣어줄 수 있다는 것을 처음 배웠다💫

다 만들고 나서 기쁨도 잠시 내 API 키가 할당량(?)을 넘어 403 () 에러를 뱉어냈다💧

그 이후로도 계속 페어 분이 같이 에러를 해결해주시려고 노력해주셨다.

너무 감사했고, 결국은 페어 분의 API키 대체해 해결할 수 있었다.

Achievement Goals

상태 관리

• React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
• 비동기 호출과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
• Side effect를 다루는 React lifecycle method가 무엇인지 알 수 있다.

Hooks

• useState를 사용할 수 있다.
• useEffect를 사용할 수 있다.

Miscellaneous

• react-router-dom 을 이용해서 client side routing을 할 수 있다.

 

🍒Remember

---

✅프론트엔드 개발에서의 상태 관리

 

Side Effect이 뭐지?

함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인

대표적 예로 네트워크 요청, API 호출이 Side Effect이라고 부른다.

 

✅Routing

Server-side: Server에서 Routing 하기 때문에 해당 페이지에 직접 접근하는 방식.

Client Side Routing: Client 내부에서 Routing 하기 때문에 해당 페이지를 호출 시 root부터 해당 페이지까지 차례로 로딩한다.

 

🍒More Study

---

✅React Hook

✅Toy 복습