민규의 개발블로그

프로젝트에 인피니트 스크롤링을 활용한 사례를 정리했습니다. 1. 인피니트 스크롤링을 하는 이유? 2. 프로젝트 구현 인피니트 스크롤링을 하는 이유? 인피니트 스크롤링이란 말 그대로 무한 스크롤이다. 페이지를 클릭하면 다음 페이지 주소로 이동하는 페이지네이션과 달리 페이지 하단에 도달하면 새로운 콘텐츠가 한 화면에 추가로 로드되는 식이다. facebook, instagram이 이러한 방식으로 콘텐츠를 로드하고 있다. 데이터 전부를 화면에 보이지 않는 부분까지 표시해주면 오래 걸릴 수 있기 때문에 인피니트 스크롤링을 해준다. 일정 높이가 됐는지 감지하기. 페이지가 일정 부분까지 내려갔을 때 요청을 보내주려면 유저가 어느 정도의 위치인지 체크해줘야 한다. 세로 스크롤만 감지하면 되니 height와 관련된 값을..

프로젝트를 하면서 ssr 환경에서 JWT 로그인 방식을 구현하며 겪은 문제를 정리해보았습니다. 1. 로그인은 어떻게 이루어지나? 2. 브라우저 저장소와 보안 이슈 3. SSR로 하면서 겪은 이슈 로그인은 어떻게 이루어지나? JWT 방식 ( AccessToken, RefreshToken) 유저가 로그인할 때 서버가 인증 정보를 보내주는데, 암호화나 시그너처 추가가 가능한 데이터 패키지안에 인증 정보를 담아 보내준다.(이 패키지가 JSON Web Token JWT다.) 담기는 정보 중 AccessToken과 RefreshToken이 이후 유저 인증에 사용되는데 이 정보를 클라이언트에 저장해준다. 쉽게 풀어서 얘기하면 클라이언트에서 유저가 로그인 요청을 서버에 보내면 서버는 DB에 유저가 있는지 확인, 이후 ..

UI는 styled-components로 작업했다. 회원가입 우선 회원가입에 필요한 email, password, name, phone 값을 받는다. 그리고 그 value 값 들은 useInput이란 커스텀 훅을 만들어 중복을 최소화해줬다. useInput은 input의 변화되면 onChange가 발생하고, handler 함수가 실행된다. 그중, event.target.value는 해당 요소의 값을 의미하고, setState( )를 통해서 기존 비어있는 state의 값에 내가 입력한 값으로 업데이트를 한다. useCallback은 리렌더링을 최소화해주기 위해 사용한다. 그렇게 state값을 업데이트해줬으면 그중 password 값과 passwordCheck의 값이 같은지 확인해주고 다르다면 passwor..

지난 한달간 쿠팡이츠 클론 백엔드를 하기 위해 node.js와 mysql 공부를 했다. 시퀄라이즈로 모델을 만들고 관계 설정을 하고있는데 이부분이 제일 어려운것 같다. 생각이 잘 정리되지 않아서 글로 대충 끄적여 본다. 회원가입/로그인 회원가입은 상품을 주문할 고객유저와 상품을 올릴 관리자유저로 나눠서 한다. 고객유저의 경우는 email,nickname,password,phone 정도 정보가 필요하고 (주소정보 추가 고민중) 관리자 유저의 경우 고객유저에서 admin 이란 사업자번호를 추가로 받으려한다. 시퀄라이즈를 통해 mysql과 연결해 모델을 만들고 있는데 고객유저와 관리자 유저 둘다 한 테이블로 만들고 admin의 경우 allowNull:true로 설정해서 서버에선 비필수로 하고 관리자 회원가입 ..

더미데이터가 수만개 이상 쌓이면 렌더링시 버벅이는 문제가 있다. 그를 해결하기위해 인스타그램에서도 사용하는 react-virtualized라는 라이브러리를 사용하면 좋을것 같아서 미리 쓰기전에 적어둔다. 화면에 필요한만큼 가져오고 필요없는건 지우는 그런 기능이다. 내 더미데이터가 수만개는 안되겠지만 나의 고민을 가장 잘 해결해줄수 있는 블로그를 찾아서 메모해둔다. 미래의 내가 필요할때 꺼내 쓸거임 coffeeandcakeandnewjeong.tistory.com/52

개인 프로젝트로 쿠팡이츠 클론을 하고있는데 지금은 로그인/회원가입 페이지를 만들고 기본 메인페이지 를 만들고있다. 일단 로그인/회원가입 state관리는 redux로 reducers 폴더안에 user.js 파일에서 관리해주고있다. 비동기 작업은 추후에 redux-saga로 해줄 것 이다. 메인 페이지에 컴포넌트들은 가장 기본적으로 상점 카드가 있고 이건 지금 간단하게 해줬다. 그리고 음식의 종류 ex) 1인분, 한식, 중식, 치킨, 분식 등등에 따라 상점 카드들을 모아주는 것 이건 react-slick으로 옆으로 넘겨주는 애니메이션을 구현할지 아니면 직접 만들지는 고민이다. 비슷한 것 으로는 또 하단메뉴에 추천순과 최소주문금액이 낮은순 배달비가 낮은순으로 상점카드들을 분류해주는 메뉴바도 있는데 위에 음식 ..

2021년 새해를 맞아 개인 프로젝트로 할만한게 뭐가 있을가 고민하다가 자주 쓰는 어플인 쿠팡이츠를 클론코딩 해보기로 마음 먹었다. 사용 스택으론 Front -next,react,redux,redux-saga ,styled-components Back - node.js(express) db는 MySQL를 쓸 것 이다. 구현 페이지 라우터는 일단 기본 home,유저프로필,주문내역,가게상세페이지,메뉴상세페이지, 즐겨찾기페이지,검색페이지,배달지주소페이지,카트페이지 정도 이고 구현 기능으로는 회원가입/로그인 주소에 맞게 가게 띄워주기 메뉴종류별 카테고리 카트에 메뉴 담기 즐겨찾기 담기 검색해서 가게나 카테고리 띄워주기 생각해두었다.

Delete 삭제버튼에 넣어줄 함수 onDelete( )를 만들어 그안에 javascript의 윈도우 객체 confrim( ) 메소드를 이용해서 알림창을 띄워줄거다. confrim은 알림창을 띄워주고 확인을 누르면 true, 취소를 누르면 false를 반환한다. const onDelete = () => { const ok = window.confirm("정말 삭제 할건가요?"); if(ok){ // delete } }; delete 기능은 firebase 문서를 보면된다. 참조를 만들어야 되는데 여기서 참조 주소는 dbService의 doc 안에 컬렉션이름/만든유저의 id다. 그 뒤 delete( ) 메소드를 해주면 끝이다. dbService.doc(`gweets/${GweetObj.id}`).delet..