Today Hailie Learned

⭐️리덕스는 꼭 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 함수에서는 각각 하나씩만 설정해주고 있다. 그래서 이 에러창이 나오는 것 같다. 해결방법 다른 값은 바꿀 필요가 없기 때문에 ..

Lighthouse란? 사이트를 검사하여 성능 측정을 할 수 있는 도구이고, 개선책도 제공해주는 자동화 툴이다. - 구글에서 개발한 오픈소스이고, 성능, 접근성, PWA, SEO 등을 검사 한다. - Chorme DevTools, CLI, 노드 모듈 등 다양한 경로를 통해 사용 가능하다. - 검사 결과에 따른 리포트를 생성해주어, 점수가 낮은 지표를 한눈에 알아볼 수 있다. 1. 구글 개발자 도구에서 lighthouse 탭에서 검사 가능 2. Node CLI 에서 실행하기 - 전역 모듈로 설치 npm install -g lighthouse - 검사 실행 lighthouse - 모든 옵션 보는 명령어 lighthouse --help 👇 크롬에서 본 백준 페이지의 Ligthhouse 👇 👇 크롬에서 본 정..

GraphQL 구조 서버에서 데이터를 조회하는 경우, REST API의 경우 GET 요청을 했다면, GraphQL에서는 query를 이용해서 원하는 데이터를 요청한다. 데이터를 Create, Update, Delete 와 같이 수정한다면, GraphQL에서는 mutation를 이용한다. 더 나아가 GraphQL에서는 subscription이라는 개념으로 실시간 업데이트를 구현할 수 있다. ✔️ 쿼리 (query) = 데이터 조회하기 ✻ 필드 예시1) 👇요청👇 { pizza { name } } 👇응답👇 { "data" : { "pizza":{ "name" : "bulgogi pizza" } } } GraphQL은 서버에 요청할 때 예상했던 대로 응답받는다. (왜냐면 서버는 GraphQL을 통해 클라이언트가..

✔️ GraphQL이란? Graph + Query Language의 줄임말이다. (API를 위한 쿼리 언어) GraphQL은 Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어이다. 트리 구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리 언어이다. ✔️ GraphQL의 특징 - HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다. - 응답을 받을 때 데이터 결과를 JSON 형식으로 받는다. - GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다. - GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다. ✔️ 그래프에서 트리 추출하는 방법 query { 책(ISBN이 "9780674430006")..