👩‍💻 이 포스팅에서는 비동기와 관련된 개념들에 대해 정리하였습니다.비동기 프로그래밍(- 비동기 방식(- AJAX(- 콜백함수(- Promise(- async / await(동기식 프로그래밍 어떠한 코드가 실행되고 완료될 때까지 기다렸다가 다음 코드가 순차적으로 처

👩‍💻 이 포스팅에서는 Virtual DOM에 대해 정리하였습니다. Virtual DOM? 📝 실제 DOM 변화를 최소화 시켜주는 역할을 한다. 브라우저는 HTML파일을 보여주기위해 브라우저 렌더링 과정 DOM 트리 생성 → 렌더 트리 생성 → Layout →

클래스를 통해 자신을 키우는 현실 캐릭터 빌드업 서비스클래스101 사이트를 모티브로 한 프로젝트useNavigate 쿼리 스트링 페이지 이동2차 프로젝트에서 라이브러리를 처음 사용해보았다! slick 라이브러리를 이용해서 메인 페이지에 나타나는 배너를 만들었다. 이번에

스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크styled-components 라이브러리를 사용해서 React 컴포넌트를 쉽게 만들 수 있고, CSS구성 요소의 스타일을 지정할 수 있다.css-in-js는 2018년 이후 폭발적으로 성장해왔고, 그 중 S

baGETTT 프로젝트를 진행하면서 결제완료 페이지 구현을 담당했다.장바구니 페이지에서 결제하기 버튼을 누르면,구매 정보 데이터를 보여주는 결제 완료 페이지로 이동을 하게 된다.그 과정에서 구매 정보 데이터를 받아와야 하는데 백엔드에서 GET하는 방식이 아닌,장바구니에

웹사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행시키거나, 이벤트 리스너를 on off 하는 동작이 필요할 수 있다. 이 때 useEffect hook이 필요하다!공식 문서에서 useEffect를

위스타그램 페이지의 댓글 부분을 컴포넌트화 시키면서 map 함수로 댓글 목록으로 구현하였다.✔️ map함수를 적용할 때는 key값을 부여해야한다. 만약 key 값을 주지 않아도 화면에는 문제없이 화면에 출력 되지만 터미널에 아래와 같은 오류 메세지가 뜨게 된다.Key는

화면에 나타나는 컴포넌트의 UI 정보컴포넌트의 상태값컴포넌트 안의 요소에 상태값을 반영해서 데이터가 바뀔 때 마다 효율적으로 UI에 나타내기 위해 State를 설정한다.useState 함수를 import 한 후 사용해야 한다.useState 함수는 function St

Facebook에서 개발한 Library“지속적으로 데이터가 변화하는 대규모 어플리케이션 구출하는 것”을 목표로 개발오로지 View만 담당하는 라이브러리. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리를 함께 사용한다.자바스크립트 문법을 그대로 사