라이언 코딩일기

[React] alert를 손쉽게 sweetalert2 라이브러리

서론 sweetalert2는 깔끔하고 멋진 alert창을 손쉽게 구현하게 해주는 라이브러리이다. 이번에 만들고 있는 쇼핑몰 앱에 모달창, 알림창을 넣어야 하는 경우가 많았다. 그래서 이것저것 찾아보다가 우연히 알게 된 마법 같은 라이브러리이다. 설치 터미널 설치 npm install sweetalert2 CDN 이용 사용법 사용법은 너무나도 간단하다. Swal 함수를 불러와 자신이 원하는 곳에 넣어주고, fire라는 키워드를 사용해 내부를 꾸며주면 된다. import Swal from 'sweetalert2' Swal.fire({ title: 'Error!', text: 'Do you want to continue', icon: 'error', confirmButtonText: 'Cool' }) // h..

[React] Recoil-persist

서론 Recoil은 React에서 지원하는 강력한 전역상태 관리 라이브러리이다. https://medium-ryan.tistory.com/34 [React] Recoil 사용후기 Recoil은 React의 전역 상태 관리 라이브러리 중 하나이다. React를 개발한 facebook 팀에서 만들었고, 그 때문인지 호환성도 아주 좋은 것 같다. Install npm install recoil 사용전 install RecoilRoot import { RecoilRoo medium-ryan.tistory.com Recoil을 사용하면서 LocalStorage에 쉽게 상태를 담을 수 있게 도와주는 Recoil-persist 라이브러리의 아주 간단한 사용후기를 써본다. 설치 npm i recoil-persist /..

[React] 간단한 카카오 굿즈샵 리마스터 리뷰

서론 요즘 기존에 만들어두었던 프로젝트들을 다시 손보고 있다. 이번엔 카카오 굿즈샵을 리마스터했고, 프로젝트를 하면서 느낀 점에 대해 써본다. 사용한 라이브러리 recoil (상태관리) styled-components (스타일링) react-router-dom (라우팅) framer-motion (애니메이션) gh-pages (배포) 개선점 일본어에 맞춰 폰트 스타일 변경. css root selector(가상 선택자) 폐기 및 모든 사이즈 rem 단위 사용. 헤더바 디자인 개선. 아이템 카드 디자인 개선. 디테일 페이지 상품 이미지 -> 이미지 슬라이더로 변경. 카트 페이지 스타일 변경. 완성본 후기 이번에는 추가기능 없이 디자인만 변경했다. styled-components 라이브러리와 css 가상 선..

[React] 페이지 전환시 스크롤 맨 위로 이동시키기

서론 React를 이용해 SPA를 만들 때면, 페이지를 이동할 때마다 스크롤의 위치가 이전 페이지 그대로 고정되어 불편한 점이 많았다. 편의성 개선을 위해 페이지를 전환할 때마다 스크롤을 맨 위로 이동시키는 방법에 대해 알아보겠다. 컴포넌트 만들기 하나의 특정 동작만을 위한 코드가 필요하기 때문에 개별 컴포넌트에 코드를 적는다. 또, 길지 않은 코드지만 가독성면에서도 개별 컴포넌트로 관리하는 것이 좋아 보인다. 컴포넌트 이름은 아무렇게나 지어도 상관없다. import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; export default function PageToTop() { const { pathname } =..

[React] 66일 프로젝트 ( 습관 만들기 앱 ) 개선

서론 11월 16일에 포스팅했던 습관 만들기 앱을 개선했다. Sunny에게 앱을 보여줬는데, 페이지가 하나밖에 없는 게 불편하다는 피드백을 받았기 때문이다. 사용한 라이브러리 이전 버전과 다르지 않기 때문에 생략. 초안 상단바 및 홈 페이지 디자인, 모달창 등에 대한 디자인을 간략하게 그려냈다. 주요 기능(개선점) 홈 페이지와 5개의 습관 페이지 생성. 홈 페이지 : 5개의 습관 페이지의 정보를 간략히 보여주고 해당 페이지로 이동 가능. 홈 페이지 최상단 사용자 이름 입력 및 반영. 토글링 가능한 상단바 생성. 각 프로젝트의 fail 카운트 2회 누적 시 fail 버튼이 붉은색으로 변경됨. 프로젝트 실패 시 alert 창이 아닌 간단한 modal 창이 뜨게끔 변경. Recoil 내부 모든 상태값 변경. ..

[React] 66일 프로젝트 ( 습관 만들기 앱 )

공부의 신 강성태 선생님은 66일 동안 같은 일을 반복하다 보면 그 일은 습관이 된다고 했다. 나는 그 말에 영감을 얻어 이번 프로젝트를 진행하게 되었다. 해당 프로젝트는 데스크탑 환경에선 쓸 일이 없을 것 같았기 때문에 화면 비율을 모바일 기준으로만 사용 가능하도록 했다. 사용한 라이브러리 react-hook-form recoil, recoil-persist styled-components react-icons gh-pages 초안 초안은 최대한 해당 섹션의 기능을 중심적으로 표현할 수 있게끔 만들었다. 주요 기능 타이틀( 습관 ), 성공시 보상, 실패 시 페널티 제출 및 수정 기능 진행상황 섹션( 프로그래스 바, 카운트, 퍼센트 ) 시작일 제출시 자동으로 완료일 및 각 일차별 날짜 제공 성공 or 실..

[React] Toyota 클론코딩 리뷰

일본 자동차 브랜드 토요타 랜딩페이지를 클론코딩 해보았다. 토요타 랜딩페이지는 깔끔한 느낌에 과한 애니메이션이 없어서 눈이 피로하지 않은 매력적인 디자인을 갖고 있다고 생각한다. 그리고 여러 자동차의 이미지를 보여줘야하기 때문인지 슬라이드(캐러셀) 활용을 많이 한 것이 특징이다. 사용한 라이브러리 styled-components recoil framer-motion react-icons react-multi-carousel react-responsive-carousel gh-pages 초안 이번 프로젝트 역시 클론코딩이 목적이었기 때문에 초안 없이 진행했다. 주요 기능 사용자가 일정 높이 이상 스크롤 시 상단 헤더바 숨김 / 표시 메인배너 단일 슬라이드 라인별 차종 멀티 이미지 슬라이드 완성본 https..

[React] Ximena Vengoechea 클론코딩 리뷰

일러스트레이터 Ximena Vengoechea의 개인 웹페이지다. 과감한 여백으로 깔끔한 디자인을 보여주며, 이미지의 손글씨나 아기자기한 폰트가 매력 포인트라고 생각한다. 페이지의 규모가 크지 않고, 시간 절약을 위해 랜딩페이지만 클론코딩 하였다. 사용한 라이브러리 stlyed-components react-responsive-carousel recoil react-icons gh-pages 초안 프로젝트 규모가 작고, 완성된 페이지를 클론코딩 했기 때문에 초안은 만들지 않았다. 주요 기능 중앙의 이미지 슬라이더(캐러셀) 이외엔 큰 기능은 없었다. 이미지 슬라이더는 react-responsive-carousel 라이브러리를 사용했다. 완성본 위 아래, 왼쪽 오른쪽 네 방향 모두 크게 여백을 주어 중앙의 ..