치악산 복숭아

1. 자바스크립트 비동기의 등장 초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드했기 때문에 JS에서는 별도의 비동기 처리가 필요하지 않았음 AJAX(Asynchronous Javascript And XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨 옛날옛날...에는 브라우저가 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 전달 ➡️ 브라우저는 서버로부터 받은 HTML을 새롭게 렌더링했다고 한다 😮‍💨 XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨 2. 자바스크립트는 single-threaded language 자바스크립트는 메인 스레드가 하나인 single-threaded 언어이기..

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️ 1. Hook 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용 State Hook의 대표적인 예로 useState가 있음 다른 컴포넌트와 Hook 내에서만 사용 가능 이름은 반드시 use로 시작 최상위 level에서만(첫번째 중괄호) hook 호출 가능 ⭐️ 왜 Hook이 등장했냐면... 기존에는 컴포넌트 내에서 state와 생명주기를 관리하기 위해서 반드시 클래스형 컴포넌트를 사용 다소 복잡한 클래스형 컴포넌트를 보완하고 함수형 컴포넌트에서도 해당 기능을 사용할 수 있도록 이후 추가됨 (1)State Hook useState: 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook..

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️ 1. Props 컴포넌트에 원하는 값을 넘겨줄 때 사용 Javascript의 요소라면 모두 넘겨줄 수 있음(ex: 변수, 함수, 객체, 배열 등) 주로 컴포넌트의 재사용을 위해 사용 컴포넌트에 많은 로직이 들어가고 반환되는 jsx의 요소들이 많고 복잡하다면 props를 사용하는게 효율적 props는 읽기 전용⭐️ 왼쪽처럼 props의 값을 직접 변경할 경우 리액트가 재렌더링하는데 문제가 생길 수 있음 오른쪽처럼 새 변수를 생성해 복제해서 사용합쉬다 HTML에서의 checked, value ➡️ 초기값 리액트에서는 현재값 초기값을 지정하고 싶다면 defaultChecked, defaultValue 속성 사용하기 2. State 컴포넌트 ..

오늘은 7일인데 왜 6일자 TIL을 이제서야 올리냐면...흠흠 TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️ 리액트 1. SPA(Single Page Application) (1) 전통적인 페이지 서버에 특정 동작(ex: 로그인)을 요청 - 서버에서 HTML을 클라이언트에게 전달하면서 페이지 리로드 (2) SPA 페이지 JSON 형식으로 메세지만 서버로부터 받은 뒤 로그인 후에 바뀌어야 할 부분만 바뀌게 됨(ex: 로그인 -> 로그아웃 버튼) 페이지의 변경이 필요할 때 처음부터 모든 HTML을 불러오는게 아닌 변경된 부분만 바뀌게 된다. 2. Virtual DOM 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념 R..