이번 프로젝트는 너무 바빴다. coin빌드도 하고, websocket에 대해서도 알아보고, rpc에 대해서도 알아보았다. 내 생각대로 진행이 되지 않아서 팀장이 내가 너무 우왕좌왕했었다. websocket도 하고 싶은데 coin도 실행이 안되고, 그러다보니 내가 맡아야 하는 일들을 다른 사람에게 부득이하게 많이 넘기게 되었다.

그래서 이번엔 내가 코드를 치기보다는 내가 연구한 걸 남들에게 어떻게 하면 된다고 알려주는 역할을 해서 이번에는 코드를 쓰는 일이 적었다. 뭐 성장시킨다는 일념 하에 기본 베이직 코드(?)정도만 짰다. 그런데도 너무 오래 잡아먹었다. 근데 팀원들은 내가 알려준거에 +α를 해서 코드를 작성하였다. 역시...우리팀👍

심지어 컴퓨터가 고장나서 고치고 환경설정을 다시 하는데도 애를 먹었다. 지금도 애를 먹고 있다.

그래서 내가 할 거 드디어 다하고!(남에게 미루고) 호가창을 맡기로 하였다. 원래는 매수 매도 하는 로직을 더 자세히 알아보고 코드를 쓰고 싶었지만 일단은 프론트...가 급선무였기에 먼저 하기로 하였다.

그리고 이미 사람들이 어느정도 코드를 짜놓은 상태에서 참여하는 것은 처음이라서 좀 긴장되기도 하였다. 그리고 실제로 우리팀에서 github를 사용할 때 conflict가 많이 일어나서 팀원들이 지치기도 하였기에 조심조심 작업을 하였다.

구현할 것
최근 시장가 중심으로 원 단위로 나눠서 배열하기
백엔드에서 받아온 값을 context에 넣어서 호가창 구현하기<가격,수량>
디자인 코인원이랑 비슷하게

1. 기능 구현

1-1.context에 담기

react는 싱글 어플리케이션이기 때문에 그냥
const [coinBook,setCoinBook]=useState({});
이렇게 정리해버린다면 다른 페이지를 갔다오면 정보가 사라져버린다.
그래서 그래서 호가창에 오는 정보는 context에 담아야 한다.

그리고 그 값을 화면 출력할 때 쓸 것이기에 먼저 context의 초기 상태를 바꾸어주어야 했다. redux를 쓰지 않기에 값을 받고 시작하지 않아 오류가 생길 확률이 거의 100%이기 때문이다. 그리고 웹소켓으로 정보를 받기에 언제 올지 예측할 수가 없어서 context의 초기값을 바꾸고 시작하는게 맞았다.

내가 추가한 것은 4개의 항목이다. orderbook엔 호가창에 표현될 자룔르, currentPrice에는 시장가를 buyQty에는 누적 매수 수량을 sellQty에는 누적 매도 수량을 넣을 예정이다.

1-2. reducer 활용하기

백엔드에서 내가 활용할 것을 이렇게 던져준다.
원래 이렇게 같은 가격의 수량을 던져주기로 했지만, 더 고치기엔 시간도 별로 없고, 프론트에서도 어짜피 작업을 할 수 있을 것이라고 생각해서 그냥 이대로 유지하기로 합의를 하였다.

메세지를 받으면 바로 dispatch로 보내기로 하였다.
사실 이 작업도 최상단에서 여러 정보를 다 가공하면 편한데, 이미 늦어서 그냥 지금 구조에서 하기로 하였다. 다 중간에 확인을 안 했던 내 잘못이 크다.

1-2-1. reducer 만들기

작업을 해야할 부분이 많다.

1. 누적 수량값을 만드는 배열을 만들어야 한다.
2. 화면에 보여지는 배열을 만들어야 한다.

 case "orderbook":{
                let orderArr=[];//총 합을 넣는 array
                let {buy,order,sell,last} = action.payload;
                let current_length = last.toString().length;
                let unit= Math.pow(10,current_length-3);
                let start_money=parseInt(last) + (15*unit);
                let order_Arr=[];//총 합의 값을 넣는 array
                let pre_order_num=0;

                for(let i=0;i<order.length;i++){
                    if(pre_order_num==order[i].price){
                        console.log(order[i].rest);
                        orderArr[(orderArr.length)-1].rest +=order[i].rest;
                    }else{
                        orderArr.push(order[i]);
                    }
                    pre_order_num=order[i].price;
                }
                console.log(orderArr)
                let j = 0; 
                while(pre_order_num>=orderArr[j].price){
                    if(j==(orderArr.length-1))break;
                    j++;
                }
                j= j>0? j--:0;
                for(let i=0;i<30;i++){
                    if (start_money==orderArr[j].price){
                        order_Arr.push({price:start_money,rest:orderArr[j].rest});
                        j++;
                    }else{
                        order_Arr.push({price:start_money,rest:0});
                    }
                    start_money -=unit;
                }

                return{
                    ...state,
                    orderbook:order_Arr,
                    currentPrice:last,
                    buyQty:buy,
                    sellQty:sell,
                }
            }   

orderArr에 누적 수량을 넣어주고, 그 배열을 활용해서 화면에 보여질 배열인 order_Arr를 만드는 코드이다.

이게 최종 코드이고 원래 while문을 이렇게 썼다가 오류가 났다. orderArr[j].price를 찾지 못한다는 것이었다.

			let j = 0; 
                while(pre_order_num>=orderArr[j].price){
                    j++;
                    if(j==(orderArr.length-1))break;
                }
                j= j>0? j--:0;

생각해보니 orderArr안에 배열이 하나밖에 없을 때 못찾는 것이 당연했다. orderArr[1]이 없는데 어떻게 찾을 수 있겠는가....
그래서

			let j = 0; 
                while(pre_order_num>=orderArr[j].price){
                    if(j==(orderArr.length-1))break;
                }
                j++;
                j= j>0? j--:0;

로 바꾸어 주었더니 잘 실행이 되었다.

2. 화면 꾸미기

map 함수를 많이 사용했다. 그리고 이미 다른 팀원이 틀을 짜놨기에 나는 그 틀 안에서 새로이 코드를 구성하였다. 틀이 있어서 이 부분은 크게 어렵지 않았다.

<div id="orderBookBox">       
                <div className="orderFixedHeader">
                    <div className="float_left order_1 non_padding non_right_border">가격</div>
                    <div className="float_left order_2 non_padding ">수량</div>
                </div>
                <div>
                    {state.orderbook.map((v,k)=>{
                        return(
                            state.currentPrice>=v.price?
                            <>
                            <div key={k} className = "order_tuple">
                            <div className = " order_1" style={{color:"rgba(225,35,67)",backgroundColor:"rgb(255, 247, 249)"}}>
                                {v.price}
                            </div>
                            <div className = " order_2" style={{color:"rgba(225,35,67)"}}>
                                {v.rest}
                            </div>
                            </div>
                            </>
                            :
                            <>
                            <div key={k} className = "order_tuple">
                            <div className = " order_1" style={{color:"rgb(23, 99, 182)", backgroundColor:"rgb(247, 251, 255)"}}>
                                {v.price}
                            </div>
                            <div className = " order_2" style={{color:"rgb(23, 99, 182)"}}>
                                {v.rest}
                            </div>
                            </div>
                            </>
                        )})}
                </div>
            <ul className="order_book_ul">
                <li className="float_left" style={{color:"rgb(23, 99, 182)"}}>매도 잔량</li>
                <li style={{color:"rgb(23, 99, 182)",marginLeft:"1em"}}>{state.buyQty}</li>
            </ul>
            <ul className="order_book_ul">
                <li className="float_left" style={{color:"rgba(225,35,67)"}}>매수 잔량</li>
                <li style={{color:"rgba(225,35,67)",marginLeft:"1em"}}>{state.sellQty}</li>
            </ul>
        </div>

3. CSS

와 난 진짜 CSS가 싫어요^^
CSS 극혐!!!
위에서도 보면 알 수 있겠지만, 나는 inline스타일을 좋아한다. 눈에 딱 보인달까? 사실 편한 건 아니고 하기 귀찮으니까 이렇게 짜는 것이다. 그래도 위의 코드는 로직으로 css가 바뀌어야 하기에 그냥 저렇게 써주었다.

3-1. flex를 사용하면 backgroundColor가 적용되지 않는다.

거지같다... ReactNative를 하면서 flex의 편리성을 몸소 체험하게 되었다. 그렇기에 flex를 제대로 쓰려고 팍!! 힘을 썼는데...
backgroundColor가 아무리해도 먹지 않았다.

결국 이를 해결하기 위해 내가 택한 방법은!

width를 %로 넣는것이었다.....
정상작동한다....

3-2. sticky를 사용할 때 배경을 넣어야 한다. z-index도!

배경을 넣지 않으면 어떤 일이 생기냐면!

그리고 배경색깔을 넣고 z-index를 넣지 않으면 어떤 일이 생기냐면!

똑.같.다!^^

z-index:3;을 추가해주니 제대로 작동한다.