import { startTransition } from 'react'; // 긴급한 업데이트 : 입력하고 있는 값 setInputValue(input); // startTransition으로 래핑된 업데이트는 긴급하지 않은 것으로 처리되고, 더 긴급한 업데이트가 들어오면 중단된다. startTransition(() => { // 전환 업데이트: 입력값에 따른 쿼리값 setSearchQuery(input); }); 2주차 주제 🛠️ 상태 관리가 rendering에 미치는 영향🛠️ 리액트 훅에대한 자세한 설명은 이전에 다뤘으므로, 간단하게 비교 및 언제사용하면 좋은지에 대해서만 다루겠다. useState vs useReducer useState 간단한 상태관리 값이 하나인 경우 상태들이 서로 관련이 없는경..

1. 객체 지향 프로그래밍 ( Object Oriented Programing ) 1) 객체 객체란 말 그대로 대상을 나타내는 단어입니다. 예를 들어, 사람 개인 한 명 한 명을 모두 객체라 할 수 있고, 책 한 권 한 권을 객체라 할 수 있습니다. 사람은 생김새와 성격이 똑같을 수는 없기 때문에 개개인을 객체라 할 수 있으며, 책도 내용이 같을지라도 한 권의 책에 흠집을 낸다고 해서 모든 책들이 전부 흠집이 나는 것이 아니기 때문에 한 권 한 권을 객체라 할 수 있습니다. 2) 클래스 사람들은 일반적으로 같은 속성들을 갖고 있습니다. 여기서 속성이란 눈, 코, 입, 손, 발, 등의 신체들을 의미합니다. 책도 책 이름, 작가, 출판사, 출판일 등 같은 속성을 갖고 있다고 할 수 있습니다. 사람, 책 같은..

재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요. 모든 재귀함수는 반복문으로 표현이가능합니다. 그리고, 적용할 수 있는 경우 대부분의 경우 반복문을 이용한 코드보다 더욱 간결합니다. 중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우에 사용합니다. UI/UX ui란 유저인터페이스(사람들이 컴퓨터와 상호작용하는 시스템), ux는 유저 익스피리언스,즉 유저경험을 말하는겁니다. UI는 보편적인 인간을 모델로 분석해서 설계한다면, UX는 특정 사용자를 분석해서 설계한다. UI에서는 누구에게나 편리하고, 아름답고 유용한 소프트웨어, 즉 보편성을 지향했다면,UX는 앱의 회원가입 단계가 복잡하여..

개요 섹션 2를 마무리하며 학습했던 내용들에 대해 기술면접에 나올만한 질문들에 답변을 준비하며 복습합니다. 학습 목표 프론트엔드 개발자 기술 면접에 대해서 이해합니다. 기술 면접에서 요구하는 올바른 답변이 무엇인지 이해합니다. 기술 면접 준비를 직접 해봅니다. 모의 기술 면접을 실제 해보거나 시청하면서, 어떻게 기술 면접을 할지 고민해봅니다. JavaScript Promise 의 기능과 필요한 이유에 대해서 설명해주세요. // 정의 및 기능 "Promise 는 단어 그대로 '약속'입니다. " "비동기 연산이 종료된 이후에 결과를 제공하겠다는 '약속'입니다." "Promise 가 미래에 제공하는 결과로는 실패 혹은 완료와 그 결과 값을 나타냅니다." "또, Promise 를 사용하면 비동기 메서드가 마치 ..

addEventListener 오류 해결방법 Uncaught TypeError: Cannot read property 'addEventListener' of null 💥에러 원인 script를 body의 상단에 작성하게 되면, 간혹 html이 로드 되기 전에 script를 먼저 불러와버리는 경우가 생긴다. 그렇게 되면 addEventListener을 부여할 DOM을 찾지 못하게 되어 에러가 발생하게 된다. 🔅해결방법 1. script는 body태그의 가장 아래에 작성한다. (다른분이 사용한 방법) body태그 하단에 js를 작성하면 html이 먼저 로드되고, js 가 그 다음 로드되기 때문에 오류가 발생하지 않는다 변경 전 변경 후 2. window.onload = function(){} 사용한다.(내가..

const newsURL = 'http://localhost:4999/data/latestNews'; const weatherURL = 'http://localhost:4999/data/weather'; function getNewsAndWeather() { // 체이닝의 결과가 Promise 형태로 리턴되어야 합니다 // fetch 두번 사용해야한다 // 불러온 api의 결과값을 합쳐 새로운 객체로 리턴해야한다 // promise all / async 사용 하지 않아야한다. const dailynews = {} return fetch(newsURL) // fetch도 프로미즈 객체를 리턴한다. .then(res => res.json()) // 프로미즈 객체 안에 리스폰에 접근해서 정보를 json으로 만..