TIL

웹 접근성은 모든 사용자에게 동등한 사용성을 보장하기 위해 고려해야할 점이다. sr-only라는 클래스명을 사용하여 스크린리더에서 읽히지만 화면에서는 보이지 않도록 구현해보도록 하자.form과 관련된 태그는 label 태그를 통해 화면상에 시각적으로 이름표를 붙이고 어

어떤 배열 안에서 d로 나눠지는 값 중 중복된 값이 있다면 그 값의 갯수를 반환하는 함수를 코딩해보자.이렇게 되면 전역 변수로 선언되어 의도치 않은 로직을 유발할 수 있으니 항상 주의하자.=> let이나 const로 변수 선언해주기!=> 반환할 값만 반환하면 되므로 r

CSS3에서는 animation 속성을 사용하여 요소의 현재 스타일을 다른 스타일로 변화시킬 수 있다. animation을 사용하면 사용자에게 움직임과 변화를 시각적으로 전달할 수 있다는 장점이 있지만, 너무 많이 사용하거나 복잡한 애니메이션을 적용하면 웹 페이지의 성

window API 에서 제공하는 navigator의 writeText() 메소드를 이용해 오른쪽 아이콘 버튼을 누르면 비밀번호가 복사되는 기능을 구현했다.아이콘 버튼에 click 이벤트가 발생하면 form 요소의 innerText를 password라는 변수로 할당받고

JavaScript를 공부하면서 느낀점여전히 어렵다..모듈화, 상태관리가 제일 어려운 것 같다.결국 category 값을 업데이트 하는데에 실패했다.밤을 새더라도이유를 반드시 찾아내야겠다.JavaScript는 다양한 기능을 다양한 방식으로 많이 구현해보는게 답인 것 같

debounce와 throttle은 함수가 실행되도록 허용하는 횟수를 제어하는 방법이다. 개발자의 입장에서 항상 User Experience를 고려해야하고, 이 방법을 사용하면 이벤트 핸들러의 실행을 최적화할 수 있다. 두 가지 기술 모두 최적화에 용이하지만 각기 다른

🤔 문제 발생 react-router-dom을 설치하고 npm start로 node 서버를 실행하자 위와 같은 오류 코드가 떴다. 열심히 구글링 서치한 결과, Node.js 버전과 OpenSSL 라이브러리 간의 호환성 문제때문이었다. node 17이상 버전에서

프로젝트를 진행하던 중 OnChange 이벤트와 OnBlur 이벤트의 동작 방식을 정리해두면 좋을 것 같다는 생각이 들었다.먼저, 각 이벤트들이 어떤 상황일 때 일어나는지 mdn 문서를 참고하여 정리해볻자.change 이벤트는 <input>, <select>

React 기반 프로젝트를 진행하면서 특정 페이지에 로그인 유저만 접근할 수 있도록 설정하는 <Protected Route> 컴포넌트를 만들어보았다. Protected Route란 인증된 사용자만 접근할 수 있는 경로(Route), 혹은 그것을 구현하는 방식을