Today Hailie Learned

✔️ 에러 코드 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;✔️ 링크 태그에서 밑줄 없애기text-deco..

토이 프로젝트를 만들면서 로컬스토리지 기능을 만들고 싶어졌다. 그래서 구글링, 유튜브, 도서를 통해서 이것저것 시도 해보다가 도서관에서 '스무디 한 잔 마시며 끝내는 리액트 + 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..

1. 오디오, 비디오 재생하기 ✔️ html에서 오디오를 연결할 때는 태그를 쓰고 src로 오디오 소스를 지정한다. ✔️ 그리고 이를 플레이 시킬때는 .play()를 사용한다. audio.play(); ✔️ 오디오, 비디오 일시정지 시키기 audio.pause(); 2. 오디오, 비디오 재생 시점 설정하기 audio.currentTime = 0; ➥ 초 단위이고, 0 값인 경우 처음부터 음악을 재생한다. 3. 명시된 클래스 추가, 제거하는 메서드 ✔️ 명시된 클래스 추가하기 샐렉터.classList.add("playing"); ➥ playing이라는 클래스를 추가하기 ✔️ 명시된 클래스 제거하기 샐렉터.classList.remove("playing"); ✔️ 클래스가 있으면 제거하고 false를 반환하고..

1. Array.from으로 만들기 const newArr = Array.from({length:5}, ()=>0); console.log(newArr); 출력값 [ 0, 0, 0, 0, 0 ] 2. map으로 만들기 const newArr = [...Array(5)].map(x=>0); console.log(newArr); 출력값 [ 0, 0, 0, 0, 0 ] 3. fill로 만들기 const newArr = Array(5).fill(0); console.log(newArr); 출력값 [ 0, 0, 0, 0, 0 ] 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

최적화 (Optimization) 란? 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정이다. 최적화를 잘 해놓은 앱일수록 더 빠르게 함수를 호출한다. => 앱이 더 빠른 속도로 구동되면서 유저에게 좋은 UX를 준다. 여러 분야에서 최적화의 의미가 다르지만, 웹 개발에서의 최적화란, 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 하는 것이다. 왜 최적화를 해야할까?? 1. 이탈률 감소 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하는 것인데, 만약 최적화가 잘되지 않은 웹이라면 화면 로딩시간이 오래 걸린다는 뜻이다. 이는 사용자가 페이지를 이탈할 확률이 높아진다는 뜻이다. => 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로..