SeaPlus

JQuery를 사용해서 구현 🥱 Sticky를 사용한 고정 position: sticky 속성을 적용한 박스는 평소에 문서 안에서 position : static 과 같이 일반적인 상태지만 스크롤의 위치가 임계값에 이르면 position : fixed와 같이 박스를 지정한 top, bottom, left,right 값에 맞게 고정된다. fixed 는 뷰포트를 기준으로 박스를 고정하지만 sticky는 자신을 감싸고 있는 부모의 scroll박스 를 기준으로 고정한다. [HTML] It's as easy as it sounds. [CSS] body { box-sizing: border-box; margin: 0; padding: 0; } .card-background { margin-top: 800px; ma..

🔰 AJAX(Asynchronous JavaScript and XML) 비동기식 자바스크립트 와 XML 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환 할 수 있게 하는 기법 AJAX를 이용해서 전송가능한 데이터는 XML, TEXT, HTML, JSON 브라우저가 가지고 있는 XMLHttpRequest 객체 를 사용해 전체 페이지를 새로 로드하는게 아닌 일부만을 로드하는 기법 👀 XMLHttpRequest(XHR) 객체 현재 대부분의 모던한 브라우저는 XHR객체를 내장하고 있다. 이 객체를 사용하면 웹페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을수 있습니다. 즉 AJAX 비동기 통신을 위해서XHR 객체를 사용해 서버에 데이터를 요청(Request..

서버: 접속자가 API를 통해 요청을 하면 데이터를 갖다줌 접속자의 요청 : GET, POST, PUT, DELETE API: 애플리케이션 프로그래밍 인터페이스 의 약자로 서로다른 두 애플리케이션을 프로그래밍 하기위한 프로토콜, 규약,형식 등으로 볼수 있다. AJAX: 서버에다가 GET,POST 요청을 할 수 있게 도와주는데 새로고침 없이 요청할 수 있음 JQuery를 사용해서 ajax를 간단하게 구현했다. [HTML} model : brand : price : Go somewhere 상품보여주기 [Javascript] // 버튼을 클릭하면 ajax를 통한 요청이 시작된다. $("#gethello").on("click", function () { // 지정한 url 에 GET요청을 하는 코드 // 이렇게..

DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위해 브라우저에 내장되어 있는 API 입니다. 기존에 자바스크립트는 HTML 조작에 특화된 언어라고 알고만 있었는데 과연 어떻게 자바스크립트는 HTML를 조작할 수 있는지 생각해 본 적이 없었다. 기본적으로 자바스크립트 문법에는 , 와 같은 태그요소들을 해석하는 문법이 없다. 따라서 자바스크립트가 HTML을 해석하고 조작하기위해서 자바르크립트가 읽을 수 있게 Object 형태로 정리한게 DOM 입니다. EX) 안녕하세요 - 위와 같은 HTML 문서가 있을때 브라우저에서 이 HTML문서를 읽고 DOM을 만들게 됩니다. var document = { div태그 : { style : {color : 'red', width :..

데이터바인딩이란? 화면에보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다. - 1. 사용자가 입력한 정보를 얻어옴 - 2. 찾아온 데이터를 갱신 클라이언트 사이드 랜더링 이란? 웹서비스 개발방식은 두가지가 있습니다 서버사이드 랜더링, 클라이언트 사이드 랜더링 서버사이드 랜더링 1. 서버에서 HTML 파일을 미리 다 완성해서 보내주는 방법 클라이언트사이드 랜더링 2. 서버에서 텅빈 HTML 파일 + 중요데이터만 보내고 HTML에 데이터바인딩을 한뒤 완성하는건 클라이언스 사이드에서 자바스크립트로 하는 방법 오늘날은 서버사이드에서 모든 데이터를 처리하면 무겁고 처리 속도또한 느려지기 때문에 반드시 서버사이드에서 처리해야할 중요하고 보안성이 필요한 데이터를 제외하고는 클라이언트 사이드 랜더링으..

form 에서 상품들을 선택하면 그에 맞게 사이즈 option들이 변하는 UI 이다. 소핑몰 웹사이트에서 흔하게 볼수 있는 매우 기본적인 UI로, 하드코딩 방법과 동적프로그래밍 방법으로 구현해봤다. (JQuery 사용!) 하드코딩이란? - 상수나 변수에 들어가는 값(문자열, 정수 등)을 literal이라고 하는데, 이 값을 소스코드에 직접 쓰는 게 하드코딩 - 반대로, 소스코드에 직접 쓰지 않고 데이터를 외부 파일로 빼서 따로 관리하는 것을 '로딩'이라고 한다. 장점 - 육안으로 값을 직접 확인할수있다. - 로딩절차 없이 다이렉트로 읽을수 있어 속도가 비교적 빠르다. 단점 - 자주바뀌는 데이터를 하드코딩하면 계속해서 수정하고 ,재컴파일, 재배포 해야한다. - 유지보수, 운용이 어렵게 된다. [HTML] ..

라이브러리 링크 차트 라이브러리 chart.js( https://www.chartjs.org/docs/latest/getting-started/ ) Amchart.js ( https://www.amcharts.com/ ) 캐러셀 라이브러리 Slick( https://kenwheeler.github.io/slick/ ) SCROLL 라이브러리 Scroll Reveal - ( https://scrollrevealjs.org/ ) Animate On Scroll - ( https://michalsnik.github.io/aos/ ) 페이지 라이브러리 https://github.com/alvarotrigo/fullpage.js → 예시사이트 ( https://alvarotrigo.com/fullPage/ko/#..

[1. transition VS animate] jQuery의 animate()함수로 애니메이션을 주게 되면 매우 느리고 천천히 동작합니다. 컴퓨터가 좋아서 빠르게 동작하는 것 같아 보이는 것이지 애니메이션이 조금만 복잡하거나 많으면 금방 버벅입니다. 특히 여러분이 자바스크립트로 많은 일을 해야하는 SPA 같은 사이트를 만든다면 애니메이션 자바스크립트로 넣으면 안됩니다. 그러니 자바스크립트가 할 일이 많아도 빠르게 동작하는 css transition을 씁시다. (혹은 애니메이션 전용 라이브러리 velocity.js 등을 따로 설치해서 쓰시면 실행 속도 걱정은 해결됩니다.) [오늘날 애니메이션 웹페이지 동작 만드는 순서] 1. 애니메이션 효과가 적용될 html 속성 만들기 2. 자바스크립트로 트리거 하기 ..

JQuery란? javascript를 사용함에 있어 좀더 편리하도록 하는 오픈소스 라이브러리 입니다. 하지만 인터넷 브라우저가 IE가 대부분 이던 과거와는 달리 오늘날은 chrom과 같은 브라우저 에서 더 우수한 렌더링 엔진을 탑재하였고 빠른 버전 업그레이드를 위해 웹 표준을 신속하게 반영하였습니다. 그 결과 제이쿼리와 같은 무거운 라이브러리를 쓰지 않고도 양질의 웹 어플리케이션을 구현할수 있게 되었습니다. 하지만 개발자들 사이에서 위상이 예전과 같지 않다고 해도 여전히 사용률은 높고 기존에 jQuery로 작성된 웹 어플리케이션 또한 많은 상황 입니다. 따라서 제이쿼리의 기초적인 문법과 축약함수들을 알아둘 필요는 있다고 생각합니다. [제이쿼리 기초문법] 1. 셀렉터 //바닐라 js document.get..

[JSON] - JSON은 Javascript 객체 문법을 따르는 문자 기반의 구조화된 데이터 포맷 입니다. (javascript가 아니더라도 읽고 쓸수는 있다.) - 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다. (서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우) - 개별 JSON객체를 .json확장자를 가진 단순 텍스트 파일에 저장할 수 있습니다. 문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 합니다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 합니다. 더보기 네이티브 객체 네이티브객체는 호스트 환경 아니라 ECMAScript의 스펙에 의해서 정의된 객체입니다. NOTE 표준 네이티..