노트/항해9944 웹개발 - AJAX 지금의 기록이 나중엔 문제 해결의 실마리가 된다 당장 모든것을 알지 못해도 괜찮다 분명히 언젠가 쓸 일이 생긴다 Ajax는 뭔가? Ajax는 JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 전체 페이지를 새로 고침하지 않고도 페이지의 일부 데이터를 로드하는 기법이다. 즉 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다. Jquery와의 시너지 일반 Javascript만으로 Ajax를 하게 되면 코딩량이 많아지고 브라우저별로 구현방법이 다른 단점이 있는데, jquery를 이용하면 더 적은 코딩량으로 대부분의 브라우저에서 같은 동작을 할 수 있게 .. 2021. 11. 28. 서버와 클라이언트 통신 - GET요청 서버와 클라이언트 통신 - GET요청 HTTP HTTP는 웹상에서 클라이언트와 서버 간에 요청/응답으로 데이터를 주고 받을 수 있는 프로토콜입니다. 클라이언트가 HTTP 프로토콜을 통해 서버에게 요청을 보내면 서버는 요청에 맞는 응답을 클라이언트에게 전송합니다. 이 때, HTTP 요청에 포함되는 HTTP 메소드는 클라이언트가 웹 서버에게 사용자 요청의 목적이나 종류를 알리는 수단이다. 대표적으로 GET과 POST이 있다. GET GET은 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송합니다. URL의 끝에 ?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터를 쿼리스트링이라고 부릅니다. 만약, 요청 파라미터가 여러 개이면 &로 연결합니다. 쿼리스트링을 사용하게 되면 URL에.. 2021. 11. 28. pyCharm과 VScode 사이에서 강의에서는 PyCharm을 이용하여 웹개발을 했다. 처음 접해본 개발툴이 VScode였어서 나는 pyCharm이 조금 불편했다. 공부도 해볼겸, 강의로는 PyCharm을 나 스스로 공부하는 건 VScode로 개발공부를 하는 중이다 무작정 따라하면서 해보긴 했지만 pyCharm과 VScode의 개발 환경은 다른점이 많았고...... 에러도 많았다! 으하 그만큼 구글링도 많이 하게되고 새롭게 알게 된 부분도 많았다 까먹기 전에 내가 찾아본 자료들과 공부한 내용을 정리해야겠다 2021. 11. 27. 웹개발 2 처음 웹개발 강의를 듣기 시작했을 때의 목표는 일단 몰라도 처음부터 끝까지 들어보자였다. 하나의 웹페이지가 만들어지기까지 어떤 과정을 거져야 하는지 알고싶었기 때문이다. 4주차까지 듣고나서야 이 부분은 왜 이렇게 되는거지? 하는 의문이 생겼다 무작정 따라하는 것에서 한 발자국 나가서 스스로에게 질문을 하며 검색을 하기 시작했다 그 첫 부분이 서버-클라이언트 통신 부분이었다 '아! 개발자란 이런거구나!' 라고 생각했던 나의 생각이 깨지는 순간이었다. '나는 개발자의 ㄱ도 알지 못했던 거구나' 라는 생각이 절로 든다 물론! 내가 '알고 있다'는 생각은 전혀 하지 않는다 매일 공부를 하면 할수록, 뭔가를 만들면 만들수록 공부해야 할 것들이 넘쳐나고 있기 때문이다 HTML CSS JavaScript 는 좀 친숙.. 2021. 11. 26. 웹개발2 - JQuery QUIZ 사용했던 코드를 복붙해서 사용하면 된다고 하지만 어디에 무엇이 쓰이는지 알지 못하면 코드가 있어도 무용지물이다 만들고 만들고 만들어봐야 내가 진짜 할 수 있는게 된다고 생각한다 1번째 QUIZ 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 function q1() { let input = $('#input-q1').val() // 1. input-q1의 입력값을 가져온다. if (input == ""){ // 2. 만약 입력값이 빈칸이면 alert('입력하세요'); // 3. alert('입력하세요!') 띄우기 }else{ // 4.입력값이 빈칸이 아니라면 alert(input).. 2021. 11. 26. 웹개발2 - JQuery JQuery 미리 작성된 자바스크립트 코드. 아. 완전 간단해. 뭐든 깊이 들어가면 어렵지만 일단 지금은 간단함. JQuery를 임포트해야 사용할 수 있다 1_ input값 가져오기 콘솔에서 확인해봄 input값을 바로 가져오거나 수정할 수 있다 => $(‘해당ID값’) . val() 2_ text값 바꾸기 콘솔에서 확인해봄 text를 바꿀 때는 => $(‘해당ID값’) .text를 사용 3_ 해당id값 보였다가 사라지기 4_ 해당id의 css값 확인하기 , 바꾸기 1_ css style값을 확인할 수 도 있고 2_ css값을 바꿀 수도 있다 5_ html 코드 붙이기 temp_html 변수에 `백틱으로 html태그`를 저장하고 $('html추가할부분 id').append(temp_html) 코드를 작성.. 2021. 11. 26. 부트스트랩 신기한 것!!! 내가 아무리 머리를 짜고 시간과 공을 들여도 부트스트랩 코드 하나를 이길 수 없었다!!!!!!!!!!!!!!!! 내가 만드는 코드와 부트스트랩을 사용해 만드는 코드를 비교해봤을때, 시간과 노력의 모든 면에서 .......... 부트스트랩이 훨~씬 우위였다. ㅜㅜ 웹개발 강의를 들으면서 부트스트랩을 사용해서 뭔가를 만들어보고싶어서 쉬운 페이지 하나를 골라서 따라만들기를 해봤다. 왼쪽은 Bootstrap - Navs 중 하나이다. 이것을 활용하여 오른쪽의 밀리의서재 페이지를 만들어봤다! 첫번째 부트스트랩 안에 다른 부트스크랩 코드를 넣어서 만들었다! 할 수 있을까 했는데 됐다 !!!!!!!!!! 기본적인 classname은 건들면 지정해놓은 style이 깨지기 때문에 적당한 선에서 조절해주었고 내가 만든 c.. 2021. 11. 26. '한번 해볼까?'의 마법 무작정 시작했던 개발공부 하다보니 재미있어 계속 하고 싶어진다 머리 쥐어짜면서 고민하다보면 언젠가는 답이 나온다. 내가 원하는 결과가 나오길 바라며 오늘도 코드를 썼다 지웠다 고치기를 반복한다 웹개발 강의는 1강부터 순서대로 듣긴 했지만 강의를 들으면서 계속 정리할 것이기 때문에 블로그의 내용은 점점 늘어날 것이다! 오늘도 개발자의 ㄱ을 알아가는 하루가 되길 2021. 11. 25. 이전 1 2 3 4 5 다음
