dev/code review4 [React] 무한 스크롤 기능 구현 무한스크롤은 특정 페이지의 하단에 닿았을때 API가 호출되며 콘텐츠가 끊기지 않고 계속 로드되는 사용자 경험 방식이다. 🤔 페이지네이션도 있는데 왜 무한스크롤인가? 2가지의 이유가 있는데 첫번째는 허들을 줄이기 위해서이다. 사용자가 클릭을 하는 하나의 액션도 허들이라고 보는데 동작하는것을 줄임으로써 액션을 하나 줄일수 있다는 생각을 했다. 두번째 이유는 사용자가 상품을 더 많이 접하게 하기 위해서이다. 사용자가 제일 처음 접하는 메인페이지에서 더 많은 양의 정보를 사용자에게 보여주어야 구매를 할 수 있는 확률이 올라간다고 생각했다. 클릭후 다시 상단으로 올라가 렌더링 하는 시간 보다는 계속적으로 데이터를 불러오는 것이 사용자에게 더 많은 양의 정보를 줄수 있을거라 생각했다. ✅ 나중에 볼지도 모르니 정리.. 2023. 6. 4. [React] Carousel 기능 구현 위 쇼핑몰 메인페이지 기능구현 중 상단 이벤트 배너를 Carousel 기능으로 구현하려고 한다!🧐 📍Carousel 의 사전적인 의미는 회전목마로, 회전목마가 빙빙 도는 것처럼 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트이다. 실은 Carousel 을 편하게 만들 수 있는 라이브러리는 많지만 여러가지 기능이 들어가 있어 React공부에 많이 도움이 될거 같아 라이브러리를 쓰지 않고 직접 하나하나 코드를 짜보려고 한다 (그래서 탈도 많고 에러도 많고 나도 울 예정) ✅ 나중에 볼지도 모르니 정리해 놓는 Carousel 라이브러리 https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touc.. 2023. 5. 31. [HTML, CSS] portfolio 페이지 만들기 두개의 scene 으로 나눠진 porfolio 페이지를 반응형으로 만들었다. 구현해야 하는 요소만큼 오류도 많아 주말 하루를 받쳐서야 완성할 수 있었다😢 해당 글은 작업하면서 있었던 오류들을 정리한 글이다. 일단 처음에 폰트를 설정할때 나는 보통 @font-family 를 주는데 종찬 강사님 같은 경우엔 :root 변수 로 폰트를 설정했다 둘의 차이는 뭘까? 내 생각으로는 @font-family 는 설정을 한 뒤 한번더 폰트를 설정해야하지만 :root 변수는 전체적으로 해당 폰트가 설정된다는 차이가 있다. 1. 큰 레이아웃 잡기 처음에 제일 큰 씬을 먼저 잡고 시작했다 시각적으로 제일 눈에 띄는 보라색 배경과 핑크 배경으로 class 명을 주었다. 각 씬 안에는 안의 콘텐츠를 모두 담는 wrapper를 .. 2023. 3. 26. [HTML, CSS] login modal 만들기 위 로그인 모달을 html, css 까지 구현을 해봤다. 로그인 방법이 2개로 나뉘어져 있는데 직접 아이디/ 비밀번호를 적어서 로그인을 하는 방법과 SNS 계정으로 로그인하는 방식이다. 내가 위 코드를 짠 순서는 큰 모달창 가운데 정렬 을 먼저 한 다음 단 으로 나뉘어진 부분이 없어 따로 레이아웃을 정렬할 필요가 없다는 생각이 들어 위에서부터 차근차근 내려오면서 html 과 css를 번갈아가면서 짰다 . 1. 모달창 가운데 정렬하기 일단 나는 로그인 모달은 어디서든 독립적으로 쓸 수 있다는 생각이 들어 크게 article 태그로 묶어 주었다. 넓이값은 figma에 있는 넓이값 그대로 520px 을 줬는데 후에 모바일로도 반응형을 만들것을 고려하여 max-width 로 주었다. 이후에 수평 가운데 정렬을 .. 2023. 3. 25. 이전 1 다음
