개발일지, 개인 또는 단체 포트폴리오 등
위와 같은 경우처럼 한글로 된 특정 단어 뒤에 들어갈 조사를 덧붙힐 때 사용할 수 있는 예제입니다. 맨 마지막 단어의 종성을 알아낸 뒤, 특정 공식에 대입해 0이라면 받침이 없는 것이고. 그 외의 경우는 받침이 존재합니다. // 맨 마지막 글자에 받침이 있는지 찾아서 있다면 true, 없다면 false 를 반환 function isEndWithConsonant(korStr) 더보기…
React나 Vue 등의 SPA에서 볼 수 있는 SPA 라우팅을 흉내내는 예제입니다. 참고로 window.location.pathname을 이용한 URL 입력 기능을 실행하려면 SPA 라우팅을 지원하는 HTTP 서버가 필요합니다. 간단하게 설정할 수 있는 서버로 크롬 브라우저 플러그인인 Web Server for Chrome 을 소개합니다. 해당 앱을 실행하면 설정 창이 나옵니다. 여기서 index.html 파일이 있는 디렉토리를 더보기…
[프로그래머스/레벨2] 프린터 (자바스크립트) 문제 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 나머지 더보기…
참고: 자바스크립트: Fetch (외부 라이브러리 없이 AJAX 사용) 자바스크립트 Fetch APi에서 보냈던 요청을 취소하는 방법은 다음과 같습니다. 새로운 const abortController = new AbortController()를 생성 fetch 옵션에 signal: abortController.signal 추가 요청 취소를 원하는 타이밍에 abortController.abort() 실행 // <pre class=”result”></pre> // <button class=”btn-cancel”>로딩 취소</button> const init = () => { const 더보기…
[프로그래머스/레벨2] 기능개발 (자바스크립트) 문제 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 더보기…
출처: javascript #디자인패턴 – 메모이제이션 패턴 (memoization pattern) API 호출을 사용하여 검색 기능을 구현할 때 이미 입력한 적이 있는 검색어는 추가 요청을 하지 않고 캐시에 있는 결과를 가져다 써서 불필요한 네트워크 요청을 줄일 수 있습니다. 객체를 이용하는 방법 (async () => { let inputItemId = document.getElementById(“itemId”) // input[type=text] 요소 더보기…
[프로그래머스/레벨2] 주식가격 현재 자바스크립트는 풀이 가능 언어에 없습니다. 문제 초 단위로 기록된 주식가격이 담긴 배열 prices가 매개변수로 주어질 때, 가격이 떨어지지 않은 기간은 몇 초인지를 return 하도록 solution 함수를 완성하세요. 제한사항 prices의 각 가격은 1 이상 10,000 이하인 자연수입니다. prices의 길이는 2 이상 100,000 이하입니다. 입출력 예 [1, 더보기…
모달 창이란 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말합니다. 아래 그림에서 가운데 하얀색 부분이 그 예라고 할 수 있습니다. 이 모달창은 팝업과 비슷하게 정보를 전달하나 팝업과 다르게 별도의 창이나 탭을 생성하지 않고 페이지 내에서 레이어를 이용해 정보를 보여준다는 점이 차이점이라고 할 수 더보기…
[프로그래머스/레벨2] 다리를 지나는 트럭 (자바스크립트) 문제 트럭 여러 대가 강을 가로지르는 일 차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 트럭은 1초에 1만큼 움직이며, 다리 길이는 bridge_length이고 다리는 무게 weight까지 견딥니다. ※ 트럭이 다리에 완전히 오르지 않은 경우, 이 트럭의 무게는 고려하지 더보기…
기본적인 원리는 자바스크립트: 무한 스크롤 (스크롤 이벤트 이용, 라이브러리 없이) 이 글에 나온 것과 동일합니다. 스크롤 인디케이터(스크롤 상태 표시기)란 스크롤을 할 때 현재 스크롤된 영역이 전체 컨텐츠 영역의 몇 % 진행되었는가를 나타내는 표식입니다. 아래 그림에서 파란색 선이 스크롤 인디케이터입니다. 스크롤 인디케이터는 스크롤 정보를 얻어와 구현합니다. 스크롤 이벤트를 하면 이벤트 타겟에 scrollingElement라는 프로퍼티가 더보기…