개발자들이 Github Pages를 이용하여 포트폴리오를 만드는 것을 보고, 직접 저만의 포트폴리오를 만들기로 했습니다.

html, css 언어를 공부한 후, 효율적인 개발을 위해 bootstrap 라이브러리를 활용하여 포트폴리오 사이트를 제작했습니다. 또한, 클릭하면 글자가 타이핑되는 효과, 원하는 정보만 나타나게 하는 효과 등등을 삽입해보고 싶어서 javaScript, jQuery 로 이벤트 리스너 처리를 했습니다.

Web 관련 지식을 쌓은 후, 실제로 돌아가는 서비스를 만들어 보고 싶어서 제작해본 웹앱입니다. 닮은 꼴 테스트가 유행하는 점을 참고해서 만화 캐릭터(짱구) 닮은 꼴 웹앱을 만들었습니다.

파이썬 웹 크롤링을 이용해서 짱구 이미지를 케릭터별로 1000장을 다운받았습니다. 텐서플로우 머신러닝을 돌려서 모델을 만들었고, chart.js를 넣어 모델 학습 결과를 출력했습니다. 또한 모바일에도 서비스를 하기 위하여 미디어쿼리를 적용시켜서 반응형 디자인을 완성했습니다.

할 일을 적어놓을 수 있는 ToDoList 입니다. SpringBoot 를 사용한 동적 서버 구현을 배우며, 직접 사이트를 제작해보고 싶어서 CRUD 의 기본인 ToDoList 를 구현하게 되었습니다.

전체 목록 페이지는 Mustache 로 뷰 페이지를 구현했습니다. 새 할일 작성, 수정, 삭제, 체크박스는 REST api 와 Javascript 의 fetch 함수로 화면 바뀜 없이 결과가 반영되게 구현했습니다. 또한 모든 데이터는 h2 와 연동하였습니다.

상품 등록, 수정, 상품의 판매 상태(품절, 판매중) 관리와 (admin 인가) 장바구니, 상품 구매와 취소 (인증) 시스템을 구현한 쇼핑몰 팀 프로젝트 입니다.

기능 구현 시 단위 테스트 코드(JUnit 5 사용) 를 작성하여, 서버를 실행시키지 않으면서 빠른 피드백을 받을 수 있게 했습니다.

모든 인증 유저는 쇼핑몰에서 상품을 구매할 수 있습니다. user 인가는 자신의 장바구니를 확인할 수 있으며 구매한 상품을 취소할 수 있습니다. admin 인가는 쇼핑몰에 상품을 등록할 수 있습니다. 상품 등록 시 이미지를 필수로 넣어야 하며, 첫 번째 이미지는 대표상품 이미지로 자동 등록 됩니다.

깃의 이슈관리와 코드리뷰를 활용하여 팀 프로젝트를 진행하였습니다. 기술 구연 중, 잘 알고 있다고 생각했던 기술 구현에 어려움을 겪으며 (SpringSecurity, image 업로드) 추가적인 공부의 필요성을 깨달았습니다.

SpringSecurity 공부를 하며 나만의 비밀 노트를 제작했습니다. 다른 팀 프로젝트의 '인증, 인가' 구현에 어려움을 겪어서 개인 프로젝트로 연습을 하게 되었습니다. 뷰 구현은 thymeleaf 로 했습니다.

모든 사람은 회원가입을 할 수 있고, 로그인을 통해 인증을 할 수 있습니다. 인증된 user 는 admin 이 작성한 공지글을 볼 수 있습니다. 또한 인가 user 는 자신의 노트를 생성, 수정, 삭제할 수 있습니다.

인가된 admin 은 공지를 작성할 수 있으며 user 가 적은 노트의 제목 목록을 확인할 수 있습니다.

이미지 업로드를 할 수 있는 블로그입니다. 다른 팀 프로젝트의 '여러 이미지 업로드 구현'에 어려움을 겪어서 개인 프로젝트로 연습을 하게 되었습니다. 이미지 등록 시에는 '단위 테스트' 로 확인하는 과정을 거쳤습니다.

처음 글을 쓸 때 여러 이미지를 등록할 수 있으며, 이 때 이미지는 리스트로 db 에 저장됩니다. 메인화면에는 맨 처음 이미지(대표이미지) 를 출력합니다. 글 detail 화면에서는 업로드한 이미지들이 차례대로 출력됩니다.

부족하다고 생각한 부분을 개인 프로젝트를 통해 다시 공부했습니다. 이번 프로젝트를 하며 여러 이미지를 다룰 수 있는 리스트와 for 문에 많은 부족함을 느꼈고, 이를 위한 추가 공부를 하고 있습니다.

영화 리뷰를 할 수 있는 사이트를 제작했습니다. 국비 교육을 함께 들은 팀원 두 명과 함께 팀장 역할을 맡아 진행했습니다.

영화 CRUD, 영화의 리뷰 CRUD 를 구현했으며, 영화 페이에는 감상평을 댓글 형태로 등록할 수 있습니다. 영화 등록 시에는 이미지를 업로드할 수 있습니다.

저는 영화 CRUD 를 구현했고, 팀원의 코드(디버그) 작성을 도와줬으며, 참여율이 저조한 팀원에게는 유료 강의를 제공하는 등의 지원을 했습니다. 팀 프로젝트를 진행하며 개발에는 팀원들의 지식 상태, 개발환경 등 많은 변수들을 고려해야 한다는 점을 알게 되었습니다.

기본적인 todoList 의 CRUD 를 구현한 팀 프로젝트 입니다. front-end 를 공부하는 팀원과 함께 프로젝트를 구현했습니다.

SpringSecurity 구현 시, 사이트의 보안에 대해 공부하며 JWT(JSON WEB TOKEN) 를 이용한 사용자 인증을 추가했습니다.

todoList 팀 프로젝트는 AWS(아마존 웹 서비스) 로 웹 서버 구축을 목표로 하고 있습니다. 현재는 Back-end 구축을 했으며 front-end 도 구축 중에 있습니다.

프론트앤드와 협업해서 RestfulApi 를 제대로 구현해보고 싶은 마음에 시작한 팀 프로젝트입니다. todo 구현에는 어려움이 없었지만, view 페이지를 분리시켰을 때의 여러 문제점(CORS, 소통) 들을 해결하며 많은 지식을 쌓게 되었습니다.