기존 input 창에는 날짜와 시간을 합친 형태가 없어서, 우리가 기존에 다운로드 했던 머테리얼 ui에서 Date Time Picker찾았고, 사용하기로 했다. 문제는, 사용자가 시간을 클릭했을 때, 2021-08-11T10:33 이러한 형태로 값을 보내주고 있었다. 이미 우리는 Moment.js를 이용하고 있었고, 우리가 필요한 형식으로 변환하였다. 그러나 여기서 더 추가적인 문제를 발견했다. 아래의 영상처럼 오전과 오후가 변해도 시간이 바뀌지 않는 것이다. (다시 생각해보면 12시간 체제의 문제) 변환해야 할 값에서 T를 빼줘도, 여전히 24시간 체제로 바뀌지 않는다. moment("2021-08-12 17:30").format("YYYY-MM-DD hh:mm")//실패 수 많은 삽질 속에서 스택오버..
Netlify 배포 과정 중 아래와 같이 빨~~갛게 도배된 창을 만날 수 있습니다.... 😫 Treating warnings as errors because process.env.CI = true. 라는 오류인데, sites에 들어가서 상단에 아래의 버튼을 누르고, 왼쪽메뉴에서 아래의 버튼을 누르고, Edit settings를 눌러서 Build command를 아래와 같이 수정해주면 됩니다! 다시 deploy를 하면 이렇게 아름답게 배포가된 것을 확인할 수 있습니다! Bravo! 🦄 더 확인해야할 것! 프로젝트 json 파일에 hompage 설정을 했나요? netlify에서 준 url로 꼭! 설정을 해주셔야 합니다. json 파일이 깃헙 레포지토리 root에 위치하고 있나요?
https://developer.mozilla.org/ko/docs/Web/CSS/calc() calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다. 예시1 height: calc(100vh-50px) 전체 스크린에서 50px을 뺀 값을 적용합니다. 예시2 height: calc(100vh-50px) 부모컴포넌트의 100%값에서 50px 뺀 값을 적용합니다. 이렇게 calc()를 사용하면 자동적으..
block level에서 사용할 수 있다. 이렇게 사용하면 너비에 넘치는 문자열이 ...으로 표기된다. white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
https://firebase.google.com/docs/auth/web/password-auth?authuser=0 자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기 Firebase 인증을 사용하여 사용자가 이메일 주소와 비밀번호로 Firebase에 인증하도록 하고, 앱의 비밀번호 기반 계정을 관리할 수 있습니다. 시작하기 전에 자바스크립트 프로젝트에 Firebase를 추가 firebase.google.com firebase auth를 활용한 비밀번호 기반 계정은 이메일과 비밀번호를 가지고 계정을 생성할 수 있습니다. 위와 같이 비밀번호를 짧게 입력하면 400 서버오류가 납니다. 파이어베이스 자체에서 비밀번호를 최소한 6글자 이상으로 지정하도록 규칙이 이루어져있는데요. 비밀번호..
//Login.js { console.log("아이디 입력했어!"); }} /> Login 컴포넌트가 부모컴포넌트, Input 컴포넌트가 자식컴포넌트인 상황입니다. 이럴때에 부모컴포넌트에서는 prop(예시에는 _onChange)로 사용할 함수를 입력하고, 자식컴포넌트에서 부모로부터 props 받아서 이벤트함수에 props를 적용시킵니다. 아래처럼 말이죠! defaultProps로 콜백을 넘겨주는 이유는, 컴포넌트 내에서 쓰고 있는 무언가를 props로 넘겨받지 못했을 경우 오류나는 걸 방지하기 위함입니다 //Input.js import React from "react"; import styled from "styled-components"; import { Text, Grid } from "./index..
아래와 같이 defaultProps를 지정하고 부모속성에서 사용해보자! props에서 받아온 값을 활용하여, css 속성을 건드려보았다. import React from "react"; import styled from "styled-components"; const Text = ({ bold, color, size, children }) => { const styles = { bold, color, size }; return ( {children} ); }; Text.defaultProps = { children: null, bold: false, color: "#222831", size: "14px", }; const P = styled.p` color: ${props => props.color}; ..
https://ko.reactjs.org/docs/fragments.html Fragments – React A JavaScript library for building user interfaces ko.reactjs.org 위의 공식문서를 확인해보면, 와 는 별도의 노드를 추가하지 않고 컴포넌트를 생성하는방법 입니다. 는 s의 단축문법이라고 보면 되는데요! 차이점이 하나 있습니다! 는 props를 완전히 사용할 수 없지만, React.Fragments는 key를 넣어줄 수 있습니다! 따라서, map함수로 컴포넌트들을 돌릴 때에는 React.Fragments를, 나머지는 를 사용하면 되겠습니다.
아래에는 원형을 만들기 위한 방법입니다! 원형이 되려면 width와 height가 같고 border-radius는 그에 반비례해야하는데, 같아도 상관없습니다. 원래는 일일이 적어주어야하지만 수고로움을 덜기위하여 css 변수를 사용했습니다! const ImageCircle = styled.div` /* style 변수를 만들기 위해 --를 사용합니다! */ --size: ${props => props.size}px; /* css변수 적용했을 때와 같아요! */ width: var(--size); height: var(--size); border-radius: var(--size); background-image: url(${props => props.src}); background-size: cover; ..
파이어베이스 링크 https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 호스팅할 프로젝트를 클릭합니다. 왼쪽 메뉴에 hosting 탭을 누릅니다. 시작하기 클릭! 명령에 따라 Firebase CLI를 설치합니다. 저는 npm 말고 yarn을 사용하므로 아래와 같이 설치한 다음, 다음을 누릅니다. $ yarn add global firebase-tools 아래와 같이 입력합니다. $ yarn firebase login 빨간박스이 보이시면 y를 입력하고 enter 그 다음 주황박스처럼 링크가 보이시면, ctrl+링크를 클릭하시고 계정에 액세스 하시면 됩니다. 그..
나의 풀이 const input = require('fs').readFileSync('/dev/stdin').toString().split('\n'); const allLeng = Number(input[0]) const findRoomNum = (arrs) => { const [floornum, roomnum, clientnum] = arrs.split(' ').map(ele=>Number(ele)) let cnt = 0 for(let i=1; i
