본문 바로가기
개발 포트폴리오

대학 1학년생 2021 웹 개발 포트폴리오 💻

by 로토마 2022. 3. 18.

ABOUT ME .

Nickname: Rotoma (03.01.10)

" 사람과 사람을 코드로 잇는 개발자 "

세종대학교 지능기전공학부 21학번 (재학중)

관심 분야 : 웹, 인공지능, VR, AR, 게임 개발 등등


My Status .

사람과 사람 간의 소통을 야기하는 플랫폼 기술을 만들고자 하는 목표를 가지고,

웹, 인공지능, 게임 등등 여러 분야에 도전하며 꿈을 찾아가고 있다.

그 중 현재 AI/Unity/Data Analysis/웹 개발을 공부하며 다양한 플랫폼을 개발하는 과정 속에 있다.


Skills .

Front-End : HTML, CSS , Javascript

Back-End (공부중): NodeJS, Spring

Version Control : git , Github

Extra Languages: C, Arduino(C++), Unity(C#), AI & Data Analysis (Python)


Projects .

1. KAKAO TALK Clone coding

→ 3인 협업 활동으로 진행된 인생 첫 웹 프로젝트

<Tool>

사용 언어 : HTML CSS

협업 툴 : figma, Github

버전 관리 : Github

👉 개발 과정 및 세부 사항

[HTML/CSS] 개톡 프로젝트 1일차(figma - 계획 및 구상, 파트 분배)

 

[HTML/CSS] 개톡 프로젝트 1일차(figma - 계획 및 구상, 파트 분배)

개톡은 지금까지 웹 스터디에서 배운 HTML과 CSS를 활용해, 톡 서비스를 구현을 목적으로 한 프로젝트이다. 무엇보다 인생에서 처음으로 github를 활용했던 첫 협업 프로젝트여서 너무 설렜다. 이

rotoma-code.tistory.com

[HTML/CSS] 개톡 프로젝트 2일차(개발 과정, 시작-종료까지)

 

[HTML/CSS] 개톡 프로젝트 2일차(개발 과정, 시작-종료까지)

이틀 간 마무리 지어야 했던 개톡 프로젝트... 하루 만에 개발을 끝내야 한다. 최대한 conflict이 발생하지 않도록 최대한 겹치지 않는 파트부터 순차적으로 개발에 들어갔다. 내가 맡은 일 ) - chats.

rotoma-code.tistory.com

👉 깃헙 링크

https://github.com/emilyjiminroh/go-gang-with-children_Gaetalk

 

GitHub - emilyjiminroh/Gaetalk-Web-Project: 2021 여름방학 개톡 프로젝트 with HTML,CSS

2021 여름방학 개톡 프로젝트 with HTML,CSS. Contribute to emilyjiminroh/Gaetalk-Web-Project development by creating an account on GitHub.

github.com


2. MOMENTUM APP clone coding

→ 1인 프로젝트로 크롬 앱의 클론 코딩이며, 처음으로 JS, 외부 API를 적용해보았던 프로젝트

<Tool>

HTML CSS JS AJAX JSON OpenWeather API

👉 세부 사항

JS를 활용해,

  • local storage에 정보를 저장한다.
  • 필요한 요소를 select해 정보를 가공한다.
  • 시계 구현
  • TO DO LIST 구현
  • Get Weather Information

👉 깃헙 링크

https://github.com/emilyjiminroh/momentum

 

GitHub - emilyjiminroh/momentum: Javascript로 To do list, momentum 제작 프로젝트

Javascript로 To do list, momentum 제작 프로젝트. Contribute to emilyjiminroh/momentum development by creating an account on GitHub.

github.com


3. 증권 뉴스 모아따 웹 서비스

→ 2인 협업 프로젝트로 python과 처음으로 flask를 이용해 개발했던 웹 서비스

<Tool>

HTML, CSS, Python(flask, bs4 (for crawling))

👉 개발 과정 및 세부 사항

[파이썬_크롤링] 증권뉴스 모아따 웹 제작

 

[파이썬_크롤링] 증권뉴스 모아따 웹 제작

이번 여름방학 중 파이썬 크롤링을 이용한 증권뉴스 모아따 웹을 제작해 보았다. flask와 beautiful soup을 사용해 실시간으로 업데이트 되는 증권뉴스를 모은 웹을 제작했다. 뉴스 기사는 네이버의

rotoma-code.tistory.com

👉 깃헙 링크

https://github.com/emilyjiminroh/python_crawling

 

GitHub - emilyjiminroh/stock_alarm-web_crawling_project: 2021 여름방학 Python web crawling 프로젝트

2021 여름방학 Python web crawling 프로젝트. Contribute to emilyjiminroh/stock_alarm-web_crawling_project development by creating an account on GitHub.

github.com


4. Smarcle-fair

→ 협업 프로젝트로 박람회 플랫폼 웹 서비스를 개발하고자 하였다.

<Tool>

HTML CSS JS

👉 개발 과정 및 세부 사항

[# 0 Prologue ] 박람회 플랫폼 개발 계획

 

[# 0 Prologue ] 박람회 플랫폼 개발 계획

2021년도 여름방학 기간동안 전반적인 HTML, CSS, JS 그리고 github에 대해 공부할 수 있었다. 공부한 내용을 직접 적용하고 더불어 팀 협업 프로젝트에 도전해보고자 박람회 플랫폼을 제작하기로 했

rotoma-code.tistory.com

[#1. Logic] 박람회 플랫폼 개발 로직

 

[#1. Logic] 박람회 플랫폼 개발 로직

본격 개발에 앞써, 창은 어떤 순서로 사용자에게 보여져야 하는지를 구체적으로 설계하는 과정인 개발 로직부터 세웠다. 로직을 설계함으로써 박람회 플랫폼의 흐름을 정확히 파악할 수 있고,

rotoma-code.tistory.com

[#2 Contents] 박람회 플랫폼 세부 디자인

 

[#2 Contents] 박람회 플랫폼 세부 디자인

웹의 흐름 로직을 잘 세워 보았으니, 이제는 창 별 세부 디자인을 세울 것이다. 세부 디자인을 세우면서 꼭 포함될 필수적인 부분이 있다!! 1. 어떤 요소가 들어가야 하는지 2. 어디에 요소가 위치

rotoma-code.tistory.com

[#3-1. Develop ] 박람회 플랫폼 개발 작업 (index & login)

 

[#3-1. Develop ] 박람회 플랫폼 개발 작업 (index & login)

앞서 개발을 위한 로직, 창 안에서의 컨텐츠 배치 등등의 세부 디자인 까지 기획했다. 이 모든 것은 개발을 좀 더 효율적으로 빠르고 체계적으로 하기 위한 준비 과정이라고 할 수 있다!! develop

rotoma-code.tistory.com

👉 깃헙 링크

https://github.com/Palllang/smarcle-fair

 

GitHub - Palllang/smarcle-fair

Contribute to Palllang/smarcle-fair development by creating an account on GitHub.

github.com


5. Sejong-maps

→ 2021 해커톤에서 개발한 4인 협업 프로젝트이며, 21,20 들을 위한 세종대학교 안내 웹 서비스이다.

→ 처음으로 인공지능을 결합한 웹 서비스이며, JS 코드로 인공지능 모델을 조작했다.

<Tool>

HTML ,CSS, JS , Node.js , Ejs

Teachable machine, kakao map api

👉 개발 과정 및 세부 사항

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F5DvO69N6MxCTseljEDjzIV%2Fsejong_maps%3Fnode-id%3D0%253A1

[#0 요약] Sejong_Maps 개발 기록

 

[#0 요약] Sejong_Maps 개발 기록

sejong_maps 세종대학교 21학번 신입생과 20학번 미개봉 중고를 위한 세종대학교 캠퍼스 안내 웹사이트, sejong maps! 기획의도 20, 21학번으로 구성되어 있는 팀이고, 비대면 수업이기 때문에 학교에 익

rotoma-code.tistory.com

👉 깃헙 링크

GitHub - emilyjiminroh/sejong_maps: 2021 해커톤

 

GitHub - emilyjiminroh/sejong_maps: 2021 해커톤 - 신입생들을 위한 캠퍼스 안내 웹 프로젝트 with AI

2021 해커톤 - 신입생들을 위한 캠퍼스 안내 웹 프로젝트 with AI. Contribute to emilyjiminroh/sejong_maps development by creating an account on GitHub.

github.com


6. Youtube clone coding (진행중)

→ 1인 프로젝트이며, 백엔드 구축을 위해 스터디를 동반하며 진행중인 활동

<Tool>

사용언어: Node.js, ES6 Express Babel Pug AJAX Webpack Passport ...

<Goal>

node.js를 이용해 백엔드부터 프론트엔드 그리고 배포하기까지가 목표인 프로젝트이다.