time to wander

👩🏻‍💻 회고 React 숙련 주차인 4주차가 끝이 났다. 이번 주도 기초 주차와 마찬 가지로 페이지를 만들어야 하는 개인 과제와 주어진 질문에 대한 답변과 키워드를 정해서 조사하는 팀 과제가 함께 주어졌으며, 개인 과제와 팀 과제 모두 토요일이 되어서야 제출할 수 있었다. My own Voca 웹 http://myownvoca.s3-website.ap-northeast-2.amazonaws.com/#/ My own Voca 블로그 포스트 https://zubetcha.tistory.com/entry/%EC%9E%91%EC%86%8C%ED%8E%98-My-own-Voca?category=1006427 항해를 시작한 이래 처음으로 난항 아닌 난항을 경험했다. 나도 개인적으로 항해의 커리큘럼이 프로그래밍을 ..

Today I Learned 진짜 최종 파이널 개인 과제를 마쳤다. 배포하고 보니 규격이 마음에 안 드는 곳이나, 모바일로 볼 때 버튼이 불편해 보인다던가 하는 문제들이 있었고, 그 외에도 버그들이 몇 개 발견돼서 토요일 오후까지 수정에 수정을 거듭했다. 📌 개인 과제 - 리프레시 했을 때 404 NoSuchKey 에러 발생 단어를 추가하거나 수정하는 페이지에서 새로고침을 하면 404 NoSuchKey 에러가 발생했다. 로컬 호스트에서는 문제가 없었는데 배포 후 확인하면 에러가 발생했다. 찾아보니 s3 버킷에서 호스팅 설정할 때 오류 발생 시 반환할 문서를 지정해주면 해결되는 간단한 문제였다. 📌 개인 과제 - 최신순으로 새로운 단어 카드 생성 단어를 추가하면 새로운 카드가 제일 앞에 붙도록 수정했다. ..

Today I Learned 🎉 개인 과제 끝! 🎉 📌 단어 카드 체크 아이콘 클릭 시 색 변경 기능 오류 해결 어제 만들었던 checked 기능이 알고 보니 제대로 동작하지 않고 있었다. 원래는 클릭하면 Firestore에 있는 checked 의 값이 변경이 되고, 변경된 데이터로 다시 State를 교체해서 데이터를 구독하는 컴포넌트에도 연동이 되어야 하는데 알고보니 미들웨어 코드를 잘못 작성해서 클릭했을 때 Firestore의 checked 값이 변경되지 않고 있었다. 그래서 체크 아이콘을 클릭해서 색을 변하게 한 후 새로고침하거나 다른 페이지로 이동하고 다시 돌아오면 다시 checked의 값이 false로 바뀌고, 아이콘도 다시 흰 색으로 되어 있었다. 알고보니 미들웨어 함수에서 checked 키의..

Today I learned 오늘은 한 게 개인과제밖에 없다. (파워당당) 근데 개인과제를 하루종일 했다! 필수로 넣어야 하는 요구사항 + 카드 수정하기, 삭제하기 구현은 어제 끝나서 오늘 자잘구리한 기능이랑 CSS만 하면 됐는데, CSS가 오래 걸렸다. CSS는 하면 할수록 어려운 것 같다. 오늘은 과제에서 아래의 것들을 적용했다. 📌 카드에서 체크 아이콘을 클릭하면 해당 카드 데이터의 checked가 false에서 true로 업데이트되면서 아이콘의 색이 변하도록 하였다. 아이콘의 색이 유색인 상태에서 다시 체크 아이콘을 클릭하면 데이터의 checked는 다시 true에서 false로 바뀌며, 아이콘의 색도 다시 흰 색으로 돌아온다. 📌 카드 위에 마우스를 올리면 해당 카드의 단어에 언더라인이 생기면서..

Today I learned 📌 HTML, CSS HTML에서 태그와 태그에 대해서 공부했다. 지금까지는 사용할 일이 많이 없었어서 잘 몰랐는데 MDN 문서와 블로그 글들을 찾아 보니 다양하게 사용이 되고 있는 듯 했다. CSS에서는 display 속성인 grid 와 flex에 대해서 공부했다. 개인 과제 뼈대를 잡는데 flex로는 내 의도대로 레이아웃이 잡히지 않아서 결국 grid로 수정했다. 📌 인프런 자바스크립트 문법 강의 object 오브젝트와 디스크립터 프로퍼티에 대해서 배웠다. 하지만 여전히 오브젝트는 잘 모르겠는 걸....? 📌 React 숙련 주차 개인 과제 기능 구현 완료 이번 주 React 개인 과제의 필수 요구사항에 대해서는 구현을 모두 완료했다. 사실 수정하기와 삭제하기는 필수 요구..

React Hooks Hook 이란? 함수형 컴포넌트에서 state와 라이플사이클 메소드를 연동할 수 있게 해주는 함수이다. React v16.8 부터 도입된 새로운 기술으로, 함수형 컴포넌트에서 상태 관리를 포함한 다양한 기능을 제공하여 개발자들이 다양한 프로덕트들을 작업할 수 있도록 도와준다. Hook을 도입한 이유 Hook은 개발자들이 React로 컴포넌트를 작성하고 유지하는 동안 당면한 문제들을 해결하기 위해 도입되었다 Hook이 도입되기 전에는.. 📍 컴포넌트들 사이에서 상태 로직을 재사용하기 어려웠다. Hook을 사용하면 컴포넌트로부터 상태 로지을 추상화할 수 있고 이를 이용해서 계층의 변화 없이 독립적인 테스트와 재사용이 가능하다. 📍 복잡한 컴포넌트들을 이해하기 어려웠다. 관리하기 힘든 상..