본문 바로가기

Life/TIL

 (239)
20200915 T.I.L 16일 오전에 적는 15일의 til.... 이 아니라 yil(yesterday i learned)이다. 어제는 진짜 하루 종일 git과의 고군분투를 마치고 til을 작성해야 한다는 생각조차 그냥 잊어버렸다... 어떻게 이럴 수 있지;;; 그리고 오늘 지금 이 순간까지 내가 글을 작성하지 않았다는 사실조차 몰랐다 ㅎㅎㅎ;;;; 갑자기 깨닫고 내가 어제 뭐했는지 잊어버리기 전에 얼른 올려버리기로 했다. 어제 한 일 git 관리에 대해 많은것을 배웠다. 아무리 문서를 보고 따라 하고 또 해보고 또! 해봐도 점점 미궁 속으로 빠지고 잘 작동되지는 않고 해서 결국 코드 숨 윤석 트레이너님께 도움을 요청했다. 하나부터 끝까지 차근히 설명해주셔서 감사합니다ㅜㅜㅜ 어제(오늘로부터는 그제) 하루 종일 했던 시도는 for..
20200914 T.I.L 오늘 한 일 오늘은 듣던 리액트 인강을 계속해서 듣고 코드 숨을 시작하는 날이라 깃 헙에도 초대되고 강의와 과제도 받았다. 리액트 인강은 간단한 유튜브 클론 페이지를 만드는 거였는데 진짜 리액트로 기능을 다 구현해내고 하는 게 신기해서 재밌었다. 이건 간단하게 만든 거지만 나중에는 완전한 유튜브 클론을 만드는 게 가능할 거 같은 느낌이 든다. 하지만 아직 이 강의에서는 최적화를 시키는 부분은 나오지 않아서 영상 정보 하나를 클릭하거나 검색어를 치는 그 순간에도 렌더링이 돌아가서 그 부분은 약간 거슬리는 부분이다. 간단한 동영상 플레이어 강의가 끝나고 다음은 hooks를 사용하는 법에 대한 강의가 시작되었는데 보통 한 파트가 짧으면 30분인데 이번 파트는 무려 4시간이 넘는다.... ㄷㄷㄷ 할수있다! 생각..
20200913 T.I.L 오늘 한 일 드디어 리액트를 이용해서 제대로 된(?) 미니 프로젝트를 하나 시작한 느낌이다. 단어를 검색하면 검색한 단어의 이미지들을 리스크 업해서 화면에 보여주는 페이지를 만들었다. Unsplash API를 이용해서 정보들을 얻어왔다. 마치 서버에서 정보를 얻어오듯 api를 이용해서 데이터를 얻어오는 게 정말 신기하다. 저번에 20개의 바닐라 자바스크립트 프로젝트에서는 fetch를 사용해서 데이터를 받아왔는데 여기서는 axios를 이용해서 뭔가 새로웠다. fetch를 사용하면 뭔가 더 복잡하고 간결해지지 않는다고 해서 axios를 쓴다고 했는데 내가 fetch를 깊게 공부하지 않아서 그런가;;; 사실 별로 차이점을 느끼지는 못하겠다. 그리고 내가 사실 css에서 flex는 정말 많이 써봐서 이제는 그냥..
20200912 T.I.L 오늘 한 일 리액트 인강을 계속해서 듣고 있다. 이 인강에서도 앞전에 들었던 인강과 같이 컴포넌트를 만들 때 class로 만드는 것과 함수를 선언해서 만드는 두 가지 방법을 모두 잘 알고 있어야 한다고 강조하고 있다. 실제로 예시를 들어주면서 class와 함수 컴포넌트 두 가지가 굉장히 많이 혼용이 되어 사용되고 있다는 것도 보여주었다. 또 리덕스를 배울 때 class컴포넌트를 모르는 상태로 배우게 되면 많은 어려움이 있기 때문에 두 가지를 모두 잘 알아야 한다. 그래서 class로 컴포넌트를 만드는 것에 대해 먼저 차근히 배우기 시작했다. 이미 아는 내용이라 진도가 조금 느린감은 없지 않지만 앞전 강의보다 하나하나 차근히 이게 어디에 쓰이고 왜 쓰이는지에 대해 짚고 넘어간다는 점이 좋았다. props의..
20200911 T.I.L 오늘 한 일 유데미에서 예전에 구매해 두었던 리액트 강의를 처음부터 듣기 시작했다. 아직까지 초반 내용을 듣고 있는데 초반 내용은 내가 이미 배웠던 내용이랑 거의 같아서 금방금방 쉽게 넘어갈 수 있는 부분이었는데 후반에 라우터나 리 덕트를 다루는 부분이 추가로 있기도 하고 이 강의는 영어강의라 영어로 강의를 들으면서 용어나 그런 것들에 있어서 익숙해지지 않을까 하는 생각에 듣기를 시작했다. 쉽게 쉽게 강의를 넘어가고는 있는데 신기했던 건 create-react-app을 사용하는 점이었다. 완전 신세계다. 따로 많이 깔아주지 않아도 되고 자동적으로. gitignore까지 만들어주어 정말 꿀 같달까 ㅎㅎㅎ(사실 웹팩을 스스로 빌드업할 때 이 부분을 어떻게 처리할지 몰라 커밋할 때마다 애먹었는데 보고. git..
20200910 T.I.L 오늘 한 일 useContext와 useReducer를 이용해서 지뢰 찾기 게임을 완성했다. 빈칸을 클릭하면 주변 위아래 세칸 양옆 두 칸을 모두 확인해서 클릭된 칸의 주위에 지뢰가 몇 개 있는지 표시해주고 또 내가 클릭한칸의 주변에 아무 지뢰도 없다면 지뢰가 있는 칸 전 영역까지 클릭해주는 함수를 만들어 적용시켜줬고 게임을 시작할 때 타이머도 함께 시작되도록 setInterval을 이용해 만들어줬다. 또 클릭해서 오픈 한 칸들이 전체 칸수에서 지뢰의 수를 뺀 수와 같다면(지뢰를 모두 찾았다면) 우승했다는 문구와 함께 타이머도 종료시키고 몇초의 시간만에 우승했는지도 문구에 포함시켜주었다. 마지막으로 리액트의 성능 최적화를 위해 React.memo와 useMemo를 사용해서 불필요한 렌더링을 없애주었다. ..
20200909 T.I.L 오늘 한 일 createContex와 useContext를 이용해서 자손 컴포넌트들에게 데이터를 물려주기를 해서 지뢰 찾기를 만들고 있다. 이제 useState, memo, useMemo는 자주 써봐서 익숙한데 useReducer은 아직은 완전히 손에 익지는 않았다. 그래도 이제 reducer로 state들을 조정해주는구나 하고 감은 잡았다. 지뢰 찾기에서는 컴포넌트에 데이터를 바로 물려주기도 함께 사용했는데 바로 물려주는 것과 다르게 useContext는 손주나 증손주같이 먼 자손에게 전해줄 때 사용하기에 용이한 것 같다. 오늘 목표한 바와 다르게 공부를 많이 하지 못해서 지뢰 찾기를 완성하지 못했지만ㅜㅜㅜ 내일은 마음을 잘 잡아서 완성도 하고 이 이후에 목표했던 대로 리액트를 더 심화해서 공부하는 것..
20200908 T.I.L 오늘 한 일 사실 오늘의 최대 목표는 욕심을 좀 부려서 남은 세 가지의 프로젝트 인강을 모두 듣고 해 보는 것이었다. 하지만 두 번째 프로젝트에서 useReducer 쓰는 법이 나에게 이해하기가 좀 어려워서 진도가 좀처럼 안 나갔다 ㅜㅜㅜ 결국 두 번째 프로젝트의 최적화만 남기고 모두 완성했는데 사실 아직도 감이 완전히는 안 잡힌다. 다시 보고 다시 보고하면서 조금씩 조금씩은 감이 오는 것 같은데 이건 리액트 공부 시작하고 웹팩 빌드업에 이은 두 번째 고비인 듯하다 ㅜㅜㅜ. 그래도 웹팩처럼 두세 번 더 해보고 익숙해질 때까지 해보면 괜찮아지지 않을까? 이 뒤에 useContext 쓰는 법도 남았는데 쪼금 두렵다 ㅎㅎㅎ 결국 목표했던 내일까지 인강을 완강하기로 하고 내일은 오늘 공부했던 내용을 복습하는 것..

티스토리툴바