반응형 프로그래밍48 render="lazy" 속성이란 lazy 속성render="lazy"는 웹 개발에서 사용되는 속성으로, 웹페이지의 이미지나 동영상 같은 미디어 파일을 "게으르게" 로드하도록 설정하는 기능입니다. 쉽게 말해서, 해당 미디어 파일이 화면에 보일 때까지 로드하지 않도록 하는 것입니다.어떻게 작동하나요?일반적인 경우: 페이지가 로드될 때 모든 이미지나 동영상이 한꺼번에 로드됩니다. 이 경우 페이지 로딩 속도가 느려질 수 있습니다.render="lazy"를 사용하면: 사용자가 스크롤해서 이미지나 동영상이 화면에 나타나기 전까지는 해당 파일을 로드하지 않습니다. 이로 인해 초기 페이지 로딩 속도가 빨라지고, 사용자는 필요할 때만 해당 미디어 파일을 로드하므로 불필요한 데이터 사용을 줄일 수 있습니다.예시:위 코드에서 이미지 example.jpg는.. 2024. 8. 12. [GitHub] 커밋 되돌리기 (롤백) 1. 되돌리고 싶은 커밋 해시 찾기git reflog// 깃허브 히스토리에서도 확인 가능2. 임시 브랜치 만들기git checkout -b temp-rollback 3. 되돌릴 커밋으로 이동하기예를 들어 main이라면 main으로 이동해야 함. git checkout main 4. 되돌릴 커밋으로 이동git reset --hard [커밋해시] 5. 원격 저장소에 강제로 푸시git push origin main -f 6. 임시 브랜치 삭제git branch -D temp-rollback 2024. 7. 10. [GitHub] fatal: refusing to merge unrelated histories 브랜치나의 경우는 main, master(React), spring(spring boot) 이렇게 3개의 브랜치가 있었다. master에 있는 최신 코드를 main에 merge 하려고 하니 관련없는 내용이라며 거절당했다. 해결방법1. 먼저 master로 이동git checkout master 2. 병합하려는 최신 파일이 있는 브랜치의 내용을 로컬에 pull을 한다.git pull origin master 3. main으로 이동git checkout main 4. 병합하기git merge master --allow-unrelated-histories 5. 충돌된 파일들 정리하기 6. main으로 커밋하기 2024. 7. 2. [Spring Boot] 스프링 시큐리티 설정 후 크롤링이 안될 때 문제로그인 기능을 구현하기 위해 스프링 시큐리티를 사용하기로 했다. 스프링 시큐리티를 적용하고 난 후에 기존에 되던 기능들이 안되더라. 왜지? 개발자도구 콘솔에서 에러 내용을 보니 news가 login으로 리다이렉트 되고 있었다. Access to XMLHttpRequest at 'http://localhost:5000/login' (redirected from 'http://localhost:3000/api/news') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 해결스프링 시큐리티 문.. 2024. 7. 2. [Spring] sts4 사용 중 resources 폴더가 없어졌을 때 문제sts4, 이클립스 사용 중 깃허브와 연결 후에 프로젝트를 다시 불러왔는데 src/main/resources 폴더가 사라졌다. application.properties 파일이 있어야 하는 폴더이므로 필수 폴더이다. 없으면 만들면 된다. 해결1. 프로젝트 우클릭으로 폴더를 생성함 (src/main/resources)2. 프로젝트 우클릭 설정 - 빌드패스 - add Folder3. 아까 만들었던 resources 선택 후 저장 생성 완료 2024. 7. 1. [GitHub] rejected non-fast-forward 에러 간단 해결 방법 에러 내용백엔드는 스프링부트 sts로, 프론트는 리액트 vscode로 작업하는데 깃허브가 귀찮게 되었다. Git Staging에서 수정한 파일들을 커밋할 때 나오는 에러이다. 내용을 보면 master에서 master로 커밋이 불가능하다고 한다. 해결 방법rebase를 이용하여 원격 리포지토리의 변경 사항을 로컬 리포지토리에 병합하는 방법이 있다. 새로운 브랜치를 생성해서 거기에 커밋하자. main에서 merge하면 되니까. 나는 2번 방법을 썼다. 2024. 6. 27. [Spring Boot] bean 에러 해결 방법 AppConfig 클래스 생성 에러 내용문제는 WeatherService 클래스에서 RestTemplate 빈을 찾을 수 없다는 것입니다. 스프링 부트 애플리케이션에서 RestTemplate를 사용하려면 빈으로 등록해야 합니다. Description:Field restTemplate in com.pj.web.service.WeatherService required a bean of type 'org.springframework.web.client.RestTemplate' that could not be found.The injection point has the following annotations:- @org.springframework.beans.factory.annotation.Autowired(required=true) 해결.. 2024. 6. 24. [MariaDB] application.properties 설정 MariaDBDialect MariaDBDialect와 MariaDB106Dialect MariaDBDialect MariaDB 버전에 따라서 다르게 사용해야 합니다.MariaDB 10.2 MariaDB 10.2에서는 MariaDBDialect를 사용하는 것이 권장됩니다. MariaDB 10.2 이상의 버전에서는 `org.hibernate.dialect.MariaDBDialect`를 사용하여 Hibernate의 데이터베이스 Dialect를 설정하는 것이 좋습니다. MariaDB 10.1MariaDB 10.1 이하의 버전에서는 `org.hibernate.dialect.MariaDB106Dialect`를 사용해야 할 수 있습니다. 2024. 6. 19. [캡쳐] 한 페이지 전부 스크롤 캡쳐하는 방법 스크롤 캡쳐한 페이지의 모든 내용을 캡쳐하는 방법 즉, 스크롤을 내려서 봐야하는 부분까지 자동으로 캡쳐해주는 방법입니다. 프로그램 설치할 필요 없습니다. 초간단! 캡쳐 방법1. 'F12'를 눌러 개발자 도구 콘솔로 들어갑니다. 2. capture를 검색해서 full size screenshot을 선택합니다. 3. 끝~ 2024. 6. 15. Node.js, React 초기 세팅 frontend (react / javascript)npm create vite@latest .npm inpm run devbackend프로젝트 폴더에서 npm init -y package.json 에서 "main" 변경 backend/server.js 파일 생성 backend 5000포트 확인 => 서버를 재가동해야 함.nodemon 설치 -> server에서 node를 nodemon으로 변경해줌 .env 2024. 6. 10. 이전 1 2 3 4 5 다음 반응형
