Today Mini Learned :

기록하는 습관 들이기

STUDY - 공부기록/Web 12

[React] React Hook - useRef()으로 DOM 요소에 접근하기 (useRef 사용해서 링크 클립보드 복사 버튼 만들기, form 요소 focusing해보기)

리액트에서 특정 DOM을 선택하려면? Vanilla JS로 개발할 때에는 document.getElementById("id-value")과 같이 id값이 id-value인 DOM을 선택할 수 있었다. 하지만 리액트에서는 위의 방법을 대체할 수 있는 방법이 존재한다. 그렇다면 리액트에서 특정 DOM을 선택하려면 어떻게 해야 할까? 바로 useRef()를 이용하면 된다! 현재 작성하고 있는 프로젝트에서 함수형 컴포넌트로 코드를 작성하고 있기 때문에 함수형 컴포넌트를 사용할 때 useRef()를 사용하는 방법에 대해 알아보려고 한다 (❁´◡`❁) useRef() import React, { useRef } from "react"; const textRef = useRef('mini'); 먼저 useRef를 i..

[부스트코스] 웹 접근성 수강기 (2) 웹 접근성을 진단할 수 있는 도구와 각 환경에 대한 스크린리더 사용법

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

[부스트코스] 웹 접근성 수강기 (1) 웹 접근성의 이해, 준수해야 하는 이유, 웹 접근성 지침과 준수 방법

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

[React] 리액트에서 toast 알림창 직접 만들어보기

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

[React] api key 숨기기, React 환경에서 Kakao Map API 사용 시 api key를 관리하는 방법

React 환경에서 Kakao Map API를 사용하면서 api key를 관리하는 방법 1. dotenv 설치 yarn add dotenv // or npm install dotenv 2. index.html의 head부분에 스크립트 추가 3. 프로젝트의 최상단에 .env 파일 생성 src파일 내에 만들어야 했나 싶었는데 index.html에서도 써야하고 해서 그냥 최상단? 사진 위치에 해줬을 때 잘 동작했음 4. gitignore에 등록 우리의 소중한 api key는 노출되면 안되니까 5. env에 api key 작성 REACT_APP_KAKAOMAP_API_KEY=qwer1234 반드시 REACT_APP_으로 시작해야 한다 설정 끝!

[CSS] 텍스트 외곽선 효과 주기, 텍스트 테두리 만들기

다음과 같은 글씨를 꾸미기 위해 노란색으로 텍스트를 둘러주려고 한다. 방법 1. -webkit-text-stroke 사용 -webkit-text-stroke: 1px yellow; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: yellow; 다음과 같은 코드로 적용시킬 수 있다. 그러나 관련 문서를 보면 해당 방식으로 테두리를 주는 것이 표준이 아니며, IE에서는 지원이 되지 않는다고 한다. 또한 이 방식은 글자의 안쪽으로 테두리를 주는 방식이라 글자가 작으면 다음과 같이 보이는 특징이 있다. (방법 2와 비교해보면 다르다) 방법 2. text-shadow 사용 text-shadow: -1px 0px yellow, 0px 1px yellow, 1..

[Inflearn] 심리테스트 사이트 만들기 4

[Inflearn] 판다코딩님의 "[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기" 강의 수강 기록 * 강의명을 누르면 해당 강의로 이동할 수 있습니다. * 본 게시글은 강의를 수강하며 개인적으로 알게 된 점, 느낀 점을 그저 정리해두는 게시글입니다. 강의 내용 자체를 캡쳐하거나 코드를 직접적으로 게시하지 않았으니 해당 내용은 강의를 수강하시며 얻게 되셨으면 좋겠습니다 :3 더보기 심리테스트 사이트 제작 Github 2021.06.14 - [STUDY/웹] - [Inflearn] 심리테스트 사이트 만들기 1 2021.06.25 - [STUDY/웹] - [Inflearn] 심리테스트 사이트 만들기 2 2021.07.01 - [STUDY/웹] - [Inflearn..

[Inflearn] 심리테스트 사이트 만들기 3

[Inflearn] 판다코딩님의 "[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기" 강의 수강 기록 * 강의명을 누르면 해당 강의로 이동할 수 있습니다. * 본 게시글은 강의를 수강하며 개인적으로 알게 된 점, 느낀 점을 그저 정리해두는 게시글입니다. 강의 내용 자체를 캡쳐하거나 코드를 직접적으로 게시하지 않았으니 해당 내용은 강의를 수강하시며 얻게 되셨으면 좋겠습니다 :3 더보기 심리테스트 사이트 제작 Github 2021.06.14 - [STUDY/웹] - [Inflearn] 심리테스트 사이트 만들기 1 2021.06.25 - [STUDY/웹] - [Inflearn] 심리테스트 사이트 만들기 2 >>>현재글