목록Programming (128)
fffo
https://github.com/rightkingleftking/tutorials/tree/main/HTML%2CCSS%EC%9A%94%EC%95%BD GitHub - rightkingleftking/tutorials Contribute to rightkingleftking/tutorials development by creating an account on GitHub. github.com 깃허브로 이동
JSX 리액트는 렌더링 로직과 UI로직이 본질적으로 연결된다는 사실을 받아들임 전통적 웹은 각기 다른 파일에 마크업과 로직을 분리해 관리했지만 리엑트는 둘을 모두 포함하는 ‘컴포넌트’로 관심사를 분리함 JSX도 표현식임 컴파일 후 JSX 표현식이 js 객체로 인식됨 JSX는 insection attack을 방지함 ReactDOM이 JSX에 삽입된 모든 값을 렌더링하기 전에 escape하므로 앱에 명시적으로 작성되지 않은 내용은 주입되지 않음 모든 항목은 렌더링 되기 전에 문자열로 변환됨 XSS(cross-site-scripting) 공격 방지 가능 Element Rendering 엘리먼트는 React 앱의 가장 작은 단위 엘리먼트는 컴포넌트의 구성 요소 브라우저 DOM 엘리먼트와 달리 React 엘리먼트..
용어 정리 REST : HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 RESTful : REST의 기본 원칙을 잘 지킨 서비스 디자인 REST API : REST를 기반으로 서비스 API를 구현한 것 REST API의 구성 REST API는 자원resource, 행위verb, 표현representations의 3요소로 구성됨 REST는 자체 표현 구조self-descriptiveness로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있음 구성 요소 내용 표현 방법 resource 자원 URI(엔드포인트) verb 자원에 대한 행위 HTTP 요청 메서드 representations 자원에 대한 행위의 구체적 내용 페이로드 REST API 설계 원칙 RE..
Ajax란? Ajax : js를 사용해 브라우저가 서버에게 비동기적으로 데이터를 요청, 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 프로그래밍 방식 WebAPI인 XMLHttpRequest객체를 기반으로 동작하고 이 객체는 HTTP 비동기 통신을 위한 메서드와 프로퍼티 제공 전통적 방식과 비교해 다음과 같은 장점 존재 변경할 부분만 서버로부터 전송받기 때문에 불필요한 통신 줄임 변경할 필요 없는 부분은 렌더링을 다시 하지 않음 비동기 방식이기 때문에 서버로 요청 보낸 후 블로킹이 발생하지 않음 JSON 클라이언트-서버 간의 HTTP통신을 위한 텍스트 데이터 포맷 JSON.stringify 객체를 문자열로 바꿔줌(직렬화, serializing) 매개변수로 대상 객체, 필터 함수, 들여쓰기 수..
이벤트 드리븐 프로그래밍 이벤트 : 무언가 일어났다는 신호 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 함수 이벤트 핸들러 등록 : 브라우저에게 이벤트 핸들러의 호출을 위임 브라우저가 행동을 감지해 이벤트를 발생 시킴 이벤트 드리븐 프로그래밍 : 이벤트 중심으로 프로그램의 흐름을 제어하는 프로그래밍 방식 이벤트 타입 이벤트 타입 : 이벤트의 종류를 나타내는 문자열 이벤트 핸들러 등록 이벤트 핸들러 어트리뷰트 방식 HTML 요소의 이벤트 핸들러 어트리뷰트에 값으로 문(statement)을 할당 각 어트리뷰트 이름은 'on + 이벤트 타입' Click me 이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 몸체를 의미함 위 예에서 onclick="sayHi('dlwlrma')" 어트리뷰트는..
정확한 태그 사용은 접근성 향상에 큰 도움을 줍니다. article과 section태그의 정확한 사용법을 알아보겠습니다. article article 태크는 하나의 독립적인 컨텐츠를 다룰 때 사용합니다. 독립적 컨텐츠는 뉴스 사이트에서 하나의 기사에 해당되고 쇼핑몰에서 하나의 상품, 동영상 스트리밍 사이트에서는 하나의 영상이 해당될 수 있습니다. section section은 하나의 컨텐츠 내부에서 구획을 짓기 위한 요소입니다. 예를 들어 하나의 기사에서 간단 요약 부분이 나오고 다음 문단부터 본문이 나오는 경우를 보겠습니다. 간단 요약 문단을 section 태그 안에 넣고 accessible name으로 '간단 요약'을 표기한다면 스크린 리더 사용자는 해당 section에 들어가게 되면 간단 요약 영역..
싱글 스레드 방식 자바스크립트는 한 번에 하나씩 일을 처리하는 싱글 스레드 방식으로 작동합니다. 코드 한 줄을 실행할 때 다음 줄의 코드는 이전 코드가 끝날 때까지 대기하게 됩니다. 만약 코드상에서 무거운 작업이 있다면 그 이후 작업들은 먼저 있는 무거운 작업이 끝날 때까지 대기할 수 밖에 없습니다. 자바스크립트를 비동기적으로 처리하려면 싱글 스레드 방식의 자바스크립트 엔진만으로는 불가능 합니다. 이를 해결하기 위해 자바스크립트 엔진은 콜백 패턴을 사용합니다. 콜백 패턴 콜백 또는 콜백함수란 매개변수로 전달되는 함수를 의미합니다. 자바스크립트는 비동기 처리를 하기 위해 비동기로 처리 하고자 하는 함수를 매개변수에 담아서 자바스크립트 엔진 외부로 전달합니다. 이 때 엔진 외부는 호스트 환경에 따라 달라질 ..
this 키워드 this 키워드는 자기 자신이 속한 객체나 속할 객체를 가리키기 위한 자기 참조 변수입니다. 메서드에서 자신이 속한 객체의 프로퍼티를 참조하기 위해 자신이 속한 객체를 가리키거나 생성자 함수에서 자신이 만들 인스턴스를 가리키는 식별자를 참조하기 위해 사용합니다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되어 함수 호출 방식에 의해 동적으로 바인딩 됩니다. 크게 네 가지로 나누어 볼 수 있습니다. 일반 함수 호출, 메서드 호출, 생성자 함수 호출, 그리고 간접 호출 이렇게 네 가지로 각각의 호출 방식에 의해 this가 가리키는 값은 동적으로 바인딩 됩니다. 메서드 호출 시 this 메서드란 보통 객체에 묶여있는 함수를 말하는데 여기서 말하는 메서드는 조금 더 구체적인 범위를 가지고..