분류 전체보기260 11월 세 번째 주간 회고 📚 221114-221118 이번 주 배운 것 저번주 리액트에서는 각각의 컴포넌트에서 useState 만 이용해 상태를 관리한 반면에 이번주는 store 를 만들어 상태를 관리하고 custom hook 을 이용해 개별 컴포넌트에서 다룬 복잡한 로직들을 관심사에 따라 분리하는 시간을 가졌다. 그리고 그 각각의 컴포넌트들의 테스트 코드를 작성했다. 백엔드에서도 먼저 테스트 코드를 짠 후 로직을 구현하는 것에 이제 그나마 익숙해진 상태인데 프론트에서도 테스트 코드를 짜려니 여간 어려운 게 아니었다. 백엔드 과정에서 테스트 코드를 짤 때는 일단 로직은 정해진 상태이니 다른 부가적인 요소가 변경되어도 핵심 로직을 테스트하는 코드에는 변함이 없었는데, 프론트로 테스트 코드를 짤 때는 아무래도 UI 와 관련되어 있어.. 2022. 11. 18. 리액트 - useRef (22.11.18 TIL) ref 전달이란 컴포넌트를 통해 자식 중 하나에 ref 를 자동으로 전달하는 기법이다. ref 란 무엇일까? HTML 을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 와 같이 id 를 사용한다. 이렇게 하면 특정한 id 에 해당하는 DOM 요소에만 스타일을 따로 적용하거나, 자바스크립트에서 해당 DOM 요소에 접근하여 여러 가지 작업을 할 수 있다. 이렇게 HTML 을 작성할 때 이렇게 id 를 붙이는 것처럼, 리액트에서도 DOM 을 선택해 직접 접근하기 위해 ref 를 사용한다. ref 를 사용해야 할 때 (리액트에서 state 로만 해결할 수 없고, DOM 을 반드시 직접 건드려야 할 때) 포커스, 텍스트 선택 영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때 서드.. 2022. 11. 18. 브라우저는 어떻게 동작하는가? 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF 나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI (Uniform Resource Identifer) 에 의해 정해진다. 브라우저는 HTML 과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는 데 이 명세는 웹 표준화 기구인 W3C (World Wide Web Consortium) 에서 정한다. 브라우저의 사용자 인터페이스는 서로 닮아 있는데 다음과 같은 요소들이 일반적이다. URI를 입력할 수 있는 주소 표시 줄 이전 버튼과 다음 버튼 북마크 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼 홈 버튼 브라우저의 기본 구조 브.. 2022. 11. 18. setTimeout 과 setInterval (22.11.17 TIL) 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링' 이라고 한다. 호출 스케줄링을 구현하는 방법은 두 가지가 있다. setTimeout 을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 setInterval 을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 둘 다 문법도 동일하고, 인수 역시 동일하나 setTimeout 이 함수를 단 한 번만 실행하는 것과는 달리, setInterval 은 함수를 주기적으로 실행하게 만든다. 1) setTimeout setTimeout 은 함수를 단 한 번만 실행한다. let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) //func|code : 실행하고.. 2022. 11. 17. 리액트 컴포넌트 (22.11.16 TIL) 강의반복과제를 하던 중 아직도 클래스 컴포넌트와 함수형 컴포넌트 선언을 헷갈려 하는 것 같아서 정리하는 글! 리액트 컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위이다. 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다. 리액트에서 정의하는 컴포넌트 종류는 크게 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있다. 1. 함수형 컴포넌트 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다. function 으로 정의하고 return 문에 jsx 코드를 반환한다. 이 때 함수형 컴포넌트는 func.. 2022. 11. 16. 제어 컴포넌트 vs 비제어 컴포넌트 (22.11.15 TIL) 리액트는 두 가지 방식으로 form 입력을 처리한다. 리액트에 의해 입력값이 제어되는 엘리먼트를 제어 컴포넌트 (controlled component)라고 한다. 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 업데이트된 값으로 다시 렌더링에 의해 입력의 유효 여부를 결정한다. 다시 렌더링 하지 않으면 form 엘리먼트는 변경되지 않은 상태로 유지된다. 비제어 컴포넌트 (uncontrolled component) 는 form 엘리먼트가 리액트 외부에서 작동하는 것처럼 작동한다. 사용자가 form 필드 (input box, dropdown 등)에 데이터를 입력하면 업데이트된 정보가 리액트에서 별도 처리할 필요 없이 엘리먼트에 반영된다. 그러나 이는 특정 필드가 특정 값을 갖.. 2022. 11. 15. 이전 1 ··· 13 14 15 16 17 18 19 ··· 44 다음
