📝 SK네트웍스 Family AI캠프 10기 16주차 회고록
📅 기간: 25.04.21 ~ 25.04.25
📌 이번 주는 어땠는지 돌아보며
- 이번 주는 HTML과 CSS, javascript의 기본기를 중심으로 차근차근 정리하면서, 페이지 구조와 스타일링에 대해 훨씬 더 명확한 이해를 할 수 있었던 한 주였다.
- 처음엔 해봤던 내용이었는데도 태그와 속성들이 좀 헷갈렸지만, 직접 작성해보고 눈으로 확인하면서 예전에 했던 감이 조금씩 돌아왔다.
- django는 처음 배우다 보니, 아직 서툰 부분들도 많았고, 스프링을 처음 배웠던 때가 생각나며, django 만큼은 단순한 따라치기가 아니라 처음부터 이해를 바탕으로 학습을 하겠다는 생각을 했다.
📚 학습 내용 요약
📌 HTML & CSS
✅ HTML
- 요소 분류: HTML 요소는 블록 요소(div, p, header 등)와 인라인 요소(span, a, img 등)로 크게 나뉘는데, 이게 레이아웃이나 구조에 꽤 큰 영향을 준다.
- 시맨틱 태그: 웹페이지 구조를 의미적으로 명확하게 표현하기 위해 쓰이는데, 접근성이나 유지보수 측면에서도 필수다. (
header,nav,main,section,article,footer등) - 문서 구조: 전체 웹페이지 구조를 짜는 데 쓰이며, 사용자 경험을 높이는 데도 한몫한다. 보통은
header,nav,main,aside,footer같은 요소들이 주로 쓰인다. - 속성 사용: 요소의 특성을 지정하거나 부가 정보를 줄 때 사용하는데, 대표적으로
href,src,alt,id,class등이 있다. - 폼 요소: 사용자 입력을 받는 데 사용하는 요소들로,
<form>,<input>,<textarea>,<button>같은 태그들이 있다.
✅ CSS
- 선택자: 태그, 클래스, 아이디 등을 기반으로 요소에 스타일을 지정할 수 있다.
- 텍스트 스타일: 폰트 설정이나 정렬, 꾸밈 등에 쓰이는 스타일들 (
font-family,text-align등) - 색상과 배경: 단색이나
linear-gradient같은 그라디언트를 사용해 꾸밀 수 있다. - 박스 모델: padding, border, margin에 대한 이해는 필수.
- 경계선(Border): 테두리 스타일, 곡선 처리 등을 할 수 있다 (
border-radius) - 위치 지정:
position속성으로 요소의 위치를 조정 (fixed,relative,absolute) - Float: 요소를 띄워서 배치할 때 사용, 이후
clear로 정리 필요 - Flex: 1차원 레이아웃을 직관적으로 만들 수 있다
- Grid: 2차원 레이아웃도 깔끔하게 구현 가능
- Column: 텍스트를 여러 단으로 나눠서 표현
- Transform: 회전, 이동, 크기 조절 가능
- Animation: 간단한 코드로 다양한 애니메이션 효과 구현 가능
- CSS 우선순위: 스타일 충돌 시 어떤 스타일이 적용될지를 결정 (
!important포함) - CSS 적용 방식: 유지보수성 때문에 외부 스타일시트(
link) 방식 권장
📌 JavaScript
✅ 변수 선언 방식
let: 재할당은 가능하지만 재선언은 불가const: 재선언, 재할당 모두 불가var: 재선언, 재할당 가능하지만 호이스팅 때문에 사용 지양
✅ 데이터 타입과 확인
- 동적 타입 언어인 만큼
typeof로 확인해야 할 일이 많다 - 주요 타입:
undefined,null,NaN,number,boolean
✅ 타입 변환
- 명시적 변환:
String(),Number(),Boolean() - 숫자 관련 메서드:
.toString(),.toFixed(),.toExponential()
✅ 연산자
- 산술:
+,-,*,/,%,** - 비교:
===,!==,>,<,>=,<= - 논리:
&&,||,! - 복합 연산자:
+=,-=,*=,/=,++,--
✅ 객체와 배열
- 객체는
{ key: value }, 접근은obj.key또는obj["key"] - 배열은
[item1, item2], 접근은arr[index]
✅ 반복문
- 기본 반복문:
for,while,do while - 고급 반복문:
forEach,for...of,for...in
✅ 함수
- 함수 선언식, 표현식, 화살표 함수(ES6)
✅ 클래스
- 객체 생성 및 메서드 정의 가능
✅ 예외 처리
try,catch,finally,throw로 처리
✅ DOM 및 이벤트
- HTML 요소 제어 및
click,input같은 이벤트 처리
✅ this 키워드
- 일반 함수와 화살표 함수에서의 동작 차이 있음
✅ JSON
- 객체와 문자열 간 직렬화/역직렬화 (
JSON.stringify,JSON.parse)
✅ Map, Set
Map: 키-값 저장 및 접근Set: 중복 없는 데이터 집합
✅ Date
- 날짜 및 시간 관리 (
new Date())
✅ 비동기 처리
Promise,async/await,fetch API
✅ 배열 메서드
find(),filter(),map(),sort(),reverse(),split(),join()
✅ 배열 반복 방법
forEach(),for,for...of,for...in
✅ 다차원 배열
- 배열 안에 배열 넣어서 복잡한 구조 표현 가능
📌 Django
✅ Django 개요
- Django는 파이썬 기반의 오픈 소스 웹 프레임워크로, 프론트랑 백엔드를 아우를 수 있다는 점에서 꽤 매력적인 툴이다.
- 실제로 Instagram, Mozilla, Pinterest 같은 데서도 쓰이는 만큼, 실무에서도 충분히 활용 가능하다.
✅ MTV 패턴
- Django는 MVC 구조를 자기만의 방식으로 해석한 MTV 패턴을 따른다.
- Model: 데이터 구조나 로직 관리
- Template: 데이터를 어떻게 보여줄지 정의
- View: 요청 처리와 응답 흐름 담당
✅ 프로젝트 구성 및 실행
- 프로젝트 생성:
django-admin startproject 프로젝트명 - 서버 실행:
python manage.py runserver - 앱 생성:
python manage.py startapp 앱명 - 생성한 앱은
settings.py에 등록해줘야 한다 (INSTALLED_APPS항목)
✅ 환경 설정 (settings.py)
- 데이터베이스 정보, 디버그 모드, 호스트 설정, 언어/시간 설정까지 모두 여기서 조정한다.
✅ 데이터베이스 연결 및 마이그레이션
- MySQL과 연결하려면
settings.py에 세팅을 추가해야 한다. - DB 구조가 바뀌면
makemigrations랑migrate로 반영해야 한다.
python manage.py makemigrations
python manage.py migrate✅ 모델(Model)
- ORM 방식이라 SQL을 따로 쓰지 않아도 DB 조작이 가능하다.
- 필드 타입은
CharField,IntegerField,DateTimeField,ForeignKey등 다양하다. - 필드 옵션도 많아서
primary_key,null,blank,auto_now,auto_now_add등을 활용할 수 있다. Meta클래스 안에서 정렬(ordering)이나 이름 설정도 가능하다.
✅ 모델 메서드와 속성
- 모델 인스턴스에 메서드를 붙이면 비즈니스 로직을 모델에서 관리할 수 있어서 구조적으로 깔끔하다.
@property로 속성처럼 쓸 수도 있고,objects를 통해 데이터 조회도 가능하다.
✅ 뷰(View)
- 뷰는 요청을 받아서 처리하고, 템플릿에 데이터를 넘겨주는 역할을 한다.
- 간단한 건 FBV (함수형), 복잡한 건 CBV (클래스형)가 유리하다.
ListView,DetailView같은 제네릭 CBV는 CRUD 만들 때 특히 유용하다.
✅ 템플릿(Template)
- Django만의 템플릿 문법을 사용한다.
{{ }},{% %}같은 문법으로 데이터를 보여주고 로직 제어도 가능하다.- CSRF 보호를 위해
{% csrf_token %}꼭 넣어야 한다.
✅ URLconf
- URL을 뷰 함수랑 연결해주는 설정이다.
path('', views.IndexView.as_view(), name='index')✅ REST API 지원
- DRF(Django REST Framework)를 쓰면 Django에서도 RESTful API 개발이 가능하다.
pip install djangorestframework※ Django 간단한 TodoList 프로젝트
내가 작성한 관련 글: TodoList 프로젝트 바로가기
🛠️ 트러블 슈팅
문제 1: == vs === 연산자 차이
==는 타입 변환 후 값만 비교 → 예기치 않은 결과 발생===는 값과 타입을 모두 비교 → 의도한 대로 동작
console.log(1 == '1'); // true
console.log(1 === '1'); // false👉 JS에서는 가급적 ===를 사용하는 게 안정적이다.
문제 2: Bootstrap의 container vs container-fluid
.container: 고정된 폭, 중앙 정렬.container-fluid: 전체 폭 차지
<!-- 중앙 정렬 -->
<div class="container">중앙에 고정된 내용</div>
<!-- 전체 폭 -->
<div class="container-fluid">화면 가득 차는 내용</div>📌 어떤 레이아웃을 원하느냐에 따라 명확히 구분해서 써야 한다.
문제 3: Django는 직접 요청을 받지 않는다?
Django는 실제로는 웹 서버(Nginx, Apache)를 통해 요청을 전달받는다.
클라이언트 요청 흐름은 다음과 같다:
Client → Web Server(Nginx) → WSGI/ASGI → Django- 정적 파일은 웹 서버에서 처리
- 동적 요청만 Django가 처리
📌 웹 서버와 Django의 역할을 명확히 나누는 게 중요하다.
🔄 KPT 회고 (16주차)
✅ Keep
- 솔직히 이번 주는 학습 성과보다는 버티고 지나온 나 자신에게 더 의미가 있는 한 주였다.
- 도어락이 고장 나서 이틀정도 계획대로 움직이기가 어려웠고, 정보처리기사 준비도 병행하다 보니 일정 관리가 쉽지 않았다.
- 그 와중에도 학원은 빠지지 않고 나왔고, 진도 놓치지 않으려고 애썼다는 점은 스스로 칭찬해주고 싶다.
❌ Problem
- 복습을 거의 못 했다. 정신적으로 여유가 없으니까 복습은커녕, 학습 자체도 머리에 잘 들어오지 않았던 것 같다.
- 운동은 딱 한 번 갔다. 매번 느끼지만, 체력 관리가 안 되면 확실히 학습 효율도 떨어진다.
- 정보처리기사 준비와 병행하는 게 생각보다 빡세다는 걸 이번 주에 더더욱 체감했다.
💡 Try
- 정보처리기사와 부트캠프 커리큘럼 사이의 밸런스를 좀 더 명확히 잡아야겠다. 지금처럼 애매하게 병행하면 둘 다 놓칠 수 있다.
- 운동은 평일이 안 되면 하루 10분이라도 몸을 움직이자. 굳이 헬스장에 가서 한시간씩 있어야 운동이 되는 것이 아니라 잠깐 밖을 돌아다니며 산책하는 것만으로도 멘탈이 버틴다.
- 한 주 정도 흐름이 깨졌다고 해서 너무 스스로를 몰아붙이지 않기로. 다시 루틴 잡는 데 집중하려고 한다.
✅ 마무리
- 이번 주는 학습량이나 성과로만 보면 솔직히 아쉬움이 더 크다.
- 그런데 그보다 더 크게 느낀 건, 생활 루틴 하나가 무너지면 전체 리듬이 얼마나 쉽게 무너지는지, 그리고 그걸 복구하는 게 얼마나 어려운지였다.
- 체력도, 시간도, 집중력도 결국은 루틴 속에서 유지되는 거라는 걸 다시 한 번 느꼈다.
- 다음 주는 결과를 내는 것도 중요하지만, 일단 내 페이스를 되찾는 것에 집중하려고 한다.
- 큰 성취보다 작은 회복이 중요한 시점이라는 걸 스스로 인정하고, 너무 조급해하지 말고 한 걸음씩 가보자.
AI 모델을 개발하여 이를 활용한 서비스를 개발하고 운영하는 개발자가 되기 위해 꾸준히 노력하겠습니다!