프리티어 LLM 파이프라인 웹 구성 (GitHub Pages 및 Glitch 사용)
총 학습 일수
0일
이번 달 학습 일수
0일
Day 15
📚 오늘의 학습 목표
📖 배운 내용
- GitHub Pages를 이용한 웹 페이지 배포
- Glitch를 사용한 서버 구축
- HTML, CSS, JavaScript를 사용한 웹 페이지 구성
- Node.js 및 Express.js를 사용한 백엔드 서버 개발
- 다양한 LLM API (Together, Groq) 연동 및 호출
- .env 파일을 사용한 API 키 관리
- .gitignore 파일을 사용한 Git 저장소 관리
- package.json 파일 이해 및 프로젝트 설정 관리
- API 문서 활용 및 모듈화를 통한 코드 재사용성 및 가독성 향상
- console.log를 활용한 디버깅 및 디버깅 도구 필요성 인지
💻 실습 결과물
프론트엔드 레포지토리: https://github.com/TestSetupMyOrganizationByUSN/llm-prj-test
백엔드 레포지토리: https://github.com/TestSetupMyOrganizationByUSN/llm-prj-test-wrapper
🤔 느낀점
처음으로 백엔드 개발을 경험하면서 여러 API를 다루는 것이 쉽지 않다는 것을 느낌. 특히 API 문서를 제대로 읽고, 데이터 흐름을 정확하게 파악하는 것이 중요하다고 생각함.
모듈화를 통해 코드를 체계적으로 관리하는 것이 얼마나 중요한지 깨달음. 앞으로도 모듈화를 적극적으로 활용하여 코드의 가독성과 유지보수성을 높이도록 노력해야겠음.
console.log를 사용한 디버깅 외에도, 디버깅 도구를 익혀서 더욱 효율적으로 개발할 수 있도록 노력해야겠음.
❗ 트러블 슈팅
ES6 모듈 오류
원인: Glitch 환경에서 ES6 모듈을 사용하기 위한 설정이 필요함.
해결: package.json 파일에 `"type": "commonjs"` 추가
Day 13
Day 12
📚 오늘의 학습 목표
비동기 프로그래밍 이해
콜백 함수, Promise, async/await 활용
JSON과 AJAX 개념 익히기
Fetch API와 Axios를 사용한 HTTP 요청
웹페이지 배포 및 호스팅 이해
📖 배운 내용
비동기 프로그래밍
- 동기 vs 비동기
- 싱글 스레드와 비동기 처리
콜백 함수
- 콜백 함수 개념
- 콜백 헬
- 콜백 헬 해결 원칙
- 오류 처리
Promise
- Promise 개념 및 상태
- Promise 생성 및 사용법
- Promise 체이닝
- 오류 처리
- Promise.all()
- Promise.race()
async/await
- async/await 문법
- Promise와의 관계
- 오류 처리
- 병렬 실행
- 주요 이점
- 순차적 실행
- 병렬 실행
JSON
- JSON 소개 및 구조
- JSON 파싱과 직렬화
- JSON과 JavaScript 객체 비교
AJAX
- AJAX 정의
- Fetch API
- Axios
Fetch API
- Fetch API 소개
- CRUD와 HTTP Method
- GET, POST, PUT, DELETE 요청
- Fetch API 주요 옵션
- Fetch API 응답 처리
Axios
- Axios 소개
- GET, POST, PUT, DELETE 요청
- Axios 주요 기능
Fetch API vs Axios 비교
- 문법 간결성
- 자동 변환
- 에러 처리
- 브라우저 지원
웹페이지 배포
- 정적 사이트 vs 동적 사이트
- 웹 서버 vs 웹 애플리케이션 서버
- 웹의 진화: Web1 → Web2 → Web3
- 정적/동적 사이트 호스팅 플랫폼 비교
- 서버리스와 콜드 스타트
- 프레임워크별 호스팅 추천
💻 참고 자료
🤔 느낀점
비동기 프로그래밍의 중요성을 이해하고, 콜백 함수, Promise, async/await를 사용하여 비동기 작업을 효율적으로 처리하는 방법을 익혔다.
JSON을 사용하여 데이터를 교환하고, AJAX를 통해 비동기적으로 서버와 통신하는 방법을 익혔다.
Fetch API와 Axios를 사용하여 HTTP 요청을 보내고 응답을 처리하는 방법을 익혔다.
웹페이지 배포 및 호스팅에 대한 다양한 정보를 익혔다. 정적/동적 사이트, 호스팅 플랫폼, 서버리스 등에 대한 이해를 높였다.
❗ 트러블 슈팅
Promise 체이닝 오류
원인: Promise 체이닝에서 then 메서드의 반환값이 Promise가 아닌 경우 발생
해결: then 메서드에서 Promise를 반환하도록 코드 수정
Day 11
📚 오늘의 학습 목표
DOM 조작 심화 학습
이벤트 처리 심화 학습
localStorage 활용
직렬화 및 역직렬화 이해
📖 배운 내용
DOM
- innerHTML과 innerText의 차이
- NodeList와 배열
- 외부 JavaScript 파일 연결
- 동적 요소 생성 및 이벤트 처리
- 이벤트 리스너 추가 및 제거
- 기본 동작 방지
이벤트 처리
- onclick 속성
- addEventListener와 removeEventListener
- 다중 이벤트 리스너
- event.preventDefault()
localStorage
- localStorage 사용
- 데이터 저장, 수정, 삭제
- JSON.stringify() 및 JSON.parse()를 사용한 직렬화 및 역직렬화
💻 학습파일, 실습 결과물
🤔 느낀점
DOM 조작 심화 학습을 통해 웹 페이지의 요소를 더욱 효율적으로 다루고, 동적인 웹 페이지를 만드는 데 필요한 기술을 다뤘다.
이벤트 처리 심화 학습을 통해 다양한 이벤트를 처리하고, 사용자 상호 작용에 따라 웹 페이지를 동적으로 제어를 해보았다.
localStorage를 활용하여 웹 브라우저에 데이터를 저장하고, 웹 페이지를 새로 고쳐도 데이터가 유지되도록 해보았다.
직렬화 및 역직렬화를 통해 데이터를 문자열로 변환하여 저장하고, 다시 객체로 복원하는 방법을 익혔다.
❗ 트러블 슈팅
localStorage 저장 오류
원인: localStorage에 객체를 직접 저장하려고 시도
해결: JSON.stringify()를 사용하여 객체를 문자열로 변환 후 저장
Day 10
📚 오늘의 학습 목표
DOM (Document Object Model) 이해와 조작
이벤트 처리 및 콜백 함수 활용
문자열 조작 심화 학습
GitHub Organization 생성 및 관리
📖 배운 내용
DOM
- DOM 트리 구조와 탐색
- DOM 요소 선택 (getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll)
- DOM 조작 (요소 생성, 추가, 삭제, 수정)
이벤트 처리
- 이벤트 리스너 추가 및 제거 (addEventListener, removeEventListener)
- 이벤트 객체 (event.key, event.clientX, event.clientY, event.target)
- 이벤트 위임
- 콜백 함수
- 기본 동작 방지 (event.preventDefault)
문자열 조작
- 문자열 기본 (생성, 길이, 접근)
- 부분 문자열 검색 (indexOf, lastIndexOf, includes, startsWith, endsWith)
- 부분 문자열 추출 (slice, substring)
- 부분 문자열 교체 (replace, replaceAll)
- 대소문자 변환 (toUpperCase, toLowerCase)
- 문자열 분할 및 결합 (split, join)
- 공백 제거 (trim, trimStart, trimEnd)
- 템플릿 리터럴 및 문자열 보간
- 정규 표현식
GitHub Organization
- Organization 생성
- 저장소 생성 및 관리
💻 학습 파일
🤔 느낀점
DOM을 이용하여 웹 페이지를 동적으로 조작하는 방법, 이벤트 처리를 통해 웹 페이지를 사용자와 상호작용으로 반응하게 할 수 있다는것 알게되었다.
문자열 조작 심화 학습을 통해 다양한 문자열 처리 기술과 정규 표현식을 사용하여 복잡한 패턴을 검색하고 조작하는 방법을 알게 되었다.
GitHub Organization을 생성해보았다. 팀과 저장소를 관리하고 협업하는데 유용한 도구라고 한다.
Day 9
📚 오늘의 학습 목표
자바스크립트 심화 학습 (함수, 배열, 객체)
다양한 예제를 통한 개념 숙달
📖 배운 내용
함수
- 함수 선언식과 함수 표현식
- 화살표 함수
- 기본 매개변수와 나머지 매개변수
- 콜백 함수
- 클로저
- 렉시컬 환경
- 스코프
- 함수의 반환값
배열
- 배열 메서드 (forEach, map, filter, reduce)
- 구조 분해 할당
- 스프레드 연산자
객체
- 객체 생성 및 접근
- 객체 메서드 (Object.keys(), Object.values(), Object.entries())
💻 실습 결과물
🤔 느낀점
- 호이스팅의 이중성
- 고차 함수의 위력
- 에러 처리의 중요성
- 스코프 관리
- 구조 분해의 실용성
함수 선언문과 표현식의 차이를 실제 에러 재현으로 확인하니, "선언문은 전체 호이스팅, 표현식은 변수만 호이스팅" 이라는 개념이 명확해짐
`reduce`로 `map` 기능을 구현해보면서 "추상화 레이어를 높일수록 코드가 간결해진다" 는 사실을 체감
`filter` 사용 시 조건 로직을 분리하면 가독성이 크게 향상됨
`finally` 블록이 return보다 우선 실행되는 특성을 확인하며, 자원 정리 코드 작성 시 필수적으로 사용해야겠다는 필요성을 느낌
`try/catch/finally` 블록마다 독립적인 스코프를 가지므로, 변수 재선언이 가능하다는 점이 인상적
(의도치 않은 재할당 주의 필요)
객체 분해 시 별칭(alias)과 기본값을 함께 사용하면 API 응답 데이터 처리 시 안정성이 크게 향상될 것 같다는 확신
더보기
함수
- 함수는 일급 객체로, 변수에 할당하거나 다른 함수의 인자로 전달할 수 있다.
- 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합으로, 내부 함수가 외부 함수의 변수에 접근할 수 있도록 한다.
- 렉시컬 환경은 코드가 작성된 위치에 따라 변수와 스코프가 결정되는 방식으로, 자바스크립트는 함수가 선언된 위치를 기준으로 변수와 상위 스코프를 기억한다.
배열
- forEach 메서드는 배열의 각 요소에 대해 지정된 함수를 실행한다.
- map 메서드는 배열의 각 요소를 변환하여 새로운 배열을 반환한다.
- filter 메서드는 조건을 만족하는 배열 요소만으로 새로운 배열을 반환한다.
- reduce 메서드는 배열 요소를 누적하여 단일 값을 반환한다.
객체
- 객체는 키-값 쌍으로 데이터를 저장하며, 키는 문자열 또는 심볼 타입이다.
- Object.keys() 메서드는 객체의 키를 배열로 반환한다.
- Object.values() 메서드는 객체의 값을 배열로 반환한다.
- Object.entries() 메서드는 객체의 키-값 쌍을 배열로 반환한다.
Day 8
📚 오늘의 학습 목표
📖 배운 내용
객체
- 객체 리터럴과 프로퍼티
- 함수와 메서드
클래스
- 생성자
- 메서드
- 상속
- Getter 및 Setter
자료구조
- 배열
- 객체
- 맵
- 셋
💻 실습 결과물
🤔 느낀점
자바스크립트 객체와 클래스 개념을 이해하고, 클래스를 직접 구현해보면서 객체지향 프로그래밍에 대한 이해를 높일 수 있었다.
다양한 자료구조를 학습하고 활용하면서 데이터를 효율적으로 관리하고 처리하는 방법을 익혔다.
❗ 트러블 슈팅
클래스 상속 오류
원인: 부모 클래스의 생성자를 호출하지 않아 발생
해결: super() 키워드를 사용하여 부모 클래스의 생성자를 명시적으로 호출
Day 7
📚 오늘의 학습 목표
자바스크립트 기초 문법 학습 및 실습
GitHub Actions를 사용하여 자동화된 이슈 생성
📖 배운 내용
- 변수 선언 (var, let, const)
- 데이터 타입 (숫자, 문자열, 불리언, null, undefined)
- 연산자 (산술, 할당, 비교, 논리)
- 조건문 (if, else if, else)
- 반복문 (while, for)
- 함수 (선언, 호출, 매개변수, 반환 값)
- 배열 (생성, 접근, 메서드)
- 객체 (생성, 접근, 속성)
- GitHub Actions 워크플로우 설정
- cron 표현식을 사용한 예약된 작업 실행
💻 실습 결과물
🤔 느낀점
자바스크립트 기초 문법을 실습하면서 웹 개발에 조금더 다가가는중
GitHub Actions를 활용하여 일주일마다 자동으로 번호를 생성하고 이슈를 등록하는 워크플로우를 구축하면서 자동화의 편리함 경험
느낌상 워크플로우 더 유용하게 쓰일 것 같고, 언젠가 다시 찾아서 공부할듯
❗ 트러블 슈팅
GitHub Actions 워크플로우 오류
원인: 워크플로우 파일의 cron 표현식 오류
해결: cron 표현식을 수정하여 워크플로우가 정상적으로 실행되도록 수정
Day 6
📚 오늘의 학습 목표
GIT 복습
Day 5
📚 오늘의 학습 목표
AI 도구를 활용한 웹 개발 프로세스 이해하기
📖 배운 내용
- ChatGPT의 대안들 - deepseek claude copilot gemini perplexity
- Git 브랜치 관리 (branch, switch, merge)
- HeadlessCMS?
💻 실습 결과물
🤔 느낀점
AI 도구를 활용하면 개발 속도를 높일 수 있지만, 결과물을 검증하는 과정이 중요했고, 앞으로 더욱 더 중요해질 것.
❗ 트러블 슈팅
Git merge 충돌 해결
원인: 동일 파일 다른 브랜치에서 수정
해결: VSCode의 충돌 해결 도구 활용
Day 4
📚 오늘의 학습 목표
Bootstrap 컴포넌트(캐러셀, 카드, 모달) 활용
OG 태그와 파비콘 설정 방법 이해
웹폰트 적용 및 커스텀 CSS 작성
📖 배운 내용
-
Bootstrap 컴포넌트
-
캐러셀 :
- data-bs-ride="carousel": 자동 슬라이드 활성화
- carousel-control-prev/next: 좌우 이동 버튼
-
카드 그리드:
- col-md-4: 데스크톱에서 3열 그리드 구성
- g-4: 카드 간격 조정
-
모달:
- data-bs-toggle="modal": 버튼 클릭 시 모달 열림
-
캐러셀 :
-
OG 태그 & 파비콘
- OG 태그 : SNS 공유 시 미리보기 정보 설정
- 파비콘 : 다중 형식 지원
-
웹폰트 & 커스텀 CSS
- 구글 폰트 적용
- CSS 변수 활용
💻 실습 결과물
🤔 느낀점
- bootstrap은 이런 느낌이구나
- 웹페이지에 html 소스코드가 공개되는 방법이 필요하다
❗ 트러블 슈팅
트러블 내용
원인:
해결:
Day 3
📚 오늘의 학습 목표
CSS Position, Flexbox, Bootstrap 기본 활용법, 박스 모델 이해
📖 배운 내용
-
Position
- static: 기본 위치, offset 적용 불가
- relative: 원래 위치 기준으로 offset 적용
- absolute: 가장 가까운 positioned 조상 기준
- fixed: 뷰포트 기준 고정 위치
- sticky: 스크롤 임계점 도달 시 fixed 동작
-
Flexbox
- 주축/교차축 정렬 (justify-content, align-items)
- flex-wrap으로 아이템 줄바꿈 제어
- flex-grow/shrink로 유연한 공간 분배
-
Bootstrap
- CDN으로 빠른 설치
- Grid 시스템 (12열 구조 + 반응형)
- 유틸리티 클래스 (margin, text 정렬 등)
- 카드, 모달, 네비게이션 컴포넌트 활용
💻 실습 결과물
ex1.html - style 우선순위, 상속, emmet(젠코딩)
ex2.html - 단위 실습 (em, rem, vw, stylesheet 적용)
ex3.html - box-sizing 차이 확인
- content-box: width/height에 padding+border 미포함
- border-box: width/height에 padding+border 포함
🤔 느낀점
Flexbox로 레이아웃을 구성하면 편리함, Bootstrap 컴포넌트를 활용하면 반응형 디자인을 직접 코딩하지 않아도 되는 것 같다.
❗ 트러블 슈팅
float 사용 후 레이아웃 깨짐 현상
원인: float 요소 다음에 clear: both를 적용하지 않아 박스5가 올라옴
해결:
<div style="clear: both"></div>
추가
Day 02
📚 오늘의 학습 목표
HTML 태그 (제목, 단락, 링크, 이미지, 목록, 테이블, 양식)
📖 배운 내용
- HTML 기본 태그: h1~h6, p, br, span, strong, ul, ol, li, a, img, table, tr, td, form, input
- OG 태그: og:title, og:description, og:image
- Favicon 관련 태그: link rel="icon", link rel="shortcut icon", link rel="apple-touch-icon", link rel="manifest"
💻 실습 결과물
🤔 느낀점
몇 가지 기본 HTML 태그와 그 사용법을 건드려보았다. 또한 OG TAG와 Favicon과 같은 메타데이터를 추가하는 방법 알아보았다.
Day 01
📚 오늘의 학습 목표
Markdown 이해, ChatGPT 이해, 웹 개발 기초
📖 배운 내용
- Markdown 문법 (헤딩, 굵게, 기울임꼴, 목록, 링크, 이미지, 코드 블록, 테이블)
- ChatGPT: OpenAI의 대화형 AI 모델, GPT 아키텍처 기반, 자연어 처리 기술 사용, 다양한 작업에 활용 가능
- 웹 개발 기초: HTML 구조, CSS 스타일링 (Tailwind CSS), 웹 개발 개념
💻 실습 결과물
🤔 느낀점
Markdown, ChatGPT, 그리고 기본적인 웹 개발 개념들을 가볍게 처음 건드렸다. 재밌다.