내맘대로 개발개발

이 글은 AJAX를 다룬 글과 함께 보면 좋을 듯하다. 원래 AJAX를 다루며 한 글에 작성하려했으나, 최근 CORS에러를 직접 겪고 해결방법을 찾아보다가 글을 따로 분리했다. 1. REST API ▪ RESTful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스 ▪ REST(Representational State Transfer)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처 ▪ 작동방식 1) 클라이언트가 서버에 요청 전송 2) 서버가 클라이언트 인증 후 클라이언트에게 해당 요청 수행할 수 있는 권한 있나 확인 3) 서버가 요청 수신 후 내부적으로 처리 4) 서버가 클라이언트에 응답 반환(응답 요청 성공여부, 상태 코드 등 포함) ➢ 응답 ..

1. AJAX (Asynchronous Javascript And XML) 정의 ➢ JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고 받는 기술 ▪ 자바스크립트를 통해서 서버에 데이터를 요청하는 것 ➢ 특정화면만 바꾸고 싶을 때 사용. ▪ EX) 네이버 로그인 할 때 로그인 부분만 변경됨. 페북 댓글 작성시 누가 작성중입니다. 라는 문구가 나온다. ➢ 전체 웹페이지를 로드할 필요없이 일부화면만 갱신해서 웹페이지 속도 향상 ➢ 클라이언트에서 서버로 데이터를 요청하고 결과를 돌려받을 수 있다. 그동안 브라우저가 멈추지 않는다. 2. 클라이언트와 서버 1) 클라이언트 ➢ 서버에서 정보를 가져와 사용자에게 보여줄 수 있는 소프트웨어. ▪ 예) 웹브라우저, App 2) 서버 ➢ ..

1. jQuery selector ※제이쿼리 객체로 만들기 $사용 => $(this) (1) $("p") ▪ p 태그들 선택 (2) $('input') ▪ input인 태그 전부 가리킴 jQuery.fn.init(7) [input#all, input, input, input, input, input, input, prevObject: jQuery.fn.init(1)] (3) $('input:checkbox‘) ▪ input 태그 중 checkbox 전부 가리킴 jQuery.fn.init(8) [input#all, input, input, input, input, input, input, input#log_button, prevObject: jQuery.fn.init(1)] (4) $('input:chec..

1. jQuery란? ▪ 자바스크립트 라이브러리 ▪ Element를 쉽게 찾고 조작가능 ▪ 뛰어난 호환성 ✓ 거의 모든 웹브라우저에 적용가능 ▪ 하락추세라고는 하나, 2020년 기준 점유율 75% ▪ jQuery 시작은 $ → jQuery객체 생성을 위해 $를 사용한다. 2. CDN (Contents Delivery Network) ▪ 자료를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템 ▪ 데이터 저장소를 복사한 복제본이 여러군데에 있는 것 3. jQuery cdn 종류 ▪ uncompressed, minified, slim, slim minified ▪ uncompressed ✓ 코드가 그대로 출력, 개발할 때 편리 ✓ 용량 288kb ▪ slim minifi..

1. Java Script 셀렉터 종류 ➢요소의 ID명 ▪ document.getElementById(“”); ➢요소의 class명 ▪ document.getElementsByClassName(“”); ➢요소의 tag 명 ▪ document.getElementsByTagName(“”); ➢ document.querySelector(‘’); ▪ 맨 처음 발견한 것만 반환 ➢ document.querySelectorAll(‘’); ▪ 일치하는 것 모두 반환 2. CSS 조작 ➢innerTEXT ▪ 태그도 문자자체로 인식 ▪ 문자그대로 로 입력 ➢innerHTML ▪ 태그를 변경할 때사용 ▪ 입력하면 줄바꿈 ➢ CSS조작 예시 ▪ addEventListener ✓ 특정 행동시 함수 발동 ✓ 예시에서는 butt..

JavaScript관련 기본개념 컴파일 소스코드를 기계가 이해할 수 있도록 기계어로 번역하는 과정 모든 언어는 컴파일 과정을 거치게 되어 있다. 인터프리터 언어 (interpreter) 실시간으로 실행되는 언어 → 컴파일 언어보다 빠름. 단순하기 때문 (컴파일 언어는 해석하는 컴파일러 과정필요) 예) Javascript , PHP , ASP , Python 반대: 컴파일 언어 등등.. 예) C, C++ , Java , Go DOM Document Object Model 문서 객체 모델 화면의 엘리먼트를 나타내는 것. log 프로그램 흐름 확인위해 남기는 기록 함수 function method, procedure등으로도 불림. 특정 동작을 수행하는 코드 native Java Script 네이티브 자바스크립..

1. 목표 ‘To-Do List 웹사이트’의 footer contents 수직 정렬. 2. 방법 footer 수직정렬 준비물 : div 2개 그리고 display:flex; + α 수직정렬 방법이 여러 가지 있지만 가장 쉬운방법은 flex를 이용하는 것이다. 이 방법은 footer에 한정된 방법이 아니라 css의 다른 콘텐츠에서도 활용할 수 있다. 내 경우에는 footer를 대상으로 하기에 footer영역에서만 사용했다. div를 두 개 생성하고 첫 번째 div(바깥쪽 div) 안의 두 번째 div(안쪽 div)를 중앙정렬 하고, 안쪽에 있는 div를 또 중앙정렬하면 파워 중앙정렬이 된다. 1) display:flex 와 안쪽 div에 margin:auto; 즉, 겉에 있는 첫 번째 div에 flex를 ..

1. 목표 ‘To-Do List 웹사이트’의 footer를 contents 길이와 관계없이 가장 하단에 고정하기 2. 방법 1) footer가 div class=“wrapper” 안에 포함되었을 때 : position:fixed; 이용 ㆍposition:fixed; 는 contents 내용이 길든 짧든 무조건 footer를 하단에 위치하게 한다. ㆍ문제점: contents 길이가 짧을 때는 footer가 하단에 고정되어있는 것처럼 보이지만, 내용이 길어져 스크롤이 생기면 footer가 contents 위로 올라오며 contents보다 footer가 강조된다. See the Pen footer- position:fixed; by hi-iamim2 (@hi-iamim2) on CodePen. contents..

현재 내 티스토리 스킨은 기본 스킨인 Odyssey다. 기본 스킨 중에 그나마 이게 마음에 들어서 사용중이다. 티스토리 운영하면서 군데군데 고쳐갈 예정이다. 1. 문제현상 Odyssey 스킨은 글 본문 영역을 너무 좁게 설정해놔서 글 제목이 길면 글씨가 잘린다. 이 글은 티스토리 기본 스킨인 Odyssey 에서 글 제목이 잘리는 현상을 해결하기 위한 설정법을 적어놨다. 되게 간단하다. 스킨 편집에서 CSS 부분의 값만 바꿔주면 된다. .article-header .box-meta { position: absolute; bottom: 56px; width: 100%; max-width: 780px; z-index: 2; } .article-header .box-meta p { margin: 0; } .ar..