time to wander

Today I Learned 오늘은 리덕스와 서버리스 인증 서비스를 이용하여 회원가입과 로그인, 로그아웃을 구현하는 강의를 들었다. 말 그대로 강의를 들었을 뿐, 내 것으로 완전히 체화하지는 못 한 것 같다. 강의 중간 중간에 멘토님이 "생각보다 어렵지 않죠?" 라는 말을 많이 하시는데 아니요??? 라고 육성으로 대답할 뻔 했다. 그래도 1주차 미니 프로젝트 때 궁금했던 것들이 대부분 해소된 하루이기도 했다. 1주차 미니 프로젝트에서 내가 회원가입과 로그인 기능을 담당하지는 않았지만 메인 페이지를 담당했기 때문에 로그인 상태와 로그아웃 상태를 확인해야 하는 기능들이 있었고, 구현은 어찌저찌 했지만 로직을 제대로 이해하지 못 했거나 결국 구현하지 못한 기능들도 있었다. (또르륵...) 1주차에도 JWT 방..

Today I Learned 오늘부터 React 심화 주차가 시작되었다! 이번 주에는 개인 과제를 순한맛ver 과 매운맛ver 중에서 선택할 수 있는데 나에게는 순한맛도 어려워 보여서 순한맛으로 선택했다. 역시 예상을 벗어나지 않고 1주차 강의부터 헷갈리기 시작했다. 컴포넌트를 최소단위로 쪼개는 거나 props로 보내는 inline style 속성의 기준이 잘 서지 않아서 어려웠다. 1주차 강의를 듣는 데 하루 종일 걸려서 이번 주도 쉽지 않겠지만 그래도 개인 과제를 잘 마무리하면 로그인, 회원가입, 무한 스크롤, 댓글 등 다양한 기능들을 구현해 볼 수 있게 되니 이번 한 주도 열심히 해서 꼭 만족스럽게 개인 과제를 끝내고 싶다.

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 개인 과제의 필수 요구사항에 대해서는 구현을 모두 완료했다. 사실 수정하기와 삭제하기는 필수 요구..