듀의 자료저장소

템플릿 상속 // test4.html {% extends 'base.html' %} {% block content %} hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world {% endblock %} // base.html 메뉴 {% block content %} {% endblock %} 푸터 test4.html에서 상속을 받아서 base.html에 "콘텐츠 내용"이 출력된다. // npm init --yes // npm i nunjucks express // npm i nodemon --save-dev // -> nodemon app1 으로 ..

IT 공부/백엔드(Back-end) 2023. 1. 14. 10:36

※ 해당 글은 모던자바스크립트튜토리얼을 정리한 것입니다. fetch - javascript로 서버에 네트워크 요청을 보낸 후, 응답(정보)을 받아오는 기능 AJAX: 비동기적으로 추가되는 정보를 가져올 수 있다. fetch는 AJAX중의 하나. 요청(Request) - 주문 제출 - user 정보 읽어오기 - 서버의 최근 업데이트 정보 받아오기 특징: 새로 고침을 하지 않고, 네트워크 요청을 할 수 있다. 기본 형식 let promise = fetch(url, [options]) * url : API 서버 주소 * options : 매개변수, method 혹은 header를 지정 가능하다. options : 매개변수, method 혹은 header를 지정 가능하다. ※ options에 GET, POST등..

IT 공부/백엔드(Back-end) 2022. 1. 22. 16:59

*생활코딩 강의를 필기했습니다. Ajax 웹페이지 정보를 부분적으로 변경하는 기술 ex) 검색어 자동완성 기능 - 모든 예상 검색어를 다운로드 (x) → 브라우저와 웹서버가 ajax로 실시간 통신하고 있다. (검색어 한 글자씩 입력할 때마다 통신이 이루어짐) 왜 필요한가? 페이지 전체를 reload하면, 사용자 관심도 ↓ 모든 페이지를 다 전송해야하므로 데이터 지출 ↑ 처음 주목받은 계기 2004년, 구글이 지메일 서비스에서 본격적으로 Ajax를 활용! → desktop applcation처럼 페이지의 reload없이 받은 정보함의 정보를 보였다. → Asynchronous JavaScript and XML라는 이름도 이때 처음으로 생겼다. 웹에 대한 고정관념의 변화 * Ajax는 reload 없이, 웹..

IT 공부/백엔드(Back-end) 2022. 1. 21. 10:13

*아래 글을 번역했습니다 How To Use the JavaScript Fetch API to Get Data | DigitalOcean In this tutorial, you will create both GET and POST requests using the Fetch API. www.digitalocean.com 소개 XMLHttpRequest를 API를 요청하는데 쓰던 시절이 있었습니다. Promise를 포함하지도 않고, 바닐라 자바스크립트 코드를 사용하지도 않았었죠. 제이쿼리를 쓰면서, 우리는 더 클린한 jQuery.ajax()구문을 사용할 수 있게 되었습니다. 이제 자바스크립트는 자체적으로 API 요청을 하기위한 방법이 생겼습니다. Fetch API는 Promise로 서버 요청을 할 수 있는..

IT 공부/백엔드(Back-end) 2022. 1. 17. 13:11

자바스크립트는 객체 지향(Object-Oriented Programming) 언어지만, 다른 언어들과 조금 다르다. C++, JAVA : class 기반 언어 Javascript : prototype 기반 언어 객체(Object): 일종의 데이터 타입이다. "어떤 것"이라고도 할 수 있다. 여러 속성을 하나의 객체에 담아서, key와 value값을 저장할 수 있다. 축구선수 박지성을 하나의 객체로 잡았을 때, 다음과 같은 정보를 구분해볼 수 있다. 속성(Property): 이름, 나이, 키.. 객체의 메소드(Method): 대상의 동작 - 객체(Object)를 코드로 표현해본 방법 객체의 또 다른 말은 인스턴스(instance) 클래스(class)는 일종의 붕어빵 틀로, 클래스를 쓰면 객체(Object)..

IT 공부/백엔드(Back-end) 2022. 1. 14. 10:17

웹브라우저? 웹애플리케이션 웹브라우저 "위에서 돌아가는 웹사이트" ( 웹사이트 = 웹페이지 = 웹애플리케이션 ) 웹브라우저도 여러 기능을 가진다. (제목표시, 목록을 표시, 링크를 표시하는 기능) html언어의 문법에 따라, 웹애플리케이션에 필요한 기능들을 호출한다. (웹 애플리케이션의 제작원리) 웹브라우저에서 html로 필요한 기능을 호출하듯이, Node.js도 javascript를 이용해서, node.js runtime 기능중 필요한 것들을 호출한다. → node js application을 만들어내는 과정 브라우저가 서버 통신을 받는 방법 1. 웹 브라우저에 주소(url)을 입력해서, 사용자가 요청을 한다. 2. 웹서버는 요청에 따른 정보를 찾아서 응답해준다. Apache, nginx같은 서버와 관..

IT 공부/백엔드(Back-end) 2022. 1. 13. 16:22

node.js를 하려면 결국 자바스크립트를 잘해야 한다. 기본 문법을 정리하려는데, 정립이 잘 안된 부분만 기록해보기로 했다. *사진, 자료 출처: 구름 EDU 강의 할당 연산자 「+=, -=, *=, /=」 연산과 동시에 값을 변수에 할당 a += 1 ▶ a = a+1 조건 연산자 「(조건)? A:B」 조건이 참일 때 앞에 있는 A 수행, 거짓이면 뒤에 있는 B를 수행 → a가 실제로 b보다 큰 게 맞으므로, 앞에 있는 문장을 출력 javascrip의 데이터 타입 사실 자바스크립트는 자료형 개념이 없다. 다른 언어와 달리 int a, 이런 식으로 변수 선언할 때 자료형을 쓰지 않는다. (자바스크립트 기본 문법들 중에 다른 언어와 달리 혼란을 주는 것들이 종종 있다.) 변수 자체에 입력되는 값에 의해, ..

IT 공부/백엔드(Back-end) 2022. 1. 12. 15:22

Node.js의 특징 1. 싱글 스레드 2. 비동기 방식 3. 자바스크립트 기반 → 프론트엔드 뿐만 아니라, 백엔드 또한 자바스크립트로 작성한다. AJAX (Asynchronous JavaScript and XML) 최근 웹 애플리케이션들이 AJAX를 사용해서 동적인 웹을 만들고 있다. ex) 구글의 여러 서비스, 트위터, 페이스북, 네이버, 다음.. → AJAX 도입 이후, 자바스크립트의 사용성이 높아졌다. 웹 애플리케이션과 프레임워크 하이브리드 모바일 애플리케이션 개발을 위해 React Native, Ionic, PhoneGap과 같은 프레임워크들이 생겨났다. 1. 모바일 지원 자바스크립트로 모바일 애플리케이션 코드를 작성하면, 위의 framework들이 iOS와 Android에서 동시에 동작할 수 ..

IT 공부/백엔드(Back-end) 2022. 1. 10. 14:50