본문 바로가기

웹14

반응형 CSS, 뷰포트, 여러 단위(%, vw, em, rem), 미디어 쿼리 반응형 css를 처음 접하고 공부를 할 때, 뷰포트나 여러 단위(%, vw, em, rem) 등이 많아 되게 헷갈렸었는데, 개발 시에 어떤 식으로 적용이 가능한지 그리고 애매한 개념들에 대해 정리해 보겠습니다. 뷰포트(viewport) 뷰포트란 사용자가 브라우저에서 웹 페이지를 볼 수 있는 영역을 의미합니다. 일반적으로, 데스크탑에서는 브라우저의 크기에 따라 뷰포트의 크기가 변합니다. 웹 개발을 할 때 개발자 도구에서 확인해 보면 브라우저의 크기에 따라 html 태그의 크기가 변하는데, html 태그의 width 기본값이 100%라서 그렇습니다. html 태그의 넓이가 뷰포트 영역의 넓이와 같냐고 한다면, 꼭 그렇지는 않습니다. 스크롤바 또한 뷰포트 영역에 포함되기 때문에, 스크롤바가 있다면 html 태.. 2022. 4. 2.
[Spring] Spring Data JPA PageRquest 관련 에러 Page findAllPostByCategory(PageRequest pageRequest); Page findAllPostByCategory(Long categoryId, PageRequest pageRequest); 위처럼 파라미터가 PageRquest 하나였을 땐, 잘 실행되다가 Long categoryId가 파라미터로 추가되면서, but parameter 'Optional[pageRequest]' not found in annotated query ~ java.lang.IllegalStateException: Using named parameters for method public abstract ~ 같은 에러들이 발생했습니다.. 아래쪽 Illegal 에러로 검색해본 결과, @Param 어노테이션.. 2021. 12. 30.
[Spring] Spring Data JPA Native Query 작성 시 필요한 것들 Spring Data JPA에서 Native Query를 작성하는 것은 크게 어렵지 않습니다. public interface PostRepository extends JpaRepository { @Query(value = "SELECT * FROM post", nativeQuery = true) List findAllPost(); } 위처럼 @Query 어노테이션을 사용하여 쿼리를 입력하고, nativeQuery 옵션을 true로 주시면 됩니다. 하지만 해당 쿼리는 findAll 같은 기본 JPA가 자동으로 생성해주는 쿼리를 사용하면 되기 때문에, 테이블에서 특정 컬럼만 가져오거나, 여러 테이블을 조인하거나 할 때, Native Query를 사용하게 될 겁니다. public interface PostRe.. 2021. 12. 29.
[React] 이미지 모달 구현하기 https://hackids.tistory.com/127 [React] React로 만든 이력서 Github Pages로 배포 및 후기 서론 학교를 졸업하고 취업을 준비한 지도 8개월이 지났습니다. 부족했던 자료구조와 알고리즘 실력을 키우기 위해 백준과 같은 온라인 저지에서 문제도 많이 풀어보고, 종만북이라 불리는 알 hackids.tistory.com 이력서를 리액트로 개발할 때, 이미지 모달 부분이 조금 힘들었던 기억이 있습니다. 라이브러리를 쓰지 않고 구현해보려 노력했고, 기본적인 기능은 나름 갖춘 모달을 완성하였습니다. 리액트와 css만을 이용해서 이미지 모달 구현하는 법을 알아보겠습니다. App.js import { Component } from "react"; import Modal from .. 2021. 10. 21.

티스토리툴바