[개인 Project] My To-do List 페이지 만들기 _ 간단한 회고

240123 TIL ✍

 

간단한 디자인에, 기능 구현도 제대로 다 하지 못했다 ㅠ_ㅠ

React 기초과정 강좌를 듣고나서, my to-do list 페이지를 만들어보는 개인 프로젝트를 진행했다. 하지만 시간도 부족했고 내 이해 부족으로..?! 완료/완료취소 버튼의 기능 (완료 <-> 진행중 상태 변경) 은 시도해보다가, 결국 완전히 구현하지는 못한 채 과제를 제출했다. (+ id도 중복 가능성있게 설정했다거나 등의 문제도 많았다) 

답안 설명을 보니, 원래의 추가하기 버튼에서 좀 더 생각해보면 답이 나왔을 것도 같다는 아쉬움이 있었다.

하지만 아직까진 props 활용과 component 분리, state 활용 등 실제로 프로젝트를 만들어보면서 헷갈리는 점과 의문점이 정말 많았기에.. 내게는 절대 수월하지 않았다. 😵

이번 프로젝트를 통해 한 것은, 크게 다음과 같다.

• 컴포넌트 분리, props, state 활용해서 렌더링하기
• map, filter 와 같은 JS 내장 메서드 활용
• vercel을 통한 react 페이지 배포
• 그 외 간단한 css (이번에는 props를 활용하면서 css를 다뤄보니 더 헷갈렸다. jsx문법에서의 styling도 은근 달라서)

vercel 배포는 검색을 통해, 다른 블로그를 참고해서 처음으로 해보았다. vercel 사이트는 React 프로젝트의 사이트 배포를 가능하게 해주는 데, 사이트 회원가입 후 가능하다.

 

 

📢 KPT 회고

Keep : 좋았던 점

• 강의를 듣느라 프로젝트 진행 시 시간이 부족했지만, 잠이라도 줄여가며 완성하고자 했던 점 (물론 꼭 잠을 줄여야 하는건 아니지만..)
• 익숙치않은 개념이었지만, useState hook이나 map 및 filter 메서드, props 등 배운 개념을 최대한 복습해가며 활용한 점
• css에서는 배웠던 걸 나름 활용한 점 (flex, hover기능, 글자간격 등)
• 이해가 안되고 헷갈리는 점은 구글링 검색 등 해가면서 정보를 많이 얻고 적용해 본 점

Problem : 아쉬웠던 점

• 막혔을 때 혼자 고민을 오래 해보는 것은 좋지만, 팀원들이나 튜터님들께 약간의 도움을 받고 힌트라도 얻는 것이 좋았을 것 같다.
• 오롯이 혼자했다고 하기엔 다른 사이트 등 참고해가면서 했기에, 혼자서 모든 코드를 완성했다고 보기 어려운 점 / 스스로 모든 개념을 다 제대로 숙지하지 못한 상태
• 완료 / 완료 취소 버튼 기능을 구현하지 못한 점
• 그 외 유효성 검사 등의 기능을 추가하지 못한 점

Try : 보완 방법

• 이전에 배운 개념 강의를 다시 한번 복습하면서 제대로 이해하고 더 찾아보면서 살을 붙여야 할 것 같다 (특히 props, state 등)
• 스스로 하나하나 모두 코드를 짜보는 연습이 필요하다
• 튜터님의 피드백과 과제 답안을 바탕으로 기존 과제를 보완하고, 계속 반복해서 코드를 작성해보면 도움이 될 것이다!