💡 What is an ERD? Using ERD in DB engineering guarantees you to produce high-quality DB design to use in DB creation, management, and maintenance. Then first of all, what is an Entity Relationship Diagram? ER Diagram, or ER model, is a type of structural diagram for use in relational DB design in terms of concept visualization. An ERD contains different symbols and connectors that visualize two ..

이번 동아리 사이트 개발하면서 모바일뷰는 처음 개발해봤는데, 자꾸 입력 컴포넌트 (input, textarea)를 터치했을 때 화면이 마음대로 확대가 돼서 막는 방법을 찾아 봤다. 생각보다 간단... index.html의 메타 태그에 user-scalable=no를 추가해서 아래처럼 수정해주면 문제가 해결된다. 모바일에서 input 컴포넌트 클릭 시 자동으로 화면이 확대될 경우 해결 방법 / 모바일에서 입력창(input) 눌렀을 때 확대되는 효과 없애기 / 모바일 웹에서 화면이 확대/축소되지 않도록 설정하기 / 모바일웹 사용자 확대 축소 제어 / 아이폰 input, select 확대 기능 없애기

Link to~로 페이지를 이동할 때에 스크롤의 위치가 전 페이지의 위치 그대로 있어서 해결법을 찾아 봤다. React Router 공식문서에서도 해결법을 소개하고 있는데 Scroll Restoration이라고 부르는가보다 Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com ScrollToTop이라는 컴포넌트를 ..

첫 몇 포스팅을 티스토리 내 코드블럭과 Syntax Highlight 플러그인을 사용해 소스코드를 올렸었는데, 내가 쓰고 있는 스킨의 문제인지 코드블럭 안에 또 박스가 따로 생기고 그 안에서만 스타일이 적용되는 것을 보고 너무 거슬려서 찾아보다가 GitHub Gist를 알게 됐다. 가끔 블로그 보다가 GitHub의 파일을 그대로 갖고 온 것 같은 코드블럭들이 있었는데 그게 이거였다니...~ GitHub Gist 임베드 1. https://gist.github.com/ 에 접속해 코드블럭으로 만들 소스코드를 description, filename과 같이 입력한다. 이때 확장자를 꼭 파일명에 넣어 줘야 언어별 코드 하이라이팅이 제대로 된다. 2. Create secret/public gist를 누르면 아래처..

우선 구글 폰트에서 사용하고 싶은 폰트를 찾는다. 둘러보다가 마음에 드는 폰트를 Select this style 로 선택을 하면 장바구니처럼 폰트들이 Selected families에 담긴다. Selected families를 보면 아래쪽에 알아서 내가 선택한 폰트들을 이용할 수 있는 코드를 만들어 놓았기 때문에 폰트가 쓰일 스타일시트에 그대로 복사 붙여넣기를 하면 된다. 리액트 폰트 추가 / 리액트 구글폰트 / 리액트 폰트 적용 / 리액트 구글폰트 추가 / 리액트 구글폰트 적용 / React 폰트 추가 / React 구글폰트 / React 폰트 적용 / React 구글폰트 추가 / React 구글폰트 적용

모달 컴포넌트 내에 추가해 주면 스크롤 방지 document.body.style.overflow = "hidden"; 모달 닫을 때 쓰는 handle 함수에 추가해 주면 스크롤 방지 해제 document.body.style.overflow = "unset"; 참고: https://velog.io/@potter/리액트-모달창-작동시-스크롤-방지 React 모달 스크롤 막기 / CSS scroll lock / 리액트 모달 스크롤 막기 / React 모달창 스크롤 막기 / 모달창 스크롤 막기 / 모달 스크롤 막기 / 리액트 모달창 스크롤 막기

box-sizing 속성은 요소의 너비와 높이를 계산하는 '방법'을 지정한다. 우선 두 개의 div로 이루어진 box가 위처럼 똑같은 크기로 있다고 하자. 지정을 따로 해주지 않으면 기본적으로 content-box 방법이 지정된다. 이 방법은 요소의 너비가 100px라면 콘텐츠 영역이 100px의 너비를 가지고, border와 padding은 아래처럼 요소의 겉에 덧붙여진다. 빨간색 box가 원래 크기. padding 10px이 이 겉에 붙고, 다음으로 border 10px이 겉에 붙은 걸 확인할 수 있다. 하지만 아래의 div에만 border-box를 지정해 주면? border-box는 border와 padding도 요소의 크기에 포함되는 것으로 고려하기 때문에, 전체 크기는 유지한 채로 콘텐츠 영역을..

언젠가 모달창을 쓸 일이 있었는데, 그냥 구글링 한 코드 그대로 복붙해서 갖다 썼던 기억이 있다. 이번에는 디자인도 제대로 입혀서 쓰고 싶어서 더 많이 찾아봤는데 대부분 라이브러리를 많이 이용하는 것 같았다. 나는 내가 맡은 구역 이외에도 다른 팀원이 가져다 쓸 수 있도록 템플릿 같은 개념의 ModalFrame을 만들어 놓고 추가적인 속성이나 안에 들어가는 컴포넌트들은 ModalFrame의 children으로 구성하도록 하고 싶었다. 또, 모달 배경을 블러 처리 해야 했고 그 배경을 눌렀을 때 모달이 닫히게 만들고 싶었기 때문에 열심히 찾아보고 만들어보고 하던 중 딱 맞는 블로그 발견. 이 분 블로그를 보고 참고해서 만들었다. _handleModal로 모달이 open/close 되는 토글 함수를 전달해 ..

body { -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; } 위 코드를 css 파일에 넣어 주면 거슬렸던 스크롤바가 사라진다. css 스크롤바 숨기기 css 스크롤바 없애기 css 효과

동아리 홈페이지를 만들던 중 mouse hover 시 프로젝트 명이 포함된 바로가기...? 아무튼 클릭을 유도하는 식으로 이미지가 변하는 걸 구현해야 했다. 이전 프로젝트에서도 비슷하게 hover 때 바뀌는 이미지를 구현했었는데 그때 코드를 참고하려고 봤더니 웬 state까지 동원해서 onMouseEnter, onMouseLeave 이런 걸로 구현을 했었다 (...) 이것도 좋은 방법인지는 모르겠지만 전보단 훨씬 낫기 때문에 ^__^ 처음에는 어차피 그냥 배경이 검은색이니까 이미지에 hover 시 opacity 속성을 주려고 했으나 프로젝트 명도 들어가야 되기 때문에 방향을 틀었다. 그래서 Card 컴포넌트로 CardImage, CardHover를 감싸서 두 개를 겹쳐놓고 CardHover는 보였다 안 ..