Netlify 배포 과정 중 아래와 같이 빨~~갛게 도배된 창을 만날 수 있습니다.... 😫 Treating warnings as errors because process.env.CI = true. 라는 오류인데, sites에 들어가서 상단에 아래의 버튼을 누르고, 왼쪽메뉴에서 아래의 버튼을 누르고, Edit settings를 눌러서 Build command를 아래와 같이 수정해주면 됩니다! 다시 deploy를 하면 이렇게 아름답게 배포가된 것을 확인할 수 있습니다! Bravo! 🦄 더 확인해야할 것! 프로젝트 json 파일에 hompage 설정을 했나요? netlify에서 준 url로 꼭! 설정을 해주셔야 합니다. json 파일이 깃헙 레포지토리 root에 위치하고 있나요?
이번주 배스킨라빈스 클론코딩 중 만나게 된 인풋 체크박스 체크된 값을 받아서 배열로 나열한 뒤 서버에 요청해야한다. 이 중에서 없음을 넣을 이유가 없어서, 없음 칸은 빼고 진행한다. feature const _allergy_list = [ "계란", "대두", "돼지고기", "땅콩", "밀", "복숭아", "우유", ]; const onClickHandler = target => { //알러지 선택취소의 경우 if (allergy_list.includes(target)) { setAllergyList(allergy_list.filter(ele => ele !== target)); return; } //불변성 유지 return setAllergyList([...allergy_list, target]); }..
클론코딩중! 저번 주에 뷰작업을 거의 끝내놓고, 기능구현을 서서히 하고있다. 순서를 먼저 정리하고 난다음 그 순서에 맞춰서 진행하다보니, 쉽게 작업되는 것 같다. 이전에는 너무 어렵게만 생각했었는데, 이번에는 순서를 그리고 그 순서에 맞춰서 쉽게 생각하니 쉽게 구현이 되더라 🤔 나한테 맞는 방법을 찾은 느낌. 실전 프로젝트 전에 찾을 수 있어서 정말 다행이다 리덕스 툴킷 저번주는 리덕스액션! 이번주는 리덕스 툴킷이다. 확실히 쉽고, createSlice를 이용하여 만드니 코드량도 적고, 편리하였다. 필요했던 immer와 chunk도 내장되어있다. 이번에는 기존 사용법이 편해서, 따로 createAsyncThunk를 사용하지않았는데, 다음번에는 이것도 사용하리라! 로그인유지 이것 때문에 꽤나 고민을 많이 ..
1. 재정비 그리고 휴식 재정비반에 들어오면서 제일 많이 들었던 말이 있다. 어라? (셰리)님은 재정비가 아니라 무조건 프로젝트반 가실 줄 알았다고, 물론 객관적으로 봤을때는 그 편이 하나라도 더 얻어갈 수 있기 때문에, 당연하다고 생각하겠지만 내 생각은 달랐다. 앞으로 남은 클론코딩과 실전프로젝트를 들어가기 전에, 재정비를 하고싶었다. 무턱대고 들어가서 우당탕탕 만드는 것보단 어느정도 휴식과 머릿 속에서 배운 내용들을 깔끔하게 정리할 시간이 필요했기에.. 2. 목표 일전에 써보았던 axios 연결법 다시보기 심화과정 강의 되짚어보며, 복습하기 * 복습방법 각 내용들을 1~10까지의 점수로 나눈 뒤에 이해도가 높을 수록 점수를 높이기 점수가 낮은 항목들을 집중적으로 공략하기 공부하고 싶었던 것 공부하기 ..
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;
1. 정리 그리고 정리 이번 주는 심화 과정으로, 프론트엔드에 관한 고도의 지식을 얻을 수있었고, 그 지식들을 온전히 제 것으로 만들기 위해 노력하였습니다. 2. 나는야 거북이 저번 주 기본 과정을 지나쳐, 심화 과정을 오고나서 제가 거북이라는 것을 확신하였습니다. 어떻게 다들 그렇게 빨리 강의를 들을 수 있는 것일까요? 저는 코드 한 줄 한 줄 왜 이것이 작동하는지 이해하고, 검색해보고, 정리해나가서 그런거겠죠? 아니면 저는 그냥 이해하기까지 시간이 많이 필요한 사람일까요? 살면서 한 번도 그런 생각을 해본 적이 없었는데 제 머릿 속의 엔진이 의심되었습니다. 😣 사실 거북이로서 이번 주는 정말 고통스러운 한 주가 아닐 수 없었습니다. 정리할 개념들은 산 더미인데, 온전히 제 것으로 만들 시간은 부족하고..
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; ..
