[8주차] 서두르지 말자. 서두른다고 되는 일이 아니다.

6/20 
오늘은 styled components, react swiper 라이브러리 사용법, 게시판 만드는 법을 배웠다.
styled components 는 요즘 리액트 개발 회사에서 많이 사용한다는데 배워보니 처음엔 좀 복잡했지만 쓰다보니 편하고 재밌었다. html, css, js 가 모두 접목되어 쓰고 있는 것 같았다.
react 에서 swiper 라이브러리를 사용해봤다. 강사님이 react 는 js 만큼 아직 업데이트가 되지 않아서 좀 불편하다고 하셨는데 확실히 라이브러리가 무거운건지 react 가 반응이 느려져서 이게 에러인건지 되는데 반영이 안 되는건지 좀 답답했다.
게시판 만드는 법은 많이 쓰는 공식이 있다고 하셔서 그걸 배워봤는데 로직이 복잡해서 어렵긴 했지만 이해가 어렵진 않았다. 다만 useEffect 로 api 를 가져오는 작업을 강사님과 자주 했는데도 이해가 안돼서 윤하님한테 물어봤다. 그랬더니 내가 모르는 부분까지 하나씩 다 설명해주셔서 이해가 정말 잘됐다. 특히 rse => res.json 을 해주고 또 data => setList(data) 를 해주는 부분이 걸렸었는데 json 파일로 변환해줬으면 그걸 data 매개변수로 넣고 데이터를 넣어줘야 하는 state 함수로 보내서 api 를 전달해주는 것이었다. 그리고 중간중간 reverse, slice 등 예전에 배웠던 메서드들이 나와서 좀 반가웠다.

집에 와서는 19일에 코딩앙마 react 강의를 11. json-server, rest api 까지 봐서 오늘 나머지를 다 끝내려고 했지만 12, 13, 14 까지 밖에 보지 못했다. 나머지 15, 16, 17 은 내일 꼭 마무리를 하고 17일날 받은 상세페이지 만들기 과제를 해봐야겠다.
그런데 react hook 들이 많고 쓰기가 복잡해서 강의를 두세번 보고 필기를 하며 뜯어봐야 그제야 이해가 됐다. 사실 이해가 아닌 계속 써봐야 하는데 이해가 되지 않으면 시작을 못해서 걱정이다. 
코딩앙마에서는 day 1, day 2, day 3 각 날짜를 클릭하면 그에 해당하는 단어가 나오는 식이었는데 그걸 다른 페이지로 가는 게 아닌 tab 으로 만들어줬으면 로직이 더 복잡해졌을까 라는 생각이 들었다. 물론 코딩앙마에서는 react 의 기초 기능을 모두 설명하기 위해 그렇게 만들었겠지만 tab 으로 만들어주면 데이터를 한번만 불러오면 될 것 같아 그렇게 생각해봤다. 나중에 시간이 된다면 한번 시도해보고 싶다.
 

6/21
오늘은 비즈니스 매너에 대해서 배우는 날이라 수업 때는 복습을 하거나 과제는 만들지도 못했다. 그대신 집에 와서 코딩 앙마 react 강의 마지막에 타입스크립트 영상 빼고 나머지를 모두 봤다! 이해하고, 필기를 하면서 보느라 많이 느리고 늦어지긴 했지만 이번주 스터디 모임 내에 다 봐서 다행이라는 마음이 들었다.
그리고 상세페이지 과제를 하는데 데이터 연결은 무슨, 라우터 연결부터 막혀서 오늘 교육 쉬는 시간 때도 다시 이해하느라 애를 먹었다. 집에 와서 react 강의를 모두 보고 구글링을 해보니 내가 애초에 이해를 잘못하고 있었다는 것을 알았다.
나는 app.js 에 라우팅 해준 것들이 해당 메인 페이지에만 적용되는 줄 알고 상세페이지는 어떻게 라우팅해주는지 해매고 있었는데 그냥 주소를 만들어서 이동해줄 페이지들을 전부 넣으면 되는거였다. 이렇게 쉬운 걸 오랜 시간이 걸려 해결하다니 부끄러웠다. 
이제 상세페이지 컴포넌트를 라우트해준 뒤 card 컴포넌트에 가서 상세보기 쪽에 a 태그를 link 로 변경해주고 각 데이터를 넣으면 상세보기 페이지는 완성할 것 같다. 

6/22
오늘도 비즈니스 커뮤니케이션을 배우는 날이라 교육 때는 따로 공부를 하진 못했다.
원래 오늘 스터디 모임이라 오늘까지 마무리를 하려고 했으나 어제 새벽까지 했는데 데이터 연결을 못해서 끝내지 못했다. 오늘 와서 선환님이 상세페이지를 다 했다고 하셔서 봤는데 너무 간단하게 하셔서 놀랐다. 내가 코딩 앙마로 배운 useparams 훅도 써서 id 를 뽑아냈는데 일단 선환님 것을 참고해서 id 연결까지는 마쳤다. 하지만 props 로 연결해서 각각 넣고 싶은 자리에 props.title 등 이렇게 넣었는데 아예 빈칸으로 나왔다. console 에 props 도 띄워봤는데 object 로 전체가 잘 나와서 데이터는 왜 안 나오는지 애를 먹었다. 내일 강사님께 여쭤봐야 겠다.

6/23
오늘은 todo-list 를 만들어봤다.
사실 todo-list 는 코딩앙마에서 배웠던 것이랑 아주 비슷해보였는데 강사님이 실제로 코딩한 건 너무나 어려웠다.. 특히 crud 부분이 좀 달랐는데 코딩앙마에선 함수 안에 method : delete 이런 식으로 사용했는데 강사님은 함수를 계속 사용하셨다. 코딩앙마에서 사용한 것과 강사님이 사용한 것이 무슨 차이가 있는지 모르겠어서 혼란스러웠다. 컴포넌트 중첩을 많이 이용하셔서 너무 헷갈렸지만 집에 와서 코드를 하나하나 뜯어보며 최대한 이해해보려고 노력했다.
아침에 오자마자 강사님께 상세페이지에 데이터가 왜 안 들어가는지 여쭤봤더니 각 상세페이지마다 맞는 한 더미의 데이터가 들어가야 하는데 각각 데이터 전부가 들어가 있다고 하셔서 머쓱했다. 그러고 보니 어제 console 에 props 를 띄울 때 0 부터 모든 인덱스가 있던 게 그 이유였던 것 같다. 강사님이 다시 상세페이지 컴포넌트에서 map 으로 데이터를 돌리라고 하셔서 그렇게 해보려고 했더니 다른 교육생이 선환님 것을 보여주면서 이거 하나면 추가하면 된다고 하셨다. 자세히 보니 내가 어제 const id = props.id(id-1); 이렇게 하는데 자꾸 에러가 나서 나는 prop 데이터 안에 각 id 를 뽑아오고 싶은건데 왜 안될까 머리 터지게 고민했던 것이 const data = props.data[id - 1] 이렇게만 수정하면 되는거였다. 생각해보면 props 안에 있는 것은 data 인데 냅다 {props.title} 를 해주니 당연히 경로에 오류가 날 수 밖에 없던 것이다. 그리고 id 를 뽑아온 것은 data 의 인덱스 번호를 지정해주기 위함이었던 것이다. 끝까지 안되던 코드를 이해하니 다른 코드들도 이해가 됐다. 비록 선환님의 코드를 따라친 것이 되었지만 코드가 작동되지 않아 고민했던 시간들은 나의 것이었으니 그 고민했던 시간을 토대로 다른 곳에 써먹을 수 있을 것이라 생각한다.

6/24
오늘은 useCallback, localStorage, debounce, git 기초에 대해 배웠다.
useCallback 은 업데이트 등 기능 상 영향은 없지만 메모리 낭비를 줄이기 위해 나온 훅이라고 한다. 상태값이 변할 때마다 계속 실행되면 메모리 낭비가 심하기 때문에 사용한다고 한다. 그렇게 보면 useEffect 와 유사해보이고 사용법 또한 유사해 둘의 차이가 뭔지, 각각 어떨 때 적용해줘야 하는지 헷갈렸다. 그래서 검색을 해봤는데 useEffect 는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 훅이고, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다고 한다. 그러니까 정리하자면 useEffect 는 랜더링 될때마다 작업을 실행하는 것이고 useCallback 은 랜더링이 아닌 사용하고 싶을 때 사용한다는 점에서 반대의 개념이라고 할 수 있다.
local storage 는 web storage 중 하나로 object 처럼 key 와 value 쌍으로 서버가 아닌 클라이언트에 데이터를 저장하고 조회할 수 있는 저장소를 말한다. session storage 와 다르게 local storage 는 지우지 않는 이상 브라우저 자체나 탭을 닫고 다시 열어도 유지가 된다. setItem 메서드를 이용해 저장하고, getItem 메서드를 이용해 꺼낼 수 있다. 그래서 setItem 메서드로 각 key 와 value 를 지정해주고 저장한 후 getItem 메서드로 key 를 꺼내면 값이 출력된다. 객체도 저장해줄 수 있는데 이때 객체는 json 형태의 stringify(문자열)로 변환해 저장해준 뒤 json 형태의 parse(객체)로 변환해 꺼내와야 한다. 삭제는 removeItem 과 clear 로 각각 지정된 key 삭제와 전체 삭제를 수행해줄 수 있다.
debounce 는 사용자가 빈칸에 글자를 쓸 때마다 onChange 가 일어나서 함수가 호출될 때 메모리 낭비를 줄여주기 위해 사용한다. 공백 등 텀이 있을 때, 그룹화해서 한 번에 처리해준다. setTimeout 메서드를 사용해도 되지만 훨씬 복잡해지니 lodash 라이브러리를 쓰면 된다. 변수를 지정해주고 debounce( 적용할 함수, 시간 간격 ) 을 할당해주면 간단하게 처리된다.
이제 대망의 git 을 배우게 됐는데 다시 javascript 를 배울 때로 돌아간 것 같았다. 조금씩 올려봐서 어느정도 알고 있다고 생각했는데 알고 보니 나는 직접 올리는 것만 배우고 vscode 프로그램에서 터미널을 이용해 업데이트해주는 등 원격으로 사용하는 방법은 배우지 않았던 것이다. 강사님이 기초라고 여러가지를 알려주시긴 했는데 전혀 따라가지 못해서 다시 한번 복습해야 될 것 같다.

6/25
이력서 상담이 있는 날이라 하루의 절반 이상을 1분 자기소개와 이력서 자기소개를 준비하는데 보냈다. 짧은 시간 안에 최대한 많이 준비해 첨삭을 받고 싶었기 때문에 복습을 할 정신이 없었다. 그래도 상담 이후 텀이 생겨 24일 날 배운 훅과 메서드들을 복습했다. 
상담은 내가 준비를 거의 다 해왔다고 수정하는 것까지 도와주셨는데 내가 주저리주저리 써내린 것을 매니저님은 가독성 있고 깔끔하게 첨삭해주시는 것을 보고 평소에도 대단하다고 생각했지만 확실히 다르다는 느낌을 받았다. 첨삭받은 것을 수정하고 한번 더 봐주신다고 하셔서 너무 감사했다.

6/26
todo-list 를 복습하고 싶었는데 cbp 프로젝트 모임 준비로 하지 못했다. 이번 cbp 프로젝트에는 제타플랜 홈페이지를 맡게 되었는데 조장님의 주도로 디자인 시안과 질문할 것을 준비했다. 예시를 토대로 디자인 시안은 잘 찾을 수 있었는데 아무래도 이런 프로젝트가 처음이다보니 질문할 것을 찾기가 어려웠다. 기획서가 구체적이지 않고 디자인이 확실히 준비가 되지 않았다는 것은 두루뭉술하게 알 것 같지만 정확히 어떤 것이 필요하고 어느 부분이 부족한지 찝어내기가 어려웠다. 모임이 끝나고 집에 와선 이력서 첨삭받은 것을 토대로 수정 작업을 했다.

 

 

상세페이지 결과물

01

오른쪽으로 넘기면 코드가 있어요