Frontory 소개와 문의

Frontory는 프론트엔드 기술의 개념을 읽고, 예제 코드를 바꾸며, 관찰한 결과를 기록하는 학습 공간입니다. 설명만 읽고 넘어가기보다 한 조건을 바꾸었을 때 화면과 값이 어떻게 달라지는지 직접 확인하는 데 초점을 둡니다.

어떤 학습을 할 수 있나요?

HTML·CSS·JavaScript에서 UI 프레임워크, 그래픽스, 애니메이션, 테스트까지 23개 시리즈와 644개 학습 단위가 있습니다. 학습 단위는 하루 분량이나 숙련도를 보장하는 과정이 아닙니다. 선수 지식을 확인하고 필요한 주제부터 선택하세요.

각 단위에는 목표, 개념, 실습 과제, 관찰할 변수와 완료 조건이 있습니다. 연결된 예제는 실험의 출발점이며 과제 전체의 완성본은 아닐 수 있습니다. 브라우저에서 실행하는 예제와 별도 프로젝트가 필요한 예제를 구분해 안내합니다. 특히 WebGPU 같은 기능은 브라우저와 기기의 지원 여부에 따라 실행할 수 있는 범위가 달라집니다.

먼저 읽어 볼 실험

다음 네 문서는 예제의 동작을 풀어 설명하고, 실행에서 확인한 값과 추가 실험의 예상값을 구분합니다.

• JavaScript: 문자열 입력과 숫자 변환 — 빈 문자열이 0으로 변환되어도 유효한 입력으로 받아들이지 않는 이유를 살펴봅니다.
• CSS: 박스 모델과 실측 크기 — width가 200px인 요소가 왜 244px로 측정되는지 계산하고 비교합니다.
• React: 이벤트와 상태 스냅샷 — 같은 클릭에서 상태를 세 번 갱신해도 결과가 1 또는 3이 되는 차이를 확인합니다.
• GSAP: 시작값과 목표값 — to·from·fromTo의 이동 구간과 생성 직후 스타일을 나누어 관찰합니다.

문서와 검증 범위

문서와 예제 작성·수정에는 AI 도구를 활용합니다. 기술 설명에는 공식 문서나 웹 표준 자료를 연결하고, 실행을 확인한 경우에는 입력 조건과 검증 범위를 함께 기록합니다. 계산으로 구한 예상값과 브라우저에서 관찰한 값은 구분합니다.

예제가 처음 열리고 종료되는 검사, 특정 버튼을 눌러 보는 검사, 전체 과제를 완성하는 검사는 서로 다릅니다. 일부 실행 경로를 확인했다고 모든 브라우저와 모든 입력에서 동작한다고 보장하지 않습니다. 문서가 제시한 조건에서도 결과가 다르면 실행 환경과 재현 순서를 알려주세요. 수정 내용과 코드 변경 이력은 공개 저장소에서 확인할 수 있습니다.

공개 저장소

소스와 학습 문서는 habergeon/frontory에 공개되어 있습니다. 문서 수정 제안과 코드 개선 제안을 받습니다. 외부 라이브러리와 자료를 다시 사용할 때는 각 라이선스와 이용 조건도 확인하세요.

Google AdSense 광고 도입을 준비하고 있습니다. 광고는 사이트 승인 후 게재할 예정입니다. 현재 설치된 태그와 데이터 처리 방식은 저장 및 개인정보 안내에서 확인할 수 있습니다.

운영 및 문의

사이트와 콘텐츠는 Frontory 공개 저장소를 통해 관리합니다. 일반 문의와 개인정보가 포함된 문의는 hefa91@gmail.com으로 보내주세요.

문서 오류, 예제 버그, 개선 제안은 GitHub Issues로도 받습니다. 이슈는 공개되며 GitHub 계정이 필요합니다. 문제가 발생한 학습 문서 주소, 브라우저·운영체제, 재현 순서, 예상 결과와 실제 결과를 적어 주시면 확인에 도움이 됩니다. 필기 백업 전체나 개인정보·비밀 키는 올리지 마세요.