CSS

1. 웹 성능 최적화란? 웹 프론트 환경에서는 각종 리소스들을 화면에 띄우고 업데이트 하는 과정에서 지속적으로 비용을 소모한다. 따라서, 웹 프론트엔드 성능 개선을 위해서 개발자는 최소한의 데이터로 빠른 시간에 사용자가 불편함을 느끼지 않는 최적의 화면을 띄워야 한다. 상품 관리자, 프로덕트 매니저에게 웹 페이지가 얼마나 빨리 로딩되는지가 서비스 사용자 경험(UX, User Experience)에 영향을 주며 매출 및 수익에 영향을 줄 수 있으므로 웹 성능 최적화를 대략적으로 이해하는 것이 중요하다. 결과적으로, 웹 프론트엔드 개발자의 웹 성능 최적화 작업으로서 사용자에게 좋은 사용자 경험을 제공할 수 있고 비즈니스의 성공과도 직결될 수 있다. 2. 최적화를 왜 해야할까? · 비즈니스 관점 웹 성능 최적..

리액트 프로젝트에서 POST 기능을 구현하는데 파일을 업로드하는 부분도 만들어야 했다. 이 페이지는 내가 마크업을 하지 않아서 기능만 구현하고 있었다. 프로젝트 발표 후 웹접근성을 다시 고려해 리팩토링을 하고 있던 도중 문제를 발견했다. 파일업로드 부분은 tab key로 접근이 안된다는 점이다. 마크업을 살펴봤을 때 input이 display: none; 상태여서 접근이 불가능 했다. 그래서 고민을 하다가 tabIndex 를 주자 싶어서 코드를 수정했다. 코드를 수정한 부분은 div에 tabIndex 속성을 부여했다. 근데 여기서 tabIndex 만 주면 밑과 같이 eslint 가 경고를 한다. 이 오류를 해석했을 때 tabindex는 대화형 요소에서만 선언해야 합니다. 라고 알려주는 것이다. 잘 이해가..

리액트 프로젝트를 하면서 웹접근성에 맞게 리팩토링을 진행하고 있다. 마우스 없이 tab key로도 동작이 되도록 다시 코드를 수정하고 있던 도중 문제를 발견했다! 바로.. 등록버튼의 색상이 포커스됐을 때 색상과 비슷해서 티가 안난다는 것.. 뭔가 커지긴하는데 티가 안난다. 포커스가 잘 되는지 마는지 인식이 안된다. 그래서 focus 됐을 때 색상을 변경해줘야 한다고 생각이 들었다! 팀원들에게 조언을 구한 후 색상을 변경하자는 결론에 도달했고, 자료를 찾다가 여러가지 방법을 발견했다. 이 방법을 정리하기 전에 초점, 포커스링의 개념과 중요성을 알아야 한다. 초점 / 포커스링의 개념과 중요성 1. 초점의 개념 일상 속에서 우리는 무언가 집중해서 보거나 일을 할 때 초점이라는 단어를 쓴다. 컴퓨터에서는 키보드..

리액트 프로젝트를 하다가 생각지 못한 문제에 부딪혔다! 바로 스크롤 유무에 따라서 화면이 왼쪽으로 밀리는 현상이 있다는 것.... 이 문제를 어떻게 해결해야할까 많은 고민을 했다. ❗️흔들리는 애플리케이션 인터페이스 Y축 이 문제를 해결하기 위해서 임의로 전체에 스크롤을 만드는 방법이 있었다. body { overflow-y: scroll; } 📢 여기서, 의문! 💬 과연 이 밀림 현상 하나 때문에 전체에 스크롤을 임의로 줘서 막아도 될까? 정답은 없지만.. 만드는게 더 낫다! 라는 결론이 나왔다. 나는 이런 문제가 사용자에게 혼란을 불러올 수 있다고 생각했다. (임의로 세로 축을 만드는건데, 왜 스크롤이 안될까? 라는 의문을 가질 수 도 있다고 생각했음) 그리고 다른 사이트들을 엄청나게 찾아봤다. 😮 ..