Today Hailie Learned

✔️ 에러 코드 Password field is not contained in a form ✔️ 에러가 나온 이유 password는 form에 감싸져 있지 않다고 오류가 떴다! ✔️ 에러 해결 방법 input 태그를 으로 묶어주었다. 👇에러코드 👇 👇에러 수정 코드 👇 참고) https://webfirewood.tistory.com/75 [DOM] Password field is not contained in a form 서비스 중인 웹에서 다음과 같은 경고 메세지가 나타나는 것을 발견했다. password 타입의 input 태그가 form 태그 안에 위치하지 않기 때문에 나타나는 경고다. 고치지 않아도 별로 문제는 없지만 일 webfirewood.tistory.com 😃 잘못된 개념 전달이 있다면 댓글..

레파지토리 생성 후 클론 받아온다. (현재 브랜치는 main 밖에 없음) git checkout -b dev // dev라는 브랜치 만들기 git add. git push origin dev // dev에 현재 상태 푸쉬함 (여기서 commit 안한 이유가 그냥 브랜치만 생성하려고) 이 후에 코드를 수정하거나 추가한다. 레파지토리 setting에 들어가서 Branches에서 디폴트 브랜치를 dev로 바꿔주면 더 안전하게 푸쉬 가능! git add . git status // 코드 수정하거나 추가한 내용이 나온다. git commit -m "feat: html 추가" git push origin dev // dev 브랜치에 푸쉬함 git checkout -b min // min라는 브랜치 만들기 git a..

✔️ 에러 코드 Uncaught TypeError: data.map is not a function ✔️ 에러가 나온 이유 이 오류의 원인은 다양한데, 이번에는 운좋게 구글링을 통해서 바로 해결할 수 있었다. 이번에는 이런 식으로 array인지 확인해서 이게 true 이면 map을 사용하는 식으로 했다. {Array.isArray(data) ? data.map((item) ⇒ … 👇에러코드 👇 import { useEffect, useState } from "react"; import styled from "styled-components"; const Section = styled.div` border: 1px solid black; margin: 5px; padding: 5px; display: fl..

✔️ 에러 코드 Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. 해석해보기~~ 아직 마운트되지 않은 구성 요소에서 React 상태 업데이트를 수행할 수 없습니다. 이는 비동기식으로 나중에 호출이 구성 요소를 업데이트하려고 시도하는 렌더링 함수에 부작용이 있음을 나타냅니다. 대신 이 작업을 useEffect로 이동합니다. ✔️ ..

✔️ 에러 코드 Objects are not valid as a React child (found: object with keys {id, city, doing, photo}). If you meant to render a collection of children, use an array instead. ✔️ 에러가 나온 이유 map을 쓰지 않고 바로 나 태그로 감싸서 리턴했더니 이런 오류가 나왔다. 😅 👇에러코드 👇 import { useState } from "react"; import styled from "styled-components"; const Section = styled.div` border: 1px solid black; margin: 5px; padding: 5px; display:..

제가 개발할 때 조금이라도 편하게 하게끔 기록해 놓은 css 모음집 입니다. ✔️ 버튼 기본 css 지우기 button { border: 0; background-color: transparent; } ✔️ 내용물을 가운데로 만들기 display: flex; flex-direction: column; justify-content: center; align-items: center; ✔️ 배경색 그라이데이션 효과 주기 background: linear-gradient(180deg, #f3f186 0%, #f5c96b 100%); height: 100vh; ✔️ 이미지 가운데로 꽉차게 입히기 background-position: center; background-size: cover; ✔️ 링크 태그에서 밑..

토이 프로젝트를 만들면서 로컬스토리지 기능을 만들고 싶어졌다. 그래서 구글링, 유튜브, 도서를 통해서 이것저것 시도 해보다가 도서관에서 '스무디 한 잔 마시며 끝내는 리액트 + TDD'을 빌렸다. 왜냐면 여기에 로컬 스토리지 기능에 관한 부분이 있기 때문에!! 책에 나온 예제 코드는 아래와 같다. const addToDo = (toDo: string) : void => { if(toDo){ const newList = [...toDoList, toDo]; localStorage.setItem('ToDoList', JSON.stringify(newList)); setToDoList(newList); } } const deleteToDo = (index:number) : void => { let list =..

오류 메세지 Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. options.allowedHosts[0] should be a non-empty string. 문제 발생 환경 도서관에서 토이프로젝트 만든 것을 좀 보완하고자 npm run dev로 클라이언트와 서버를 켰는데 위와 같은 메세지가 뜨면서 앱이 작동되지 않았다. (정확히는 클라이언트 화면이 뜨지 않았다.) 그리고 위에서는 서버가 3003 포트에서 실행중이라고 떠있지만, 실제로 가보니까 "CANNOT GET" 오류가 떠있었다... 원래는 후딱 켜서 해보려고 했는데 시간을 엄청 잡아먹었다가 조..

CSS 1. 배경화면에 이미지 넣고, 꽉찬 설정으로 하기 background-size: cover; background-size: auto; 2. 바디의 모든 설정 가운데로 설정하기 body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } 3. transform 요소 ✔️ rotate 회전 중심, 원점을 지정하기 transform-origin: 100% ➥ transform 에서 rotate(), skew() 등 회전, 변형 속성 사용하기 전에 설정해야한다. 백분율(%) 0% left 0% top 50% center 100% right 100% bottom ✔️ 이미지 회전 시키기 ..

⭐️리덕스는 꼭 action을 통해서 상태를 변경해야해서 새로운 데이터를 반환해야한다!! 매우 중요!!⭐️ (아래 예시는 vanilla JS에서 쓰는 리덕스 예시 입니다. ) ❌그래서 아래처럼 바로 수정을 하면 안된다. ❌ const reducer = (state = [], action) => { switch (action.type) { case ADD_TODO: return state.push(action.text) case DELETE_TODO: return; default: return state; } }; 🟢이렇게 수정해야한다. 🟢 const reducer = (state = [], action) => { switch (action.type) { case ADD_TODO: return [...st..