Project > Targets > Build Phases > Copy Bundle Resources 에서 오류가 나는 파일을 - 으로 제거해주면 됨

💡 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 ..

때는 5월말... 교내 동아리 카톡방에 해커톤 공유가 올라왔고 해커톤 경험이 없어서 한 번 나가보고 싶었던 나는 동아리 내에서 팀을 꾸리게 되었다. 백엔드 둘, 프론트 하나(나)로 구성했는데 디자이너가 아무래도 필요할 것 같아서 에브리타임에서 급하게 한 분을 구했다. (참가 신청 선착순) 그렇게 네 명이 참가하게 된 K-해커톤의 후기를 써 보기로 했다! 내가 준비하면서 구글링 했을 때 후기가 얼마 없어서 어떤 식으로 진행되는지 약간 알기 어려웠다. 혹시 해커톤 후기 보러 구글링 해서 들어오신 거면 주요 내용만 쏙쏙 골라 봐주세요!! 저 느꼈던 점까지 다 썼어요 6월~11월까지 6개월의 길었던 K-해커톤 참가 후기 (일기에 가까운 추억팔이 포함) 해커톤 소개 제 9회 해커톤 & 지역XR챌린지 제 9회 해커..

이번 동아리 사이트 개발하면서 모바일뷰는 처음 개발해봤는데, 자꾸 입력 컴포넌트 (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 되는 토글 함수를 전달해 ..