프론트엔드 포트폴리오 추천 - peulonteuendeu poteupollio chucheon

보름달처럼 밝고 긍정적인 이보름입니다 :)

동덕여자대학교에서 전공을 통해 HTML, CSS, DATABASE등을 배웠습니다.
졸업 후, 한국 정보기술연구원(KITRI)에서 JAVA 전문가 과정을 통해 Java, JSP, SQL 등 이수하였습니다.
이후 해외 봉사와 캐나다 어학연수로 폭넓고 다양한 경험을 하며 제 진로에 대해 고민하게 되었습니다. 캐나다 어학연수 중 한인 개발자 모임에서 HTML, Javascript등 스터디를 하게 되었고 Netwoko(스타트업)에서 인턴도 할 수 있었습니다.
인턴 근무 하며 HTML, CSS, Javascript, AngularJS, git등을 사용해 웹사이트를 개발하고 유지/보수하면서 프론트엔드 개발자로 제 가능성을 보았습니다.

최근에는 ReactJS에 관심을 가져 공부중에 있습니다.
사용자가 편리하게 사용할 웹을 만드는 웹프로그래머가 되기 위해 노력중인 이보름입니다.

URL: https://altmshfkgudtjr.github.io/

이미지:

1. 시작 페이지

2. 메인 페이지

3. 프로젝트 페이지

외 3개의 페이지가 존재합니다.

자기소개:

안녕하세요. 제목처럼 예술을 좋아하고, 개발하는 것을 즐거워하는 컴공 재학생입니다!

항상 최적의 사용자 경험을 위해서 고민하면서 프론트엔드 개발을 하고있지만, 서버, CI/CD의 자동화 등 전반적으로 관심이 많은 개발자입니다.

서비스 소개:

먼저 React를 사용하여 제작하였고, Github page로 배포를 진행하였습니다. 또한, 데이터는 json파일로 저장 및 관리하고 있습니다.

본 사이트는 프로필 및 개발 경험들을 나타내는 공간이자, 사용자와 개발자간의 연결을 표현하는 공간을 컨셉으로 제작하였습니다! 그래서 연결이라는 개념을 시작페이지에서 '선'으로 표현하고, 중간에 저를 나타내는 글을 타이핑 애니메이션으로 표현하였습니다.

또한 각 페이지들을 제작하면서, 사용자들이 재미있게 느낄 수 있도록 고민하면서 만들었습니다. 육각형 메뉴가 존재하는 페이지에서는 빈 삼각형을 누르면 애니메이션이 작동한다던지, 프로젝트 페이지는 음반의 느낌으로 제작하는 등이 있습니다. 다만, 프로필 페이지는 재미보다는 직관적인 것이 읽기 편할 것 같아서 애니메이션을 배제하여 제작하였습니다.

더하여 개발자들도 재미를 느낄 수 있도록 Terminal도 만들어봤습니다. +_+

개발 과정:

모든 프로젝트가 그랬듯이 설계하는 부분에서 가장 시간이 오래걸렸습니다. 총 개발 기간 한달동안 디자인하고 동작 과정을 설계하는 과정이 2~3주.. 아이디어가 잘 안 떠오르더군요. ㅠㅠ

그렇게 설계가 끝난 뒤, 개발에 착수했을 때에는 물론 여러가지 난감한 경우가 존재하였습니다. github page에 배포를 고려했을 때 SPA구조는 어떻게 배포해야될지, 메인 컨셉 중 하나인 6개의 삼각형으로 구현된 육각형을 CSS로 구현하는 것이 꽤 생각처럼 잘 되지는 않았습니다. 물론 결국 구현을 다 하고나니 새로 알게된 것도 많고 역시 재미있었다는 생각이 들더군요! 😀

앞으로 계획:

취업!을 위해서 지금 기본기를 좀 더 탄탄하게 만들려고 합니다! 그리고 다들 영어 숙련자들이 많으셔서, 저도 틈틈히 영어 회화를 준비해 놓을려고 합니다. 다국어 능력자들 부럽습니다. %_%

개발자로서 진로를 결정하신 분들 모두 화이팅입니다! 👏

1. IT 회사에 개발자 취업하는 방법

IT 회사에 개발자로 취업을 하려면 개발에 대한 지식 / 경력 / 실력이 필요합니다. 경력이 없는 신입(~3년 차)에게 회사가 지식과 경력과 실력을 확인하는 방법은 무엇일까요?

첫째는 학습한 기록(Git, 기술블로그)
둘째는 프로젝트 진행 경험(포트폴리오)
셋째는 코딩테스트(과제)

이렇게 3가지를 확인하여 지원자를 선발합니다. 그래서 학습한 기록은 Git과 기술 블로그로 프로젝트 진행 경험은 포트폴리오 프로젝트로 평가합니다. 우리는 이 3가지를 준비하고, 진행하고, 연습하면 됩니다..🔥

2. IT 회사 채용 프로세스 이해하기

• 카뱅 : 서류전형 > 코딩테스트전형 > 1차 실무진 면접전형 > 2차 경영진 면접전형
• 토스 : 서류 접수 > 직무 인터뷰 > 문화적합성 인터뷰
• 우리 FIS : 서류 > 인적성, 코테, IT 상식 > 1차 면접 > 2차 면접
• 줌 : 서류심사 ＞ 온라인 실기시험(과제전형) ＞ 실무진 인터뷰 ＞ 최종 인터뷰

서류(포트폴리오) → 코딩테스트 또는 개발 과제 → 1차 면접(기술) → 2차 면접

IT 회사 채용 프로세스는 회사마다 상이하지만 대부분 서류(포트폴리오)로 1차 필터링을 하고 코딩 테스트와 개발 과제로 2차 필터링을 한 뒤 1차 기술 면접을 봅니다. 1차 기술 면접은 대부분 내가 지원한 팀(부서)의 개발자 2-4명이 내 포트폴리오와 코딩 과제(테스트)에 대한 실무단 면접입니다. 팀장 1명 + 개발 팀원 2-3명이 면접자로 들어오고 화이트보드를 사용해서 기술적인 대화를 하게 됩니다.

3. 포트폴리오를 6주만에 효율적으로 잘! 준비하는 방법

아래 내용은 카우치코딩의 6주 포트폴리오 멘토링 3기(8월 반) 산출물을 기준으로 작성되었습니다.

포트폴리오란?

개발을 잘 할 수 있다는 것을 어필하기 위해 그동안 진행했던 프로젝트를 보기 좋게 정리한 것
지원하는 포지션의 채용담당자의 입장에서 어떤 인재를 필요로 할까? 에 대해서 고민해보고, 나는 그에 맞는 경험이 있는가? 에 대해 어필할 수 있도록 작성해야합니다.

포트폴리오에 들어갈 내용

1. 간단한 자기소개(개발자로써)
2. 깃허브 / 기술블로그
3. 기술 스택 - FE/BE/DevOps
4. 주요 프로젝트
5. 학력 / 이력
6. (신입의 경우) 자기소개 - 비젼, 개발자로써 역량준비 과정

주요 프로젝트(위에서 4번)에 들어갈 내용

1. 프로젝트 설명
2. 깃허브 & 도메인
3. 사용한 기술 스택

• 언어, 프레임워크를 Frontend, Backend 나눠서 보기 좋게 정리합니다.

1. 기능 설명

• 프로젝트 주요 기능을 개발 용어를 최대한 사용하여 정리합니다.

1. 담당역할 및 성과

• 나의 포지션과 어떤 기능을 어떻게 구현했는지 간단히 작성합니다.

1. 레퍼런스

• 기능 정의, 페이지 기획서, DB&API 설계서, 데모영상(산출물) 등의 실제 산출물을 링크합니다.

포트폴리오 프로젝트 샘플

그룹 포트폴리오 수업 3기(7-8월 6주간 진행) 포트폴리오 프로젝트입니다.
팀 단위로 프로젝트를 개발하고, 6주 만에 기획부터 설계, 개발, 배포, 포트폴리오 완성을 목표로 합니다.

카페메이트 프로젝트 Git 주소 : https://github.com/sungeun101/cafemate

카페메이트 프로젝트 도메인 주소 : http://cafemate.shop

포트폴리오 프로젝트 준비 순서

아이템 선정 및 팀빌딩 → 기술 선정(언어 및 프레임워크) → 기능 정의 → 페이지 기획 및 디자인 → 설계(DB, API) → 개발 → 배포 → 도메인 설정 → 리드미 및 포트폴리오(자소서) 작성

기획 및 설계 기간은 1-2주, 개발 기간은 4주로 총 6주가 소요됩니다.

1. 팀빌딩, 아이템 선정 🚗

[팀 빌딩]
4명이 한 팀이 되어 1개의 웹 사이트를 기획하고 개발합니다. 프론트엔드 2명, 백엔드 2명으로 구성합니다.

[아이템 선정]
게시판과 같은 CRUD(데이터 조회, 입력, 수정, 삭제) 기능을 포함하고 로그인&회원가입, 검색&필터 등 아래의 기능이 포함된 4-6페이지의 웹 사이트를 개발하게 됩니다.

포트폴리오 용 웹 사이트의 개발 범위(추천)
기본 CRUD
로그인/회원가입(구글 oAuth)
리스트 페이지
상세 페이지
입력 페이지
검색/필터링
페이징(인피니트스크롤링)
지도 API 사용(위치기반)
크롤러(데이터수집) <옵션>

[기술 스택 정하기]
Backend 와 Frontend 에 필요한 프레임워크와 DB, 배포 환경을 결정합니다.

2. 페이지 기획 및 디자인 🚗

[페이지 기획(디자인)에 필요한 툴 사용법 배우기]
Figma 라는 현업 디자이너 툴을 사용하여 UI 페이지 기획 및 디자인을 함께 해나갑니다.

[기능 및 페이지 기획]
샘플 프로젝트를 통해 페이지와 기능 기획하는 방법을 배우고 개발 범위를 명확히하여 팀 개발을 빠르게 진행할 수 있도록 합니다.

• UI 페이지 디자인 (3기 샘플)
  
  

3. DB 및 API 설계 🚗

[DB 종류 설명 및 설계하기]
DB의 종류에 대해서 이해하고 어떤 DB를 선택할지 결정합니다. 이전 수업에서 작성한 기능 기획에 맞는 DB 설계를 완성합니다.

[Restful API 설명 및 설계하기]
Restful API 를 이해하고 API 서버를 설계하고 문서를 작성합니다. 백엔드 서버를 개발하기 전에 기능에 알맞는 서버 설계를 멘토와 함께 진행하게 됩니다.

• DB 명세서 (3기 샘플)
  

  

• API 명세서 (3기 샘플)
  

  
  
  
  

4. 프로젝트 스케줄링 🚗

[프로젝트 스케줄링하기]

• Git Projects 를 사용하여 팀 별 개발 스케줄링을 합니다.
• Git 을 사용하여 프로젝트를 셋팅합니다.

[프로젝트 협업을 위한 Git 배포 룰 결정하기]

• 협업을 하기 위해 브랜치 관리 룰과 브랜치와 커밋 메세지 작성 룰을 결정합니다.

• Git Projects(프로젝트 스케줄 보드)
  

  

5. 개발 🚗

[서비스 구조 이해하고 협업하기]

• 팀 내 개발자 모두가 서비스 구조(아키텍처)를 이해하고 협업합니다. 프론트엔드와 백엔드에서 각각 어던 작업을 해야하는지 이해하고 개발합니다.
• 이때 코드리뷰를 서로 진행하며 Git Flow 에 맞춰 협업하는 방법을 배웁니다.
• oAuth를 활용한 로그인 및 회원가입 개발을 위해서 개념을 이해합니다.

• Google oAuth 개념
  

  

• 서비스 구조(3기 샘플)

6. 도메인 설정 및 AWS 배포 🚗

AWS EC2 에 프로젝트를 배포하고 무료 도메인을 설정합니다.

7. 데모 및 회고💕

[회고를 통해 배운 것을 공유하기]

• 6주 동안 배운 것을 공유하고 만든 프로젝트를 자랑합니다.
• 잘한 점, 아쉬운 점을 나누면서 서로를 통해 배웁니다.

[프로젝트 설명서 리드미 완성하기]

• Git Readme 에 프로젝트 설명을 기술용어로 작성합니다.

포트폴리오 샘플(일부)

글을 마치며

2021년 상반기 개발자 멘토링 플랫폼인 카우치코딩을 런칭하고, 100명 가까이 멘티들을 만나면서 포트폴리오 프로젝트를 준비하는데 많은 어려움을 겪는 것을 알게되었습니다. 취업을 하기 위해서는 경력이나 포트폴리오 프로젝트 경험이 필요한데, 신입(주니어) 레벨에서는 혼자서 어디서부터 준비하는지 너무 막막해보였고 그 문제를 해결하기위해 6주의 포트폴리오 멘토링 수업을 런칭하게 되었습니다.

3기 수업은 8명의 취업준비를 하는 3년차 이하의 개발자가 참여하였고 그중 1명은 수업이 끝나고 바로 취업을 하는 기쁜 소식도 들을 수 있었습니다. 🙌

3기부터는 PM(project manager)인 저 뿐만 아니라 TA(teaching assistant)를 각각 프론트엔드, 백엔드 1명씩 코드리뷰를 긴밀하게 진행하였고 그 결과 프로젝트 개발 속도 향상 뿐 만아니라 코드 퀄리티가 50%이상 개선되었습니다.

이 글을 통해 취업 준비를 하는 주니어 개발자에게 도움이되고 또, 혼자 준비하기 막막하여 멘토의 도움이 필요한 주니어에게 수업을 알리고자 작성하였습니다. 모두 화이팅!! 입니다. 👍🏻💕 (댓글 통해서 수업 또는 포트폴리오 준비 방법, 취업 등에 대해 질문주시면 소통해요!)

6주 포트폴리오 수업(온라인으로 진행) 구경하기
3기 수업 결과물 구경하기