728x90 반응형 WINNEREST Project5 Winnerest 메인 페이지 리팩토링(Observer 무한스크롤) Winnerest 메인 페이지 구현 (무한 스크롤, Intersection Observer) 👆 메인페이지 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 학습용으로 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡았습니다. 메인 페이지 0119eunji.tistory.com observer Intersection 라이브러리를 사용해 구현했던 메인 페이지를 캣보우 프로젝트를 하며 다시 공부한 Observer API 를 사용해 다시 리팩토링했다. const Main = () => { const navigate = useNavigate(); const token = localStorage.get.. 2023. 1. 8. Winnerest 마이 페이지 구현 👆 마이 페이지 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 오로지 학습용으로 클론을 열심히 구현했는데 그 중 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡은 기록을 적어보려한다 그 중 마이 페이지 편 구현한 기능 내 정보 데이터 받기, 관련 보드, 보드 안의 핀(사진) 보드 만들기 기능 마이페이지 구현은 생각보다 간단하다 서버에서 주는 유저 정보를 받아 그대로 보여지기만 하면 됐었는데 사실 기획 초기엔 다른 유저의 페이지로 보이게끔 계획했지만 프로젝트 시간상 어쩔 수 없이 내 마이페이지만 구현하게 되었다 🥲 페이지에 들어가면 바로 유저 정보와 보드 정보가 뜨게끔 정보를 같이 받아오는 .. 2022. 9. 10. Winnerest 로그인 페이지 구현 (Kakao API 활용) 👆 로그인-회원가입 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 오로지 학습용으로 클론을 열심히 구현했는데 그 중 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡은 기록을 적어보려한다 그 중 로그인 창 편 구현한 기능 카카오 API를 통한 로그인 기능 구현 회원 닉네임, 프로필 사진, 카카오계정(이메일) 를 받아 각각 필요한 유저 정보 페이지에 적용 카카오 로그인 API를 사용하기 위해서는 https://developers.kakao.com/ 에 들어가 먼저 내 앱 애플리케이션을 만들어야한다. 이때 발급 받은 REST API 나 javaScript 키를 이용해 구현한다. 카카오 API 구.. 2022. 9. 9. Winnerest Project 회고록 Winnerest Project 란? https://www.youtube.com/watch?v=ylfITz5h1ps 👆 시연영상 링크 개발기간 2022년 8월 29일 ~ 2022년 9월 8일 (10일) Winnerest 프론트엔드 개발자 : 김다현, 조은지, 권영준 백엔드 개발자 : 백민석, 길성민 기술 스택 프론트 엔드 : React / React Router / styled-components 백엔드 : node.js / MYSQL / express / NODEMON / JSONWEBTOKENS / Postman 커뮤니케이션 : Slack, Trello, google SpreadSheet Editor (API 명세서) 프로젝트 설명 Wecode 36기 2차 프로젝트 Winnerest 사진에 기반한 소.. 2022. 9. 9. Winnerest 메인 페이지 구현 (무한 스크롤, Intersection Observer) 👆 메인페이지 구현 움짤 Pinterest clone Project Winnerest 총 5명이서 구성된 Winnerest ( FE : 3, BE : 2 )에서 2주간 학습용으로 로그인 페이지 / 메인 페이지 / 마이 페이지 구현을 맡았습니다. 메인 페이지 구현한 기능 Intersection Observer 를 사용한 무한 스크롤 무한 스크롤을 구현하는 데 가장 일반적이고 널리 알려져 있는 건 window.addEventListener 를 이용한 스크롤 이벤트 구현 방식이다 하지만 이번 프로젝트는 라이브러리가 사용 가능하다는 이야기를 듣고 Intersection Observer와 axios 를 사용해 구현해보았다 페이지 설정이 로그인 창이 먼저 뜨고, 토큰이 있어야 메인 페이지를 들어갈 수 있어 거의 .. 2022. 9. 3. 이전 1 다음 728x90 반응형
