JS프로젝트

Json server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리로 REST API 서버의 기본적인 기능을 대부분 갖추고 있습니다. json server 는 실제 프로덕션에서는 사용되지 않으며, 주로 테스트나 프로토타입 용으로 사용을 합니다.http&

API 연동 구축된 REST API를 가지고 직접 API를 연동해보도록 하겠습니다. 먼저, 코드를 작성하기에 앞서 필요한 몇가지 개념을 확인해보겠습니다. 1. 기본 개념 1-1. Javacript fetch API란? 이번 프로젝트에서는 fetch API를 사용해

API연동- 데이터 입력하기 이번에는 submit버튼을 눌렀을 때 input태그 내의 값들이 API에 포스트 요청을 보내, 데이터를 생성하는 작업을 해보도록 하겠습니다. 1. form 이벤트 설정 form태그에서 submit버튼을 누르면 새로고침이 되는 것이 기본

체크박스에 체크가 되면, db.json파일의 completed가 true가 체크박스가 해제가 되는 경우 false가 되는 동작을 구현해보도록 하겠습니다.이 동작의 경우 fetch로 통신을 할 때 부분적으로 수정이 되도록 진행을 하게 될 것입니다.현재 $todos에 이벤

프로젝트 오픈시 초록박스는 display="none"으로 설정되어 있습니다. 텍스트를 수정하는 경우 파란박스 내용이 display="none"이 되고 초록박스 내용이 display="block"이 되도록 만드는 것이 이번 포스팅의 과제입니다.class="todo"에 클

삭제 버튼을 누르면 데이터가 삭제되게금 작성을 해보도록 하겠습니다.

pagination이란 데이터를 한 번에 다 보여줄 수 없는 경우 사용하는 기능입니다. 리소스를 분활하여 전달하여 설정된 기준으로 정렬한 데이터를 지정된 갯수만큼만 전달을 합니다.페이지네이션의 경우 대부분의 웹사이트 구축자나 CMS, 블로그 플랫폼에서 콘텐츠 구성을 위

1. To-do-list에 페이지네이션 구축하기 Json server의 Router기능을 이용해 페이지 네이션을 구축해볼 예정입니다. 페이지네이션 구축전 페이지네이션 구축후 1. 페이지네이션 설정값 >- currentPage: 1 totalCount: 53 (t

야구게임이란 네자리의 숫자를 맞추는 게임입니다. 주어진 기회는 10번이며 중복되는 숫자나 문자는 입력할 수 없습니다.플레이어가 4자리의 숫자를 입력 시, 정답인 숫자와 비교했을 때 정답에 포함되는 숫자가 있고 그 숫자의 자리수도 맞는 경우 STRIKE, 정답에 포함되는

드럼만들기 1. get, getAll 변수 만들기 2. soundRoot, drumSound 3. 유새배열객체를 배열로 받기 4. audio엘레멘트리 생성 5. 키보드 입력시 소리출력 설정 keycode 6. 마우스 클릭 시 소리출력 설정 7. 클릭하거나

prgressbar(진행막대)는 작업이 어느정도 진행이 되었는지를 보여줄 때 사용하는 컴포넌트입니다. 파일의 업/다운로드나 로딩이 오래걸리는 페이지를 여는 경우 작업이 완료되려면 어느정도 걸리는지 등 진행상태를 사용자가 시각적으로 볼 수 있게 도와줍니다.스크롤을 내리면

프로그레스 바(Progressbar) 구현 1. 기본 틀 생성 2. 스크롤 이벤트 생성 3. throttle 적용

프로그레스 바(Progressbar) 구현 1. 기본 틀 생성 2. 스크롤 이벤트 생성 3. throttle 적용

무한스크롤 1. 무한스크롤이란? 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, API가 호출되며 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식입니다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼

캐러셀(이미지슬라이더) 캐러셀이란? 캐러셀은 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용하는 기법입니다.

계산기 버튼은 button태그 보다는 사용자와의 상호작용이 더 강한 input태그를 사용해 구현합니다.input태그는 form태그와 같이 작성을 해야하니, form태그를 먼저 작성합니다.계산 출력부분은 inputtype="text" 버튼은 inputtype=butto

▶17분 안에 자바스크립트로 달력 만들기를 보며 부족한 개념을 정리한 내용입니다.Array()생성자는 새로운 Array객체를 생성합니다.new Array의 constructor에 하나의 숫자만 넣으면 배열의 크기로 인식하지만, 두 개 이상의 숫자를 전달하면 전달받은 값

버튼을 클릭하는 경우 transform: scale(1.1);스타일 속성을 제어하는 playing클래스를 추가하는 코드를 구현해보았다.문제는 일정 크기로 버튼의 크기가 커진 후 playing클래스가 그대로 남아있어 버튼의 크기 원래대로 돌아오지 않는 다는 점이다.이 문