time to wander

일주일 동안 무엇을 했나? 📍 리액트 심화 과제 이번 주는 항해의 5주차로, 리액트에 대해서 더 깊게 배우는 주차이기도 했다. 여느 주차와 마찬가지로 개인 과제가 주어졌는데, 이번 과제에서 필수로 요구되는 대부분의 사항들이 개인적으로 나에게는 모든 게 어렵게 느껴졌다. 필수로 구현해야 하는 기능은 아래와 같다. 1. 게시글 목록 가져오기 - 무한 스크롤 - 게시글 하나에 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성 - 게시글 하나 클릭 시 게시글 상세 페이지로 이동 - 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출 - 게시글 중 하트 버튼을 클릭하면 하트 색이 바뀌면서 좋아요 개수가 +1, 다시 클릭하면 하트가 다시 회색이 되면서 좋아요가 -1 되도록 구현 추가하기 (+이미지..

Today I Learned 를 가장한 Yesterday I Learned 오늘도 개인 과제만 했다! 무한스크롤, 좋아요 기능, 레이아웃 선택 등 구현해야 하는 것들이 여러가지 남아있었지만, 그중에서도 삭제 기능은 저번 주 과제할 때 추가로 넣었던 기능이라 금방 끝날 줄 알고 포스트 삭제를 먼저 구현하기 시작했다. 👩🏻‍🌾 오늘의 수확 📍 포스트 삭제 버그 해결 처음 코드를 작성해 나가는 데는 큰 어려움은 없었지만 다 작성하고 확인해 보니 두 가지 문제가 발생하고 있음을 발견했다. 1) 삭제 버튼을 누르면 포스트는 그대로 남고 이미지만 사라지는 문제 이번 주에는 포스트에는 이미지를 업로드 할 수 있어 Firebase의 Firestore 뿐만 아니라 Storage 도 함께 이용하여 업로드한 이미지는 Sto..

Today I Learned 오늘은 포스트를 작성해서 데이터를 리덕스와 파이어스토어에 연결하고, 목록에 생성된 포스트를 수정하는 방법에 대해서 배웠다. 이미지가 포함된 포스트이기 때문에 처음으로 input 태그의 file 타입도 사용해보았다. 어제 로그인과 회원가입을 구현하는 것 자체도 어려웠는데 오늘 배운 게시글을 작성하거나 수정하는 것들도 로그인 상태와 관련이 있다보니 100% 이해하기 어려웠다. 그리고 게시글을 작성하는 과정에서 이미지를 미리 보여주는 작업과 게시글을 수정하는 작업도 신경써야 하는 부분이 많다는 걸 다시 한번 느꼈다. 👩🏻‍🌾 오늘의 수확 📍 로그인 상태 체크 쿠키를 설정하고 삭제함으로써 로그인 상태를 체크한 후, 그에 따라 로그인 상태에 따라 유연하게 작동하는 기능들을 작업할 수 ..

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

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

React key 🔑 React에서 key의 역할 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도우며, 배열의 element에 고유성을 부여하기 위해 배열 내부의 eliment에 key를 지정한다. key는 문자열을 사용하는 것이 좋으며 대부분의 경우 ID를 key로 사용하지만 안정적인 ID가 없다면 최후의 수단으로 각 element의 index를 key로 사용할 수 있다. const todoItems = todos.map((todo) => {todo.text} ); 🔑 React에서 key를 사용해야 하는 이유 효율적인 DOM 트리 구조 구축 및 렌더링 성능을 위해 💡 React의 가상 DOM 트리 비교 알고리즘은 아래의 두 가지 가정을 기반으로 한다. 📌 서로 다른 타입..