전체 글108

• 

  [안드로이드] 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.

• 

  [브라우저] 브라우저의 동작 원리 ◆ 브라우저의 동작 원리 브라우저를 켜고, 웹 사이트에 접속하면 일어나는 일에 대해서 알아보겠습니다. ■ 서버로부터 데이터 요청(주로 network 모듈) 1. 브라우저는 DNS서버에 호스트에 해당하는 ip를 요청 2. DNS 서버는 ip를 브라우저에 응답. 3. 웹 브라우저와 서버는 비밀 key를 통해 3Way- Handshake로 데이터 주고 받기 위한 준비 완료. 4. 데이터 요청 : HTTP Reqeust 5. 응답 : HTTP Response ■ 사용자에게 데이터 출력 HTML, CSS, javascript 를 parsing하고 화면에 표시한다. -------------------- Contstruction ---------------------- 1. HTML 파싱 → DOM Tree 생성 2.. 브라우저 2023. 2. 26.

• 

  [브라우저] 브라우저의 구조 ◆ 브라우저란? 선택한 자원을 서버에 요청하고, 전송 받은 자원을 사용자에게 표시해주는 tool이다. ※ 전송 받은 자원 : HTML, CSS, Javascript, PDF, Image, WASM 등등 - 좀 더 구체적으로 설명하자면, 1. 사용자 인터페이스 영역의 주소창에서 URI(Unified Resource Identifier : 자원 식별자)를 입력한다. 2. 네트워킹 모듈을 통해 HTTP 요청을 보내고, 응답을 받는다.(응답은 자원을 포함한다.) 3. 전송받은 자원은 렌더링 엔진을 통해서 사용자에게 볼 수 있는 형태의 오브젝트로 변환된다.(렌더링) - 브라우저 엔진은 이 때 전송받은 자원을 렌더링 엔진으로 넘겨주는 역할을 한다. * 필요한 경우 자바스크립트 해석기를 통해 자바스크립트 코드를 해석.. 브라우저 2023. 2. 23.

• [LeetCode] 3. Longest Substring Without Repeating CharactersMedium - Medium https://leetcode.com/problems/longest-substring-without-repeating-characters/description/ Longest Substring Without Repeating Characters - LeetCode Longest Substring Without Repeating Characters - Given a string s, find the length of the longest substring without repeating characters. Example 1: Input: s = "abcabcbb" Output: 3 Explanation: The answer is "abc", with the length of 3. Example 2: In.. 코딩 테스트 2023. 2. 15.