미리보기

• IT 교육과정 이해와 커리큘럼을 작성한 주제를 중심으로 실습 과정

• 커리큘럼의 주제로는 주로 ‘인공지능’, ‘업무자동화(RPA)’, ‘데이터분석’을 토대로 교육컨텐츠를 조사하며 커리큘럼 제작

• 실제로 출시된 수능기출앱을 토대로 앱 유지 보수

• 개인화된 학습성향 분석 기법을 토대로 특허출원을 목표로 특허 기획

• 앱의 UI/UX 디자인과 로고 디자인을 통해 인터페이스 요소를 적절히 배치 작업 수행

👉🏻 GitHub 레포지토리

👀 Web Site

🖌 Figma

Tools: React, Typescript, Styled-components, Recoil, Webpack, Chakra UI

프로젝트 목표 및 설명

1. 인원: PM(2명) + BE(5명) + FE(3명) + 데이터 분석(5명)

2. 팀회고 작성 서비스로 팀원들과 과거 스프린트를 되돌아보며 개선점, 문제점을 다시 되돌아보는 회고 카드 작성 사이트

3. 학교 교내 IT 동아리에서의 첫 프로젝트

4. 리더로서의 역량을 기르며 팀원들와의 소통 능력을 배움

내가 기여한 일

1. 기능 구현

   1. 마이페이지/레이아웃/메인페이지 기본 디자인

   2. 회고 설정 수정 기능 및 팀원 초대와 팀원 검색, 팀원 삭제 기능 구현

   3. 댓글 작성, 좋아요, 회고 카드 작성 및 수정 기능 구현

   4. 알림기능 구현

2. 환경 구축

   1. ESLint, Prettier 정책 설정 및 MSW 설정

   2. Chakra UI 공통 theme 설정 및 브랜드 컬러 커스텀

💡 성과

• 책임감을 배운 경험

  • 팀장으로서 프로젝트 회의 진행 및 개발 일정 관리, 팀원에게 업무를 전달하며 프로젝트를 리드하였습니다. 또한 프로젝트를 끝까지 마무리해야 하기 때문에 리더의 역할이 중요하다는 것을 깨달은 프로젝트입니다.

• 환경 구축부터 배포하는 과정까지

  • 이 프로젝트의 프론트엔드 개발 프로세스를 모두 진행하고 관리하며 전반적인 개발 과정을 수행하였습니다. 이로써 모든 개발 프로세스를 이해할 수 있었습니다.

👉🏻 GitHub 레포지토리

👀 Web Site

📣 발표 자료

Tools: React, Typescript, Kakao map API, Supabase, Next.js, Vite

프로젝트 목표 및 설명

1. 인원: FE(2명) 

2. 공공 데이터(공연예술통한전산망 API) 티켓 구매 페이지

3. 개발자 양성 교육과정의 최종 프로젝트

내가 기여한 일

1. 회원가입 및 로그인(OAuth- 카카오) 회원 전용 서비스 구축

   1. formik 컴포넌트 사용하여 아이디, 비밀번호 입력 설정 제한

   2. 사용자 정보 조회, 정보 변경 기능

   3. 사용자 프로필 이미지 업로드 기능

2. 실시간 검색 구현 및 위시리스트 페이지 디자인 및 퍼블리싱

3. 티켓 상세페이지 구현 - 댓글 작성, 예매하기, 찜하기 버튼, 카카오 맵 API를 이용한 지도 정보 작성

4. Supabase로 DB 구축

5. 에러 처리 Boundary 기능 적용 및 ESLint, Prettier 정책 설정

6. Kakao map API 활용하여 위치 정보 컴포넌트 구현

7. 반응형 디자인 구현

💡 성과

• 새로운 기능 구현

  • OAuth, 회원가입 기능과 카카오맵 API를 이용한 위치 정보 구현 기능 등 새로운 기능을 구현하는데에 집중하였습니다. 이러한 과정을 통해 다양한 툴과 라이브러리를 사용하는 방법을 익힐 수 있었습니다.

• 한 달 안의 모든 과정을 끝내야 했다

  • 한 달이라는 기간 안에 개발자 양성 교육과정의 최종 프로젝트를 마무리해야 했습니다.

  • 기획 ⇒ 디자인 구성 ⇒ 프론트엔드 개발 ⇒ 서버 구축 ⇒ 배포 ⇒ 리팩토링 작업 ⇒ 발표 자료 준비까지 모든 과정을 거치며 성장하였습니다.

👉🏻 GitHub 레포지토리

Tools: React, Typescript, Chakra UI, Figma, Vite

프로젝트 목표 및 설명

1. 인원: 백엔드 3명 + 프론트엔드 3명

2. 판매자와 구매자의 상호 연결한 재고 판매 사이트

3. 해커톤 K-digital 트레이닝 대회 출전용 프로젝트 (본선 진출)

4. 백엔드와의 첫 협업 프로젝트로 팀 커뮤니케이션 능력을 기른 경험 (PM & Front-End)

5. Jira, Figma, Photoshop 등의 다양한 기술 및 커뮤니케이션 능력 숙련

내가 기여한 일

1. 제품 상세 페이지에서 제품 데이터 REST API로 연결, 디자인 및 퍼블리싱, 구독 기능 구현

2. 이미지 첨부, 제목/상세설명/가격 설정 기능 구현

3. Formik 라이브러리를 사용하여 제품 등록 페이지 입력 제한 기능 설정

4. 반응형 디자인 설정

💡 성과

• "백엔드와의 첫 협업 경험”

  • 백엔드팀과의 API 호출 방식에 대해 상호 소통하며 swagger UI를 활용하여 API 명세서를 확인하며 API 호출에 집중하였습니다. 이로써 백엔드와 프론트엔드의 협업 방식을 깨닫고 이해하였습니다.

👉🏻 GitHub 레포지토리

👀 Web Site

Tools: React, Styled-components, Vercel

프로젝트 목표 및 설명

1. 인원: FE(3명)

2. WATCHA 영화 플랫폼을 모티브로 영화 DB를 이용한 영화 정보 사이트 반응형 웹 페이지 개발 (Front-End engineering)

내가 기여한 일

1. Infinity Scroll 기능 추가

2. Styled-components와 Chackra UI 라이브러리를 이용한 프론트엔드 개발

3. API 통신을 통한 메인페이지 영화 정보가 담긴 카드 형식 UI 구현

4. 반응형 디자인 구현

5. CI/CD 이해 및 배포 환경 구축 (Vercel 사용)

6. Git 과 Github 이용 및 버전 관리

💡 성과

• SPA 프레임워크에게 첫발을 디디다

  • React 프레임워크에 대한 이해와 SPA 특징, 컴포넌트 설계 및 개발에 집중하고 처음 개발 과정을 진행하였습니다.

• Git 협업관리와 팀 커뮤니케이션의 중요성

  • 개발하는 과정에서 팀원들과 소통하고 코드를 리뷰하며 개발 영역은 소통 및 협업 능력을 감휘해야 한다는 것을 배웠습니다.

  • Jira, Slack, Github, Confluence, Figma 등의 협업 툴을 사용하며 배웠습니다.

• 응용SW엔지니어링 교육과정

  • HTML/CSS/Javascript의 이해와 알고리즘 및 프로그래밍(Python) 기법,DB/Node/React 교육과정

• 3번의 프로젝트를 진행