프로젝트 개요

유튜브 오픈 API를 사용하여 동영상 페이지 제작

프로젝트 목적

유튜브 API 사용 경험

Tailwind CSS 활용 경험

React Router를 사용하여 CSR 방식으로 제작

React Query를 사용한 상태관리 경험

Postman을 이용한 API 관리, 테스트 경험

사용 언어

React, Tailwind CSS

주요 기능

인기 동영상 기능 구현

검색 기능 구현

동영상 재생 기능 구현

채널 연관 동영상 리스트 구현

반응형 디자인

트러블슈팅 경험

문제: 메인 페이지와 연관 리스트에 중복되는 코드가 발생

해결: 하나의 컴포넌트에 prop으로 type 값을 전달해주고 값에 따라 다른 레이아웃으로 재사용하여 해결

느낀 점

API 사용 시 횟수 제한이 있기 때문에 mock data를 사용하여 테스트 하는 방법을 배움

React Router를 사용하여 필요한 데이터만 라우팅 하는 법을 깨달음

React Query로 Hook의 문제점을 보완하며 상태관리 하는 것을 경험함

프로젝트 개요

리액트 컴포넌트를 활용하여 목록을 관리하는 페이지 제작

프로젝트 목적

React 활용 능력 함양

useState, useEffect를 통한 상태관리로 목록 기능 구현

Context를 통한 전역 데이터 관리 경험

PostCSS 사용 경험

사용 언어

React, PostCSS

주요 기능

목록 추가, 삭제 기능 구현

전체, 진행 중, 완료 카테고리 구현

다크모드 구현

페이지 새로고침 시 데이터 유지 기능 구현

트러블슈팅 경험

문제: 모든 label 클릭 시 첫 번째 항목의 checkbox가 체크되는 현상 발생

해결: 항목 생성 시 동일한 id를 사용하여 발생한 오류로, uuid를 통해 랜덤 값을 id로 부여하여 해결

느낀 점

useState 사용 시 컴포넌트가 리렌더링될 때마다 초깃값이 다시 전달되기 때문에 함수를 콜백함수로 호출해야 한단 걸 깨달음

useEffect을 사용하여 JSON으로 변환한 데이터를 LocalStorage에 저장하여 유지하는 법을 배움

Context를 사용하여 전역 데이터를 관리하는 경험을 함

PostCSS를 통해 css를 모듈화하여 오버라이딩을 방지하는 법을 배움

프로젝트 개요

학습자를 위한 MOBILE에 최적화된 LMS(학습지원시스템) 웹 사이트 개발

프로젝트 목적

페르소나 설정을 통해 UI/UX분석 경험

학습자용 정보구조, 화면구조, 데이터베이스 설계 경험

PHP, SQL 데이터베이스를 사용한 장바구니 기능 구현

오픈 라이브러리와 API 사용 경험

사용 언어

HTML, CSS, SASS, JavaScript, jQuery, PHP, MySQL

맡은 역할·기능

메인 페이지, 강의, 검색 페이지 개발

메인 페이지 강의 - 이중 탭메뉴 기능 구현

메인 페이지 수강평 - 자동 슬라이드 기능 구현

강의 페이지 리스트 - 탭메뉴로 목록 출력 기능 구현

강의 페이지 상세보기 - 강의 데이터 출력 기능 구현

검색 페이지 - 태그 검색 기능 구현

트러블슈팅 경험

문제: 메인 강의에 이중 탭메뉴가 각각 동작하지 않고 중복으로 작동되는 현상 발생

해결: 첫 번째 탭메뉴는 라디오버튼을 활용한 css로, 두 번째 탭메뉴는 자바스크립트로 구현하여 따로 동작하도록 해결

느낀 점

게시판 글쓰기와 챗봇 기능을 구현하며 다양한 라이브러리와 API 사용법을 배움

PHP 정규 표현식을 사용하며 문자열을 표현하는 방법을 배움

사용자 ID: qwer, PASS: 1234

프로젝트 개요

관리자를 위한 PC에 최적화된 LMS(학습지원시스템) 웹 사이트 개발

프로젝트 목적

관리자용 정보구조, 화면구조, 데이터베이스 설계 경험

관계형 데이터베이스 경험

오픈 API 사용 경험

사용 언어

HTML, CSS, JavaScript, jQuery, PHP, MySQL

맡은 역할·기능

1:1문의, 쿠폰 관리 페이지와 로그인, 회원가입 페이지 개발

각 페이지의 탭메뉴와 검색, 페이지네이션 기능 구현

1:1문의 관리 페이지 - 답변 여부에 따라 나누어서 출력, 답변 기능 구현

쿠폰 관리 페이지 - 쿠폰 목록 출력, 관리 기능 구현

로그인 페이지 - 아이디 저장, 로그인 기능 구현

회원가입 페이지 - 아이디 중복 확인, 회원가입 기능 구현

트러블슈팅 경험

문제: 탭메뉴와 페이지네이션의 동작 방식 차이 때문에 페이지가 새로고침되는 현상 발생

해결: 탭메뉴 li에 parameter 값을 부여해서 클릭 시 url 값을 변경하여 이동하는 방식으로 해결하며 페이지를 제어하는 방식을 배움

느낀 점

관계형 데이터베이스를 통해 여러개의 테이블을 효율적으로 관리하는 능력을 키움

PHP에서 조건문을 사용하여 다양하게 데이터를 출력하는 경험을 함

url 파라미터 값으로 페이지 이동을 제어하는 방법을 배움

관리자 ID: admin, PASS: admin

프로젝트 개요

시가총액 100대 기업 중 한 곳을 선정하여 기존 홈페이지를 적응형 웹으로 리뉴얼

프로젝트 목적

적응형 웹 제작 능력 함양

Git, GitHub를 통한 형상관리, 협업 경험

PHP, SQL 데이터베이스를 사용한 데이터 입력, 출력 경험

카카오 지도 API 활용

meta tag를 통한 SEO(검색엔진 최적화) 경험

사용 언어

HTML, CSS, JavaScript, jQuery, PHP, MySQL

맡은 역할·기능

PC와 MOBILE 메인 페이지와 입사 지원, 지원 현황 페이지 개발

메인 페이지 - 풀페이지 스크롤 기능 구현

메인 페이지 매장 정보 - 매장명 선택 시 정보 변경 기능 구현

채용 페이지 지원하기 - 데이터 입력 기능 구현

채용 페이지 지원현황 - 데이터 출력 기능 구현

트러블슈팅 경험

문제: 모바일 GNB의 서브 메뉴를 연속으로 빠르게 탭하면 탭한만큼 동작하는 현상 발생

해결: stop 메서드를 추가하여 탭할 시에 이전 동작을 취소시켜서 해결

느낀 점

기획자, 디자이너의 요구대로 구현하기 위해 여러번 회의를 하며 소통 능력을 키움

GitHub를 통해 협업하며 버전 관리의 중요성을 느낌

MySQL로 테이블을 만들고 PHP로 데이터를 수집, 출력하며 데이터베이스에 대해 이해하게 됨

프로젝트 개요

선호하는 브랜드를 선정하여 기존 홈페이지를 적응형 웹으로 리뉴얼

프로젝트 목적

적응형 웹 제작 능력 함양

장치 유형 식별을 위한 userAgent 사용 경험

JavaScript의 effect, event 메서드 활용

Ajax를 사용한 JSON 데이터 출력 경험

사용 언어

HTML, CSS, JavaScript, jQuery, Ajax

주요 기능

PC와 MOBILE 메인 페이지 개발

메인 페이지 상단 배너 - 자동 슬라이드, 내비게이션 버튼 기능 구현

메인 페이지 어바웃 - 탭메뉴 기능 구현

메인 페이지 아이템 - 아코디언 기능 구현

메인 페이지 이벤트 - 자동 슬라이드 기능 구현

메인 페이지 SNS - Ajax를 사용하여 더 보기 기능 구현

트러블슈팅 경험

문제: 메인 슬라이드를 처음 실행했을 때 fadeOut이 순차적으로 처리되어 이미지가 깜빡이는 현상 발생

해결: css에서 미리 첫 번째 슬라이드를 제외한 나머지의 display 속성을 none 하는 방법으로 해결하며 자바스크립트의 비동기 처리에 대해 이해함

느낀 점

혼자 개발하는 과정에서 스스로 문제점을 찾고 해결하며 뿌듯함을 느낌

JavaScript로 여러 효과를 구현하며 응용 하는 능력을 키움

JSON으로 데이터를 쉽게 관리하는 방법을 배움