라이언 코딩일기

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

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

[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 라이브러리를 사용했다. 완성본 위 아래, 왼쪽 오른쪽 네 방향 모두 크게 여백을 주어 중앙의 ..

[React] 아울태스틱 클론코딩 리뷰

Meagan Fisher Couldwell이라는 웹 개발자의 개인 페이지 owltastic을 클론코딩 해보았다. 개인적으로 모던한 디자인에 독특한 글꼴이 특징인 멋진 페이지라고 생각한다. 사용한 라이브러리 styled-components recoil react-icons gh-pages 초안 이번 프로젝트는 간단했고, 이미 완성된 페이지를 보고 했기에 초안은 미리 작성하지 않고 진행했다. 주요 기능 flex,grid와 같은 컨테이너 구조 공부 : 컨테이너의 구조를 잡는 건 매번 힘든 일인 것 같다. div 박스를 몇 개나 만들지, flex 구조로 진행할지, grid 구조로 진행할지 등등.. 이번 프로젝트에서 조금 공부가 된 듯하다. 백그라운드 이미지 삽입 : 거의 모든 섹션에 background-imag..

[React] 모멘텀 앱 리마스터

저번에 JS 기반으로 만든 모멘텀 클론앱을 React로 리마스터했다. 외관만 비슷하지 새로운 프로젝트를 하는 것만 같았다. TS는 아직 공부 중이라 써먹지 못했고, JSX기반이다. 사용한 라이브러리 styled-components recoil + recoil-persist react-hook-form tanstack-query + axios usehooks react-icons gh-Pages 사용한 API OpenWeatherMap API ( 사용자 지역, 날씨, 온도 데이터 받기 ) 초안 Mac 기본앱인 Freeform으로 제작했다. 조잡하지만 대략적인 컴포넌트의 위치만 알 수 있도록 만들었다. 확실히 초안이 있는 거랑 없는 거랑은 달랐다. 주요 기능 랜덤 백그라운드 - 페이지가 재랜더링 될 때마다 ..

[React] 포트폴리오 만들기

취업을 위해 나만의 포트폴리오를 만들어 보았다. 프로젝트에 사용한 주요 라이브러리는 아래와 같다. react-router-dom -- 페이지 관리 recoil -- 스테이트 관리 styled-components -- 스타일 관리 react-icons -- 아이콘 framer-motion -- 애니메이션 생성 완성본 영상 css 스킬이 부족한 나에게 framer-motion은 그야말로 단비 같은 라이브러리이다. 덕분에 다이나믹한 표현도 손쉽게 할 수 있고, 사용하기에 불편함이 없었다. 그리고 이번 프로젝트에는 recoil을 이용해 state 관리를 해보았다. 개인적으로 RKT보다 사용하기 쉬웠고, selector 기능이 마음에 들었다. 마지막으로, media-query 및 css-style, typogra..