본문 바로가기

전체 글

 (432)
AJAX Javascript에서 비동기 통신하는 방법 Javascript에서 비동기 http 통신을 하는 방법은 대표적으로 세 가지가 있다. AJAX Javascript의 AJAX jQuery의 AJAX axios fetch 이 중에서 많이 사용되는 AJAX와 axios에 대해알아보자. 1. AJAX 1.1 AJAX란? AJAX = Asynchronous Javascript And XML 비동기 자바스크립트와 XML란 의미로, 데이터를 이동하고 화면을 구성하는데 있어 갱신 없이 필요한 데이터를 서버로 보내고 응답을 가져오는 방법이다. AJAX 자체는 특정 기술을 말하는 게 아니다. 2005년 Jesse James Garrett이 처음 만들어낸 말로, HTML 혹은 XHTML, CSS, JavaScript, DOM..
[Node.js 교과서] 2. 알아두어야 할 자바스크립트 1. ➡ 새로운 문법들 2. ➡ 서버와 통신하기 위해 프론트엔드에서 사용하는 자바스크립트 코드들 1. ES2015+ ES2015(=ES6) 이상의 자바스크립트 문법을 알아야 한다. 노드 6버전부터 ES2015 문법을 사용할 수 있다. 1.1 const, let 보통 var로 변수를 선언하지만, 이제는 const와 let으로 대체한다. const: =상수. 한 번 값을 할당하면 다른 값으로 할당할 수 없다. (할당하려 하면 에러 발생함) let: =변수. 이들의 공통적인 특징인 블록 스코프(범위)를 알아보자. 블록 스코프 블록 스코프: if, while, for, function 등에서 볼 수 있는 중괄호({와 }사이) if (true) { var x = 3; } console.log(x);// 3 if ..
[Node.js 교과서] 1. 노드 시작하기 1. 핵심 개념 이해하기 전반적으로 노드로 서버를 실행하는 방법을 다루고, 일부는 서버 외의 자바스크립트 프로그램을 실행하는 런타임으로 사용하는 방법을 배운다. 따라서 서버와 런타임이 무엇인지 알아보자. 1.1 서버 노드는 서버 애플리케이션을 실행하는데 가장 많이 사용된다. 그럼 서버는 무엇일까? 서버 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램. (*클라이언트: 요청을 보내는 주체) 즉, 서버는 클라이언트의 요청에 대해 응답을 한다. 요청에 대한 응답으로서의 서버 ex1) 네이버 웹 사이트를 방문하는 경우 요청: 주소창에 네이버 웹 사이트 주소를 입력한다. 응답: 브라우저는 그 주소에 해당되는 네이버 컴퓨터의 위치를 파악하고, 그 컴퓨터로부터 웹 사이트 페이지를 받아와서 ..
jQuery란 무엇일까? jQuery 대부분 웹사이트가 사용하고 있는 라이브러리. 라이브러리일 뿐, 자바스크립트와 별개의 언어가 아니다! ('제이쿼리를 자바스크립트로 바꿔주세요'와 같은 말은 잘못된 것임). 특징 단점 무겁다. 제이쿼리 없이 순수 자바스크립트로 작성한 코드보다 속도가 10~100배 정도 더 느리다. 모듈화가 되어 있지 않다. 따라서 React, Angular를 사용하는 경우 제이쿼리를 사용하기 어렵다. 장점 코드가 간결해지고 가독성이 높아진다. document.getElementById('id'); 보다 $('#id') 라고 작성하는 게 훨씬 좋으니까! IE와 기타 브라우저에 대한 지원이 좋다. 따라서 하나의 코드로 여러 브라우저에서 다 호환이 된다. 플러그인을 지원하여 원하는 기능을 추가할 수도 있다. 애니메이..
window 객체 & BOM window 객체 브라우저의 요소들과 자바스크립트 엔진, 모든 전역변수를 담고 있는 객체. window 객체 아래, 대표적으로 screen, location, history, document 같은 객체들이 자주 쓰인다. 메소드는 parseInt, isNaN 같은 게 있다. window는 전역객체(글로벌객체)이므로 모든 객체를 다 포함하고 있기 때문에 사용할 때 window를 그냥 생략해도 된다. 하지만 다른 함수와 헷갈릴 수 있기 때문에 window를 붙여주는 것도 괜찮다. 생략하냐 마냐는 각자의 스타일에 맡기면 된다. window.close() 현재 창을 닫는다. window는 생략가능하기 때문에 close(); 라고 작성해도 된다. window.open() 새 창을 연다. 첫 번째 인자: 페이지 주소..
신년운세 패키지 - 2일차 01. 운세페이지 만들기 만들 것 구경하기 신년운세 by 르탄! 2021년 띠 별 운세를 알려드립니다 new-year.spartacodingclub.kr 1. result.html 만들기 위의 운세 페이지를 result.html에 작성한다. 우선 index.html의 배경과 같은 기본 속성을 동일하게 작성한다. 2. index.html과 result.html 연결하기 쥐 02. 르탄이 만들기 만들 것 확인하기 코드 가져와서 르탄이 만들기 이전에 index.html에서 만든 르탄이들을 데려오면 된다. 쥐 이전과 달리 하이퍼링크 기능이 필요없으므로, 로 변경한다. 그리고 이 페이지에 르탄이가 하나 뿐이므로 class명도 변경한다. 쥐 index.html의 .rtans > a의 css도 긁어오자. .rtan ..
신년운세 패키지 - 1일차 강의 자료 [스파르타] 신년운세 패키지 슬랙 가입 가이드 www.notion.so 수업 목표 서버와 클라이언트 역할에 대해 이해한다. HTML, CSS의 기초 지식을 이해한다. 신년운세 메인페이지를 완성한다! 01. 스파르타 튜토리얼 만들게 될 것 신년운세 by 르탄! 2021년 띠 별 운세를 알려드립니다 new-year.spartacodingclub.kr 02. 설치 프로그램 1) Chrome Chrome 웹브라우저 더욱 스마트해진 Google로 더 심플하고 안전하고 빠르게. www.google.com 2) Visual Studio Code (VS Code) Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and ..
[웹 UI 개발 코칭스터디 1기] 2. 웹 접근성의 이해 1. 웹 접근성의 이해 접근성이란? 사용자가 어떤 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도. 웹에서의 접근성이란? 웹에 잘 접근할 수 있는지 없는지의 정도. 어떠한 사용자(장애인, 노인 등)가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것. 즉, 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것을 말한다. 그러므로 개발자는 모든 사용자와 모든 기술환경을 고려해야 한다. 웹 접근성을 지켜야 하는 이유 1. 장애인 차별 금지법(장차법) 2013년 4월 11일부터 장애인들도 비장애인과 동등하게 전자정보 및 비전자정보를 사용할 수 있도록 해야 한다는 내용이 포함되어 있다. 따라서 법으로 정해져 있기 때문에 웹 접근성을 지..
반응형

티스토리툴바