Journal/Today I Learned

TIL - 2022.01.28 금요일

오늘 배운 것 - 오늘은 react-infinite-scroller 를 이용하여 무한 스크롤을 구현하는 방법을 배웠다. 게시판 목록 api를 불러와서 무한 스크롤 형태의 게시판 목록 만드는 데에도 성공했다. 중간에 오타 때문에 난 에러를 잡느라 시간을 한참 소비했지만 결국은 원인을 찾아냈다. 다행이다. page를 pages라고 치는 바람에 생긴 문제였음.. 하하 - 무한 스크롤에 이용하기 위해 스프레드 연산자도 배웠다. 현재 페이지에 이미 뿌려져있는 댓글의 배열과 새로 불러오는 댓글의 배열을 합치기 위해 사용했다. 스프레드 연산자를 알고 나니 이미 많은 곳에서 이미 사용되고 있다는 사실이 눈에 보인다. slick의 세팅값을 전달하는데에도 스프레드 연산자가 사용되고 있다. - 배너에 쓰는 slick의 아이..

TIL - 2022.01.27 목요일

오늘 배운 것 자유게시판에 페이지네이션을 만들어서 넣었다. 이것저것 고려하고 신경쓸 게 많아서 시간이 예상보다 훨씬 더 걸렸다. 완성된 모습이 아주 마음에 들지는 않지만, 기능을 제대로 구현했다는 것 만으로도 성공적인 첫 시도라고 생각한다. 메모해뒀던 페이지네이션 만드는 프로세스를 여기에도 옮겨둔다. (내가 보려고 해둔 메모라 나만 알아볼 수 있음 주의) 1. map을 이용해서 fetchBoards 한 데이터를 뿌려준다. 2. 한 번에 10개의 페이지를 노출시킨다고 할 때, 각각의 페이지는 {시작 페이지 + index }페이지가 되며, 시작페이지는 [1, 11, 21, 31 .. ]의 등차수열이다. 3. 시작 페이지에 해당하는 state를 만들고, 해당 state를 활용해서 fetchBoards의 var..

TIL - 2022.01.26 수요일

오늘 배운 것 오늘은 리액트의 기본 레이아웃을 어떻게 짤 수 있는지 배웠다. 모든 페이지에서 제일 처음 공통으로 렌더링되는 파일인 _app.tsx 에 따로 만든 Layout 컴포넌트와 글로벌 스타일 컴포넌트를 삽입한다. 그리고 레이아웃 내부의 바디 영역에 props.children을 이용해 각각의 페이지 컴포넌트들이 로드되게 한다. 이렇게 하면 LayoutHeader, LayoutBanner, LayoutNavigation 은 모든 페이지에서 공통으로 보인다. 그리고 그 밑의 Layout Body 영역에 게시판의 목록, 글쓰기, 수정 페이지 등이 필요에 따라 렌더링된다. 유지보수하고 관리하기 정말 편리한 구조다. 위의 내용을 활용해서 작업중이던 자유게시판의 기본 레이아웃 구조를 만들었다. 큰 틀을 먼저 ..

TIL - 2022.01.25 화요일

오늘 배운 것 오늘의 제일 큰 성과! 유튜브 동영상을 리액트에 쉽게 넣을 수 있도록 도와주는 React-player를 반응형으로 코딩해서 자유게시판에 넣었다. 알고보니 간단한데, 스스로는 생각해내지 못했을 것 같은 기발한 방법이라 무릎을 탁 쳤다. Position이랑 padding을 활용하면 된다. 역시 세상에는 고수가 많구나. 그 방법을 내가 이해한대로 구체적으로 적어보자면.. 우선 React-player를 감싸고 있는 div에 relative를 주고 react-player에 absolute를 줘서 부모 div의 height 값을 제로로 만든다. 그리고 padding-bottom 혹은 top에 원하는 비율을 퍼센테이지로 환산해서 입력하면 일정한 비율로 유튜브 플레이어가 들어간다. 앱솔루트의 새로운 활용..

TIL - 2022.01.25 월요일

오늘 배운 것 오늘은 코드 정리하는데에 많은 시간을 썼다. 하나의 페이지 컴포넌트 안에 덩어리째 묶어두었던 [ 게시글 보기 / 댓글 입력 / 댓글 보기 ] 를 세 개의 컴포넌트로 쪼개서 보기 편하게 만들었고, 타입스크립트로 마이그레이션하면서 미처 다 지정해주지 못한 요소들의 타입을 정리해주었다. 근데 워낙 코드가 섞여있어서 전부 끝내지는 못했음. 일단 상세페이지만 완료했다. 내일 코드리뷰라 코드를 공유할만한게 뭐가 있나 하다가, 그동안 생각만 하고 작업은 안했던 css 수정 작업을 진행했다. 넷플릭스 리뷰 게시판을 테마로 잡았다. 촉박하게 한 것 치고는 그럭저럭 마음에 들게 나왔다. 일단 내일 코드리뷰를 끝내고 차근차근 디테일을 손보자.. 작성자 부분에 들어간 linear-gradient 에도 트랜지션을..

TIL - 2022.01.21 금요일

오늘 배운 것 수정하기 페이지 input에 초기값을 넣고 싶었는데 실패했던 문제를 해결 완료했다. React에는 수정 가능한 초기값을 할당하는 dafultValue라는 속성이 따로 있다. (!!!!!!!) value와 defaultValue도 별개의 속성으로 존재하고, checked와 defaultChecked도 별개의 속성으로 존재한다. Input 사용할 일 있을 때마다 이러한 추가 속성들을 찾아보자. 수정하기 페이지에 이미 작성된 내용을 기본값으로 불러오고, onChange가 이루어진 Input에 한해서만 mutation하는 기능을 구현했다. 이로써 기본 형태 게시판의 목록페이지, 상세페이지, 수정페이지는 구현이 끝났다. 상호 라우팅도 완료했다. 서로 연결되어있는 게시판을 보니 뿌듯하고 기분 좋다. ..

TIL - 2022.01.19 수요일

오늘 배운 것 - 과제의 api 주소를 잘못 설정했다는 것을 제출 한시간 전에 알았다. 경로 허겁지겁 바꾸느라 에너지를 많이 소모했다. 어제 공지를 제대로 읽지 않고 서둘러 작업하느라 생긴 미스였다. 앞으로는 공지를 꼼꼼하게 확인하고 과제를 해야지. - 어제 과제 중 놓쳤던 게시글 삭제를 구현하고, 게시글 작성 컴포넌트를 재사용해서 수정 기능도 구현을 완료했다. 점점 기능을 갖추어가는 모습이 정말 신기하다.. 재밌다. - 오늘 헤멨던 부분 1. 수정 페이지에 기존 입력 값을 value로 넣고 싶었는데 실패했다.. state도 전송이 제대로 안됐는지 undefined가 뜨고, 제일 심각한 문제는 저렇게 value를 넣어놓으면 내용 수정이 안된다는 것. 일반 html의 input value와는 다른 것 같다..

TIL - 2022.01.18 화요일

오늘 배운 것 - map 과 filter를 배웠다. map을 이용해 data가 들어있는 배열을 내가 원하는 형태로 불러오고, 해당 데이터를 react에 넣어서 자유게시판 목록페이지를 구현했다. - mutation 메소드를 사용한 뒤 refetch를 이용해 API 데이터를 다시 불러오는 방법을 배웠다. refetch를 해줘야 수정된 데이터가 페이지에 실시간으로 반영된다. - Next.js의 라우터를 이용하여 현재까지 만든 상세페이지, 목록페이지, 글쓰기 페이지를 상호 연결했다. 이게 뭐라고 굉장히 뿌듯하네.. 아직은 하드코딩된 부분이 많지만 차근차근 기능들을 구현해나가고 싶다. - 목록 페이지를 table 로 코딩할까 하다가.. 반응형으로 옮길때 영 구렸다는게 생각나서 flex로 바꿨다. 원래는 웹표준과 ..

TIL - 2022.01.17 월요일

오늘 배운 것 - 오늘은 컴포넌트를 활용해 소스코드를 분리해서 폴더 구조를 정리하고, props를 통해 각각의 컴포넌트간에 정보를 전달하는 방법을 배웠다. 그리고 배운 내용을 활용해서 자유게시판 소스코드를 컴포넌트로 쪼갰다. - 컴포넌트, state, props가 리액트의 핵심이라는 이야기를 몇차례 들었기 때문에 컴포넌트 구조에 대해 내 나름 상상하는 바가 있었다. 나는 컴포넌트로 웹페이지의 시각적인 요소들만 분리해서 사용한다고 생각했다. 모든 페이지에 공통으로 들어가는 네비게이터, 메인 배너, 자주 사용하는 유닛(button, input, span) 등을 미리만들어놓고 import 하는 방식을 상상했던 것. 그런데 실제로 배워보니 시각적인 요소 뿐 아니라 기능적인 요소까지 모두 분리해서 정리하는 방식이..

TIL - 2022.01.15 토요일

오늘 배운 것 - Oh .... git pull을 잘못 해서 오늘 작업한 분량이 다 날아갔다.. - 원래 주말에는 TIL을 쓰지 않으려고 했는데 영혼에 깊은 상처를 받아서,, 또 이런일이 발생하지 않도록 기록하러 옴- git push / pull 할 때는 항상 신중하자 ,,, 특히나 master 브랜치에서 바로 작업하고 있을 경우에는 더더욱.. 어디부터 어디까지 날아간건지 감도 안온다. 마지막 커밋 상태랑 비교하며 수동 업데이트 해야 할 듯. ㅎㅎ. - 헐.. 확인해보니 금요일에 수업 듣고 기록해둔 내용도 다 날아갔다. 5일차 quiz도 날아감 실화냐? 앞으로 할 것 이런 실수는 두 번 다시 하지 않기 폴더 원상복구하기 (가능할까 ?) 후기 수업때 실습했던 코드까지 다 날아갔는데, 다솔님이 공유해주신 덕..