전체 글
-
[CSS] gradient transition 적용하기 (React)CSS 2022. 7. 26. 01:08
background-image 속성을 통해 그라디언트를 표현하고 transition 값을 주면 예쁘게 전환될 줄 알았지만... 되지 않았다. Transitioning Gradients In, CSS, you can’t transition a background gradient. It sure would be nice if you could: .gradient { background-image: linear-gradient( to right, hsl(211, 100%, keithjgrant.com 검색해보니 ::before와 opacity 속성을 이용하여 구현한 예제가 있었다. ::before에 전환 될 그라디언트를 작성하고 opactiy에 transition을 걸어 전환되게 한 트릭이다. 내가 구현하려는..
-
[React] React에서 setInterval 사용React 2022. 7. 22. 18:08
Making setInterval Declarative with React Hooks How I learned to stop worrying and love refs. overreacted.io 번역 / 리액트 훅스 컴포넌트에서 setInterval 사용 시의 문제점 Dan abramov의 https://overreacted.io/making-setinterval-declarative-with-react-hooks/ 번역입니다.All copyrights to Dan Abramovtranslated by Jake seoTHE velog.io react 프로젝트 진행 중 timer를 구현하기 위해 setInterval을 사용해야 했다. setInterval 사용 시 react에서 일어날 렌더링에 관한 이슈에..
-
[Node.js] nodemailer invalid login 오류 (구글 계정)etc. 2022. 7. 19. 20:17
Error: Invalid login: 535-5.7.8 Username and Password not accepted. Node.js에서 nodemailer 라이브러리를 사용하던 도중 발견된 오류이다. 이유를 찾아보니 구글에서 계정을 안전하게 보호하기 위해 2022년 5월 30일부터 Google은 사용자 이름과 비밀번호만 사용하여 Google 계정에 로그인하도록 요청하는 서드 파티 앱 또는 기기의 사용을 더 이상 지원하지 않는다고 한다. 이를 해결하기 방법으로 1. 2단계 인증 설정 2. 앱 비밀번호 생성 : 생성된 앱 비밀번호를 Node.js 에서 사용중인 구글 비밀번호랑 바꾸면 된다. 보안 수준이 낮은 앱 및 Google 계정 - Google 계정 고객센터 도움이 되었나요? 어떻게 하면 개선할 ..
-
[JavaScript] 키보드 이벤트: 특정키 확인 (key, code, keyCode)JavaScript 2022. 7. 18. 18:19
⌨️ KeyboardEvent.code 키보드의 물리적인 키 반환 입력 장치가 물리적 키보드가 아니라 가상 키보드 또는 접근성 장치인 경우 리턴값은 물리적 키보드에서 발생하는 것과 최대한 일치하도록 브라우저에서 설정하여 물리적 키보드 간의 호환성을 최대화한다. 이 속성은 해당 키와 연결된 문자가 아닌 입력 장치의 물리적 위치를 기반으로 키를 처리하려는 경우에 유용하다. (키보드 키를 사용하는 게임의 입력을 처리하는 코드를 작성할 때) ⌨️ KeyboardEvent.key 사용자가 누른 키의 값 반환 ⌨️ KeyboardEvent.keyCode 현재 Deprecated 이므로 권장되지 않는다. key 값을 code로 반환한다.
-
[CSS] 자동 완성 시 input 배경색 변경CSS 2022. 7. 15. 13:18
webkit 기반 브라우저에서 자동완성 기능을 사용할 때 배경색이 바뀐다. 이를 해결하기 위해선 :autofill 의사 클래스를 사용하면 된다. 🤔 :autofill 요소의 value가 브라우저에 의해 자동으로 채워질 때 동작한다. 사용자가 입력하면 동작하지 않는다. ❗NOTE 많은 브라우저의 user agent style sheets(각 브라우저 마다 CSS 기본 규칙)는 :-webkit-autofill 스타일 선언에서 !important를 사용한다. ex) 크롬의 내부 스타일 시트 background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dark(black, white..
-
[React] 제어/비제어 컴포넌트React 2022. 7. 10. 19:37
폼 엘리먼트 HTML 폼 엘리먼트(input, textrea,select)는 사용자 입력을 기반으로 폼 엘리먼트 자체의 내부 상태를 관리하고 업데이트한다. Name: 예를 들어, 위의 폼은 사용자에게 name을 입력받도록 되어있다. 대부분의 경우 폼의 제출 버튼을 클릭하게 되면 함수로 처리하기 때문에 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리하다. 데이터에 접근하는 방식에서 제어 컴포넌트와 비제어 컴포넌트 방식으로 나누게 된다. 제어 컴포넌트 => React에 의해 값이 제어되는 입력 폼 엘리먼트 비제어 컴포넌트 => React에 의해 값이 제어되지 않는 입력 폼 엘리먼트 제어 컴포넌트 (Controlled Component) React에 의해 값이 제어된다는 뜻은 React가 사용하는 s..
-
[HTML] form 태그와 웹접근성HTML 2022. 7. 7. 00:10
🏷️ 태그 사용하지 않더라도 필수로 과 같이 빈값으로 속성을 넣어줌 🏷️ 태그 폼 요소에 레이블을 붙이기 위한 태그 태그 사용시 폼 요소와 레이블 텍스트가 서로 연결되어 있는 점을 브라우저에게 알림 태그 사용 1. 명시적 작성 방법 요소와 폼 요소를 따로 사용하고 의 for 속성과 폼 요소의 id 속성을 이용해 연결 레이블 2. 암시적 작성 방법 태그 안에 폼 요소를 넣는 방법 레이블 placeholder 속성을 label로 사용? placeholder는 label을 대신하여 제공할 수 없다. 입력 시 내용의 사라짐 스크린리더에서 읽히지 않을 수 있음 번역 시 브라우저에서 건너뜀 디자인 상의 이유로 label를 화면에 명시하지 못할 경우 title 속성 활용 스크린리더는 label과 title을 둘 다 ..
-
[React] Intersection Observer API : 무한 스크롤 구현React 2022. 7. 3. 17:25
Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.Intersection Observer API는 타겟 요소와 상위 요소 또는 developer.mozilla.org 🤔Intersection Observer API란? Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport사이의 교차점 (intersection) 내의 변화를 비동기적으로 관찰하는 방법이다. 즉, 내가 지정한 요소가 화면(뷰포트) 상에 보이고 있는지를 관찰하는 ..