Jaypedia

현재 진행 중인 React 프로젝트에서 svg 파일들을 어디에 위치시킬지에 대한 고민이 있었다. public 폴더일까? src 폴더일까? 각각에 위치시키는 것이 어떤 차이점이 있을까? 오늘은 그런 의문점들을 해소하면서 정리해 보려고 한다. 블로그 글을 참고하여 src 폴더에 위치시키기로 했다. 가장 큰 이유로는 바로 경로가 잘못되었을 때 컴파일 단계에서 에러가 나서 알 수 있냐 아니냐의 여부였다. public에 이미지를 위치할 경우 컴파일 단계에서 에러가 발생하지 않아서 별로 좋지 않다고 생각했다. 반면 src 폴더에 이미지를 넣을 경우 경로가 틀렸을 때 바로 에러로 알려 주기 때문에 수정이 용이하다. 📂 이미지를 public 폴더에서 관리할 때 webpack에 의해 관리되지 않는다. 즉, minify ..

유연하고 재사용 가능한 UI 컴포넌트를 만들 수 있는 React를 스타일링하는 방법에는 여러 가지가 있다. 다양한 방법의 특징을 알아보면서 무엇을 선택할지에 대한 고민을 줄여보고자 포스팅을 해 본다. 1. import CSS file 가장 기본이 되는 방법으로는 Component로 CSS 파일을 바로 import 하는 방식이 있다. 간단하긴 하지만 단점이 존재한다. 어플리케이션의 규모가 클수록 컴포넌트가 많아지게 되는데, 그러면 css 파일을 관리하기 어려워지고 여러 컴포넌트에서 사용한 class name의 중복이 발생할 수 있다. 2. Styled Components * CSS-in-JS library (컴포넌트 파일 내에서 스타일을 지정하여 컴포넌트와 스타일을 한 파일 내에서 관리할 수 있게 됨) *..

이번엔 글쓰기 기능을 구현해 보자. 저번에 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 기능을 어떻게 구현했는지 풀어서 써 보려고 한다. 사실 기능 구현은 다 했기 때문에 구현만 끝내고 넘어갈 수도 있겠지만, 한 번 정리를 해 두면 나중에 다시 같은 기능을 구현할..