Contact & Channels
👩🏻💻 Front-End Developer
- 안녕하세요! positive difference를 만들고 싶은 FE 개발자 김종이입니다.
- 사용자의 불편함을 개선하고, 세상에 가치를 더하는 개발자로 성장하고 싶습니다.
- 항상 더 좋은 방법은 없을까 고민합니다. 다른 사람의 코드를 보고 영감을 받는 순간을 좋아합니다.
- 꾸준하고 성실하게 진행해 나가는 것에 자신 있습니다.
- 가독성 좋고 중복 없는 코드를 작성하고자 노력합니다. 요즘은 custom hook을 적극 이용해 중복 로직을 줄이고자 노력하고 있습니다.
🛠 Stacks
| Front-End |
Collaboration & Tools |
Back-End |
Database |
| HTML, CSS, JavaScript(ES6), jQuery |
Slack, Discord |
Spring boot, jsp |
MySQL, Oracle |
| React.js, Next.js |
VS Code, Eclipse |
|
Firebase |
| TypeScript |
Git, Github |
|
|
| React-query, Context API, Redux-toolkit, Recoil |
|
|
|
💻 Projects
개인 - RemindME
🏠 Remind-ME 배포 사이트
https://github.com/Paperkeem/RemindME
2023.02.10 - 2023.02.21
기술 스택
React TypeScript recoil react-beautiful-dnd react-hook-form styled-components
프로젝트 소개
어지럽게 흩어져 있는 URL 정리를 위한 Kanban Board, RemindME 입니다.
구현 사항
- URL 카드간, 보드간의 드래그 앤 드롭 기능 구현
- 쓰레기통 아이콘으로 URL 카드를 드래그하여 삭제하는 기능 구현
- react-hook-form을 이용한 보드 추가 기능, URL 카드 추가 기능 구현
- DND 시 Recat.memo로 컴포넌트를 메모이제이션, 컴포넌트 렌더링 최적화
- recoil을 통해 전역 상태 관리, 로컬 스토리지 저장 기능 구현
개인 - Chatty
🏠 Chatty APP 설치 파일 주소
‣
2023.02.06 - 2023.02.22
기술 스택
React TypeScript Next.js Electron firebase react-query ant-design
프로젝트 소개
next.js, Electron, firebase로 구현한 데스크탑 채팅 어플리케이션 입니다.
구현 사항
- firebase authentication을 이용해 회원가입, 로그인 기능 구현
- firebase의 onAuthStateChanged 함수로 받아온 current user 정보를 context api로 전역 관리
- react-query를 이용해 firebase database api 호출해 1:1 채팅방과 그룹 채팅방을 구현
- 채팅방 내 react query의 refetchInterval을 1000으로 설정하여 서버 polling을 구현
- 1:1 채팅방과 그룹 채팅방에서 동일하게 쓰이는 input / scroll 이벤트를 custom hook으로 관리
팀 - 원티드 프리온보딩 8기
⭐️ 4주차 개인과제 Best Practice 선정
https://github.com/Paperkeem/pre-onboarding-8th-4week-6
2022.12.20 - 2023.01.20
기술 스택
React TypeScript redux-toolkit styled-components
프로젝트 소개
5주간 수행한 4개의 기업 과제의 세부 설명 및 깃허브 주소입니다.
구현 사항
- [4주차] redux-thunk를 사용해서 댓글 CRUD 비동기 처리 / 페이지네이션
- [3주차] 검색어 추천 기능 구현 / 추천 검색창 키보드 이동
- [2주차] 이슈 트래킹 툴의 기본 CRUD 구현 / Drag & Drop 이벤트
- [1주차] 사전과제인 회원가입 · 로그인 / ToDoList 리팩토링