모래를 모아서 탑을 쌓고 매일 조금씩 발전하는 중
⭐ 칼럼 소개
프론트엔드 입문 여정: 멋진 웹 개발 세계를 탐험해 보세요. 이 칼럼을 구독하려면 위 또는 오른쪽에 있는 링크를 클릭하세요. 기하학이 여러분을 프론트엔드 여정으로 안내할 것입니다.
프런트엔드 소개 투어에 오신 것을 환영합니다! 이 칼럼은 웹 개발에 관심이 있고 이제 막 프론트엔드 분야에 입문한 분들을 위해 맞춤 제작되었습니다. 당신이 완전한 초보자이든, 기본적인 지식을 갖춘 개발자이든, 여기에서는 체계적이고 친숙한 학습 플랫폼을 제공할 것입니다. 본 칼럼에서는 매일 질문과 답변 형식으로 업데이트하여, 선별된 프론트엔드 지식 포인트와 자주 묻는 질문에 대한 답변을 제시해 드립니다. Q&A 형식을 통해 프론트엔드 기술에 대한 독자들의 질문에 보다 직접적으로 답변하고, 모두가 점차 탄탄한 기반을 다질 수 있도록 돕고자 합니다. HTML, CSS, JavaScript 또는 다양한 공통 프레임워크와 도구이든, 우리는 간단하고 이해하기 쉬운 방식으로 개념을 설명하고, 배운 내용을 확고히 할 수 있는 실용적인 예와 연습을 제공합니다. 동시에 프런트엔드 개발에서 다양한 기술을 더 잘 이해하고 적용하는 데 도움이 되는 몇 가지 실용적인 팁과 모범 사례도 공유할 것입니다.
그뿐만 아니라, 여러분이 배운 지식을 실제 개발에 적용할 수 있도록 실용적인 프로젝트 튜토리얼도 정기적으로 출시할 예정입니다. 실제 프로젝트 실습을 통해 프론트엔드 개발의 워크플로우와 방법론을 더 잘 이해하고, 문제 해결과 독립적인 개발 능력을 키워나갈 수 있습니다. 우리는 지속적인 축적과 연습만이 프론트엔드 개발 기술을 진정으로 마스터할 수 있다고 믿습니다. 그러니 도전에 대비하고 이 프론트엔드 진입 여정을 용감하게 시작하세요! 귀하가 직업 변화를 원하든, 기술 향상을 원하든, 개인적인 관심 사항을 충족시키든, 우리는 귀하에게 최고의 학습 리소스와 지원을 제공하기 위해 최선을 다하고 있습니다. 웹 개발의 놀라운 세계를 함께 탐험해 보세요! 프론트엔드 입문 여정에 동참하여 뛰어난 프론트엔드 개발자가 되어보세요! 프런트엔드 여정을 시작해보자
⭐ 손수 Observer
관찰자 패턴(Observer Pattern)은 객체 간의 일대다 종속성을 정의하는 데 사용되는 동작 설계 패턴으로, 객체의 상태가 변경되면 이에 의존하는 모든 객체가 알림을 받고 자동으로 업데이트됩니다. JavaScript에서 관찰자 패턴은 사용자 정의 이벤트 처리 또는 데이터 구독/게시 패턴을 구현하는 데 자주 사용됩니다.
다음은 Observer 패턴을 구현하는 간단한 JavaScript 예입니다.
// 创建一个观察者（订阅者）对象
class Observer {
constructor() {
this.observers = [];
}
// 添加观察者
subscribe(callback) {
this.observers.push(callback);
}
// 移除观察者
unsubscribe(callback) {
this.observers = this.observers.filter(observer => observer !== callback);
}
// 通知观察者
notify(data) {
this.observers.forEach(observer => observer(data));
}
}
// 创建一个主题（被观察者）对象
class Subject {
constructor() {
this.observers = new Observer();
this.state = 0;
}
// 设置状态并通知观察者
setState(state) {
this.state = state;
this.observers.notify(this.state);
}
}
// 创建观察者实例
const observerA = data => console.log(`Observer A: ${
data}`);
const observerB = data => console.log(`Observer B: ${
data}`);
const observerC = data => console.log(`Observer C: ${
data}`);
// 创建主题实例
const subject = new Subject();
// 订阅观察者
subject.observers.subscribe(observerA);
subject.observers.subscribe(observerB);
// 设置主题状态，触发通知
subject.setState(1);
// 取消订阅 observerA
subject.observers.unsubscribe(observerA);
// 再次设置主题状态，触发通知
subject.setState(2);
// 添加一个新观察者
subject.observers.subscribe(observerC);
// 再次设置主题状态，触发通知
subject.setState(3);
위의 예에서는 먼저 Observer구독, 구독 취소 및 알림 수신이 가능한 관찰자를 나타내는 클래스를 만들었습니다. Subject그런 다음 상태를 설정하고 관찰자에게 알릴 수 있는 주제를 나타내는 클래스를 만들었습니다 . 토픽의 상태가 변경되면 구독한 모든 관찰자에게 알림이 전송되고 해당 작업을 수행합니다.
이 간단한 관찰자 패턴 예제는 사용자 정의 이벤트 처리 시스템을 생성하거나 애플리케이션의 데이터에 대한 게시/구독 메커니즘을 구현하는 데 사용할 수 있습니다. 관찰자 패턴은 구성 요소 간의 결합을 줄이고 코드를 더 쉽게 유지 관리하고 확장할 수 있게 해주는 일반적인 디자인 패턴입니다.
⭐ 마지막에 작성
이 칼럼은 폭넓은 독자층을 대상으로 하며, 프론트엔드를 처음 접하는 초보자나, 프론트엔드를 배우지 않았지만 프론트엔드에 관심이 있는 사람, 자신을 더 잘 보여주고 확장하고 싶은 백엔드 학생에게 적합합니다. 인터뷰 과정에서 프론트엔드에 대한 지식이 몇 가지 있기 때문에, 프론트엔드에 대한 기본 지식을 갖추고 이 칼럼을 따라오신다면 누락된 부분을 확인하고 부족한 부분을 채우는 데에도 큰 도움이 될 수 있습니다. 내용 출력, 기사에 흠이 있는 경우 홈페이지 왼쪽을 통해 저에게 연락하실 수 있습니다. , 함께 진행합시다. 동시에 여러 칼럼을 모두에게 추천합니다. 관심 있는 파트너는 구독할 수 있습니다: 아래 열 외에도 내 홈페이지에 가시면 다른 열도 보실 수 있습니다.
프론트엔드 게임(무료) 이 칼럼에서는 HTML, CSS, JavaScript에 대한 기본 지식을 활용하여 다양하고 흥미로운 페이지 게임을 함께 만들어 가며 창의성과 재미가 가득한 세계로 여러분을 안내할 것입니다. 당신이 초보자이거나 프론트엔드 개발 경험이 있다면 이 칼럼은 당신을 위한 것입니다. 기본적인 것부터 시작하여 페이지 게임을 구축하는 데 필요한 기술을 안내해 드립니다. 실제 사례와 연습을 통해 HTML을 사용하여 페이지 구조를 구축하고, CSS를 사용하여 게임 인터페이스를 아름답게 만들고, JavaScript를 사용하여 게임에 대화형 및 동적 효과를 추가하는 방법을 배우게 됩니다. 이 칼럼에서는 미로 게임, 벽돌 깨기, 뱀, 지뢰 찾기, 계산기, 비행기 전투, 틱택토, 퍼즐, 미로 등을 포함한 다양한 유형의 미니 게임을 다룰 것입니다. 각 프로젝트는 자세한 설명과 코드 예제를 통해 간결하고 명확한 단계로 구축 프로세스를 안내합니다. 동시에 페이지 성능과 사용자 경험을 개선하는 데 도움이 되는 몇 가지 최적화 팁과 모범 사례도 공유할 것입니다. 프런트엔드 기술을 연습할 흥미로운 프로젝트를 찾고 있거나 페이지 게임 개발에 관심이 있다면 프런트엔드 게임 칼럼이 최선의 선택이 될 것입니다. 프론트엔드 게임 칼럼을 구독하려면 클릭하세요.
Vue3 투명 튜토리얼 [0에서 1까지](유료) Vue3 투명 튜토리얼에 오신 것을 환영합니다! 이 칼럼은 Vue3와 관련된 포괄적인 기술 지식을 모든 사람에게 제공하는 것을 목표로 합니다. Vue2 경험이 있다면 이 칼럼을 통해 Vue3의 핵심 개념과 사용법을 익힐 수 있습니다. 우리는 처음부터 시작하여 완전한 Vue 애플리케이션을 구축하기 위해 단계별로 안내할 것입니다. 실제 사례와 연습을 통해 Vue3의 템플릿 구문, 구성 요소 개발, 상태 관리, 라우팅 및 기타 기능을 사용하는 방법을 배우게 됩니다. 또한 Vue3의 새로운 기능을 더 잘 이해하고 적용할 수 있도록 Composition API 및 Teleport와 같은 몇 가지 고급 기능을 소개합니다. 이 칼럼에서는 각 프로젝트를 자세한 설명과 샘플 코드와 함께 간결하고 명확한 단계로 안내하겠습니다. 동시에 Vue3 개발의 몇 가지 일반적인 문제와 솔루션을 공유하여 어려움을 극복하고 개발 효율성을 향상시키는 데 도움을 드릴 것입니다. Vue3를 심층적으로 배우고 싶거나 프런트엔드 프로젝트 구축에 대한 포괄적인 가이드가 필요한 경우 Vue3 철저한 튜토리얼 칼럼은 귀하에게 없어서는 안 될 리소스가 될 것입니다. Vue3 Transparent Tutorial [0부터 하나까지] 칼럼을 구독하려면 클릭하세요.
TypeScript 시작 가이드(무료)는 TypeScript 관련 기술을 빠르게 시작하고 숙달하는 데 도움을 주기 위해 고안된 칼럼입니다. 간결하고 명확한 언어와 풍부한 샘플 코드를 통해 TypeScript의 기본 개념, 구문 및 기능을 심도있게 설명합니다. 초보자이든 숙련된 개발자이든 여기에서 자신에게 적합한 학습 경로를 찾을 수 있습니다. 유형 주석, 인터페이스, 클래스와 같은 핵심 기능부터 모듈식 개발, 도구 구성, 공통 프런트엔드 프레임워크와의 통합에 이르기까지 모든 측면을 포괄적으로 다룹니다. 이 칼럼을 읽으면 JavaScript 코드의 안정성과 유지 관리 가능성을 향상시키고 프로젝트에 더 나은 코드 품질과 개발 효율성을 제공할 수 있습니다. 이 흥미롭고 도전적인 TypeScript 여행을 함께 시작합시다! TypeScript 시작 가이드 칼럼을 구독하려면 클릭하세요.
