Journal

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도 날아감 실화냐? 앞으로 할 것 이런 실수는 두 번 다시 하지 않기 폴더 원상복구하기 (가능할까 ?) 후기 수업때 실습했던 코드까지 다 날아갔는데, 다솔님이 공유해주신 덕..

TIL - 2022.01.14 금요일

오늘 배운 것 - 어제 과제를 오전에 조금 더 손본 뒤 제출 완료했다. 게시물 등록 API와 state를 활용해서 자유게시판 폼에 내용을 입력하고 등록을 누르면 데이터가 전송되도록 하는 작업까지 끝났다. 라이브 서버에서 확인 후 Playground에 접속해서 API에 들어간 것 까지 확인하였다. state와 GraphQL-API 사용을 계속 반복했더니 이제 조금 손에 익는 것 같다. 역시 반복 학습만이 살 길이다. - GraphQL 활용 실습 퀴즈를 풀었는데 이유를 모르는 구문 오류가 발생해서 한시간 정도 틀린그림찾기만 했다. 알고 보니 Int로 가야하는 Value가 String으로 전송되어 발생한 문제더라. 이렇게 간단한 걸 놓치다니. 해결한 뒤 조금 허무했지만 그래도 문제의 원인을 스스로 찾아냈다는 ..

위국일기 - 야마시타 토모코

지난 주말에 코로나 3차 백신을 맞은 뒤 열이 올라 움직일 수 없는 상태에서 충동적으로 보기 시작한 만화다. 야마시타 토모코의 만화 중 처음으로 제대로 읽은 작품. 왜 그렇게 갑자기 읽기 시작했냐면.. 이 장면 때문에. (무려 이 장면이 뒷표지에 들어가있다. 대원씨아이 영업 잘한다.) 작품 소개 소설가 코다이 마키오(35)는 언니 부부의 장례식에서 고아가 된 언니의 딸 아사(15)를 친척들이 서로 떠넘기는 것을 보고, 발끈하여 충동적으로 자신이 맡겠다고 나선다. 그러나 바로 다음 날, 아침에 눈을 뜨자마자 타고난 극도의 낯가림이 발동! 타인과 함께 생활하는 걸 불편해하는 자신의 성격을 그만 깜빡했던 것이었다…. 반면, 아사는 낯가림은커녕 ‘어른답지 않은 어른’ 마키오와의 생활을 아무 거리낌 없이 자연스레..

TIL - 2022.01.13 목요일

오늘의 TIL을 쓰기에 앞서 - TIL을 잘 쓰는 방법에 대해 고민중이다. 여기서 '잘 쓴 TIL'이라는 것은 쓰는 내 입장에서도, 그리고 읽는 사람들의 입장에서도 무의미한 정보값이 적고 잘 읽히는 글을 뜻한다. 더불어 단순 정보의 나열이기보다는 그 날의 공부를 통해 내가 구체적으로 무엇을 배웠는지 기록하는 일지였으면 좋겠다. 그래서 몇가지 나만의 TIL 룰을 정했다. - 개발 자료 부분에 별도로 포스팅 한 내용은 TIL에 중복 게시하지 말 것. (언급이나 서술은 ok, 똑같은 정보값의 무의미한 중복을 최대한 피하자는 뜻) - 나를 전혀 모르는 사람이 봐도 무슨 말인지 이해할 수 있도록 쓴다. - 정확하게 이해하지 않은 단어의 사용은 최대한 지양한다. - 무의미한 반성은 지양하고 개선과 학습을 위해 쓴다..

TIL - 2022.01.12 수요일

오늘 배운 것 오늘은 HTTP의 개념과 API를 배웠다. (+ Json과 CRUD도) 그리고 Rest API vs GraphQL 의 차이를 배우고 기본 방식을 연습했다. 오늘은 단순 개념 정리가 많아서 요약노트같은 TIL이 될 듯. 1. HTTP와 API HTTP란? HTTP는 두 컴퓨터간의 데이터 전송을 담당하는 일종의 길이다. 우리의 경우, 프론트엔드와 백엔드 사이를 연결하는 데이터들의 길이라고 생각하면 쉽다. HTTP의 규칙 요청을 해야 그에 대한 응답을 보내준다. (요청과 응답 / Request & Response) 응답을 줄 때에는 숫자를 같이 보낸다. 이것을 응답 상태코드라고 한다. 이 상태코드에는 일정한 규약이 있다. 자주 볼 수 있는 응답 상태코드에는 성공(200), Front-end 에러..

TIL - 2022.01.11 화요일

오늘 한 일 오늘 하루는 내내 '리액트 진짜 좋은데?' 의 반복이었다. 컴포넌트 구조와 state는 정말 정말 정~말 충격적일만큼 편리하다! 세상에 이런 게 있었다니. 내가 원시시대 코드를 짜는 회사에서 일을 하다 와서 더 큰 갭을 느끼는걸지도 모른다. (옛 방식 javascript와 jQuery 퍼블리싱, php 코딩 쪼끔 했다) 회사 다니던 당시에도 '우리 회사 코드 너무 구린데..' 라고 생각했지만, 나와서 공부하면서 돌이켜보니 뭔, 10년도 더 전에 쓰던 방식으로 코드를 짜고 있으니.. 할 말은 많지만 별 의미 없으니 길게 하지 않겠다. 그저 퇴사해서 다행이다. 그리고 구시대 코딩을 경험한 덕분에 공부가 재밌다. 혼자 시간여행하는 기분이다. 1. 리액트의 핵심, Component Component..