[🚀 Today I Learn 페이지 만들기] 포도 미션 제출합니다.

[goodsmell]

배포 링크

https://goodsmell.github.io/web-today-i-learn/

HTML

나만의 갤러리 사진 요소: 9장의 사진은 <div> 컨테이너 안에 개별 <img> 태그를 사용했습니다. 각 이미지가 독립적인 콘텐츠라기보다는 시각적 나열의 성격이 강해, Grid 레이아웃을 적용하기 용이한 구조를 선택했습니다.

이미지 로드 방식: 외부 URL(절대 경로)을 통한 로드와 로컬 파일(상대 경로) 로드 방식이 있습니다. 현재 프로젝트에서는 picsum.photos와 같은 외부 라이브러리 URL을 주로 활용하고 있습니다.

시맨틱 태그 사용 기준: 문서의 대구조는 <nav>, <section>, <main>, <footer>로 나누었으며, 각 섹션은 논리적으로 분리된 주제(자기소개, 갤러리, TIL 등)를 기준으로 획정했습니다.

alt 속성의 필요성: 시각 장애인을 위한 스크린 리더 읽기 지원 및 이미지 로딩 실패 시 대체 텍스트 제공을 위해 필수적입니다. 이미지의 의미를 간결하게 담아 작성했습니다.

경로 혼용 문제: 개발 환경과 배포 환경(GitHub Pages 등)의 루트 디렉토리가 다를 경우 이미지 엑박(Broken link)이 발생할 수 있어 일관된 경로 규칙이 중요합니다.

meta 태그의 역할: viewport는 모바일 기기에서의 적절한 화면 배율을 설정하며, Open Graph는 링크 공유 시 제목, 설명, 이미지를 미리보기로 보여주는 마케팅적 역할을 합니다.

CSS

Flexbox vs Grid: 9장의 이미지를 3x3 격자 형태로 배치하는 데는 display: grid가 더 적합합니다. 2차원 레이아웃을 직관적으로 제어할 수 있기 때문입니다.

선택자 사용: 보편적인 스타일은 태그 선택자, 재사용 가능한 디자인 단위는 클래스(.) 선택자를 사용하며, ID 선택자는 문서 내 유일한 요소 식별 시에만 제한적으로 사용합니다.

파일 분리 이유: HTML은 구조, CSS는 디자인으로 역할을 분리하여 유지보수성을 높이고, 브라우저 캐싱을 통해 로딩 속도를 개선할 수 있습니다.

JavaScript

getElementById vs querySelector: getElementById는 ID로만 접근하여 속도가 미세하게 빠르나, querySelector는 CSS 선택자 문법을 그대로 사용할 수 있어 훨씬 유연하고 범용적입니다.

활용 가능한 이벤트: 버튼 클릭(click), 폼 제출(submit), 입력창 포커스(focus), 마우스 오버(mouseover) 등을 통해 동적인 인터랙션을 줄 수 있습니다.

innerHTML 주의점: 사용자 입력을 그대로 innerHTML에 삽입할 경우 XSS(크로스 사이트 스크립팅) 공격에 취약해질 수 있으므로 주의가 필요합니다.

배포

데이터 유지 여부: 유지되지 않습니다. 현재 코드는 브라우저 메모리 상의 DOM만 조작하므로, 새로고침 시 초기화됩니다.

영구 저장 방법: 브라우저의 LocalStorage나 IndexedDB를 사용하거나, 서버 API를 통해 Database에 저장해야 합니다.

[goodsmell]

🤔 생각해 보기

SQL 실습 관련

1. 기본키란 무엇이고 왜 필요한가?

• 기본키는 테이블의 각 행을 고유하게 식별할 수 있는 컬럼이다.
• 기본키는 중복될 수 없고, NULL 값을 가질 수 없다.

기본키가 필요한 이유는 다음과 같다.

• 데이터를 정확하게 식별하기 위해
• UPDATE, DELETE 시 특정 데이터를 찾기 위해
• 다른 테이블과 관계를 맺기 위해 (외래키)

만약 기본키가 없다면 같은 데이터가 여러 개 있을 때 어떤 데이터를 수정하거나 삭제해야 하는지 알 수 없고, 테이블 간 관계 설정도 불가능해진다.

2. MySQL에서 사용되는 AUTO_INCREMENT는 왜 필요할까?

AUTO_INCREMENT는 새로운 데이터가 삽입될 때마다 자동으로 증가하는 값을 생성하는 기능이다.

이 기능이 필요한 이유는 다음과 같다.

• 개발자가 직접 ID를 관리할 필요가 없어짐
• 중복된 값이 들어가는 것을 방지
• 고유한 기본키를 안정적으로 생성 가능

즉, 데이터의 식별자를 사람이 아니라 데이터베이스가 자동으로 관리하도록 하기 위해 사용한다.

3. 학생이 등교는 했지만 하교 버튼을 누르지 않았을 때, end_time에 NULL이 저장된다. NULL 값을 처리할 때 주의할 점은?

NULL은 값이 없는 상태를 의미하며, 0이나 빈 문자열과는 다르다.

주의할 점은 다음과 같다.

• 비교 연산에서 =을 사용할 수 없으로 IS NULL 사용해야 함
• 연산에 포함되면 결과도 NULL이 됨
• 집계 함수에서 제외되는 경우가 있음

또한 프론트엔드에서는 NULL 값을 그대로 보여주기보다는 "미퇴실", "-", "값 없음" 등으로 가공해서 보여주는 처리가 필요하다.

4. crew와 attendance 테이블의 관계를 ER 다이어그램으로 시각화해보자. 이 관계를 일상 생활의 예시로 비유한다면 어떤 것이 있을까?

2026 공통강의 - DB 개념 연결

5. 출석 시스템에서 동시에 100명이 등교 버튼을 누른다면 어떤 일이 일어날까? 이 문제를 2026 공통강의 - DB에서 배운 트랜잭션과 ACID 속성으로 설명해보자

6. 출석 데이터가 파일(CSV)이 아닌 데이터베이스에 저장되는 이유는 무엇일까? 파일 시스템으로 출석을 관리했다면 어떤 문제가 생길까?

7. 출석 데이터를 관계형 DB가 아닌 NoSQL(예: MongoDB)로 저장한다면 테이블 구조가 어떻게 달라질까? 어떤 장단점이 있을까?

🧐 더 생각해 보기 (심화)

1. 왜 crew 테이블에서 nickname을 기본키로 하지 않은 걸까? attendance 테이블에 attendance_id가 존재하는 이유는 무엇일까?

2. 데이터베이스 제약 조건 중 RESTRICT, CASCADE는 무엇인가?

3. 다음 두 쿼리는 동일한 결과를 반환하지만 성능에 차이가 있다. 어떤 차이가 있으며, 어떤 상황에서 각각 유리할까?

4. attendance 테이블을 완전히 정규화하면 어떤 장점이 있을까? 반대로 일부 비정규화를 적용한다면 어떤 쿼리 성능 이점을 얻을 수 있을까?

5. 출석 시스템이 수백 명의 사용자에 의해 동시에 접근된다면, 연결 풀링(connection pooling)은 무엇이고 왜 필요한가?

6. 실습에서 수행한 INSERT, UPDATE, DELETE를 하나의 트랜잭션으로 묶는다면 어떻게 작성할 수 있을까? 만약 DELETE 도중 오류가 발생하면 앞서 수행한 INSERT와 UPDATE는 어떻게 되어야 할까?