LazyWon Story

목차 Flask 이해하기 Flask 프로젝트 구조 살펴보기 웹 브라우저와 웹 서버 동작 방식 이해하기 Flask 이해하기 Flask는 Python 언어 기반의 마이크로 웹 프레임워크이다. 여기서 마이크로 웹 프레임워크란, 프레임워크를 간결하게 유지하고, 확장할 수 있도록 만든 것을 뜻한다. Flask의 특징 1. Flask는 간결하다. 플라스크를 이용하면 파일 하나로 구성된 짧은 코드만으로도 완벽하게 동작하는 웹 프로그램을 만들 수 있다. 2. 확장성 있는 설계가 가능하다. 플라크스에는 폼과 데이터베이스 처리 기능이 없다. Django에는 프레임워크 자체에 폼과 데이터베이스 처리 기능이 포함되어 있다. 그래서 장고는 덩치가 큰 프레임워크이다. 반대로 Flask는 확장 모듈을 사용한다. 처음부터 모든 기능..

목차 브라우저 렌더링 동작 과정 렌더링 최적화 ⭐️ 브라우저 렌더링 동작 과정 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다. 이를 웹 페이지 빌드 과정(Critical Rendering Path, CRP)이라고 한다. 그 전에 렌더링 엔진이 무엇인지 알아야 한다. 렌더링 엔진에 대하여.. 브라우저의 기본 구조는 다음과 같다. 렌더링 엔진은 URI를 통해 요청 받은 내용을 브라우저 화면에 표시하는 역할을 한다. 대표적으로 사파리와 크롬은 Webkit 이라는 렌더링 엔진을 사용한다. 렌더링 엔진이 하는 일 1. Dom tree 구축 2. Render tree 구축 3. Render tree 배치 4. Render tree 그리기 * DOM tree가 완벽하게..

목차 Node.js 란? Node.js를 만든 이유? Node.js 특징 Node.js 란? 웹서비스 개발에 빠질 수 없는 Node.js 대체 Node.js 는 뭘까? 개념을 확실히 하고자 찾아본 내용을 정리해본다. Node.js는 크롬 V8 자바스크립트 엔진으로 만들어진 JavaScipt 런타임이다. JavaScript는 누가 돌릴까? Javascript의 해석은 누가 할까? 바로 브라우저 이다. 브라우저마다 JavaScript를 해석할 수 있는 엔진이 존재한다. 크롬 브라우저 - V8 엔진 Mozilla / Firefox 브라우저 - SpiderMonkey 엔진 익스플로러 브라우저 - Chakra 엔진 Node.js는 Chrome의 JavaScript 해석 엔진인 V8 엔진으로 이루어져 있다. Nod..

외부 업체에서 우리 웹서버로 API 요청 시 CORS 이슈가 발생한다는 메일이 왔다. 이전에도 Flask-React를 사용하여 사내 백오피스를 개발하면서 API(Flask)의 도메인과 Front(React)의 도메인을 다르게 설정하여 Front에서 API로 요청 시 CORS 이슈가 발생하여 데이터를 정상적으로 받아오지 못했던 경험이 있었다. 이 경우 정상적인 통신을 위해서는 몇 가지 설정이 필요했던 것으로 기억한다. 먼저, CORS가 무엇인지 알아보기로 하자! CORS (Cross-Origin Resource Sharing) 교차 출처 리소스 공유 CORS는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체..

API 개발 중 클라이언트에서 보내는 파라미터는 웹서버로 url 인코딩이 되어 들어오고, 웹서버에서는 백엔드 서버 쪽으로 평문을 암호화하여 보내고 있었다. 인코딩 문제로 인해 제대로 통신이 되고 있지 않은 것을 깨닫고 인코딩 개념에 대해 공부하고자 한다. 인코딩이란? 인코딩은 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해 다른 형태나 형식으로 변환하는 처리 혹은 그 처리 방식을 말한다. URL Encoding & Decoding URL 인코딩이란 URL에서 url로 사용할 수 없는 문자 혹은 url로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을 '% XX'의 형태로 변환하는 것을 말한다. 그리고 URL 디코딩이란 변환된 url을 다시 원래 형태로 되돌리는 것을 말..

웹뷰 개발 시에 인증된 클라이언트에게만 접근 가능하며 아무 곳에서나 호출하지 못하도록 앱과 웹 간의 규약을 맞추어 앱에서 웹으로 특정 헤더를 보내는 방식으로 구현하는 경우가 있다. 예를 들어, 웹뷰에 접근하기 위해 앱에서 사용하는 auth token을 가지고 있어야 하는데 웹 개발자로서 개발이나 테스트를 할 때 매번 앱을 통해 웹뷰에 접근하여 테스트하는 게 굉장히 귀찮고 번거로웠다. 오류가 나면 브라우저 개발자 모드를 통해 콘솔 로그를 찍을 수 없어 어느 부분에서 나는지 파악하기가 쉽지 않았다. 그러던 중 발견한 Chrome Extension 인 ModHeader ModHeader를 설치하면 우측 상단에 아이콘이 생기는데 클릭하면 내가 Request Header를 커스텀하게 조작하여 넣을 수 있다. He..