웹 프로그래밍
-
AWS EC2 이용해보기웹 프로그래밍/BE(Back-End) 2021. 6. 30. 22:34
오늘은 내가 만든 간단한 웹 페이지를 서버에 배포하여 다른 사람들이 사용할 수 있는 사이트로 만들도록 AWS EC2를 이용해보았다. AWS는 처음 AWS에 가입한 날부터 12개월 동안 무료로 사용 가능한 프리 티어로 서버를 무료로 사용을 할 수 있다. 먼저, AWS 회원가입을 해서 2~3일 뒤 회원승인을 받아 오늘 AWS EC2를 사용하기 위해 접속했다. 일단은 배포를 맡기려는 서버는 리눅스 OS를 선택했다. (리눅스는 오픈소스 운영체제로, 우리 주변 대부분의 서비스가 리눅스로 서버를 운영하고 있다.) https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2에 접속하면 아래와 같은 화면을 볼 수 있다. 1. 여기서, 인..
-
[에러 수정] Uncaught TypeError: $.ajax is not a function웹 프로그래밍/FE(Front-End) 2021. 6. 29. 20:18
오늘은 JQuery를 이용하여 간단한 웹 페이지를 만들던 중 처음보는 Error가 나와서 해결방법에 대해 정리해보려고한다. 먼저, 문제가 발생한 코드를 봐보자. (문제가 발생한 요인과 관계없는 코드는 생략) ajax를 쓰기위해 Jquery라이브러리는 에 선언을 해주었고 ajax API를 문제없이 쓴 것으로 보인다. 일단은 ajax를 선언한 코드 내에서는 문제가 될만한 점이 보이지 않는다. 그러면 어디가 잘못된 것일까? 정답은 Jquery 라이브러리를 불러오는 부분이 잘못된 것이다. 무엇이 JQuery라이브러리가 ajax를 인식하지 못하게 한 것일까? 그것은 jquery-3.5.1.slim.min.js에서 .slim이라는 문구가 문제를 일으킨 것이다. 더보기 jquery-3.5.1.slim.min.js을 ..
-
Web Crowling & Web Scraping웹 프로그래밍/BE(Back-End) 2021. 6. 28. 17:24
오늘 배운 것 중에 흥미로운 내용이여서 정리해보려고 한다. Web Crowling과 Web Scraping이라는 말이 있는데 둘을 혼용해서 쓰는 경우가 있거나 그냥 Web Crowling이라는 말만 있는지 알고 있던 사람들도 있을 것이다. 나 또한 오늘 공부하기 전까지 Web Crowling만 알고 있었고 내가 했던 웹 페이지에서 자동으로 정보를 긁어와서 저장하는 것이 web crowling인 줄 알고 있었다. 오늘 이 글을 쓰면서 둘의 차이점을 명확히 알고 다음부터는 유념해서 쓰도록 하려고 한다. 1. Web Crowling이란? Web Crowling이란 web indexing의 목적으로 WWW(World Wide Web)를 시스템적으로 검색을 하는 자동 기능 작업을 말한다. web indexing이..
-
JQuery 접해보기웹 프로그래밍/FE(Front-End) 2021. 6. 27. 22:34
오늘은 JQuery를 처음으로 접해봤다. 그 전에는 모든 기능은 JavaScript로만 구현했는데 JQuery를 알게되니까 너무 편하다는 것을 느끼게 됐다. 그러면 지금부터 JQuery에 대해 알아보자. JQuery는 JavaScript를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다. JQuery를 이용하면 DOM과 이벤트 처리를 손쉽게 구현할 수 있고 Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다. 그러면 코드를 보며 JQuery가 기존에 JavaScript만을 써서 코드를 짠 것보다 얼마나 더 간편한지 알아보자. HTML에서 어떠한 요소를 숨기는 기능을 구현하는 것을 생각해보자. JavaScript로만 코드를 짠다면 아래와 같다...
-
HTML 속성 제대로 알고 사용하기!!(lang, rel, href, role)웹 프로그래밍/FE(Front-End) 2021. 6. 26. 21:52
오늘은 HTML과 CSS를 공부하면서 평소에는 그냥 넘어갔지만 오늘은 유독 궁금한 부분이 생겨서 찾아보며 안 내용을 정리하려고 한다. HTML을 작성하면서 html부터 head, body, div, a, p 등 수 많은 태그를 사용한다. 이러한 태그에 대한 설명은 강의나 공식문서에서 쉽게 접할 수 있다. 하지만, 태그 안에서 쓰는 속성은 대표적으로 쓰이는 id, class를 제외하면 기능을 모르고 쓰는 경우가 많다. 그래서 기본적인 html에서 많이 본 속성이지만 기능을 모르고 넘어간 것들에 대해 알아보자. - lang 먼저, html의 가장 위에서 선언되는 html태그의 속성인 lang이다. lang은 우리가 쓰고 있는 html 내의 텍스트가 어떠한 언어로 되어있는지를 알려주는 속성이다. 그러면, 그냥..
-
AJAX 파헤치기 (add. 동기/비동기)웹 프로그래밍/FE(Front-End) 2021. 6. 21. 19:06
AJAX는 Asynchronous Javascript And Xml의 약어로 UX(User Experience)와 관련이 많은 기술이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 페이지의 새로고침없이 서버 측의 데이터를 별도로 요청해서 화면에 그려주는 기술이다. JavaScript에서 사용하는 AJAX는 다음과 같은 문제를 해결할 수 있다. 우리가 웹 페이지에 접속하여 순차적으로 렌더링되다가 중간에 서버와의 통신을 위한 코드가 있다면 서버에게 요청을 보내고 응답을 받는 순간까지 잠시 렌더링이 멈춰있을 것이다. 사용자 입장에서는 중간에 통신이 이루어진다는 것은 관심도 없고 인지도 못하고 있을텐데 로딩이 느리다고 생각할 것이다. 이러한 점을 해결하기 위해 JavaScript에서는 화면..
-
DOM Node 조작해보기(DOM API)웹 프로그래밍/FE(Front-End) 2021. 6. 19. 23:40
오늘은 DOM API를 이용하여 웹 페이지에서 보여지는 요소를 옮기거나 삭제하거나 복사하는 등 여러 조작을 해보았다. 이전에 배운 querySelector(), querySelectorAll()과 같은 document에서 요소의 이름이나 class, id를 매개변수로 넣어 원하는 요소를 얻는 메소드 이외에 다양한 DOM API를 접해보았다. https://www.w3schools.com/jsref/dom_obj_all.asp HTML DOM Element Objects The HTML DOM Element Object The Element Object In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE,..
-
[JS] Spread Operator 알아보기웹 프로그래밍/FE(Front-End) 2021. 6. 16. 18:21
오늘은 Front-End파트에서 Java Script의 배열을 배우면서 indexOf, join, concat와 같은 메소드를 배웠다. 그 중, 배열을 합치는 메서드인 concat를 배우면서 Spread OPerator라는 단어를 들었다. Spread Operator단어만 언급하고 넘어가서 무엇을 의미하는지 궁금해 찾아보게 되었고 오늘 정리할 주제로 선정하게 됐다. 우리는 배열을 합치고자 할 때 아래의 코드처럼 concat 메소드를 사용한다. var arr1 = [1,2,3] var arr2 = [] arr2 = arr1.concat(1,2); //결과: arr2 = [1,2,3,1,2] 하지만 Spread Operator를 쓰게 되면 아래의 코드로 구현할 수 있다. var arr1 = [1,2,3] v..