Jaypedia

이번엔 글쓰기 기능을 구현해 보자. 저번에 UI는 완성해 놓았다. Ant Design을 활용해서 깔끔한 UI가 완성되었다. 🚀 목표 글쓰기 버튼을 눌렀을 때, 임시 DB 파일인 data.json에 작성한 글이 등록되도록 하는 것이 목표이다. 이 역시 저번에 했던 영화 앱에서 했던 것과 매우 유사한데, 그 당시에는 TIL에만 간략하게 정리하고 따로 게시물로 정리해 놓진 않아서 이번 기회에 정리해 보려고 한다. 🤔 고민했던 것 글을 작성한 후 글쓰기 버튼을 눌렀을 때, 모달이 떠서 '정말 작성하시곘습니까?' 같은 안내 문구가 또 나오게 해야 하나 싶었다. 그런데 다른 웹 사이트의 글쓰기 기능을 본 결과, 있어도 그만 없어도 그만 같았다. 그래서 일단은 넣진 않는 걸로. ✅ 유효성 검사 글 제목이나 내용 중 ..

커뮤니티 페이지에서 카테고리 버튼을 눌렀을 때 해당하는 카테고리에 맞는 글만 보여지도록 구현해야 했다. 카테고리는 중복 선택이 안 된다는 것을 감안해서 Ant Design의 Radio Button을 활용하기로 했다. 기존에는 Tag 컴포넌트를 사용했었지만 Radio.Button으로 바꿔주었다. axios를 활용해 카테고리 배열을 가져온 후, categories가 undefined가 아니면 map을 돌려서 라디오 버튼을 생성해 준다. 이 때 "모든 글"을 볼 수 있도록 버튼이 하나 더 있어야겠다고 생각했다. 그래서 defaultValue에도 설정해 주었다. onChange 속성에는 함수를 넣어주었다. useState 훅을 활용해서 category를 바꿔 준다. 이렇게 onChange 이벤트가 일어날 때마다..

12월 2일부터 24일, 지금까지 계속 리액트로 미니 프로젝트를 진행 중이다. 중간에 다른 이벤트들이 있어서 잠깐 보류한 적도 있었지만, 그래도 계속해서 달려오고 있고, 31일에 최종 마무리를 해서 완성할 예정이다. 사실 이번 프로젝트는 리액트를 알고 활용하면서 작품을 만든다기보다는 리액트를 배워나가면서 하나의 프로젝트를 완성시켜보는, 공부와 경험을 위한 프로젝트이다. 그렇기 때문에 코드의 품질은 아직 신경쓰지 않고, 우선 기능 구현과 익숙해지는 것을 우선하면서 진행하고 있다. CRUD 기능을 구현하고 있는데, 그중에 Update 기능을 어떻게 구현했는지 풀어서 써 보려고 한다. 사실 기능 구현은 다 했기 때문에 구현만 끝내고 넘어갈 수도 있겠지만, 한 번 정리를 해 두면 나중에 다시 같은 기능을 구현할..