이번주에는 이력서를 쓰고 모의면접을 통해 느낀 점과 보완해야할 점 5가지를 추려보았다.

0. 이력서 작성 시작.

   역시나 어려운 자소서. 어렵사리 작성은 다 했고 이제 보완하면서 많이 지원을 해야지.

1. 자바스크립트 이론에 대해서 부족하다.

   모의면접을 통해 자바스크립트의 이론이 부족하다는 것을 다시 한번 느끼게 되었다. 클로저, 이벤트 버블링, 실행컨텍스트 등.. 아직 정확히 답변할 수준은 안된다. 다행히 스터디에서 코어 자바스크립트라는 책으로 이론 공부를 해왔기에 큰 어려움은 없을 거 같다.

2. 취업이냐, 프로젝트를 하나 더 하냐

   사실 고민이 되는 부분. 여기저기 얘기를 들어보면 취업이 먼저라고 한다.

3. 여태껏 해왔던 것을 되돌아보자.

   여태껏 프로젝트하면서 해왔던 것을 복습할 겸 다시 공부해보자.

4. 아직 갈 길이 멀다.

   리액트만 공부해봤다. 여기저기 지원하려고 보니까 typescript, native, vue 등등 우대사항이 많았다. 시간될 때 틈틈히 공부해야지

이제 남은 건 반응형과 등록된 8장의 이미지 수정만 남았다. 열심히 해보자.

이제 배포가 2일 밖에 남지 않았다. 반응형으로도 만들어야 하고 손 볼 곳도 아직 많이 남았다. 열심히 해보자

0. Link

   Link는 클릭 시 바로 이동하는 로직 구현에 용이하다고 한다. 예를 들어 디테일 페이지로 이동하는 것들.. react-router-dom 에서 제공되는 Link 는 DOM 에서 a 로 변환됨. a 와 Link 는 지정한 경로로 바로 이동시켜줌. a 와 Link 의 차이점은 a 는 외부 프로젝트로 이동할 경우 Link 는 프로젝트 내에서 페이지를 전환할 경우

   <Link to="/page"></Link>

   1. Navigate

      함수 호출을 통해 페이지 이동을 한다. 페이지를 이동한다는 것에 공통점이 있지만 차이점도 존재한다. Navigate는 보통 페이지 전환 시 추가로 처리해야하는 로직이 있을 때 사용한다. 예를 들어 로그인 버튼 클릭 시 백엔드와 통신을하고 Case 별로 나눈 후 다른 페이지를 보여주면 된다.

const navigate = useNavigate();

const onClick = () => {
    navigate("/main")
}

0. dangerouslySetInnerHTML

   dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 react의 대체 방법. 이름에서 설명하듯 사이트 간 스크립팅 공격에 쉽게 노출될 수 있다고 한다. 스크립팅 공격이라 말이 좀 어렵다.

```javascript

const Test = () => {

  const testHtml = `<p>hello</p>`

return(<div dangerouslySetInnerHTML={{__html: testHtml}}</div>)

}

0. React Query, Recoil

   지금까지 개인 및 팀 프로젝트에서 리덕스를 사용해왔다. 리덕스에 비동기 통신을 많이 하기때문에 비효율적이라는 지적을 받았다. 비동기 통신과 스토어를 나누기 위해 이번 프로젝트에서는 쿼리와 리코일을 사용해봤다.

   React Query, 엄청난 신세계였다. 기존에 비동기 통신을하고 통신한 데이터를 스토어에 옮기고 다시 스토어에 있는 데이터를 불러와서 써왔다. 하지만 쿼리는 통신하자마자 쓸 수 있는 엄청난 간편함이 보였고 코드 또한 많이 짧아졌다. 아직까지 쓸 수 있는 기능은 많지 않지만 계속해서 공부해야 한다.

   Recoil, 전역상태관리 Redux에 비해 엄청난 간편함을 제공한다. atom을 만들고 여기저기서 쓸 수 있는 장점이 있지만 아직까지 selector에 대해 공부가 부족하다.

   React Query, Recoil 둘이 같이 쓰면 굉장히 좋다고 했는데 아직까지 같이 쓰는 코드를 구현하지 못했다. 좀 더 공부해보자

- name: Setting .env
        run: |
          echo "REACT_APP_GOOGLE_CLIENTID=${{ secrets.REACT_APP_GOOGLE_CLIENTID }}" >> .env
          echo "REACT_APP_API_DOMAIN=${{ secrets.REACT_APP_API_DOMAIN }}" >> .env
          echo "REACT_APP_KAKAO_REDIRECT=${{ secrets.REACT_APP_KAKAO_REDIRECT }}" >> .env
          echo "REACT_APP_KAKAO_CLIENTID=${{ secrets.REACT_APP_KAKAO_CLIENTID }}" >> .env
          echo "REACT_APP_NAVER_REDIRECT=${{ secrets.REACT_APP_NAVER_REDIRECT }}" >> .env
          echo "REACT_APP_NAVER_CLIENTID=${{ secrets.REACT_APP_NAVER_CLIENTID }}" >> .env
          echo "REACT_APP_NAVER_STATE_STRING=${{ secrets.REACT_APP_NAVER_STATE_STRING }}" >> .env
          cat .env

0. react-beautiful-dnd 처음에 박스내에서 컨텐츠를 움직이는 것을 구현하려다 이 라이브러리를 알게됐다. 기능을 다 구현하긴 했으나 뭔가 깔끔하지 못한것 확인해보니 하나의 박스내에서 위 아래의 이동은 자연스러우나 옆으로 이동하고 하는게 많이 깔끔하지 못했다

    const onDragEnd = ({draggableId, destination, source,  }) => {
        if(!destination) return;
        setMultiImgs((imgArry)=>{
            const copyImg = [...imgArry];
            copyImg.splice(source.index, 1)
            copyImg.splice(destination.index, 0, draggableId)
            return copyImg
        })     
    }
   <DragDropContext onDragEnd={onDragEnd}>
                        <ImgBox>
                            {multiImgs.map((i, idx)=>(
                               <Droppable droppableId={i}>
                                    {(provided, snapshot)=>(
                                        <div key={idx} ref={provided.innerRef} {...provided.droppableProps}>
                                        <Draggable key={i} draggableId={i} index={idx}>
                                            {(provided, snapshot)=>(
                                                <div 
                                                ref={provided.innerRef}  
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps} 
                                                key={idx}>
                                                    <Img  src={i} alt={`${i}-${idx}`}/>
                                                    <DeleteIcon  onClick={()=> deleteImage(idx)} />
                                                </div>
                                            )}
                                        </Draggable>
                                        </div>
                                    )}
                               </Droppable> 
                            ))}
                        </ImgBox>
    </DragDropContext>

   사용해야할 컴포넌트는 DragDropContext, Droppable, Draggable 총 3가지 주의할 점은 함수를 호출해야 한다. DragDropContext 최상단 움직임을 감지할 박스 Droppable 움직이는 박스 Draggable 움직이는 컨텐츠

   깔끔하지 못했던 문제점은 드래그 되고 완료 될 때 index 값의 수정이 이루어져서 그런거 같다.

1. react-easy-sort

   위에 문제점을 고쳐보고자 구글링을 많이 해봤다. 그 결과 굉장히 심플하면서 최신이고 가장 깔끔한 움직임을 할 수 있는 라이브러리이다. 단 설치할 때 문제점은 array-move와 같이 사용해서 설치를 해야하는데 최신버전인 4.0.0은 오류가 났다. 그래서 3.0.1로 다운그레이드를 해보니 정상적으로 잘 작동됐다.

  <SortableList
      onSortEnd={onSortEnd}
      className={classes.root}
      draggedItemClassName={classes.dragged}
    >
      {items.map(({ name, image }) => (
        <SortableItem key={name}>
          <div className={classes.item}>
            <Avatar
              className={classes.image}
              alt={name}
              src={image}
              imgProps={{ draggable: false }}
            />
            <Fab
              color="primary"
              size="small"
              className={classes.button}
              aria-label="like"
              onClick={() => alert("Woof!")}
            >
              <FavoriteIcon />
            </Fab>
          </div>
        </SortableItem>
      ))}
    </SortableList>

위에 코드는 https://codesandbox.io/s/react-easy-sort-images-demo-486qk?file=/src/App.tsx:10024-10763 에서 가져왔다. 반드시 사용해야할 컴포넌트는 SortableList, SortableItem 두 가지이다. 코드를 다 작성하고 나서 잘 안 됐었는데 css에 pointer-events: none; 를 추가해주니 작 작동됐다.

0. 이미지 슬라이드

   이지미 슬라이드는 react-slick 이란 라이브러리가 있어서 구현하기 별로 어렵지 않았다. 다만 prev, next 화살표 부분에서 약간의 막히는 부분이 있었다.

    <ImgBox>
         <Slider {...settings}>
             {listImg.map((item, idx)=>{return(<img src={item}/>)})}
         </Slider>
    </ImgBox>
   
       const settings = {
       infinite: true,
       speed: 500,
       slidesToShow: 1,
       slidesToScroll: 1,
       arrow:true,
       nextArrow: <SampleNextArrow/>,
       prevArrow: <SamplePrevArrow/>
   };

   slick css 를 import 해와서 prev, next 화살표를 할 수 있었으나 나는 이미지 내에 화살표가 들어가있는 것을 원했다. 그래서 css 부분을 고쳐봤으나 next arrow는 사진 위에 나타나고 prev arrow는 사진에 가려 나오질 않았다. z-index 방식을 고쳐줘도 말이다. 결국 삽질을 수 시간 한 후에 화살표를 커스텀을 해줬다. 다행스럽게도 내가 원하던 화살표가 사진내에 들어가 있는 것을 확인 할 수 있었다.

   

1. 다음 주 작업해야할 것 들

   현재 와이어프레임이 변경되서 재차 작업을 해야한다. 어서 Write 뷰와 Detail, Mian View 를 작업해야하고 CRUD 테스트를 빨리 해보고 싶다. 그리고 이미지를 업로드 할 때 업로드 된 이미지 미리보기에서 이미지를 마우스로 클릭해서 box 내에 자유재재로 옮기는 작업을 해야한다. 예전에 이 부분 라이브러리를 본 적이 있어서 비교적 쉽게 접근할 수 있을거 같다.

   화이팅 하자.

• 전화부터 와이파이까지, 네트워크의 기본 속성

  대역폭(bandwidth) - 모든 네이트워크 가장 기본적인 속성, 네트워크가 데이터를 얼마나 빨리 전송할 수 있는지를 의미

  레이턴시(latency) 또는 지연(delay) - 일정 단위의 정보가 시스템을 통과하는 데 걸리는 시간을 측정한 값

  지터(jitter) - 지연의 변동성을 뜻 음성과 비디오를 다루는 시스템에서 중요하게 여겨짐

  범위(range) - 주어진 기술로 네트워크가 지리적으로 얼마나 확장될 수 있는지를 정의

• 삐 - 삐 - 추억의 모뎀소리

  유선 전화 시스템은 아날로그 음성신호를 전달 따라서 디지털로 보내기 위해선 비트로 변환하는 장치가 필요 변조(mudolation)와 복조(demodulation)를 수행 하는게 모뎀(modem)

  데이터 연결을 위해 모뎀을 사용하는 것은 많은 단점이 존재 전용 전화선, 데이터를 연결할지 음성통화를 할지 선택 또한 매우 느린 전송속도

  ---

• 킬로바이트에서 메가바이트로

  아날로그 전화선 신호 전송속도를 해결하기 위해 케이블 방송에 사용하는 케이블선 사용 케이블 모델(cable modem) tv 케이블은 여러집이 사용하기 때문에 단점 존재

  DSL(digital subscriber loop) 음성 신호를 간섭하지 않은 기법을 사용

  가정용 광케이블 통신망 서비스 전송 손실이 낮은 유리 섬유를 따라 펄스로 보내짐 신호 또한 거리가 매우 길어짐

  ---

  • 학교나 회사에서 사용하는 근거리 네트워크, 이더넷(ethernet)

  알토(alto)라는 컴퓨터들을 서로 연결하기 위해 이더넷이라는 네트워킹 기술 탄생 초창기에 케이블 방식을 사용

  프라이버시에 대해 문제점 같은 건물 및 근거리에 위치한 이더넷을 사용하면 데이터를 엿볼 수 있음 이더넷에서 정보는 패킷(packet)으로 전송됨 패킷은 정보를 담고 있는 일련의 비트 또는 바이트

 let curruntTime = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
 .toISOString().slice(0, -8);

 2022-06-25-15:15

시간을 넘겨주고 가격이 좀 복잡했다. input 입력시 2,000,000 comma를 자동 입력되고 
```javascript

const commaRemovePrice = enteredNum.replace(/,/g,'')

        console.log(enteredNum, "comma 있음")
        console.log(commaRemovePrice, "comma 제거")
--------------------------------------------------------
const priceComma = (e) => {
        const value = e.target.value;
        const removedCommaValue = Number(value.replaceAll(",", ""));
        setEnterdNum(removedCommaValue.toLocaleString());

    }

comma를 제거 해서 데이터를 넘겨준다.

문제는 디테일 페이지에서 comma를 보여줘야하는데 그게 좀 복잡할거 같다.

내일은 mockapi 만들어서 작업해봐야겠다.

const obj = { a:5, b:3, c:4, }

Object.keys(obj)
// keys arry 반환
Object.values(obj) 
// valuses arry 반환

Object.keys(obj).map((item)=>obj[item])

``` 2. 미니프로젝트 시작

 대부분 CRUD를 사용하고 게시판 작성 및 댓글 등을 구현하는데 처음엔 우리조 또한 같은 작업을 할거라 생각했다. 계속 회의하고 기능 구현을 어떻게 할지 고민했는데 뭔가 계속 몸집이 불어나갔다.
결국 경매사이트
내가 처음에 생각한 경매사이트는 단순히 입찰버튼을 누르고 많은 입찰버튼을 받은 게시글에 인기순으로 맨 위에 위치하는 걸로 했던 것이다. 계속되던 회의로 입찰버튼을 단순히 누르는게 아니라 가격을 입찰하는 것으로 바뀌었다. 또한 만료날짜도 시간까지 구현해야한다. 다른 조들에 비해 구현해야할 기능이 많기는 하다. 
하지만 할 수 있겠지 해봐야 한다. 해보기 전에 겁이 난다만 못하겠다고 하는 건 아니라고 본다. 이것도 구현하면 한층 더 실력이 올라가겠지

const arry = ["a", "b", "c", "d", "e"];
arry.splice(1, 0, "hi");
// 첫 번째 인자 index,
//배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.    
//두 번째 삭제할 것,
//1이면 하나 제거 2개면 2개 제거 0개 면 제거 안 함
//세 번째 추가할 것
//추가 할 값

React.memo는 props 변화에만 영향을 줍니다. React.memo로 감싸진 함수 컴포넌트 구현에 useState, useReducer 또는 useContext 훅을 사용한다면, 여전히 state나 context가 변할 때 다시 렌더링됩니다. 이 메서드는 오직 성능 최적화를 위하여 사용됩니다. 렌더링을 “방지”하기 위하여 사용하지 마세요. 버그를 만들 수 있습니다.

DraggableCard에게 동일한 index와 동일한 todo prop을 받으면 리랜더링을 하지 않도록 하기 위함이다.

function MyComponent(props) {
/* props를 사용하여 렌더링 */
}

export default React.memo(MyComponent, areEqual);

https://ko.reactjs.org/docs/react-api.html#reactmemo

2. 숙련주차 마무리

   상당히 힘든 주차였다. 프론트가 이렇게 할게 많다니 예외처리 등 하면 끝이 없다. 시간이 많이 주어졌다면 기능들을 좀 더 명확하고 정확하게 구현할 수 있을거 같은데 시간이 좀 부족했다. 이번 주차에서 한 가지 얻은게 있는데 날림 코딩을 지양해야 한다는 것이다. 여태것 코드를 짤 때 날림 코드 즉 생각나는데로 코드를 쓰고 구현되면 넘어가고 최종 마무리 때 그걸 다시 클린하게 짰었는데 코드 양이 많아지다보니 마지막에 클린코드를 하지 못했다. 내가 왜 이 코드를 썻는지 이해가 잘 되지 않았다. 돌아다니는 짤로 '처음 이 코드를 구현할 때 신과 나만이 안다. 하지만 이제는 신만 안다.' 이게 완전히 나의 이야기 인 것 같았다.

   앞으론 날림코드를 작성하되 기능구현이 끝나면 그때그때 바로 클론코드를 짜야겠다.

• 기술 표준의 중요성

  표준이란 어떤 기술적 산물이 어떻게 만들어지고 어떻게 작동하도록 되어 있는지 명확하고 상세하게 기술한 것.

  ex) 전기 콘센트 220v, HDMI, USB 등등

  소프트웨어에서도 많은 표준 존재

  ex) 아스키코드, 유니코드, 프로그래밍 언어 등등

• 자유로은 소프트웨어, 오픈소스

  프로그래머가 작성하는 코드는 소스코드(Source Code)

  소스코드를 프로세서에서 실행하기 적합한 형태로 컴파일한 결과는 오브젝트 코드(Object Code)

  연구와 개선 활동을 위해 모두 소스코드를 자유롭게 사용할 수 있는 오픈소스(Open Source)

  과거에는 대부분의 소스코드는 개발 회사의 독점 이 때문에 수정 및 개선 불가

  리처드 스톨만 GNU 프로젝트 시작, 자유로운 소프트웨어를 만들어 내는 것

  대부분의 오픈소스 제공 파이어폭스, 크롬 브라우저, 안드로이드 운영체제

  프로그래밍 언어와 지원 도구는 거의 항상 오픈소스로 만들어 짐 google-go apple-swift 등

  리눅스 운영체제 오픈소스 프로젝트 자신만의 용도로 사용 가능 하지만 배포할 시 소스코드를 공개해야함

  오픈소스로 인한 수익은 기술 지원, 기타 서비스 이용에 요금을 청구

라이프사이클 함수는 클래스형 컴포넌트에서만 사용이 가능하다. 함수형 컴포넌트에서는 hook으로 대체 가능!

1. React Hook

   React Hook은 함수형 컴포넌트에서 라이프사이클 메서드를 사용하기 위해 만들어졌다.

   1) useState()

   가장 기본적인 hook이며 상태관리할 때에 사용한다

    const [count, setCount] = useState(0);

   인자로 넘겨주는 것은 state의 초기 값 여기서는 0 count 0이 되고 setCount로 값을 수정하고 다시 수정된 값이 count에 들어간다.

2) useEffect()

라이프사이클에서 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것.

useEffect(()=>{},[])

hook을 이용해 사이드 이펙트를 수행할 수 있는데 데이터 가져오기와 구독과 수동으로 DOM을 조작할 수 있다.

3) useRef()

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다.

4) useContext()

context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환한다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정됨

5) useReduser

useSate의 대체 함수 (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환. 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 더 선호.

2. Firebase Authentication

   firebase authentication 방식에 회원가입에 대해서 공부를 해봤다. 비교적 굉장히 간단했다. getAuth를 가져오고 createUserWithEmailAndPassword를 통해 가져온 auth와 회원 이메일 아이디 비밀번호를 넘겨주면 된다. 단 비동기 통신이기때문에 promise ascyn와 await를 사용해아한다.