본문 바로가기

Life

 (242)
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 쓰는 법도 남았는데 쪼금 두렵다 ㅎㅎㅎ 결국 목표했던 내일까지 인강을 완강하기로 하고 내일은 오늘 공부했던 내용을 복습하는 것..
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 오늘 한 일 드디어 시몬스 페이지를 완성했다!!!!! 만세 만세! 스크롤해서 마지막 더보기 영역이랑 푸터영역까지 보이게 만들고 반응형 페이지로 모바일 환경과 태블릿 환경에서도 자연스러워 보이게끔 완성시켰다. 너무 뿌듯하다. 마지막에는 오류까지 잘 수정하고 자잘한 메뉴 부분까지 신경 써서 각자 기능을 부여해 줬다. 예상 일보다 삼일은 더 걸렸지만 제대로 멋있는 페이지를 잘 완성하게 되어 기쁘다. 한 가지 아쉬운 점이 있다면 마지막 더보기 부분과 푸터부분으로 넘어갈 때 스크롤을 단계별로 천천히 조심스럽게 해주지 않으면 둘 다 한꺼번에 쉽게 열리고 쉽게 닫힌다. 닫히는 것보다 열리는 게 더 쉽게 되긴 하지만 아무튼 이 부분을 마우스 휠로 조정을 해주려고 노력했는데 되지가 않았다 ㅜㅜㅜㅜ. 어떻게 하는 건지 도..

티스토리툴바