Coding Kitsune

보통 웹에서 사용하는 HTTP request는 다른 도메인 데이터를 요청할 수 있다. 가령 Flask로 local에서 구현하다가 구글같은 페이지의 주소를 복사해와서, src = '' 안에 넣으면 로컬페이지에서 구글페이지 이미지가 뜨는것과 같은 구조이다. 하지만 스크립트 태그 ( )로 둘러싸인 스크립트 코드에서 실행되는 HTTP request는 동일한 서버에서만 요청할 수 있다. 정확히 프로토콜, 호스트명, 포트가 동일해야하고 이를 Same Origin Policy 라고 한다. 즉 http://localhost:5000/ 서버에서 http://localhost:8080/test 이 서버에 요청할 수가 없다는 것이다. (포트번호가 다르기 때문에 에러가 난다) 그럼 프론트엔드 서버에서 백엔드 서버를 가져와야하..

HTTP 요청 중 가장 많이 사용되는 방식은 GET 방식으로, 이를 통해 URI 상에 파라미터와 파라미터값을 넣을 수 있다. URL?para1=para1_value&para2=para2_value 이런식으로 계속해서 파라미터값을 ?을 시작으로 &을 통해 구분해주며 값을 계속해서 넣어나갈 수 있다. form이라는 태그에서 method를 get으로 쓰고, action의 의미는 이 폼을 제출했을때, input.html로 이동하는 것을 의미한다. 결과적으로 fun-coding.org에서 작동하는 이 폼을 submit하면 위와 id와 pw의 값들을 저장하고, get방식으로 URI값으로 백엔드 서버에 해당 request를 보내게 된다. 로그인 ID: PW: html 파일로 간단하게 로그인 폼을 만들고,이 값들을 a..

http protocol은 컴퓨터를 클라이언트와 서버로 구분하고, 클라이언트에서 HTTP Request를 보내면 서버에서 HTTP Response를 보내주게 구성되어있다. 제일앞에 메서드가 들어가고, 경로가 들어간 뒤 버전이 들어가는 형식으로 Request를 보낸다. response는 버전을 시작으로 스테이터스 코드, 메세지와 함께 여러 데이터들을 받을 수 있다. 데이터를 다룰 때는 crud를 알아야한다. 이 rest api도 마찬가지로 데이터를 다루는 것이기에, 이 메서드들을 모두 알아야하고 여기에 맞춰서 구현이 이루어진다. 결국 REST API란 이 방식을 기반으로 api를 구현한 것이고, 마이크로 서비스, Open API(누구나 사용할 수 있도록 공개된 api) 에서 많이 사용된다. 그러면 Flas..

통상 웹서버라고 하면 그냥 WAS구나 라고 생각하는 경우가 많다. 하지만 Web Server와 WAS를 둘다 사용한다 => 이럴때 구분해서 이야기한다. Web server 는 쉽게 말해서 Client에서 요청이 들어오면 정적인 것들만 전달을 해주는 역할 조금 더 자세히 말해서, 브라우저 클라이언트로부터 HTTP 요청을 받고, 정적인 컨텐츠들(html, css 등)을 제공하는 서비스 프로그램이다. Apache Server 또한 이 웹서버에 포함된다. 그렇다면 WAS(Web Application Server)는 어떤 역할을 하는 것일까? Nodejs에서 로그인/회원가입을 구현할 때도 그렇고 DB를 건드릴 때 등, 어떠한 로직을 처리가 요구되면 동적 컨텐츠를 제공하기 위해 만들어지는 것이 바로, 이 WAS 이..

이전에 로그인 / 회원가입 구현작업을 할 때, 잠깐 Django를 사용한적이 있다. Flask 또한 Django와마찬가지로 웹 프레임워크의 일종이다. Django => 파이썬 기반 매크로 웹 프레임워크 Flask => 파이썬 기반 마이크로 프레임워크 Django는 오픈소스와 사용자가 많고 20만줄의 이상의 코드 라인이기에 무거운 특징이 있지만 ORM을 지원하기에 데이터베이스 접근에 용이하기에, 큰 프로젝트에서 사용을 많이들 하곤 한다. Flask는 2만줄을 조금 넘는 코드로 장고보다 훨씬 가볍고, ORM DB가 존재하지 않기에, ORM 지우너 패키지를 선택해서 사용하면 된다. SQLAlchemy를 많이들 사용한다고 한다. REST API 서버처럼 용청과 응답이 확정적인 경우에는 가벼운 Flask가 장고보..

웹 서비스를 개발하려면 프로젝트 목적에 맞도록 하드웨어와 소프트웨어를 선정해야 한다. 하드웨어 환경 개발환경 하드웨어 개발환경에는 크게 두가지 클라이언트 환경과 서버 환경이 있다. 클라이언트 환경에는 웹 브라우저, 모바일 앱 등 개개인의 기기와 연관이 있고, 개발자의 입장에서는 서버 하드웨어 개발환경이 중요하다. 서버 환경 1. 웹 서버 => 클라이언트에서 요청하는 서비스 속도 향상을 위해 정적 컨텐츠(HTML, CSS, Image) 들을 관리하고, 합법적으로 사용자 인증을 해주며 포화 방지를 위해 응답속도(대역폭) 제한. HTTP를 이용하여 요청/응답을 처리한다. 2. 웹 어플리케이션 서버(WAS) => 동적 컨텐츠(JSP, Servlet)를 수행하고, 데이터베이스와 연결이 되어 있으며, 웹 서버와 구..

HTML과 CSS로 클론코딩을 해오면서 SVG 태그를 쓴적이 없었다. 이미지를 가져올때 PNG를 사용했었고, 아이콘을 따올때는 font awesome이나 구글폰트에 들어가 아이콘을 따왔다. 하지만 점차 svg태그를 많이 사용하는 것을 보았고, 이에 대해 대강만 듣고 넘어갔다. sgv 태그가 점점 중요하게 쓰이는것을 느꼈고 이에 대해 자세히 알아보고기로 하였다. 우선 svg 태그의 정의는 이렇게 나와있다. SVG stands for Scalable Vector Graphics and is used to define graphics for the Web 즉 내부에 원 삼각형 사각형 등 그래픽을 담을 수 있는 그릇 같은 역할을 한다. PNG => pixel 단위로 구성되며 비트맵 방식이다. SVG => 수학 ..