javascript (7) 썸네일형 리스트형 AJAX(Asynchronous Javascript And XML)란 ? AJAX란? 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 로드하지 않고 필요한 일부 페이지의 데이터만을 로드하는 기법 자바스크립트를 사용하여 웹 서버와 클라이언트 간 비동기적으로 XML 데이터를 교환하고 조작하기 위한 웹 기술 하이퍼텍스트 표기 언어(HTML)만으로는 어려운 다양한 작업을 웹 페이지에서 구현해서 이용자가 웹 페이지와 자유롭게 상호 작용할 수 있도록 구현하는 기법 비동기란 ? 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미 AJAX의 동작 원리 클라이언트에서 서버로 데이터 요청, 그에 대한 결과를 반환받음 = 서버와 클라이언트의 통신 사용자에 의한 요청 이벤트 발생 요청 이벤트가 발생하면 이벤트 핸들러에 의해.. [RN] React Native의 작동 원리 [RN] React Native의 정의와 장단점 React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는 suji-sw.tistory.com 위의 포스팅을 통해 React Native의 정의와 장점, 단점 등을 알아보았다. React Native 개발자라면 해당 프레임워크가 어떻게 작동 하는지 알 필요성이 있기 때문에 해당 포스팅을 작성하도록 하겠다. React Native의 작동 방식 React Naitve는 크로스 플랫폼 앱 (Cross-Platform App)으로, javascript 언어로 iOS와 Android 플랫폼을 동시에 개발할.. [React] Next.js의 정의와 장단점 Next.js란 ?- React에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크 - 특별한 설정 없이 SSR, SEO부터 Typescript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 React 프레임워크 SSR - 서버 사이드 렌더링- 서버 측에서 렌더링하여, 클라이언트 쪽으로 보내주는 것 요청이 올 때마다 해당하는 html 문서를 그때 그때 생성하여 반환- ex) reactCSR - 클라이언트 사이드 렌더링 - 서버에서 데이터를 받아와, 클라이언트 환경에서 렌더링하여 브라우저 화면에 표시하는 것 - ex) next.js Next.js의 작동 방식1. 초기에 사용자가 서버에 페이지 접속을 요청하면, 기본적으로 서버 측에서 React 코드 실행2. React.js를 서버 측에서 Pre-rend.. [RN] React Native의 정의와 장단점 React Naitve란? 2015년 3월 페이스북에 의해 공개된 오픈소스 모바일 어플리케이션 프레임 워크 사용자 인터페이스를 만드는 React에 기반을 두고 제작 웹 브라우저가 아닌, iOS와 Android에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크 React-Native의 장점 두 플랫폼(iOS, Android)을 동시에 개발할 수 있음 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 Fast Refresh 기능 제공 Fast Refresh: 컴포넌트가 변할 때 즉각적으로 반응한다는 기능으로, 프로젝트 내 대부분의 수정 내용이 1~2초 내로 변경사항이 적용됨. "수정 → 새로고침", "수정 → 컴파일 → 새로고침" 이라는 번거로운 작업.. Javascript VS Typescript Javascript란 웹 개발에 주로 사용되며, 웹 페이지를 대화식으로 만드는 프로그래밍 언어 클라이언트 측 스크립팅 언어 객체 지향 프로그래밍 지원 높은 수준의 코드 탐색과 디버깅 자바스크립트 호환 TypeScripte란 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 객체 지향 프로그래밍 지원 높은 수준의 코드 탐색과 디버깅 자바스크립트 호환 ➡️ 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠름. React Native에서의 코드 차이 변수 선언 // Javascript const [ data, setData ] = useState([]); const [ text, setText ] = useS.. React의 기초 리액트(React)란? 리액트란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 현재 가장 핫한 라이브러리 중 하나로, 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 즉, 현재 많이 활용되고 있는 웹/앱의 view를 개발할 수 있도록 하는 인기있는 라이브러리! 리액트의 필요성 React를 사용하지 않아도, html과 css, javascript를 이용해서 웹 페이지를 만들 수 있다 그러나 react를 이용해 사용자와 상호작용 할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문에 많이 이용되고 있다. 프로젝트가 사용자와의 인터랙션이 별로 없다면 사실상 프론트엔드 라이브러리는 필요하지 않습다만, 프로젝트 규모가 커지고 정말 다양한 유저 인터페.. 자바스크립트의 기초 자바스크립트(JAVASCRIPT)란? 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 즉, 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어이다. 이 언어는 웹브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. HTML : 모델 담당 CSS : 뷰 담당 자바스크립트 : 제어담당 자바스크립트의 역할 요소의 추가 및 삭제 CSS 및 HTML 요소의 스타일 변경 사용자와의 상호작용 폼의 유효성 검증 마우스와 키보드 이벤트에 대한 스크립트 실행 웹 브라우저 제어 및 쿠키 등의 설정과 조회 AJAX 기술을 이용한 웹 서버와의 통신 자바스크립트의 역할 대소문자 구분하여 작성 문장은 세미콜론(;)으로 구분 큰따옴표(" ")와 작은 따옴표(' ')를.. 이전 1 다음
