2023 계 모각소 

블루베리스무디 활동내용 및 발표자료

<팀원>

소프트웨어학과 박준혁

소프트웨어학과 송봉준

소프트웨어학과 오단비

소프트웨어학과 이대훈

소프트웨어학과 허태림


<팀원별 활동내용>

박준혁

웹 개발에서 백엔드 개발자로 javascript의 기초부터 학습 시작

Express 를 통한 api 구성 방법 숙지 및 서버 응답 방식 숙지

로그인, 회원가입 구현을 위한 session, access token 인증 방식 학습

access token 인증 방식 단점을 보안할 수 있는 access token + refresh token 을 이용한 인증 구현 시도 OAuth 2.0 인증 방식을 이용한 passport를 이용해 로그인, 

회원가입, 카카오, 구글 로그인 구현 랭킹 카테고리의 다양화를 위해 solve.ac의 api를 받아 유저의 백준 랭킹 받아오기 백엔드와 

프론트엔드 api 연동을 위한 fetch, axios, proxy 방법을 연구

송봉준

git 작동 원리 및 사용법 학습(협업 개발), 리액트 컴포넌트 작성 및 컴포넌트 스타일 실습, 리액트 hooks & 이벤트 핸들러 학습 및 실습, axios와 fetch을 통한 http 통신 학습

오단비

html/css, javascript 강의 수강 및 언어 학습. 깃허브 사용법 학습, 개발 코드 분석, React 기초 학습

이대훈

git 작동 원리 및 사용법 학습(협업 개발), 앱 관련 코딩 학습(CSS,HTML,JAVASCRIPT)

허태림

javascript, node.js 학습, node.js 데이터베이스 연동 방식 연구 (mysql, mongoDB). node.js express, passport 모듈 코드 작성 및 mongoDB 연동, 

passport-kakao 모듈을 사용하여 kakao 연동


<팀원별 최종성과>

박준혁

여러 가지 인증방식을 알아가는 좋은 기회였으며 최종적으로 session을 활용한 방식으로 로그인 api 구성 완료 

백엔드 개발 과정에서 router 를 통한 파일 재구성으로 가독성 높은 코드를 작성할 수 있게 됨

백준 티어를 가져오기 위해 solve.ac api 에 접근 함으로써 api 접근 법을 익히고 실습할 수 있는 기회였음

서버와 클라이언트, db 간의 통신 관계 이해를 바탕으로 api 구성을 할 수 있게 됨. 

백엔드와 프론트엔드 api 연동을 위해 여러 방식을 알아보다 fetch, axios, proxy 방법을 공부하게 됨. 

최종적으로 로그인, 회원가입, 네 가지 랭킹(주량, 백준, 학점, 운동) 페이지 구성을 위한 백엔드 코드 작성 완료

송봉준

메인페이지,로그인,회원가입,랭크 페이지 및 컴포넌트 작성

axios와 fetch를 통해 백엔드 api 연동 시도 리액트의 hook를 활용한 데이터 상태및 흐름 제어

오단비

html/css/javascript를 학습하고 웹 개발에 대한 개발방법, 스타일링 방법 등에 대한 학습. 

Git 사용법을 학습해 협업개발을 할 때 효율적으로 코드를 공유하는 법에 대한 학습.

React 기초 내용에 대한 학습을 하며 컴포넌트 사용 및 동적 웹사이트 제작에 대한 심화적인 개념을 배움. 

개발 코드 중 Css에서 배운 스타일들을 적용해 비밀번호 스타일, 정규 표현식 검사 등 관련 내용 추가해보는 실습 진행

이대훈

HTML, CSS, JavaScript를 배웠으며, 이를 통해 웹 페이지를 구축하는 법과 디자인하는 법을 습득. 

깃허브를 배우며 협업을 할 수 있는 능력을 배우고 리액트를 통해 동적이고 더 사용자 친화적인 웹 페이지 및 웹 애플리케이션을 구축하는 법을 배움. 

또한 Git을 통한 협업과 리액트를 사용한 웹 프로젝트를 깃허브에 배포하는 과정을 배움

허태림

javascript 문법 학습을 완료함. 

git을 활용해 express 모듈을 사용한 web 서버 node.js 소스 코드 구축. 

express, passport 코드 작성 및 mongoose 미들웨어를 사용한 로컬 로그인 전략 코드 작성함. express-session으로 사용자 인식. 

다양한 랭킹을 구현하기 위해 라우터를 사용하여 코드 개별화.


<팀원별 향후계획>

박준혁

백엔드와 프론트엔드 api 연동 이후 재배포 하여 주변 사람들이 재미를 목적으로 사용할 수 있게 하고싶다. 

댓글, 좋아요, 팔로우, 라이벌 기능을 추가 / mongoDB 이외의 sql 데이터베이스 공부를 통해 조금 더 효율적인 백엔드 코드를 작성해보고 싶다.

실습으로 실력을 쌓아 다양한 공모전, 해커톤에 참여하여 좋은 성과를 내고싶다.

송봉준

백엔드 api 연동을 위한 proxy,fetch,axios 통신 학습 및 실습

노드 학습 및 백엔드 api 개발 클라우드를 활용한 프로젝트 배포

오단비

React 개발에 대한 추가 학습, 향후 로그인, 회원가입 가능한 사이트 프론트 뿐 아니라 백엔드 내용까지 학습. 

CSS/html 학습 내용을 바탕으로 현존하는 웹사이트 클론코딩 진행해보기. Node js 공부.

이대훈

웹 개발 관련 js 추가 학습, React 개발 추가 학습, 프론트엔드 관련 디자인 실습, 프론트엔드 학습에 이어 백엔드,노드 학습하여 웹개발자의 역량 향상

허태림

백엔드 작동 방식을 더욱 세부적으로 파악하고, 프론트엔드 개발 추가 학습으로 풀스택 개발자가 될 수 있도록 함. 

웹 서버에 작동 방식을 파악하고 후속 활동으로 게임 서버 또한 공부하여 게임 서버와 웹 서버의 차이점을 파악 하고자 함.


<발표자료>