---
# System prepended metadata

title: 인경 공유 Zone

---

# 인경 공유 Zone

# 1027 pair programming- [main-web] 고객센터 공지사항

## 📌 진행 방법
1h 진행
타이머 10분 간격으로 driver, naviator 교체
driver: 사고과정을 말로 표현하며 코딩
navigator: 집중해서 과정을 보고 전체 구조를 파악하기

### 목표
고객센터 공지사항 무한스크롤과 반응형 구현 완료하기

### task 
API
- [x] 공지사항에서 API호출 부분을 따로 분리하여 가져온다
- [x] 화면 하단에 도착할 경우 API호출을 하고 해당 결과값을 추가로 이어서 랜더링 되도록 한다.

UI
- [ ] antd collapse 적용
- [ ] 정적 UI 구현
- [ ] 반응형 구현 useResponsive

Open source
- react-intersection-observer


### 접근 방법
API : request 정상확인
- [ ] 변수명 디테일하게 고치기
- [x] type any -> 변경
- [x] hook 가져오기

UI : 기존 코드 참고

### 코드 진행 순서
- [ ] 처음에는 불러온 데이터가 없으므로 바로 ref div를 만나 isView를 true로 변경
- [ ] ref를 보고 있던 useEffect가 작용해서 API호출, 첫번째 인덱스의 데이터를 가져옴
- [ ] 이 데이터를 렌더링
- [ ] 이후 사용자가 마지막 라인에 다시 닿게 되면 다시 API를 호출하고 불러온 데이터를 result에 이어넣고 이를 렌더링 하는 방식

### 배운 점
vs code 새로운 점
- 저장하면 바로 브라우저에 반영되는것
- 크롬 디버깅 시 경고창 제거해서 console창 보기
- 컴포넌트에서 HTML요소를 로직과 분리시키는 것의 중요성
- Hook은 조건문이나 반복문 안에서는 사용이 불가능한 이유

접근 방법
- api 오류시 확인 Point 가 다름 (전체적인 부분부터 / 오류 지점 )
- 


---







# 0914 PR 전 check point

- [ ] .gitignore 될 파일 확인
- [ ] import 순서 확인하기
* - [ ] any ? 

---
# 📕 0820 Recoil 디렉토리 구조

## RecoilRoot

Recoil 을 사용할 component에는 반드시 `RecoilRoot`로 감싸야 한다.
Reocoil 은 중첩이 가능하고 이때 Recoil API는 가장 가까운 조상 RecoilRoot에 접근한다.
`key`를 기준으로 관련 상태를 파악하고 large data구조를 쪼개서 관리가 가능하다.


1️⃣ 가장 많이 보이는 구조
atoms 와 selector로 나눈 구조 
![](https://i.imgur.com/uRxGh1v.png)


2️⃣ [CRUD 하는 Recoil](https://blog.logrocket.com/crud-with-facebook-recoil/)
![](https://i.imgur.com/Q63HdMD.png)

3️⃣ [ directory 구조에 대한 토론 ](https://github.com/facebookexperimental/Recoil/issues/27)

아래처러럼 `atom`과`selector`를 구분하는 것도 좋지만 그 상태를 사용하는 곳에 가깝게 놓는 것이 가독성이 좋다는 의견
![](https://i.imgur.com/eyFy3sH.png)

4️⃣ [velopert git repo](https://github.com/velopert/velofolio) 
atoms 안에 기능별로 나누고 
각 atom.ts 내부에 atom, selector, 그걸 조작하는 customhook을 만들어서 export 
![](https://i.imgur.com/PCTkiOv.png)



## 좋은 Recoil Directory 구조가 무엇일까?
🔗 [Recoil directory 구조 개선하기](https://wes-rast.medium.com/recoil-project-structure-best-practices-79e74a475caa)

- 큰 app에 만은 atom이 존재할 것
- 한 atom에 접근하는 여러 component가 있을 때 각 component들의 데이터 조각중 하나가 변경될 때마다 모든 compoennt가 렌더링 되는 것을 피하기 위해 분할해야 한다.


### 파일명
많은 프로젝트에서 아래와 같이 파일명을 설정하지만 atom은 실제 state를 가지고 있는 것이 아니다. 

#### 좋지 않은 예시
`atom` : exampleState.ts
`selector`: exampleValue.ts


실제 사용할 시 이름이 겹치게 되고, 변수명이 직관적이지 않고 규칙이 흐려진다.
![](https://i.imgur.com/bdTBOLg.png)



- state , value 없애기!!!!
- selector에서 어떤 동작을 하는지 명시하기 `<Something>`
ex) exampleValue -> withBrackets (괄호를 넣는 selector) 

### 폴더구조
atom : raw data를 가지고있다
selector : acts 전의 행위와  get,set 
이 둘은 같은 data를 관리하는데 나눠져 있는 것은 불합리.

|좋지 않은(?) 구조|개선된 구조|
|------|---|
|![](https://i.imgur.com/oyHOixw.png)|![](https://i.imgur.com/jIvq8cX.png)|
|atom, selector로 나눈 구조|기능별로 폴더 분리|

#### 그로인한 장점 
- unit test의 위치가 명시적이다.
    recoil/example/*.test.ts
- 기능별로 폴더 분리가 되어 있다.
