과제 제출마감 10분전

본 게시글은 부스트코스에서 이선주님의 "웹 접근성 이해" 강의를 수강하고 작성된 게시글입니다. 3. 웹 접근성 진단도구 CCA (Color Contrast Analyser) 명도 대비 체크 프로그램 KWCAG a11y inspector 컨트롤의 대각선 길이를 측정 OpenWAX 접근성을 자동으로 진단 가능한 부분까지 진단해주는 프로그램 W3C Validation 웹 표준 검사 사이트

본 게시글은 부스트코스에서 이선주님의 "웹 접근성 이해" 강의를 수강하고 작성된 게시글입니다. 1. 웹 접근성의 이해 웹 접근성이란? 어떠한 사용자가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것, 따라서 모든 기기에서 불편함 없이 웹에 접근할 수 있도록 해야 한다. 웹 접근성을 준수해야 하는 이유? 1. 장애인 차별 금지법 법으로 정해져 있기 때문에 2. 웹의 지향성 www의 창시자 팀 버너스 리는 "웹의 힘은 보편성에 있으며, 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소"라고 하였음 2. 웹 접근성 지침 W3C가 WCAG(웹 콘텐츠 접근성 지침)을 발표 이를 국내 설정에 맞게 반영한 것이 KWCAG. 원칙 4..

백준 문제 풀이 [백준] 9205. 맥주 마시면서 걸어가기 9205번: 맥주 마시면서 걸어가기 송도에 사는 상근이와 친구들은 송도에서 열리는 펜타포트 락 페스티벌에 가려고 한다. 올해는 맥주를 마시면서 걸어가기로 했다. 출발은 상근이네 집에서 하고, 맥주 한 박스를 들고 출발한다. www.acmicpc.net 문제 해석 & 접근 방법 출발지에서 50m씩 움직일 때마다 맥주 한 병이 필요하다. 맥주는 총 20개를 들고 있을 수 있고, 편의점에 도착할 경우에는 맥주가 20개로 리필된다. 출발지, 편의점들, 도착지의 좌표가 주어질 때 맥주가 다 떨어지지 않고 도착할 수 있는지 여부를 구하는 문제이다. 처음에는 BFS로 풀려고 접근했지만 플로이드 워셜 알고리즘을 이용하면 문제가 간단해질 것 같아 해당 알고리즘을..

플로이드 워셜 (Floyd Warshall) 알고리즘 두 점의 최단 거리를 구하기 위한 알고리즘 특히, 모든 정점 사이의 최단 거리를 구할 필요가 있을 때 사용하는 알고리즘이다. 그 이유는 알고리즘 수행 시 모든 정점 사이 최단 거리를 계산하며 사이에 있는 정점을 통해 최단 거리를 개선해 나가기 때문! 시간 복잡도 O(N^3) 과정 다음 그래프가 주어졌을 때, 플로이드 워셜 알고리즘을 수행하는 과정은 다음과 같다. 1. 먼저 모든 정점에서 다른 정점으로 (다른 점을 거치치 않고!) 바로 갈 수 있는 거리를 구한다. 1 2 3 4 5 1 0 ∞ 1 ∞ 5 2 3 0 9 2 ∞ 3 4 4 0 ∞ ∞ 4 ∞ 8 6 0 ∞ 5 ∞ ∞ ∞ 2 0 2. 그 후, 모든 정점에 대해 순회하며 해당 정점을 거쳤을 때의 ..

백준 문제 풀이 [백준] 16918. 봄버맨 16918번: 봄버맨 첫째 줄에 R, C, N (1 ≤ R, C, N ≤ 200)이 주어진다. 둘째 줄부터 R개의 줄에 격자판의 초기 상태가 주어진다. 빈 칸은 '.'로, 폭탄은 'O'로 주어진다. www.acmicpc.net 문제 해석 및 접근 방법 처음 폭탄을 설치하고, 2초에 빈 칸들에 새롭게 폭탄을 설치한다. 그 후 3초째에는 처음 설치한 폭탄이 폭발하고 4초째에 폭발한 자리가 비었으므로 다시 새로운 폭탄을 설치한다. 다음과 같은 패턴이 반복됨을 알 수 있다 폭탄은 3초 뒤에 폭발하고, 폭발 시에는 연쇄 반응 없이 상하좌우 4개를 같이 폭발시킨다. 따라서 처음 상태가 주어졌을 때, N초가 지난 후의 격자판 상태를 구하려 하는 문제이다. 처음 폭탄이 주어..

리액트로 만든 앱을 Github에 올리고 싶을 때, 간단하게 올리는 방법! 1. 리액트 앱과 올릴 레포지토리 준비 예시로 사용할 리액트 앱을 Github-portfolio에 만들어 둔 상태 그리고 해당 파일들을 올릴 레포지토리도 준비 완료! 2. 깃 원격 레포지토리 설정 깃 배시를 열어서 올리고자 하는 폴더에 들어온다. 여기서 다음 명령어를 입력해준다 git init git remote add origin REPOSITORY_URL (git을 활성화하고 원격 레포지토리와 해당 폴더를 연결시켜줌) REPOSITORY_URL은 여기서 찾을 수 있다. 해당 레포지토리를 origin으로 등록하고 master 브랜치에서 내용을 업로드 할 수 있게 되었다! 3. git push로 업로드 origin에 master ..

백준 문제 풀이 [백준] 7569. 토마토 7569번: 토마토 첫 줄에는 상자의 크기를 나타내는 두 정수 M,N과 쌓아올려지는 상자의 수를 나타내는 H가 주어진다. M은 상자의 가로 칸의 수, N은 상자의 세로 칸의 수를 나타낸다. 단, 2 ≤ M ≤ 100, 2 ≤ N ≤ 100, www.acmicpc.net 문제 해석 7576. 토마토 문제에서 z축이 추가된 문제이다. BFS를 사용해서 풀 수 있다. 토마토가 보관된 상자의 x y z 크기가 주어지고, 입력으로 토마토의 정보가 주어진다. 1 = 익은 토마토, 0 = 익지 않은 토마토, -1 = 토마토가 없는 칸이다. 또한 토마토가 무조건 하나 이상 있는 경우만 입력으로 주어진다고 했다. 이 때 토마토가 모두 익는 데 며칠이 걸리는지를 답으로 출력하면 ..

React로 웹 앱을 만들 때, 입력하지 않은 input이 있으면 알림을 띄우는 기능을 구현하려고 했다. 이 때 alert 대신 toast를 통해 알림을 띄우면 깔끔해 보일 것 같아 만들어보는 toast 알림창! ❕ Toast Notification 이런 알림이 toast알림이다. 안드로이드에서 자주 보이는 알림인데, 웹에서는 내장되어 있는 기본 기능이 아니기 때문에 직접 만들어야 한다. + react-toastify라는 오픈 소스 라이브러리를 이용하여 간단하고 쉽게 toast 알림 기능을 사용할 수 있게 코드를 제공하고 있었다. 하지만 나는 직접 만들어 보고 싶은 생각이 있어서(...!!) 이번만 만들어보고 다음부터는 저 오픈소스를 사용한 알림도 구현해보고 싶다. 💫 구현 과정 1. 기능 구상 위의 r..

💥 에러 발생 상황 모두모두 웹 페이지를 구현할 때, 자신의 출발 위치를 선택하기 위해 카카오맵 API를 사용해서 지도에 마커를 띄우는 기능이 있었다. 처음 위치는 카카오 본사로 되어 있었는데, 아무래도 사용자가 출발할 위치이기 때문에 현재 사용자의 위치를 초기 위치로 잡아주고 마커를 올리면 좋을 것 같다는 생각이 들었다. 그래서 gps를 사용하여 현재 위치를 읽어오는 기능을 구현했다. 문제는... 현재 위치를 가져오는 기능 자체는 문제가 없었는데 gps에서 현재 위치를 받아오는 것보다 Latitude와 Longtitude를 통해 맵을 구성하는 기능이 이 더 먼저 수행이 되어서 현재 위치가 아닌 기본값 위치로 맵에 마커가 생겼다. curLatitude와 curLongtitude에는 기본값으로 정해둔 위치..