세상은 내가 정하는 대로 세상은 내가 정하는 대로

웹은 기본적으로 프론트엔드와 백엔드로 구성! 프론트엔드는 우리가 접하는 화면 자체의 디자인, 내용 등을 다루는 것 백엔드는 그 웹 페이지를 띄우기 위한 서버나 데이터 베이스를 다루기 위한 것 프론트엔드 : html + CSS + Javascript + ... 1) html : 화면에 들어갈 글, 이미지 등의 정보 2) CSS: 화면에 들어갈 정적인 디자인 3) Javascript: 화면에 들어갈 동적인 디자인 (만약에 동적인 디자인 안 넣을 거면 공부 안해도 됨) -> html, css, js 모두 생활코딩에서 듣고 개념 이해! 활용은 혼자 웹페이지 만들어 보면서 익힐 것 백엔드 : 사용자의 기호에 따라... (나의 경우엔 Flask) 1) 웹 서버의 개념 이해 : flask 다루기 전에 웹 서버의 구동..

자! 기본적으로 web service는 response(Status line, Headers, Body)와 request(Start line, Headers, Body)의 관계로 끝난다! 그렇다면 Flask는?! 1. Response - Response() 로 객체를 만든다 첫번째 인자는 표시할 문자열, 두번째 인자는 status line, 세번째 인자는 Header+Body - make_response() 로 보내야 큰 데이터를 보낼 때 서버도, 클라이언트도 가볍다 -Response의 속성들 - environ 은 플라스크의 환경 변수를 담고 있다 environ[‘REQUEST_METHOD’]처럼 부를 수 있다 - start_response라는 함수를 인자로 받음 - return make_response..

- 기본적으로 원래의 서버와 클라이언트의 소통은 다음과 같다 (클라이언트-서버-DB로 이루어진 단순 구조 ) 하지만 정적인 요소보다 동적인 요소들을 추가하기 위해(페이스 북처럼 동시에 옆에 방금 로그인한 사람 알려줌/ 페북 메시지 알림 등 동적으로 작동) 백엔드 서버와 프론트 엔드 서버를 구분하게 되었다. (https://it-eldorado.tistory.com/85) (https://www.youtube.com/watch?v=wcsVjmHrUQg) 1. 프론트 서버 프론트 서버는 어떤 주소에 대한 요청을 보냈을 때, markup Language (html ,css) 를 보내줘서 사용자에게 GUI 환경을 제공해주는 서버를 의미한다. (화면을 그려주는 역할) react, next, styled compo..

웹은 현재 작업중인 페이지에서 다른 페이지로 이동하기 위해 2가지 페이지 전환 기능을 제공합니다. 오늘은 2가지의 페이지 전환 방법의 차이와 사용법에 대해 알아보도록 하겠습니다. 1. Forward 방식 Forward는 Web Container 차원에서 페이지의 이동만 존재합니다. 실제로 웹 브라우저는 다른 페이지로 이동했음을 알 수 없습니다. 그렇기 때문에 웹 브라우저에는 최초에 호출한 URL이 표시되고, 이동한 페이지의 URL 정보는 확인할 수 없습니다. 또한 현재 실행중인 페이지와 forward에 의해 호출될 페이지는 Request 객체와 Response 객체를 공유합니다. 위와 같이 Foward는 다음으로 이동 할 URL로 요청정보를 그대로 전달합니다. 그렇기 때문에 사용자가 최초로 요청한 요청정..

jinja는 아래처럼 되어 있는 문서를 받아서, 해당 문서의 필요한 부분들, content2와 같은 부분을 변경해주고, 웹브라우저가 인식할 수 있는 html로 변환해주는 기능을 수행합니다. 즉, jinja2는 어떤 파일, 실재하는 파일에 어떤 변수들을 집어넣어서 약간 변경시켜서 html로 만들어주는 엔진, 같은 것이다 출처: https://ddaaadd.tistory.com/276 jinja2란 Jinja2의 정의 Jinja2는 파이썬에서 가장 많이 사용되는 템플릿 엔진 중 하나입니다. Django의 템플릿 시스템에서 영감을 얻었지만 템플릿 작상자에게 더 강력한 도구 세트를 제공하는 표현 언어로 ddaaadd.tistory.com https://jinja.palletsprojects.com/en/3.0...

1. HyperText Transfer Protocol 2. HTTP 핵심 요소 2-1. HTTP 통신 방식 2-2. HTTP Request 구조 2-2-1. Start Line 2-2-2. Headers 2-2-3. Body 2-3. HTTP Response 구조 2-3-1. Status Line 2-3-2. Headers 2-3-3. Body 3. 자주 쓰이는 HTTP Methods 3-1. GET 3-2. POST 3-3. OPTIONS 3-4. PUT 3-5. DELETE 4. 자주 쓰이는 HTTP Status Code 4-1. 200 OK 4-2. 301 Moved Permanently 4-3. 400 Bad Request 4-4. 401 Unauthorized 4-5. 403 Forbidden..

진도: ~수업을 마치며까지 WEB 공부를 마치며... 결국 javascript 강의까지 끝! 진짜 내 자신이 정말 대단하다! 강의를 다 듣고 나니 이 웹페이지에도 개선점이 여러모로 많다는 것을 느꼈지만, 그건 다음 3학년 1학기 웹페이지에 반영하기로... ㅋㅋㅋㅋ 이 다음 목표! 일단 생활코딩으로 html, css, javascript 강의까지 가볍게 들었으니, 이제는 노마드 코더의 웹 개발 커리큘럼을 따라 2학년 겨울방학 때 배운 내용들(html+css+javascript)를 좀 더 다져볼 예정이다. 다 들을 수 있을진 모르겠지만, 듣고 싶은 강의가 크게 네 가지 강의가 있다! 코코아톡 클론 코딩 (html+css) -> 2주 예상 바닐라 JS로 크롬 앱 만들기 (javascript) -> 2주 예상 ..

진도: ~배열과 반복문의 활용까지 3. 웹페이지 제어하기 -> CSS 선택자는 크게, 태그, id, class 선택자 있음 제어할 태그 선택하기 ->document.querySelector(".myclass"); #".myclass" = 이 웹페이지의 모든 태그 중에 클래스 명이 myclass인 태그를 선택하는 선택자 선택한 태그의 style 바꾸기 -> document.querySelector("body").style. style 중에서 background-color:black으로 바꾸고 싶다 -> document.querySelector("body").style.backgroundColor='red'; 4. 조건문 4-1. 비교연산자와 불리언 -비교연산자는 좌항와 우항 값을 비교 후, 불리언을 반환함..