1. 렌더링 차단 리소스 제거하기 렌더링 차단 리소스란, 페이지의 렌더링을 차단하는 리소스를 의미합니다. 이러한 리소스를 최적화하면 페이지의 로딩 속도를 개선할 수 있습니다. Lighthouse를 사용하여 웹 사이트를 테스트할 때, 렌더링 차단 리소스 제거를 제안하는 경우가 있습니다. 이를 위해 WordPress에서는 CSS 로딩 최적화 외에도 더 많은 조치를 취할 수 있습니다. 렌더링 차단 리소스를 제거하기 위해서는 우선 렌더링 차단 URL을 파악해야 합니다. Lighthouse나 Page Speed Index와 같은 사이트 퍼포먼스 테스트 진단 결과를 확인하면 FCP(First Contentful Paint)를 차단하는 모든 URL이 나열됩니다. 렌더링 차단 URL을 파악한 후, 다음과 같은 방법으로..
OSI 7계층 모델 해당 계층 모델은 ISO(International Organization for Standardization)라고 하는 국제표준화기구에서 1984년에 제정한 표준 규격입니다. 왜 네트워크에 대한 표준 규격을 정해야만 했을까요? 지금은 상상하기 어렵지만 같은 회사에서 만든 컴퓨터끼리만 통신이 가능했던 시절이 있었습니다. 따라서 다른 회사의 시스템이라도 네트워크 유형에 관계없이 상호 통신이 가능한 규약, 즉 프로토콜(Protocol)이 필요했습니다. 그래서 ISO에서는 제조사에 상관없이 공통으로 사용할 수 있는 네트워크 표준 규격을 정의했습니다. OSI 7계층 모델은 네트워크를 이루고 있는 구성요소들을 7단계로 나누고, 각 계층의 표준을 정하였습니다. OSI 7계층 모델의 목적은 표준화를..
네트워크의 시작 인터넷이 대중화되면서 네트워크는 컴퓨터 기술에서 빼놓을 수 없는 분야가 되었습니다. 우리는 언제 어디서나 인터넷에 접속하여 필요한 정보를 찾고 사람들과 연락을 주고받을 수 있습니다. 이러한 네트워크는 어디서부터 시작된 걸까요? 지금 우리가 사용하는 인터넷 프로토콜, 즉 IP 기반의 네트워크는 미 국방성에서 1969년 진행했던 아르파넷(ARPANET) 프로젝트에서 시작되었습니다. 이 프로젝트는 당시 냉전시대에서 핵전쟁을 대비하기 위한 통신망 구축을 위해 추진되었습니다. 이때 기존에 사용되었던 회선교환 방식이 아닌 패킷교환 방식으로 네트워크를 구축하게 되는데 이를 토대로 현재의 인터넷 통신 방식의 기반이 세워졌습니다. 그럼 패킷교환 이전에 사용되었던 회선교환 방식은 어떻게 통신을 했을까요? ..
컴포넌트 주도 개발(CDD) 란? - 컴포넌트 중심으로 UI 개발하는 방법론 컴포넌트 주도 개발의 탄생 - 소프트웨어 엔지니어 Tom ColeMan 이 컴포넌트 아키텍처 및 프로세스 UI의 개발 변화를 설명하기 위해 Component Driven Development를 소개 (2017) 했다. 컴포넌트 주도 개발 (CDD) - 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론이다. 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 띈다. 컴포넌트란? - 상호 교환 가능하고 표준화 된 UI 구성 요소이다. UI 조각의 모양, 기능을 캡슐화한다. LEGO 벽돌을 떠올려보자. - 컴..
목표 상기하기 - 프로그래밍 사고 - 공부방법 - 커뮤니케이션 - 공부시간 온전히 집중 - 기상시간 - 개인공부 Keep - 개인공부 Problem - 프로그래밍 사고 - 공부방법 => 현재 강의만 보고 정리중 - 공부시간 온전히 집중 => 초조해져서 그런지 집중이 잘 안됨 - 기상시간 => 할게 너무많아 계속 늦게까지 하다가 자게됨..😔 Try 작성하기 및 우선순위 1순위. 프로그래밍 사고 => 프로그래머스 하루에 4문제씩 풀기 2순위. 공부방법 => 노트정리 (중요한것만) 3순위. 공부시간 온전히 집중 => 마인드컨트롤해야할듯 4순위. 기상시간 => 이것도 마인드컨트롤 Section2를 마치면서.. Section2도 배우는 내용이 너무많다.. 초조해지지 않는게 제일 중요한 것 같다.. 천천히 꾸준히 ..
HTTP란? 브라우저 위에서 동작하고 있는 웹 사이트나 웹 어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신 할 수 있는지를 정의 한 것 HTTP는 Hypertext Transfer Protocal의 약자로서 어떻게 이 Hypertext를 주고 받을 수 있는지를 규약한 프로토콜의 하나이다. HTTP는 클라이언트가 서버에게 데이터를 request(요청) 할 수 있고 서버는 클라이언트가 요청한 것에 따라서 response(응답)을 클라이언트에 보내주는 이런 방식으로 진행되는 것을 의미한다. 여기서 Hypertext는 웹사이트의 링크들만 이야기하는것이 아니라 전반적으로 쓰여지고 있는 리소스들 문서나 이미지 파일들 이런 것들을 다 포함해서 말한다. 이렇게 HTTP를 이용해서 서버에게 데이터를 요청해서 받아올..
// prototype(프로토타입) /** * JavaScript는 프로토타입 기반 언어! * 프로토타입은 원형 객체를 의미한다. * mdn 프로토타입 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes */ // 실습 class Fruit { constructor(name, color, emoji) { this.name = name; this.color = color; this.emoji = emoji; } display() { console.log(`${this.emoji}`); } } let apple = new Fruit('apple', 'red', '🍎'); console.log(apple.name)..
/** * 📌 절차적 언어란? * 순차적인 명령의 조합 * 초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 부름(C, 포트란 등) * * 📌 객체 지향 언어란? * "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드 작성 -> ✨ 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶어서 처리할 수 있게 되었다!! * 현대의 언어들은 대부분 객체 지향의 특징을 갖고 있음(java, C++, C# 등) * JavaScript: 객체지향언어는 아니지만 객제 지향으로 작성 가능! * * 📌 OOP란? * OOP는 프로그램 설계 철학이다. * OOP의 모든 것은 "객체"로 그룹화된다. * OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있다. * * 📌 클래스와 인스턴스란? * 클래스는 일종의 원형(..
/** * 📌 객체 지향 프로그래밍이란? * 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. * * 🔎 * 메서드 - 메서드란 "객체에 딸린 함수" 이다. * prototype - prototype 이란 "모델의 청사진을 만들 때 쓰는 원형 객체(original form)" 입니다. * constructor - "인스턴스가 초기화될 때 실행하는 생성자 함수" * this - "함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context(execution context) * new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨" */ // 1️⃣ 클래스 만들기(ES6 클래스 작성 문법!) // 1. 대문자로 시..
KPT를 기반으로한 개인 회고 1. 목표 상기하기 - 목표 수료 후 3개월 이내로 프론트엔드 개발자로 취직하기! 💪 어떤 회사인지는 아직 정한게 없고, 내가 성장할 수 있고, 배울 수 있는 회사에 취직했으면 좋겠다! 🙏 프로그래밍 사고력(컴퓨팅 사고) 기르기 📈 -> 순서도 작성하기(의사코드 작성하기) 및 프로그래밍 관련 책 읽기! 나만의 프로그래밍 공부방법 찾기 🔍 -> 나만의 블로깅을 하자. 다른 사람이 한 걸 그대로 복붙 ❌, 어려운 개념이 나오면 반복 학습 커뮤니케이션에 능해지기 -> 페어와 이런저런 이야기도 많이해보기! ,🧑🏻💻 [모각코] 스터디를 통해서 자연스럽게 의사소통하기 공부 시간에 온전히 집중하기 -> 내가만든 🧑🏻💻 [모각코] 스터디를 통해서 더욱 더 집중 할 수 있게 할 것! 개..
