[내일배움캠프-사전캠프 16일차(마지막)] 사전캠프 최종 검토

사전캠프를 통해 배웠던 내용들과 그 내용들 바탕으로 만든 프로젝트를 최종 보고서 형태로 작성하였습니다.

---

---

Chater 01 - Beginnings

 1. 자기소개 

 

안녕하세요 ! 백엔드 개발자를 꿈꾸는 박신영입니다.

 

개발 지식의 깊이가 아직 부족하다고 판단하여, 이를 극복하고 더 깊이 있는 역량을 쌓기 위해 Spring Track에 참여하게 되었습니다.

작은 것 부터 하나하나 쌓아가겠습니다 😎

저는 끊임없이 배우고 성장하는 개발자가 되고 싶습니다.

지금까지 HTML/CSS/JavaScript를  간단한 웹 화면을 구현해 본 경험이 있으며, 
SQLD 및 ADSP, 정보처리기사, 빅데이터분석기사 자격증을 취득하며 데이터베이스와 프로그래밍 역량을 쌓아왔습니다.

이러한 경험을 바탕으로, 앞으로는 웹 백엔드 개발에 집중하여 
탄탄한 실력을 갖춘 개발자로 성장하는 것이 목표입니다.

끊임없이 배우고 경험을 쌓아 웹 백엔드 개발자로 자리 잡는 것이 최우선 목표이며, 
5년 후에는 더욱 성장한 개발자로서 깊이 있는 기술력과 경험을 갖춘 전문가가 되고 싶습니다. 🚀

 2. 배우고 싶었던 역량과 학습한 기술 스택 

01) 배우고 싶었던 역량

저는 이번 Spring track 에서 아래와 같은 역량을 쌓고자 했습니다.

이번 사전 캠프를 통해 실전 웹 개발 능력, 데이터베이스 관리, JAVA 언어에 대한 역량을 학습할 수 있었습니다.

02) 학습한 기술 스택

제가 이번 사전캠프동안 습득한 기술 스택은 아래와 같습니다.  

SQL, JAVA, HTML, JS, CSS, Git, GitHub, Firebase 가 있습니다.

---

Chater 02 - Tech Stack

학습했던 내용들을 정리한 챕터입니다. 각 기술 스택 별로 대표 블로그 링크를 연결해두었습니다.

 1. SQL 

SQL 대표 블로그: 2025.02.04 - [백엔드 부트캠프[사전캠프]/TIL] - [내일배움캠프-사전캠프 09일차] Web 3주차 ~ 4주차

[내일배움캠프-사전캠프 09일차] Web 3주차 ~ 4주차

01) 기술스택 :

- SQL, 데이터 베이스 조회, 쿼리작성

02) 학습내용

- 기본 쿼리: SELECT, FROM, WHERE 데이터를 추출 및 필터링하 데이터 조회 방법 학습
- 조건문: BETWEEN, IN, LIKE 등을 사용하여 조건에 맞는 데이터를 조회 학습
- 논리 연산자: AND, OR, NOT을 사용하여 여러 조건을 결합하거나 부정하는 방법을 학습
- 문자열 및 날짜 처리: REPLACE, SUBSTRING, CONCAT, DATE 등의 함수를 사용하여 데이터 가공, 조작 방법 학습 
- 제어문: IF, CASE를 사용하여 조건에 따른 데이터를 처리하는 방법을 학습
- 기타 기능: JOIN을 활용, COALESCE를 사용하여 데이터 가공, Segmentation을 사용하여 데이터를 집계하고 분석, Window 함수 활용

03) 문제접근법

- Local MySQL Server 에서 Table 을 만들어 데이터를 조회하는 방식으로 접근하였다.

 2. JAVA 

JAVA 대표 블로그: [응용문제] 야구 스트라이크 문제

[응용문제] 야구 스트라이크 문제

01) 기술 스택

- Java 기본문법(조건문, 반복문, 자료구조), Random클래스, 입력처리, 조건 처리

02) 학습내용

- 배열 및 리스트 활용: ArrayList, Hash와 같은 자료구조를 사용하여 데이터를 저장하고 관리하는 방법을 학습 
- 조건문 및 비교 연산: if문을 사용하여 게임의 승패를 결정하는 방법을 구현.
- 랜덤 데이터 생성: Random 클래스를 이용하여 랜덤으로 숫자를 생성하는 기능을 구현
- 반복문: for문을 통해 게임을 반복하고 처리하는 방법을 구현
-입력 처리: Scanner를 사용하여 사용자 입력을 받아 처리하는 방법 구현
- 분기문: 결과에 따라 다른 로직을 주기 위해 Switch문을 활용

03) 문제 접근법

- Intellij IDEA를 활용해 자바 프로그램을 실행하고, 코드 작성 시 발생한 오류는 구글링과 ChatGPT를 통해 해결하였다.

 3. Front - End 

Front-End 대표 블로그: [내일배움캠프-사전캠프 09일차] Web 3주차 ~ 4주차

[내일배움캠프-사전캠프 09일차] Web 3주차 ~ 4주차

01) 기술 스택

- HTML, CSS, BootStrap , JavaScript, jQuery, Fetch 날씨 API 호출

02) 학습내용

- HTML: 웹 페이지의 기본적인 구조 설계, 다양한 HTML 요소 학습
- CSS: 웹 페이지를 시각적으로 구성하는 방법 학습 
- JavaScript : 웹 페이지에서 동적인 상호작용을 처리하는 방법을 학습. JS의 기본 문법과 이벤트 처리 학습, 사용자의 입력을 처리하고, UI의 변화와 상호작용을 제어하는 방법을 학습.
- jQuery: DOM 조작, JS의 다양한 기능을 간편하게 사용할 수 있는 방법과 코드를 단순화하는 방법 학습
- Bootstrap: Button, Form, Modal, Toast 등을 구현
- Fetch API: 데이터를 요청하고 처리하는 방법을 학습. 이를 통해 날씨 API 호출

03) 문제 접근법

- 웹사이트의 개발자 도구를 이용하여 HTML구조와 CSS 를 수정하였다. 실행 오류가 발생 시, 콘솔을 확인 후 해당 오류를 다양한 문서와 구글링을 통해 문제를 해결하였다.

 4. Firebase 

Firebase 대표 블로그: [내일배움캠프-사전캠프 11일차] Web 프로젝트 1일차

[내일배움캠프-사전캠프 11일차] Web 프로젝트 1일차

01) 기술 스택

- 실시간 데이터베이스, 데이터 추가/삭제/편집, 데이터 조회, 임의 ID 생성

02) 학습내용

- 데이터 처리: Firebase를 활용하여 데이터를 실시간으로 처리하고, 데이터를 추가, 수정, 삭제하는 방법을 학습
- 데이터 표시: 웹 페이지에서 Firebase로부터 데이터를 실시간으로 받아오고, 이를 표시하는 방법을 익힘
- 데이터 송수신: 사용자가 입력한 데이터를 Firebase로 보내고, Firebase에서 데이터를 받아와 웹에 표시하는 구현
- 사용자 정의 ID 지정: Firebase에서 자동 생성되는 ID가 아닌, 사용자 지정 값을 ID로 설정하는 방법 구현

03) 문제 접근법

- Firebase에서 실시간으로 데이터를 송수신하며 데이터 검증을 수행하였다.
- 웹 브라우저 개발자 도구의 콘솔을 통하여 오류 발생 여부를 검사하였다.

5. Git

Git 대표 블로그: [내일배움캠프-사전캠프 14일차] Web 프로젝트 4일차 [완성]

[내일배움캠프-사전캠프 14일차] Web 프로젝트 4일차 [완성]

01) 기술 스택

- Git, Github, Git Bash

02) 학습내용

- Git 연동 : git init, git remote 명령어를 통해 원격 저장소와 로컬 저장소를 동기화하는 방법을 익혔습니다. 
- 버전 관리: git commit, git push, git pull 명령어를 통해 파일을 버전, 코드 변경 사항을 관리하는 방법 학습
- Ignore: 웹 배포 시 API 키 보안을 위한 Ignore 방법을 익힘
- Read.me: 프로젝트에 대한 설명을 추가하여 프로젝트 문서화를 진행

---

Chater 03 - Project

- 사전캠프 퀘스트와 강의를 마친 후 복습을 위하여 배웠던 내용을 바탕으로 웹 애플리케이션을 제작했습니다.

 1. Project 개요 

01) 프로젝트 이름

• " To Do App - Simple "

02) 프로젝트 설명

•  이 프로젝트는 사용자가 일정을 관리할 수 있도록 돕습니다.
•  작업을 추가, 수정, 삭제할 수 있는 직관적인 인터페이스를 제공합니다.
•  Firebase를 활용하여 실시간 데이터 저장 및 동기화를 처리합니다.
•  HTML, CSS, Bootstrap을 사용해 디자인하고, JavaScript와 jQuery로 상호작용을 강화했습니다

 2. 핵심기능 

01) 일정 추가:
사용자가 새로운 일정을 목록에 추가할 수 있습니다.

02) 일정 수정:
기존에 등록한 일정을 편집할 수 있습니다.

03) 일정 삭제:
더 이상 필요 없는 일정은 삭제할 수 있습니다.

04) 완료 표시:
일정이 끝나면 완료 상태로 표시할 수 있습니다.

05) 오늘의 날씨 확인:
웹에서 바로 현재 날씨 정보를 확인할 수 있습니다.

 3. 사용한 기술 스택 

01) Front-End

- 직관적인 UI를 설계, 동적인 사용자 경험을 구현.

02) Back-End

- Firebase를 이용한 실시간 데이터 동기화, 서버 없이 데이터 조작을 JavaScript 코드만으로 구현

03) Environment

- 개발환경은 vsCode 이용, Github와 Git을 통해 연동 및 배포 진행

04) Data Schema

- id, taskName, completed, date 필드로 최소한의 구조를 설계, 간결하면서도 필요한 데이터를 효율적으로 관리할 수 있도록 구성

 4. 개발 과정 속 문제 해결 

01) Bootstarp 모달 접근성 오류

- Bootstarp 을 이용해 모달을 추가했으나, 모달이 정상적으로 동작하지 않는 오류 발생

- 포커스가 있는 요소는 보조 기술을 사용하는 사용자에게도 여전히 접근 가능해야 하며, aria-hidden을 사용하여 그 요소를 숨기는 것은 접근성을 저하시킬 수 있기 때문에 문제가 발생

- document.activeElement.blur()를 통해 모달이 닫힐 때 포커스를 제거 처리 하여 문제 해결

02) 동적 버튼 클릭 문제

- 동적으로 추가된 버튼은 첫번째 버튼만 동작하는 문제 발생.

- $('.btn-class').click(function() {...}) 형태로 접근하면, 여러 버튼이 있을 때 첫 번째 버튼만 인식되는 문제가 발생.

- 해결 방법으로 $(document).on('click', '.btn-class', function() {...})을 사용하여 동적으로 추가된 요소에도 이벤트가 적용되도록 개선

03) Fetch API 가 웹 배포 오류

- Fetch로 추가한 날씨 API가 Git 웹 배포 시, 제대로 작동하지 않는 문제 발생

- url 의 'http' 를 'https' 로 변환해주니 문제 개선

04) Firebase를 활용한 서버리스 백엔드 설계

- 별도의 백엔드 서버 없이 JavaScript만으로 데이터베이스를 관리하려 했지만, Firebase의 데이터 처리 방식과 일반적인 백엔드 개발의 차이점을 이해하는 과정이 필요했음.

- Firestore를 사용해 CRUD 작업을 수행하고, 실시간 동기화 기능을 활용하여 데이터 관리.

 5. 결과물 

01) 일정 추가

02) 일정 수정

03) 할일 삭제

- To Do 목록에 있던 데이터가 삭제

04) 완료 여부

- To Do 에 있던 내용이 Done 으로 이동하게 됨.

05) 오늘의 날씨 확인

- Fetch API 를 통해 오늘의 날씨 확인 가능

06) 전체 화면

 6. 배포 

- Git hub Read.me " sinyoung0403/Todo_simple "

- 배포 URL: "https://sinyoung0403.github.io/Todo_simple/"

---

Chapter 04. Final Thoughts

 1. 결론 

01) 프로젝트 성과

- 프론트엔드 개발: HTML, CSS, JavaScript, jQuery, Bootstrap을 사용하여 직관적인 UI와 동적인 프론트 구현.

- API 연동: 날씨 정보를 제공하는 Fetch API를 통해 실시간 날씨 데이터를 앱에 통합, 사용자에게 유용한 정보를 실시간으로 제공.

- 백엔드 연동: Firebase를 활용해 서버리스 백엔드를 구현하고, 데이터베이스 관리, 실시간 동기화 등의 기능들을 처리

- 기능 구현: 사용자에게 할 일 목록을 추가, 수정, 삭제할 수 있는 기능을 제공하고, 완료된 작업을 쉽게 표시할 수 있는 기능을 추가

02) 배운 점

- 프론트엔드 기술 이해: HTML, CSS, JavaScript의 기초부터, jQuery와 Bootstrap을 활용한 동적 UI 개발까지 다룰 수 있게 되었습니다. 특히 부트스트랩을 통해 반응형 디자인을 쉽게 구현할 수 있었고, jQuery로는 복잡한 DOM 조작과 이벤트 처리를  다룰 수 있었습니다.

- Fetch API 연동: 외부 날씨 API를 연동하여 실시간 정보를 받아오고 처리하는 방법을 배웠습니다. 이를 통해 API 호출과 JSON 데이터 처리의 흐름을 이해할 수 있었습니다.

- 백엔드 연동: Firebase를 이용한 서버리스 백엔드 연동을 통해 데이터베이스와 실시간 동기화 기능을 구현하는 법을 배웠습니다. 서버를 직접 구축하는 대신 클라우드 서비스를 활용하여 빠르게 백엔드 기능을 처리하는 방법을 익혔습니다.

- 문제 해결 능력: 모달 창 오류나 버튼 클릭 문제와 같은 실제 개발에서 마주한 이슈들을 해결하는 과정에서 문제 해결 능력이 크게 향상되었습니다. 특히 jQuery 이벤트 위임 방식과 동적 요소 처리를 익히면서 개발자의 문제 해결 능력이 강화되었습니다.

이 프로젝트는 제가 프론트엔드와 백엔드 기술을 모두 경험하며, 웹 프로젝트를 구축하는 데 중요한 경험이 되었습니다. 

 2. 앞으로의 각오 

- 앞으로 Spring Boot와 Java에 대해 더 공부하며 백엔드 개발 능력과 API 설계에 대한 이해를 깊이 있게 쌓고 싶습니다. 

- 본캠프의 Spring track에 참여하는 만큼, 실습 중심의 교육을 통해 실제 프로젝트에 적용 가능한 기술을 배우고, 팀워크와 문제 해결 능력을 학습해 나가겠습니다. 전문적인 백엔드 개발자로서의 자질을 다지고, 실제 기업에서 요구하는 기술을 습득할 준비가 되어 있습니다! 끊임없는 학습과 도전으로 더 나은 개발자로 성장해 나갈 것입니다 🚀🚀

 3. 그 외의 정보 

GitHub: sinyoung0403 (Sycd0403)

기술 블로그 : https://sintory-04.tistory.com/