나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/리액트

리덕스 툴킷으로 리덕스 사가를 이용해보려고 합니다. 리액트 프로젝트를 하며 리덕스 툴킷을 이용하면 좋은 점은 액션 함수와 액션 타입들을 한번에 모아주는 createSlice가 있습니다. 이렇게 createSlice를 사용하며 필요한 기능을 구현할때 서버에서 데이터를 받아와야하는 경우에 Redux Thunk나 Redux Saga를 이용합니다. 리덕스 툴킷에 Redux Thunk는 createAsyncThunk라는 툴킷의 자체 기능이 있지만 Saga는 현재 시점에서 아직까지 그런 기능은 없어서 평소에 사용하는 Redux Saga를 그대로 적용시켜 사용해야 합니다. 이전 글에서 createSlice의 사용방법을 적었었습니다. 해당 링크는 Saga를 사용하지 않은 기본 상태관리 글입니다. kimyang-sun...

2021. 3. 8.

코딩 기록/리액트

리액트 프로젝트를 진행하며 상태관리시에 프로젝트 규모가 작으면 Context API를 이용하고 그 외에 경우에는 Redux 또는 Mobx를 많이 사용하는것 같습니다. 리덕스는 액션 타입, 액션 실행함수, 리듀서 이렇게 만들어주고 관리하는 특성이 있어서 코드량이 많아진다는 단점이 있습니다. 그렇지만 Redux DevTools 등을 이용하여 상태변화를 하나하나 다 체크하고 확인할 수 있기 때문에 안정성은 높다는 평가가 많아요. 저는 리덕스의 Redux Toolkit이 리덕스의 코드를 확 줄여줘서 정말 편하다고 하길래 찾아봤습니다. 직접 테스트를 조금 해보니까 좀 많이 편한거 같아서 앞으로 자주 이용할 생각입니다. 리덕스 등 다른 필수 패키지가 다 설치되어있다는 가정하에 리덕스 툴킷을 설치해줍니다. yarn ..

2021. 3. 4.

코딩 기록/리액트

리액트로 회원가입과 같은 폼(Form)들을 만들기 위해 여러 고민을 한 결과 직접 하나하나 구현해서 할 수도 있겠지만 살짝 비효율적이라는 생각이 들어 라이브러리를 이용하여 구현했습니다. React Hook Form 라이브러리를 베이스로 하였고 디자인 ui는 Ant Desgin을 이용하였습니다. antd 자체에도 antd만의 Form 유효성 검사가 따로 있는것 같지만 저는 React Hook Form이 기능, 성능적으로 더 좋다고 생각하여 antd는 디자인 ui만 이용했습니다. https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com ant.design/ Ant Design - ..

2021. 3. 4.

코딩 기록/리액트

리액트를 이용하여 웹페이지를 구현하는데 빠르게 아이콘을 사용하고 싶을때 react-icons를 사용할 수 있습니다. react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 사용방법을 알..

2021. 2. 20.

코딩 기록/리액트

로그인 화면 메인 내 정보 상품 장바구니 게시판 📌 - React.js - React-Router - Firebase (auth, firestore) 링크 https://glasses-shop.netlify.app 설명 [로그인] - Firebase Auth를 이용하여 로그인을 구현하였습니다. - 이메일 계정을 생성할 수 있습니다. - 구글 계정으로도 로그인을 할 수 있습니다. - '내 정보'에서 로그아웃이 가능합니다. [내 정보 저장] - Firebase Firestore를 이용하여 데이터를 저장합니다. - 프로필 사진 업로드는 FileReader를 이용하였습니다. [게시판] - Firebase firestore를 이용하여 데이터를 저장합니다. - 게시글을 작성할 수 있고 댓글도 작성할 수 있습니다. ..

2021. 1. 21.

코딩 기록/리액트

📌- React.js 링크 https://kim-todolist.netlify.app/ 설명 [할 일 관리] - [+] 아이콘을 클릭하면 입력창이 나옵니다. - 입력창에 할 일을 입력한 후 Enter키를 누르면 할 일이 추가됩니다. - 할 일을 체크하면 목록별로 남은 할 일들이 최신화됩니다. - 할 일에 마우스를 올리고 🗑 아이콘을 누르면 할 일이 삭제됩니다. [목록 관리] - 목록 추가 버튼을 누르면 입력창이 나옵니다. - 입력창에 목록명을 입력한 후 Enter키를 누르면 목록이 추가됩니다. - 목록을 클릭하면 해당 목록이 활성화됩니다. - 활성화된 목록에 ✖버튼을 누르면 목록이 삭제됩니다. [할 일 검색] - 우측상단 검색창에 검색어를 입력하면 검색됩니다. - 실시간으로 해당 검색 키워드와 일치하는 ..

2020. 12. 20.

코딩 기록/리액트

📌- React.js - html-to-image - downloadjs - Firebase (auth, database) - Cloudinary (image upload) 링크 https://visiting-card-maker.netlify.app 설명 [로그인 및 로그아웃 기능] 로그인을 해야만 Maker 페이지로 갈 수 있습니다. firebase auth API를 이용하여 로그인 기능을 구현하였습니다. 로그아웃은 로그인 후 우측 상단 자물쇠 모양 아이콘을 클릭하면 됩니다. - Google - Facebook - Github [카드 추가] 왼쪽 Card Edit에서 카드를 생성할 수 있습니다. form을 모두 작성하고 Add버튼을 누르면 Card Preview에 카드가 생성됩니다. 이미지 업로드 기능..

2020. 12. 20.

코딩 기록/리액트

📌 - React.js - Youtube Data APIs - Axios 링크 https://kimyang-sun.github.io/mini-youtube-react/ 기능 설명 [동영상 시청 기능] 동영상을 클릭하여 시청할 수 있습니다. - 첫 페이지는 인기 동영상을 모아놓은 목록이 나옵니다 - 클릭하여 시청 가능합니다 [검색 기능] 검색창에 보고 싶은 영상을 검색할 수 있습니다. - 검색창에 검색어를 입력 후 Enter 또는 🔍 아이콘 클릭합니다 - 해당하는 목록이 나오면 클릭하여 시청합니다 [모바일 반응형] 모바일 반응형 CSS를 구현하였습니다.

2020. 11. 29.

코딩 기록/리액트

사용 언어 - React.js 링크 https://kimyang-sun.github.io/shopping-list-react/ 기능 설명 [상품 추가 기능] 상품을 입력하여 추가할 수 있습니다. - 입력창에 상품을 입력한 뒤 '추가'버튼 클릭 - 입력창에 상품을 입력한 뒤 키보드 Enter [상품 수량 증가, 감소] 상품의 수량을 증가하거나 감소시킬 수 있습니다. - '+' 버튼을 누르면 수량이 증가합니다. - '-' 버튼을 누르면 수량이 감소합니다. [상품 삭제 기능] 상품을 삭제시킬 수 있습니다. - 휴지통 버튼을 클릭하면 상품을 삭제할 수 있습니다 - '전체 삭제' 버튼을 클릭하면 상품 전체를 삭제할 수 있습니다.

2020. 11. 29.