분류 전체보기
Google Lighthouse
Lighthouse란? 구글에서 개발된 오픈소스 사이트 성능 측정 도구 웹페이지의 성능, 접근성, PWA, SEO 등을 검사하여 품질 검사 진행 검사할 사이트의 url만 있으면 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용가능 공식 사이트 소개 검사 항목 1. Performance (웹 성능) - 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 2. Accessibility (웹 접근성) - 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 3. Best Practices (웹 표준 모범 사례) HTTPS 프로토콜을 사용..
웹 표준 및 웹 접근성
웹 표준 웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’ 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법 웹 개발에 사용되는 언어인 HTML(화면의 구조), CSS(표현), JavaScript(동작) 등의 기술 웹 표준 준수 시의 이점 유지 보수의 용이성 웹 표준으로 HTML, CSS, JavaScript 로 화면의 구조, 표현, 동작 영역이 분리되면서 유지 보수가 용이 / 코드의 경량화 / 트래픽 비용 감소 웹 호환성 확보 검색 효율성 증대 웹 접근성 향상 시맨틱 HTML (Semantic HTML) 시맨틱 요소*를 적절하게 사용하여 구성한 H..
UI와 UX에 대한 기초 이해
UI (User Interface) "사람들이 컴퓨터와 상호 작용하는 시스템" 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 인간이 컴퓨터와 상호 작용하기 위한 시스템이므로 UI ex) 피쳐폰: 숫자 키, 방향 키 등 물리적 UI (터치로 상호작용 어려움) 스마트폰: 화면 터치를 통한 상호작용 비율 증가 (모바일 디바이스의 그래픽 UI 중요성 👍) 컴퓨터: 마우스 등장 이후 그래픽 UI*의 중요성 👍 (직관적, 간편함) 프론트엔드 개발자에게 가장 중요한 요소 중 하나 UX (User Experience) "사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험" 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로..
[HTTP/네트워크] REST API
REST API REST: “Representational State Transfer”의 약자 로이 필딩 (Roy Fielding)의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개된 개념 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST 성숙도 모델 로이 필딩은 이 모델의 모든 단계를 충족해야 REST API라고 부를 수 있다고 주장 BUT 엄밀히 3단계까지 지키기 어려워서 2단계까지만 적용해도 좋은 REST API 디자인이라고 볼 수 있음 0단계 HTTP 프로토콜 사용 (그러나 이 단계에서는 REST API라고 부르기에는 부족) 1단계 개별 리소스와의 통신을 준수 개별 리..
[React] React & JSX 기초
리액트 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 리액트의 3가지 특징 선언형declarative JSX라는 html + 자바스크립트 결합 기반의 명시적 코드 작성 다른 기술 한번에 모아서 볼 수 있어서 코드만 보고도 실제 기능 쉽게 상상 가능 코드의 의도 분명히 작성 컴포넌트* 기반 *컴포넌트: 하나의 기능 구현을 위해 여러 종류 코드를 묶음 컴포넌트의 독립성 재사용성 👍 -> 기능 작동에 집중하여 개발 가능 / 쉬운 유지보수 및 유닛테스트 범용성 - "Learn once, write anywhere" (프레임워크는 생태계에 종속되지만) 기존 프로젝트에서 개발하던 코드를 일부만 수정해도 사용가능 Facebook에서 관리되어 안정적이고 유명 리액트 네이티브로 모바일 앱 개발도 가능 J..
[JavaScript] 객체 지향 프로그래밍 (OOP)
객체 지향 프로그래밍 - 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식 - 사람이 세계를 보고 이해하는 방법과 매우 흡사 - 현대의 언어들은 대부분 객체 지향의 특징을 갖고 있음 ex. Java, C++, C# cf. JavaScript: 객체 지향으로 작성 가능 - OOP의 모든 것은 "객체"로 그룹화됩니다. - OOP의 4가지 주요 개념(캡슐화/추상화/상속/다형성)을 통해 재사용성을 얻음 캡슐화 1. 데이터와 기능을 (하나의 객체 안에 넣어) 하나의 단위로 묶는 것 2. 은닉(hiding): 구현은 숨기고, 동작은 노출시킴 내부 데이터나 내부 구현이 외부로 노출되지 않게, 객체 외부에서 필요한 동작(메서드)만 노출 엄격한 클래스의 경우 속성의 직접적 접근을 막고 설정하는 함수(..
[JavaScript] 클래스와 인스턴스
객체 지향 프로그래밍 (Object-Oriented Programming)? 하나의 모델이 되는 청사진(blueprint)(=> 클래스Class)을 만들고, 그 청사진을 바탕으로 한 객체(=> 인스턴스Instance)를 만드는 프로그래밍 패턴 클래스 - 일종의 원형(original form)으로, 객체를 생성하기 위한 아이디어나 청사진 - 클래스는 보통 대문자로 시작하며 일반명사로 만듬 cf. 일반적인 함수는 적절한 동사를 포함하고 소문자로 시작 - 클래스에 정의된 속성과 메소드는 인스턴스에서 이용됨 - 객체를 만들기 위한 생성자(constructor) 함수를 포함 인스턴스 - 클래스를 통해 만들어진 객체를 인스턴스 객체 (Instance Object) 로 칭함 - 각 인스턴스는 클래스의 고유한 속성과 ..
[회고] Section 1을 마무리하며
KPT 기반 개인 회고 목표 상기하기 Keep, Problem 작성하기 Try 작성하기 우선순위 정하기 💭 KPT 회고 🫶 목표 코드스테이츠 과정이 끝난 후, 어엿한 개발자로 취직하기!!!!! (연봉… 4천…이상…🙏) 👍 KEEP 주변 모든 것에 개발자적인 호기심 갖기 (이런 건 어떤 알고리즘? 툴? 기술? 메서드??로 개발했을까?) 새로운 것에 대한 지적 호기심 및 탐구 지속하기! 규칙적인 생활하기 👎 PROBLEM 9시 이전 멀쩡하게 기상하기 너무 어렵다 😵💫 수업 종료 후 개인적으로 보충할 시간 부족 카페인 과다!! 운동 부족 공부할 때 건강하지 못한 자세 코딩 기본기 부족 💪 TRY (Action Item) 규칙적인 수면시간을 확보하자 / 수면 직전 핸드폰 금지!! (+6) 수업 이후 시간에 약..
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유?
배열, 객체를 const 키워드로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요. Const 변수에 할당된 값은 바뀌지 않지만, 배열/객체가 변수에 할당될 때에는 배열/객체의 요소(값) 자체가 아니라 주소(이 값은 불변, 상수)가 할당되기 때문입니다. const는 변하지 않는 상수constant 를 선언하는 키워드이며, 이 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 그러나 배열, 객체는 참조자료형reference data type이며, 참조 값은 변수에 주소를 할당합니다. (cf. 변수에 값을 직접 할당하는 원시자료형primitive data type) 숫자, 문자열 등의 원시 자료형은 stack 영역*에 값 자체가 저장되지만 배열, 객체, 함수 등의 참조자료형은 ..
