Web Develop/Note 썸네일형 리스트형 [조코딩 웹 개발 5주 완성] 5주차 정리 - DB없이 게시판 만들기, CRUD DataBase(DB) 여러 사람이나 프로그램이 데이터를 쉽게 공유하기 위해 체계적으로 관리되는 데이터의 집합 변수나 리스트가 데이터베이스와 개념은 같지만 차이점은 변수나 리스트는 프로그램을 종료하면 없어져버리고 데이터베이스는 그렇지 않다는 것이다. DB없이 게시판 만들기 1. 리스트 변수 만들기 2. content라는 변수에 req.body 값을 넣어주고 comment 리스트에 push한다. (제대로 값이 넣어졌는지 확인을 위해 comments를 출력해본다.) 3. index page에 댓글 목록 보여주기 index.js(백엔드) ⬇ index.ejs(프론트엔드) 4. post 방식에 작성한 코드를 보면 응답을 hi라고 보내준다고 되어있는데 다시 get 방식 '/' 경로로 가도록해야 index page.. 더보기 [조코딩 웹 개발 5주 완성] 5주차 정리 - EJS, Form 태그 이용해서 Get/Post 요청 보내는 방법 EJS Embedded JavaScript templating HTML + JavaScript 1. vscode를 열고 새 폴더에 index.js 파일을 만든다. 2. npm 사용을 위해 터미널에 npm init을 입력한다. 3. (웹 백엔드 만들 때 사용하는 프레임워크인) express를 설치한다. https://www.npmjs.com/package/express express Fast, unopinionated, minimalist web framework. Latest version: 4.18.1, last published: 4 months ago. Start using express in your project by running `npm i express`. There are 64010 ot.. 더보기 [조코딩 웹 개발 5주 완성] 4주차 정리 - node.js, npm, Express Module이란? 별도의 코드를 작성하지 않아도 모듈을 다운로드하여서 쓸 수 있는 기능 단위 node.js에서 사용하는 모듈: npm node.js 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 왼쪽 버전으로 다운로드를 해준다. 정상적으로 설치된 모습이다. 이제 vscode를 켜서 새로운 파일 index.js를 만들어준다. 코드를 입력해준뒤 터미널 창을 켜서 node index.js(파일명)을 적어주면 코드가 node로 실행된다. 이까지 완료되면 node.js가 컴퓨터에 깔려서 컴퓨터에서 JavaScript를 실행할 수 있는 환경이 생기게.. 더보기 [조코딩 웹 개발 5주 완성] 3주차 정리 - API * 조코딩 웹 개발 5주 완성 강의를 듣고 개인 복습을 위해 정리한 글입니다. https://www.youtube.com/watch?v=n9BBDb4I4Vs API Application Programming Interface 앱이 프로그래밍 언어로 상호작용할 때의 규칙 Open API 하나의 웹 사이트에서 자신이 가진 기능을 이용할 수 있도록 공개한 API API 가이드 1. 요청 (request) 주소: https://dapi.kakao.com/v3/search/book전송 방식: GET보낼 것query 검색어(필수) sort 정렬 방식(선택) target 검색 대상(선택) * GET와 POST의 차이점 GET : 검색어를 주소창에 넣어서 보내는 것POST : 안 보이는 곳에 넣어서 보내는 것 2. 응.. 더보기 [조코딩 웹 개발 5주 완성] 3주차 정리 - 웹 조작, 이벤트 * 조코딩 웹 개발 5주 완성 강의를 듣고 개인 복습을 위해 정리한 글입니다. https://www.youtube.com/watch?v=n9BBDb4I4Vs JavaScript를 이용한 웹 조작 BOM(Browser Object Model) : 브라우저 조작 DOM(Document Object Model) : HTML/CSS 조작 + python으로도 웹 조작할 수 있음(아직 베타 버전) https://pyscript.net/ Pyscript.net Run Python code in your HTML. pyscript.net BOM(Browser Object Model) 브라우저에 있는 기능들을 JavaScript 코드를 이용해서 실행할 수 있음 DOM (Document Object Model) docu.. 더보기 [조코딩 웹 개발 5주 완성] 3주차 정리 - JavaScript * 조코딩 웹 개발 5주 완성 강의를 듣고 개인 복습을 위해 정리한 글입니다. https://www.youtube.com/watch?v=n9BBDb4I4Vs 변수 정의 값을 담는 상자 변수 만드는 법 var 변수명 let 변수명 const 변수명 함수 ex) f(x) = 2x + 3 정의 function myFunction(x) { let temp = 2 * x + 3; return temp; } 실행 myFunction(1) ex) f(x, y) = x + y 정의 function add(x, y) { let temp = x + y; return temp; } 실행 add(1, 2) 함수를 정의하는 또 다른 방법 조건문 if(money > 5000) { rideTaxi(); } else if (mone.. 더보기 [조코딩 웹 개발 5주 완성] 2주차 정리 - SEO 최적화 * 조코딩 웹 개발 5주 완성 강의를 듣고 개인 복습을 위해 정리한 글입니다. https://www.youtube.com/watch?v=lkh_S7TJNGw&t=8431s SEO (Search Engine Optimization) 검색 엔진 최적화 SEO가 잘 되어있을수록 검색을 했을 때 상위에 있게 된다. ◇ SEO 가이드 Google https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko Naver https://searchadvisor.naver.com/guide/seo-basic-intro SEO의 요소 외부 - 역링크(다른 사이트에서 언급한 것), 방문자 수, 기간 등 내부 - 시멘틱 마크업(의미가 분명한 태그), 메.. 더보기 [조코딩 웹 개발 5주 완성] 2주차 정리 - 검색 엔진에 내 사이트 등록 * 조코딩 웹 개발 5주 완성 강의를 듣고 개인 복습을 위해 정리한 글입니다. https://www.youtube.com/watch?v=lkh_S7TJNGw&t=8431s 검색 엔진에 내 사이트 등록 검색 엔진의 원리 네이버나 구글 등에는 크롤러 봇이 있는데, 이 봇이 모든 사이트들을 돌아다니면서 정보를 수집하고 분류를 하는 역할을 한다. 검색 엔진은 이 크롤러 봇이 가지고 온 정보를 바탕으로 내가 어떤 것을 검색했을 때 그것에 최적화된 사이트를 보여주는 것이다. 따라서 크롤러 봇이 내 사이트가 있음을 인식하도록 만들어야 한다. 크롤러 봇이 특정 사이트를 찾는 원리 1. robots.txt 파일을 읽어 이 사이트의 접근 허용(읽어도 되는지 안되는지) 정책에 따라 판단한다. ※ robots.txt : 크롤.. 더보기 이전 1 2 다음
