✏️

프론트엔드 개발을 시작할때마다내가 항상 처음으로 만나는 문제는 백엔드와 어떻게 연동할 것인지 이다. Melting은 React Native로 프론트단을 개발하고, Spring Boot로 백단을 개발하기 때문에 이 둘을 어떻게 연동해야되는지 부터 알아보았다. Spring Boot 프로젝트의 API와 통신하기 위해 axios 또는 fetch와 같은 HTTP 클라이언트 라이브러리를 사용하고, React Native 프로젝트의 javaScript 파일에서 API 호출을 수행하고 결과를 처리하는 식으로 프론트와 백을 연동하면 되고, 일단 백엔드는 다른 팀원이 만들고 있는 과정중에 있고, 나는 따로 프론트 프로젝트 폴더를 만들어서 프론트단을 구성하면 된다! React Native를 개발하는 방법에는 두 가지가 있다..

앞서 Melting 프로젝트의 첫 게시글에서 작성하였듯이 이번 프로젝트는 내가 초기부터 함께 시작한 것이 아니라 초기 기획에 내 의견이 들어간 것은 아니다. 초기 기획에서 Melting은 인기 커뮤니티 사이트를 통합한 커뮤니티 사이트로 다양한 인기 사이트를 제공하는 웹 사이트였다. 내가 투입되면서 바뀐 것은 웹 사이트가 아닌 앱을 만드는 것이 목표가 되었다는 것..! 그래서 최종 개발 방향은 인기 커뮤니티 사이트를 통합한 통합 유머 커뮤니티 앱 개발.!.!.! 추가로 앱에 맞는 UI도 구상하게 되었다. 이번에도 이전 프로젝트와 마찬가지로 Figma를 사용했고 내가 원하는 앱 UI는 최대한 심플하고 깔끔하고 군더더기 없는 그런 느낌.. 다양한 커뮤니티 사이트의 글을 보여주기 때문에 앱 UI자체는 튀지 않는..

아직 PR Me 프로젝트를 진행하고 있지만 또 새로운 프로젝트를 시작하게 되었다. 프로젝트의 완전 초기부터 시작하는 것은 아니고, Java 백엔드 개발자를 희망하는 친구가 만들던 커뮤니티 웹 사이트의 프론트엔드 개발을 맡게 되었다. 처음에는 요즘 계속 공부하고 있는 React를 또 사용해볼까 했는데 이번에는 더 나아가 React-Native에 도전해보기로 했다. 항상 웹 말고 앱 개발에도 관심이 있었는데 이번 기회에 냉큼 시작해보려고 한다. Melting 프로젝트의 협업 툴은 Notion이다. 트렌디한 개발자라면 노션으로 포트폴리오도 만들고..그런다는데 나는 이번에 처음 사용해보는거다. 사실 전에 노션으로 포폴 만들기 도전해봤는데 그때는 프로젝트 경험도 별로 없고, 노션 사용방법도 어렵고 여러가지 이유로..

기존 CSS파일에 /* tablet */ @media (max-width: 1024px) { .home { width: 90%; } } @media (max-width: 870px) { table { width: 18rem !important; } } /* mobile */ @media (max-width: 768px) { .home { width: 85%; } 이런식으로 원래 있던 코드가 desktop/notebook 기준이었다면 tablet - max-width: 1024px, mobile - max-width: 768px을 추가하여 화면 너비를 조정할 수 있게 했다. 1. Desktop / Notebook 2. Tablet 3. Mobile

지금 프로젝트에서 페이지네이션이 들어갈 부분은 딱 한 곳. ⬆️이 부분이다. 위 사진은 내가 피그마로 대강 잡아본 레이아웃과 디자인이고 페이징도 대강 이쪽에 들어갈 예정이다~ 정도로 표시해둔 모습니다^0^ 이 페이지의 주요 기능은 페이지네이션이고 처음 레이아웃을 잡을땐 한 페이지에 7개로 잡았는데 막상 만들어보니 5개가 딱 적당하고 좋았다. 페이지네이션은 서버에 들어가는 데이터가 있어야되고, 그래서 백단에서 만드는게 용이하겠다는 생각이라서 일단 나는 API를 넣기 전까지의 틀을 만들기로 했다. API 넣은 최종본은 다음에 또 포스팅 할 예정💡 가장 하단의 페이징() 완성 모습은! 페이지네이션 패키지를 사용하면 페이징을 쉽게 만들 수 있다고 해서 npm install react-js-pagination r..

바로 전 포스팅에서와 같은 페이지에 들어가있는 차트이다. https://bean-three.tistory.com/103 위 사진에서 가운데에 회색 원으로 표시해둔 부분💡 처음에는 기본 꽉 찬 파이 차트로 만들어볼까 했는데 만들다 보니 도넛모양이 더 데이터를 알아보기 편한거 같아서 그렇게 만들었다. 완성된 모습은⬇️ 차트에 들어간 색상은 내가 따로 지정한 것이 아니라 Nivo에 기본으로 들어가있는 옵션 중에 마음에 드는 것을 골랐다. 적용해보고 마음에 들지 않으면 따로 지정하려고 했는데 생각보다 예뻐서 그대로 사용중이다. Nivo 차트를 사용하려면 우선 라이브러리를 설치해야된다. npm install @nivo/core npm install @nivo/pie 나는 파이차트를 만들거니까 @nico/pie를 ..

위 사진은 내가 피그마로 계획했던 Home.jsx이다. PR Me의 메인 페이지이며 주요 기능이 들어가서 가장 중요한 페이지라고 볼 수 있다. 가장 아래에 있는 "7명이 참여해줬어요!" 문구가 있는 부분을 만들면서 좌우 가로 스크롤을 넣었는데 하나의 기능을 더 더하고 싶어서 마우스로 드래그해서 스크롤을 넘기는 기능을 추가했다. 우선 완성된 모습은⬇️ 깔끔하게 잘 만들어진거같다😚 const nicknamesRef = useRef(null); // nicknamesRef는 nicknames div요소에 대한 참조를 생성하는데 사용된다. // useRef(null)은 초기값으로 null을 할당하여 초기 참조를 설정한다. const [startX, setStartX] = useState(0); // startX..

react-router-dom이란? react에서 라우팅 구현을 돕는 패키지 설치 방법 npm install react-router-dom Link란? html의 a태그와 유사하다. 리액트 라우터(React Router) 라이브러리의 컴포넌트 중 하나이다. 브라우저에서 페이지를 새로고침하지 않고도 애플리케이션 내에서 다른 경로로 이동할 수 있게 해준다. import { Link } from 'react-router-dom' 회원가입 회원가입 버튼을 누르면 /regiser로 이동. useNavigate란? 리액트 라우터(React Router) 라이브러리의 일부인 React Hook이다. 액트 컴포넌트 내에서 브라우저의 주소를 변경하고 다른 경로로 이동하는 데 사용한다. 컴포넌트를 사용하여 클릭 이벤트나 ..