Kim-Baek 개발자 이야기

브라우저에서 html을 그리기 위해서 여러 가지 과정이 있다는 것을 알고 있었지만 정확하게 알지 못했는데, 렌더 트리가 어떻게 그려지고, 어떤 과정인지를 정확하게 설명하고 있는 내용이다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다. 클라이언트 (브라우저) 를 보면 렌더링엔진과 자..

프론트엔드 관련 테스트를 하면서, 항상 사용했던 것이 브라우저의 개발자 도구이다. 개발자 도구를 통해서 어떤 행동을 할 수 있을지를 아래에서 설명한다. 1.1 개발자 도구 크롬 브라우저가 제공하는 개발자 도구(DevTools)은 자바스크립트 개발에 필수적인 강력한 도구이다. 개발자 도구는 브라우저에 기본 내장되어 있으므로 별도의 설치가 필요없다. 개발자 도구는 아래의 단축키로 오픈할 수 있다. 단축키 Windows F12 또는 Ctrl + Shift + I macOS command ⌘ + option ⌥ + I 예전에 프론트엔드를 개발할 때 가장 어려운 것이 무엇일까요? 라는 질문을 들은 적이 있다. 그 때의 나는 디버깅이 아닐까요 라고 대답을 했던 것 같다. 사실 프론트엔드의 디버깅을 내가 잘 할 줄 ..

- Type 통일 : 부모타입에 자식객체를 모두 대입가능 상속 -> 다형성 + overriding -> abstract -> Interface - 코드 재사용 -> 타입통일 : 다형성을 위해 사용이 된다. ※ 객체와의 좋은 관계 1. high cohesion (높은 집중도) (하나의 클래스가 하나의 일만 하자) : 단일 책임 2. loose coupling (느슨한 연결) - 관계가 깊을수록 다른 쪽에 영향을 끼칠 가능성이 많다. ◎ 내부 class (Nested class, inner class) - JDK 1.1 에서 추가되었다. GUI에 대한 것이 많이 바뀌게 되었는데, 그것을 지원하기 위해 나오게 되었다. class A{ class B{ } -> class 안에 class를 정의 -> 외부 cla..

POST post 메서드는 기존에 알고있던대로 등록에 관한 내용이다. http 메세지로 넘어온 엔티티를 새로운 자원으로 등록한다. 새로운 자원으로 등록하지않을 수도있는데 이런 경우엔 200(ok)이나 204(no content) response code로 응답한다. 새로운 자원으로 만들어진 경우에는 201(created) response code로 응답하며 신규 생성된 자원의 위치를 헤더에 포함해야한다. 무슨 말이냐하면 예를들어 게시판에 새로 게시물을 등록하면 이를 따라갈수있는 위치를 응답 헤더에 넣어야한다는 의미다. 201 created Location: /board/2 PUT post와 가장 큰차이는 put 메서드는 자원의 식별자를 이미 알고있는 상태여야한다는 점이다. put 메서드는 식별자의 자원을..

- 웹 서버 (Web Server) 클라이언트가 서버에 페이지 요청을 하면 요청을 받아 정적 컨텐츠(.html, .png, .css등)를 제공하는 서버 클라이언트에서 요청이 올 때 가장 앞에서 요청에 대한 처리를 한다. 클라이언트의 요청을 기다리고 요청에 대한 데이터를 만들어서 응답하는 역할 (정적 데이터) CASE 정적 컨텐츠를 요청(request)했나? 1. 정적 컨텐츠구나! 내가 제공해줄게 => .html, .png 등 응답(response) 2. 정적 컨텐츠가 아니구나.. 웹서버에서 간단히 처리 못하겠군. WAS에게 처리를 부탁해야겠다! => 결국 WAS가 처리해준 컨텐츠를 받은 웹서버는 응답(response)을 해줌 대표 : Apache, nginx - WAS (Web Application Se..

"브라우저에 도메인을 입력하면 → DNS서버에 IP주소를 요청 → 수신한 IP주소에 해당하는 웹서버에 접속" 1. 로컬PC의 hosts파일 확인 ( 브라우저에 캐싱되어 있는지 먼저 확인하자 ) 로컬PC의 C:\Windows\System32\drivers\etc 경로(윈도우 설치 경로에 따라 조금 차이가 있을 수 있음)에는 hosts라는 파일이 있다. 이 파일을 메모장으로 열어보면, IP주소와 도메인 주소를 설정할 수가 있다. 이 파일은 PC의 자체 DNS역할을 하며, 브라우저는 가장 먼저 이 파일을 확인하여 입력한 도메인의 매핑정보가 존재하는지 확인한다. 2. DHCP&ARP 대부분 가정집에서는 DHCP로 인터넷 접속을 하고 있을 것이다. DHCP는 Dynamic Host Configuration Pro..

제 2정규화를 수행 했을 경우 테이블의 모든 컬럼이 완전 함수적 종속을 만족한다.(부분 함수적 종속을 모두 제거되었다.) 이를 이해하기 위해서는 부분 함수적 종속과 완전 함수적 종속이라는 용어를 알아야 한다. 함수적 종속: X의 값에 따라 Y값이 결정될 때 X -> Y로 표현하는데, 이를 Y는 X에 대해 함수적 종속 이라고 한다. 예를 들어 학번을 알면 이름을 알 수 있는데, 이 경우엔 학번이 X가 되고 이름이 Y가 된다. X를 결정자이라고 하고, Y는 종속자라고 한다. 다른 말로 X가 바뀌었을 경우 Y가 바뀌어야만 한다는 것을 의미한다. 함수적 종속에서 X의 값이 여러 요소일 경우, 즉, {X1, X2} -> Y일 경우, X1와 X2가 Y의 값을 결정할 때 이를 완전 함수적 종속이라고 하고, X1, X..

예전에 자바를 처음 공부하던 때, 네이버 블로그에 정리한 내용을 이제 티스토리로 옮기고자 한다 ◎ abstract - 메소드와 class 에 붙는 제한자 (modifier) - 추상의 , 구현되지 않은 이라는 의미 ex) public abstract class A { } 이렇게 추상적인 클래스의 경우 하위클래스에서 재정의 (오버라이딩) 해야하는데 이는 강제가 아니다. -> 다른메소드를 만들 수도 있고, 안만들 수도 있고 자기 마음대로 하게된다. => 이것을 강제하는 것이 abstract 메소드이다 ※ Animal 의 경우 타입으로는 많이 쓰인다. 하지만 실제 new Animal 로 객체를 생성해서 쓸일은 많이 없다 ex) 동물원에서 개 , 고양이 객체를 생성하지 동물객체를 생성하지는 않는다. => 부모클..

예전에 자바를 처음 공부하던 때, 네이버 블로그에 정리한 내용을 이제 티스토리로 옮기고자 한다 ◎ super - 부모객체를 의미한다. this 는 (현재)이 객체 - super.부모객체의 멤버 -> 부모객체의 instance 변수/메소드 호출시 사용 ※ super . 는 생략하더라도 보통 컴파일러가 알아서 처리! - ★ super( [값, ...] ) -> 부모객체의 생성자 호출 -> 생성자 구현부의 첫 구문으로 와야한다 (this(), super()는 같이 올 수 없어!) -> 생성자 구현부에 this () 나 super 가 없으면 super(); 가 첫 구문으로 들어가게 된다 public A( ){ super(); 부르기 -> 상위 클래스의 객체를 자동으로 만들어서 같이 묶어서 사용할 수 있도록 하기..

예전에 자바를 처음 공부하던 때, 네이버 블로그에 정리한 내용을 이제 티스토리로 옮기고자 한다 ※원래 프로그램은 내부에서 연관을 갖고 동작했다.(절차지향적에서) 모듈화를 했다고 해서 그 연관이 사라지는 것이 아니다. 그것을 모듈과의 관계로 표현한다. ◎ 의존관계 (Dependency) ※Association(의존관계) ⊃ has a ⊃ Aggregation ⊃ composition ⊃ use a - 의존관계의 의미 : 하나의 객체가 일하기 위해 다른 객체에 의존(필요로 하는) 관계 ->메소드 메소드, 함수 : 제공하는 기능(println()) 메소드 내에서 사용하는 관계 -> local 변수로 사용 - has a(포함) 관계 : 하나의 객체가 다른 객체를 자신의 속성으로 가지고 있는 관계 -> Insta..

예전에 자바를 처음 공부하던 때, 네이버 블로그에 정리한 내용을 이제 티스토리로 옮기고자 한다 ◎ Static 키워드(제한자) - instance 변수, 메소드, static block, inner class 에서 사용된다. - 의미 : Class 의 멤버 -> 객체와는 관계없다 (단 한개만 존재하게 된다) - Card 클래스에서 kind 나 number의 경우 각 카드마다 달라지는 값이다 그러나 weight, height 의 경우 모든 카드에 동일한 값이다! -> Class 에 종속시키자 (Static) ex) Class A{ static int var; -> new A( ) 를 했을 때, var과 go()는 객체안에 존재하지 않는다. static void go( ){ } } ※ 메모리 영역 - hea..

함수 호출과 this Arguments 객체 자바스크립트에서 함수를 호출할 때 인수들과 함께 암묵적으로 arguments 객체가 함수내부로 전달된다. arguments 객체는 유사 배열 객체이다 넘겨진 인자(배열), length, callee(함수의 참조 값) 으로 구성되어 있다. function sum(a, b){ return a+b; } console.log(sum(1)); //NaN console.log(sum(1,2)); //3 console.log(sum(1,2,3)); //3 // length를 이용한 구현 function sum(){ var result = 0; for(var i=0; i < arguments.length; i++){ result += arguments[i]; } return..

예전에 자바를 처음 공부하던 때, 네이버 블로그에 정리한 내용을 이제 티스토리로 옮기고자 한다 ※ class loading : 하드에 있는 자바파일을 cpu 가 빠르게 처리하기 위해 Main Memory 에 올리는 것(JVM이 처리) ※Heap 내부의 내용을 없애는 시점 : 더 이상 사용할 수 없을 때 ex) new A( ) -> 값을 사용할 수 없다. 지정되지 않음! : JVM 이 처리한다. ※ reference 타입은 메모리에 동일한 크기로 주소가 잡힌다 (4byte) primitive 타입은 각각 크기에 맞게 공간을 할당한다. ※ 메소드가 찾는 것은 기본적으로 Local 변수이다. 없으면 instance 변수도 확장해서 찾게 된다. this 를 컴파일러가 추가해서 인스턴스 변수를 찾게 된다. ※ M..

Function Object 자바스크립트에서는 함수도 객체이다. 함수에 정의된 로직 말고도 객체처럼 프로퍼티들을 가질 수 있다. function add(x, y){ return x+y; } add.status = "good"; console.log(add(3,3)); //6 console.log(add.status); //good 함수를 생성할 때 만들어 지는 함수 코드는 함수 객체의 [[Code]] 내부 프로퍼티에 자동으로 저장된다. 함수는 일급 객체이다 자바스크립트에서는 함수도 일반 객체처럼 취급된다. 따라서 일급 객체를 만족하는 특징들이 있다. 리터럴에 의한 생성 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능 함수의 인자로 전달 가능 함수의 리턴값으로 리턴 가능 동적으로 프로퍼티를 생성 및 ..