본문 바로가기

Life/TIL

 (239)
20200907 T.I.L 오늘 한 일 어제에 이어 useRef와 createRef를 사용하는 법과 미니 프로젝트로 반응속도 체크와 가위바위보를 만들어 보았다. 이제 오늘까지 웹팩 빌드업을 직접 해보니까 점점 익숙해져서 속도도 빨라지고 전에 어떻게 했었는지 보지 않아도 순서대로 착착할 수 있는 경지에 오른 것 같다. 내일 진도를 많이 나가고 모레에는 무언가 새로운 단계로 나아가거나 블로그 정리를 할 수도 있을 거 같아서 기대가 된다. 리액트를 배우다 보니 확실히 자바스크립트를 기반으로 한 문법들이 많아서 (class를 사용하는 것부터가 그렇다) 내가 자바스크립트에 대한 지식이 완벽한 건 아니지만 그래도 이 정도 지식이 없었다면 따라가기가 매무 버겁지 않았을까 하는 생각이 든다. 클로져 문제라던지 하는 자바스크립트 문법의 문제들이 ..
20100906 T.I.L 오늘 한 일 어제에 이어서 숫자야구를 완성했다. 다시 처음부터 차근히 하나식 점검해보면서 써보니 뭐가 문제인지 알았다. 내가 웹팩 데브 서버로 가상 서버를 돌리고 있어서 e.preventDefault()를 해주지 않아도 문제없이 작동되는데 그걸 간과하고 계속 실행이 안돼서 어리둥절만 하고 있었던 것이다. 지우고 코드를 적어주니 문제없이 작동이 잘 됐다. 그것을 해결하고 훅스로 전환하는 것도 해보고 불필요한 렌더링이 자꾸 되는 것을 방지하기 위해 pureComponent 혹은 hooks에서는 React.memo를 사용해 주어서 최적화시켜주어야 한다는 점도 공부했다. 오늘은 일요일이라 가볍게 공부하는 날이었지만 중요한 것을 배운 느낌이었다. 일단 앞으로 내일부터 월화수 삼일 동안은 리액트 강의 완강을 목표로..
20200905 T.I.L 오늘 한 일 리액트를 계속해서 배우고 있다. 숫자야구 페이지 만들기를 하고 있는데 웹팩까지 처음부터 빌드하려니 어렵고 헷갈리기도 한다. 그래도 차근차근히 코스를 다 밟았는데 웬걸... 뭔가 마지막에 맞지가 않아서 자꾸 꼬인다. 으으으 결국 오늘 12시 안에는 완성이 안될 거 같아서 아쉽다. ㅜㅜㅜ 항상 너무 가벼운 커밋은 하지 않으려고 애쓰는데 그 덕분인가 오늘은 결국 커밋이 하나다... 완전 굴욕.. 이게 커밋 수가 중요한 건 아니지만 잔디가 무성했으면 좋겠는 마음에 아쉽다 ㅜㅜㅜ. 몇 번을 처음부터 차근히 하고 있는데 또다시 차근히 새로 코드를 짜 봐야겠다. ㅜㅜ
20200904 T.I.L 오늘 한 일 드디어 리액트 공부에 돌입했다. 인프런에서 제로초님이 하시는 강의를 듣고 있는데 처음에 뭔가 복잡해 보이고 어려워 보여 더 쉽게 설명해주시는 분을 찾아봤으나 역시 나는 친절한 설명보다 복잡하고 어려워 보이는 설면을 이해하고 헤쳐나가는 게 더 흥미 있는지 다른 강의들을 둘러보다가 다시 돌아왔다. 처음에 웹팩을 세팅하는 부분이 어려워서 좀 겁이 났던 거 같은데 그래도 이 부분을 리액트 앱(?)으로 쉽게 넘어가기보다 이렇게 원리에 대해 제대로 알고 가는 게 도움이 더 될 거 같다. 앞으로 프로젝트를 짤 때마다 열심히 웹팩과 더 친해져 봐야겠다. 앞으로 한 달간은 리액트에 매진할 예정이다. 한 달간 리액트에만 폭 빠져서 기본을 잘 닦은 다음 다름 한 달은 리액트를 더 공부할지 아니면 더 나아갈지를 ..
20200903 T.I.L 오늘 한 일 드디어 시몬스 페이지를 완성했다!!!!! 만세 만세! 스크롤해서 마지막 더보기 영역이랑 푸터영역까지 보이게 만들고 반응형 페이지로 모바일 환경과 태블릿 환경에서도 자연스러워 보이게끔 완성시켰다. 너무 뿌듯하다. 마지막에는 오류까지 잘 수정하고 자잘한 메뉴 부분까지 신경 써서 각자 기능을 부여해 줬다. 예상 일보다 삼일은 더 걸렸지만 제대로 멋있는 페이지를 잘 완성하게 되어 기쁘다. 한 가지 아쉬운 점이 있다면 마지막 더보기 부분과 푸터부분으로 넘어갈 때 스크롤을 단계별로 천천히 조심스럽게 해주지 않으면 둘 다 한꺼번에 쉽게 열리고 쉽게 닫힌다. 닫히는 것보다 열리는 게 더 쉽게 되긴 하지만 아무튼 이 부분을 마우스 휠로 조정을 해주려고 노력했는데 되지가 않았다 ㅜㅜㅜㅜ. 어떻게 하는 건지 도..
20200902 T.I.L 오늘 한 일 오늘도 시몬스 페이지와 함께 고군분투의 날이었다. 중간에 포기하고 싶은 순간이 어찌나 많던지;;;; 와우;;;; 역시 하나의 페이지를 완성하는 건 쉬운 일이 아닌 것 같다. 결국 푸터 부분만 빼고 다 완성을 했다. 사실 푸터 부분도 스크롤했을 때 애니메이션이 동작하게 하는 것만 해결하면 완성이라 다 완성을 하고 이제 버그를 잡는 것과 모바일 환경에서도 어색하지 않게 돌아가도록 만들어 줄 일만 남았다(만드는 동안 완성한 부분들에 생각지도 못한 버그들이 계속 생긴다.. ㅎㅎㅎ 이게 무슨일이람;;). 저번에 66 days 만들 때는 반응형이고 뭐고 아무것도 몰라서 모바일로 들어가면 막 다 깨지고 그래서 별로였는데 이제는 어떻게 조정을 해야 할 줄 안다는 게 감격스럽다. 내일 안에 완성할 수 있을지..
20200901 T.I.L 오늘 한 일 시몬스 페이지의 스크롤 섹션 3번의 중간까지 완성했다. 첫 섹션에서 동영상을 넘어가면서 텍스트 색이 점점 하양에서 검정으로 넘어가는 게 제일 깨기 힘든 관문이었다 ㅠㅠㅠ 어제도 고민하고 오늘도 고민하고 이건 어디서 배운 게 아니라서 열심히 서칭도 해봤는데 물론 서칭 해서 나올만한 게 아니라 나오질 않았다 ㅜㅜㅜ 그래도 결국 해 내고야 말아서 정말 다행이다. 안 그랬으면 진도도 안 나가고 오늘 3번 섹션에는 접근도 못했을 거다. 다섯 개의 섹션 중에서 세 개째의 중간을 하고 있고 네 번째 섹션은 나름 어렵지 않은 구간이라 많이 완성이 된 것 같지만 이렇게 많은 섹션을 완성하다 보니 이제 첫 번째 섹션까지도 버그가 생겼다;;;; 세 번째에 집중하다 보니 오늘 할 분량을 끝내고서야 발견해서 왜 이..
20200831 T.I.L 오늘 한 일 이제 본격적으로 시몬스 웹페이지 작업을 시작했다. 메인 스크롤 영역의 css를 완성하고 양 옆 사이드 메뉴를 버튼을 누르면 들어오고 나오게 만들었는데 그 후에 기본 css를 모바일 우선으로 만들고 정작 웹페이지로 변환시키거나 하지는 않았다는 걸 깨달아서 다시 작업하기 시작했다. 그렇게 웹페이지용으로 만들고 난 후 이제 자바스크립트로 스크롤 영역을 크기에 맞게 늘려주니 또 css가 너무 거슬리게 못생겨서 다시 작업을 해주었다ㅜㅜ;;; css에서 이렇게 많은 시간을 소요해야 한다는 게 힘들기도 했다. 그리고 다시 제대로 첫 크스롤 영역부터 스크롤 반응형 요소들 작업을 해주니 머리가 정말 터질 거 같았다. 코로나 때문에 강제로 집에서 공부하기 시작해서 가뜩이나 집중도 안되는데 이게 연습했던 것 못..

티스토리툴바