본문 바로가기

Front-End19

[Thymeleaf] 내가 사용했던 소스 코드 설명 모음(계속 업데이트) 사용하기 전에는 무조건 HTML 상단에 박아주고 시작  thymeleaf 에서 받은 변수를 자바 스크립에서 사용하고 싶들 때 var userCode = [[${userCode}]]; function moveMyPage(){ window.location.href = '/myPage/'+ userCode ; } 변수명 받을 때User Code 2024. 9. 20.
[HTML] sr-only 와 display: none Spring Security의 로그인 폼을 분석하던 중, sr-only 클래스를 접하게 되어 이 클래스를 공부하게 되었다. 화면에서는 숨기고 싶은 요소에 적용하면 시각적으로 보이지 않게 된다는 점에서, 내가 알고 있던 display:none과의 차이가 궁금했다. sr-only VS display: none두 방식의 가장 큰 차이는 웹 접근성이다. display:none을 사용하면 해당 요소가 화면에 출력되지 않을 뿐만 아니라, 검색 엔진이나 스크린 리더에서도 해당 요소가 인식되지 않는다. 예를 들어, 네이버나 구글과 같은 검색 엔진에서 해당 내용은 읽어들이지 않게 된다. 반면, sr-only는 화면상에서는 출력되지 않지만, 스크린 리더나 검색 엔진에서 해당 텍스트를 인식할 수 있도록 해준다. 이는 웹 접.. 2024. 9. 20.
프론트 엔드 개발 성능 최적화 개념 공부 캐싱 기법에는 여러 가지가 있으며, 각각의 기법은 웹 페이지의 로딩 속도를 개선하고 서버 부하를 줄이는 데 도움을 준다. 1. 브라우저 캐싱 (Browser Caching)브라우저 캐싱은 클라이언트 측에서 웹 자원을 저장하여 사용자가 웹 페이지를 다시 방문할 때 로딩 시간을 단축시키는 방법이다. 브라우저 캐싱을 통해 자원 (이미지, 스타일시트, 스크립트 등)을 일정 기간 동안 로컬 저장소에 저장할 수 있다.Cache-Control 헤더: HTTP 응답 헤더에 Cache-Control을 설정하여 자원의 캐싱 정책을 정의한다Ex) Cache-Control: max-age=3600은 자원을 1시간 동안 캐시하도록 지시Expires 헤더: 자원의 만료 시간을 지정하여 캐시된 자원이 유효한 기간을 설정한다.Ex).. 2024. 9. 18.
[JavaScript] 자바스크립트 CallBack 자료들을 찾아보던 중 callback 이라는 단어가 보여서 대충 뭔가 부르는 뜻인가보다 라고 생각하면서 있었는데 어느순간 궁금해져서 공부해보게 됐다. 자바스크립트는 이벤트 기반 언어이기 때문에 다음 명령을 실행하기 전에 다른 이벤트를 계속해서 실행시킨다=>병렬적으로 작동하는 방식인듯? 이라고 생각했으나=> 비동기 작업을 효율적으로 처리하기 위해 이벤트 루프와 태스크 큐를 사용하여 단일 스레드에서 비동기 작업을 순차적으로 실행한다고 한다.=>순차적으로 실행하기 때문에 병렬작업이 아님! 밑은 예시한줄씩 읽기 때문에 first() 함수부터 출력됨 다른 예시 first 함수 안에 setTimeout 이 존재한다 때문에 setTimeout 함수부터 호출하고 first() 를 호출한다때문에 first()를 먼저 호.. 2024. 6. 25.

티스토리툴바