전체 글

1. Cloudtype을 선택한 이유 무료다! github 연동 및 배포가 가능하다! https://cloudtype.io/ 모두의 플랫폼팀, 클라우드타입 클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다. cloudtype.io 로그인 후, 새 프로젝트를 생성한다. 2. DB(MariaDB) 배포하기 2.1 Cloudtype 배포 Cloudtype은 MySQL을 지원하지 않기 때문에 MariaDB로 변경하려고 한다. 먼저 Cloudtype에서 MariaDB 템플릿을 선택한다. DB 접속 시 사용할 Root Password을 입력하고, 더 많은 옵션에서 Database Name, Username, Password을 입력한 후 배포한다. 도메인 탭..

1. 배경 기존 하단 네비게션바에서는 아래 코드처럼 각 자식 요소에서 페이지 이동 이벤트를 처리했다. 이 부분의 코드를 리팩토링하려고 한다. navigate("/barcode")}>바코드 대출 navigate("/share")}>공유도서 navigate("/home")}>홈 navigate("/chat")}>채팅 navigate("/mypage")}>마이페이지 2. 설명 (버블링, 이벤트 위임) 각 자식 요소에서는 ①클릭 이벤트를 감지하고 ②페이지를 이동한다는 공통점이 있다. 그래서 이 부분들을 부모 요소에서 처리하도록, 버블링을 활용하여 이벤트 위임을 구현해보려고 한다. # 버블링 (Bubbling) 자식 요소에서 이벤트가 발생하면 해당 요소의 이벤트 핸들러가 동작하고, 부모 요소 방향으로 이벤트가 번..

계속되는 폭우로 일부 지역이 물에 잠겼습니다. 물에 잠기지 않은 지역을 통해 학교를 가려고 합니다. 집에서 학교까지 가는 길은 m x n 크기의 격자모양으로 나타낼 수 있습니다. 아래 그림은 m = 4, n = 3 인 경우입니다. 가장 왼쪽 위, 즉 집이 있는 곳의 좌표는 (1, 1)로 나타내고 가장 오른쪽 아래, 즉 학교가 있는 곳의 좌표는 (m, n)으로 나타냅니다. 격자의 크기 m, n과 물이 잠긴 지역의 좌표를 담은 2차원 배열 puddles이 매개변수로 주어집니다. 오른쪽과 아래쪽으로만 움직여 집에서 학교까지 갈 수 있는 최단경로의 개수를 1,000,000,007로 나눈 나머지를 return 하도록 solution 함수를 작성해주세요. 출처 : 프로그래머스 먼저 출발지(집)는 좌측상단에 위치하고..

배경 최근 한 카페의 태블릿용 메뉴판 제작 의뢰를 받았다. 메인 컬러가 Black이고, 카페의 로고나 인테리어가 심플한 이미지를 갖고 있어서 최대한 심플한 UI로 구성해봤다. 그리고 이번 프로젝트는 단순 정적 웹이라 React + CSS로 몇 시간만에 뚝딱했다. 그리고 ①서비스가 가볍고, ②매장 내 한 기기에서만 사용될 것이기 때문에 Github pages로 배포했다! 아 뭔가 프로젝트가 너무 심심하게 끝나는 것 같다..😑 그래서! Github Actions를 사용하여 자동 배포를 해보고자 한다. Github pages로 호스팅하는 방법은 아래 글을 참고하면 된다. https://shinsojeong.tistory.com/106 Github pages로 정적 웹 무료 호스팅하기 Github pages를 ..