웹 개발 (8) 썸네일형 리스트형 JS (6) : To-Do List 추가 기능 구현(Google 검색) 이전 포스팅까지 진행했던 To-Do List에 추가 기능을 구현해 보려고 한다. 우선, Google 검색이 가능한 검색창을 추가해 보자. 구현 방법 Google에 접속하여 검색 기능을 사용하면, 검색 결과의 url은 다음과 같다. 구글의 일반적인 URL 형태를 유지하면서, /search?q= 뒤에 우리가 검색을 진행한 키워드 및 다른 값들이 따라오는 것을 볼 수 있다. 우리는 이 url을 이용하여 구글 검색 기능을 웹페이지에 추가할 것이다. HTML 수정 HTML 파일을 다음과 같이 수정해 보자 DOCTYPE html> Document Search in Google To-Do List 검색창을 만들어 주기 위해 form 태그와 input 태그를 사용하였다. 검색 기능을 담당하는 JS 파일을 따로 만들어 .. JS (5) : To-Do List 만들기 (3) 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 포스팅까지 우리는 local storage를 사용하여 우리의 To-Do 들을 저장하고 불러오는 기능을 구현하였다. 이번 포스팅에서는 이 To-Do 들을 삭제하는 기능을 구현해 보자. 현재, 우리는 삭제 버튼을 눌렀을 때 화면에서는 삭제가 적용된다. 하지만 local storage에서는 적용되지 않는다. 이제부터 local storage에서 데이터를 삭제하는 기능을 구현해 보자. toDos array 개선 우선, toDo.. JS (4) : To-Do List 만들기 (2) 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 포스팅까지 우리는 HTML 및 JS를 이용하여 To-Do List의 몇 가지 기능을 구현하였다. 이번 포스팅에서는 local storage를 사용하여 우리의 To-Do 들을 저장하는 기능을 구현해 보자. 우리는 추가한 To-Do들을 브라우저에 저장할 것이다. 이때, 사용할 수 있는 것이 바로 local storage이다. 우리는 to-do를 추가하면, 그 to-do를 local storage에 저장할 것이다. 그리고 페.. JS (3) : To-Do List 만들기(1) 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 포스팅까지 우리는 JS에 대한 기본적인 내용을 알아보았다. 이번 포스팅부터는 To-do List를 만들어 보면서 실제로 개발 진행 시 JS를 어떻게 사용하는지 설명할 예정이다. Setting 우선 HTML파일과 JS 파일을 만들고, 두 파일을 연결시켜 주자. HTML 파일 DOCTYPE html> Document hello world JS 파일 console.log('connected'); 결과 그 후, 우리에게 필요한.. JS (2) : Style 및 Event 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 JS 포스팅에서 HTML에서 어떤 것을 가져오는 방법에 대해 배웠다. 이번엔 특정 element를 가져와서 style을 조작하고 event를 처리하는 방법에 대해 알아보자. 우리가 가져온 element 내부를 확인해 보자. element 내부를 확인하고 싶다면 console.dir() 을 사용하면 된다. 이전 포스팅에서 사용한 HTML에서 다음과 같이 수정해 주었다. DOCTYPE html> Document Grab m.. JS (1) : JavaScript로 Browser 조작하기 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co JavaScript를 사용하는 이유? HTML과 상호작용 하기 위해서 JS를 사용한다. => HTML의 Element들을 JS를 통해 변경하고, 읽을 수 있다. JS로 HTML파일 조작하기 (with 'document') 자신의 HTML 파일을 열어 console에 document를 입력해 보자. 자신의 HTML 코드를 확인할 수 있다. 이처럼 document는 브라우저에 이미 존재하는 object이다. 우리는 이 objec.. Flask 웹 개발(2) : URL을 통해 다른 화면 불러오기. 이전 게시글 : https://j-d-e.tistory.com/5 Flask 웹 개발(1) : Flask를 이용해보자. Flask의 사용법을 익히기 위해 간단한 웹페이지를 Flask를 통해 만들어보자. Flask? Flask는 파이썬으로 작성된 웹 프레임워크다. 특별한 도구나 라이브러리가 필요없기 때문에 마이크로 프레임워크 j-d-e.tistory.com app.route()를 이용하여 URL을 통해 다른 내용을 불러오자. 이전에 route()의 기능에 대해 예상해 보았다. 이번 게시글에서는 app.route()를 이용해서 read라는 함수를 웹페이지 상에서 불러오는 과정을 기록할 것이다. 작성한 코드 from flask import Flask app = Flask(__name__) @app.route(.. Flask 웹 개발(1) : Flask를 이용해보자. Flask의 사용법을 익히기 위해 간단한 웹페이지를 Flask를 통해 만들어보자. Flask? Flask는 파이썬으로 작성된 웹 프레임워크다. 특별한 도구나 라이브러리가 필요없기 때문에 마이크로 프레임워크라고 부른다. 다른 상세한 내용들은 차차 Flask를 사용해보면서 알아가도록 하자! Flask 시작 방법? 우선, Flask 공식 문서로 들어가보도록 하자. https://flask.palletsprojects.com/en/2.0.x/ Welcome to Flask — Flask Documentation (2.0.x) flask.palletsprojects.com 우선 파이썬을 설치하고 플라스크를 설치해야 하는 것 같다. 파이썬은 이미 설치가 되어 있고, 플라스크를 vscode를 통해 설치하였다. vsc.. 이전 1 다음
