제목 (Headings) 📌 , , , ..., 접근성 고려사항 1. 탐색 스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어 넘으며 페이지 콘텐츠를 빠르게 파악하는 것이다. 따라서 제목 순서를 뛰어 넘으면 ( 다음으로 사용 등) 중간에 빠진 제목이 어디있는지 알 수 없으므로 사용자의 혼란을 야기할 수 있다. 2. 중첩 하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 돕는다. 이때, 중첩 제목에서 하위 구획을 닫을 땐 제목 단계를 위로 건너뛸 수 있다. 3. 구획 콘텐츠 레이블 스크린 리더 사용자가 자주 사용하는 다른 기술은 콘텐츠 구획의 목록을 생성..
HTML이란? 정의 프로그래밍 언어가 아닌 컨텐츠의 구조를 정의하는 마크업 언어이다. 웹페이지를 이루는 가장 기본적인 building block이다. CSS와 JavaScript는 추가적인 부분이며, HTML이 기본이다. HTML이 중요한 이유 웹페이지의 시작은 HTML에서 비롯된다. (웹 브라우저 환경의 베이스!) 웹페이지에 보이는 모든 것들은 HTML 태그의 결과물이다. 👉🏼 따라서 문서의 구조와 정보 위계가 명확히 보이는 HTML 코드를 작성해야 한다. 시맨틱 마크업 (Semantic Markup) 정의 Semantic 시맨틱 == 의미론적인 Markup 마크업 == HTML 태그로 문서를 작성하는 것 👉🏼 따라서 시맨틱 마크업이란, 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 어떻게 작성할..
JSON(JavaScript Object Notation)이란? 경량의 데이터 교환 형식이다. 텍스트 기반의 형식으로, 인터넷에서 데이터를 주고받을 때 많이 사용된다. JSON은 JavaScript에서 객체를 만들 때 사용하는 문법을 기반으로 만들어졌다. 👉🏼 즉, 자바스크립트 객체 문법에 토대를 둔 문자 기반의 데이터 교환 형식이다. JSON 구조 { "name": "Alice", "age": 25, "isStudent": true, "courses": ["Math", "Science", "History"], "address": { "city": "New York", "state": "NY" } } 일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. (key-value 쌍의 집합) 자바..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 리액트 Lv.4 과제 제출하기 🤔 리액트 개념 정리해서 블로그에 업로드하기 ✅ 리액트 Lv.4 과제 제출하기 이번 주는 유독 정신없이 한 주가 흘러가서 다시 되짚어 본다. 월요일엔 지난주에 계획했던 대로 Lv.3 과제를 서로 바꿔 다시 구현해 보면서 리팩토링을 진행했고, 화요일은 각자 복습(나는 hooks와 js 복습 진행), 수요일부터 목요일까지 심화주차 강의를 2/3 들은 뒤 금요일 ~ 토요일 오전은 페어분과 빠르게 프로젝트 기획을 하고 HTML, CSS구현, 토요일 낮 ~ 일요일은 기능 구현을 진행해 일요일 18시에 과제를 제출했다. 심화주차 강의는 리덕스 툴킷, axios, thunk, react query 등으로 이루어져 있었는데 휘몰..
요구사항 정의 구현해야 할 기능 Button styled-components를 이용해 구현하며, props를 적절하게 활용할 것 버튼 label에 선택적으로 아이콘을 넣을 수 있도록 구현 Modal 취소, 확인이 있고, overlay 클릭 시 모달이 닫히지 않음 닫기 버튼만 있고, overlay 클릭 시 모달이 닫힘 모달을 on 시키는 버튼의 형태는 각각 달라야 하며 위에서 만든 버튼 재사용 가능 Inpnut 일반 형식의 Input 숫자를 넣었을 때 3자리 숫자마다 ,가 찍히는 input form을 구현하고 각 inpnut에 값 입력 후 저장 버튼 클릭 시 { name: '아무 텍스트', price: '콤마가 없는 금액' } 을 alert에 표시 Select select 클릭 시 option들이 나오고 ..
모던 자바스크립트란? 모던 자바스크립트 딥 다이브, 모던 자바스크립트 입문.. 모던 자바스크립트라는 말을 많이 접하게 되는데, 모던 자바스크립트가 의미하는 게 대체 뭔지? 가 궁금해져서 이번 주차 스터디 주제를 정하게 되었다. 모던 자바스크립트에서 언제를 기준으로 모던으로 봐야 하는 지에 대한 정확한 기준은 없으나, 일반적으로 모던 자바스크립트라고 말할 때는 다음과 같은 특징을 꼽는다. 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리나 프레임워크를 사용한다. npm이나 yarn 등 패키지 관리자를 사용한다. 주로 ES6 이후의 표기법을 사용한다. 웹팩 등 모듈 핸들러를 사용한다. 바벨 등 트랜스 파일러를 사용한다. SPA(Single Page Application)으로 작성되어 있다. 그렇다면..
📚 2022년 정리했던 글을 옮겨둔 포스팅입니다. Spring, Mybatis, Oracle을 기준으로 작성되었으며 프로젝트 경로, 프로젝트 명은 가려두었습니다. MVC 패턴 이해를 위해 코드를 뜯어보며 정리했던 글이라 틀린 내용이 있을 수 있습니다. MVC(Model, View, Controller) 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있으며, 로직을 분리해 두어 유지보수에 유용하다. 디자인패턴이란? 객체 지향 프로그래밍 설계 시 특정 문맥에서 공통적으로 발생하는 '문제'에 대해 재사용 가능한 해결책으로 사용되는 서술이나 템플릿 Model 정의 애플리케이션의 정보, 데이터를 나타낸다...
Flux 패턴의 등장 배경 Flux 패턴은 페이스북(현 메타)에서 MVC 모델의 단점을 보완하기 위해 발표한 애플리케이션 아키텍처이다. 페이스북은 기존에 MVC 모델을 사용하였다. MVC 모델에서는 View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View를 업데이트할 수 있는데, 새로운 기능이 추가되거나 규모가 커질수록 복잡한 데이터 흐름을 가지게 되어 예측 불가능한 코드를 만들게 되고 버그가 발생하게 되었다. 따라서 페이스북은 대규모 애플리케이션에서 데이터의 흐름을 일관성 있게 관리하여 프로그램의 예측 가능성을 높일 수 있도록, 단방향 데이터 흐름을 가진 Flux를 고안하게 된다. Flux 패턴이란? Flux 패턴은 단방향 데이터 흐름을 유지하는 ..
SPA와 MPA 표로 간단하게 정리하기 구분 SPA (Single Page Application) MPA (Multi Page Application) 정의 한 개의 페이지로 구성된 어플리케이션 여러 개의 페이지로 구성된 어플리케이션 특징 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 한다. 새로운 페이지를 요청할 때마다 정적 리소스가 다운된다. 렌더링 CSR (Client Side Rendering) 방식 👉🏼 클라이언트 단에서 렌더링 진행 SSR (Server Side Rendering) 방식 👉🏼 서버 단에서 렌더링을 마치고 클라이언트는 받아서 실행 장점 리렌더링으로 인한 깜빡임이 없어 유연한 UI, 자연스러운 UX 구현이 가능하다. 유저가 보는 화면 방식이 웹 크롤러가 보는 방..
데이터 바인딩이란? 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러 개의 JS 객체)를 일치시키는 것을 말한다. 즉, HTML에서 변경된 내용이 데이터에 영향을 미치는 가를 말하는데, 이에 대한 차이를 기준으로 '양방향', '단방향' 바인딩으로 나눌 수 있다. 양방향 바인딩 양방향 데이터 바인딩의 대표인 AngularJS는 엘리먼트에 데이터를 바인딩하면 JS 코드로 데이터를 변경할 수도 있고, 엘리먼트의 값(input)을 수정해서 데이터를 변경할 수도 있다. 단방향 바인딩 React와 같은 단방향 바인딩은 JavaScript에서 HTML로만 데이터 바인딩이 가능하다. 즉, HTML에 바인딩한 데이터를 JS에서 수정할 경우 화면에는 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을 때 JS..
