P O R T F O L I O

메뉴 탭입니다. 각 페이지로 이동할 수 있습니다.

우측 하단의 버튼을 눌러 터미널을 열어보세요. 명령어를 입력할 수 있습니다.

제가 습득한 언어입니다. 클릭하면 노션으로 정리노트를 확인할 수 있습니다.

포트폴리오 보러가기!

TERMINAL

명령어

버전 확인 : portfolio -v | portfolio -version

페이지 : #home | #project | #aboutme | # skills

P R O J E C T

Back-End
Front-End

PORTFOLIO

사이트 가기

✔️ 기술 스택

Back-End : Spring Boot 3.0(Java 17) Database : MariaDB Front-End : React JS, SCSS

✔️ 구현 페이지

로그인/로그아웃 : 아이디, 비밀번호를 검증해 쿠키에 정보 유지 회원가입 : 다양한 정보를 데이터 타입에 맞게 마리아 디비에 들어가도록 구현했습니다. 게시판 : 작성, 수정, 삭제와 댓글 기능이 있습니다. 로그인이 되어있지 않았을 때 로그인페이지로 이동하게 구현했습니다. 메모 : 작성, 수정, 삭제와 전체 삭제 기능이 있습니다. 로그인이 되어있지 않았을 때 로그인페이지로 이동하게 구현했습니다.

✔️ 데이터 테이블

✔️ API 요청

멤버
Member	호스트	https://api.codeditlearn.com/api/member
종류	메서드	요청URL
로그인	POST	/login
회원가입	POST	/join
회원정보	GET	/info/{userId}
회원탈퇴	DELETE	/leave

게시판
Board	호스트	https://api.codeditlearn.com/api/board
종류	메서드	요청URL
작성	POST	/write
수정	POST	/edit
삭제	DELETE	/remove/{id}
상세	GET	/info/{id}
목록	GET	/list
검색목록	GET	/listBySearch?search=

댓글
Comment	호스트	https://api.codeditlearn.com/api/comment
종류	메서드	요청URL
작성	POST	/write
수정	POST	/edit
삭제	DELETE	/remove/{id}
목록	GET	/list/{bid}
답글목록	GET	/replyList/{ref}/{bid}

메모
Memo	호스트	https://api.codeditlearn.com/api/memo
종류	메서드	요청URL
작성	POST	/write
수정	POST	/edit
삭제	DELETE	/remove/{uuid}
모두삭제	DELETE	/removeAll/{userId}
목록	GET	/list/{userId}

기획서 보기

✔️ 기술 스택

Back-End : JSP/SERVLET(Java 8/Apache Tomcat 9) Database : ORACLE 11g Front-End : HTML, CSS, JS, JQuery

✔️ 구현 페이지

로그인/로그아웃 : 아이디와 비밀번호를 조건으로 쿼리문을 작성하여 성공 시 해당 유저의 정보를 불러와 세션에 부여했습니다. 로그아웃은 세션만료처리로 구현했습니다. 회원가입 : 다양한 정보를 데이터 타입에 맞게 오라클 데이터베이스에 들어가도록 구현했습니다. 1:1 문의 게시판 : 글 작성, 수정, 삭제와 1:1문의에 대한 답변 달기를 만들었으며, 로그인이 되어있지 않았을 때 로그인페이지로 이동하게 구현했습니다.

✔️ 데이터 테이블

TODOLIST
사이트 바로가기

작업 기간 : 2일

REACTSCSS

컴포넌트에 대한 이해와 state, props 관리로 리액트 개발의 흐름을 파악할 수 있었습니다. react-cookie 라이브러리를 사용해 메모를 쿠키에 저장할 수 있게 했습니다.
WEATHER
사이트 바로가기

작업 기간 : 1일

REACTCSSAPIJSON

fetch 함수를 이용하여 외부 API를 불러와 JSON 데이터를 사용해 도시 별 날씨 정보를 구현했습니다.
네이버웹툰
사이트 바로가기

작업 기간 : 3일

HTMLCSSJAVASCRIPT

CSS3의 float 속성을 활용한 홈페이지 제작입니다.
float을 활용한 웹사이트의 구조를 이해할 수 있는 작업이었습니다.
카카오프렌즈
사이트 바로가기

작업 기간 : 2일

HTMLCSSJAVASCRIPT

미디어 쿼리를 이용한 반응형 웹페이지입니다. 브라우저의 크기 변화에 따라 Mobile, Tablet, PC로 나눠 CSS에 변화를 줬습니다.
로지텍
사이트 바로가기

작업 기간 : 2일

HTMLCSSJAVASCRIPTJQUERY

CSS3의 flex 속성을 활용한 홈페이지 제작입니다. flex를 활용한 웹사이트의 구조를 이해할 수 있는 작업이었습니다.
카트라이더
사이트 바로가기

작업 기간 : 1일

HTMLCSSJAVASCRIPTJQUERY

CSS3의 트랜지션 효과와 호버 효과를 사용하여 역동적인 느낌의 사이트를 제작했습니다.
마리오
사이트 바로가기

작업 기간 : 4일

HTMLCSSJAVASCRIPTJQUERY

CSS3의 애니메이션 효과와 꽃가루 라이브러리를 사용하여 역동적인 페이지를 제작했습니다.
뉴진스
사이트 바로가기

작업 기간 : 1일

HTMLCSSJAVASCRIPTJQUERY

애니메이션 효과와 position 속성을 통한 구조 설계로 제작한 사이트입니다. video태그를 활용해 배경을 영상으로 꾸며 역동적인 홈페이지로 만들었습니다.