반응형

ARCHIVE/TOY_PROJECT 6

[React] 칸반보드 Kanban Board Drag & Drop (Recoil, TypeScript, React DnD)

Kanban Board Drag & Drop kanban card 추가, 수정, 삭제 kanban 기본틀 kanban의 기본구성은 'To do' 'In progress' 'Done' 'Notes & Reference' 4개의 list로 구성한다. Add task 버튼으로 card를 생성하고, card는 수정과 삭제가 가능하며 list간 drag,drop으로 이동이 가능하게 구현한다. Recoil 기본setting https://recoiljs.org/ko/docs/basic-tutorial/atoms Atoms | Recoil Atoms는 애플리케이션 상태의 source of truth를 갖는다. todo 리스트에서 source of truth는 todo 아이템을 나타내는 객체로 이루어진 배열이 될 것이..

ARCHIVE/TOY_PROJECT 2022.03.23

[React] Kakao Map - 폴리곤 (카카오맵)

선택지역을 polygon으로 표시하는 map 기본 Kakao Map 설정 https://developers.kakao.com 카카오 개발자 사이트에서 카카오 로그인 내 에플리케이션 - 애플리케이션 추가하기 - 앱이름 등록 생성한 앱클릭 - 플랫폼 - 사용할 플랫홈 선택 후 도메인 설정 html파일에 추가 지도 생성하기 javaScript로만 할 경우 import React, { useEffect } from 'react'; const { kakao } = window; export const KakaoMap = () => { useEffect(() => { const container = document.getElementById('map'); const options = { center: new kak..

ARCHIVE/TOY_PROJECT 2022.03.14

[React] Dashboard (TypeScript + Redux-toolkit)

https://github.com/manonkim/A_team_test GitHub - manonkim/A_team_test Contribute to manonkim/A_team_test development by creating an account on GitHub. github.com Filtering 기능이 있는 Dashboard 필터링 기능 1. dropdown menu 클릭 시 checkbox 생성 (toggle + menu 바깥영역 클릭 시 close) 2. checkbox 클릭 : 견적 요청 카드 필터링 + dropdown menu에 클릭한 checkbox 카운팅 + Reset button 노출 3. '필터링 리셋' 클릭 시 filtering 초기화 4. '상담 중인 요청만 보기' Toggl..

ARCHIVE/TOY_PROJECT 2022.02.26

[React] 환율계산기

https://github.com/manonkim/exchange_cal GitHub - manonkim/exchange_cal Contribute to manonkim/exchange_cal development by creating an account on GitHub. github.com Exchange Rate Calculator timestamp 변환 Unix 타임 스탬프는 1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 시간이며 초 단위로 표시된다. JavaScript Date 객체는 1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 시간을 밀리 초 단위로 표시합니다. new Date()를 사용하여Date()클래스에서 새 객체를 생성하면 생성 된 시간을 밀리 ..

ARCHIVE/TOY_PROJECT 2022.01.26

[Internship]

Wecode bootcamp의 마지막 과정인 인턴쉽을 2021.11.15 ~ 2021.12.09 4주간 진행하였다. 프로젝트 담당업무 : 웹페이지의 로그인, 회원가입 페이지를 React, scss를 사용하여 새로 구축하였다. Signup page 기존 : tabler react 라이브러리를 사용하여 기본적인 UI만 존재. (기능x) (backend는 Strapi + AWS EC 서버) 개선 수정이 힘든 library로 기존 form이 구성되어있어서 향후에도 쉽게 수정할 수 있도록, react scss로 새로운 UI 구축. 기존 login page에서 formik를 사용하여서, signup page에서도 동일한 formik library를 활용하여 form을 구성. yup을 사용하여 유효성검사. 기존 회원..

ARCHIVE/TOY_PROJECT 2021.12.16

[wecode] Team project : Adlip

https://github.com/manonkim/fullstack2-2nd-ADLIP-frontend GitHub - manonkim/fullstack2-2nd-ADLIP-frontend Contribute to manonkim/fullstack2-2nd-ADLIP-frontend development by creating an account on GitHub. github.com WECODE 2차 Team project Activity platform 'FRIP' site를 모티브로하여 2주간(10.25 ~ 11.05) 'Adlip' 사이트를 제작. Front-end 5명 / Back-end 2명 프로젝트 담당업무 : 사이트의 상품페이지 프론트엔드 담당 React hooks, styled compon..

ARCHIVE/TOY_PROJECT 2021.12.01
반응형