Today Hailie Learned

오류 메세지 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. 이탈률 감소 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하는 것인데, 만약 최적화가 잘되지 않은 웹이라면 화면 로딩시간이 오래 걸린다는 뜻이다. 이는 사용자가 페이지를 이탈할 확률이 높아진다는 뜻이다. => 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로..

✔️EC2 기본 세팅 1. 우선 EC2 인스턴스를 생성한다. 연결 누르기 $ bash $ cd ~ 2. 인스턴스에 개발 환경 구축하기 $ sudo apt update 패키지 매니저가 관리하는 패키지의 정보를 최신 상태로 업데이트하기 위한 명령어 3. nvm, npm을 설치하여 개발 환경을 구축하기 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash touch ~/.zshrc export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh..

►배포 자동화 파이프라인 : 소스 코드의 관리부터 실제 서비스로의 배포 과정을 연결하는 구조. 1. Source 단계 : 원격 저장소에 관리되고 있는 소스 코드에 변경 사항이 일어날 경우, 이를 감지하고 다음 단계로 전달하는 작업을 수행 2. Build 단계 : Source 단계에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공한다. 이 단계를 거쳐 생성된 결과물을 다음 단계로 전달하는 작업을 수행한다. 3. Deploy 단계 : Build 단계로부터 전달받은 결과물을 실제 서비스에 반영하는 작업을 수행한다. ►CI/CD 파이프라인 ✔️ 지속적 통합 (CI : continuous integration) 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식. Code : 개발자가 코드를 코드 저..

Warning: A component is changing a controlled input of type number to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 문제 원인 useState 안의 값으로 title, amount 값 이렇게 2개를 받는데, onChange 함수에서는 각각 하나씩만 설정해주고 있다. 그래서 이 에러창이 나오는 것 같다. 해결방법 다른 값은 바꿀 필요가 없기 때문에 ..