분류 전체보기111

• 

  [안드로이드] 3. WebView 웹뷰 - 페이지 탐색 처리 (Kotlin) 참고 : https://developer.android.com/guide/webapps/webview?hl=ko WebView에서 웹 앱 빌드 | Android 개발자 | Android Developers WebView에서 웹 앱 빌드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 웹 애플리케이션 또는 웹페이지만 클라이언트 애플리케이션의 일부로 제공하려는 경 developer.android.com naver, youtube로 loadUrl을 하자, 각자의 앱이 열리게 되었다. WebView내에서만 보고 싶은 경우 간단한 설정으로 가능하다. val myWebView= binding.webview myWebView.loadUrl("https://www.naver.com") m.. 카테고리 없음 2023. 3. 12.

• 

  [안드로이드] 2-2. WebView 웹뷰 - Javascript Interface(Kotlin) 참고자료 : https://developer.android.com/guide/webapps/webview?hl=ko WebView에서 웹 앱 빌드 | Android 개발자 | Android Developers WebView에서 웹 앱 빌드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 웹 애플리케이션 또는 웹페이지만 클라이언트 애플리케이션의 일부로 제공하려는 경 developer.android.com 1. Local HTML파일 불러오기 https://developerpearl.tistory.com/63 2. Javascript 인터페이스 테스트 WEBView에서 javascript를 사용해보자!! * 자바스크립트에 결합된 객체는 객체가 생성된 스레드가 아닌 다른 스레드에.. 안드로이드 2023. 3. 11.

• 

  [안드로이드] 2-1. WebView 웹뷰 - 로컬 HTML불러오기 (Kotlin) 참고자료 : https://developer.android.com/guide/webapps/webview?hl=ko WebView에서 웹 앱 빌드 | Android 개발자 | Android Developers WebView에서 웹 앱 빌드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 웹 애플리케이션 또는 웹페이지만 클라이언트 애플리케이션의 일부로 제공하려는 경 developer.android.com 1. Local HTML파일 불러오기 2. Javascript 인터페이스 테스트 먼저, Test를 위해서 로컬 html을 불러와보자. ◆ 인앱 콘텐츠 로드(WebViewAssetLoader) 인터넷 대신 애플리케이션에 삽입되어 있는 웹기반 컨텐츠를 정적으로 컴파일할 수도 있다.. 안드로이드 2023. 3. 11.

• 

  [안드로이드] 1. WebView 웹뷰- 띄우기 (Kotlin) 참고 : 안드로이드 developers https://developer.android.com/guide/webapps?hl=ko 웹 기반 콘텐츠 | Android 개발자 | Android Developers 웹 기반 콘텐츠 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 그림 1. 사용자에게 웹 콘텐츠를 제공할 수 있는 두 가지 방법은 기존 웹브라우저에서 제공하 developer.android.com ◇ 웹 컨텐츠 웹뷰 : UI를 더 세부적으로 제어할 수 있다. 웹페이지를 Layout에 표시할 수 있도록 해준다. public class WebView extends AbsoluteLayout implements ViewTreeObserver.OnGlobalFocusChange.. 안드로이드 2023. 3. 11.

• 

  [JSP] JSP프로젝트 시작 : Dynamic Web Project(eclipse) jsp프로젝트는 새로운 프로젝트 시작하기보다는, 공부용으로 보려는 사람이 많을 것이라 생각한다. 아무튼 회사에서는 동료와 협업하여 환경을 구축하다보니, 모르는 부분이 있을 것 같아서 AtoZ로 직접 해보자. 생각보다 쉽다. * tomcat은 미리 깔아두도록 하자 어쩌다보니 길어진 것 같아서 요약 ※ Build Path에 Server Runtime추가. ※ eclipse에서 서버 설정 *Server Runtime 빌드패스 추가. 1. File>New>DynamicWebProject 프로젝트명 설정하고 넘어가자. 2. test.jsp작성: src>main>webapp>test.jsp Test JSP파일입니다.asdfafsd 이렇게 하면 아마 첫줄에서 jakarta.servlet.http.Http~~라면서 빨.. WEB/JSP 2023. 3. 8.

• 

  [JSP] Servlet이란? 클라이언트와 서버 사이의 Bridge 서블릿으로 프로그래밍을 진행했지만, 내부적으로 어떻게 동작하는지는 살펴본적이 없어서 살펴보고자 한다. Servlet은 클라이언트와 Backend사이의 다리 역할을 한다. ■서블릿 : 클라이언트의 요청을 받아서 처리한 뒤 응답한다. 특징 - 클라이언트 요청에 동적으로 작동하는 웹 애플리케이션 컴포넌트 - html을 사용해 요청에 응답 - Java Thread로 동작. - MVC의 Controller - HTTP 프로토콜 서비스 지원하는 javax.servlet.http.HttpServlet 클래스 상속받음 - UDP 보다 처리 속도 느림 Servlet은 웹서버가 동적인 페이지를 제공할 수 있도록 도와준다. CGI : Common Gateway Interface 별도로 제작된 웹서버와 프로그램간의 교환방식이.. WEB/JSP 2023. 3. 7.

• 

  [브라우저] 네비게이션- 프로세스와 스레드의 동작 참고 그 이상 : https://d2.naver.com/helloworld/9274593 ◆ 네비게이션 : 브라우저 주소 표시줄 부터 렌더링 준비까지... 브라우저의 주소 표시줄에 url을 입력하면 브라우저가 인터넷에서 데이터를 가져와 페이지를 표시한다. 시작은? ■ 브라우저 프로세스 : 탭 영역 밖에 있는 모든 부분 제어 브라우저 프로세스는 UI 스레드와 네트워크 스레드, 스토리지 스레드 등이 있다. 1. UI 스레드 : 브라우저의 버튼과 입력란을 그린다. 2. 네트워크 스레드 : 인터넷에서 데이터를 가져오기 위해 네트워크 스택을 다룬다. 3. 스토리지 스레드 : 파일에 대한 접근 제어 주소 표시줄에 url 입력하면 UI 스레드가 입력을 처리한다. ■ 네비게이션 1. 입력 처리 : 주소창 입력을 분석해.. 브라우저 2023. 3. 1.

• 

  [브라우저] 다중 프로세스 아키텍처(feat. Chrome) 참고 자료 : https://d2.naver.com/helloworld/2922312 목차 ◆ CPU : Central Processing Unit : 중앙처리장치 ◆ GPU : Graphics Processing Unit : 그래픽처리장치 ◆ 프로세스와 스레드로 프로그램 실행 ◆ 브라우저 아키텍처 : 프로세스, 스레드 관점 ◆ 다중 프로세스 아키텍처의 장점 ** 프로세스는 서로 데이터를 주고 받기 위해 IPC를 사용해야한다. Thread는 동일 영역에 있는 프로세스 내부에서 실행되기 때문에, 자원을 공유한다. ◆ CPU : Central Processing Unit : 중앙처리장치 컴퓨터의 두뇌. 똑똑한 일꾼 한명. 여러 종류의 작업을 하나씩 순서대로 처리할 수 있다. ◆ GPU : Graphics P.. 브라우저 2023. 3. 1.

• 

  [브라우저] 배치(Layout), Paint(feat 더티비트) ◆ 브라우저 렌더링 순서 * Render Tree : 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리.(display none 이나 meta정보는 포함되지 않음) * 박스모델..(Block , Inline Block, InLine...) ■ 배치 = Layout = Reflow라 불린다. Render Tree에는 보여줄 수 있는 모든 정보가 있다. 이를 실제로 화면에 보여주기 위해서 요소들의 정확한 위치와 크기를 계산하는 과정이다. 화면에서 차지하는 영역, 여백, 스타일 속성이 계산된다. ( %, em 같은 상대적인 단위는 px단위로 변환됨) 이 과정을 통해서 렌더링엔진은 각 요소가 어떻게 생겼고, 어디에 보여줄 지 알게 된다. 구체적으로는 왼쪽에서 오른쪽으로, 위에서 아래로 배치.. 브라우저 2023. 2. 27.

• 

  [브라우저] CSS 파싱(문맥 자유 문법 O); ◆ CSS파싱 ■ 특징 - 문맥 자유 문법이다. = 규칙이 딱 정해져 있다. = 파서(상향식 또는 하향식)를 통해서 파싱이 가능하다. - 웹킷은 CSS 문법 파일로부터 자동으로 파서 생성을 위해 플렉스와 바이슨 파서 생성기를 활용한다. - 파이어 폭스는 직접 작성한 하향식 파서를 사용한다. - CSS 규칙 객체는 선택자와 선언 객체 그리고 CSS 문법과 일치하는 다른 객체를 포함한다. ■ 스크립트와 스타일 시트 진행 순서 - 스크립트 : 이전 글 브라우저의 동작 원리에서 설명한 것과 같이, 태그를 만나면 문서의 파싱은 중단된다. 네트워크로부터 자원을 가져오는 단계 또한 실시간으로 처리(동기)되고 자원 받을 때까지 파싱은 중단된다. 비동기로 처리하기 위해서는 async, defer옵션을 적절히 사용한다. .. 브라우저 2023. 2. 27.

• 

  [브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) ◆ HTML 파서 : HTML 마크업을 파싱 트리로 변환. ■ 특징 - HTML 어휘 및 문법은 W3C 에 명세되어 있음. HTML 5까지 나왔다. - HTML 정의를 위한 공식적인 형식으로 DTD(문서 형식 정의)가 있지만 문맥 자유 문법이 아니다. △ 언어가 유연함 △ HTML 오류에 대한 브라우저의 관대함. △ 변경에 의한 재파싱. 스크립트의 document.write는 토큰을 추가할 수 있기 때문에, 입력 과정에서 파싱이 수정될 수 있따. ■ DOM : Document Object Model : 문서 객체 모델 DOM은 마크업과 1:1의 관계를 맺는다. 예시) DOM은 W3C에 의해 명세가 정해져 있다.(https://www.w3.org/DOM/DOMTR) * HTML 정의 : https://ww.. 브라우저 2023. 2. 26.

• 

  [브라우저] 파싱이란?(Parsing이란?) - 파싱의 과정(어휘 분석, 구문 분석) ■ 파싱 특정 데이터에서 원하는 데이터만 추출해내는 과정을 '파싱'이라 알고 사용해왔다. 또는 특정 양식의 문서를 원하는 양식으로 변환하는 것을 파싱이라 사용했다. (뇌피셜...) 여기서는 '문서 파싱'은 브라우저가 이해할 수 있는 구조로 코드를 변환하는 작업을 말한다. 파싱의 결과로는 노드트리(=파싱트리=문법트리)가 도출된다. 예시) 2+3-1 와 같은 식은 다음과 같은 트리가 된다. 식은 표현식과 숫자로 이루어져 있으며, 각각은 노드가 된다. △ 문법(파싱의 문법) 문맥 자유 문법 : 파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데, 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다. (쉽게 말해서, 특정 규칙에 따라 작성된 문서들만 파싱이 가능하다. 대부분의 프로그래밍 언어.. 브라우저 2023. 2. 26.