Development (국비 복습 )/프로젝트5 API로 강아지 사진슬라이드 💡목표 -오픈 API를 이용하여 강아지 슬라이드 웹페이지를 구현한다. 📈 예상효과 -API의 쓰임을 알게된다. -자바스크립트의 async-await 을 사용하는 법을 알게된다. -자바스크립트 비동기 로직을 이해한다. 🔗관련문서 https://dog.ceo/dog-api/documentation/ 💭 아키텍처 구성 및 접근방법 계획 1.강아지 종류를 선택할 수 있는 를 이용하여 API소스의 데이터를 async를 이용하여 받는다. 2.받아온 데이터를 html로 구현한다. API (application programming interface)컴퓨터 사이의 통신을 쉽게 하는 연결해주는 인터페이스 [목표] https://dog.ceo/dog-api/documentation/ 여기있는 json형식으로 된 강아지 a.. 2023. 3. 11. 문벅스 커피메뉴 만들기 -(1) 입력시 메뉴판에 이름 추가 [기본설계] step1 요구사항 구현을 위한 전략 TODO 메뉴 추가 메뉴의 이름을 입력 받고 엔터키 입력으로 추가 추가되는 메뉴의 마크업은 '' 리스트로 넣는다 메뉴가 추가되고 나면 input은 빈 값으로 초기화한다 사용자 입력값이 빈 값이라면 추가되지 않는다. 1.TODO 메뉴 추가 function App(){ //form태그가 자동으로 전송되는걸 막아준다 document.querySelector("#espresso-menu-form") .addEventListener("submit",(e)=>{ e.preventDefault(); }) //input값 받아오는 곳 document.querySelector("#espresso-menu-name") .addEventListner("keypress",(e.. 2023. 3. 1. 문벅스 커피메뉴판 만들기 (개발환경 셋팅) 개발환경 셋팅 Prettier & esLint 설치 Extension에서 prettier 와 esLint를 설치해준다. Prettier는 코드를 이쁘게 만들어주는 것이고 (띄어쓰기를 많이하면 붙게 해주거나 등등) esLint는 문법 오류를 찾아내주는 extension이다. 특히 esLint는 현재 많은 회사에서 쓰고 있다. JSON 파일에 따로 설정을 만들어두기 ctrl+, 로 셋팅에가서 json파일을 찾는다 JSON은 생긴것만 봐도 객체랑 똑같이 생겼다. JSON의 용도는 외부 객체를 자바스크립트 객체로 잘 번역할 수 있도록 설정을 해두는 작업을 말한다. https://blog.makerjun.com/blackcoffee/moonbucks-guidebook 블랙커피 레벨1 문벅스 가이드북 Step0 —.. 2023. 2. 28. [JS]자바스크립트로 스탑워치 만들어보기 시 분 초 시작버튼 중단버튼 재설정버튼 1.시작버튼 클릭시 setInterval 함수를 이용해서 countTime()이 1초마다 실행되도록 한다 countTime()안에는 seconds++ 일초마다 늘어나며 , seconds가 60초가 되면 minutes minutes++가 60이 되면 hours로 설계 2.중단버튼 클릭시 clearInterval 이용해서 함수 호출 중단 3.재설정버튼 클릭시 clearInterval 이용해서 함수호출 중단 , 시분초 변수 0으로 재셋팅 , innerHTML = "00 : 00 00 " 표시 [참고] setInterval() 함수는 계속적으로 함수가 호출 되는 것, setTimeout은 지정된 시간에 함수가 한번 호출 되는 것임 60초 이후에 1분으로 안바뀌는 중 ..... 2023. 2. 25. 이전 1 2 다음
