여태 만든 작업물을 하나의 포트폴리오 페이지로 만들어 본다.드디어 마지막 첼린지다. 그동안 작업했던 작업물을 하나의 페이지로 만들어 보았다. 14일동안 진행하려 했는데 생각보다 오래 걸렸다. 그래도 나와의 약속을 지켜서 뿌듯하다.깃허브배포링크자바스크립트 첼린지를 통해

자바스크립트를 활용하여 칸반 보드를 구현해본다.드래그 기능을 구현한다.칸반 보드 카드 추가 및 삭제 기능을 구현한다.setAttributeaddEventListener (drag속성)setAttribute는 속성 값을 설정하기 위해 사용한다. 상호작용은 무조건적인 문자

input 속성을 활용하여 이미지를 출력 해본다.자바스크립트를 활용하여 이미지 필터 기능을 구현해본다.필터값이 적용 된 이미지 저장 기능을 만들어 본다.input file 속성readAsDataURLcss filter 속성canvas.getContext("2d");ch

자바스크립트를 활용하여 실시간으로 사용자를 찾는 기능을 만들어 본다.innerHTMLincludesinnerHTML 은 innerText와 유사하지만 대표적으로 HTML 마크업을 하는데 차이가 있다. innerHTML 은 태그를 읽을수 있어 HTML마크업이 필요하면 i

자바스크립트는 너무나 관대해서 어떤 타입이 들어오든 그냥 넘어갈 때가 많다.const sum = (a,b) => a+b; 에서 a와 b는 숫자로 받을 생각이었지만, 여기에 문자열을 넘기면 그대로 적용이 됩니다. 또한 존재하지 않는 프로퍼티를 읽어 undefined를 출

무료 api사이트를 활용하여 api호출 연습겸 간단하게 만들어 보았다.자바스크립트와 무료 api를 활용하여 랜덤 음식사이트를 만들어본다.async, await이번 첼린지는 자바스크립트를 공부한 사람이라면 누구나 쉽게 만들어 볼 수 있는 미니 프로젝트이다. 이번 첼린지

좌우 버튼을 통해 이미지 슬라이드를 구현해보았다.자바스크립트를 활용하여 슬라이드를 구현해본다.querySelectorAll()이번 슬라이더를 구현하기 위한 핵심 키워드이다. querySelectorAll는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타

스크롤시 박스 애니메이션을 적용해 보았다.스크롤 애니메이션 구현하기getBoundingClientRect()window.innerHeightgetBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를

오늘은 메모앱을 만들어 보았다. 얼핏보면 투두리스트와 비슷하다. ✅ Goal CRUD 메모 앱을 구현하다. 로컬스토리지에 나의 메모를 저장한다. ✅ Keyword > localStorage.getItem Math.floor(Math.random()) do

첼린저 시작한지 벌써 반이 지났다.. 요즘 이것저것 하느라 신경을 많이 못썼다... 다시 조금씩 해야겠다.. 오늘은 정말 간단하게 api를 활용한 간단한 미니 프로젝트를 만들어 보았다. 무료 api를 활용하여 데이터를 출력해본다.jsonapihttps://ic

랜럼으로 색상들을 가져오고 그색상값을 css코드로 복사 할 수 있는 기능을 만들어 보았다.자바스크립트를 통해 컬러와 컬러값을 추출한다.복사기능을 구현한다.template literal Math.floor(Math.random()) document.execCommand(

오늘 만들 프로젝트는 아트보드이다! 마우스로 시각적인 즐거움을 느껴보고자 만들어 보았다.자바스크립트를 활용하여 아트보드 구현한다.이미지 저장기능 구현작업 이미지 리셋기능 구현html2canvas click event Math.floor(Math.random())위 3가

요즘 눈이 많이 와서 눈내리는 애니메이션 효과를 만들어보면 어떨까? 하는 마음에 만들어 보았다.자바스크립트를 활용하여 눈 내리는 효과를 구현한다.반복적으로 재생하는 오토 텍스트 기능을 구현한다.Math.random() setTimeout() @keyframe

✅ Goal 자바스크립트를 활용하여 다크모드 라이트모드 구현해본다. new Date()함수를 활용하여 시계를 구현해본다. ✅ Keyword > querySelector createElement appendChild setAttribute 이 4가지 키워드

오직 자바스크립트만을 통해 구글 사이트를 만들어 본다.엘리먼트를 생성하고 붙이고 자유롭게 사용해본다.태그 속상값을 조작해본다.반복문을 활용하여 구글 택스트 컬러를 넣어본다.querySelector createElement appendChild setAttributeht

이번 자바스크립트 첼린지 14는 2주동안 자바스크립트를 활용하여 14개의 미니프로젝트를 만들어보는 나와의 약속 프로젝트이다. 프로젝트를 진행하게 된 계기는 퇴사 후 방황하는 내 자신을 바로잡고 작은 기능 구현 하나에 기뻐하는 내 모습을 다시 느껴보고 싶어서이다. 또 한

HTTP( Hyper Text Transfer Protocol )는 1989년 팀 버너스 리에 의해 처음 설계 되었다.HTTP란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜 이다. 쉽게 말해 HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약

크로스 브라우징이란 어떤 환경에서 접근하여도 동등하게 작동하는 것을 말한다. 즉 웹 표준 기술을 채용하여 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 기술로 비슷하게 만들어 어떤 환경에서도 이상없이 작동되게 하는 웹페이지 제작 방법론이다.크로스 브라우징이 필요한

라이브러는 프로그래밍에서 필요한 기능들이 모여있는 코드의 묶음이다. 자주 사용되는 기능들을 객체나 함수등의 형태로 만들면, 필요할 때마다 호출해서 사용할 수 있다.사용하는데 규칙은 없지만 제공 해준 도구를 바탕으로 자유롭게 로직을 구현 할 수있다.🔴 대표적인 라이브러

프로젝트를 진행하면서 GET이나 POST로 요청 할 때 데이터를 받아오는데 지장이 없었어서 별차이가 없을거라 생각했습니다. 하지만 이 두 메서드는 확고한 차이가 있었고 RESTful한 API를 설계하기 위해선 HTTP메서드에 대한 명확한 이해가 필요했습니다. 그래서 이