-
우아한테크캠프 Day06우아한테크캠프 2018. 7. 9. 19:42
빠르게 개발하기는 좋지만, 유지보수 하기 어려운 코드를 작성하지는 않은지 끊임없이 생각하자
(by 박재성 교수님)
Day06 학습 내용
브라우저가 웹페이지를 그리는 과정
1. HTML데이터를 파싱한다.
2. 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다.
3. 파싱하는 중 CSS 파일 링크를 만나면 CSS 파일을 요청해서 받아온다. CSS 파일을 읽어 CSSOM(CSS Object Model)을 만든다.
4. DOM Tree와 CSSOM을 사용해 Render Tree를 만든다.
5. Render Tree의 노드들이 화면의 어디에 위치할지 계산한다.
6. 웹페이지를 그린다.
한번에 요청해서 받는 구조가 아니라, 분리돼서 요청 가고 분리돼서 응답을 받는 구조다. (화면 깨짐이 발생하는 이유)
실제 브라우저가 어떻게 돌아가는지 원리를 알아야 최적화가 가능하다.
CSS 파일은 위에, 자바스크립트 파일은 아래
문서를 파싱해 DOM Tree를 만들더라도, 스타일 규칙을 알지 못하면 렌더링 할 수가 없다.
최대한 빨리 스타일 규칙을 알아야 렌더링 트리가 빨리 만들어진다. 따라서, 스타일 시트 파일을 <head></head> 태그 사이에 놓는 것이다.
(인터프리터는 HTML파일을 위에서 아래로 읽음)
자바스크립트는 왜 아래에 놓아야 성능이 좋아질까?
HTML 파서는 스크립트 파일을 만나게 되면 파싱을 멈추고 스크립트 파일을 읽는다.
만약 자바스크립트 파일을 <head></head> 태그 사이(상단)에 두게 되면,
스크립트 파일이 많거나 파일이 클 때, 읽는 시간이 오래 걸려 사용자 입장에서 웹페이지가 느리게 보일 수 있다.
심지어 잘못 코딩했을 때는, HTML파싱보다 자바스크립트 파일이 먼저 실행돼서 적용이 안 되는 경우도 볼 수 있다.
따라서 일반적으로 </body> 태그 위에 스크립트 파일을 둔다.
※ $(document).ready() : 외부 리소스, 이미지와 상관없이 DOM Tree 생성 후 실행된다.
HTTP
HTTP에 대해 기본적으로 알아야 성능, 보안상으로 개선할 수 있다.
* HTML은 기본적으로 GET/POST 방식만 지원한다. 꼼수를 이용해서 PUT/DELETE를 사용할 수 있다.
HTTP 학습 로드맵
1. 프로가 되기 위한 웹 기술 입문 (HTTP 용어 익히는 게 목적인 책)
2. HTTP & Network : 그림으로 배우는 책으로 학습
3 HTTP 완벽 가이드 (끝판왕, 스터디를 통해 공부할 것, 경력 5년 이상일 때 읽을 것)
redirect와 forward 방식 차이
스프링에서 model 객체에 데이터를 담아서 템플릿 엔진으로 전달하는 것이 forward 방식
-> 그럼 redirect와 forward 방식의 차이는 명확히 이해 가능할 것이다.
Spring에서는 클라이언트에서 요청이 오면 서버가 확인하는 순서는 다음과 같다.
1. static 디렉터리에 해당하는 파일이 있는지 ( ' / ' 는 resources 밑에 static을 가리킨다.)
2. static에 해당 파일이 없으면, 그 다음에 Controller에 매핑되어 있는 경로가 있는지
3. 없으면 404 응답코드를 보낸다.
자바 진영에서 ORM에 대한 표준 : JPA
ORM 프레임워크를 안 쓸 때는, 테이블부터 먼저 만드는 방식으로 개발을 많이 했다.
ORM 프레임워크를 사용하게 되면서 테이블보다 자바 객체를 먼저 설계하고 거꾸로 테이블을 설계할 수 있게 됐다.
개발 단계에서는 create-drop 설정하는 것이 좋다.
개발 단계에서는 스키마가 자주 변경될 수 있는데, 이럴 때 굳이 테이블을 alter 하는 작업 없이 사용할 수 있기 때문
하지만 운영에 배포할 때는 validate 설정으로 바꿔 사용한다.
95% 이상 쿼리를 메소드 이름의 조합으로 만들 수 있다.
Spring Data JPA 패키지에서 어떤 것을 사용할 수 있는지 확인해 보면 좋다.
※ 자바진영에서는 DB 변경 시 수정할 부분이 간단하다
Why? JDBC Driver라는 표준이 있어서
변경할 부분은 2가지
1. JDBC Driver 변경
2. datasource.url, id, pw 변경
참고
http://jeong-pro.tistory.com/90
'우아한테크캠프' 카테고리의 다른 글
우아한테크캠프 Day07 (0) 2018.07.11 Git과 Github 정리 (0) 2018.07.10 우아한테크캠프 Day05 (0) 2018.07.09 우아한테크캠프 Day04 (0) 2018.07.05 우아한테크캠프 Day03 (0) 2018.07.04
