Today Hailie Learned

웹 접근성(Web Accessibility)이란? 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것. 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다. 시력이 좋지 않은 경우, 텍스트를 음성으로 읽어주는 스크린 리더를 사용한다. 그런데 이미지에 들어있는 글자의 경우는 스크린 리더가 인식할 수 없어 음성으로 읽어줄 수 없다. 국내 온라인 쇼핑몰 사이트를 보면 상세 정보가 이미지로 올라와 있는 경우가 많다. 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점..! 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층 확대 : 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되고, 매출 증가..

리덕스 스토어를 리액트 앱에 제공하기 위해서 주로 index.js 파일로 간다. 거기서 전체 앱을 렌더한다. (컴포넌트 트리의 가장 위쪽) 거기서 root 컴포넌트를 렌더한다. 컴포넌트의 대부분이 스토어에 접근해야 한다면, 가장 높은 레벨에서 를 제공해야한다. import React from "react"; import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import "./index.css"; import App from "./App"; import store from "./store/index"; ReactDOM.render( , document.getElementById("root") ); 👇 App에 있는 모든 컴포..

리덕스 처음부터 시작하기 모듈 설치하기 npm i redux react-redux 리덕스를 사용하려면 require로 불러온다. const redux = require("redux"); 저장소 만들기 const store = redux.createStore(); 저장소 만들기 (데이터를 관리함)(관리하는 데이터는 결국 리듀서 함수에 의해 결정된다.리듀서 함수가 새로운 상태 스냅샷을 생성하니까) (리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어내야 한다.) 리듀서 함수 만들기 const counterReducer = (state = { counter: 0 }, action) => { return { counter: state.counter + 1, }; }; ➥ 위 함수 해석: 우리가 자동으로 받..

리액트로 일기장을 만드는 토이 프로젝트 중에 날짜 형식을 바꾸고 싶었다. 현재 날짜 형식 클라이언트에서 보내주는 날짜는 아래와 같다. new Date() 나는 2022년 07월 20일 이런 형식으로 나타내고 싶었고, 내가 아는 자바스크립트 문법으로 아래와 같이 코드를 짰다. const year = data.date.getFullYear(); const month ={data}.date.getMonth() + 1; const date = {data.date}.getDate(); const showFilteredDate = `${year}년${month

문제가 일어난 간단한 배경 설명 클라이언트가 새로 입력한 이미지 데이터를 base64로 변환해서 서버로 보낸다. 그리고 서버에서 데이터를 받아와서 클라이언트 서버에서 뿌려주기를 원한다. 내가 직면한 문제 서버로부터 이미지 데이터(base64로 변환된 데이터)를 무사히 가져왔지만, 이미지가 아닌 문자열로 가지고 오는 것이 문제! 미션! 서버에서 가져온 데이터를 문자가 아닌 이미지로 바꿔라!! 삽질한 경로 서버에서 데이터는 무사히 가져왔지만, 어라? 그게 이미지가 아닌 서버네? 그럼 애초에 클라이언트가 데이터를 쏠 때를 고치면 되는게 아닐까????? 라고 생각해서 유저의 데이터 인풋하는 컴포넌트를 수정해보고, 구글링해서 괜찮아보이는 블로그의 코드도 다 따라해보았다. 하지만 결과는 fail!! 3시간이 넘도..

SEO가 무엇인지 SEO의 종류 SEO가 왜 필요한지 SEO에 영향을 미치는 요소의 종류와 각 요소의 작성 방법 SEO란? 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업 SEO를 통해 검색 엔진에서 웹페이지를 더 상위에 노출될 수 있도록 만든다. SEO의 2가지 종류 ✔️ On-Page SEO 웹 페이지 내부에서 진행할 수 있는 SEO. 제목, 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법을 이용하는 방법 Off-Page SEO 웹 페이지 외부에서 이루어지는 SEO. 소셜 미디어 홍부, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법 (웹 페이지 내용이나 구조와 관계없다.) 구글에 특정 키워드를 검색하면 나오는 게시글 중에 상위에 있는 컨텐츠를 클릭해서 HTML 요소..

웹 표준은 어떤 환경에서도 이용할 수 있는 웹 페이지를 만들 수 있는 방법이다. 더 많은 사람들이 이용할 수 있는 웹 페이지를 만들 수 있도록 해보자! 웹 표준의 개념 웹 표준의 등장 배경 웹 표준을 왜 지켜야하는지 / 필요성 웹 표준의 개념 인터넷이 웹보다 더 포괄적인 개념이다. 인터넷 : 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망 (웹, 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스 모두 포함) 인터넷은 클라이언트와 서버로 구성되며, TCP/IP라는 기본 프로토콜을 통해 제공되고 있다. 웹(world wide web) : 인터넷 상에서 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 웹표준 : W3C(World Wide Web Consort..

배열.find()는 반복문이지만, 원하는 것을 찾으면 (return이 true) 찾아준다. (첫번째만!!) let cities = ['seoul', 'busan', 'incheon', 'ulsan', 'jeju']; let city = 'jeju'; let chars = 4; let chars3 = 7; let match = cities.find(item => { if(city === item) return true; }); console.log(match); // 결과값 // 'jeju' let match2 = cities.find(item => { if(item.length === chars) return true }) console.log(match2) // 결과값 // 'jeju' let matc..

1. Redux를 왜 쓰는가? 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음 ➥ 상태 관리 라이브러리인 Redux는, 전역 상태를 관리할 수 있는 저장소인 Store를 제공해서 데이터 흐름을 깔끔하게 만들어준다. 2. Redux의 구조 Action 객체 ⇒ Dispatch 함수 ⇒ Reducer 함수 ⇒ 전역 상태 저장소 Store 상태를 변경 ⇒ 화면 리렌더링 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 A..

최단 거리를 구할 때 쓴다. 레벨 탐색이라고도 불린다. function solution () { let answer = ''; let queue = []; queue.push(1); while(queue.length) { let v = queue.shift(); answer += v + ' '; for(let nv of [v*2, v*2+1]) { if(nv > 7) continue; queue.push(nv); } } return answer; } ➥ 1 2 3 4 5 6 7 이 나온다.