웹 프로그래밍12 웹 프론트엔드 성능 비용 Reflow & Repaint 나는 백엔드에 더 관심이 많고 앞으로도 그럴테지만, 웹 개발자이고 웹에 대한 이해가 필요하다고 생각된다. 일을 하다가 궁금한 부분이 생겨서 질문을 했는데, Reflow & Repaint 라는걸 알게되어 궁금해서 바로 이 글을 쓰게 되었다. 브라우저 렌더링 프로세스 Rendering Engine Basic Flow 브라우저가 네트워크 계층에서 요청된 데이터를 받아오면, 렌더링 엔진이 움직이기 시작한다. 렌더링 엔진이 HTML 코드를 파싱해 DOM Tree 생성, CSS 코드를 파싱해 스타일 규칙 생성 위 두 가지를 합쳐 렌더 트리 생성 렌더 트리로 배치 시작 실제 화면 그리기 1~3 번은 Reflow, 4번은 Refaint에 해당하는 단계이다. 특정 엘리먼트의 Color 값 변화 Repaint 발생 특정 .. 2019. 10. 3. 브라우저의 동작 방식 브라우저의 주요 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 자원은 보통 HTML 이지만, PDF나 이미지 처럼 다른 형태일 수 있다. 자원의 주소는 URI (Uniform Resource Identifier)에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데, 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 브라우저의 일반적인 인터페이스 URI를 입력할 수 있는 주소 표시줄 이전, 다음 버튼 북마크 새로 고침 버튼, 로드 중단 버튼 홈 버튼 브라우저의 기본 구조 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등등 실제 화면에 보여주는 창 부분을 제외한 모든 부분 브라우저 엔진 -.. 2019. 10. 3. Controller에서 Parameter를 받는 방법 httpServletRequest.getParameter() - 가장 흔히 사용하는 일반적인 방법 @RequestMapping("/test") public String test(HttpServletRequest req){ String userId = req.getParamenter("userId"); return "test"; } httpServletRequest.getAttribute() getParameter()와 비슷하다. 차이점은 getParameter는 String 객체로 처리하고, getAttribute는 Object로 처리한다. User user = (User)req.getAttribute("user"); String userId = user.getUserId(); @RequestParam .. 2019. 5. 23. CORS (Cross-Origin Resource Sharing) slack api 호출하기 위해 ajax로 post 방식으로 요청을 보냈는데 계속해서 위와 같은 에러가 발생했다. api 호출방식 이라고 구글링 후 다른 방식으로 해결하긴 했지만, 위 오류에 대해서도 알고 넘어가려한다. 에러를 보면 has been blocked by CORS policy CORS라는 정책에 의해 막혀졌단다. CORS가 뭐지?? HTTP 접근 제어 (CORS) 처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross-orgin HTTP 요청에 의해 요청된다. 나의 경우에는 local에서 테스트를 해볼 때, localhost에서 slack 이라는 서로 다른 도메인에게 리소스를 요청했다. 이 경우 보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화.. 2019. 5. 22. 안전한 패스워드 만드는 방식 안전한 패스워드 저장 저번 개인 프로젝트에서 나는 해시 알고리즘 SHA-256을 사용해서 사용자의 패스워드를 암호화했었다. SHA-256 방식은 **단방향 해시함수의 다이제스트(digest)** 방식이다. 이 방식은 수학적인 연산을 통해 원본 메시지를 변환하여 암호화된 메시지인 다이제스트를 생성한다. 원본 메시지를 알면 암호화된 메시지를 구하기는 쉽지만 암호화된 메시지로는 원본 메시지를 구할 수 없어야 하며, 이를 '단방향성' 이라고 한다. 실제로는 사용자의 패스워드가 변환된 해시 값으로 저장되기 때문에 패스워드를 직접 저장하는 위험을 피할 수 있다. 그리고 로그인 시 해시 값을 비교해 일치 여부를 확인한다. 나는 이 방식으로 암호화가 됐으니 끝이겠지 하고 넘어갔었다. 하지만 새로 다른 프로젝트를 진행하.. 2019. 5. 2. API + REST API 개념 정리 API(Application Programming Interface)API 란?응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스데이터와 기능의 집합을 제공해 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환 가능하도록 함REST API(Representational State Transfer)REST란?REST 기반으로 서비스 API를 구현한 것WWW과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나자원을 정의하고 자원에 대한 주.. 2019. 3. 11. 이전 1 2 다음
