🔗 포트폴리오 링크 김예린의 다님 포트폴리오 다님 소개 맡은 역할 회원가입, 로그인 무한스크롤, 스켈레톤 마이리스트 댓글 multiple modal

react-dayjs day.js 는 많은 JavaScript 날짜 관련 라이브러리중 가장 가벼운 라이브러리이다. day.js의 사용방법에 대해 알아보도록 하자. day.js 선택한 이유 Moment.js는 사이즈가 매우 큰 라이브러리이다. 사용하지도 않는 기능들로 인해 페이지 렌더링 시간은 늘어난다는 단점이 있었다. Moment.js의 공식 문서에 Moment.js를 대체하기에 좋은 라이브러리들이 소개되어 있다. Day.js는 기본적인 기능만 포함하여 매우 작은 사이즈, 플러그인을 사용한 확장, Moment.js와 똑같은 인터페이스를 가지고 있어 선택하게 되었다. day.js 설치 timeForToday.js 댓글 작성 시간을 구현하기 위해 day.js를 사용했다. 함수를 사용해 원하는 날짜 및 시간을 더할 수 있다. comment.js 결과 화면 comment10-2.gif

react-hook-form react-hook-form react-hook-form을 선택한 이유는 React 내에서 Form을 쉽게 제어하고 손쉽게 유효성 검사를 처리하도록 도와주기 때문이다. 실제로 React Hook Form을 사용하면서 value와 onChange로 각 입력 필드에 대한 처리를 추가할 필요가 없었다. 또한, state를 직접 관리할 필요도 없었다. react-hook-form 을 이용해서 유효성검사 실제로 콘솔을 확인해보면 React Hook Form은 form 작업에 사용할 수 있는 useForm hook을 제공한다. 아래 코드를 통해서 살펴보겠습니다. Signup.js 💿 register useForm()에서 구조분해할당을 통해 register, watch 를 꺼냈다. register는 , 를 가지는데, 위 코드에서 은 “email”이고, 는 위와 같습니다. 💿 watch currentPassword.current를 통해 현재 입력한 비밀번호를 …

아무리 빠른 인터넷 환경이라고 해도 수백 개, 1,000개 이상의 데이터를 받는 데에는 시간이 오래 걸린다. 많은 데이터를 하나의 페이지에 랜더링해야 할 때 어떻게 지연 로딩을 할 수 있는지 알아보자. Skeleton Loading 스켈레톤 로딩을 사용하지 않았을 때 화면에 밀려나는 현상이 있어 UX 관점에서 좋지 않았다. 스켈레톤 스크린 (Skeleton Screen) 이란? 화면의 뼈대와 같은 느낌을 주는 UI / UX 기법으로 데이터를 불러오는 중일 때 해당 데이터가 화면에 어떻게 나타날지 미리 알 수 있게 해주는 역할을 한다. skele.gif) react-loading-skeleton 사용법도 간단하고 기존 프로젝트에 사용하기도 편해보여서 선정했다. SkeletonUser.js 이런식으로 편리하고 빠르게 작업할 수 있었다. ✔️ 그래서 만족스러운 결과가 나왔나요..? 스켈레톤 스크린이 UI/UX적인 면에서 얼마나 좋은지 알 수 있었다. 하지만 개발하고 있는 여행 일기 작성 …

json-server 연습을 위해서 실무와 비슷한 느낌으로 하기 위해 가짜 API 서버를 만들어 통신을 해보았다. 가짜 API 서버 열기 에는 해당 파일 이름을 적고, 에는 원하는 포트번호를 적어 서버를 열 수 있다. axios 를 사용하여 API 요청하기 마이리스트 페이지, 댓글을 구현할 때 json-server를 이용했다. todos.json comment.json 🔳 참고 json-server-auth JSON server용으로 만들어진 JWT 인증 미들웨어이다. 회원가입 페이지에서 간단하게 이용했다. JSON server 시작하기 회원가입 : 회원가입을 시도하니 위처럼 데이터가 등록되었다. 아쉬운 점 json-server-auth는 회원 가입 또는 로그인 시 accessToken만을 응답으로 내려주기 때문에 사용자를 식별할 방법이 없다. 만약, 필요하다면 직접 구현을 해야 할 것 같다.

detail.gif 상세페이지에 Toast-UI 에디터를 사용해서 댓글 기능을 적용했다. Toast UI Editor Editor 설치 리액트에서 사용하기 때문에 toast ui editor의 React Wrapper 버전을 설치 1. 댓글 작성하기 로그인 했을 때 댓글 작성 버튼을 누르면 toast editor가 나타나지만, detail.gif 회원 정보가 없다면, 로그인 페이지로 이동시킨다. 2. 댓글 수정 & 삭제 결과 화면 comment10-2.gif 댓글 작성, 수정, 삭제 권한은 오직 자신만 할 수 있도록 설정해놓았다. 추후 대댓글 기능 넣어보면 좋을 것 같다.

마이리스트를 모달로 구현할까? useRef를 사용해 직접 dom에 접근을 지양하는 것이 좋다는 것을 알게 된 후 useState를 이용하여 리스트를 모달로 만들었다. 하지만, 한 페이지에 투두리스트 모달 창을 두 개 이상 만드는 것은 사용자 경험에 좋지 못하다는 생각이 들었다. modal.png 마이페이지에서 구현한 모달 창을 없애고, 마이리스트 페이지로 옮겨 작업을 완료했다. json-server로 CRUD 확인하기 json-server를 통해 get, post, patch, delete가 잘 작동했었다. 실제 백엔드 api로 마이리스트 페이지를 구현했을 때, 생각보다 많은 코드를 수정해야 했다.. 2~3일 동안 서버 통신을 마무리해서 프로젝트 발표를 해야하는데, 마이리스트 페이지에 모든 시간을 쏟아 부울 순 없었다는 생각에 걱정만 앞섰다. 다행히도!!! 팀원들과 함께하여 빠르게 마이리스트 페이지를 구현할 수 있었다.😘 아래 코드를 통해서 간단하게 살펴보겠습니다. 1. 리스트 …

2가지 방법으로 모달 창을 구현하면서 새롭게 알게 된 점을 중점으로 작성하려고 한다. 1. useRef 먼저 useRef를 사용한 이유는 특정 영역을 포커싱하여 사용할 수 있어서 편리했다. 모달 영역 밖 클릭했을 때 닫히게 하려고 했다. 모달창 영역 밖에 해당하는 부분을 useRef를 통해 선택한 후, 해당 Element가 클릭 되었을 때만 모달창이 닫히도록 이벤트를 주면 된다. 2. onClick={openModal} 를 이용한 방법이다. 은 배경을 클릭했을 때에도 모달 창이 꺼질 수 있게 클릭이벤트를 넣어주었다. 은 박스 안을 클릭해도 모달창 닫히지 않게 이벤트 중지하게 했다. event.stopPropagation의 역할? 즉, 를 클릭하게 되면 까지 이벤트가 전달되는 것을 막아 의 클릭 이벤트 실행을 막아주는 역할을 한다. 시행착오 😲 헤더 Multiple Modal header.gif 헤더에서 유저 이미지를 클릭하면 첫번째 모달이 열리고, 로그아웃 버튼을 누르면 두번째 …

2주간의 프리 프로젝트를 마무리하고, 오늘부터 프론트 3명, 백엔드 3명이 모여 총 6명으로 메인 프로젝트를 시작했다. 진행순서 화면 정의서 -> 요구사항 정의서 -> 개발 -> 서버 연동 테스트 -> 빌드 -> 오류수정 -> 배포 순으로 진행할 예정이다. 1. Danim🌴 아이디어 회의를 통해 최종적으로 국내 여행 일기 서비스를 구현하기로 결정했다. 다님이라는 단어는 여행의 순우리말이다. 전반적인 서비스 내용은 사용자가 여행 일기를 작성하면 다른 사용자에게 해당 게시물이 보여지게 된다. 해당 게시물을 본 다른 사용자에게는 여행지 추천이 될 수 있다. 서비스 소개 기록을 남기지 않은 여행은 희미해지고, 기록을 남긴 여행은 추억 선명해진다. 우리의 아이덴티티는 지도이다. 마이페이지로 이동하면 지도에는 자신이 방문한 지역의 빈도수에 따라 색 채도가 달라진다. 예를 들어, 가장 많이 방문한 지역은 색이 진해질 것이고, 가장 적게 방문한 지역은 색이 옅어질 수 있도록 적용할 예정이다. …