안녕하세요, BlogFlow를 운영하는 해비입니다.
웹퍼블리싱 경험을 바탕으로 프론트엔드 기술을 공부하고, 문제의 원리와 해결 과정을 정리합니다. 이곳에서는 기초 개념부터 실무 문제 해결, AI 개발 도구와 검색 기술까지 다룹니다.
BlogFlow에서 다루는 것
- 프론트엔드 기초와 학습 순서HTML·CSS부터 JavaScript·TypeScript, React·Next.js까지 개념을 연결하며 공부할 수 있는 안내를 담습니다.
- 구현 과정에서 만나는 문제화면 구성, 상태 관리, 데이터 요청, 테스트에서 막히는 지점을 원인과 적용 조건 중심으로 살펴봅니다.
- AI 도구와 검색 기술AI 코딩 도구와 AEO·GEO 등 변화하는 주제를 개발자의 관점에서 다룹니다. 구현 방법뿐 아니라 확인할 수 있는 효과와 한계도 함께 살펴봅니다.
웹퍼블리싱에서 프론트엔드로
HTML과 CSS로 디자인을 화면에 구현하고, 반응형 페이지와 운영 중인 사이트를 수정하는 일에서 시작했습니다. 브라우저마다 다른 동작과 유지보수 문제를 만나며, 화면을 만드는 것만큼 그 뒤의 흐름을 이해하는 일이 중요하다고 느꼈습니다.
이후 JavaScript를 다시 공부하고 React, Next.js, TypeScript를 프로젝트에 적용하며 학습 범위를 넓혀 왔습니다. BlogFlow에는 그 과정에서 막혔던 지점과 새롭게 이해한 내용을 남깁니다. 오류를 없애는 데서 멈추지 않고, 왜 그런 결과가 나왔는지 설명하는 글을 지향합니다.
글을 정리할 때 중요하게 생각하는 기준
해결 코드만 남기기보다, 읽는 분이 자신의 상황에 적용할 수 있도록 다음 내용을 함께 정리하려고 합니다.
- 원리: 무엇을 바꾸는지에 앞서 왜 문제가 생기는지 설명합니다.
- 예제와 조건: 코드의 사용 맥락과 적용 환경을 함께 살펴봅니다.
- 주의점과 한계: 예외 상황과 추가 확인이 필요한 부분을 구분합니다.
- 참고 자료: 공식 문서 등 더 확인할 수 있는 자료로 연결합니다.
기술과 도구는 바뀝니다. 글에 안내된 버전과 조건을 확인하고, 실제 프로젝트에 적용하기 전에는 자신의 환경에서 동작을 확인해 주세요.
처음 방문하셨다면
순서대로 공부하고 싶다면 위의 기술 학습 가이드에서 시작해 보세요. 한 가지 주제를 먼저 읽고 싶다면 다음 글을 권합니다.
- 행과 열 구분하기
행·열의 방향처럼 헷갈리기 쉬운 기초 개념부터 정리하고 싶을 때.
- JavaScript 조건문과 반복문
코드를 읽으며 변수 값과 실행 순서가 어떻게 달라지는지 살펴보고 싶을 때.
- llms.txt 구현과 AI 검색 효과의 한계
AI 검색 대응에서 실제로 구현할 수 있는 것과 기대를 구분하고 싶을 때.
오류 제보와 새 글 소식
설명이 불명확하거나 코드가 다르게 동작한다면 해당 글의 댓글로 알려주세요. 사용한 버전, 재현 상황, 오류 메시지를 함께 남겨주시면 내용을 확인하는 데 도움이 됩니다. 비밀번호나 API 키 같은 민감한 정보는 남기지 마세요.
새 글은 RSS 리더에서 받아볼 수 있습니다.