프론트엔드4 HTML에서 AI까지: 프론트엔드 개발의 여정 웹 개발이 시작된 지 30여 년이 지났습니다.초기의 정적인 HTML 페이지에서 오늘날의 AI와 노코드 툴까지, 프론트엔드 개발은 정말 빠르게 발전해왔습니다. 이번 글에서는 시대별 흐름을 따라가며 그 진화를 살펴보겠습니다. 현재 브라우저에서는 표현이 안되는 내용들은 AI를 활용해 최대한 그때의 화면들과 비슷하게 구성해서, 이미지로 첨부하였습니다. 1990년대: 웹의 탄생과 정적 페이지 시대HTML의 등장 (1991)팀 버너스리가 HTML을 만들면서 웹의 역사가 시작되었습니다.초기 웹사이트는 단순히 텍스트와 링크 만 제공하는 정적 페이지였습니다. CSS의 도입 (1996)CSS(Cascading Style Sheets)는 콘텐츠와 디자인을 분리 하며 웹 개발의 패러다임을 바꿨습니다.당시 웹사이트는 여전히 .. 2025. 8. 26. [리팩터링 2판] JavaScript 리팩터링 도서학습 #4 해당 내용은 위의 책의 내용을 제가 이해한대로 정리해둔 내용입니다. 이번 포스팅에선 Chapter07, Chapter08 의 내용에 대해 다룹니다. Chapter07 캡슐화 Chapter08 기능 이동 7,8장에서 소개하는 주요 리팩터링 기법들을 요약하고 예제와 함께 정리했습니다.Chapter07 캡슐화 1.레코드 캡슐화하기 2.컬렉션 캡슐화하기 3.기본형을 객체로 바꾸기 4.임시 변수를 질의 함수로 바꾸기 5.클래스 추출하기 6.클래스 인라인하기 7.위임 숨김하기 8.중개자 제거하기 9.알고리즘 교체하기 캡슐화의 효과 변경 영향도 최소화: 내부 구현 변경 시 클라이언트 코드 영향 감소 코드 품질 향상: 책임 분리로 응집도 높이고 결합도 낮춤 유지보수 용이성: 명확한 책임 분배로 .. 2025. 4. 24. [리팩터링 2판] JavaScript 리팩터링 도서학습 #3 해당 내용은 위의 책의 내용을 제가 이해한대로 정리해둔 내용입니다.이번 포스팅에선 Chapter06 의 내용에 대해 다룹니다. Chapter06 기본적인 리팩터링 Chapter06 기본적인 리팩터링6장에서 소개하는 주요 리팩터링 기법들을 요약하고 예제와 함께 정리했습니다. 1.함수 추출하기 (Extract Function)2.함수 인라인하기 (Inline Function)3.변수 추출하기 (Extract Variable)4.변수 인라인하기 (Inline Variable)5.함수 선언 변경하기 (Change Function Declaration)6.변수 캡슐화하기 (Encapsulate Variable)7.변수 이름 바꾸기 (Rename Variable)8.매개변수 객체 만들기 (Introduce Par.. 2025. 4. 17. [리팩터링 2판] JavaScript 리팩터링 도서학습 #2 해당 내용은 위의 책의 내용을 제가 이해한대로 정리해둔 내용입니다.이번 포스팅에선 Chapter04 ~ Chapter05 의 내용에 대해 다룹니다. Chapter04 테스트 구축하기Chapter05 리팩터링 카탈로그 보는법 Chapter04 테스트 구축하기 리팩토링의 전제 조건으로 자가 테스트 코드(self-testing code)를 강조합니다. 리팩토링은 프로그램의 겉보기 동작을 보존하면서 내부 구조를 개선하는 작업이기 때문에, 동작이 보존되었는지 확인할 수 있는 견고한 테스트가 필수적입니다. 리팩터링을 제대로 하려면 불가피하게 저지를 실수를 잡아주는 견고한 테스트 스위트(test suite)가 뒷받침 돼야한다.좋은 테스트를 작성하는 일은 개발 효율을 높여 준다. * 개인적으로 본인도 아직은 테스.. 2025. 3. 29. 이전 1 다음
